@spark-ui/components 10.18.1 → 10.19.1

package/dist/avatar/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import * as React$1 from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
 interface AvatarImageProps$1 extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -45,7 +45,7 @@ declare const AvatarPlaceholder: {
     displayName: string;
 };
 
-interface AvatarProps extends react.HTMLAttributes<HTMLDivElement> {
+interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     isOnline?: boolean;
     onlineText?: string;

package/dist/avatar/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import * as React$1 from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
 interface AvatarImageProps$1 extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -45,7 +45,7 @@ declare const AvatarPlaceholder: {
     displayName: string;
 };
 
-interface AvatarProps extends react.HTMLAttributes<HTMLDivElement> {
+interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     isOnline?: boolean;
     onlineText?: string;

package/dist/docgen.json

@@ -43840,6 +43840,362 @@
       }
     }
   },
+  "Toast": {
+    "tags": {},
+    "description": "",
+    "displayName": "Toast",
+    "methods": [],
+    "props": {
+      "toast": {
+        "defaultValue": null,
+        "description": "",
+        "name": "toast",
+        "declarations": [
+          {
+            "fileName": "src/toast/Toast.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "ToastObject"
+        }
+      }
+    }
+  },
+  "ToastProvider": {
+    "tags": {},
+    "description": "",
+    "displayName": "ToastProvider",
+    "methods": [],
+    "props": {
+      "timeout": {
+        "defaultValue": {
+          "value": "5000"
+        },
+        "description": "The default amount of time (in ms) before a toast is auto dismissed.\nA value of `0` will prevent the toast from being dismissed automatically.",
+        "name": "timeout",
+        "parent": {
+          "fileName": "spark-web/node_modules/@base-ui-components/react/toast/provider/ToastProvider.d.ts",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/@base-ui-components/react/toast/provider/ToastProvider.d.ts",
+            "name": "Props"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "limit": {
+        "defaultValue": {
+          "value": 3
+        },
+        "description": "The maximum number of toasts that can be displayed at once.\nWhen the limit is reached, the oldest toast will be removed to make room for the new one.",
+        "name": "limit",
+        "parent": {
+          "fileName": "spark-web/node_modules/@base-ui-components/react/toast/provider/ToastProvider.d.ts",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/@base-ui-components/react/toast/provider/ToastProvider.d.ts",
+            "name": "Props"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "toastManager": {
+        "defaultValue": null,
+        "description": "A global manager for toasts to use outside of a React component.",
+        "name": "toastManager",
+        "parent": {
+          "fileName": "spark-web/node_modules/@base-ui-components/react/toast/provider/ToastProvider.d.ts",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/@base-ui-components/react/toast/provider/ToastProvider.d.ts",
+            "name": "Props"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ToastManager"
+        }
+      }
+    }
+  },
+  "ToastTrigger": {
+    "tags": {},
+    "description": "",
+    "displayName": "ToastTrigger",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "",
+        "name": "asChild",
+        "parent": {
+          "fileName": "src/toast/index.tsx",
+          "name": "ToastTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/toast/index.tsx",
+            "name": "ToastTriggerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "title": {
+        "defaultValue": null,
+        "description": "",
+        "name": "title",
+        "parent": {
+          "fileName": "src/toast/index.tsx",
+          "name": "ToastTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/toast/index.tsx",
+            "name": "ToastTriggerProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "description": {
+        "defaultValue": null,
+        "description": "",
+        "name": "description",
+        "parent": {
+          "fileName": "src/toast/index.tsx",
+          "name": "ToastTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/toast/index.tsx",
+            "name": "ToastTriggerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "timeout": {
+        "defaultValue": {
+          "value": 5000
+        },
+        "description": "",
+        "name": "timeout",
+        "parent": {
+          "fileName": "src/toast/index.tsx",
+          "name": "ToastTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/toast/index.tsx",
+            "name": "ToastTriggerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "priority": {
+        "defaultValue": {
+          "value": "low"
+        },
+        "description": "The priority of the toast.\n- `low` - The toast will be announced politely.\n- `high` - The toast will be announced urgently.",
+        "name": "priority",
+        "parent": {
+          "fileName": "spark-web/node_modules/@base-ui-components/react/toast/useToastManager.d.ts",
+          "name": "ToastObject"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/@base-ui-components/react/toast/useToastManager.d.ts",
+            "name": "ToastObject"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"high\" | \"low\"",
+          "value": [
+            {
+              "value": "\"high\""
+            },
+            {
+              "value": "\"low\""
+            }
+          ]
+        }
+      },
+      "design": {
+        "defaultValue": {
+          "value": "filled"
+        },
+        "description": "",
+        "name": "design",
+        "parent": {
+          "fileName": "components/src/toast/types.ts",
+          "name": "ToastData"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/toast/types.ts",
+            "name": "ToastData"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ToastDesign",
+          "value": [
+            {
+              "value": "\"filled\""
+            },
+            {
+              "value": "\"tinted\""
+            }
+          ]
+        }
+      },
+      "intent": {
+        "defaultValue": {
+          "value": "neutral"
+        },
+        "description": "",
+        "name": "intent",
+        "parent": {
+          "fileName": "components/src/toast/types.ts",
+          "name": "ToastData"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/toast/types.ts",
+            "name": "ToastData"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ToastIntent",
+          "value": [
+            {
+              "value": "\"main\""
+            },
+            {
+              "value": "\"alert\""
+            },
+            {
+              "value": "\"support\""
+            },
+            {
+              "value": "\"accent\""
+            },
+            {
+              "value": "\"success\""
+            },
+            {
+              "value": "\"info\""
+            },
+            {
+              "value": "\"neutral\""
+            },
+            {
+              "value": "\"surface\""
+            },
+            {
+              "value": "\"basic\""
+            },
+            {
+              "value": "\"error\""
+            },
+            {
+              "value": "\"surfaceInverse\""
+            }
+          ]
+        }
+      },
+      "icon": {
+        "defaultValue": null,
+        "description": "",
+        "name": "icon",
+        "parent": {
+          "fileName": "components/src/toast/types.ts",
+          "name": "ToastData"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/toast/types.ts",
+            "name": "ToastData"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "isClosable": {
+        "defaultValue": {
+          "value": true
+        },
+        "description": "",
+        "name": "isClosable",
+        "parent": {
+          "fileName": "components/src/toast/types.ts",
+          "name": "ToastData"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/toast/types.ts",
+            "name": "ToastData"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "action": {
+        "defaultValue": null,
+        "description": "",
+        "name": "action",
+        "parent": {
+          "fileName": "components/src/toast/types.ts",
+          "name": "ToastData"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/toast/types.ts",
+            "name": "ToastData"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      }
+    }
+  },
   "VisuallyHidden": {
     "tags": {},
     "description": "",

package/dist/stepper/index.js

@@ -207,7 +207,7 @@ var Input = ({ className, ...props }) => {
       "data-spark-component": "stepper-input",
       className: (0, import_class_variance_authority3.cx)(
         // Base styles
-        "bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center",
+        "bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center",
         "first:border-l-sm first:rounded-l-lg",
         "last:border-r-sm last:rounded-r-lg",
         // State styles
@@ -263,7 +263,14 @@ var Root = ({
       step,
       ...field.id && { id: field.id },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_number_field3.NumberField.Group, { className: (0, import_class_variance_authority4.cx)("group flex", className), "data-field-state": state, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_number_field3.NumberField.Group,
+        {
+          className: (0, import_class_variance_authority4.cx)("group relative inline-flex w-full", className),
+          "data-field-state": state,
+          children
+        }
+      )
     }
   );
 };

package/dist/stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/stepper/index.ts","../../src/stepper/Buttons.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx"],"sourcesContent":["import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\n\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n  [\n    // Base styles\n    'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n    'hover:bg-neutral/dim-5',\n    // Disabled and ReadOnly styles\n    'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n    'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n    'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n    // State styles\n    'group-data-[field-state=error]:border-error',\n    'group-data-[field-state=alert]:border-alert',\n    'group-data-[field-state=success]:border-success',\n  ],\n  {\n    variants: {\n      placement: {\n        left: 'rounded-l-lg',\n        right: 'rounded-r-lg',\n      },\n    },\n  }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Decrement\n      data-spark-component=\"stepper-decrement-button\"\n      className={styles({\n        placement: 'left',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Minus />\n        </Icon>\n      )}\n    </NumberField.Decrement>\n  )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Increment\n      data-spark-component=\"stepper-increment-button\"\n      className={styles({\n        placement: 'right',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Plus />\n        </Icon>\n      )}\n    </NumberField.Increment>\n  )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\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 { 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 { 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 { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n  children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n  const field = useFormFieldControl()\n\n  return (\n    <NumberField.Input\n      data-spark-component=\"stepper-input\"\n      className={cx(\n        // Base styles\n        'bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center',\n        'first:border-l-sm first:rounded-l-lg',\n        'last:border-r-sm last:rounded-r-lg',\n        // State styles\n        'group-data-[field-state=error]:border-error',\n        'group-data-[field-state=alert]:border-alert',\n        'group-data-[field-state=success]:border-success',\n        '',\n        // Disabled and ReadOnly styles\n        'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n        'data-[readonly]:bg-on-surface/dim-5',\n        // Focus styles\n        'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n        className\n      )}\n      {...(field.description && { 'aria-describedby': field.description })}\n      {...(field.isRequired && { required: true })}\n      {...(field.state === 'error' && { 'aria-invalid': true })}\n      {...props}\n    />\n  )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n  children,\n  allowWheelScrub = true,\n  state: stateProp,\n  minValue,\n  maxValue,\n  formatOptions,\n  step: stepProp,\n  className,\n  ...props\n}: StepperProps) => {\n  const render = useRenderSlot(true, 'div')\n\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n\n  /**\n   * By default, a percent format will increment in steps of 1 (100% on each increment)\n   */\n  const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n  return (\n    <NumberField.Root\n      data-spark-component=\"stepper\"\n      allowWheelScrub={allowWheelScrub}\n      render={render}\n      min={minValue}\n      max={maxValue}\n      format={formatOptions}\n      step={step}\n      {...(field.id && { id: field.id })}\n      {...props}\n    >\n      <NumberField.Group className={cx('group flex', className)} data-field-state={state}>\n        {children}\n      </NumberField.Group>\n    </NumberField.Root>\n  )\n}\n\nRoot.displayName = 'Stepper'\n"],"mappings":"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","names":["import_class_variance_authority","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_number_field","import_class_variance_authority","import_jsx_runtime","import_number_field","import_form_field","import_class_variance_authority","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/stepper/index.ts","../../src/stepper/Buttons.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx"],"sourcesContent":["import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\n\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n  [\n    // Base styles\n    'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n    'hover:bg-neutral/dim-5',\n    // Disabled and ReadOnly styles\n    'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n    'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n    'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n    // State styles\n    'group-data-[field-state=error]:border-error',\n    'group-data-[field-state=alert]:border-alert',\n    'group-data-[field-state=success]:border-success',\n  ],\n  {\n    variants: {\n      placement: {\n        left: 'rounded-l-lg',\n        right: 'rounded-r-lg',\n      },\n    },\n  }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Decrement\n      data-spark-component=\"stepper-decrement-button\"\n      className={styles({\n        placement: 'left',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Minus />\n        </Icon>\n      )}\n    </NumberField.Decrement>\n  )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Increment\n      data-spark-component=\"stepper-increment-button\"\n      className={styles({\n        placement: 'right',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Plus />\n        </Icon>\n      )}\n    </NumberField.Increment>\n  )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\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 { 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 { 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 { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n  children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n  const field = useFormFieldControl()\n\n  return (\n    <NumberField.Input\n      data-spark-component=\"stepper-input\"\n      className={cx(\n        // Base styles\n        'bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center',\n        'first:border-l-sm first:rounded-l-lg',\n        'last:border-r-sm last:rounded-r-lg',\n        // State styles\n        'group-data-[field-state=error]:border-error',\n        'group-data-[field-state=alert]:border-alert',\n        'group-data-[field-state=success]:border-success',\n        '',\n        // Disabled and ReadOnly styles\n        'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n        'data-[readonly]:bg-on-surface/dim-5',\n        // Focus styles\n        'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n        className\n      )}\n      {...(field.description && { 'aria-describedby': field.description })}\n      {...(field.isRequired && { required: true })}\n      {...(field.state === 'error' && { 'aria-invalid': true })}\n      {...props}\n    />\n  )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n  children,\n  allowWheelScrub = true,\n  state: stateProp,\n  minValue,\n  maxValue,\n  formatOptions,\n  step: stepProp,\n  className,\n  ...props\n}: StepperProps) => {\n  const render = useRenderSlot(true, 'div')\n\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n\n  /**\n   * By default, a percent format will increment in steps of 1 (100% on each increment)\n   */\n  const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n  return (\n    <NumberField.Root\n      data-spark-component=\"stepper\"\n      allowWheelScrub={allowWheelScrub}\n      render={render}\n      min={minValue}\n      max={maxValue}\n      format={formatOptions}\n      step={step}\n      {...(field.id && { id: field.id })}\n      {...props}\n    >\n      <NumberField.Group\n        className={cx('group relative inline-flex w-full', className)}\n        data-field-state={state}\n      >\n        {children}\n      </NumberField.Group>\n    </NumberField.Root>\n  )\n}\n\nRoot.displayName = 'Stepper'\n"],"mappings":"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","names":["import_class_variance_authority","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_number_field","import_class_variance_authority","import_jsx_runtime","import_number_field","import_form_field","import_class_variance_authority","import_jsx_runtime"]}

package/dist/stepper/index.mjs

@@ -92,7 +92,7 @@ var Input = ({ className, ...props }) => {
       "data-spark-component": "stepper-input",
       className: cx(
         // Base styles
-        "bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center",
+        "bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center",
         "first:border-l-sm first:rounded-l-lg",
         "last:border-r-sm last:rounded-r-lg",
         // State styles
@@ -148,7 +148,14 @@ var Root = ({
       step,
       ...field.id && { id: field.id },
       ...props,
-      children: /* @__PURE__ */ jsx4(NumberField3.Group, { className: cx2("group flex", className), "data-field-state": state, children })
+      children: /* @__PURE__ */ jsx4(
+        NumberField3.Group,
+        {
+          className: cx2("group relative inline-flex w-full", className),
+          "data-field-state": state,
+          children
+        }
+      )
     }
   );
 };

package/dist/stepper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/stepper/Buttons.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n  [\n    // Base styles\n    'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n    'hover:bg-neutral/dim-5',\n    // Disabled and ReadOnly styles\n    'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n    'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n    'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n    // State styles\n    'group-data-[field-state=error]:border-error',\n    'group-data-[field-state=alert]:border-alert',\n    'group-data-[field-state=success]:border-success',\n  ],\n  {\n    variants: {\n      placement: {\n        left: 'rounded-l-lg',\n        right: 'rounded-r-lg',\n      },\n    },\n  }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Decrement\n      data-spark-component=\"stepper-decrement-button\"\n      className={styles({\n        placement: 'left',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Minus />\n        </Icon>\n      )}\n    </NumberField.Decrement>\n  )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Increment\n      data-spark-component=\"stepper-increment-button\"\n      className={styles({\n        placement: 'right',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Plus />\n        </Icon>\n      )}\n    </NumberField.Increment>\n  )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n  children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n  const field = useFormFieldControl()\n\n  return (\n    <NumberField.Input\n      data-spark-component=\"stepper-input\"\n      className={cx(\n        // Base styles\n        'bg-surface text-on-surface h-sz-44 border-y-sm border-outline text-center',\n        'first:border-l-sm first:rounded-l-lg',\n        'last:border-r-sm last:rounded-r-lg',\n        // State styles\n        'group-data-[field-state=error]:border-error',\n        'group-data-[field-state=alert]:border-alert',\n        'group-data-[field-state=success]:border-success',\n        '',\n        // Disabled and ReadOnly styles\n        'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n        'data-[readonly]:bg-on-surface/dim-5',\n        // Focus styles\n        'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n        className\n      )}\n      {...(field.description && { 'aria-describedby': field.description })}\n      {...(field.isRequired && { required: true })}\n      {...(field.state === 'error' && { 'aria-invalid': true })}\n      {...props}\n    />\n  )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n  children,\n  allowWheelScrub = true,\n  state: stateProp,\n  minValue,\n  maxValue,\n  formatOptions,\n  step: stepProp,\n  className,\n  ...props\n}: StepperProps) => {\n  const render = useRenderSlot(true, 'div')\n\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n\n  /**\n   * By default, a percent format will increment in steps of 1 (100% on each increment)\n   */\n  const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n  return (\n    <NumberField.Root\n      data-spark-component=\"stepper\"\n      allowWheelScrub={allowWheelScrub}\n      render={render}\n      min={minValue}\n      max={maxValue}\n      format={formatOptions}\n      step={step}\n      {...(field.id && { id: field.id })}\n      {...props}\n    >\n      <NumberField.Group className={cx('group flex', className)} data-field-state={state}>\n        {children}\n      </NumberField.Group>\n    </NumberField.Root>\n  )\n}\n\nRoot.displayName = 'Stepper'\n","import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\n\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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","names":["jsx","NumberField","jsx","NumberField","useFormFieldControl","cx","jsx","useFormFieldControl","NumberField","cx"]}
+{"version":3,"sources":["../../src/stepper/Buttons.tsx","../../src/stepper/useRenderSlot.tsx","../../src/stepper/Input.tsx","../../src/stepper/Root.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { NumberField } from '@base-ui-components/react/number-field'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { cva } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\nconst styles = cva(\n  [\n    // Base styles\n    'border-outline border-sm min-w-sz-44 text-on-surface flex cursor-pointer items-center justify-center bg-clip-padding select-none',\n    'hover:bg-neutral/dim-5',\n    // Disabled and ReadOnly styles\n    'disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3 disabled:cursor-not-allowed',\n    'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n    'data-[readonly]:bg-on-surface/dim-5 data-[readonly]:text-on-surface/dim-3 data-[readonly]:cursor-not-allowed',\n    // State styles\n    'group-data-[field-state=error]:border-error',\n    'group-data-[field-state=alert]:border-alert',\n    'group-data-[field-state=success]:border-success',\n  ],\n  {\n    variants: {\n      placement: {\n        left: 'rounded-l-lg',\n        right: 'rounded-r-lg',\n      },\n    },\n  }\n)\n\ninterface DecrementProps extends Omit<ComponentProps<typeof NumberField.Decrement>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\ninterface IncrementProps extends Omit<ComponentProps<typeof NumberField.Increment>, 'render'> {\n  children?: ReactNode\n  asChild?: boolean\n}\n\nexport const Decrement = ({ children, className, asChild = false, ...props }: DecrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Decrement\n      data-spark-component=\"stepper-decrement-button\"\n      className={styles({\n        placement: 'left',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Minus />\n        </Icon>\n      )}\n    </NumberField.Decrement>\n  )\n}\n\nexport const Increment = ({ children, className, asChild = false, ...props }: IncrementProps) => {\n  const render = useRenderSlot(asChild, 'div')\n\n  return (\n    <NumberField.Increment\n      data-spark-component=\"stepper-increment-button\"\n      className={styles({\n        placement: 'right',\n        className,\n      })}\n      render={render}\n      {...props}\n    >\n      {children || (\n        <Icon>\n          <Plus />\n        </Icon>\n      )}\n    </NumberField.Increment>\n  )\n}\n\nDecrement.displayName = 'Stepper.DecrementButton'\nIncrement.displayName = 'Stepper.IncrementButton'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\ninterface Props extends Omit<ComponentProps<typeof NumberField.Input>, 'render'> {\n  children?: ReactNode\n}\n\nexport const Input = ({ className, ...props }: Props) => {\n  const field = useFormFieldControl()\n\n  return (\n    <NumberField.Input\n      data-spark-component=\"stepper-input\"\n      className={cx(\n        // Base styles\n        'bg-surface text-on-surface px-lg h-sz-44 border-y-sm border-outline relative inline-flex w-full text-center',\n        'first:border-l-sm first:rounded-l-lg',\n        'last:border-r-sm last:rounded-r-lg',\n        // State styles\n        'group-data-[field-state=error]:border-error',\n        'group-data-[field-state=alert]:border-alert',\n        'group-data-[field-state=success]:border-success',\n        '',\n        // Disabled and ReadOnly styles\n        'data-[disabled]:bg-on-surface/dim-5 data-[disabled]:text-on-surface/dim-3 data-[disabled]:cursor-not-allowed',\n        'data-[readonly]:bg-on-surface/dim-5',\n        // Focus styles\n        'focus:outline-outline-high focus:z-raised focus:outline-2 focus:-outline-offset-1',\n        className\n      )}\n      {...(field.description && { 'aria-describedby': field.description })}\n      {...(field.isRequired && { required: true })}\n      {...(field.state === 'error' && { 'aria-invalid': true })}\n      {...props}\n    />\n  )\n}\n\nInput.displayName = 'Stepper.InputButton'\n","import { NumberField } from '@base-ui-components/react/number-field'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\n\nimport { StepperProps } from './types'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport const Root = ({\n  children,\n  allowWheelScrub = true,\n  state: stateProp,\n  minValue,\n  maxValue,\n  formatOptions,\n  step: stepProp,\n  className,\n  ...props\n}: StepperProps) => {\n  const render = useRenderSlot(true, 'div')\n\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n\n  /**\n   * By default, a percent format will increment in steps of 1 (100% on each increment)\n   */\n  const step = stepProp == null && formatOptions?.style === 'percent' ? 0.01 : stepProp\n\n  return (\n    <NumberField.Root\n      data-spark-component=\"stepper\"\n      allowWheelScrub={allowWheelScrub}\n      render={render}\n      min={minValue}\n      max={maxValue}\n      format={formatOptions}\n      step={step}\n      {...(field.id && { id: field.id })}\n      {...props}\n    >\n      <NumberField.Group\n        className={cx('group relative inline-flex w-full', className)}\n        data-field-state={state}\n      >\n        {children}\n      </NumberField.Group>\n    </NumberField.Root>\n  )\n}\n\nRoot.displayName = 'Stepper'\n","import { Decrement as DecrementButton, Increment as IncrementButton } from './Buttons'\nimport { Input } from './Input'\nimport { Root } from './Root'\n\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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","names":["jsx","NumberField","jsx","NumberField","useFormFieldControl","cx","jsx","useFormFieldControl","NumberField","cx"]}

package/dist/toast/index.d.mts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Toast } from '@base-ui-components/react/toast';
+import * as React from 'react';
+import { ButtonProps } from '../button/index.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ToastIntent = 'main' | 'support' | 'accent' | 'basic' | 'success' | 'alert' | 'error' | 'info' | 'neutral' | 'surface' | 'surfaceInverse';
+type ToastDesign = 'tinted' | 'filled';
+interface ToastData {
+    icon?: React.ReactNode;
+    design?: ToastDesign;
+    intent?: ToastIntent;
+    isClosable?: boolean;
+    closeLabel?: string;
+    action?: {
+        close?: boolean;
+        label: string;
+        onClick: () => void;
+    } & ButtonProps;
+}
+type ToastObject = Toast.Root.ToastObject<ToastData>;
+interface AddOptions extends Omit<ToastObject, 'id' | 'animation' | 'height' | 'ref' | 'limited'> {
+    id?: string;
+}
+type UpdateOptions = Partial<AddOptions>;
+interface PromiseOptions<Value> {
+    loading: string | UpdateOptions;
+    success: string | UpdateOptions | ((result: Value) => string | UpdateOptions);
+    error: string | UpdateOptions | ((error: any) => string | UpdateOptions);
+}
+interface UseToastManagerReturnValue {
+    toasts: ToastObject[];
+    add: (options: AddOptions) => string;
+    update: (toastId: string, options: UpdateOptions) => void;
+    close: (toastId: string) => void;
+    promise: <Value>(promise: Promise<Value>, options: PromiseOptions<Value>) => Promise<Value>;
+    closeAll: () => void;
+}
+
+declare function useToastManager(): UseToastManagerReturnValue;
+
+interface ToastProviderProps extends React.ComponentProps<typeof Toast.Provider> {
+    children: React.ReactNode;
+}
+declare function ToastProvider({ children, limit }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+interface ToastTriggerProps extends React.ComponentPropsWithRef<'button'>, Pick<ToastObject, 'priority'>, Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action'> {
+    children: React.ReactNode;
+    asChild?: boolean;
+    title: string;
+    description?: string;
+    timeout?: number;
+}
+declare function ToastTrigger({ children, onClick, asChild, title, description, timeout, design, intent, isClosable, icon, action, priority, }: ToastTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { type ToastData, type ToastDesign, type ToastIntent, type ToastObject, ToastProvider, ToastTrigger, type UseToastManagerReturnValue, useToastManager };