@spark-ui/components 10.11.13 → 10.12.0

package/dist/docgen.json

@@ -41490,6 +41490,27 @@
           ]
         }
       },
+      "size": {
+        "defaultValue": {
+          "value": "md"
+        },
+        "description": "",
+        "name": "size",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"md\" | \"lg\"",
+          "value": [
+            {
+              "value": "\"md\""
+            },
+            {
+              "value": "\"lg\""
+            }
+          ]
+        }
+      },
       "intent": {
         "defaultValue": {
           "value": "basic"
@@ -41548,6 +41569,30 @@
           ]
         }
       },
+      "shape": {
+        "defaultValue": {
+          "value": "pill"
+        },
+        "description": "",
+        "name": "shape",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"square\" | \"rounded\" | \"pill\"",
+          "value": [
+            {
+              "value": "\"square\""
+            },
+            {
+              "value": "\"rounded\""
+            },
+            {
+              "value": "\"pill\""
+            }
+          ]
+        }
+      },
       "ref": {
         "defaultValue": null,
         "description": "",
@@ -41569,13 +41614,6 @@
       }
     }
   },
-  "tw": {
-    "tags": {},
-    "description": "",
-    "displayName": "tw",
-    "methods": [],
-    "props": {}
-  },
   "TextLink": {
     "tags": {},
     "description": "",

package/dist/form-field/index.js

@@ -336,7 +336,7 @@ var FormFieldCharactersCount = ({
     }, 1e3);
     return () => clearTimeout(timeoutId);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ml-auto self-end", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ml-auto self-start", children: [
     description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormFieldMessage, { className: "default:sr-only", children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",

package/dist/form-field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form-field/index.ts","../../src/form-field/FormField.tsx","../../src/slot/Slot.tsx","../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/icon/Icon.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/label/Label.tsx","../../src/label/LabelRequiredIndicator.tsx","../../src/label/index.ts","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldSuccessMessage.tsx"],"sourcesContent":["import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-end\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { cx } from 'class-variance-authority'\nimport { Label as RadixLabel } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type LabelProps = RadixLabel.LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({ className, ref, ...others }: LabelProps) => {\n  return (\n    <RadixLabel.Label\n      ref={ref}\n      data-spark-component=\"label\"\n      className={cx('text-body-1', className)}\n      {...others}\n    />\n  )\n}\n\nLabel.displayName = 'Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nexport type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>\n\nexport const LabelRequiredIndicator = ({\n  className,\n  children = '*',\n  ref,\n  ...others\n}: LabelRequiredIndicatorProps) => {\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"label-required-indicator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cx(className, 'text-caption text-on-surface/dim-1')}\n      {...others}\n    >\n      {children}\n    </span>\n  )\n}\n\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n","import { Label as Root } from './Label'\nimport { LabelRequiredIndicator } from './LabelRequiredIndicator'\n\nexport const Label: typeof Root & {\n  RequiredIndicator: typeof LabelRequiredIndicator\n} = Object.assign(Root, {\n  RequiredIndicator: LabelRequiredIndicator,\n})\n\nLabel.displayName = 'Label'\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n\nexport type { LabelProps } from './Label'\nexport type { LabelRequiredIndicatorProps } from './LabelRequiredIndicator'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n"],"mappings":"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","names":["FormField","import_react","RadixSlot","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_class_variance_authority","import_radix_ui","import_jsx_runtime","RadixLabel","import_class_variance_authority","import_jsx_runtime","Label","import_class_variance_authority","import_jsx_runtime","Label","import_jsx_runtime","Label","import_jsx_runtime","FormField"]}
+{"version":3,"sources":["../../src/form-field/index.ts","../../src/form-field/FormField.tsx","../../src/slot/Slot.tsx","../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/icon/Icon.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/label/Label.tsx","../../src/label/LabelRequiredIndicator.tsx","../../src/label/index.ts","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldSuccessMessage.tsx"],"sourcesContent":["import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n  /**\n   * The svg icon that will be wrapped\n   */\n  children: ReactNode\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label?: string\n}\n\nexport const Icon = ({\n  label,\n  className,\n  size = 'current',\n  intent = 'current',\n  children,\n  ...others\n}: IconProps) => {\n  const child = Children.only(children)\n\n  return (\n    <>\n      {cloneElement(child as ReactElement<Record<string, any>>, {\n        className: iconStyles({ className, size, intent }),\n        'data-spark-component': 'icon',\n        'aria-hidden': 'true',\n        focusable: 'false',\n        ...others,\n      })}\n\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </>\n  )\n}\n\nIcon.displayName = 'Icon'\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n  variants: {\n    /**\n     * Color scheme of the icon.\n     */\n    intent: makeVariants<\n      'intent',\n      [\n        'current',\n        'main',\n        'support',\n        'accent',\n        'basic',\n        'success',\n        'alert',\n        'error',\n        'info',\n        'neutral',\n      ]\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\n      basic: ['text-basic'],\n      success: ['text-success'],\n      alert: ['text-alert'],\n      error: ['text-error'],\n      info: ['text-info'],\n      neutral: ['text-neutral'],\n    }),\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n      current: ['u-current-font-size'],\n      sm: ['w-sz-16', 'h-sz-16'],\n      md: ['w-sz-24', 'h-sz-24'],\n      lg: ['w-sz-32', 'h-sz-32'],\n      xl: ['w-sz-40', 'h-sz-40'],\n    }),\n  },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { cx } from 'class-variance-authority'\nimport { Label as RadixLabel } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type LabelProps = RadixLabel.LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({ className, ref, ...others }: LabelProps) => {\n  return (\n    <RadixLabel.Label\n      ref={ref}\n      data-spark-component=\"label\"\n      className={cx('text-body-1', className)}\n      {...others}\n    />\n  )\n}\n\nLabel.displayName = 'Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nexport type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>\n\nexport const LabelRequiredIndicator = ({\n  className,\n  children = '*',\n  ref,\n  ...others\n}: LabelRequiredIndicatorProps) => {\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"label-required-indicator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cx(className, 'text-caption text-on-surface/dim-1')}\n      {...others}\n    >\n      {children}\n    </span>\n  )\n}\n\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n","import { Label as Root } from './Label'\nimport { LabelRequiredIndicator } from './LabelRequiredIndicator'\n\nexport const Label: typeof Root & {\n  RequiredIndicator: typeof LabelRequiredIndicator\n} = Object.assign(Root, {\n  RequiredIndicator: LabelRequiredIndicator,\n})\n\nLabel.displayName = 'Label'\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n\nexport type { LabelProps } from './Label'\nexport type { LabelRequiredIndicatorProps } from './LabelRequiredIndicator'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n"],"mappings":"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","names":["FormField","import_react","RadixSlot","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_class_variance_authority","import_radix_ui","import_jsx_runtime","RadixLabel","import_class_variance_authority","import_jsx_runtime","Label","import_class_variance_authority","import_jsx_runtime","Label","import_jsx_runtime","Label","import_jsx_runtime","FormField"]}

package/dist/form-field/index.mjs

@@ -224,7 +224,7 @@ var FormFieldCharactersCount = ({
     }, 1e3);
     return () => clearTimeout(timeoutId);
   }, [value]);
-  return /* @__PURE__ */ jsxs2("span", { className: "ml-auto self-end", children: [
+  return /* @__PURE__ */ jsxs2("span", { className: "ml-auto self-start", children: [
     description && /* @__PURE__ */ jsx6(FormFieldMessage, { className: "default:sr-only", children: description }),
     /* @__PURE__ */ jsx6(
       "span",

package/dist/form-field/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form-field/FormField.tsx","../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-end\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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","names":["useId","jsx","useId","cx","cx","useId","jsx","useId","cx","jsx","cx","jsx","cx","useEffect","useState","jsx","jsxs","useState","useEffect","cx","useContext","jsx","useContext","jsx","cx","jsx","cx","cx","cx","jsx","cx","Fragment","jsx","jsxs","cx","jsx","FormField"]}
+{"version":3,"sources":["../../src/form-field/FormField.tsx","../../src/form-field/FormFieldContext.tsx","../../src/form-field/FormFieldProvider.tsx","../../src/form-field/FormFieldStateMessage.tsx","../../src/form-field/FormFieldMessage.tsx","../../src/form-field/FormFieldAlertMessage.tsx","../../src/form-field/FormFieldCharactersCount.tsx","../../src/form-field/FormFieldControl.tsx","../../src/form-field/FormFieldErrorMessage.tsx","../../src/form-field/FormFieldHelperMessage.tsx","../../src/form-field/FormFieldLabel.tsx","../../src/form-field/FormFieldRequiredIndicator.tsx","../../src/form-field/FormFieldSuccessMessage.tsx","../../src/form-field/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-sm flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps\n  extends Pick<\n    FormFieldContextState,\n    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n  > {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(className, disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined)}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n  className,\n  ref,\n  ...props\n}: FormFieldRequiredIndicatorProps) => {\n  return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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","names":["useId","jsx","useId","cx","cx","useId","jsx","useId","cx","jsx","cx","jsx","cx","useEffect","useState","jsx","jsxs","useState","useEffect","cx","useContext","jsx","useContext","jsx","cx","jsx","cx","cx","cx","jsx","cx","Fragment","jsx","jsxs","cx","jsx","FormField"]}

package/dist/tag/index.d.mts

@@ -5,6 +5,8 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const tagStyles: (props?: ({
     design?: "filled" | "outlined" | "tinted" | null | undefined;
+    size?: "md" | "lg" | null | undefined;
+    shape?: "square" | "rounded" | "pill" | null | undefined;
     intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "danger" | "info" | "neutral" | "surface" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TagStylesProps = VariantProps<typeof tagStyles>;
@@ -22,6 +24,6 @@ interface FilteredDesignIntent<Design extends TagProps['design'], K extends TagS
 }
 type ValidTagDesignIntent = FilteredDesignIntent<'tinted', 'surface'> | FilteredDesignIntent<'outlined', 'surface'> | FilteredDesignIntent<'filled'>;
 type TagProps = BaseTagProps & ValidTagDesignIntent;
-declare const Tag: ({ design, intent, asChild, className, ref, ...others }: TagProps) => react_jsx_runtime.JSX.Element;
+declare const Tag: ({ design, intent, size, shape, asChild, className, ref, ...others }: TagProps) => react_jsx_runtime.JSX.Element;
 
 export { Tag, type TagProps, type ValidTagDesignIntent };

package/dist/tag/index.d.ts

@@ -5,6 +5,8 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const tagStyles: (props?: ({
     design?: "filled" | "outlined" | "tinted" | null | undefined;
+    size?: "md" | "lg" | null | undefined;
+    shape?: "square" | "rounded" | "pill" | null | undefined;
     intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "danger" | "info" | "neutral" | "surface" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TagStylesProps = VariantProps<typeof tagStyles>;
@@ -22,6 +24,6 @@ interface FilteredDesignIntent<Design extends TagProps['design'], K extends TagS
 }
 type ValidTagDesignIntent = FilteredDesignIntent<'tinted', 'surface'> | FilteredDesignIntent<'outlined', 'surface'> | FilteredDesignIntent<'filled'>;
 type TagProps = BaseTagProps & ValidTagDesignIntent;
-declare const Tag: ({ design, intent, asChild, className, ref, ...others }: TagProps) => react_jsx_runtime.JSX.Element;
+declare const Tag: ({ design, intent, size, shape, asChild, className, ref, ...others }: TagProps) => react_jsx_runtime.JSX.Element;
 
 export { Tag, type TagProps, type ValidTagDesignIntent };

package/dist/tag/index.js

@@ -34,161 +34,161 @@ var Slot = ({ ref, ...props }) => {
 };
 
 // src/tag/Tag.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
+var import_internal_utils4 = require("@spark-ui/internal-utils");
 var import_class_variance_authority = require("class-variance-authority");
 
-// src/tag/variants/default.ts
-var tw = (a) => a;
-
 // src/tag/variants/filled.ts
+var import_internal_utils = require("@spark-ui/internal-utils");
 var filledVariants = [
   {
     intent: "main",
     design: "filled",
-    class: tw(["bg-main", "text-on-main"])
+    class: (0, import_internal_utils.tw)(["bg-main", "text-on-main"])
   },
   {
     intent: "support",
     design: "filled",
-    class: tw(["bg-support", "text-on-support"])
+    class: (0, import_internal_utils.tw)(["bg-support", "text-on-support"])
   },
   {
     intent: "accent",
     design: "filled",
-    class: tw(["bg-accent", "text-on-accent"])
+    class: (0, import_internal_utils.tw)(["bg-accent", "text-on-accent"])
   },
   {
     intent: "basic",
     design: "filled",
-    class: tw(["bg-basic", "text-on-basic"])
+    class: (0, import_internal_utils.tw)(["bg-basic", "text-on-basic"])
   },
   {
     intent: "success",
     design: "filled",
-    class: tw(["bg-success", "text-on-success"])
+    class: (0, import_internal_utils.tw)(["bg-success", "text-on-success"])
   },
   {
     intent: "alert",
     design: "filled",
-    class: tw(["bg-alert", "text-on-alert"])
+    class: (0, import_internal_utils.tw)(["bg-alert", "text-on-alert"])
   },
   {
     intent: "danger",
     design: "filled",
-    class: tw(["bg-error", "text-on-error"])
+    class: (0, import_internal_utils.tw)(["bg-error", "text-on-error"])
   },
   {
     intent: "info",
     design: "filled",
-    class: tw(["bg-info", "text-on-info"])
+    class: (0, import_internal_utils.tw)(["bg-info", "text-on-info"])
   },
   {
     intent: "neutral",
     design: "filled",
-    class: tw(["bg-neutral", "text-on-neutral"])
+    class: (0, import_internal_utils.tw)(["bg-neutral", "text-on-neutral"])
   },
   {
     intent: "surface",
     design: "filled",
-    class: tw(["bg-surface", "text-on-surface"])
+    class: (0, import_internal_utils.tw)(["bg-surface", "text-on-surface"])
   }
 ];
 
 // src/tag/variants/outlined.ts
+var import_internal_utils2 = require("@spark-ui/internal-utils");
 var outlinedVariants = [
   {
     intent: "main",
     design: "outlined",
-    class: tw(["text-main"])
+    class: (0, import_internal_utils2.tw)(["text-main"])
   },
   {
     intent: "support",
     design: "outlined",
-    class: tw(["text-support"])
+    class: (0, import_internal_utils2.tw)(["text-support"])
   },
   {
     intent: "accent",
     design: "outlined",
-    class: tw(["text-accent"])
+    class: (0, import_internal_utils2.tw)(["text-accent"])
   },
   {
     intent: "basic",
     design: "outlined",
-    class: tw(["text-basic"])
+    class: (0, import_internal_utils2.tw)(["text-basic"])
   },
   {
     intent: "success",
     design: "outlined",
-    class: tw(["text-success"])
+    class: (0, import_internal_utils2.tw)(["text-success"])
   },
   {
     intent: "alert",
     design: "outlined",
-    class: tw(["text-alert"])
+    class: (0, import_internal_utils2.tw)(["text-alert"])
   },
   {
     intent: "danger",
     design: "outlined",
-    class: tw(["text-error"])
+    class: (0, import_internal_utils2.tw)(["text-error"])
   },
   {
     intent: "info",
     design: "outlined",
-    class: tw(["text-info"])
+    class: (0, import_internal_utils2.tw)(["text-info"])
   },
   {
     intent: "neutral",
     design: "outlined",
-    class: tw(["text-neutral"])
+    class: (0, import_internal_utils2.tw)(["text-neutral"])
   }
 ];
 
 // src/tag/variants/tinted.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
 var tintedVariants = [
   {
     intent: "main",
     design: "tinted",
-    class: tw(["bg-main-container", "text-on-main-container"])
+    class: (0, import_internal_utils3.tw)(["bg-main-container", "text-on-main-container"])
   },
   {
     intent: "support",
     design: "tinted",
-    class: tw(["bg-support-container", "text-on-support-container"])
+    class: (0, import_internal_utils3.tw)(["bg-support-container", "text-on-support-container"])
   },
   {
     intent: "accent",
     design: "tinted",
-    class: tw(["bg-accent-container", "text-on-accent-container"])
+    class: (0, import_internal_utils3.tw)(["bg-accent-container", "text-on-accent-container"])
   },
   {
     intent: "basic",
     design: "tinted",
-    class: tw(["bg-basic-container", "text-on-basic-container"])
+    class: (0, import_internal_utils3.tw)(["bg-basic-container", "text-on-basic-container"])
   },
   {
     intent: "success",
     design: "tinted",
-    class: tw(["bg-success-container", "text-on-success-container"])
+    class: (0, import_internal_utils3.tw)(["bg-success-container", "text-on-success-container"])
   },
   {
     intent: "alert",
     design: "tinted",
-    class: tw(["bg-alert-container", "text-on-alert-container"])
+    class: (0, import_internal_utils3.tw)(["bg-alert-container", "text-on-alert-container"])
   },
   {
     intent: "danger",
     design: "tinted",
-    class: tw(["bg-error-container", "text-on-error-container"])
+    class: (0, import_internal_utils3.tw)(["bg-error-container", "text-on-error-container"])
   },
   {
     intent: "info",
     design: "tinted",
-    class: tw(["bg-info-container", "text-on-info-container"])
+    class: (0, import_internal_utils3.tw)(["bg-info-container", "text-on-info-container"])
   },
   {
     intent: "neutral",
     design: "tinted",
-    class: tw(["bg-neutral-container", "text-on-neutral-container"])
+    class: (0, import_internal_utils3.tw)(["bg-neutral-container", "text-on-neutral-container"])
   }
 ];
 
@@ -197,8 +197,7 @@ var tagStyles = (0, import_class_variance_authority.cva)(
   [
     "box-border inline-flex items-center justify-center gap-sm whitespace-nowrap",
     "text-caption font-bold",
-    "h-sz-20 px-md",
-    "rounded-full"
+    "px-md"
   ],
   {
     variants: {
@@ -208,15 +207,24 @@ var tagStyles = (0, import_class_variance_authority.cva)(
        * - `outlined`: Tag will have a surface background with an colored outline/text.
        * - `tinted`: Tag will be filled but using a lighter color scheme.
        */
-      design: (0, import_internal_utils.makeVariants)({
+      design: (0, import_internal_utils4.makeVariants)({
         filled: [],
         outlined: ["border-sm", "border-current"],
         tinted: []
       }),
+      size: (0, import_internal_utils4.makeVariants)({
+        md: ["h-sz-20"],
+        lg: ["h-sz-24"]
+      }),
+      shape: (0, import_internal_utils4.makeVariants)({
+        square: [],
+        rounded: ["rounded-md"],
+        pill: ["rounded-full"]
+      }),
       /**
        * Color scheme of the tag.
        */
-      intent: (0, import_internal_utils.makeVariants)({
+      intent: (0, import_internal_utils4.makeVariants)({
         main: [],
         support: [],
         accent: [],
@@ -232,7 +240,9 @@ var tagStyles = (0, import_class_variance_authority.cva)(
     compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],
     defaultVariants: {
       design: "filled",
-      intent: "basic"
+      intent: "basic",
+      size: "md",
+      shape: "pill"
     }
   }
 );
@@ -242,6 +252,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var Tag = ({
   design = "filled",
   intent = "basic",
+  size = "md",
+  shape = "pill",
   asChild,
   className,
   ref,
@@ -256,7 +268,9 @@ var Tag = ({
       className: tagStyles({
         className,
         design,
-        intent
+        intent,
+        size,
+        shape
       }),
       ...others
     }

package/dist/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tag/index.ts","../../src/slot/Slot.tsx","../../src/tag/Tag.styles.tsx","../../src/tag/variants/default.ts","../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.tsx"],"sourcesContent":["export * from './Tag'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border inline-flex items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption font-bold',\n    'h-sz-20 px-md',\n    'rounded-full',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'info',\n          'neutral',\n          'danger',\n          'surface',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'basic',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","export const tw = <T>(a: T): T => a\n","import { tw } from './default'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw(['bg-basic', 'text-on-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw(['text-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw(['bg-basic-container', 'text-on-basic-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n    TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n  design = 'filled',\n  intent = 'basic',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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","names":["RadixSlot","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/tag/index.ts","../../src/slot/Slot.tsx","../../src/tag/Tag.styles.tsx","../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.tsx"],"sourcesContent":["export * from './Tag'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border inline-flex items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption font-bold',\n    'px-md',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      size: makeVariants<'size', ['md', 'lg']>({\n        md: ['h-sz-20'],\n        lg: ['h-sz-24'],\n      }),\n      shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n        square: [],\n        rounded: ['rounded-md'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'info',\n          'neutral',\n          'danger',\n          'surface',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'basic',\n      size: 'md',\n      shape: 'pill',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw(['bg-basic', 'text-on-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw(['text-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw(['bg-basic-container', 'text-on-basic-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n    TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n  design = 'filled',\n  intent = 'basic',\n  size = 'md',\n  shape = 'pill',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n        size,\n        shape,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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","names":["RadixSlot","import_internal_utils","import_internal_utils","import_internal_utils","import_jsx_runtime"]}

package/dist/tag/index.mjs

@@ -6,10 +6,8 @@ import {
 import { makeVariants } from "@spark-ui/internal-utils";
 import { cva } from "class-variance-authority";
 
-// src/tag/variants/default.ts
-var tw = (a) => a;
-
 // src/tag/variants/filled.ts
+import { tw } from "@spark-ui/internal-utils";
 var filledVariants = [
   {
     intent: "main",
@@ -64,100 +62,102 @@ var filledVariants = [
 ];
 
 // src/tag/variants/outlined.ts
+import { tw as tw2 } from "@spark-ui/internal-utils";
 var outlinedVariants = [
   {
     intent: "main",
     design: "outlined",
-    class: tw(["text-main"])
+    class: tw2(["text-main"])
   },
   {
     intent: "support",
     design: "outlined",
-    class: tw(["text-support"])
+    class: tw2(["text-support"])
   },
   {
     intent: "accent",
     design: "outlined",
-    class: tw(["text-accent"])
+    class: tw2(["text-accent"])
   },
   {
     intent: "basic",
     design: "outlined",
-    class: tw(["text-basic"])
+    class: tw2(["text-basic"])
   },
   {
     intent: "success",
     design: "outlined",
-    class: tw(["text-success"])
+    class: tw2(["text-success"])
   },
   {
     intent: "alert",
     design: "outlined",
-    class: tw(["text-alert"])
+    class: tw2(["text-alert"])
   },
   {
     intent: "danger",
     design: "outlined",
-    class: tw(["text-error"])
+    class: tw2(["text-error"])
   },
   {
     intent: "info",
     design: "outlined",
-    class: tw(["text-info"])
+    class: tw2(["text-info"])
   },
   {
     intent: "neutral",
     design: "outlined",
-    class: tw(["text-neutral"])
+    class: tw2(["text-neutral"])
   }
 ];
 
 // src/tag/variants/tinted.ts
+import { tw as tw3 } from "@spark-ui/internal-utils";
 var tintedVariants = [
   {
     intent: "main",
     design: "tinted",
-    class: tw(["bg-main-container", "text-on-main-container"])
+    class: tw3(["bg-main-container", "text-on-main-container"])
   },
   {
     intent: "support",
     design: "tinted",
-    class: tw(["bg-support-container", "text-on-support-container"])
+    class: tw3(["bg-support-container", "text-on-support-container"])
   },
   {
     intent: "accent",
     design: "tinted",
-    class: tw(["bg-accent-container", "text-on-accent-container"])
+    class: tw3(["bg-accent-container", "text-on-accent-container"])
   },
   {
     intent: "basic",
     design: "tinted",
-    class: tw(["bg-basic-container", "text-on-basic-container"])
+    class: tw3(["bg-basic-container", "text-on-basic-container"])
   },
   {
     intent: "success",
     design: "tinted",
-    class: tw(["bg-success-container", "text-on-success-container"])
+    class: tw3(["bg-success-container", "text-on-success-container"])
   },
   {
     intent: "alert",
     design: "tinted",
-    class: tw(["bg-alert-container", "text-on-alert-container"])
+    class: tw3(["bg-alert-container", "text-on-alert-container"])
   },
   {
     intent: "danger",
     design: "tinted",
-    class: tw(["bg-error-container", "text-on-error-container"])
+    class: tw3(["bg-error-container", "text-on-error-container"])
   },
   {
     intent: "info",
     design: "tinted",
-    class: tw(["bg-info-container", "text-on-info-container"])
+    class: tw3(["bg-info-container", "text-on-info-container"])
   },
   {
     intent: "neutral",
     design: "tinted",
-    class: tw(["bg-neutral-container", "text-on-neutral-container"])
+    class: tw3(["bg-neutral-container", "text-on-neutral-container"])
   }
 ];
 
@@ -166,8 +166,7 @@ var tagStyles = cva(
   [
     "box-border inline-flex items-center justify-center gap-sm whitespace-nowrap",
     "text-caption font-bold",
-    "h-sz-20 px-md",
-    "rounded-full"
+    "px-md"
   ],
   {
     variants: {
@@ -182,6 +181,15 @@ var tagStyles = cva(
         outlined: ["border-sm", "border-current"],
         tinted: []
       }),
+      size: makeVariants({
+        md: ["h-sz-20"],
+        lg: ["h-sz-24"]
+      }),
+      shape: makeVariants({
+        square: [],
+        rounded: ["rounded-md"],
+        pill: ["rounded-full"]
+      }),
       /**
        * Color scheme of the tag.
        */
@@ -201,7 +209,9 @@ var tagStyles = cva(
     compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],
     defaultVariants: {
       design: "filled",
-      intent: "basic"
+      intent: "basic",
+      size: "md",
+      shape: "pill"
     }
   }
 );
@@ -211,6 +221,8 @@ import { jsx } from "react/jsx-runtime";
 var Tag = ({
   design = "filled",
   intent = "basic",
+  size = "md",
+  shape = "pill",
   asChild,
   className,
   ref,
@@ -225,7 +237,9 @@ var Tag = ({
       className: tagStyles({
         className,
         design,
-        intent
+        intent,
+        size,
+        shape
       }),
       ...others
     }

package/dist/tag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tag/Tag.styles.tsx","../../src/tag/variants/default.ts","../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border inline-flex items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption font-bold',\n    'h-sz-20 px-md',\n    'rounded-full',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'info',\n          'neutral',\n          'danger',\n          'surface',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'basic',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","export const tw = <T>(a: T): T => a\n","import { tw } from './default'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw(['bg-basic', 'text-on-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw(['text-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from './default'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw(['bg-basic-container', 'text-on-basic-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n    TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n  design = 'filled',\n  intent = 'basic',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/tag/Tag.styles.tsx","../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border inline-flex items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption font-bold',\n    'px-md',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      size: makeVariants<'size', ['md', 'lg']>({\n        md: ['h-sz-20'],\n        lg: ['h-sz-24'],\n      }),\n      shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n        square: [],\n        rounded: ['rounded-md'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'info',\n          'neutral',\n          'danger',\n          'surface',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'basic',\n      size: 'md',\n      shape: 'pill',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw(['bg-basic', 'text-on-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw(['text-basic']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw(['bg-basic-container', 'text-on-basic-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>,\n    TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\nexport const Tag = ({\n  design = 'filled',\n  intent = 'basic',\n  size = 'md',\n  shape = 'pill',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n        size,\n        shape,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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","names":["tw","tw"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "10.11.13",
+  "version": "10.12.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -53,9 +53,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^10.11.13",
-    "@spark-ui/icons": "^10.11.13",
-    "@spark-ui/internal-utils": "^10.11.13",
+    "@spark-ui/hooks": "^10.12.0",
+    "@spark-ui/icons": "^10.12.0",
+    "@spark-ui/internal-utils": "^10.12.0",
     "@zag-js/pagination": "1.14.0",
     "@zag-js/react": "1.14.0",
     "class-variance-authority": "0.7.1",
@@ -82,5 +82,5 @@
     "url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
   },
   "homepage": "https://sparkui.vercel.app",
-  "gitHead": "07ad5d7ce91b5ef16bcd9a004bdc6767620f4c5d"
+  "gitHead": "a96c00c6af388248f768a69aebb341949f4f32e8"
 }