@spark-ui/components/dist/form-field/index.mjs

Spark (Leboncoin design system) components.

import {
  Label
} from "../chunk-HLXYG643.mjs";
import {
  Icon
} from "../chunk-AESXFMCC.mjs";
import "../chunk-NBZKMCHF.mjs";
import {
  Slot,
  Slottable
} from "../chunk-4F5DOL57.mjs";

// src/form-field/FormField.tsx
import { cx } from "class-variance-authority";
import { useId as useId2 } from "react";

// src/form-field/FormFieldContext.tsx
import { createContext, useContext } from "react";
var FormFieldContext = createContext(null);
var ID_PREFIX = ":form-field";
var useFormField = () => {
  const context = useContext(FormFieldContext);
  if (!context) {
    throw Error("useFormField must be used within a FormField provider");
  }
  return context;
};

// src/form-field/FormFieldProvider.tsx
import { useCallback, useId, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";
var FormFieldProvider = ({
  id,
  name,
  disabled = false,
  readOnly = false,
  state,
  isRequired,
  children
}) => {
  const labelId = `${ID_PREFIX}-label-${useId()}`;
  const [messageIds, setMessageIds] = useState([]);
  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
  const handleMessageIdAdd = useCallback((msgId) => {
    setMessageIds((ids) => [...ids, msgId]);
  }, []);
  const handleMessageIdRemove = useCallback((msgId) => {
    setMessageIds((ids) => ids.filter((current) => current !== msgId));
  }, []);
  const value = useMemo(() => {
    const isInvalid = state === "error";
    return {
      id,
      labelId,
      name,
      disabled,
      readOnly,
      state,
      isRequired,
      isInvalid,
      description,
      onMessageIdAdd: handleMessageIdAdd,
      onMessageIdRemove: handleMessageIdRemove
    };
  }, [
    id,
    labelId,
    name,
    disabled,
    readOnly,
    description,
    state,
    isRequired,
    handleMessageIdAdd,
    handleMessageIdRemove
  ]);
  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children });
};
FormFieldProvider.displayName = "FormFieldProvider";

// src/form-field/FormField.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var FormField = ({
  className,
  disabled = false,
  readOnly = false,
  name,
  state,
  isRequired = false,
  asChild = false,
  ref,
  ...others
}) => {
  const id = `${ID_PREFIX}-${useId2()}`;
  const Component = asChild ? Slot : "div";
  return /* @__PURE__ */ jsx2(
    FormFieldProvider,
    {
      id,
      name,
      isRequired,
      disabled,
      readOnly,
      state,
      children: /* @__PURE__ */ jsx2(
        Component,
        {
          ref,
          "data-spark-component": "form-field",
          className: cx(className, "gap-sm flex flex-col"),
          ...others
        }
      )
    }
  );
};
FormField.displayName = "FormField";

// src/form-field/FormFieldStateMessage.tsx
import { AlertOutline } from "@spark-ui/icons/AlertOutline";
import { Check } from "@spark-ui/icons/Check";
import { WarningOutline } from "@spark-ui/icons/WarningOutline";
import { cx as cx3 } from "class-variance-authority";

// src/form-field/FormFieldMessage.tsx
import { cx as cx2 } from "class-variance-authority";
import { useEffect, useId as useId3 } from "react";
import { jsx as jsx3 } from "react/jsx-runtime";
var FormFieldMessage = ({
  id: idProp,
  className,
  ref,
  ...others
}) => {
  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
  const currentId = `${ID_PREFIX}-message-${useId3()}`;
  const id = idProp || currentId;
  useEffect(() => {
    onMessageIdAdd(id);
    return () => {
      onMessageIdRemove(id);
    };
  }, [id, onMessageIdAdd, onMessageIdRemove]);
  return /* @__PURE__ */ jsx3(
    "span",
    {
      ref,
      id,
      "data-spark-component": "form-field-message",
      className: cx2(className, "text-caption"),
      ...others
    }
  );
};
FormFieldMessage.displayName = "FormField.Message";

// src/form-field/FormFieldStateMessage.tsx
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
var FormFieldStateMessage = ({
  className,
  state,
  children,
  ref,
  ...others
}) => {
  const field = useFormField();
  if (field.state !== state) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    FormFieldMessage,
    {
      ref,
      "data-spark-component": "form-field-state-message",
      className: cx3(
        "gap-sm flex items-center",
        state === "error" ? "text-error" : "text-on-surface/dim-1",
        className
      ),
      ...others,
      children: [
        state === "alert" && /* @__PURE__ */ jsx4(Icon, { size: "sm", children: /* @__PURE__ */ jsx4(WarningOutline, {}) }),
        state === "error" && /* @__PURE__ */ jsx4(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ jsx4(AlertOutline, {}) }),
        state === "success" && /* @__PURE__ */ jsx4(Icon, { size: "sm", children: /* @__PURE__ */ jsx4(Check, {}) }),
        children
      ]
    }
  );
};
FormFieldStateMessage.displayName = "FormField.StateMessage";

// src/form-field/FormFieldAlertMessage.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
var FormFieldAlertMessage = ({ ref, ...props }) => {
  return /* @__PURE__ */ jsx5(
    FormFieldStateMessage,
    {
      ref,
      "data-spark-component": "form-field-alert-message",
      state: "alert",
      ...props
    }
  );
};
FormFieldAlertMessage.displayName = "FormField.AlertMessage";

// src/form-field/FormFieldCharactersCount.tsx
import { cx as cx4 } from "class-variance-authority";
import { jsx as jsx6 } from "react/jsx-runtime";
var FormFieldCharactersCount = ({
  className,
  value = "",
  maxLength,
  ref,
  ...others
}) => {
  const displayValue = `${value.length}/${maxLength}`;
  return /* @__PURE__ */ jsx6(
    "span",
    {
      ref,
      "data-spark-component": "form-field-characters-count",
      className: cx4(className, "text-caption", "text-neutral"),
      ...others,
      children: displayValue
    }
  );
};
FormFieldCharactersCount.displayName = "FormField.CharactersCount";

// src/form-field/FormFieldControl.tsx
import { useContext as useContext2 } from "react";
import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
var useFormFieldControl = () => {
  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = useContext2(FormFieldContext) || {};
  return {
    id,
    name,
    description,
    disabled,
    readOnly,
    state,
    labelId,
    isInvalid,
    isRequired
  };
};
var FormFieldControl = ({ children }) => {
  const props = useFormFieldControl();
  return /* @__PURE__ */ jsx7(Fragment, { children: children(props) });
};
FormFieldControl.displayName = "FormField.Control";

// src/form-field/FormFieldErrorMessage.tsx
import { jsx as jsx8 } from "react/jsx-runtime";
var FormFieldErrorMessage = ({ ref, ...props }) => {
  return /* @__PURE__ */ jsx8(
    FormFieldStateMessage,
    {
      ref,
      "data-spark-component": "form-field-error-message",
      state: "error",
      ...props
    }
  );
};
FormFieldErrorMessage.displayName = "FormField.ErrorMessage";

// src/form-field/FormFieldHelperMessage.tsx
import { cx as cx5 } from "class-variance-authority";
import { jsx as jsx9 } from "react/jsx-runtime";
var FormFieldHelperMessage = ({
  className,
  ref,
  ...others
}) => {
  return /* @__PURE__ */ jsx9(
    FormFieldMessage,
    {
      ref,
      "data-spark-component": "form-field-helper-message",
      className: cx5("text-on-surface/dim-1", className),
      ...others
    }
  );
};
FormFieldHelperMessage.displayName = "FormField.HelperMessage";

// src/form-field/FormFieldLabel.tsx
import { cx as cx7 } from "class-variance-authority";

// src/form-field/FormFieldRequiredIndicator.tsx
import { cx as cx6 } from "class-variance-authority";
import { jsx as jsx10 } from "react/jsx-runtime";
var FormFieldRequiredIndicator = ({
  className,
  ref,
  ...props
}) => {
  return /* @__PURE__ */ jsx10(Label.RequiredIndicator, { ref, className: cx6("ml-sm", className), ...props });
};
FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";

// src/form-field/FormFieldLabel.tsx
import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
var FormFieldLabel = ({
  htmlFor: htmlForProp,
  className,
  children,
  requiredIndicator = /* @__PURE__ */ jsx11(FormFieldRequiredIndicator, {}),
  asChild,
  ref,
  ...others
}) => {
  const control = useFormField();
  const { disabled, labelId, isRequired } = control;
  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
  return /* @__PURE__ */ jsx11(
    Label,
    {
      ref,
      id: labelId,
      "data-spark-component": "form-field-label",
      htmlFor,
      className: cx7(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
      asChild,
      ...others,
      children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
        /* @__PURE__ */ jsx11(Slottable, { children }),
        isRequired && requiredIndicator
      ] })
    }
  );
};
FormFieldLabel.displayName = "FormField.Label";

// src/form-field/FormFieldSuccessMessage.tsx
import { jsx as jsx12 } from "react/jsx-runtime";
var FormFieldSuccessMessage = ({ ref, ...props }) => {
  return /* @__PURE__ */ jsx12(
    FormFieldStateMessage,
    {
      ref,
      "data-spark-component": "form-field-success-message",
      state: "success",
      ...props
    }
  );
};
FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";

// src/form-field/index.ts
var FormField2 = Object.assign(FormField, {
  Label: FormFieldLabel,
  Control: FormFieldControl,
  StateMessage: FormFieldStateMessage,
  SuccessMessage: FormFieldSuccessMessage,
  AlertMessage: FormFieldAlertMessage,
  ErrorMessage: FormFieldErrorMessage,
  HelperMessage: FormFieldHelperMessage,
  RequiredIndicator: FormFieldRequiredIndicator,
  CharactersCount: FormFieldCharactersCount
});
FormField2.displayName = "FormField";
FormFieldLabel.displayName = "FormField.Label";
FormFieldControl.displayName = "FormField.Control";
FormFieldStateMessage.displayName = "FormField.StateMessage";
FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
FormFieldAlertMessage.displayName = "FormField.AlertMessage";
FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
FormFieldHelperMessage.displayName = "FormField.HelperMessage";
FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
FormFieldCharactersCount.displayName = "FormField.CharactersCount";
export {
  FormField2 as FormField,
  useFormFieldControl
};
//# sourceMappingURL=index.mjs.map