@epilot/spark-ui 0.17.0 → 0.18.1
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/autocomplete.cjs +5 -6
- package/dist/components/autocomplete.cjs.map +1 -1
- package/dist/components/autocomplete.d.cts +1 -4
- package/dist/components/autocomplete.d.ts +1 -4
- package/dist/components/autocomplete.js +5 -6
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/avatar.js +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/box.js +1 -1
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button-group.js +1 -1
- package/dist/components/button.d.cts +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/callout.d.cts +1 -1
- package/dist/components/callout.d.ts +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/info-block.d.cts +1 -1
- package/dist/components/info-block.d.ts +1 -1
- package/dist/components/input-date.cjs +141 -0
- package/dist/components/input-date.cjs.map +1 -0
- package/dist/components/input-date.d.cts +22 -0
- package/dist/components/input-date.d.ts +22 -0
- package/dist/components/input-date.js +138 -0
- package/dist/components/input-date.js.map +1 -0
- package/dist/components/input-otp.cjs +1 -1
- package/dist/components/input-otp.js +1 -1
- package/dist/components/input.cjs +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/message-scroller.cjs +1 -1
- package/dist/components/message-scroller.js +1 -1
- package/dist/components/page-header.d.cts +1 -1
- package/dist/components/page-header.d.ts +1 -1
- package/dist/components/pill.cjs +2 -2
- package/dist/components/pill.cjs.map +1 -1
- package/dist/components/pill.js +3 -3
- package/dist/components/pill.js.map +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.cjs +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/textarea.cjs +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/theme.js +1 -1
- package/dist/styles/spark-default.css +4 -0
- package/package.json +2 -1
- package/dist/utils/date-mask.cjs +0 -45
- package/dist/utils/date-mask.cjs.map +0 -1
- package/dist/utils/date-mask.d.cts +0 -17
- package/dist/utils/date-mask.d.ts +0 -17
- package/dist/utils/date-mask.js +0 -41
- package/dist/utils/date-mask.js.map +0 -1
|
@@ -17,16 +17,16 @@ const AutocompleteCollection = _base_ui_react_autocomplete.Autocomplete.Collecti
|
|
|
17
17
|
const useAutocompleteFilter = _base_ui_react_autocomplete.Autocomplete.useFilter;
|
|
18
18
|
const useAutocompleteFilteredItems = _base_ui_react_autocomplete.Autocomplete.useFilteredItems;
|
|
19
19
|
const AutocompleteInputGroupContext = react.createContext(false);
|
|
20
|
-
const
|
|
21
|
-
const FOCUS_WITHIN_RING = "focus-within:ring-2 focus-within:ring-(--color-focus-root)! focus-within:ring-offset-2";
|
|
20
|
+
const OUTSET_FOCUS_RING = "focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden";
|
|
22
21
|
function AutocompleteInput({ variant, id: idProp, className, "aria-describedby": ariaDescribedByProp, ...props }) {
|
|
23
22
|
const inGroup = react.useContext(AutocompleteInputGroupContext);
|
|
24
23
|
const resolvedVariant = variant ?? (inGroup ? "none" : void 0);
|
|
25
|
-
const { id, ariaDescribedBy, ariaInvalid } = require_components_field.useFieldControl({
|
|
24
|
+
const { field, id, ariaDescribedBy, ariaInvalid } = require_components_field.useFieldControl({
|
|
26
25
|
id: typeof idProp === "string" ? idProp : void 0,
|
|
27
26
|
ariaDescribedBy: typeof ariaDescribedByProp === "string" ? ariaDescribedByProp : void 0,
|
|
28
27
|
variant: resolvedVariant !== "none" ? resolvedVariant : void 0
|
|
29
28
|
});
|
|
29
|
+
const outsetBox = !inGroup && field?.labelPosition === "outset";
|
|
30
30
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.Input, {
|
|
31
31
|
render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input.Input, {
|
|
32
32
|
id,
|
|
@@ -34,18 +34,17 @@ function AutocompleteInput({ variant, id: idProp, className, "aria-describedby":
|
|
|
34
34
|
}),
|
|
35
35
|
id,
|
|
36
36
|
"aria-invalid": ariaInvalid,
|
|
37
|
-
className: (0, cnfast.cn)(
|
|
37
|
+
className: (0, cnfast.cn)(outsetBox && OUTSET_FOCUS_RING, inGroup && "flex-1", className),
|
|
38
38
|
...props,
|
|
39
39
|
"aria-describedby": ariaDescribedBy
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
|
-
function AutocompleteInputGroup(
|
|
42
|
+
function AutocompleteInputGroup(props) {
|
|
43
43
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteInputGroupContext.Provider, {
|
|
44
44
|
value: true,
|
|
45
45
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_autocomplete.Autocomplete.InputGroup, {
|
|
46
46
|
"data-slot": "autocomplete-input-group",
|
|
47
47
|
render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_group.InputGroup, {}),
|
|
48
|
-
className: (0, cnfast.cn)(FOCUS_WITHIN_RING, className),
|
|
49
48
|
...props
|
|
50
49
|
})
|
|
51
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.cjs","names":["AutocompletePrimitive","React","useFieldControl","Input","InputGroup","Close","KeyboardArrowDown"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'\nimport { Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\nimport { Input, type InputVariant } from './input'\nimport { InputGroup } from './input-group'\n\nconst Autocomplete = AutocompletePrimitive.Root\nconst AutocompleteCollection = AutocompletePrimitive.Collection\nconst useAutocompleteFilter = AutocompletePrimitive.useFilter\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems\n\nconst AutocompleteInputGroupContext = React.createContext(false)\n\nconst FOCUS_RING =\n 'focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden'\n\nconst FOCUS_WITHIN_RING =\n 'focus-within:ring-2 focus-within:ring-(--color-focus-root)! focus-within:ring-offset-2'\n\nfunction AutocompleteInput({\n variant,\n id: idProp,\n className,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input> & {\n variant?: InputVariant\n}) {\n const inGroup = React.useContext(AutocompleteInputGroupContext)\n const resolvedVariant = variant ?? (inGroup ? 'none' : undefined)\n const { id, ariaDescribedBy, ariaInvalid } = useFieldControl({\n id: typeof idProp === 'string' ? idProp : undefined,\n ariaDescribedBy:\n typeof ariaDescribedByProp === 'string' ? ariaDescribedByProp : undefined,\n variant: resolvedVariant !== 'none' ? resolvedVariant : undefined,\n })\n return (\n <AutocompletePrimitive.Input\n render={<Input id={id} variant={resolvedVariant} />}\n id={id}\n aria-invalid={ariaInvalid}\n className={cn(!inGroup && FOCUS_RING, className)}\n {...props}\n aria-describedby={ariaDescribedBy}\n />\n )\n}\n\nfunction AutocompleteInputGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>) {\n return (\n <AutocompleteInputGroupContext.Provider value={true}>\n <AutocompletePrimitive.InputGroup\n data-slot=\"autocomplete-input-group\"\n render={<InputGroup />}\n className={cn(FOCUS_WITHIN_RING, className)}\n {...props}\n />\n </AutocompleteInputGroupContext.Provider>\n )\n}\n\nconst ICON_BUTTON =\n \"relative inline-flex size-6 shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\nfunction AutocompleteClear({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {\n return (\n <AutocompletePrimitive.Clear\n data-slot=\"autocomplete-clear\"\n className={cn(ICON_BUTTON, className)}\n {...props}\n >\n {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n </AutocompletePrimitive.Clear>\n )\n}\n\nfunction AutocompleteTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n return (\n <AutocompletePrimitive.Trigger\n data-slot=\"autocomplete-trigger\"\n className={cn(\n ICON_BUTTON,\n '[&_svg]:transition-transform data-popup-open:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none',\n className,\n )}\n {...props}\n >\n {children ?? (\n <KeyboardArrowDown aria-hidden className=\"[--spark-icon-size:14px]\" />\n )}\n </AutocompletePrimitive.Trigger>\n )\n}\n\ntype AutocompleteContentProps = React.ComponentProps<\n typeof AutocompletePrimitive.Popup\n> &\n Pick<\n AutocompletePrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > &\n Pick<AutocompletePrimitive.Portal.Props, 'container'>\n\nfunction AutocompleteContent({\n className,\n children,\n align = 'start',\n alignOffset,\n side,\n sideOffset = 4,\n container,\n ...props\n}: AutocompleteContentProps) {\n return (\n <AutocompletePrimitive.Portal container={container}>\n <AutocompletePrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <AutocompletePrimitive.Popup\n data-slot=\"autocomplete-content\"\n className={cn(\n 'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg',\n 'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n 'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n className,\n )}\n {...props}\n >\n {children}\n </AutocompletePrimitive.Popup>\n </AutocompletePrimitive.Positioner>\n </AutocompletePrimitive.Portal>\n )\n}\n\nfunction AutocompleteList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n return (\n <AutocompletePrimitive.List\n data-slot=\"autocomplete-list\"\n className={cn('outline-hidden data-empty:p-0', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n return (\n <AutocompletePrimitive.Item\n data-slot=\"autocomplete-item\"\n className={cn(\n 'relative flex w-full cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n return (\n <AutocompletePrimitive.Empty\n data-slot=\"autocomplete-empty\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteStatus({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Status>) {\n return (\n <AutocompletePrimitive.Status\n data-slot=\"autocomplete-status\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n return (\n <AutocompletePrimitive.Group\n data-slot=\"autocomplete-group\"\n className={cn('scroll-my-1', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n return (\n <AutocompletePrimitive.GroupLabel\n data-slot=\"autocomplete-group-label\"\n className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteSeparator({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n aria-hidden=\"true\"\n data-slot=\"autocomplete-separator\"\n className={cn(\n 'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n Autocomplete,\n AutocompleteClear,\n AutocompleteCollection,\n AutocompleteContent,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteInputGroup,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n AutocompleteStatus,\n AutocompleteTrigger,\n useAutocompleteFilter,\n useAutocompleteFilteredItems,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete.cjs","names":["AutocompletePrimitive","React","useFieldControl","Input","InputGroup","Close","KeyboardArrowDown"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'\nimport { Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\nimport { Input, type InputVariant } from './input'\nimport { InputGroup } from './input-group'\n\nconst Autocomplete = AutocompletePrimitive.Root\nconst AutocompleteCollection = AutocompletePrimitive.Collection\nconst useAutocompleteFilter = AutocompletePrimitive.useFilter\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems\n\nconst AutocompleteInputGroupContext = React.createContext(false)\n\nconst OUTSET_FOCUS_RING =\n 'focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden'\n\nfunction AutocompleteInput({\n variant,\n id: idProp,\n className,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input> & {\n variant?: InputVariant\n}) {\n const inGroup = React.useContext(AutocompleteInputGroupContext)\n const resolvedVariant = variant ?? (inGroup ? 'none' : undefined)\n const { field, id, ariaDescribedBy, ariaInvalid } = useFieldControl({\n id: typeof idProp === 'string' ? idProp : undefined,\n ariaDescribedBy:\n typeof ariaDescribedByProp === 'string' ? ariaDescribedByProp : undefined,\n variant: resolvedVariant !== 'none' ? resolvedVariant : undefined,\n })\n const outsetBox = !inGroup && field?.labelPosition === 'outset'\n return (\n <AutocompletePrimitive.Input\n render={<Input id={id} variant={resolvedVariant} />}\n id={id}\n aria-invalid={ariaInvalid}\n className={cn(\n outsetBox && OUTSET_FOCUS_RING,\n inGroup && 'flex-1',\n className,\n )}\n {...props}\n aria-describedby={ariaDescribedBy}\n />\n )\n}\n\nfunction AutocompleteInputGroup(\n props: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>,\n) {\n return (\n <AutocompleteInputGroupContext.Provider value={true}>\n <AutocompletePrimitive.InputGroup\n data-slot=\"autocomplete-input-group\"\n render={<InputGroup />}\n {...props}\n />\n </AutocompleteInputGroupContext.Provider>\n )\n}\n\nconst ICON_BUTTON =\n \"relative inline-flex size-6 shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\nfunction AutocompleteClear({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {\n return (\n <AutocompletePrimitive.Clear\n data-slot=\"autocomplete-clear\"\n className={cn(ICON_BUTTON, className)}\n {...props}\n >\n {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n </AutocompletePrimitive.Clear>\n )\n}\n\nfunction AutocompleteTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n return (\n <AutocompletePrimitive.Trigger\n data-slot=\"autocomplete-trigger\"\n className={cn(\n ICON_BUTTON,\n '[&_svg]:transition-transform data-popup-open:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none',\n className,\n )}\n {...props}\n >\n {children ?? (\n <KeyboardArrowDown aria-hidden className=\"[--spark-icon-size:14px]\" />\n )}\n </AutocompletePrimitive.Trigger>\n )\n}\n\ntype AutocompleteContentProps = React.ComponentProps<\n typeof AutocompletePrimitive.Popup\n> &\n Pick<\n AutocompletePrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > &\n Pick<AutocompletePrimitive.Portal.Props, 'container'>\n\nfunction AutocompleteContent({\n className,\n children,\n align = 'start',\n alignOffset,\n side,\n sideOffset = 4,\n container,\n ...props\n}: AutocompleteContentProps) {\n return (\n <AutocompletePrimitive.Portal container={container}>\n <AutocompletePrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <AutocompletePrimitive.Popup\n data-slot=\"autocomplete-content\"\n className={cn(\n 'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg',\n 'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n 'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n className,\n )}\n {...props}\n >\n {children}\n </AutocompletePrimitive.Popup>\n </AutocompletePrimitive.Positioner>\n </AutocompletePrimitive.Portal>\n )\n}\n\nfunction AutocompleteList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n return (\n <AutocompletePrimitive.List\n data-slot=\"autocomplete-list\"\n className={cn('outline-hidden data-empty:p-0', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n return (\n <AutocompletePrimitive.Item\n data-slot=\"autocomplete-item\"\n className={cn(\n 'relative flex w-full cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n return (\n <AutocompletePrimitive.Empty\n data-slot=\"autocomplete-empty\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteStatus({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Status>) {\n return (\n <AutocompletePrimitive.Status\n data-slot=\"autocomplete-status\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n return (\n <AutocompletePrimitive.Group\n data-slot=\"autocomplete-group\"\n className={cn('scroll-my-1', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n return (\n <AutocompletePrimitive.GroupLabel\n data-slot=\"autocomplete-group-label\"\n className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteSeparator({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n aria-hidden=\"true\"\n data-slot=\"autocomplete-separator\"\n className={cn(\n 'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n Autocomplete,\n AutocompleteClear,\n AutocompleteCollection,\n AutocompleteContent,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteInputGroup,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n AutocompleteStatus,\n AutocompleteTrigger,\n useAutocompleteFilter,\n useAutocompleteFilteredItems,\n}\n"],"mappings":"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"}
|
|
@@ -18,10 +18,7 @@ declare function AutocompleteInput({
|
|
|
18
18
|
}: React$1.ComponentProps<typeof Autocomplete$1.Input> & {
|
|
19
19
|
variant?: InputVariant;
|
|
20
20
|
}): import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
declare function AutocompleteInputGroup(
|
|
22
|
-
className,
|
|
23
|
-
...props
|
|
24
|
-
}: React$1.ComponentProps<typeof Autocomplete$1.InputGroup>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function AutocompleteInputGroup(props: React$1.ComponentProps<typeof Autocomplete$1.InputGroup>): import("react/jsx-runtime").JSX.Element;
|
|
25
22
|
declare function AutocompleteClear({
|
|
26
23
|
className,
|
|
27
24
|
children,
|
|
@@ -18,10 +18,7 @@ declare function AutocompleteInput({
|
|
|
18
18
|
}: React$1.ComponentProps<typeof Autocomplete$1.Input> & {
|
|
19
19
|
variant?: InputVariant;
|
|
20
20
|
}): import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
declare function AutocompleteInputGroup(
|
|
22
|
-
className,
|
|
23
|
-
...props
|
|
24
|
-
}: React$1.ComponentProps<typeof Autocomplete$1.InputGroup>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function AutocompleteInputGroup(props: React$1.ComponentProps<typeof Autocomplete$1.InputGroup>): import("react/jsx-runtime").JSX.Element;
|
|
25
22
|
declare function AutocompleteClear({
|
|
26
23
|
className,
|
|
27
24
|
children,
|
|
@@ -14,16 +14,16 @@ const AutocompleteCollection = Autocomplete$1.Collection;
|
|
|
14
14
|
const useAutocompleteFilter = Autocomplete$1.useFilter;
|
|
15
15
|
const useAutocompleteFilteredItems = Autocomplete$1.useFilteredItems;
|
|
16
16
|
const AutocompleteInputGroupContext = React$1.createContext(false);
|
|
17
|
-
const
|
|
18
|
-
const FOCUS_WITHIN_RING = "focus-within:ring-2 focus-within:ring-(--color-focus-root)! focus-within:ring-offset-2";
|
|
17
|
+
const OUTSET_FOCUS_RING = "focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden";
|
|
19
18
|
function AutocompleteInput({ variant, id: idProp, className, "aria-describedby": ariaDescribedByProp, ...props }) {
|
|
20
19
|
const inGroup = React$1.useContext(AutocompleteInputGroupContext);
|
|
21
20
|
const resolvedVariant = variant ?? (inGroup ? "none" : void 0);
|
|
22
|
-
const { id, ariaDescribedBy, ariaInvalid } = useFieldControl({
|
|
21
|
+
const { field, id, ariaDescribedBy, ariaInvalid } = useFieldControl({
|
|
23
22
|
id: typeof idProp === "string" ? idProp : void 0,
|
|
24
23
|
ariaDescribedBy: typeof ariaDescribedByProp === "string" ? ariaDescribedByProp : void 0,
|
|
25
24
|
variant: resolvedVariant !== "none" ? resolvedVariant : void 0
|
|
26
25
|
});
|
|
26
|
+
const outsetBox = !inGroup && field?.labelPosition === "outset";
|
|
27
27
|
return /* @__PURE__ */ jsx(Autocomplete$1.Input, {
|
|
28
28
|
render: /* @__PURE__ */ jsx(Input, {
|
|
29
29
|
id,
|
|
@@ -31,18 +31,17 @@ function AutocompleteInput({ variant, id: idProp, className, "aria-describedby":
|
|
|
31
31
|
}),
|
|
32
32
|
id,
|
|
33
33
|
"aria-invalid": ariaInvalid,
|
|
34
|
-
className: cn(
|
|
34
|
+
className: cn(outsetBox && OUTSET_FOCUS_RING, inGroup && "flex-1", className),
|
|
35
35
|
...props,
|
|
36
36
|
"aria-describedby": ariaDescribedBy
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
|
-
function AutocompleteInputGroup(
|
|
39
|
+
function AutocompleteInputGroup(props) {
|
|
40
40
|
return /* @__PURE__ */ jsx(AutocompleteInputGroupContext.Provider, {
|
|
41
41
|
value: true,
|
|
42
42
|
children: /* @__PURE__ */ jsx(Autocomplete$1.InputGroup, {
|
|
43
43
|
"data-slot": "autocomplete-input-group",
|
|
44
44
|
render: /* @__PURE__ */ jsx(InputGroup, {}),
|
|
45
|
-
className: cn(FOCUS_WITHIN_RING, className),
|
|
46
45
|
...props
|
|
47
46
|
})
|
|
48
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","names":["AutocompletePrimitive","React"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'\nimport { Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\nimport { Input, type InputVariant } from './input'\nimport { InputGroup } from './input-group'\n\nconst Autocomplete = AutocompletePrimitive.Root\nconst AutocompleteCollection = AutocompletePrimitive.Collection\nconst useAutocompleteFilter = AutocompletePrimitive.useFilter\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems\n\nconst AutocompleteInputGroupContext = React.createContext(false)\n\nconst FOCUS_RING =\n 'focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden'\n\nconst FOCUS_WITHIN_RING =\n 'focus-within:ring-2 focus-within:ring-(--color-focus-root)! focus-within:ring-offset-2'\n\nfunction AutocompleteInput({\n variant,\n id: idProp,\n className,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input> & {\n variant?: InputVariant\n}) {\n const inGroup = React.useContext(AutocompleteInputGroupContext)\n const resolvedVariant = variant ?? (inGroup ? 'none' : undefined)\n const { id, ariaDescribedBy, ariaInvalid } = useFieldControl({\n id: typeof idProp === 'string' ? idProp : undefined,\n ariaDescribedBy:\n typeof ariaDescribedByProp === 'string' ? ariaDescribedByProp : undefined,\n variant: resolvedVariant !== 'none' ? resolvedVariant : undefined,\n })\n return (\n <AutocompletePrimitive.Input\n render={<Input id={id} variant={resolvedVariant} />}\n id={id}\n aria-invalid={ariaInvalid}\n className={cn(!inGroup && FOCUS_RING, className)}\n {...props}\n aria-describedby={ariaDescribedBy}\n />\n )\n}\n\nfunction AutocompleteInputGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>) {\n return (\n <AutocompleteInputGroupContext.Provider value={true}>\n <AutocompletePrimitive.InputGroup\n data-slot=\"autocomplete-input-group\"\n render={<InputGroup />}\n className={cn(FOCUS_WITHIN_RING, className)}\n {...props}\n />\n </AutocompleteInputGroupContext.Provider>\n )\n}\n\nconst ICON_BUTTON =\n \"relative inline-flex size-6 shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\nfunction AutocompleteClear({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {\n return (\n <AutocompletePrimitive.Clear\n data-slot=\"autocomplete-clear\"\n className={cn(ICON_BUTTON, className)}\n {...props}\n >\n {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n </AutocompletePrimitive.Clear>\n )\n}\n\nfunction AutocompleteTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n return (\n <AutocompletePrimitive.Trigger\n data-slot=\"autocomplete-trigger\"\n className={cn(\n ICON_BUTTON,\n '[&_svg]:transition-transform data-popup-open:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none',\n className,\n )}\n {...props}\n >\n {children ?? (\n <KeyboardArrowDown aria-hidden className=\"[--spark-icon-size:14px]\" />\n )}\n </AutocompletePrimitive.Trigger>\n )\n}\n\ntype AutocompleteContentProps = React.ComponentProps<\n typeof AutocompletePrimitive.Popup\n> &\n Pick<\n AutocompletePrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > &\n Pick<AutocompletePrimitive.Portal.Props, 'container'>\n\nfunction AutocompleteContent({\n className,\n children,\n align = 'start',\n alignOffset,\n side,\n sideOffset = 4,\n container,\n ...props\n}: AutocompleteContentProps) {\n return (\n <AutocompletePrimitive.Portal container={container}>\n <AutocompletePrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <AutocompletePrimitive.Popup\n data-slot=\"autocomplete-content\"\n className={cn(\n 'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg',\n 'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n 'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n className,\n )}\n {...props}\n >\n {children}\n </AutocompletePrimitive.Popup>\n </AutocompletePrimitive.Positioner>\n </AutocompletePrimitive.Portal>\n )\n}\n\nfunction AutocompleteList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n return (\n <AutocompletePrimitive.List\n data-slot=\"autocomplete-list\"\n className={cn('outline-hidden data-empty:p-0', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n return (\n <AutocompletePrimitive.Item\n data-slot=\"autocomplete-item\"\n className={cn(\n 'relative flex w-full cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n return (\n <AutocompletePrimitive.Empty\n data-slot=\"autocomplete-empty\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteStatus({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Status>) {\n return (\n <AutocompletePrimitive.Status\n data-slot=\"autocomplete-status\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n return (\n <AutocompletePrimitive.Group\n data-slot=\"autocomplete-group\"\n className={cn('scroll-my-1', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n return (\n <AutocompletePrimitive.GroupLabel\n data-slot=\"autocomplete-group-label\"\n className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteSeparator({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n aria-hidden=\"true\"\n data-slot=\"autocomplete-separator\"\n className={cn(\n 'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n Autocomplete,\n AutocompleteClear,\n AutocompleteCollection,\n AutocompleteContent,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteInputGroup,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n AutocompleteStatus,\n AutocompleteTrigger,\n useAutocompleteFilter,\n useAutocompleteFilteredItems,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete.js","names":["AutocompletePrimitive","React"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'\nimport { Close, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\nimport { Input, type InputVariant } from './input'\nimport { InputGroup } from './input-group'\n\nconst Autocomplete = AutocompletePrimitive.Root\nconst AutocompleteCollection = AutocompletePrimitive.Collection\nconst useAutocompleteFilter = AutocompletePrimitive.useFilter\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems\n\nconst AutocompleteInputGroupContext = React.createContext(false)\n\nconst OUTSET_FOCUS_RING =\n 'focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden'\n\nfunction AutocompleteInput({\n variant,\n id: idProp,\n className,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Input> & {\n variant?: InputVariant\n}) {\n const inGroup = React.useContext(AutocompleteInputGroupContext)\n const resolvedVariant = variant ?? (inGroup ? 'none' : undefined)\n const { field, id, ariaDescribedBy, ariaInvalid } = useFieldControl({\n id: typeof idProp === 'string' ? idProp : undefined,\n ariaDescribedBy:\n typeof ariaDescribedByProp === 'string' ? ariaDescribedByProp : undefined,\n variant: resolvedVariant !== 'none' ? resolvedVariant : undefined,\n })\n const outsetBox = !inGroup && field?.labelPosition === 'outset'\n return (\n <AutocompletePrimitive.Input\n render={<Input id={id} variant={resolvedVariant} />}\n id={id}\n aria-invalid={ariaInvalid}\n className={cn(\n outsetBox && OUTSET_FOCUS_RING,\n inGroup && 'flex-1',\n className,\n )}\n {...props}\n aria-describedby={ariaDescribedBy}\n />\n )\n}\n\nfunction AutocompleteInputGroup(\n props: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>,\n) {\n return (\n <AutocompleteInputGroupContext.Provider value={true}>\n <AutocompletePrimitive.InputGroup\n data-slot=\"autocomplete-input-group\"\n render={<InputGroup />}\n {...props}\n />\n </AutocompleteInputGroupContext.Provider>\n )\n}\n\nconst ICON_BUTTON =\n \"relative inline-flex size-6 shrink-0 items-center justify-center rounded-sm p-0 text-gray-light outline-hidden transition-colors hover:text-gray focus-visible:ring-2 focus-visible:ring-(--color-focus-root)! focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\"\n\nfunction AutocompleteClear({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {\n return (\n <AutocompletePrimitive.Clear\n data-slot=\"autocomplete-clear\"\n className={cn(ICON_BUTTON, className)}\n {...props}\n >\n {children ?? <Close aria-hidden className=\"[--spark-icon-size:14px]\" />}\n </AutocompletePrimitive.Clear>\n )\n}\n\nfunction AutocompleteTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n return (\n <AutocompletePrimitive.Trigger\n data-slot=\"autocomplete-trigger\"\n className={cn(\n ICON_BUTTON,\n '[&_svg]:transition-transform data-popup-open:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none',\n className,\n )}\n {...props}\n >\n {children ?? (\n <KeyboardArrowDown aria-hidden className=\"[--spark-icon-size:14px]\" />\n )}\n </AutocompletePrimitive.Trigger>\n )\n}\n\ntype AutocompleteContentProps = React.ComponentProps<\n typeof AutocompletePrimitive.Popup\n> &\n Pick<\n AutocompletePrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > &\n Pick<AutocompletePrimitive.Portal.Props, 'container'>\n\nfunction AutocompleteContent({\n className,\n children,\n align = 'start',\n alignOffset,\n side,\n sideOffset = 4,\n container,\n ...props\n}: AutocompleteContentProps) {\n return (\n <AutocompletePrimitive.Portal container={container}>\n <AutocompletePrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <AutocompletePrimitive.Popup\n data-slot=\"autocomplete-content\"\n className={cn(\n 'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg border border-gray-a1 bg-gray-1 p-1 text-gray-a12 shadow-lg',\n 'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n 'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n className,\n )}\n {...props}\n >\n {children}\n </AutocompletePrimitive.Popup>\n </AutocompletePrimitive.Positioner>\n </AutocompletePrimitive.Portal>\n )\n}\n\nfunction AutocompleteList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.List>) {\n return (\n <AutocompletePrimitive.List\n data-slot=\"autocomplete-list\"\n className={cn('outline-hidden data-empty:p-0', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n return (\n <AutocompletePrimitive.Item\n data-slot=\"autocomplete-item\"\n className={cn(\n 'relative flex w-full cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n return (\n <AutocompletePrimitive.Empty\n data-slot=\"autocomplete-empty\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteStatus({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Status>) {\n return (\n <AutocompletePrimitive.Status\n data-slot=\"autocomplete-status\"\n className={cn(\n 'px-1.5 py-1.5 text-sm text-gray-light empty:p-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n return (\n <AutocompletePrimitive.Group\n data-slot=\"autocomplete-group\"\n className={cn('scroll-my-1', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n return (\n <AutocompletePrimitive.GroupLabel\n data-slot=\"autocomplete-group-label\"\n className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n {...props}\n />\n )\n}\n\nfunction AutocompleteSeparator({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n <div\n aria-hidden=\"true\"\n data-slot=\"autocomplete-separator\"\n className={cn(\n 'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n Autocomplete,\n AutocompleteClear,\n AutocompleteCollection,\n AutocompleteContent,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteInputGroup,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n AutocompleteStatus,\n AutocompleteTrigger,\n useAutocompleteFilter,\n useAutocompleteFilteredItems,\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { accentByColor } from "../lib/accent-colors.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { accentByColor } from "../lib/accent-colors.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
|
package/dist/components/badge.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { accentByColor } from "../lib/accent-colors.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { accentByColor } from "../lib/accent-colors.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/badge.tsx
|
package/dist/components/box.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { containerChrome, containerInteractiveClasses, containerPaddingAll, radiusClasses } from "../lib/container-chrome.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { containerChrome, containerInteractiveClasses, containerPaddingAll, radiusClasses } from "../lib/container-chrome.js";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
6
6
|
import { useRender } from "@base-ui/react/use-render";
|
|
@@ -10,7 +10,7 @@ declare function BubbleGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const bubbleVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
13
|
+
variant?: "default" | "ghost" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -10,7 +10,7 @@ declare function BubbleGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const bubbleVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
13
|
+
variant?: "default" | "ghost" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use client";
|
|
3
|
-
import { accentByColor } from "../lib/accent-colors.js";
|
|
4
3
|
import { cn } from "../utils/cn.js";
|
|
4
|
+
import { accentByColor } from "../lib/accent-colors.js";
|
|
5
5
|
import * as React$1 from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { Button } from "@base-ui/react/button";
|
|
@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "
|
|
10
|
+
variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
|
|
11
11
|
color?: "accent" | "neutral" | "danger" | null | undefined;
|
|
12
12
|
size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "
|
|
10
|
+
variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
|
|
11
11
|
color?: "accent" | "neutral" | "danger" | null | undefined;
|
|
12
12
|
size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use client";
|
|
3
|
-
import { accentByColor } from "../lib/accent-colors.js";
|
|
4
3
|
import { cn } from "../utils/cn.js";
|
|
4
|
+
import { accentByColor } from "../lib/accent-colors.js";
|
|
5
5
|
import * as React$1 from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { Button as Button$1 } from "@base-ui/react/button";
|
|
@@ -8,7 +8,7 @@ import { SparkIcon } from "@epilot/spark-icons";
|
|
|
8
8
|
//#region src/components/callout.d.ts
|
|
9
9
|
type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
|
|
10
10
|
declare const calloutVariants: (props?: ({
|
|
11
|
-
variant?: "neutral" | "
|
|
11
|
+
variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
|
|
14
14
|
/** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */
|
|
@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
8
8
|
//#region src/components/callout.d.ts
|
|
9
9
|
type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
|
|
10
10
|
declare const calloutVariants: (props?: ({
|
|
11
|
-
variant?: "neutral" | "
|
|
11
|
+
variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
|
|
14
14
|
/** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */
|
package/dist/components/card.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { containerChrome, containerInteractiveClasses, containerPaddingX, radiusClasses } from "../lib/container-chrome.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { containerChrome, containerInteractiveClasses, containerPaddingX, radiusClasses } from "../lib/container-chrome.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { cva } from "class-variance-authority";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { accentByColor } from "../lib/accent-colors.js";
|
|
3
2
|
import { cn } from "../utils/cn.js";
|
|
3
|
+
import { accentByColor } from "../lib/accent-colors.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
package/dist/components/icon.js
CHANGED
|
@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/info-block.d.ts
|
|
7
7
|
declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "default" | "bare" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
10
10
|
declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/info-block.d.ts
|
|
7
7
|
declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "default" | "bare" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
10
10
|
declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const require_chunk = require("../chunk-DY84GLCh.cjs");
|
|
5
|
+
const require_components_button = require("./button.cjs");
|
|
6
|
+
const require_components_input_group = require("./input-group.cjs");
|
|
7
|
+
const require_components_calendar = require("./calendar.cjs");
|
|
8
|
+
const require_components_popover = require("./popover.cjs");
|
|
9
|
+
let react = require("react");
|
|
10
|
+
react = require_chunk.__toESM(react);
|
|
11
|
+
let _epilot_spark_icons = require("@epilot/spark-icons");
|
|
12
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
+
let ictus = require("ictus");
|
|
14
|
+
let cnfast = require("cnfast");
|
|
15
|
+
//#region src/components/input-date.tsx
|
|
16
|
+
function useControllableState({ defaultProp, onChange, prop }) {
|
|
17
|
+
const [uncontrolled, setUncontrolled] = react.useState(defaultProp);
|
|
18
|
+
const isControlled = prop !== void 0;
|
|
19
|
+
return [isControlled ? prop : uncontrolled, react.useCallback((next) => {
|
|
20
|
+
if (!isControlled) setUncontrolled(next);
|
|
21
|
+
onChange?.(next);
|
|
22
|
+
}, [isControlled, onChange])];
|
|
23
|
+
}
|
|
24
|
+
const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarProps, className, defaultOpen = false, defaultValue = "", disabled, id, onDateChange, onKeyDown, onOpenChange, onValueChange, open: openProp, placeholder, readOnly, separator = ".", value: valueProp, ...props }, ref) {
|
|
25
|
+
const inputRef = react.useRef(null);
|
|
26
|
+
const [text, setText] = useControllableState({
|
|
27
|
+
defaultProp: defaultValue,
|
|
28
|
+
onChange: onValueChange,
|
|
29
|
+
prop: valueProp
|
|
30
|
+
});
|
|
31
|
+
const [open, setOpenState] = useControllableState({
|
|
32
|
+
defaultProp: defaultOpen,
|
|
33
|
+
onChange: onOpenChange,
|
|
34
|
+
prop: openProp
|
|
35
|
+
});
|
|
36
|
+
const selected = (0, ictus.parseDate)(text);
|
|
37
|
+
const [month, setMonth] = react.useState(() => selected ?? calendarProps?.month);
|
|
38
|
+
const setOpen = react.useCallback((next) => {
|
|
39
|
+
if (next && calendarProps?.month === void 0) setMonth((0, ictus.parseDate)(text) ?? /* @__PURE__ */ new Date());
|
|
40
|
+
setOpenState(next);
|
|
41
|
+
}, [
|
|
42
|
+
calendarProps?.month,
|
|
43
|
+
setOpenState,
|
|
44
|
+
text
|
|
45
|
+
]);
|
|
46
|
+
const commit = react.useCallback((next) => {
|
|
47
|
+
if (next === text) return;
|
|
48
|
+
setText(next);
|
|
49
|
+
onDateChange?.((0, ictus.parseDate)(next));
|
|
50
|
+
}, [
|
|
51
|
+
onDateChange,
|
|
52
|
+
setText,
|
|
53
|
+
text
|
|
54
|
+
]);
|
|
55
|
+
const setInputRef = react.useCallback((node) => {
|
|
56
|
+
inputRef.current = node;
|
|
57
|
+
if (typeof ref === "function") ref(node);
|
|
58
|
+
else if (ref) ref.current = node;
|
|
59
|
+
}, [ref]);
|
|
60
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_popover.Popover, {
|
|
61
|
+
onOpenChange: setOpen,
|
|
62
|
+
open,
|
|
63
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_popover.PopoverAnchor, {
|
|
64
|
+
render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_group.InputGroup, { className }),
|
|
65
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_group.InputGroupInput, {
|
|
66
|
+
autoComplete: "off",
|
|
67
|
+
...props,
|
|
68
|
+
className: (0, cnfast.cn)(readOnly && "cursor-pointer"),
|
|
69
|
+
disabled,
|
|
70
|
+
id,
|
|
71
|
+
inputMode: readOnly ? void 0 : "numeric",
|
|
72
|
+
onChange: () => {},
|
|
73
|
+
onClick: readOnly && !disabled ? (event) => {
|
|
74
|
+
props.onClick?.(event);
|
|
75
|
+
if (!event.defaultPrevented) setOpen(true);
|
|
76
|
+
} : props.onClick,
|
|
77
|
+
onKeyDown: (event) => {
|
|
78
|
+
onKeyDown?.(event);
|
|
79
|
+
if (event.defaultPrevented) return;
|
|
80
|
+
if (event.key === "ArrowDown") {
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
setOpen(true);
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
if (readOnly || !(0, ictus.isDateMaskKey)(event.key)) return;
|
|
86
|
+
event.preventDefault();
|
|
87
|
+
const next = (0, ictus.apply)({
|
|
88
|
+
caret: event.currentTarget.selectionStart ?? 0,
|
|
89
|
+
key: event.key,
|
|
90
|
+
selectionEnd: event.currentTarget.selectionEnd ?? void 0,
|
|
91
|
+
separator,
|
|
92
|
+
value: event.currentTarget.value
|
|
93
|
+
});
|
|
94
|
+
commit(next.value);
|
|
95
|
+
const caret = next.caret;
|
|
96
|
+
const input = inputRef.current;
|
|
97
|
+
requestAnimationFrame(() => {
|
|
98
|
+
input?.setSelectionRange(caret, caret);
|
|
99
|
+
});
|
|
100
|
+
},
|
|
101
|
+
placeholder: placeholder ?? `DD${separator}MM${separator}YYYY`,
|
|
102
|
+
readOnly,
|
|
103
|
+
ref: setInputRef,
|
|
104
|
+
spellCheck: false,
|
|
105
|
+
value: text
|
|
106
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_input_group.InputGroupAddon, {
|
|
107
|
+
align: "inline-end",
|
|
108
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_popover.PopoverTrigger, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
|
|
109
|
+
"aria-label": calendarLabel,
|
|
110
|
+
color: "neutral",
|
|
111
|
+
disabled,
|
|
112
|
+
size: "icon-small",
|
|
113
|
+
styleVariant: "ghost",
|
|
114
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.CalendarMonth, {})
|
|
115
|
+
}) })
|
|
116
|
+
})]
|
|
117
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_popover.PopoverContent, {
|
|
118
|
+
align: "start",
|
|
119
|
+
"aria-label": calendarLabel,
|
|
120
|
+
className: "w-auto p-0",
|
|
121
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_calendar.Calendar, {
|
|
122
|
+
...calendarProps,
|
|
123
|
+
mode: "single",
|
|
124
|
+
month: calendarProps?.month ?? month,
|
|
125
|
+
onMonthChange: (next) => {
|
|
126
|
+
calendarProps?.onMonthChange?.(next);
|
|
127
|
+
if (calendarProps?.month === void 0) setMonth(next);
|
|
128
|
+
},
|
|
129
|
+
onSelect: (next) => {
|
|
130
|
+
commit(next ? (0, ictus.formatDate)(next, separator) : "");
|
|
131
|
+
setOpen(false);
|
|
132
|
+
},
|
|
133
|
+
selected
|
|
134
|
+
})
|
|
135
|
+
})]
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
//#endregion
|
|
139
|
+
exports.InputDate = InputDate;
|
|
140
|
+
|
|
141
|
+
//# sourceMappingURL=input-date.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-date.cjs","names":["React","Popover","PopoverAnchor","InputGroup","InputGroupInput","InputGroupAddon","PopoverTrigger","Button","CalendarMonth","PopoverContent","Calendar"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n Popover,\n PopoverAnchor,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n defaultProp,\n onChange,\n prop,\n}: {\n defaultProp: T\n onChange?: (value: T) => void\n prop?: T\n}) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n const isControlled = prop !== undefined\n const value = isControlled ? prop : uncontrolled\n\n const setValue = React.useCallback(\n (next: T) => {\n if (!isControlled) setUncontrolled(next)\n onChange?.(next)\n },\n [isControlled, onChange],\n )\n\n return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n React.ComponentProps<'input'>,\n 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'\n> & {\n calendarLabel: string\n calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n defaultOpen?: boolean\n defaultValue?: string\n onDateChange?: (date: Date | undefined) => void\n onOpenChange?: (open: boolean) => void\n onValueChange?: (value: string) => void\n open?: boolean\n separator?: string\n value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n function InputDate(\n {\n calendarLabel,\n calendarProps,\n className,\n defaultOpen = false,\n defaultValue = '',\n disabled,\n id,\n onDateChange,\n onKeyDown,\n onOpenChange,\n onValueChange,\n open: openProp,\n placeholder,\n readOnly,\n separator = '.',\n value: valueProp,\n ...props\n },\n ref,\n ) {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [text, setText] = useControllableState({\n defaultProp: defaultValue,\n onChange: onValueChange,\n prop: valueProp,\n })\n const [open, setOpenState] = useControllableState({\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n prop: openProp,\n })\n const selected = parseDate(text)\n const [month, setMonth] = React.useState<Date | undefined>(\n () => selected ?? calendarProps?.month,\n )\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (next && calendarProps?.month === undefined) {\n setMonth(parseDate(text) ?? new Date())\n }\n setOpenState(next)\n },\n [calendarProps?.month, setOpenState, text],\n )\n\n const commit = React.useCallback(\n (next: string) => {\n if (next === text) return\n setText(next)\n onDateChange?.(parseDate(next))\n },\n [onDateChange, setText, text],\n )\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n },\n [ref],\n )\n\n return (\n <Popover onOpenChange={setOpen} open={open}>\n <PopoverAnchor render={<InputGroup className={className} />}>\n <InputGroupInput\n autoComplete=\"off\"\n {...props}\n className={cn(readOnly && 'cursor-pointer')}\n disabled={disabled}\n id={id}\n inputMode={readOnly ? undefined : 'numeric'}\n onChange={() => {}}\n onClick={\n readOnly && !disabled\n ? (event) => {\n props.onClick?.(event)\n if (!event.defaultPrevented) setOpen(true)\n }\n : props.onClick\n }\n onKeyDown={(event) => {\n onKeyDown?.(event)\n if (event.defaultPrevented) return\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n setOpen(true)\n return\n }\n if (readOnly || !isDateMaskKey(event.key)) return\n event.preventDefault()\n const next = apply({\n caret: event.currentTarget.selectionStart ?? 0,\n key: event.key,\n selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n separator,\n value: event.currentTarget.value,\n })\n commit(next.value)\n const caret = next.caret\n const input = inputRef.current\n requestAnimationFrame(() => {\n input?.setSelectionRange(caret, caret)\n })\n }}\n placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n readOnly={readOnly}\n ref={setInputRef}\n spellCheck={false}\n value={text}\n />\n <InputGroupAddon align=\"inline-end\">\n <PopoverTrigger\n render={\n <Button\n aria-label={calendarLabel}\n color=\"neutral\"\n disabled={disabled}\n size=\"icon-small\"\n styleVariant=\"ghost\"\n >\n <CalendarMonth />\n </Button>\n }\n />\n </InputGroupAddon>\n </PopoverAnchor>\n <PopoverContent\n align=\"start\"\n aria-label={calendarLabel}\n className=\"w-auto p-0\"\n >\n <Calendar\n {...calendarProps}\n mode=\"single\"\n month={calendarProps?.month ?? month}\n onMonthChange={(next) => {\n calendarProps?.onMonthChange?.(next)\n if (calendarProps?.month === undefined) setMonth(next)\n }}\n onSelect={(next) => {\n commit(next ? formatDate(next, separator) : '')\n setOpen(false)\n }}\n selected={selected}\n />\n </PopoverContent>\n </Popover>\n )\n },\n)\n\nexport { InputDate }\n"],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { CalendarProps } from "./calendar.cjs";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/input-date.d.ts
|
|
7
|
+
type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
|
|
8
|
+
calendarLabel: string;
|
|
9
|
+
calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>;
|
|
10
|
+
defaultOpen?: boolean;
|
|
11
|
+
defaultValue?: string;
|
|
12
|
+
onDateChange?: (date: Date | undefined) => void;
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
onValueChange?: (value: string) => void;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
separator?: string;
|
|
17
|
+
value?: string;
|
|
18
|
+
};
|
|
19
|
+
declare const InputDate: React$1.ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { InputDate, InputDateProps };
|
|
22
|
+
//# sourceMappingURL=input-date.d.cts.map
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { CalendarProps } from "./calendar.js";
|
|
4
|
+
import * as React$1 from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/input-date.d.ts
|
|
7
|
+
type InputDateProps = Omit<React$1.ComponentProps<'input'>, 'children' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
|
|
8
|
+
calendarLabel: string;
|
|
9
|
+
calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>;
|
|
10
|
+
defaultOpen?: boolean;
|
|
11
|
+
defaultValue?: string;
|
|
12
|
+
onDateChange?: (date: Date | undefined) => void;
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
onValueChange?: (value: string) => void;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
separator?: string;
|
|
17
|
+
value?: string;
|
|
18
|
+
};
|
|
19
|
+
declare const InputDate: React$1.ForwardRefExoticComponent<Omit<InputDateProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { InputDate, InputDateProps };
|
|
22
|
+
//# sourceMappingURL=input-date.d.ts.map
|