@spark-ui/components 17.2.3-beta.1 → 17.2.4-beta.0

package/dist/icon-CRPcdgYp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-CRPcdgYp.js","names":[],"sources":["../src/icon/Icon.styles.tsx","../src/icon/Icon.tsx"],"sourcesContent":["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      ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\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 { 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"],"mappings":"+MAGA,IAAa,GAAA,EAAA,EAAA,KAAiB,CAAC,wBAAwB,CAAE,CACvD,SAAU,CAIR,QAAA,EAAA,EAAA,cAGE,CACA,QAAS,CAAC,eAAe,CACzB,KAAM,CAAC,YAAY,CACnB,QAAS,CAAC,eAAe,CACzB,OAAQ,CAAC,cAAc,CACvB,QAAS,CAAC,eAAe,CACzB,MAAO,CAAC,aAAa,CACrB,MAAO,CAAC,aAAa,CACrB,KAAM,CAAC,YAAY,CACnB,QAAS,CAAC,eAAe,CAC1B,CAAC,CAIF,MAAA,EAAA,EAAA,cAAgE,CAC9D,QAAS,CAAC,sBAAsB,CAChC,GAAI,CAAC,UAAW,UAAU,CAC1B,GAAI,CAAC,UAAW,UAAU,CAC1B,GAAI,CAAC,UAAW,UAAU,CAC1B,GAAI,CAAC,UAAW,UAAU,CAC3B,CAAC,CACH,CACF,CAAC,CChBW,GAAQ,CACnB,QACA,YACA,OAAO,UACP,SAAS,UACT,WACA,GAAG,MAKD,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EAAA,EAAA,EAAA,cAHY,EAAA,SAAS,KAAK,EAAS,CAIyB,CACxD,UAAW,EAAW,CAAE,YAAW,OAAM,SAAQ,CAAC,CAClD,uBAAwB,OACxB,cAAe,OACf,UAAW,QACX,GAAG,EACJ,CAAC,CAED,IAAS,EAAA,EAAA,KAAC,EAAA,eAAD,CAAA,SAAiB,EAAuB,CAAA,CACjD,CAAA,CAAA,CAIP,EAAK,YAAc"}

package/dist/icon-D05Uqh8_.mjs

@@ -0,0 +1,41 @@
+import { VisuallyHidden as e } from "./visually-hidden/index.mjs";
+import { cva as t } from "class-variance-authority";
+import { Children as n, cloneElement as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { makeVariants as s } from "@spark-ui/internal-utils";
+//#region src/icon/Icon.styles.tsx
+var c = t(["fill-current shrink-0"], { variants: {
+	intent: s({
+		current: ["text-current"],
+		main: ["text-main"],
+		support: ["text-support"],
+		accent: ["text-accent"],
+		success: ["text-success"],
+		alert: ["text-alert"],
+		error: ["text-error"],
+		info: ["text-info"],
+		neutral: ["text-neutral"]
+	}),
+	size: s({
+		current: ["u-current-font-size"],
+		sm: ["w-sz-16", "h-sz-16"],
+		md: ["w-sz-24", "h-sz-24"],
+		lg: ["w-sz-32", "h-sz-32"],
+		xl: ["w-sz-40", "h-sz-40"]
+	})
+} }), l = ({ label: t, className: s, size: l = "current", intent: u = "current", children: d, ...f }) => /* @__PURE__ */ o(i, { children: [r(n.only(d), {
+	className: c({
+		className: s,
+		size: l,
+		intent: u
+	}),
+	"data-spark-component": "icon",
+	"aria-hidden": "true",
+	focusable: "false",
+	...f
+}), t && /* @__PURE__ */ a(e, { children: t })] });
+l.displayName = "Icon";
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=icon-D05Uqh8_.mjs.map

package/dist/icon-D05Uqh8_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-D05Uqh8_.mjs","names":[],"sources":["../src/icon/Icon.styles.tsx","../src/icon/Icon.tsx"],"sourcesContent":["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      ['current', 'main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n    >({\n      current: ['text-current'],\n      main: ['text-main'],\n      support: ['text-support'],\n      accent: ['text-accent'],\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 { 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"],"mappings":";;;;;;AAGA,IAAa,IAAa,EAAI,CAAC,wBAAwB,EAAE,EACvD,UAAU;CAIR,QAAQ,EAGN;EACA,SAAS,CAAC,eAAe;EACzB,MAAM,CAAC,YAAY;EACnB,SAAS,CAAC,eAAe;EACzB,QAAQ,CAAC,cAAc;EACvB,SAAS,CAAC,eAAe;EACzB,OAAO,CAAC,aAAa;EACrB,OAAO,CAAC,aAAa;EACrB,MAAM,CAAC,YAAY;EACnB,SAAS,CAAC,eAAe;EAC1B,CAAC;CAIF,MAAM,EAA0D;EAC9D,SAAS,CAAC,sBAAsB;EAChC,IAAI,CAAC,WAAW,UAAU;EAC1B,IAAI,CAAC,WAAW,UAAU;EAC1B,IAAI,CAAC,WAAW,UAAU;EAC1B,IAAI,CAAC,WAAW,UAAU;EAC3B,CAAC;CACH,EACF,CAAC,EChBW,KAAQ,EACnB,UACA,cACA,UAAO,WACP,YAAS,WACT,aACA,GAAG,QAKD,kBAAA,GAAA,EAAA,UAAA,CACG,EAJS,EAAS,KAAK,EAAS,EAIyB;CACxD,WAAW,EAAW;EAAE;EAAW;EAAM;EAAQ,CAAC;CAClD,wBAAwB;CACxB,eAAe;CACf,WAAW;CACX,GAAG;CACJ,CAAC,EAED,KAAS,kBAAC,GAAD,EAAA,UAAiB,GAAuB,CAAA,CACjD,EAAA,CAAA;AAIP,EAAK,cAAc"}

package/dist/icon-button/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../IconButton-BR1bJSQA.js");exports.IconButton=t.IconButton;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../icon-button-CykysbgJ.js`);exports.IconButton=e.t;

package/dist/icon-button/index.mjs

@@ -1,5 +1,2 @@
-import { I as n } from "../IconButton-DdB3Pq13.mjs";
-export {
-  n as IconButton
-};
-//# sourceMappingURL=index.mjs.map
+import { t as e } from "../icon-button-6p3O7NIm.mjs";
+export { e as IconButton };

package/dist/icon-button-6p3O7NIm.mjs

@@ -0,0 +1,28 @@
+import { t as e } from "./button-_YZ_4J42.mjs";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import { makeVariants as r } from "@spark-ui/internal-utils";
+//#region src/icon-button/IconButton.styles.tsx
+var i = t(["pl-0 pr-0"], { variants: { size: r({
+	sm: ["text-body-1"],
+	md: ["text-body-1"],
+	lg: ["text-display-3"]
+}) } }), a = ({ design: t = "filled", disabled: r = !1, intent: a = "main", shape: o = "rounded", size: s = "md", className: c, ref: l, ...u }) => /* @__PURE__ */ n(e, {
+	"data-spark-component": "icon-button",
+	ref: l,
+	className: i({
+		size: s,
+		className: c
+	}),
+	design: t,
+	disabled: r,
+	intent: a,
+	shape: o,
+	size: s,
+	...u
+});
+a.displayName = "IconButton";
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=icon-button-6p3O7NIm.mjs.map

package/dist/icon-button-6p3O7NIm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-6p3O7NIm.mjs","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":";;;;;AAIA,IAAa,IAAmB,EAAI,CAAC,YAAY,EAAE,EACjD,UAAU,EAIR,MAAM,EAAyC;CAC7C,IAAI,CAAC,cAAc;CACnB,IAAI,CAAC,cAAc;CACnB,IAAI,CAAC,iBAAiB;CACvB,CAAC,EACH,EACF,CAAC,ECLW,KAAc,EACzB,YAAS,UACT,cAAW,IACX,YAAS,QACT,WAAQ,WACR,UAAO,MACP,cACA,QACA,GAAG,QAGD,kBAAC,GAAD;CACE,wBAAqB;CAChB;CACL,WAAW,EAAiB;EAAE;EAAM;EAAW,CAAC;CACxC;CACE;CACF;CACD;CACD;CACN,GAAI;CACJ,CAAA;AAIN,EAAW,cAAc"}

package/dist/icon-button-CykysbgJ.js

@@ -0,0 +1,2 @@
+require(`./chunk-C91j1N6u.js`);const e=require(`./button-BTDRzvpB.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/internal-utils`);var i=(0,t.cva)([`pl-0 pr-0`],{variants:{size:(0,r.makeVariants)({sm:[`text-body-1`],md:[`text-body-1`],lg:[`text-display-3`]})}}),a=({design:t=`filled`,disabled:r=!1,intent:a=`main`,shape:o=`rounded`,size:s=`md`,className:c,ref:l,...u})=>(0,n.jsx)(e.t,{"data-spark-component":`icon-button`,ref:l,className:i({size:s,className:c}),design:t,disabled:r,intent:a,shape:o,size:s,...u});a.displayName=`IconButton`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=icon-button-CykysbgJ.js.map

package/dist/icon-button-CykysbgJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-CykysbgJ.js","names":[],"sources":["../src/icon-button/IconButton.styles.tsx","../src/icon-button/IconButton.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\n// override the Button component's px-lg padding by using a more specific class selector (pl-0 pr-0)\nexport const iconButtonStyles = cva(['pl-0 pr-0'], {\n  variants: {\n    /**\n     * Sets the size of the icon.\n     */\n    size: makeVariants<'size', ['sm', 'md', 'lg']>({\n      sm: ['text-body-1'],\n      md: ['text-body-1'],\n      lg: ['text-display-3'],\n    }),\n  },\n})\n\nexport type IconButtonStylesProps = VariantProps<typeof iconButtonStyles>\n","import { Ref } from 'react'\n\nimport { Button, ButtonProps } from '../button'\nimport { iconButtonStyles } from './IconButton.styles'\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const IconButton = ({\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  shape = 'rounded',\n  size = 'md',\n  className,\n  ref,\n  ...others\n}: IconButtonProps) => {\n  return (\n    <Button\n      data-spark-component=\"icon-button\"\n      ref={ref}\n      className={iconButtonStyles({ size, className })}\n      design={design}\n      disabled={disabled}\n      intent={intent}\n      shape={shape}\n      size={size}\n      {...others}\n    />\n  )\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":"sLAIA,IAAa,GAAA,EAAA,EAAA,KAAuB,CAAC,YAAY,CAAE,CACjD,SAAU,CAIR,MAAA,EAAA,EAAA,cAA+C,CAC7C,GAAI,CAAC,cAAc,CACnB,GAAI,CAAC,cAAc,CACnB,GAAI,CAAC,iBAAiB,CACvB,CAAC,CACH,CACF,CAAC,CCLW,GAAc,CACzB,SAAS,SACT,WAAW,GACX,SAAS,OACT,QAAQ,UACR,OAAO,KACP,YACA,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,uBAAqB,cAChB,MACL,UAAW,EAAiB,CAAE,OAAM,YAAW,CAAC,CACxC,SACE,WACF,SACD,QACD,OACN,GAAI,EACJ,CAAA,CAIN,EAAW,YAAc"}

package/dist/input/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),re=require("@spark-ui/icons/DeleteOutline"),u=require("class-variance-authority"),_=require("../Icon-C-cNTnzd.js"),d=require("react"),$=require("@spark-ui/components/form-field"),oe=require("@spark-ui/hooks/use-combined-state"),le=require("@spark-ui/hooks/use-merge-refs"),P=require("../Slot-DQ8z2zsy.js"),K=d.createContext(null),v=()=>d.useContext(K)||{isStandalone:!0},H=({className:n,tabIndex:e=-1,onClick:t,inline:o=!1,ref:l,...s})=>{const{onClear:i,hasTrailingIcon:b}=v(),c=a=>{t&&t(a),i&&i()};return r.jsx("button",{ref:l,"data-spark-component":"input-clear-button",className:u.cx(n,"pointer-events-auto absolute",o?"h-sz-44 top-0 -translate-y-0":"top-1/2 -translate-y-1/2","inline-flex h-full items-center justify-center outline-hidden","text-neutral hover:text-neutral-hovered",b?"right-3xl px-sz-12":"pl-md pr-lg right-0"),tabIndex:e,onClick:c,type:"button",...s,children:r.jsx(_.Icon,{size:"sm",children:r.jsx(re.DeleteOutline,{})})})},J=Object.assign(H,{id:"ClearButton"});H.displayName="InputGroup.ClearButton";const ie=u.cva(["relative inline-flex w-full"],{variants:{disabled:{true:["cursor-not-allowed","relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"},readOnly:{true:["relative","after:absolute","after:top-0","after:h-full","after:w-full","after:border-sm after:border-outline","after:rounded-lg"],false:"after:hidden"}}}),Q=({className:n,children:e,state:t,disabled:o,readOnly:l,onClear:s,ref:i,...b})=>{const c=y=>y?y.type.id:"",a=(...y)=>f.find(se=>y.includes(c(se)||"")),f=d.Children.toArray(e).filter(d.isValidElement),g=a("Input"),h=g?.props||{},I=d.useRef(null),C=d.useRef(s),S=le.useMergeRefs(g?.ref,I),[j,A]=oe.useCombinedState(h.value,h.defaultValue,h.onValueChange),N=$.useFormFieldControl(),O=N.state??t,m=N.disabled||!!o,x=N.readOnly||!!l,G=a("LeadingAddon"),L=a("LeadingIcon"),B=a("ClearButton"),R=a("TrailingIcon"),w=a("TrailingAddon"),T=!!G,p=!!w,D=!!L,F=!!R,V=!!j&&!!B&&!m&&!x,ne=y=>{h.onChange&&h.onChange(y),A(y.target.value)},M=d.useCallback(()=>{C.current&&C.current(),A(""),I.current.focus()},[A]),te=d.useMemo(()=>({state:O,disabled:m,readOnly:x,hasLeadingIcon:D,hasTrailingIcon:F,hasLeadingAddon:T,hasTrailingAddon:p,hasClearButton:V,onClear:M}),[O,m,x,D,F,T,p,V,M]);d.useEffect(()=>{C.current=s},[s]);const ae=I.current?.value;return r.jsx(K.Provider,{value:te,children:r.jsxs("div",{"data-spark-component":"input-group",ref:i,className:ie({disabled:m,readOnly:x,className:n}),...b,children:[T&&G,r.jsxs("div",{className:"relative inline-flex w-full",children:[g&&d.cloneElement(g,{value:j??ae??"",ref:S,defaultValue:void 0,onChange:ne}),L,V&&B,R]}),p&&w]})})};Q.displayName="InputGroup";const de=u.cva(["overflow-hidden","border-sm","shrink-0","h-full","focus-visible:relative focus-visible:z-raised","mx-0"],{variants:{asChild:{false:["flex","items-center","px-lg"]},intent:{neutral:"border-outline",error:"border-error",alert:"border-alert",success:"border-success"},disabled:{true:["pointer-events-none border-outline!"]},readOnly:{true:["pointer-events-none"]},design:{text:"",solid:"",inline:""}},compoundVariants:[{disabled:!1,readOnly:!1,design:"text",class:["bg-surface","text-on-surface"]},{disabled:!0,design:"text",class:["text-on-surface/dim-3"]},{disabled:!0,design:["solid","inline"],class:["opacity-dim-3"]}],defaultVariants:{intent:"neutral"}}),z=({asChild:n,className:e,children:t,ref:o,...l})=>{const{state:s,disabled:i,readOnly:b}=v(),c=typeof t=="string",a=!!(!c&&n),f=c?t:d.Children.only(t),g=a&&!c?P.Slot:"div",I=c?"text":a?"solid":"inline";return r.jsx(g,{ref:o,"data-spark-component":"input-addon",className:de({className:e,intent:s,disabled:i,readOnly:b,asChild:a,design:I}),...i&&{tabIndex:-1},...l,children:f})};z.displayName="InputGroup.Addon";const U=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-l-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-r-0! mr-[-1px] rounded-l-lg"),...t})})},W=Object.assign(U,{id:"LeadingAddon"});U.displayName="InputGroup.LeadingAddon";const E=({className:n,intent:e,children:t,...o})=>{const{disabled:l,readOnly:s}=v(),i=l||s;return r.jsx(_.Icon,{"data-spark-component":"input-icon",intent:e,className:u.cx(n,"pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",e?void 0:"text-neutral peer-focus:text-outline-high",i?"opacity-dim-3":void 0),...o,children:t})};E.displayName="InputGroup.Icon";const k=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"left-lg text-body-1"),...e});k.id="LeadingIcon";k.displayName="InputGroup.LeadingIcon";const X=({className:n,ref:e,...t})=>{const{disabled:o,readOnly:l}=v(),s=o||l;return r.jsx("div",{className:u.cx("rounded-r-lg",s?"bg-on-surface/dim-5":null),children:r.jsx(z,{ref:e,className:u.cx(n,"rounded-l-0! ml-[-1px] rounded-r-lg"),...t})})},Y=Object.assign(X,{id:"TrailingAddon"});X.displayName="InputGroup.TrailingAddon";const q=({className:n,...e})=>r.jsx(E,{className:u.cx(n,"right-lg text-body-1"),...e});q.id="TrailingIcon";q.displayName="InputGroup.TrailingIcon";const ue=u.cva(["relative","border-sm","peer","w-full","appearance-none outline-hidden","bg-surface","text-ellipsis text-body-1 text-on-surface","caret-neutral","[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]","autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]","disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3","read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5","focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"],{variants:{asChild:{true:["min-h-sz-44"],false:["h-sz-44"]},intent:{neutral:["border-outline","default:hover:border-outline-high"],success:["default:border-success"],alert:["default:border-alert"],error:["default:border-error"]},hasLeadingAddon:{true:["rounded-l-0"],false:["rounded-l-lg"]},hasTrailingAddon:{true:["rounded-r-0"],false:["rounded-r-lg"]},hasLeadingIcon:{true:["pl-3xl"],false:["pl-lg"]},hasTrailingIcon:{true:""},hasClearButton:{true:""}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:"pr-lg"},{hasTrailingIcon:!0,hasClearButton:!1,class:"pr-3xl"},{hasTrailingIcon:!1,hasClearButton:!0,class:"pr-3xl"},{hasTrailingIcon:!0,hasClearButton:!0,class:"pr-[calc(var(--spacing-3xl)*2)]"}],defaultVariants:{intent:"neutral"}}),Z=({className:n,asChild:e=!1,onValueChange:t,onChange:o,onKeyDown:l,disabled:s,readOnly:i,ref:b,...c})=>{const a=$.useFormFieldControl(),f=v(),{id:g,name:h,isInvalid:I,isRequired:C,description:S}=a,{hasLeadingAddon:j,hasTrailingAddon:A,hasLeadingIcon:N,hasTrailingIcon:O,hasClearButton:m,onClear:x}=f,G=e?P.Slot:"input",L=a.state||f.state,B=a.disabled||f.disabled||s,R=a.readOnly||f.readOnly||i,w=p=>{o&&o(p),t&&t(p.target.value)},T=p=>{l&&l(p),m&&x&&p.key==="Escape"&&x()};return r.jsx(G,{"data-spark-component":"input",ref:b,id:g,name:h,className:ue({asChild:e,className:n,intent:L,hasLeadingAddon:!!j,hasTrailingAddon:!!A,hasLeadingIcon:!!N,hasTrailingIcon:!!O,hasClearButton:!!m}),disabled:B,readOnly:R,required:C,"aria-describedby":S,"aria-invalid":I,onChange:w,onKeyDown:T,...c})},ce=Object.assign(Z,{id:"Input"});Z.displayName="Input";const ee=Object.assign(Q,{LeadingAddon:W,TrailingAddon:Y,LeadingIcon:k,TrailingIcon:q,ClearButton:J});ee.displayName="InputGroup";W.displayName="InputGroup.LeadingAddon";Y.displayName="InputGroup.TrailingAddon";k.displayName="InputGroup.LeadingIcon";q.displayName="InputGroup.TrailingIcon";J.displayName="InputGroup.ClearButton";exports.Input=ce;exports.InputGroup=ee;exports.useInputGroup=v;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../input-DNr40G2Z.js`);exports.Input=e.n,exports.InputGroup=e.t,exports.useInputGroup=e.r;

package/dist/input/index.mjs

@@ -1,455 +1,2 @@
-import { jsx as l, jsxs as F } from "react/jsx-runtime";
-import { DeleteOutline as le } from "@spark-ui/icons/DeleteOutline";
-import { cx as g, cva as S } from "class-variance-authority";
-import { I as K } from "../Icon-BO327oHU.mjs";
-import { createContext as ie, useContext as de, Children as P, isValidElement as ue, useRef as M, useCallback as ce, useMemo as pe, useEffect as fe, cloneElement as ge } from "react";
-import { useFormFieldControl as H } from "@spark-ui/components/form-field";
-import { useCombinedState as me } from "@spark-ui/hooks/use-combined-state";
-import { useMergeRefs as he } from "@spark-ui/hooks/use-merge-refs";
-import { S as J } from "../Slot-DLY1rJrG.mjs";
-const Q = ie(null), v = () => de(Q) || { isStandalone: !0 }, U = ({
-  className: n,
-  tabIndex: e = -1,
-  onClick: t,
-  inline: r = !1,
-  ref: o,
-  ...s
-}) => {
-  const { onClear: i, hasTrailingIcon: m } = v(), d = (a) => {
-    t && t(a), i && i();
-  };
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      ref: o,
-      "data-spark-component": "input-clear-button",
-      className: g(
-        n,
-        "pointer-events-auto absolute",
-        r ? "h-sz-44 top-0 -translate-y-0" : "top-1/2 -translate-y-1/2",
-        "inline-flex h-full items-center justify-center outline-hidden",
-        "text-neutral hover:text-neutral-hovered",
-        m ? "right-3xl px-sz-12" : "pl-md pr-lg right-0"
-      ),
-      tabIndex: e,
-      onClick: d,
-      type: "button",
-      ...s,
-      children: /* @__PURE__ */ l(K, { size: "sm", children: /* @__PURE__ */ l(le, {}) })
-    }
-  );
-}, W = Object.assign(U, {
-  id: "ClearButton"
-});
-U.displayName = "InputGroup.ClearButton";
-const Ie = S(["relative inline-flex w-full"], {
-  variants: {
-    /**
-     * When `true`, prevents the user from interacting.
-     */
-    disabled: {
-      true: [
-        "cursor-not-allowed",
-        "relative",
-        "after:absolute",
-        "after:top-0",
-        "after:h-full",
-        "after:w-full",
-        "after:border-sm after:border-outline",
-        "after:rounded-lg"
-      ],
-      false: "after:hidden"
-    },
-    /**
-     * Sets the component as interactive or not.
-     */
-    readOnly: {
-      true: [
-        "relative",
-        "after:absolute",
-        "after:top-0",
-        "after:h-full",
-        "after:w-full",
-        "after:border-sm after:border-outline",
-        "after:rounded-lg"
-      ],
-      false: "after:hidden"
-    }
-  }
-}), X = ({
-  className: n,
-  children: e,
-  state: t,
-  disabled: r,
-  readOnly: o,
-  onClear: s,
-  ref: i,
-  ...m
-}) => {
-  const d = (y) => y ? y.type.id : "", a = (...y) => c.find((se) => y.includes(d(se) || "")), c = P.toArray(e).filter(ue), p = a("Input"), f = p?.props || {}, h = M(null), x = M(s), V = he(p?.ref, h), [T, C] = me(
-    f.value,
-    f.defaultValue,
-    f.onValueChange
-  ), N = H(), L = N.state ?? t, I = N.disabled || !!r, b = N.readOnly || !!o, O = a("LeadingAddon"), G = a("LeadingIcon"), B = a("ClearButton"), w = a("TrailingIcon"), k = a("TrailingAddon"), A = !!O, u = !!k, _ = !!G, $ = !!w, z = !!T && !!B && !I && !b, ae = (y) => {
-    f.onChange && f.onChange(y), C(y.target.value);
-  }, q = ce(() => {
-    x.current && x.current(), C(""), h.current.focus();
-  }, [C]), re = pe(() => ({
-    state: L,
-    disabled: I,
-    readOnly: b,
-    hasLeadingIcon: _,
-    hasTrailingIcon: $,
-    hasLeadingAddon: A,
-    hasTrailingAddon: u,
-    hasClearButton: z,
-    onClear: q
-  }), [
-    L,
-    I,
-    b,
-    _,
-    $,
-    A,
-    u,
-    z,
-    q
-  ]);
-  fe(() => {
-    x.current = s;
-  }, [s]);
-  const oe = h.current?.value;
-  return /* @__PURE__ */ l(Q.Provider, { value: re, children: /* @__PURE__ */ F(
-    "div",
-    {
-      "data-spark-component": "input-group",
-      ref: i,
-      className: Ie({ disabled: I, readOnly: b, className: n }),
-      ...m,
-      children: [
-        A && O,
-        /* @__PURE__ */ F("div", { className: "relative inline-flex w-full", children: [
-          p && ge(p, {
-            value: T ?? oe ?? "",
-            ref: V,
-            defaultValue: void 0,
-            onChange: ae
-          }),
-          G,
-          z && B,
-          w
-        ] }),
-        u && k
-      ]
-    }
-  ) });
-};
-X.displayName = "InputGroup";
-const be = S(
-  [
-    "overflow-hidden",
-    "border-sm",
-    "shrink-0",
-    "h-full",
-    "focus-visible:relative focus-visible:z-raised",
-    "mx-0"
-  ],
-  {
-    variants: {
-      /**
-       * Change the component to the HTML tag or custom component of the only child.
-       */
-      asChild: { false: ["flex", "items-center", "px-lg"] },
-      intent: {
-        neutral: "border-outline",
-        error: "border-error",
-        alert: "border-alert",
-        success: "border-success"
-      },
-      /**
-       * Disable the input addon, preventing user interaction and adding opacity.
-       */
-      disabled: {
-        true: ["pointer-events-none border-outline!"]
-      },
-      /**
-       * Changes input addon styles based on the read only status from the input.
-       */
-      readOnly: {
-        true: ["pointer-events-none"]
-      },
-      /**
-       * Main style of the input addon.
-       */
-      design: {
-        text: "",
-        solid: "",
-        inline: ""
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: !1,
-        readOnly: !1,
-        design: "text",
-        class: ["bg-surface", "text-on-surface"]
-      },
-      {
-        disabled: !0,
-        design: "text",
-        class: ["text-on-surface/dim-3"]
-      },
-      {
-        disabled: !0,
-        design: ["solid", "inline"],
-        class: ["opacity-dim-3"]
-      }
-    ],
-    defaultVariants: {
-      intent: "neutral"
-    }
-  }
-), E = ({
-  asChild: n,
-  className: e,
-  children: t,
-  ref: r,
-  ...o
-}) => {
-  const { state: s, disabled: i, readOnly: m } = v(), d = typeof t == "string", a = !!(!d && n), c = d ? t : P.only(t), p = a && !d ? J : "div", h = d ? "text" : a ? "solid" : "inline";
-  return /* @__PURE__ */ l(
-    p,
-    {
-      ref: r,
-      "data-spark-component": "input-addon",
-      className: be({
-        className: e,
-        intent: s,
-        disabled: i,
-        readOnly: m,
-        asChild: a,
-        design: h
-      }),
-      ...i && { tabIndex: -1 },
-      ...o,
-      children: c
-    }
-  );
-};
-E.displayName = "InputGroup.Addon";
-const Y = ({ className: n, ref: e, ...t }) => {
-  const { disabled: r, readOnly: o } = v();
-  return /* @__PURE__ */ l("div", { className: g("rounded-l-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
-    E,
-    {
-      ref: e,
-      className: g(n, "rounded-r-0! mr-[-1px] rounded-l-lg"),
-      ...t
-    }
-  ) });
-}, Z = Object.assign(Y, {
-  id: "LeadingAddon"
-});
-Y.displayName = "InputGroup.LeadingAddon";
-const D = ({ className: n, intent: e, children: t, ...r }) => {
-  const { disabled: o, readOnly: s } = v();
-  return /* @__PURE__ */ l(
-    K,
-    {
-      "data-spark-component": "input-icon",
-      intent: e,
-      className: g(
-        n,
-        "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",
-        e ? void 0 : "text-neutral peer-focus:text-outline-high",
-        o || s ? "opacity-dim-3" : void 0
-      ),
-      ...r,
-      children: t
-    }
-  );
-};
-D.displayName = "InputGroup.Icon";
-const R = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "left-lg text-body-1"), ...e });
-R.id = "LeadingIcon";
-R.displayName = "InputGroup.LeadingIcon";
-const ee = ({ className: n, ref: e, ...t }) => {
-  const { disabled: r, readOnly: o } = v();
-  return /* @__PURE__ */ l("div", { className: g("rounded-r-lg", r || o ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ l(
-    E,
-    {
-      ref: e,
-      className: g(n, "rounded-l-0! ml-[-1px] rounded-r-lg"),
-      ...t
-    }
-  ) });
-}, ne = Object.assign(ee, {
-  id: "TrailingAddon"
-});
-ee.displayName = "InputGroup.TrailingAddon";
-const j = ({ className: n, ...e }) => /* @__PURE__ */ l(D, { className: g(n, "right-lg text-body-1"), ...e });
-j.id = "TrailingIcon";
-j.displayName = "InputGroup.TrailingIcon";
-const ye = S(
-  [
-    "relative",
-    "border-sm",
-    "peer",
-    "w-full",
-    "appearance-none outline-hidden",
-    "bg-surface",
-    "text-ellipsis text-body-1 text-on-surface",
-    "caret-neutral",
-    "[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]",
-    "autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]",
-    "disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3",
-    "read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5",
-    "focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus"
-  ],
-  {
-    variants: {
-      /**
-       * Change the component to the HTML tag or custom component of the only child.
-       */
-      asChild: {
-        true: ["min-h-sz-44"],
-        false: ["h-sz-44"]
-      },
-      /**
-       * Color scheme of the button.
-       */
-      intent: {
-        neutral: ["border-outline", "default:hover:border-outline-high"],
-        success: ["default:border-success"],
-        alert: ["default:border-alert"],
-        error: ["default:border-error"]
-      },
-      /**
-       * Sets if there is an addon before the input text.
-       */
-      hasLeadingAddon: {
-        true: ["rounded-l-0"],
-        false: ["rounded-l-lg"]
-      },
-      /**
-       * Sets if there is an addon after the input text.
-       */
-      hasTrailingAddon: {
-        true: ["rounded-r-0"],
-        false: ["rounded-r-lg"]
-      },
-      /**
-       * Sets if there is an icon before the input text.
-       */
-      hasLeadingIcon: {
-        true: ["pl-3xl"],
-        false: ["pl-lg"]
-      },
-      /**
-       * Sets if there is an icon after the input text.
-       */
-      hasTrailingIcon: { true: "" },
-      /**
-       * Sets if there is a button to clear the input text.
-       */
-      hasClearButton: { true: "" }
-    },
-    compoundVariants: [
-      {
-        hasTrailingIcon: !1,
-        hasClearButton: !1,
-        class: "pr-lg"
-      },
-      {
-        hasTrailingIcon: !0,
-        hasClearButton: !1,
-        class: "pr-3xl"
-      },
-      {
-        hasTrailingIcon: !1,
-        hasClearButton: !0,
-        class: "pr-3xl"
-      },
-      {
-        hasTrailingIcon: !0,
-        hasClearButton: !0,
-        class: "pr-[calc(var(--spacing-3xl)*2)]"
-      }
-    ],
-    defaultVariants: {
-      intent: "neutral"
-    }
-  }
-), te = ({
-  className: n,
-  asChild: e = !1,
-  onValueChange: t,
-  onChange: r,
-  onKeyDown: o,
-  disabled: s,
-  readOnly: i,
-  ref: m,
-  ...d
-}) => {
-  const a = H(), c = v(), { id: p, name: f, isInvalid: h, isRequired: x, description: V } = a, {
-    hasLeadingAddon: T,
-    hasTrailingAddon: C,
-    hasLeadingIcon: N,
-    hasTrailingIcon: L,
-    hasClearButton: I,
-    onClear: b
-  } = c, O = e ? J : "input", G = a.state || c.state, B = a.disabled || c.disabled || s, w = a.readOnly || c.readOnly || i, k = (u) => {
-    r && r(u), t && t(u.target.value);
-  }, A = (u) => {
-    o && o(u), I && b && u.key === "Escape" && b();
-  };
-  return /* @__PURE__ */ l(
-    O,
-    {
-      "data-spark-component": "input",
-      ref: m,
-      id: p,
-      name: f,
-      className: ye({
-        asChild: e,
-        className: n,
-        intent: G,
-        hasLeadingAddon: !!T,
-        hasTrailingAddon: !!C,
-        hasLeadingIcon: !!N,
-        hasTrailingIcon: !!L,
-        hasClearButton: !!I
-      }),
-      disabled: B,
-      readOnly: w,
-      required: x,
-      "aria-describedby": V,
-      "aria-invalid": h,
-      onChange: k,
-      onKeyDown: A,
-      ...d
-    }
-  );
-}, we = Object.assign(te, {
-  id: "Input"
-});
-te.displayName = "Input";
-const ve = Object.assign(X, {
-  LeadingAddon: Z,
-  TrailingAddon: ne,
-  LeadingIcon: R,
-  TrailingIcon: j,
-  ClearButton: W
-});
-ve.displayName = "InputGroup";
-Z.displayName = "InputGroup.LeadingAddon";
-ne.displayName = "InputGroup.TrailingAddon";
-R.displayName = "InputGroup.LeadingIcon";
-j.displayName = "InputGroup.TrailingIcon";
-W.displayName = "InputGroup.ClearButton";
-export {
-  we as Input,
-  ve as InputGroup,
-  v as useInputGroup
-};
-//# sourceMappingURL=index.mjs.map
+import { n as e, r as t, t as n } from "../input-CmYeHYWQ.mjs";
+export { e as Input, n as InputGroup, t as useInputGroup };