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

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/form-field/index.ts
var form_field_exports = {};
__export(form_field_exports, {
  FormField: () => FormField2,
  useFormFieldControl: () => useFormFieldControl
});
module.exports = __toCommonJS(form_field_exports);

// src/form-field/FormField.tsx
var import_class_variance_authority = require("class-variance-authority");
var import_react4 = require("react");

// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};

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

// src/form-field/FormFieldProvider.tsx
var import_react3 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var FormFieldProvider = ({
  id,
  name,
  disabled = false,
  readOnly = false,
  state,
  isRequired,
  children
}) => {
  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
    setMessageIds((ids) => [...ids, msgId]);
  }, []);
  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
    setMessageIds((ids) => ids.filter((current) => current !== msgId));
  }, []);
  const value = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
};
FormFieldProvider.displayName = "FormFieldProvider";

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

// src/form-field/FormFieldStateMessage.tsx
var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
var import_Check = require("@spark-ui/icons/Check");
var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
var import_class_variance_authority4 = require("class-variance-authority");

// src/icon/Icon.tsx
var import_react5 = require("react");

// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    Component,
    {
      ...props,
      ref,
      style: {
        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
        position: "absolute",
        border: 0,
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...props.style
      }
    }
  );
};
VisuallyHidden.displayName = "VisuallyHidden";

// src/icon/Icon.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority2 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
  variants: {
    /**
     * Color scheme of the icon.
     */
    intent: (0, import_internal_utils.makeVariants)({
      current: ["text-current"],
      main: ["text-main"],
      support: ["text-support"],
      accent: ["text-accent"],
      basic: ["text-basic"],
      success: ["text-success"],
      alert: ["text-alert"],
      error: ["text-error"],
      info: ["text-info"],
      neutral: ["text-neutral"]
    }),
    /**
     * Sets the size of the icon.
     */
    size: (0, import_internal_utils.makeVariants)({
      current: ["u-current-font-size"],
      sm: ["w-sz-16", "h-sz-16"],
      md: ["w-sz-24", "h-sz-24"],
      lg: ["w-sz-32", "h-sz-32"],
      xl: ["w-sz-40", "h-sz-40"]
    })
  }
});

// src/icon/Icon.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Icon = ({
  label,
  className,
  size = "current",
  intent = "current",
  children,
  ...others
}) => {
  const child = import_react5.Children.only(children);
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
    (0, import_react5.cloneElement)(child, {
      className: iconStyles({ className, size, intent }),
      "data-spark-component": "icon",
      "aria-hidden": "true",
      focusable: "false",
      ...others
    }),
    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
  ] });
};
Icon.displayName = "Icon";

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

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

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

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

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

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

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

// src/form-field/FormFieldLabel.tsx
var import_class_variance_authority10 = require("class-variance-authority");

// src/label/Label.tsx
var import_class_variance_authority7 = require("class-variance-authority");
var import_radix_ui2 = require("radix-ui");
var import_jsx_runtime13 = require("react/jsx-runtime");
var Label = ({ className, ref, ...others }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
    import_radix_ui2.Label.Label,
    {
      ref,
      "data-spark-component": "label",
      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
      ...others
    }
  );
};
Label.displayName = "Label";

// src/label/LabelRequiredIndicator.tsx
var import_class_variance_authority8 = require("class-variance-authority");
var import_jsx_runtime14 = require("react/jsx-runtime");
var LabelRequiredIndicator = ({
  className,
  children = "*",
  ref,
  ...others
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
    "span",
    {
      ref,
      "data-spark-component": "label-required-indicator",
      role: "presentation",
      "aria-hidden": "true",
      className: (0, import_class_variance_authority8.cx)(className, "text-caption text-on-surface/dim-1"),
      ...others,
      children
    }
  );
};
LabelRequiredIndicator.displayName = "Label.RequiredIndicator";

// src/label/index.ts
var Label2 = Object.assign(Label, {
  RequiredIndicator: LabelRequiredIndicator
});
Label2.displayName = "Label";
LabelRequiredIndicator.displayName = "Label.RequiredIndicator";

// src/form-field/FormFieldRequiredIndicator.tsx
var import_class_variance_authority9 = require("class-variance-authority");
var import_jsx_runtime15 = require("react/jsx-runtime");
var FormFieldRequiredIndicator = ({
  className,
  ref,
  ...props
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
};
FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";

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

// src/form-field/FormFieldSuccessMessage.tsx
var import_jsx_runtime17 = require("react/jsx-runtime");
var FormFieldSuccessMessage = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
    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";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  FormField,
  useFormFieldControl
});
//# sourceMappingURL=index.js.map