@epilot/spark-ui 1.0.0-alpha.6 → 1.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button.cjs +3 -2
- package/dist/components/button.cjs.map +1 -1
- package/dist/components/button.d.cts +4 -17
- package/dist/components/button.d.ts +4 -17
- package/dist/components/button.js +4 -3
- package/dist/components/button.js.map +1 -1
- package/dist/components/callout.d.cts +1 -1
- package/dist/components/callout.d.ts +1 -1
- package/dist/components/card.cjs +25 -11
- package/dist/components/card.cjs.map +1 -1
- package/dist/components/card.d.cts +6 -0
- package/dist/components/card.d.ts +6 -0
- package/dist/components/card.js +25 -11
- package/dist/components/card.js.map +1 -1
- package/dist/components/empty-state.cjs +9 -2
- package/dist/components/empty-state.cjs.map +1 -1
- package/dist/components/empty-state.d.cts +8 -2
- package/dist/components/empty-state.d.ts +8 -2
- package/dist/components/empty-state.js +10 -2
- package/dist/components/empty-state.js.map +1 -1
- package/dist/components/input-group.cjs +3 -2
- package/dist/components/input-group.cjs.map +1 -1
- package/dist/components/input-group.d.cts +1 -4
- package/dist/components/input-group.d.ts +1 -4
- package/dist/components/input-group.js +4 -3
- package/dist/components/input-group.js.map +1 -1
- package/dist/components/input-otp.cjs +2 -2
- package/dist/components/input-otp.cjs.map +1 -1
- package/dist/components/input-otp.d.cts +3 -0
- package/dist/components/input-otp.d.ts +3 -0
- package/dist/components/input-otp.js +2 -2
- package/dist/components/input-otp.js.map +1 -1
- package/dist/components/input.cjs +3 -2
- package/dist/components/input.cjs.map +1 -1
- package/dist/components/input.d.cts +1 -8
- package/dist/components/input.d.ts +1 -8
- package/dist/components/input.js +4 -3
- package/dist/components/input.js.map +1 -1
- package/dist/components/marker.d.cts +1 -1
- package/dist/components/marker.d.ts +1 -1
- package/dist/components/message-scroller.cjs +1 -1
- package/dist/components/message-scroller.cjs.map +1 -1
- package/dist/components/message-scroller.js +1 -1
- package/dist/components/message-scroller.js.map +1 -1
- package/dist/components/page-header.d.cts +1 -1
- package/dist/components/page-header.d.ts +1 -1
- package/dist/components/slider.cjs +3 -3
- package/dist/components/slider.cjs.map +1 -1
- package/dist/components/slider.js +3 -3
- package/dist/components/slider.js.map +1 -1
- package/dist/components/tabs.cjs +4 -1
- package/dist/components/tabs.cjs.map +1 -1
- package/dist/components/tabs.js +4 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/tooltip.cjs +15 -5
- package/dist/components/tooltip.cjs.map +1 -1
- package/dist/components/tooltip.d.cts +3 -1
- package/dist/components/tooltip.d.ts +3 -1
- package/dist/components/tooltip.js +15 -5
- package/dist/components/tooltip.js.map +1 -1
- package/dist/styles/spark-default.css +1 -0
- package/package.json +1 -1
|
@@ -147,14 +147,15 @@ function InputGroupText({ className, ...props }) {
|
|
|
147
147
|
...props
|
|
148
148
|
});
|
|
149
149
|
}
|
|
150
|
-
function InputGroupInput({ className, ...props }) {
|
|
150
|
+
const InputGroupInput = react.forwardRef(function InputGroupInput({ className, ...props }, ref) {
|
|
151
151
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input.Input, {
|
|
152
152
|
"data-slot": "input",
|
|
153
153
|
variant: "none",
|
|
154
154
|
className: (0, cnfast.cn)("flex-1", className),
|
|
155
|
+
ref,
|
|
155
156
|
...props
|
|
156
157
|
});
|
|
157
|
-
}
|
|
158
|
+
});
|
|
158
159
|
//#endregion
|
|
159
160
|
exports.InputGroup = InputGroup;
|
|
160
161
|
exports.InputGroupAddon = InputGroupAddon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.cjs","names":["useFieldContext","useTheme","Input"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n 'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n 'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; the group keeps the\n // classic underline (inputs inside stay chrome-less)\n inset: GHOST,\n // h-11 matches the standalone Input box\n box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n // invalid hover deepens the error tint instead of the accent hover\n class:\n 'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class:\n 'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class:\n 'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: ['surface', 'outlined'],\n class:\n 'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class:\n 'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class:\n 'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class:\n 'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class:\n 'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: 'border-b-input',\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: 'border-b-input-gray',\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n const field = useFieldContext()\n const theme = useTheme()\n const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n inputGroupVariants({ chrome, inputStyle, inputColor }),\n className,\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n 'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n {\n variants: {\n align: {\n // button addons bring their own inner padding — pull them halfway\n // into the group's px so the visual gap matches the text side\n 'inline-start': 'order-first has-[>button]:-ml-2',\n 'inline-end': 'order-last has-[>button]:-mr-2',\n },\n },\n defaultVariants: {\n align: 'inline-start',\n },\n },\n)\n\nfunction InputGroupAddon({\n className,\n align = 'inline-start',\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(event) => {\n if ((event.target as HTMLElement).closest('button')) return\n event.currentTarget.parentElement?.querySelector('input')?.focus()\n }}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n className={cn(\n 'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n className,\n )}\n {...props}\n />\n )\n}\n\
|
|
1
|
+
{"version":3,"file":"input-group.cjs","names":["useFieldContext","useTheme","React","Input"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n 'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n 'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; the group keeps the\n // classic underline (inputs inside stay chrome-less)\n inset: GHOST,\n // h-11 matches the standalone Input box\n box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n // invalid hover deepens the error tint instead of the accent hover\n class:\n 'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class:\n 'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class:\n 'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: ['surface', 'outlined'],\n class:\n 'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class:\n 'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class:\n 'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class:\n 'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class:\n 'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: 'border-b-input',\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: 'border-b-input-gray',\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n const field = useFieldContext()\n const theme = useTheme()\n const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n inputGroupVariants({ chrome, inputStyle, inputColor }),\n className,\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n 'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n {\n variants: {\n align: {\n // button addons bring their own inner padding — pull them halfway\n // into the group's px so the visual gap matches the text side\n 'inline-start': 'order-first has-[>button]:-ml-2',\n 'inline-end': 'order-last has-[>button]:-mr-2',\n },\n },\n defaultVariants: {\n align: 'inline-start',\n },\n },\n)\n\nfunction InputGroupAddon({\n className,\n align = 'inline-start',\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(event) => {\n if ((event.target as HTMLElement).closest('button')) return\n event.currentTarget.parentElement?.querySelector('input')?.focus()\n }}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n className={cn(\n 'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n className,\n )}\n {...props}\n />\n )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n function InputGroupInput({ className, ...props }, ref) {\n return (\n <Input\n data-slot=\"input\"\n variant=\"none\"\n className={cn('flex-1', className)}\n ref={ref}\n {...props}\n />\n )\n },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,sBAAA,GAAA,yBAAA,KACJ,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,WAAW;GACnC,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;GAAO;EACpD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAKD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQA,yBAAAA,iBAAiB;CAC/B,MAAM,QAAQC,cAAAA,UAAU;CACxB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;AAE5D,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,YAAA,GAAA,OAAA,IACE,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;GAAY,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;EACf,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,UAAU;AAClB,OAAK,MAAM,OAAuB,QAAQ,SAAS,CAAE;AACrD,SAAM,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEpE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,kHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,kBAAkBC,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;AACrD,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,OAAD;EACE,aAAU;EACV,SAAQ;EACR,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;EAC7B;EACL,GAAI;EACJ,CAAA;EAGP"}
|
|
@@ -23,10 +23,7 @@ declare function InputGroupText({
|
|
|
23
23
|
className,
|
|
24
24
|
...props
|
|
25
25
|
}: React$1.ComponentProps<'span'>): _$react_jsx_runtime0.JSX.Element;
|
|
26
|
-
declare
|
|
27
|
-
className,
|
|
28
|
-
...props
|
|
29
|
-
}: InputProps): _$react_jsx_runtime0.JSX.Element;
|
|
26
|
+
declare const InputGroupInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
30
27
|
//#endregion
|
|
31
28
|
export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
|
|
32
29
|
//# sourceMappingURL=input-group.d.cts.map
|
|
@@ -23,10 +23,7 @@ declare function InputGroupText({
|
|
|
23
23
|
className,
|
|
24
24
|
...props
|
|
25
25
|
}: React$1.ComponentProps<'span'>): _$react_jsx_runtime0.JSX.Element;
|
|
26
|
-
declare
|
|
27
|
-
className,
|
|
28
|
-
...props
|
|
29
|
-
}: InputProps): _$react_jsx_runtime0.JSX.Element;
|
|
26
|
+
declare const InputGroupInput: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
30
27
|
//#endregion
|
|
31
28
|
export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
|
|
32
29
|
//# sourceMappingURL=input-group.d.ts.map
|
|
@@ -4,7 +4,7 @@ import { cn } from "../utils/cn.js";
|
|
|
4
4
|
import { n as useTheme } from "../theme-8PDO9E0S.js";
|
|
5
5
|
import { useFieldContext } from "./field.js";
|
|
6
6
|
import { Input } from "./input.js";
|
|
7
|
-
import "react";
|
|
7
|
+
import * as React$1 from "react";
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
9
|
import { cva } from "class-variance-authority";
|
|
10
10
|
//#region src/components/input-group.tsx
|
|
@@ -144,14 +144,15 @@ function InputGroupText({ className, ...props }) {
|
|
|
144
144
|
...props
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
function InputGroupInput({ className, ...props }) {
|
|
147
|
+
const InputGroupInput = React$1.forwardRef(function InputGroupInput({ className, ...props }, ref) {
|
|
148
148
|
return /* @__PURE__ */ jsx(Input, {
|
|
149
149
|
"data-slot": "input",
|
|
150
150
|
variant: "none",
|
|
151
151
|
className: cn("flex-1", className),
|
|
152
|
+
ref,
|
|
152
153
|
...props
|
|
153
154
|
});
|
|
154
|
-
}
|
|
155
|
+
});
|
|
155
156
|
//#endregion
|
|
156
157
|
export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
|
|
157
158
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.js","names":[],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n 'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n 'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; the group keeps the\n // classic underline (inputs inside stay chrome-less)\n inset: GHOST,\n // h-11 matches the standalone Input box\n box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n // invalid hover deepens the error tint instead of the accent hover\n class:\n 'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class:\n 'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class:\n 'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: ['surface', 'outlined'],\n class:\n 'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class:\n 'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class:\n 'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class:\n 'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class:\n 'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: 'border-b-input',\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: 'border-b-input-gray',\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n const field = useFieldContext()\n const theme = useTheme()\n const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n inputGroupVariants({ chrome, inputStyle, inputColor }),\n className,\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n 'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n {\n variants: {\n align: {\n // button addons bring their own inner padding — pull them halfway\n // into the group's px so the visual gap matches the text side\n 'inline-start': 'order-first has-[>button]:-ml-2',\n 'inline-end': 'order-last has-[>button]:-mr-2',\n },\n },\n defaultVariants: {\n align: 'inline-start',\n },\n },\n)\n\nfunction InputGroupAddon({\n className,\n align = 'inline-start',\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(event) => {\n if ((event.target as HTMLElement).closest('button')) return\n event.currentTarget.parentElement?.querySelector('input')?.focus()\n }}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n className={cn(\n 'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n className,\n )}\n {...props}\n />\n )\n}\n\
|
|
1
|
+
{"version":3,"file":"input-group.js","names":["React"],"sources":["../../src/components/input-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldContext } from './field'\nimport { Input, type InputProps } from './input'\nimport { useTheme } from './theme'\n\nconst GHOST =\n 'rounded-none border-0 border-b-2 px-0 focus-within:border-b-input-active has-[[data-slot=input][aria-invalid=true]]:border-b-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:focus-within:border-b-red-a8!'\n\nconst inputGroupVariants = cva(\n 'group/input-group relative flex h-10 w-full min-w-0 items-center gap-2 bg-transparent transition-[color,border-color] outline-none motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; the group keeps the\n // classic underline (inputs inside stay chrome-less)\n inset: GHOST,\n // h-11 matches the standalone Input box\n box: 'h-11 rounded-lg px-3 transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n // invalid hover deepens the error tint instead of the accent hover\n class:\n 'group-data-[invalid=true]/field:bg-base-error-soft focus-within:ring-2 focus-within:ring-offset-2 group-data-[invalid=true]/field:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]]:bg-base-error-soft has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a8 has-[[data-slot=input][aria-invalid=true]:not(:disabled)]:hover:bg-red-a4 group-data-[invalid=true]/field:has-[input:not(:disabled)]:hover:bg-red-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class:\n 'bg-input-base focus-within:ring-input-active has-[input:not(:disabled)]:hover:bg-input-base-hover',\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class:\n 'bg-base-gray-soft focus-within:ring-gray-a8 has-[input:not(:disabled)]:hover:bg-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: ['surface', 'outlined'],\n class:\n 'border group-data-[invalid=true]/field:border-input-invalid focus-within:ring-1 group-data-[invalid=true]/field:focus-within:border-input-invalid! group-data-[invalid=true]/field:focus-within:ring-red-a4! has-[[data-slot=input][aria-invalid=true]]:border-input-invalid has-[[data-slot=input][aria-invalid=true]]:focus-within:border-input-invalid! has-[[data-slot=input][aria-invalid=true]]:focus-within:ring-red-a4!',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class:\n 'border-input bg-base-accent-surface focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class:\n 'border-input-gray bg-base-gray-surface focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class:\n 'border-input focus-within:border-input-active focus-within:ring-spark-a4',\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class:\n 'border-input-gray focus-within:border-gray-a8 focus-within:ring-gray-a4',\n },\n { chrome: 'box', inputStyle: 'ghost', class: GHOST },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: 'border-b-input',\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: 'border-b-input-gray',\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\n// The group carries the box + focus/invalid states; inputs inside are\n// chrome-less (variant=\"none\"). Style follows the enclosing Field's knobs,\n// else the <Theme> input-style/input-color knobs.\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n const field = useFieldContext()\n const theme = useTheme()\n const inputStyle = field?.inputStyle ?? theme.inputStyle ?? 'soft'\n const inputColor = field?.inputColor ?? theme.inputColor ?? 'brand'\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n inputGroupVariants({ chrome, inputStyle, inputColor }),\n className,\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n 'flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-gray-light select-none [&_svg:not([class*=size-])]:size-4',\n {\n variants: {\n align: {\n // button addons bring their own inner padding — pull them halfway\n // into the group's px so the visual gap matches the text side\n 'inline-start': 'order-first has-[>button]:-ml-2',\n 'inline-end': 'order-last has-[>button]:-mr-2',\n },\n },\n defaultVariants: {\n align: 'inline-start',\n },\n },\n)\n\nfunction InputGroupAddon({\n className,\n align = 'inline-start',\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(event) => {\n if ((event.target as HTMLElement).closest('button')) return\n event.currentTarget.parentElement?.querySelector('input')?.focus()\n }}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n className={cn(\n 'flex items-center gap-2 text-xs text-gray-light [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',\n className,\n )}\n {...props}\n />\n )\n}\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputProps>(\n function InputGroupInput({ className, ...props }, ref) {\n return (\n <Input\n data-slot=\"input\"\n variant=\"none\"\n className={cn('flex-1', className)}\n ref={ref}\n {...props}\n />\n )\n },\n)\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText }\n"],"mappings":";;;;;;;;;;AASA,MAAM,QACJ;AAEF,MAAM,qBAAqB,IACzB,oKACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GAEP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GAEZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY,CAAC,WAAW,WAAW;GACnC,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OACE;GACH;EACD;GAAE,QAAQ;GAAO,YAAY;GAAS,OAAO;GAAO;EACpD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO;GACR;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAKD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;CAC5D,MAAM,aAAa,OAAO,cAAc,MAAM,cAAc;AAE5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,mBAAmB;GAAE,QANZ,OAAO,kBAAkB,UAAU,UAAU;GAMzB;GAAY;GAAY,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU,EACR,OAAO;EAGL,gBAAgB;EAChB,cAAc;EACf,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SAC0E;AAC7E,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,UAAU;AAClB,OAAK,MAAM,OAAuB,QAAQ,SAAS,CAAE;AACrD,SAAM,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEpE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,WAAW,GACT,kHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,kBAAkBA,QAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;AACrD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,SAAQ;EACR,WAAW,GAAG,UAAU,UAAU;EAC7B;EACL,GAAI;EACJ,CAAA;EAGP"}
|
|
@@ -86,7 +86,7 @@ const slotVariants = (0, class_variance_authority.cva)("flex w-11 min-w-0 items-
|
|
|
86
86
|
}
|
|
87
87
|
]
|
|
88
88
|
});
|
|
89
|
-
function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
|
|
89
|
+
function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Digit ${index + 1}`, ...props }) {
|
|
90
90
|
const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({ id: idProp });
|
|
91
91
|
const chrome = field?.labelPosition === "inset" ? "inset" : "box";
|
|
92
92
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPField.Root, {
|
|
@@ -97,7 +97,7 @@ function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
|
|
|
97
97
|
className: (0, cnfast.cn)("flex items-center gap-2", className),
|
|
98
98
|
...props,
|
|
99
99
|
children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_otp_field.OTPField.Input, {
|
|
100
|
-
"aria-label": index === 0 ? void 0 :
|
|
100
|
+
"aria-label": index === 0 ? void 0 : slotAriaLabel(index),
|
|
101
101
|
"aria-describedby": index === 0 ? ariaDescribedBy : void 0,
|
|
102
102
|
className: slotVariants({
|
|
103
103
|
chrome,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n 'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; slots keep the classic\n // underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputOtpProps extends Pick<\n OTPFieldRootProps,\n 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n /** Number of code slots. */\n length?: number\n /** Fired when every slot is filled. */\n onComplete?: OTPFieldRootProps['onValueComplete']\n}\n\nfunction InputOtp({\n length = 6,\n className,\n id: idProp,\n onComplete,\n ...props\n}: InputOtpProps) {\n const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n useFieldControl({ id: idProp })\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n return (\n <OTPField.Root\n data-slot=\"input-otp\"\n length={length}\n id={id}\n onValueComplete={onComplete}\n className={cn('flex items-center gap-2', className)}\n {...props}\n >\n {Array.from({ length }, (_, index) => (\n <OTPField.Input\n key={index}\n // the first slot is named by the Field label (Base UI ignores\n // aria-label there); the rest get a positional name for a11y\n aria-label={index === 0 ? undefined :
|
|
1
|
+
{"version":3,"file":"input-otp.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl","OTPField"],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n 'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; slots keep the classic\n // underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputOtpProps extends Pick<\n OTPFieldRootProps,\n 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n /** Number of code slots. */\n length?: number\n /** Fired when every slot is filled. */\n onComplete?: OTPFieldRootProps['onValueComplete']\n /** Accessible name per slot (for localization). */\n slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n length = 6,\n className,\n id: idProp,\n onComplete,\n slotAriaLabel = (index) => `Digit ${index + 1}`,\n ...props\n}: InputOtpProps) {\n const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n useFieldControl({ id: idProp })\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n return (\n <OTPField.Root\n data-slot=\"input-otp\"\n length={length}\n id={id}\n onValueComplete={onComplete}\n className={cn('flex items-center gap-2', className)}\n {...props}\n >\n {Array.from({ length }, (_, index) => (\n <OTPField.Input\n key={index}\n // the first slot is named by the Field label (Base UI ignores\n // aria-label there); the rest get a positional name for a11y\n aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n className={slotVariants({ chrome, inputStyle, inputColor })}\n />\n ))}\n </OTPField.Root>\n )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;;;AAQA,MAAM,gBAAA,GAAA,yBAAA,KACJ,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAOA,2BAAAA;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAcD,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,SAAS,QAAQ,KAC5C,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB,EAAE,IAAI,QAAQ,CAAC;CACjC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;AAE5D,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,MAAM;GAC1D,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;IAAY,CAAC;GAC3D,EANK,MAML,CACF;EACY,CAAA"}
|
|
@@ -9,12 +9,15 @@ interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue'
|
|
|
9
9
|
length?: number;
|
|
10
10
|
/** Fired when every slot is filled. */
|
|
11
11
|
onComplete?: OTPFieldRootProps['onValueComplete'];
|
|
12
|
+
/** Accessible name per slot (for localization). */
|
|
13
|
+
slotAriaLabel?: (index: number) => string;
|
|
12
14
|
}
|
|
13
15
|
declare function InputOtp({
|
|
14
16
|
length,
|
|
15
17
|
className,
|
|
16
18
|
id: idProp,
|
|
17
19
|
onComplete,
|
|
20
|
+
slotAriaLabel,
|
|
18
21
|
...props
|
|
19
22
|
}: InputOtpProps): _$react_jsx_runtime0.JSX.Element;
|
|
20
23
|
//#endregion
|
|
@@ -9,12 +9,15 @@ interface InputOtpProps extends Pick<OTPFieldRootProps, 'value' | 'defaultValue'
|
|
|
9
9
|
length?: number;
|
|
10
10
|
/** Fired when every slot is filled. */
|
|
11
11
|
onComplete?: OTPFieldRootProps['onValueComplete'];
|
|
12
|
+
/** Accessible name per slot (for localization). */
|
|
13
|
+
slotAriaLabel?: (index: number) => string;
|
|
12
14
|
}
|
|
13
15
|
declare function InputOtp({
|
|
14
16
|
length,
|
|
15
17
|
className,
|
|
16
18
|
id: idProp,
|
|
17
19
|
onComplete,
|
|
20
|
+
slotAriaLabel,
|
|
18
21
|
...props
|
|
19
22
|
}: InputOtpProps): _$react_jsx_runtime0.JSX.Element;
|
|
20
23
|
//#endregion
|
|
@@ -84,7 +84,7 @@ const slotVariants = cva("flex w-11 min-w-0 items-center justify-center bg-trans
|
|
|
84
84
|
}
|
|
85
85
|
]
|
|
86
86
|
});
|
|
87
|
-
function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
|
|
87
|
+
function InputOtp({ length = 6, className, id: idProp, onComplete, slotAriaLabel = (index) => `Digit ${index + 1}`, ...props }) {
|
|
88
88
|
const { field, id, ariaDescribedBy, inputStyle, inputColor } = useFieldControl({ id: idProp });
|
|
89
89
|
const chrome = field?.labelPosition === "inset" ? "inset" : "box";
|
|
90
90
|
return /* @__PURE__ */ jsx(OTPField.Root, {
|
|
@@ -95,7 +95,7 @@ function InputOtp({ length = 6, className, id: idProp, onComplete, ...props }) {
|
|
|
95
95
|
className: cn("flex items-center gap-2", className),
|
|
96
96
|
...props,
|
|
97
97
|
children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, {
|
|
98
|
-
"aria-label": index === 0 ? void 0 :
|
|
98
|
+
"aria-label": index === 0 ? void 0 : slotAriaLabel(index),
|
|
99
99
|
"aria-describedby": index === 0 ? ariaDescribedBy : void 0,
|
|
100
100
|
className: slotVariants({
|
|
101
101
|
chrome,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n 'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; slots keep the classic\n // underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputOtpProps extends Pick<\n OTPFieldRootProps,\n 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n /** Number of code slots. */\n length?: number\n /** Fired when every slot is filled. */\n onComplete?: OTPFieldRootProps['onValueComplete']\n}\n\nfunction InputOtp({\n length = 6,\n className,\n id: idProp,\n onComplete,\n ...props\n}: InputOtpProps) {\n const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n useFieldControl({ id: idProp })\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n return (\n <OTPField.Root\n data-slot=\"input-otp\"\n length={length}\n id={id}\n onValueComplete={onComplete}\n className={cn('flex items-center gap-2', className)}\n {...props}\n >\n {Array.from({ length }, (_, index) => (\n <OTPField.Input\n key={index}\n // the first slot is named by the Field label (Base UI ignores\n // aria-label there); the rest get a positional name for a11y\n aria-label={index === 0 ? undefined :
|
|
1
|
+
{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/components/input-otp.tsx"],"sourcesContent":["import { OTPField, type OTPFieldRootProps } from '@base-ui/react/otp-field'\nimport { cva } from 'class-variance-authority'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// One code box per slot. Mirrors Input's box/underline carrier model so the\n// slots read like the rest of the input family across every style/color knob.\nconst slotVariants = cva(\n 'flex w-11 min-w-0 items-center justify-center bg-transparent text-center text-base font-medium text-gray tabular-nums outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none',\n {\n variants: {\n chrome: {\n // inside an inset field the shell is the box; slots keep the classic\n // underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputOtpProps extends Pick<\n OTPFieldRootProps,\n 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'className' | 'id'\n> {\n /** Number of code slots. */\n length?: number\n /** Fired when every slot is filled. */\n onComplete?: OTPFieldRootProps['onValueComplete']\n /** Accessible name per slot (for localization). */\n slotAriaLabel?: (index: number) => string\n}\n\nfunction InputOtp({\n length = 6,\n className,\n id: idProp,\n onComplete,\n slotAriaLabel = (index) => `Digit ${index + 1}`,\n ...props\n}: InputOtpProps) {\n const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n useFieldControl({ id: idProp })\n const chrome = field?.labelPosition === 'inset' ? 'inset' : 'box'\n\n return (\n <OTPField.Root\n data-slot=\"input-otp\"\n length={length}\n id={id}\n onValueComplete={onComplete}\n className={cn('flex items-center gap-2', className)}\n {...props}\n >\n {Array.from({ length }, (_, index) => (\n <OTPField.Input\n key={index}\n // the first slot is named by the Field label (Base UI ignores\n // aria-label there); the rest get a positional name for a11y\n aria-label={index === 0 ? undefined : slotAriaLabel(index)}\n aria-describedby={index === 0 ? ariaDescribedBy : undefined}\n className={slotVariants({ chrome, inputStyle, inputColor })}\n />\n ))}\n </OTPField.Root>\n )\n}\n\nexport { InputOtp }\nexport type { InputOtpProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,IACnB,+UACA;CACE,UAAU;EACR,QAAQ;GAGN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAcD,SAAS,SAAS,EAChB,SAAS,GACT,WACA,IAAI,QACJ,YACA,iBAAiB,UAAU,SAAS,QAAQ,KAC5C,GAAG,SACa;CAChB,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB,EAAE,IAAI,QAAQ,CAAC;CACjC,MAAM,SAAS,OAAO,kBAAkB,UAAU,UAAU;AAE5D,QACE,oBAAC,SAAS,MAAV;EACE,aAAU;EACF;EACJ;EACJ,iBAAiB;EACjB,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAIE,cAAY,UAAU,IAAI,KAAA,IAAY,cAAc,MAAM;GAC1D,oBAAkB,UAAU,IAAI,kBAAkB,KAAA;GAClD,WAAW,aAAa;IAAE;IAAQ;IAAY;IAAY,CAAC;GAC3D,EANK,MAML,CACF;EACY,CAAA"}
|
|
@@ -88,7 +88,7 @@ const inputVariants = (0, class_variance_authority.cva)("flex h-10 w-full min-w-
|
|
|
88
88
|
}
|
|
89
89
|
]
|
|
90
90
|
});
|
|
91
|
-
function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }) {
|
|
91
|
+
const Input = react.forwardRef(function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }, ref) {
|
|
92
92
|
const { field, id, ariaDescribedBy, inputStyle, inputColor } = require_components_field.useFieldControl({
|
|
93
93
|
id: idProp,
|
|
94
94
|
ariaDescribedBy: ariaDescribedByProp,
|
|
@@ -102,10 +102,11 @@ function Input({ variant, className, id: idProp, "aria-describedby": ariaDescrib
|
|
|
102
102
|
inputColor
|
|
103
103
|
}), className),
|
|
104
104
|
id,
|
|
105
|
+
ref,
|
|
105
106
|
...props,
|
|
106
107
|
"aria-describedby": ariaDescribedBy
|
|
107
108
|
});
|
|
108
|
-
}
|
|
109
|
+
});
|
|
109
110
|
//#endregion
|
|
110
111
|
exports.Input = Input;
|
|
111
112
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.cjs","names":["GHOST_UNDERLINE","boxChrome","useFieldControl"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n 'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n {\n variants: {\n chrome: {\n none: 'border-0 px-0',\n // inside an inset field the shell is the box; the input keeps the\n // classic underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n variant?: InputVariant\n}\n\
|
|
1
|
+
{"version":3,"file":"input.cjs","names":["GHOST_UNDERLINE","boxChrome","React","useFieldControl"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n 'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n {\n variants: {\n chrome: {\n none: 'border-0 px-0',\n // inside an inset field the shell is the box; the input keeps the\n // classic underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n variant?: InputVariant\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n variant,\n className,\n id: idProp,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n },\n ref,\n) {\n const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n useFieldControl({\n id: idProp,\n ariaDescribedBy: ariaDescribedByProp,\n variant: variant !== 'none' ? variant : undefined,\n })\n // an explicit variant prop keeps the box even inside an inset field\n const chrome =\n variant === 'none'\n ? 'none'\n : !variant && field?.labelPosition === 'inset'\n ? 'inset'\n : 'box'\n\n return (\n <input\n data-slot=\"input\"\n className={cn(\n inputVariants({ chrome, inputStyle, inputColor }),\n className,\n )}\n id={id}\n ref={ref}\n {...props}\n aria-describedby={ariaDescribedBy}\n />\n )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;;;;AASA,MAAM,iBAAA,GAAA,yBAAA,KACJ,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAOA,2BAAAA;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOC,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAOA,2BAAAA,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAOD,MAAM,QAAQC,MAAM,WAAyC,SAAS,MACpE,EACE,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9CC,yBAAAA,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;EACzC,CAAC;AASJ,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;GAAY,CAAC,EACjD,UACD;EACG;EACC;EACL,GAAI;EACJ,oBAAkB;EAClB,CAAA;EAEJ"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { i as SparkInputStyle } from "../theme-types-BwSJKdsB.cjs";
|
|
4
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
4
|
import * as React$1 from "react";
|
|
6
5
|
|
|
7
6
|
//#region src/components/input.d.ts
|
|
@@ -9,13 +8,7 @@ type InputVariant = SparkInputStyle | 'none';
|
|
|
9
8
|
interface InputProps extends React$1.ComponentProps<'input'> {
|
|
10
9
|
variant?: InputVariant;
|
|
11
10
|
}
|
|
12
|
-
declare
|
|
13
|
-
variant,
|
|
14
|
-
className,
|
|
15
|
-
id: idProp,
|
|
16
|
-
'aria-describedby': ariaDescribedByProp,
|
|
17
|
-
...props
|
|
18
|
-
}: InputProps): _$react_jsx_runtime0.JSX.Element;
|
|
11
|
+
declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
19
12
|
//#endregion
|
|
20
13
|
export { Input, type InputProps, type InputVariant };
|
|
21
14
|
//# sourceMappingURL=input.d.cts.map
|
|
@@ -2,20 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
import { i as SparkInputStyle } from "../theme-types-BDdoRxXa.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
5
|
|
|
7
6
|
//#region src/components/input.d.ts
|
|
8
7
|
type InputVariant = SparkInputStyle | 'none';
|
|
9
8
|
interface InputProps extends React$1.ComponentProps<'input'> {
|
|
10
9
|
variant?: InputVariant;
|
|
11
10
|
}
|
|
12
|
-
declare
|
|
13
|
-
variant,
|
|
14
|
-
className,
|
|
15
|
-
id: idProp,
|
|
16
|
-
'aria-describedby': ariaDescribedByProp,
|
|
17
|
-
...props
|
|
18
|
-
}: InputProps): _$react_jsx_runtime0.JSX.Element;
|
|
11
|
+
declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
19
12
|
//#endregion
|
|
20
13
|
export { Input, type InputProps, type InputVariant };
|
|
21
14
|
//# sourceMappingURL=input.d.ts.map
|
package/dist/components/input.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { cn } from "../utils/cn.js";
|
|
3
3
|
import { useFieldControl } from "./field.js";
|
|
4
4
|
import { n as boxChrome, t as GHOST_UNDERLINE } from "../input-box-variants-DcajYXvo.js";
|
|
5
|
-
import "react";
|
|
5
|
+
import * as React$1 from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { cva } from "class-variance-authority";
|
|
8
8
|
//#region src/components/input.tsx
|
|
@@ -85,7 +85,7 @@ const inputVariants = cva("flex h-10 w-full min-w-0 [appearance:textfield] bg-tr
|
|
|
85
85
|
}
|
|
86
86
|
]
|
|
87
87
|
});
|
|
88
|
-
function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }) {
|
|
88
|
+
const Input = React$1.forwardRef(function Input({ variant, className, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }, ref) {
|
|
89
89
|
const { field, id, ariaDescribedBy, inputStyle, inputColor } = useFieldControl({
|
|
90
90
|
id: idProp,
|
|
91
91
|
ariaDescribedBy: ariaDescribedByProp,
|
|
@@ -99,10 +99,11 @@ function Input({ variant, className, id: idProp, "aria-describedby": ariaDescrib
|
|
|
99
99
|
inputColor
|
|
100
100
|
}), className),
|
|
101
101
|
id,
|
|
102
|
+
ref,
|
|
102
103
|
...props,
|
|
103
104
|
"aria-describedby": ariaDescribedBy
|
|
104
105
|
});
|
|
105
|
-
}
|
|
106
|
+
});
|
|
106
107
|
//#endregion
|
|
107
108
|
export { Input };
|
|
108
109
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n 'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n {\n variants: {\n chrome: {\n none: 'border-0 px-0',\n // inside an inset field the shell is the box; the input keeps the\n // classic underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n variant?: InputVariant\n}\n\
|
|
1
|
+
{"version":3,"file":"input.js","names":["React"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n 'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n {\n variants: {\n chrome: {\n none: 'border-0 px-0',\n // inside an inset field the shell is the box; the input keeps the\n // classic underline (the pre-knob default look)\n inset: GHOST_UNDERLINE,\n box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n },\n inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n inputColor: { brand: '', gray: '' },\n },\n compoundVariants: [\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'brand',\n class: boxChrome.soft.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'soft',\n inputColor: 'gray',\n class: boxChrome.soft.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'brand',\n class: boxChrome.surface.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'surface',\n inputColor: 'gray',\n class: boxChrome.surface.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'brand',\n class: boxChrome.outlined.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'outlined',\n inputColor: 'gray',\n class: boxChrome.outlined.gray,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'brand',\n class: boxChrome.ghost.brand,\n },\n {\n chrome: 'box',\n inputStyle: 'ghost',\n inputColor: 'gray',\n class: boxChrome.ghost.gray,\n },\n { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n ],\n },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n variant?: InputVariant\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n variant,\n className,\n id: idProp,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n },\n ref,\n) {\n const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n useFieldControl({\n id: idProp,\n ariaDescribedBy: ariaDescribedByProp,\n variant: variant !== 'none' ? variant : undefined,\n })\n // an explicit variant prop keeps the box even inside an inset field\n const chrome =\n variant === 'none'\n ? 'none'\n : !variant && field?.labelPosition === 'inset'\n ? 'inset'\n : 'box'\n\n return (\n <input\n data-slot=\"input\"\n className={cn(\n inputVariants({ chrome, inputStyle, inputColor }),\n className,\n )}\n id={id}\n ref={ref}\n {...props}\n aria-describedby={ariaDescribedBy}\n />\n )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgB,IACpB,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAOD,MAAM,QAAQA,QAAM,WAAyC,SAAS,MACpE,EACE,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;EACzC,CAAC;AASJ,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;GAAY,CAAC,EACjD,UACD;EACG;EACC;EACL,GAAI;EACJ,oBAAkB;EAClB,CAAA;EAEJ"}
|
|
@@ -8,7 +8,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
8
8
|
|
|
9
9
|
//#region src/components/marker.d.ts
|
|
10
10
|
declare const markerVariants: (props?: ({
|
|
11
|
-
variant?: "
|
|
11
|
+
variant?: "separator" | "default" | "border" | null | undefined;
|
|
12
12
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
13
13
|
declare function Marker({
|
|
14
14
|
className,
|
|
@@ -8,7 +8,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
|
|
|
8
8
|
|
|
9
9
|
//#region src/components/marker.d.ts
|
|
10
10
|
declare const markerVariants: (props?: ({
|
|
11
|
-
variant?: "
|
|
11
|
+
variant?: "separator" | "default" | "border" | null | undefined;
|
|
12
12
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
13
13
|
declare function Marker({
|
|
14
14
|
className,
|
|
@@ -46,7 +46,7 @@ function MessageScrollerButton({ direction = "end", className, children, render,
|
|
|
46
46
|
"data-slot": "message-scroller-button",
|
|
47
47
|
"data-direction": direction,
|
|
48
48
|
direction,
|
|
49
|
-
className: (0, cnfast.cn)("absolute
|
|
49
|
+
className: (0, cnfast.cn)("absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2", className),
|
|
50
50
|
render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
|
|
51
51
|
styleVariant,
|
|
52
52
|
color,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-scroller.cjs","names":["MessageScrollerPrimitive","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n return (\n <MessageScrollerPrimitive.Root\n data-slot=\"message-scroller\"\n className={cn(\n 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n return (\n <MessageScrollerPrimitive.Viewport\n data-slot=\"message-scroller-viewport\"\n // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n // bar collapses to no-scrollbar (spark util) while autoscrolling.\n className={cn(\n 'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n return (\n <MessageScrollerPrimitive.Content\n data-slot=\"message-scroller-content\"\n className={cn('flex h-max min-h-full flex-col gap-8', className)}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n return (\n <MessageScrollerPrimitive.Item\n data-slot=\"message-scroller-item\"\n scrollAnchor={scrollAnchor}\n className={cn(\n 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n className,\n )}\n {...props}\n />\n )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n styleVariant = 'surface',\n color = 'neutral',\n size = 'icon-small',\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n return (\n <MessageScrollerPrimitive.Button\n data-slot=\"message-scroller-button\"\n data-direction={direction}\n direction={direction}\n className={cn(\n 'absolute
|
|
1
|
+
{"version":3,"file":"message-scroller.cjs","names":["MessageScrollerPrimitive","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n return (\n <MessageScrollerPrimitive.Root\n data-slot=\"message-scroller\"\n className={cn(\n 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n return (\n <MessageScrollerPrimitive.Viewport\n data-slot=\"message-scroller-viewport\"\n // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n // bar collapses to no-scrollbar (spark util) while autoscrolling.\n className={cn(\n 'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n return (\n <MessageScrollerPrimitive.Content\n data-slot=\"message-scroller-content\"\n className={cn('flex h-max min-h-full flex-col gap-8', className)}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n return (\n <MessageScrollerPrimitive.Item\n data-slot=\"message-scroller-item\"\n scrollAnchor={scrollAnchor}\n className={cn(\n 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n className,\n )}\n {...props}\n />\n )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n styleVariant = 'surface',\n color = 'neutral',\n size = 'icon-small',\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n return (\n <MessageScrollerPrimitive.Button\n data-slot=\"message-scroller-button\"\n data-direction={direction}\n direction={direction}\n className={cn(\n 'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n className,\n )}\n render={\n render ?? (\n <Button styleVariant={styleVariant} color={color} size={size} />\n )\n }\n {...props}\n >\n {children ?? (\n <>\n <MaterialSymbol\n name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n />\n <span className=\"sr-only\">\n {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n </span>\n </>\n )}\n </MessageScrollerPrimitive.Button>\n )\n}\n\nexport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,wBACP,OACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,OAAS,CAAA;;AAGzD,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;AAC7D,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;AACjE,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,+KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;AAChE,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;AAC7D,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;AACtD,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,UACD;EACD,QACE,UACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;GAAQ,CAAA;EAGpE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,gBAC/C,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;GACpC,CAAA,CACN,EAAA,CAAA;EAE2B,CAAA"}
|
|
@@ -43,7 +43,7 @@ function MessageScrollerButton({ direction = "end", className, children, render,
|
|
|
43
43
|
"data-slot": "message-scroller-button",
|
|
44
44
|
"data-direction": direction,
|
|
45
45
|
direction,
|
|
46
|
-
className: cn("absolute
|
|
46
|
+
className: cn("absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2", className),
|
|
47
47
|
render: render ?? /* @__PURE__ */ jsx(Button, {
|
|
48
48
|
styleVariant,
|
|
49
49
|
color,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-scroller.js","names":["MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n return (\n <MessageScrollerPrimitive.Root\n data-slot=\"message-scroller\"\n className={cn(\n 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n return (\n <MessageScrollerPrimitive.Viewport\n data-slot=\"message-scroller-viewport\"\n // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n // bar collapses to no-scrollbar (spark util) while autoscrolling.\n className={cn(\n 'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n return (\n <MessageScrollerPrimitive.Content\n data-slot=\"message-scroller-content\"\n className={cn('flex h-max min-h-full flex-col gap-8', className)}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n return (\n <MessageScrollerPrimitive.Item\n data-slot=\"message-scroller-item\"\n scrollAnchor={scrollAnchor}\n className={cn(\n 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n className,\n )}\n {...props}\n />\n )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n styleVariant = 'surface',\n color = 'neutral',\n size = 'icon-small',\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n return (\n <MessageScrollerPrimitive.Button\n data-slot=\"message-scroller-button\"\n data-direction={direction}\n direction={direction}\n className={cn(\n 'absolute
|
|
1
|
+
{"version":3,"file":"message-scroller.js","names":["MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n return (\n <MessageScrollerPrimitive.Root\n data-slot=\"message-scroller\"\n className={cn(\n 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n return (\n <MessageScrollerPrimitive.Viewport\n data-slot=\"message-scroller-viewport\"\n // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n // bar collapses to no-scrollbar (spark util) while autoscrolling.\n className={cn(\n 'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n return (\n <MessageScrollerPrimitive.Content\n data-slot=\"message-scroller-content\"\n className={cn('flex h-max min-h-full flex-col gap-8', className)}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n return (\n <MessageScrollerPrimitive.Item\n data-slot=\"message-scroller-item\"\n scrollAnchor={scrollAnchor}\n className={cn(\n 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n className,\n )}\n {...props}\n />\n )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n styleVariant = 'surface',\n color = 'neutral',\n size = 'icon-small',\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n return (\n <MessageScrollerPrimitive.Button\n data-slot=\"message-scroller-button\"\n data-direction={direction}\n direction={direction}\n className={cn(\n 'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n className,\n )}\n render={\n render ?? (\n <Button styleVariant={styleVariant} color={color} size={size} />\n )\n }\n {...props}\n >\n {children ?? (\n <>\n <MaterialSymbol\n name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n />\n <span className=\"sr-only\">\n {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n </span>\n </>\n )}\n </MessageScrollerPrimitive.Button>\n )\n}\n\nexport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;AAWA,SAAS,wBACP,OACA;AACA,QAAO,oBAACA,kBAAyB,UAA1B,EAAmC,GAAI,OAAS,CAAA;;AAGzD,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;AAC7D,QACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;AACjE,QACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,+KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;AAChE,QACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;AAC7D,QACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACI;EACd,WAAW,GACT,kFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;AACtD,QACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,UACD;EACD,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;GAAQ,CAAA;EAGpE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,gBAC/C,CAAA,EACF,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;GACpC,CAAA,CACN,EAAA,CAAA;EAE2B,CAAA"}
|
|
@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/page-header.d.ts
|
|
9
9
|
declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
10
|
-
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<
|
|
10
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
11
11
|
declare const PageHeaderTitle: ({
|
|
12
12
|
className,
|
|
13
13
|
...props
|
|
@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/page-header.d.ts
|
|
9
9
|
declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
10
|
-
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<
|
|
10
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
11
11
|
declare const PageHeaderTitle: ({
|
|
12
12
|
className,
|
|
13
13
|
...props
|