@evinvest/uikit 0.27.0 → 0.29.2
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/README.md +13 -13
- package/dist/components/alert-dialog.js +1 -2
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/auth-wall.js +42 -0
- package/dist/components/auth-wall.js.map +1 -0
- package/dist/components/checkbox.js +2 -0
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/command.js +55 -9
- package/dist/components/command.js.map +1 -1
- package/dist/components/dialog.js +29 -6
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/field.js +3 -8
- package/dist/components/field.js.map +1 -1
- package/dist/components/input.js +2 -0
- package/dist/components/input.js.map +1 -1
- package/dist/components/native-select.js +2 -0
- package/dist/components/native-select.js.map +1 -1
- package/dist/components/select.js +2 -0
- package/dist/components/select.js.map +1 -1
- package/dist/components/sheet.js +1 -2
- package/dist/components/sheet.js.map +1 -1
- package/dist/components/switch.js +2 -0
- package/dist/components/switch.js.map +1 -1
- package/dist/components/textarea.js +2 -0
- package/dist/components/textarea.js.map +1 -1
- package/dist/generated/command.js +2 -2
- package/dist/generated/command.js.map +1 -1
- package/dist/index.d.ts +14 -57
- package/dist/index.js +1 -2
- package/dist/primitives/labelable.js +24 -0
- package/dist/primitives/labelable.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/chart.js +0 -151
- package/dist/components/chart.js.map +0 -1
- package/dist/components/resizable.js +0 -193
- package/dist/components/resizable.js.map +0 -1
- package/dist/generated/chart.js +0 -9
- package/dist/generated/chart.js.map +0 -1
- package/dist/generated/resizable.js +0 -11
- package/dist/generated/resizable.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./label\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { Checkbox } from \"./checkbox\";\nimport { FieldControlContext, useFieldClaims } from \"./field-context\";\nimport { Input } from \"./input\";\nimport { NativeSelect } from \"./native-select\";\nimport { SelectTrigger } from \"./select\";\nimport { Switch } from \"./switch\";\nimport { Textarea } from \"./textarea\";\nimport {\n FIELD_BASE,\n FIELD_SET,\n FIELD_LEGEND,\n FIELD_GROUP,\n FIELD_CONTENT,\n FIELD_LABEL,\n FIELD_TITLE,\n FIELD_DESCRIPTION,\n FIELD_SEPARATOR,\n FIELD_SEPARATOR_LINE,\n FIELD_SEPARATOR_CONTENT,\n FIELD_ERROR,\n fieldOrientation,\n type FieldOrientation,\n} from \"../generated/field\";\n\nexport type { FieldOrientation };\n\nexport function FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(FIELD_SET, className)}\n {...props}\n />\n );\n}\n\nexport function FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(FIELD_LEGEND, className)}\n {...props}\n />\n );\n}\n\nexport function FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(FIELD_GROUP, className)}\n {...props}\n />\n );\n}\n\n/**\n * A labelled control. `Field` mints one id and hands it to both ends: its\n * `FieldLabel` takes it as `for`, and the kit's `Input`, `Textarea`,\n * `NativeSelect`, `SelectTrigger`, `Checkbox` and `Switch` take it as `id` —\n * each only when the caller passed none. `controlId` names the id instead of\n * minting one. One control per `Field`: a field that holds two has to name\n * their ids by hand, or both would claim the one id (a development warning\n * says so).\n */\nexport function Field({\n className,\n orientation = \"vertical\",\n controlId,\n ...props\n}: React.ComponentProps<\"div\"> & { orientation?: FieldOrientation; controlId?: string }) {\n const minted = React.useId();\n const claim = useFieldClaims();\n const id = controlId ?? minted;\n const control = React.useMemo(() => ({ id, claim }), [id, claim]);\n return (\n <FieldControlContext.Provider value={control}>\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(FIELD_BASE, fieldOrientation[orientation], className)}\n {...props}\n />\n </FieldControlContext.Provider>\n );\n}\n\nexport function FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(FIELD_CONTENT, className)}\n {...props}\n />\n );\n}\n\nexport interface FieldLabelProps extends Omit<React.ComponentProps<typeof Label>, \"htmlFor\"> {\n /** `null` opts out of the `Field`'s id: the label then has no `for` at all. */\n htmlFor?: string | null;\n}\n\n/**\n * Takes its `Field`'s id as `for` unless it wraps a control itself — a label\n * around an `<input>` already labels it, and a `for` pointing elsewhere would\n * steal the click. A control inside a component of yours is invisible to that\n * check; pass `htmlFor={null}` there.\n */\nexport function FieldLabel({ className, htmlFor, children, ...props }: FieldLabelProps) {\n const field = React.useContext(FieldControlContext);\n const target = htmlFor === null ? undefined : (htmlFor ?? (wrapsControl(children) ? undefined : field?.id));\n return (\n <Label\n data-slot=\"field-label\"\n htmlFor={target}\n className={cn(FIELD_LABEL, className)}\n {...props}\n >\n {children}\n </Label>\n );\n}\n\n// The labelable elements (HTML's list, less `output`/`meter`/`progress`, which a\n// field label never wraps) and the kit's controls that render one — plus a\n// nested `Field`, the choice-card shape, whose control is labelled by its own.\nconst LABELABLE_TAGS = new Set([\"input\", \"select\", \"textarea\", \"button\"]);\nconst LABELABLE_KIT: ReadonlySet<unknown> = new Set([Input, Textarea, NativeSelect, Checkbox, Switch, SelectTrigger, Field]);\n\nfunction wrapsControl(children: React.ReactNode): boolean {\n let found = false;\n walkElements(children, (element) => {\n if (found) return false;\n const { type } = element;\n const props = element.props as { type?: unknown };\n if (typeof type === \"string\" ? LABELABLE_TAGS.has(type) && props.type !== \"hidden\" : LABELABLE_KIT.has(type)) {\n found = true;\n }\n return !found;\n });\n return found;\n}\n\nexport function FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(FIELD_TITLE, className)}\n {...props}\n />\n );\n}\n\nexport function FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(FIELD_DESCRIPTION, className)}\n {...props}\n />\n );\n}\n\nexport function FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(FIELD_SEPARATOR, className)}\n {...props}\n >\n <div role=\"separator\" className={FIELD_SEPARATOR_LINE} />\n {children && (\n <span\n className={FIELD_SEPARATOR_CONTENT}\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\nexport function FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<\"div\"> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = React.useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors) {\n return null;\n }\n\n if (errors?.length === 1 && errors[0]?.message) {\n return errors[0].message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {errors.map(\n (error, index) => error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn(FIELD_ERROR, className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./label\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { isLabelable, markLabelable } from \"../primitives/labelable\";\nimport { FieldControlContext, useFieldClaims } from \"./field-context\";\nimport {\n FIELD_BASE,\n FIELD_SET,\n FIELD_LEGEND,\n FIELD_GROUP,\n FIELD_CONTENT,\n FIELD_LABEL,\n FIELD_TITLE,\n FIELD_DESCRIPTION,\n FIELD_SEPARATOR,\n FIELD_SEPARATOR_LINE,\n FIELD_SEPARATOR_CONTENT,\n FIELD_ERROR,\n fieldOrientation,\n type FieldOrientation,\n} from \"../generated/field\";\n\nexport type { FieldOrientation };\n\nexport function FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(FIELD_SET, className)}\n {...props}\n />\n );\n}\n\nexport function FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(FIELD_LEGEND, className)}\n {...props}\n />\n );\n}\n\nexport function FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(FIELD_GROUP, className)}\n {...props}\n />\n );\n}\n\n/**\n * A labelled control. `Field` mints one id and hands it to both ends: its\n * `FieldLabel` takes it as `for`, and the kit's `Input`, `Textarea`,\n * `NativeSelect`, `SelectTrigger`, `Checkbox` and `Switch` take it as `id` —\n * each only when the caller passed none. `controlId` names the id instead of\n * minting one. One control per `Field`: a field that holds two has to name\n * their ids by hand, or both would claim the one id (a development warning\n * says so).\n */\nexport function Field({\n className,\n orientation = \"vertical\",\n controlId,\n ...props\n}: React.ComponentProps<\"div\"> & { orientation?: FieldOrientation; controlId?: string }) {\n const minted = React.useId();\n const claim = useFieldClaims();\n const id = controlId ?? minted;\n const control = React.useMemo(() => ({ id, claim }), [id, claim]);\n return (\n <FieldControlContext.Provider value={control}>\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(FIELD_BASE, fieldOrientation[orientation], className)}\n {...props}\n />\n </FieldControlContext.Provider>\n );\n}\n\nmarkLabelable(Field);\n\nexport function FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(FIELD_CONTENT, className)}\n {...props}\n />\n );\n}\n\nexport interface FieldLabelProps extends Omit<React.ComponentProps<typeof Label>, \"htmlFor\"> {\n /** `null` opts out of the `Field`'s id: the label then has no `for` at all. */\n htmlFor?: string | null;\n}\n\n/**\n * Takes its `Field`'s id as `for` unless it wraps a control itself — a label\n * around an `<input>` already labels it, and a `for` pointing elsewhere would\n * steal the click. A control inside a component of yours is invisible to that\n * check; pass `htmlFor={null}` there.\n */\nexport function FieldLabel({ className, htmlFor, children, ...props }: FieldLabelProps) {\n const field = React.useContext(FieldControlContext);\n const target = htmlFor === null ? undefined : (htmlFor ?? (wrapsControl(children) ? undefined : field?.id));\n return (\n <Label\n data-slot=\"field-label\"\n htmlFor={target}\n className={cn(FIELD_LABEL, className)}\n {...props}\n >\n {children}\n </Label>\n );\n}\n\n// The labelable elements (HTML's list, less `output`/`meter`/`progress`, which a\n// field label never wraps) and the kit's controls that render one — plus a\n// nested `Field`, the choice-card shape, whose control is labelled by its own.\n// The kit's controls carry a mark (`primitives/labelable`) rather than sitting\n// in a set here: a set would import every control into every page with a Field.\nconst LABELABLE_TAGS = new Set([\"input\", \"select\", \"textarea\", \"button\"]);\n\nfunction wrapsControl(children: React.ReactNode): boolean {\n let found = false;\n walkElements(children, (element) => {\n if (found) return false;\n const { type } = element;\n const props = element.props as { type?: unknown };\n if (typeof type === \"string\" ? LABELABLE_TAGS.has(type) && props.type !== \"hidden\" : isLabelable(type)) {\n found = true;\n }\n return !found;\n });\n return found;\n}\n\nexport function FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(FIELD_TITLE, className)}\n {...props}\n />\n );\n}\n\nexport function FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(FIELD_DESCRIPTION, className)}\n {...props}\n />\n );\n}\n\nexport function FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(FIELD_SEPARATOR, className)}\n {...props}\n >\n <div role=\"separator\" className={FIELD_SEPARATOR_LINE} />\n {children && (\n <span\n className={FIELD_SEPARATOR_CONTENT}\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\nexport function FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<\"div\"> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = React.useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors) {\n return null;\n }\n\n if (errors?.length === 1 && errors[0]?.message) {\n return errors[0].message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {errors.map(\n (error, index) => error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn(FIELD_ERROR, className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/dist/components/input.js
CHANGED
|
@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
5
|
import { INPUT_BASE, inputSizeClasses } from "../generated/input.js";
|
|
6
|
+
import { markLabelable } from "../primitives/labelable.js";
|
|
6
7
|
import { useFieldControlId } from "./field-context.js";
|
|
7
8
|
const Input = React.forwardRef(
|
|
8
9
|
function Input2({ className, type, id, size = "md", ...props }, ref) {
|
|
@@ -20,6 +21,7 @@ const Input = React.forwardRef(
|
|
|
20
21
|
);
|
|
21
22
|
}
|
|
22
23
|
);
|
|
24
|
+
markLabelable(Input);
|
|
23
25
|
export {
|
|
24
26
|
Input
|
|
25
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { INPUT_BASE, inputSizeClasses, type InputSize } from \"../generated/input\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { InputSize };\n\n// The native `size` attribute (a width in characters) gives way to the kit's\n// scale, as it does on `NativeSelect`; a width belongs in `className`.\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\"> {\n size?: InputSize;\n}\n\n// `forwardRef` rather than a `ref` prop so the handle also reaches the element\n// under React 18, where function components drop `ref`.\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n function Input({ className, type, id, size = \"md\", ...props }, ref) {\n return (\n <input\n ref={ref}\n type={type}\n id={useFieldControlId(id)}\n data-slot=\"input\"\n data-size={size}\n className={cn(INPUT_BASE, inputSizeClasses[size], className)}\n {...props}\n />\n );\n },\n);\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { INPUT_BASE, inputSizeClasses, type InputSize } from \"../generated/input\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { InputSize };\n\n// The native `size` attribute (a width in characters) gives way to the kit's\n// scale, as it does on `NativeSelect`; a width belongs in `className`.\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\"> {\n size?: InputSize;\n}\n\n// `forwardRef` rather than a `ref` prop so the handle also reaches the element\n// under React 18, where function components drop `ref`.\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n function Input({ className, type, id, size = \"md\", ...props }, ref) {\n return (\n <input\n ref={ref}\n type={type}\n id={useFieldControlId(id)}\n data-slot=\"input\"\n data-size={size}\n className={cn(INPUT_BASE, inputSizeClasses[size], className)}\n {...props}\n />\n );\n },\n);\n\nmarkLabelable(Input);\n"],"mappings":";AAqBM;AAnBN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwC;AAC7D,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAY3B,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,WAAW,MAAM,IAAI,OAAO,MAAM,GAAG,MAAM,GAAG,KAAK;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,IAAI,kBAAkB,EAAE;AAAA,QACxB,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW,GAAG,YAAY,iBAAiB,IAAI,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,cAAc,KAAK;","names":["Input"]}
|
|
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
5
|
import { nativeSelectSizeClasses } from "../generated/select.js";
|
|
6
|
+
import { markLabelable } from "../primitives/labelable.js";
|
|
6
7
|
import { useFieldControlId } from "./field-context.js";
|
|
7
8
|
import { SelectChevron } from "./select-chevron.js";
|
|
8
9
|
const NATIVE_SELECT = "border-input text-ink h-9 w-full min-w-0 appearance-none rounded-[var(--control-radius)] border bg-transparent py-1 pr-9 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error has-[option[value='']:checked]:text-ink-soft [&_option]:bg-popover [&_option]:text-ink [&_optgroup]:bg-popover [&_optgroup]:text-ink-soft [color-scheme:var(--scheme,normal)]";
|
|
@@ -48,6 +49,7 @@ const NativeSelect = React.forwardRef(
|
|
|
48
49
|
);
|
|
49
50
|
}
|
|
50
51
|
);
|
|
52
|
+
markLabelable(NativeSelect);
|
|
51
53
|
function NativeSelectOption(props) {
|
|
52
54
|
return /* @__PURE__ */ jsx("option", { "data-slot": "native-select-option", ...props });
|
|
53
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/native-select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { nativeSelectSizeClasses, type NativeSelectSize } from \"../generated/select\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\n\nexport type { NativeSelectSize };\n\n/**\n * A real `<select>` wearing the kit's control: the form posts its `name` with no\n * script at all, and the popup is the platform's own (keyboard, type-ahead, the\n * mobile picker). `Select` is the scripted combobox for everything a native\n * popup cannot draw; this is for a form that has to submit before hydration.\n *\n * A component of its own rather than a `native` switch on `Select`: none of\n * `SelectTrigger` / `SelectValue` / `SelectContent` has a native counterpart, so\n * a flag would leave most of the compound API meaning nothing in one mode.\n *\n * `className` styles the `<select>`; `wrapperClassName` the box that holds it\n * and the arrow — that box is what a layout sizes. It is `w-full` like `Input`,\n * so the two line up in a form column; narrow it with `wrapperClassName`.\n */\nexport interface NativeSelectProps\n extends Omit<React.ComponentPropsWithoutRef<\"select\">, \"size\" | \"multiple\"> {\n size?: NativeSelectSize;\n /** An empty, unpickable first option shown until a value is chosen. */\n placeholder?: string;\n wrapperClassName?: string;\n}\n\n// `appearance-none` drops the OS arrow. The popup is drawn by the platform:\n// the option colours reach it where the platform honours them, and `--scheme`\n// (a palette's polarity, `light` or `dark`) picks the platform's own dark\n// menu where it does not. The placeholder is the empty option being the\n// checked one — CSS can see that without script.\nconst NATIVE_SELECT =\n \"border-input text-ink h-9 w-full min-w-0 appearance-none rounded-[var(--control-radius)] border bg-transparent py-1 pr-9 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error has-[option[value='']:checked]:text-ink-soft [&_option]:bg-popover [&_option]:text-ink [&_optgroup]:bg-popover [&_optgroup]:text-ink-soft [color-scheme:var(--scheme,normal)]\";\n\nexport const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(\n function NativeSelect(\n { className, wrapperClassName, size = \"md\", placeholder, id, children, value, defaultValue, ...props },\n ref,\n ) {\n const controlId = useFieldControlId(id);\n // Without a checked option the browser picks the first enabled one, which\n // would skip a disabled placeholder; start on it unless told otherwise.\n const initial = value === undefined && defaultValue === undefined && placeholder !== undefined ? \"\" : defaultValue;\n return (\n <span\n data-slot=\"native-select-wrapper\"\n className={cn(\"relative inline-flex w-full has-[select:disabled]:opacity-50\", wrapperClassName)}\n >\n <select\n ref={ref}\n id={controlId}\n data-slot=\"native-select\"\n data-size={size}\n className={cn(NATIVE_SELECT, nativeSelectSizeClasses[size], className)}\n {...(value !== undefined ? { value } : {})}\n {...(initial !== undefined ? { defaultValue: initial } : {})}\n {...props}\n >\n {placeholder !== undefined && (\n <option value=\"\" disabled hidden>\n {placeholder}\n </option>\n )}\n {children}\n </select>\n <SelectChevron\n className={cn(\n \"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\",\n // keeps the arrow as far in from the edge as the large inset keeps the text\n size === \"lg\" && \"right-4\",\n )}\n />\n </span>\n );\n },\n);\n\nexport function NativeSelectOption(props: React.ComponentProps<\"option\">) {\n return <option data-slot=\"native-select-option\" {...props} />;\n}\n\nexport function NativeSelectGroup(props: React.ComponentProps<\"optgroup\">) {\n return <optgroup data-slot=\"native-select-group\" {...props} />;\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../src/components/native-select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { nativeSelectSizeClasses, type NativeSelectSize } from \"../generated/select\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\n\nexport type { NativeSelectSize };\n\n/**\n * A real `<select>` wearing the kit's control: the form posts its `name` with no\n * script at all, and the popup is the platform's own (keyboard, type-ahead, the\n * mobile picker). `Select` is the scripted combobox for everything a native\n * popup cannot draw; this is for a form that has to submit before hydration.\n *\n * A component of its own rather than a `native` switch on `Select`: none of\n * `SelectTrigger` / `SelectValue` / `SelectContent` has a native counterpart, so\n * a flag would leave most of the compound API meaning nothing in one mode.\n *\n * `className` styles the `<select>`; `wrapperClassName` the box that holds it\n * and the arrow — that box is what a layout sizes. It is `w-full` like `Input`,\n * so the two line up in a form column; narrow it with `wrapperClassName`.\n */\nexport interface NativeSelectProps\n extends Omit<React.ComponentPropsWithoutRef<\"select\">, \"size\" | \"multiple\"> {\n size?: NativeSelectSize;\n /** An empty, unpickable first option shown until a value is chosen. */\n placeholder?: string;\n wrapperClassName?: string;\n}\n\n// `appearance-none` drops the OS arrow. The popup is drawn by the platform:\n// the option colours reach it where the platform honours them, and `--scheme`\n// (a palette's polarity, `light` or `dark`) picks the platform's own dark\n// menu where it does not. The placeholder is the empty option being the\n// checked one — CSS can see that without script.\nconst NATIVE_SELECT =\n \"border-input text-ink h-9 w-full min-w-0 appearance-none rounded-[var(--control-radius)] border bg-transparent py-1 pr-9 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error has-[option[value='']:checked]:text-ink-soft [&_option]:bg-popover [&_option]:text-ink [&_optgroup]:bg-popover [&_optgroup]:text-ink-soft [color-scheme:var(--scheme,normal)]\";\n\nexport const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(\n function NativeSelect(\n { className, wrapperClassName, size = \"md\", placeholder, id, children, value, defaultValue, ...props },\n ref,\n ) {\n const controlId = useFieldControlId(id);\n // Without a checked option the browser picks the first enabled one, which\n // would skip a disabled placeholder; start on it unless told otherwise.\n const initial = value === undefined && defaultValue === undefined && placeholder !== undefined ? \"\" : defaultValue;\n return (\n <span\n data-slot=\"native-select-wrapper\"\n className={cn(\"relative inline-flex w-full has-[select:disabled]:opacity-50\", wrapperClassName)}\n >\n <select\n ref={ref}\n id={controlId}\n data-slot=\"native-select\"\n data-size={size}\n className={cn(NATIVE_SELECT, nativeSelectSizeClasses[size], className)}\n {...(value !== undefined ? { value } : {})}\n {...(initial !== undefined ? { defaultValue: initial } : {})}\n {...props}\n >\n {placeholder !== undefined && (\n <option value=\"\" disabled hidden>\n {placeholder}\n </option>\n )}\n {children}\n </select>\n <SelectChevron\n className={cn(\n \"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\",\n // keeps the arrow as far in from the edge as the large inset keeps the text\n size === \"lg\" && \"right-4\",\n )}\n />\n </span>\n );\n },\n);\n\nmarkLabelable(NativeSelect);\n\nexport function NativeSelectOption(props: React.ComponentProps<\"option\">) {\n return <option data-slot=\"native-select-option\" {...props} />;\n}\n\nexport function NativeSelectGroup(props: React.ComponentProps<\"optgroup\">) {\n return <optgroup data-slot=\"native-select-group\" {...props} />;\n}\n"],"mappings":";AAuDQ,SAWI,KAXJ;AArDR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,+BAAsD;AAC/D,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AA+B9B,MAAM,gBACJ;AAEK,MAAM,eAAe,MAAM;AAAA,EAChC,SAASA,cACP,EAAE,WAAW,kBAAkB,OAAO,MAAM,aAAa,IAAI,UAAU,OAAO,cAAc,GAAG,MAAM,GACrG,KACA;AACA,UAAM,YAAY,kBAAkB,EAAE;AAGtC,UAAM,UAAU,UAAU,UAAa,iBAAiB,UAAa,gBAAgB,SAAY,KAAK;AACtG,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,gEAAgE,gBAAgB;AAAA,QAE9F;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,IAAI;AAAA,cACJ,aAAU;AAAA,cACV,aAAW;AAAA,cACX,WAAW,GAAG,eAAe,wBAAwB,IAAI,GAAG,SAAS;AAAA,cACpE,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,CAAC;AAAA,cACvC,GAAI,YAAY,SAAY,EAAE,cAAc,QAAQ,IAAI,CAAC;AAAA,cACzD,GAAG;AAAA,cAEH;AAAA,gCAAgB,UACf,oBAAC,YAAO,OAAM,IAAG,UAAQ,MAAC,QAAM,MAC7B,uBACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA;AAAA,gBAEA,SAAS,QAAQ;AAAA,cACnB;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,YAAY;AAEnB,SAAS,mBAAmB,OAAuC;AACxE,SAAO,oBAAC,YAAO,aAAU,wBAAwB,GAAG,OAAO;AAC7D;AAEO,SAAS,kBAAkB,OAAyC;AACzE,SAAO,oBAAC,cAAS,aAAU,uBAAuB,GAAG,OAAO;AAC9D;","names":["NativeSelect"]}
|
|
@@ -10,6 +10,7 @@ import { usePresence } from "../primitives/presence.js";
|
|
|
10
10
|
import { mergeRefs } from "../primitives/merge-refs.js";
|
|
11
11
|
import { Portal } from "../primitives/portal.js";
|
|
12
12
|
import { walkElements } from "../primitives/walk-elements.js";
|
|
13
|
+
import { markLabelable } from "../primitives/labelable.js";
|
|
13
14
|
import { useFieldControlId } from "./field-context.js";
|
|
14
15
|
import { SelectChevron } from "./select-chevron.js";
|
|
15
16
|
import { landOnChosen, tabFromTrigger, useListboxKeys } from "./select-listbox.js";
|
|
@@ -147,6 +148,7 @@ function SelectTrigger({
|
|
|
147
148
|
}
|
|
148
149
|
);
|
|
149
150
|
}
|
|
151
|
+
markLabelable(SelectTrigger);
|
|
150
152
|
function SelectValue({ className, placeholder, children, ...props }) {
|
|
151
153
|
const { value, labelOf } = useSelect();
|
|
152
154
|
const isEmpty = value === "";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SELECT_CONTENT_BOUNDS, SELECT_ITEM, selectTriggerSizeClasses, type SelectTriggerSize } from \"../generated/select\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\nimport { landOnChosen, tabFromTrigger, useListboxKeys } from \"./select-listbox\";\n\nexport type { SelectTriggerSize };\n\ninterface SelectContextValue {\n value: string;\n setValue: (next: string) => void;\n open: boolean;\n setOpen: (next: boolean) => void;\n /**\n * Closes the list. `restoreFocus`: hand focus back to the trigger — after a\n * key or a choice, never after a click elsewhere, where it would land on the\n * trigger for a moment and fire its blur (a field's validation) on the way out.\n */\n close: (restoreFocus: boolean) => void;\n /** Set by `close(true)`, read once the list is gone. */\n restoreFocusRef: React.RefObject<boolean>;\n anchorRef: React.RefObject<HTMLElement | null>;\n /** The listbox's id, for the trigger's `aria-controls`. */\n contentId: string;\n /** What `SelectValue` shows for a value: the matching `SelectItem`'s children. */\n labelOf: (value: string) => string;\n registerLabel: (value: string, label: string) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelect(): SelectContextValue {\n const ctx = React.useContext(SelectContext);\n if (!ctx) throw new Error(\"Select parts must be used within <Select>\");\n return ctx;\n}\n\nexport interface SelectProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Select({\n value,\n defaultValue = \"\",\n onValueChange,\n open,\n defaultOpen = false,\n onOpenChange,\n children,\n}: SelectProps) {\n const [currentValue, setValue] = useControllableState<string>({\n ...(value !== undefined ? { value } : {}),\n defaultValue,\n ...(onValueChange ? { onChange: onValueChange } : {}),\n });\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const anchorRef = React.useRef<HTMLElement | null>(null);\n const contentId = React.useId();\n const restoreFocusRef = React.useRef(false);\n const close = React.useCallback(\n (restoreFocus: boolean) => {\n restoreFocusRef.current = restoreFocus;\n setOpen(false);\n },\n [setOpen],\n );\n // The items live in a closed popover, so they are not mounted when the\n // trigger first renders — on the server least of all. Their labels are read\n // off the element tree instead; items hidden behind a component of the\n // caller's register once they have mounted (i.e. after the first open), and\n // a label learnt that way re-renders the trigger once.\n const declared = React.useMemo(() => collectItemLabels(children), [children]);\n const mounted = React.useRef(new Map<string, string>());\n const [, bump] = React.useReducer((n: number) => n + 1, 0);\n const labelOf = (v: string) => declared.get(v) ?? mounted.current.get(v) ?? v;\n const registerLabel = React.useCallback(\n (v: string, label: string) => {\n if (mounted.current.get(v) === label) return;\n mounted.current.set(v, label);\n if (!declared.has(v)) bump();\n },\n [declared],\n );\n return (\n <SelectContext.Provider\n value={{\n value: currentValue,\n setValue,\n open: isOpen,\n setOpen,\n close,\n restoreFocusRef,\n anchorRef,\n contentId,\n labelOf,\n registerLabel,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n}\n\nfunction collectItemLabels(node: React.ReactNode): Map<string, string> {\n const labels = new Map<string, string>();\n walkElements(node, (element) => {\n if (element.type !== SelectItem) return true;\n const { value, textValue, children } = element.props as Partial<SelectItemProps>;\n if (typeof value === \"string\") labels.set(value, itemLabel(value, textValue, children));\n return false;\n });\n return labels;\n}\n\n/**\n * What the trigger shows for an item: its `textValue`, else the text of its\n * children. Text, not the children themselves — an item's markup rendered a\n * second time in the trigger would duplicate any id inside it.\n */\nfunction itemLabel(value: string, textValue: string | undefined, children: unknown): string {\n return textValue ?? (textOf(children).trim() || value);\n}\n\nfunction textOf(node: unknown): string {\n if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n if (Array.isArray(node)) return node.map(textOf).join(\"\");\n if (React.isValidElement<{ children?: unknown }>(node)) return textOf(node.props.children);\n return \"\";\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n size?: SelectTriggerSize;\n}\n\nexport function SelectTrigger({\n className,\n size = \"md\",\n onClick,\n onKeyDown,\n children,\n id,\n ...props\n}: SelectTriggerProps) {\n const { open, setOpen, close, anchorRef, contentId } = useSelect();\n return (\n <button\n type=\"button\"\n role=\"combobox\"\n id={useFieldControlId(id)}\n data-slot=\"select-trigger\"\n data-size={size}\n data-state={open ? \"open\" : \"closed\"}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? contentId : undefined}\n ref={anchorRef as React.Ref<HTMLButtonElement>}\n onClick={(e) => {\n onClick?.(e);\n if (open) close(true);\n else setOpen(true);\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n // A native select opens on the arrows too; Enter and Space already click the button.\n if (!e.defaultPrevented && !open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\n // The placeholder mark is on `SelectValue`'s span, not on this button.\n \"border-input [&_[data-placeholder]]:text-ink-soft [&_svg:not([class*='text-'])]:text-ink-soft focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error flex w-fit items-center justify-between gap-2 rounded-[var(--control-radius)] border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n selectTriggerSizeClasses[size],\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n {children}\n <SelectChevron className=\"size-4 opacity-50\" />\n </button>\n );\n}\n\nexport interface SelectValueProps extends React.ComponentProps<\"span\"> {\n placeholder?: string;\n}\n\n/**\n * The chosen option's label — the `textValue` of the `SelectItem` whose `value`\n * matches, else the text of its children — or `placeholder` while nothing is\n * chosen. `children`, when given,\n * replace the label outright.\n */\nexport function SelectValue({ className, placeholder, children, ...props }: SelectValueProps) {\n const { value, labelOf } = useSelect();\n const isEmpty = value === \"\";\n return (\n <span\n data-slot=\"select-value\"\n {...(isEmpty ? { \"data-placeholder\": \"true\" } : {})}\n className={className}\n {...(props as Record<string, unknown>)}\n >\n {isEmpty ? placeholder : (children ?? labelOf(value))}\n </span>\n );\n}\n\nexport interface SelectContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n sideOffset?: number;\n}\n\nexport function SelectContent({\n className,\n side: sideProp = \"bottom\",\n align = \"start\",\n sideOffset = 4,\n children,\n ...props\n}: SelectContentProps) {\n const { open, setOpen, close, restoreFocusRef, anchorRef, contentId } = useSelect();\n const { isPresent, ref: presRef } = usePresence(open);\n const listRef = React.useRef<HTMLDivElement | null>(null);\n const [name, setName] = React.useState<{ \"aria-labelledby\"?: string; \"aria-label\"?: string }>({});\n // Before placement measures the list: the trigger's width as\n // `--select-trigger-width` (the floor of `SELECT_CONTENT_BOUNDS`), written to\n // the element like the floating offset, and the list's name — the trigger's\n // label, as the combobox is named.\n React.useLayoutEffect(() => {\n const anchor = anchorRef.current;\n if (!open || !(anchor instanceof HTMLElement)) return;\n listRef.current?.style.setProperty(\"--select-trigger-width\", `${anchor.offsetWidth}px`);\n setName(listName(anchor));\n }, [open, anchorRef]);\n const { floatingRef, style, side } = useFloating({\n anchorRef,\n open,\n side: sideProp,\n align,\n offset: sideOffset,\n });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: (event) => close(event.type === \"keydown\"),\n exclude: [anchorRef],\n });\n const onListKey = useListboxKeys(listRef);\n React.useEffect(() => {\n if (open) landOnChosen(listRef.current);\n }, [open]);\n React.useEffect(() => {\n if (open || !restoreFocusRef.current) return;\n restoreFocusRef.current = false;\n anchorRef.current?.focus();\n }, [open, anchorRef, restoreFocusRef]);\n if (!isPresent) return null;\n return (\n <Portal>\n <div\n role=\"listbox\"\n id={contentId}\n {...name}\n data-slot=\"select-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-side={side}\n ref={mergeRefs(floatingRef, dismissRef, presRef, listRef)}\n style={style}\n tabIndex={-1}\n onKeyDown={(e) => {\n if (onListKey(e)) return;\n if (e.key === \"Escape\") {\n // The list's Escape is the list's: a consumer's `onKeyDown` around\n // it hears the key through React's tree, portal or not.\n e.stopPropagation();\n close(true);\n } else if (e.key === \"Tab\") {\n tabFromTrigger(e, anchorRef.current);\n setOpen(false);\n }\n }}\n className={cn(\n \"bg-popover text-ink data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md\",\n SELECT_CONTENT_BOUNDS,\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n <div className=\"p-1\"><DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope></div>\n </div>\n </Portal>\n );\n}\n\n/** The trigger's own name for the list: its `aria-labelledby`, else its `<label>`. */\nfunction listName(trigger: HTMLElement): { \"aria-labelledby\"?: string; \"aria-label\"?: string } {\n const by = trigger.getAttribute(\"aria-labelledby\");\n if (by) return { \"aria-labelledby\": by };\n const label = (trigger as HTMLButtonElement).labels?.[0];\n if (label?.id) return { \"aria-labelledby\": label.id };\n const text = label?.textContent?.trim() || trigger.getAttribute(\"aria-label\");\n return text ? { \"aria-label\": text } : {};\n}\n\nexport interface SelectItemProps extends React.ComponentProps<\"div\"> {\n value: string;\n /** What the trigger shows once this item is chosen; defaults to the text of `children`. */\n textValue?: string;\n}\n\nexport function SelectItem({ className, value, textValue, children, ...props }: SelectItemProps) {\n const { value: selectedValue, setValue, close, registerLabel } = useSelect();\n const selected = selectedValue === value;\n const label = itemLabel(value, textValue, children);\n React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);\n const choose = () => {\n setValue(value);\n close(true);\n };\n return (\n <div\n role=\"option\"\n data-slot=\"select-item\"\n aria-selected={selected}\n tabIndex={-1}\n onClick={choose}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n choose();\n }\n }}\n className={cn(SELECT_ITEM, className)}\n {...(props as Record<string, unknown>)}\n >\n {selected ? (\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"size-4\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </span>\n ) : null}\n <span>{children}</span>\n </div>\n );\n}\n\nexport function SelectGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return <div role=\"group\" data-slot=\"select-group\" className={className} {...props} />;\n}\n\nexport function SelectLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-label\"\n className={cn(\"text-ink-soft px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nexport function SelectSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SELECT_CONTENT_BOUNDS, SELECT_ITEM, selectTriggerSizeClasses, type SelectTriggerSize } from \"../generated/select\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\nimport { landOnChosen, tabFromTrigger, useListboxKeys } from \"./select-listbox\";\n\nexport type { SelectTriggerSize };\n\ninterface SelectContextValue {\n value: string;\n setValue: (next: string) => void;\n open: boolean;\n setOpen: (next: boolean) => void;\n /**\n * Closes the list. `restoreFocus`: hand focus back to the trigger — after a\n * key or a choice, never after a click elsewhere, where it would land on the\n * trigger for a moment and fire its blur (a field's validation) on the way out.\n */\n close: (restoreFocus: boolean) => void;\n /** Set by `close(true)`, read once the list is gone. */\n restoreFocusRef: React.RefObject<boolean>;\n anchorRef: React.RefObject<HTMLElement | null>;\n /** The listbox's id, for the trigger's `aria-controls`. */\n contentId: string;\n /** What `SelectValue` shows for a value: the matching `SelectItem`'s children. */\n labelOf: (value: string) => string;\n registerLabel: (value: string, label: string) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelect(): SelectContextValue {\n const ctx = React.useContext(SelectContext);\n if (!ctx) throw new Error(\"Select parts must be used within <Select>\");\n return ctx;\n}\n\nexport interface SelectProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Select({\n value,\n defaultValue = \"\",\n onValueChange,\n open,\n defaultOpen = false,\n onOpenChange,\n children,\n}: SelectProps) {\n const [currentValue, setValue] = useControllableState<string>({\n ...(value !== undefined ? { value } : {}),\n defaultValue,\n ...(onValueChange ? { onChange: onValueChange } : {}),\n });\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const anchorRef = React.useRef<HTMLElement | null>(null);\n const contentId = React.useId();\n const restoreFocusRef = React.useRef(false);\n const close = React.useCallback(\n (restoreFocus: boolean) => {\n restoreFocusRef.current = restoreFocus;\n setOpen(false);\n },\n [setOpen],\n );\n // The items live in a closed popover, so they are not mounted when the\n // trigger first renders — on the server least of all. Their labels are read\n // off the element tree instead; items hidden behind a component of the\n // caller's register once they have mounted (i.e. after the first open), and\n // a label learnt that way re-renders the trigger once.\n const declared = React.useMemo(() => collectItemLabels(children), [children]);\n const mounted = React.useRef(new Map<string, string>());\n const [, bump] = React.useReducer((n: number) => n + 1, 0);\n const labelOf = (v: string) => declared.get(v) ?? mounted.current.get(v) ?? v;\n const registerLabel = React.useCallback(\n (v: string, label: string) => {\n if (mounted.current.get(v) === label) return;\n mounted.current.set(v, label);\n if (!declared.has(v)) bump();\n },\n [declared],\n );\n return (\n <SelectContext.Provider\n value={{\n value: currentValue,\n setValue,\n open: isOpen,\n setOpen,\n close,\n restoreFocusRef,\n anchorRef,\n contentId,\n labelOf,\n registerLabel,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n}\n\nfunction collectItemLabels(node: React.ReactNode): Map<string, string> {\n const labels = new Map<string, string>();\n walkElements(node, (element) => {\n if (element.type !== SelectItem) return true;\n const { value, textValue, children } = element.props as Partial<SelectItemProps>;\n if (typeof value === \"string\") labels.set(value, itemLabel(value, textValue, children));\n return false;\n });\n return labels;\n}\n\n/**\n * What the trigger shows for an item: its `textValue`, else the text of its\n * children. Text, not the children themselves — an item's markup rendered a\n * second time in the trigger would duplicate any id inside it.\n */\nfunction itemLabel(value: string, textValue: string | undefined, children: unknown): string {\n return textValue ?? (textOf(children).trim() || value);\n}\n\nfunction textOf(node: unknown): string {\n if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n if (Array.isArray(node)) return node.map(textOf).join(\"\");\n if (React.isValidElement<{ children?: unknown }>(node)) return textOf(node.props.children);\n return \"\";\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n size?: SelectTriggerSize;\n}\n\nexport function SelectTrigger({\n className,\n size = \"md\",\n onClick,\n onKeyDown,\n children,\n id,\n ...props\n}: SelectTriggerProps) {\n const { open, setOpen, close, anchorRef, contentId } = useSelect();\n return (\n <button\n type=\"button\"\n role=\"combobox\"\n id={useFieldControlId(id)}\n data-slot=\"select-trigger\"\n data-size={size}\n data-state={open ? \"open\" : \"closed\"}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? contentId : undefined}\n ref={anchorRef as React.Ref<HTMLButtonElement>}\n onClick={(e) => {\n onClick?.(e);\n if (open) close(true);\n else setOpen(true);\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n // A native select opens on the arrows too; Enter and Space already click the button.\n if (!e.defaultPrevented && !open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\n // The placeholder mark is on `SelectValue`'s span, not on this button.\n \"border-input [&_[data-placeholder]]:text-ink-soft [&_svg:not([class*='text-'])]:text-ink-soft focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error flex w-fit items-center justify-between gap-2 rounded-[var(--control-radius)] border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n selectTriggerSizeClasses[size],\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n {children}\n <SelectChevron className=\"size-4 opacity-50\" />\n </button>\n );\n}\n\nmarkLabelable(SelectTrigger);\n\nexport interface SelectValueProps extends React.ComponentProps<\"span\"> {\n placeholder?: string;\n}\n\n/**\n * The chosen option's label — the `textValue` of the `SelectItem` whose `value`\n * matches, else the text of its children — or `placeholder` while nothing is\n * chosen. `children`, when given,\n * replace the label outright.\n */\nexport function SelectValue({ className, placeholder, children, ...props }: SelectValueProps) {\n const { value, labelOf } = useSelect();\n const isEmpty = value === \"\";\n return (\n <span\n data-slot=\"select-value\"\n {...(isEmpty ? { \"data-placeholder\": \"true\" } : {})}\n className={className}\n {...(props as Record<string, unknown>)}\n >\n {isEmpty ? placeholder : (children ?? labelOf(value))}\n </span>\n );\n}\n\nexport interface SelectContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n sideOffset?: number;\n}\n\nexport function SelectContent({\n className,\n side: sideProp = \"bottom\",\n align = \"start\",\n sideOffset = 4,\n children,\n ...props\n}: SelectContentProps) {\n const { open, setOpen, close, restoreFocusRef, anchorRef, contentId } = useSelect();\n const { isPresent, ref: presRef } = usePresence(open);\n const listRef = React.useRef<HTMLDivElement | null>(null);\n const [name, setName] = React.useState<{ \"aria-labelledby\"?: string; \"aria-label\"?: string }>({});\n // Before placement measures the list: the trigger's width as\n // `--select-trigger-width` (the floor of `SELECT_CONTENT_BOUNDS`), written to\n // the element like the floating offset, and the list's name — the trigger's\n // label, as the combobox is named.\n React.useLayoutEffect(() => {\n const anchor = anchorRef.current;\n if (!open || !(anchor instanceof HTMLElement)) return;\n listRef.current?.style.setProperty(\"--select-trigger-width\", `${anchor.offsetWidth}px`);\n setName(listName(anchor));\n }, [open, anchorRef]);\n const { floatingRef, style, side } = useFloating({\n anchorRef,\n open,\n side: sideProp,\n align,\n offset: sideOffset,\n });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: (event) => close(event.type === \"keydown\"),\n exclude: [anchorRef],\n });\n const onListKey = useListboxKeys(listRef);\n React.useEffect(() => {\n if (open) landOnChosen(listRef.current);\n }, [open]);\n React.useEffect(() => {\n if (open || !restoreFocusRef.current) return;\n restoreFocusRef.current = false;\n anchorRef.current?.focus();\n }, [open, anchorRef, restoreFocusRef]);\n if (!isPresent) return null;\n return (\n <Portal>\n <div\n role=\"listbox\"\n id={contentId}\n {...name}\n data-slot=\"select-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-side={side}\n ref={mergeRefs(floatingRef, dismissRef, presRef, listRef)}\n style={style}\n tabIndex={-1}\n onKeyDown={(e) => {\n if (onListKey(e)) return;\n if (e.key === \"Escape\") {\n // The list's Escape is the list's: a consumer's `onKeyDown` around\n // it hears the key through React's tree, portal or not.\n e.stopPropagation();\n close(true);\n } else if (e.key === \"Tab\") {\n tabFromTrigger(e, anchorRef.current);\n setOpen(false);\n }\n }}\n className={cn(\n \"bg-popover text-ink data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md\",\n SELECT_CONTENT_BOUNDS,\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n <div className=\"p-1\"><DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope></div>\n </div>\n </Portal>\n );\n}\n\n/** The trigger's own name for the list: its `aria-labelledby`, else its `<label>`. */\nfunction listName(trigger: HTMLElement): { \"aria-labelledby\"?: string; \"aria-label\"?: string } {\n const by = trigger.getAttribute(\"aria-labelledby\");\n if (by) return { \"aria-labelledby\": by };\n const label = (trigger as HTMLButtonElement).labels?.[0];\n if (label?.id) return { \"aria-labelledby\": label.id };\n const text = label?.textContent?.trim() || trigger.getAttribute(\"aria-label\");\n return text ? { \"aria-label\": text } : {};\n}\n\nexport interface SelectItemProps extends React.ComponentProps<\"div\"> {\n value: string;\n /** What the trigger shows once this item is chosen; defaults to the text of `children`. */\n textValue?: string;\n}\n\nexport function SelectItem({ className, value, textValue, children, ...props }: SelectItemProps) {\n const { value: selectedValue, setValue, close, registerLabel } = useSelect();\n const selected = selectedValue === value;\n const label = itemLabel(value, textValue, children);\n React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);\n const choose = () => {\n setValue(value);\n close(true);\n };\n return (\n <div\n role=\"option\"\n data-slot=\"select-item\"\n aria-selected={selected}\n tabIndex={-1}\n onClick={choose}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n choose();\n }\n }}\n className={cn(SELECT_ITEM, className)}\n {...(props as Record<string, unknown>)}\n >\n {selected ? (\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"size-4\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </span>\n ) : null}\n <span>{children}</span>\n </div>\n );\n}\n\nexport function SelectGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return <div role=\"group\" data-slot=\"select-group\" className={className} {...props} />;\n}\n\nexport function SelectLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-label\"\n className={cn(\"text-ink-soft px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nexport function SelectSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
package/dist/components/sheet.js
CHANGED
|
@@ -55,13 +55,12 @@ function SheetTrigger({ asChild = false, onClick, ...props }) {
|
|
|
55
55
|
);
|
|
56
56
|
}
|
|
57
57
|
function SheetOverlay({ className, ...props }) {
|
|
58
|
-
const { open
|
|
58
|
+
const { open } = useSheet();
|
|
59
59
|
return /* @__PURE__ */ jsx(
|
|
60
60
|
"div",
|
|
61
61
|
{
|
|
62
62
|
"data-slot": "sheet-overlay",
|
|
63
63
|
"data-state": open ? "open" : "closed",
|
|
64
|
-
onClick: () => setOpen(false),
|
|
65
64
|
className: cn(SHEET_OVERLAY, className),
|
|
66
65
|
...props
|
|
67
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n SHEET_CLOSE,\n SHEET_CONTENT,\n SHEET_DESCRIPTION,\n SHEET_FOOTER,\n SHEET_HEADER,\n SHEET_OVERLAY,\n SHEET_SIDE_BOTTOM,\n SHEET_SIDE_LEFT,\n SHEET_SIDE_RIGHT,\n SHEET_SIDE_TOP,\n SHEET_TITLE,\n} from \"../generated/sheet\";\n\ninterface SheetContextValue {\n open: boolean;\n setOpen: (next: boolean) => void;\n triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet(): SheetContextValue {\n const ctx = React.useContext(SheetContext);\n if (!ctx) throw new Error(\"Sheet parts must be used within <Sheet>\");\n return ctx;\n}\n\nexport interface SheetProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Sheet({ open, defaultOpen = false, onOpenChange, children }: SheetProps) {\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const triggerRef = React.useRef<HTMLElement | null>(null);\n return (\n <SheetContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n {children}\n </SheetContext.Provider>\n );\n}\n\nexport interface SheetTriggerProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n}\n\nexport function SheetTrigger({ asChild = false, onClick, ...props }: SheetTriggerProps) {\n const { open, setOpen, triggerRef } = useSheet();\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n data-slot=\"sheet-trigger\"\n aria-expanded={open}\n ref={triggerRef as React.Ref<HTMLButtonElement>}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n setOpen(true);\n }}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport interface SheetOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function SheetOverlay({ className, ...props }: SheetOverlayProps) {\n const { open, setOpen } = useSheet();\n return (\n <div\n data-slot=\"sheet-overlay\"\n data-state={open ? \"open\" : \"closed\"}\n onClick={() => setOpen(false)}\n className={cn(SHEET_OVERLAY, className)}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nconst sheetSideClasses = {\n right: SHEET_SIDE_RIGHT,\n left: SHEET_SIDE_LEFT,\n top: SHEET_SIDE_TOP,\n bottom: SHEET_SIDE_BOTTOM,\n} as const;\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M18 6 6 18M6 6l12 12\" />\n </svg>\n);\n\nexport interface SheetContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n /**\n * Where focus lands on open. Default `container`: a sheet is a panel of\n * content, and its first Tab stop is as likely an action as a field — the\n * panel itself takes focus and the first Tab reaches the first control.\n */\n initialFocus?: InitialFocus;\n}\n\nexport function SheetContent({\n className,\n children,\n side = \"right\",\n initialFocus = \"container\",\n ...props\n}: SheetContentProps) {\n const { open, setOpen, triggerRef } = useSheet();\n const { isPresent, ref: presRef } = usePresence(open);\n const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: triggerRef });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: () => setOpen(false),\n exclude: [triggerRef],\n modal: true,\n });\n if (!isPresent) return null;\n return (\n <Portal>\n <SheetOverlay />\n <div\n data-slot=\"sheet-content\"\n role=\"dialog\"\n aria-modal=\"true\"\n data-state={open ? \"open\" : \"closed\"}\n ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n className={cn(SHEET_CONTENT, sheetSideClasses[side], className)}\n {...(props as Record<string, unknown>)}\n >\n <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n <button\n type=\"button\"\n data-slot=\"sheet-close\"\n onClick={() => setOpen(false)}\n className={SHEET_CLOSE}\n >\n <XIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n </div>\n </Portal>\n );\n}\n\nexport interface SheetCloseProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n}\n\nexport function SheetClose({ asChild = false, onClick, ...props }: SheetCloseProps) {\n const { setOpen } = useSheet();\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n data-slot=\"sheet-close\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n setOpen(false);\n }}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport function SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(SHEET_HEADER, className)}\n {...props}\n />\n );\n}\n\nexport function SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(SHEET_FOOTER, className)}\n {...props}\n />\n );\n}\n\nexport function SheetTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n return (\n <h2\n data-slot=\"sheet-title\"\n className={cn(SHEET_TITLE, className)}\n {...props}\n />\n );\n}\n\nexport function SheetDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n <p\n data-slot=\"sheet-description\"\n className={cn(SHEET_DESCRIPTION, className)}\n {...props}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n SHEET_CLOSE,\n SHEET_CONTENT,\n SHEET_DESCRIPTION,\n SHEET_FOOTER,\n SHEET_HEADER,\n SHEET_OVERLAY,\n SHEET_SIDE_BOTTOM,\n SHEET_SIDE_LEFT,\n SHEET_SIDE_RIGHT,\n SHEET_SIDE_TOP,\n SHEET_TITLE,\n} from \"../generated/sheet\";\n\ninterface SheetContextValue {\n open: boolean;\n setOpen: (next: boolean) => void;\n triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet(): SheetContextValue {\n const ctx = React.useContext(SheetContext);\n if (!ctx) throw new Error(\"Sheet parts must be used within <Sheet>\");\n return ctx;\n}\n\nexport interface SheetProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Sheet({ open, defaultOpen = false, onOpenChange, children }: SheetProps) {\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const triggerRef = React.useRef<HTMLElement | null>(null);\n return (\n <SheetContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n {children}\n </SheetContext.Provider>\n );\n}\n\nexport interface SheetTriggerProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n}\n\nexport function SheetTrigger({ asChild = false, onClick, ...props }: SheetTriggerProps) {\n const { open, setOpen, triggerRef } = useSheet();\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n data-slot=\"sheet-trigger\"\n aria-expanded={open}\n ref={triggerRef as React.Ref<HTMLButtonElement>}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n setOpen(true);\n }}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport interface SheetOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function SheetOverlay({ className, ...props }: SheetOverlayProps) {\n const { open } = useSheet();\n // No onClick: the content's dismissable layer already closes on the\n // pointer-down that lands here, and a second path called onOpenChange(false)\n // twice for one press whenever the overlay was still hit by the click\n // (a host that closes later, CSS without the closed-state pointer-events).\n return (\n <div\n data-slot=\"sheet-overlay\"\n data-state={open ? \"open\" : \"closed\"}\n className={cn(SHEET_OVERLAY, className)}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nconst sheetSideClasses = {\n right: SHEET_SIDE_RIGHT,\n left: SHEET_SIDE_LEFT,\n top: SHEET_SIDE_TOP,\n bottom: SHEET_SIDE_BOTTOM,\n} as const;\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M18 6 6 18M6 6l12 12\" />\n </svg>\n);\n\nexport interface SheetContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n /**\n * Where focus lands on open. Default `container`: a sheet is a panel of\n * content, and its first Tab stop is as likely an action as a field — the\n * panel itself takes focus and the first Tab reaches the first control.\n */\n initialFocus?: InitialFocus;\n}\n\nexport function SheetContent({\n className,\n children,\n side = \"right\",\n initialFocus = \"container\",\n ...props\n}: SheetContentProps) {\n const { open, setOpen, triggerRef } = useSheet();\n const { isPresent, ref: presRef } = usePresence(open);\n const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: triggerRef });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: () => setOpen(false),\n exclude: [triggerRef],\n modal: true,\n });\n if (!isPresent) return null;\n return (\n <Portal>\n <SheetOverlay />\n <div\n data-slot=\"sheet-content\"\n role=\"dialog\"\n aria-modal=\"true\"\n data-state={open ? \"open\" : \"closed\"}\n ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n className={cn(SHEET_CONTENT, sheetSideClasses[side], className)}\n {...(props as Record<string, unknown>)}\n >\n <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n <button\n type=\"button\"\n data-slot=\"sheet-close\"\n onClick={() => setOpen(false)}\n className={SHEET_CLOSE}\n >\n <XIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n </div>\n </Portal>\n );\n}\n\nexport interface SheetCloseProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n}\n\nexport function SheetClose({ asChild = false, onClick, ...props }: SheetCloseProps) {\n const { setOpen } = useSheet();\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n data-slot=\"sheet-close\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n setOpen(false);\n }}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport function SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(SHEET_HEADER, className)}\n {...props}\n />\n );\n}\n\nexport function SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(SHEET_FOOTER, className)}\n {...props}\n />\n );\n}\n\nexport function SheetTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n return (\n <h2\n data-slot=\"sheet-title\"\n className={cn(SHEET_TITLE, className)}\n {...props}\n />\n );\n}\n\nexport function SheetDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n <p\n data-slot=\"sheet-description\"\n className={cn(SHEET_DESCRIPTION, className)}\n {...props}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -4,6 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
5
|
import { SWITCH_BASE, SWITCH_THUMB } from "../generated/switch.js";
|
|
6
6
|
import { useControllableState } from "../primitives/use-controllable-state.js";
|
|
7
|
+
import { markLabelable } from "../primitives/labelable.js";
|
|
7
8
|
import { useFieldControlId } from "./field-context.js";
|
|
8
9
|
function Switch({
|
|
9
10
|
className,
|
|
@@ -48,6 +49,7 @@ function Switch({
|
|
|
48
49
|
}
|
|
49
50
|
);
|
|
50
51
|
}
|
|
52
|
+
markLabelable(Switch);
|
|
51
53
|
export {
|
|
52
54
|
Switch
|
|
53
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SWITCH_BASE, SWITCH_THUMB } from \"../generated/switch\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport interface SwitchProps\n extends Omit<React.ComponentProps<\"button\">, \"onChange\"> {\n checked?: boolean;\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nexport function Switch({\n className,\n checked,\n defaultChecked = false,\n onCheckedChange,\n onClick,\n disabled,\n id,\n ...props\n}: SwitchProps) {\n const [on, setOn] = useControllableState<boolean>({\n ...(checked !== undefined ? { value: checked } : {}),\n defaultValue: defaultChecked,\n ...(onCheckedChange ? { onChange: onCheckedChange } : {}),\n });\n const state = on ? \"checked\" : \"unchecked\";\n return (\n <button\n type=\"button\"\n role=\"switch\"\n data-slot=\"switch\"\n data-state={state}\n aria-checked={on}\n disabled={disabled}\n id={useFieldControlId(id)}\n className={cn(SWITCH_BASE, className)}\n onClick={(e) => {\n onClick?.(e);\n setOn(!on);\n }}\n {...props}\n >\n <span\n data-slot=\"switch-thumb\"\n data-state={state}\n className={SWITCH_THUMB}\n />\n </button>\n );\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SWITCH_BASE, SWITCH_THUMB } from \"../generated/switch\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport interface SwitchProps\n extends Omit<React.ComponentProps<\"button\">, \"onChange\"> {\n checked?: boolean;\n defaultChecked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nexport function Switch({\n className,\n checked,\n defaultChecked = false,\n onCheckedChange,\n onClick,\n disabled,\n id,\n ...props\n}: SwitchProps) {\n const [on, setOn] = useControllableState<boolean>({\n ...(checked !== undefined ? { value: checked } : {}),\n defaultValue: defaultChecked,\n ...(onCheckedChange ? { onChange: onCheckedChange } : {}),\n });\n const state = on ? \"checked\" : \"unchecked\";\n return (\n <button\n type=\"button\"\n role=\"switch\"\n data-slot=\"switch\"\n data-state={state}\n aria-checked={on}\n disabled={disabled}\n id={useFieldControlId(id)}\n className={cn(SWITCH_BASE, className)}\n onClick={(e) => {\n onClick?.(e);\n setOn(!on);\n }}\n {...props}\n >\n <span\n data-slot=\"switch-thumb\"\n data-state={state}\n className={SWITCH_THUMB}\n />\n </button>\n );\n}\n\nmarkLabelable(Switch);\n"],"mappings":";AAgDM;AA9CN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAS3B,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,CAAC,IAAI,KAAK,IAAI,qBAA8B;AAAA,IAChD,GAAI,YAAY,SAAY,EAAE,OAAO,QAAQ,IAAI,CAAC;AAAA,IAClD,cAAc;AAAA,IACd,GAAI,kBAAkB,EAAE,UAAU,gBAAgB,IAAI,CAAC;AAAA,EACzD,CAAC;AACD,QAAM,QAAQ,KAAK,YAAY;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd;AAAA,MACA,IAAI,kBAAkB,EAAE;AAAA,MACxB,WAAW,GAAG,aAAa,SAAS;AAAA,MACpC,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,cAAM,CAAC,EAAE;AAAA,MACX;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,cAAY;AAAA,UACZ,WAAW;AAAA;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;AAEA,cAAc,MAAM;","names":[]}
|
|
@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
5
|
import { TEXTAREA_BASE, textareaSizeClasses } from "../generated/textarea.js";
|
|
6
|
+
import { markLabelable } from "../primitives/labelable.js";
|
|
6
7
|
import { useFieldControlId } from "./field-context.js";
|
|
7
8
|
function Textarea({ className, id, size = "md", ...props }) {
|
|
8
9
|
return /* @__PURE__ */ jsx(
|
|
@@ -16,6 +17,7 @@ function Textarea({ className, id, size = "md", ...props }) {
|
|
|
16
17
|
}
|
|
17
18
|
);
|
|
18
19
|
}
|
|
20
|
+
markLabelable(Textarea);
|
|
19
21
|
export {
|
|
20
22
|
Textarea
|
|
21
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { TEXTAREA_BASE, textareaSizeClasses, type TextareaSize } from \"../generated/textarea\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { TextareaSize };\n\nexport interface TextareaProps extends React.ComponentProps<\"textarea\"> {\n size?: TextareaSize;\n}\n\nexport function Textarea({ className, id, size = \"md\", ...props }: TextareaProps) {\n return (\n <textarea\n data-slot=\"textarea\"\n data-size={size}\n id={useFieldControlId(id)}\n className={cn(TEXTAREA_BASE, textareaSizeClasses[size], className)}\n {...props}\n />\n );\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../src/components/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { TEXTAREA_BASE, textareaSizeClasses, type TextareaSize } from \"../generated/textarea\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { TextareaSize };\n\nexport interface TextareaProps extends React.ComponentProps<\"textarea\"> {\n size?: TextareaSize;\n}\n\nexport function Textarea({ className, id, size = \"md\", ...props }: TextareaProps) {\n return (\n <textarea\n data-slot=\"textarea\"\n data-size={size}\n id={useFieldControlId(id)}\n className={cn(TEXTAREA_BASE, textareaSizeClasses[size], className)}\n {...props}\n />\n );\n}\n\nmarkLabelable(Textarea);\n"],"mappings":";AAgBI;AAdJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,eAAe,2BAA8C;AACtE,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAQ3B,SAAS,SAAS,EAAE,WAAW,IAAI,OAAO,MAAM,GAAG,MAAM,GAAkB;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,IAAI,kBAAkB,EAAE;AAAA,MACxB,WAAW,GAAG,eAAe,oBAAoB,IAAI,GAAG,SAAS;AAAA,MAChE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,QAAQ;","names":[]}
|
|
@@ -4,9 +4,9 @@ const COMMAND_DIALOG_CONTENT = "fixed top-1/2 left-1/2 z-50 w-full max-w-lg -tra
|
|
|
4
4
|
const COMMAND_DIALOG_COMMAND = "[&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input]]:h-12";
|
|
5
5
|
const COMMAND_INPUT_WRAPPER = "flex h-9 items-center gap-2 border-b border-border px-3";
|
|
6
6
|
const COMMAND_INPUT = "placeholder:text-ink-soft flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50";
|
|
7
|
-
const COMMAND_LIST = "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto";
|
|
7
|
+
const COMMAND_LIST = "grid max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto";
|
|
8
8
|
const COMMAND_EMPTY = "py-6 text-center text-sm";
|
|
9
|
-
const COMMAND_GROUP = "text-ink [&_[data-slot=command-group-heading]]:text-ink-soft overflow-hidden p-1 [&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:py-1.5 [&_[data-slot=command-group-heading]]:text-xs [&_[data-slot=command-group-heading]]:font-medium";
|
|
9
|
+
const COMMAND_GROUP = "grid text-ink [&_[data-slot=command-group-heading]]:text-ink-soft overflow-hidden p-1 [&>[data-slot=command-group-heading]]:order-first [&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:py-1.5 [&_[data-slot=command-group-heading]]:text-xs [&_[data-slot=command-group-heading]]:font-medium";
|
|
10
10
|
const COMMAND_ITEM = "data-[selected=true]:bg-hover data-[selected=true]:text-ink [&_svg:not([class*='text-'])]:text-ink-soft relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
|
|
11
11
|
const COMMAND_SEPARATOR = "bg-border -mx-1 h-px";
|
|
12
12
|
const COMMAND_SHORTCUT = "text-ink-soft ml-auto text-xs tracking-widest";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/generated/command.ts"],"sourcesContent":["// AUTO-GENERATED by `nix run .#gen` — do not edit.\n\nexport const COMMAND_ROOT = \"bg-popover text-ink flex h-full w-full flex-col overflow-hidden rounded-md\";\n\nexport const COMMAND_DIALOG_OVERLAY = \"fixed inset-0 z-50 bg-black/50\";\n\nexport const COMMAND_DIALOG_CONTENT = \"fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border border-border p-0 shadow-lg\";\n\nexport const COMMAND_DIALOG_COMMAND = \"[&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input]]:h-12\";\n\nexport const COMMAND_INPUT_WRAPPER = \"flex h-9 items-center gap-2 border-b border-border px-3\";\n\nexport const COMMAND_INPUT = \"placeholder:text-ink-soft flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport const COMMAND_LIST = \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\";\n\nexport const COMMAND_EMPTY = \"py-6 text-center text-sm\";\n\nexport const COMMAND_GROUP = \"text-ink [&_[data-slot=command-group-heading]]:text-ink-soft overflow-hidden p-1 [&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:py-1.5 [&_[data-slot=command-group-heading]]:text-xs [&_[data-slot=command-group-heading]]:font-medium\";\n\nexport const COMMAND_ITEM = \"data-[selected=true]:bg-hover data-[selected=true]:text-ink [&_svg:not([class*='text-'])]:text-ink-soft relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\";\n\nexport const COMMAND_SEPARATOR = \"bg-border -mx-1 h-px\";\n\nexport const COMMAND_SHORTCUT = \"text-ink-soft ml-auto text-xs tracking-widest\";\n"],"mappings":"AAEO,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,yBAAyB;AAE/B,MAAM,yBAAyB;AAE/B,MAAM,wBAAwB;AAE9B,MAAM,gBAAgB;AAEtB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB;AAEtB,MAAM,eAAe;AAErB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/generated/command.ts"],"sourcesContent":["// AUTO-GENERATED by `nix run .#gen` — do not edit.\n\nexport const COMMAND_ROOT = \"bg-popover text-ink flex h-full w-full flex-col overflow-hidden rounded-md\";\n\nexport const COMMAND_DIALOG_OVERLAY = \"fixed inset-0 z-50 bg-black/50\";\n\nexport const COMMAND_DIALOG_CONTENT = \"fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border border-border p-0 shadow-lg\";\n\nexport const COMMAND_DIALOG_COMMAND = \"[&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input]]:h-12\";\n\nexport const COMMAND_INPUT_WRAPPER = \"flex h-9 items-center gap-2 border-b border-border px-3\";\n\nexport const COMMAND_INPUT = \"placeholder:text-ink-soft flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport const COMMAND_LIST = \"grid max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\";\n\nexport const COMMAND_EMPTY = \"py-6 text-center text-sm\";\n\nexport const COMMAND_GROUP = \"grid text-ink [&_[data-slot=command-group-heading]]:text-ink-soft overflow-hidden p-1 [&>[data-slot=command-group-heading]]:order-first [&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:py-1.5 [&_[data-slot=command-group-heading]]:text-xs [&_[data-slot=command-group-heading]]:font-medium\";\n\nexport const COMMAND_ITEM = \"data-[selected=true]:bg-hover data-[selected=true]:text-ink [&_svg:not([class*='text-'])]:text-ink-soft relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\";\n\nexport const COMMAND_SEPARATOR = \"bg-border -mx-1 h-px\";\n\nexport const COMMAND_SHORTCUT = \"text-ink-soft ml-auto text-xs tracking-widest\";\n"],"mappings":"AAEO,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,yBAAyB;AAE/B,MAAM,yBAAyB;AAE/B,MAAM,wBAAwB;AAE9B,MAAM,gBAAgB;AAEtB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAEtB,MAAM,gBAAgB;AAEtB,MAAM,eAAe;AAErB,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -413,6 +413,17 @@ declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">
|
|
|
413
413
|
declare function EmptyDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
414
414
|
declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
415
415
|
|
|
416
|
+
/**
|
|
417
|
+
* What a section shows a caller it is not for: an `Empty` with a lock, a title, why,
|
|
418
|
+
* and an action slot. A guest gets the sign-in button there; a signed-in caller
|
|
419
|
+
* without the permission gets no action, or the host's own (request access).
|
|
420
|
+
*/
|
|
421
|
+
interface AuthWallProps extends Omit<React.ComponentProps<"div">, "title"> {
|
|
422
|
+
title: React.ReactNode;
|
|
423
|
+
description: React.ReactNode;
|
|
424
|
+
}
|
|
425
|
+
declare function AuthWall({ title, description, children, ...props }: AuthWallProps): React.JSX.Element;
|
|
426
|
+
|
|
416
427
|
declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
|
|
417
428
|
|
|
418
429
|
declare const fieldOrientation: {
|
|
@@ -1402,8 +1413,8 @@ interface DialogCloseProps extends React.ComponentProps<"button"> {
|
|
|
1402
1413
|
declare function DialogClose({ asChild, onClick, ...props }: DialogCloseProps): React.JSX.Element;
|
|
1403
1414
|
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1404
1415
|
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1405
|
-
declare function DialogTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
|
|
1406
|
-
declare function DialogDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
1416
|
+
declare function DialogTitle({ className, id, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
|
|
1417
|
+
declare function DialogDescription({ className, id, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
1407
1418
|
|
|
1408
1419
|
interface AlertDialogProps {
|
|
1409
1420
|
open?: boolean;
|
|
@@ -1619,42 +1630,6 @@ declare function CommandItem({ className, value, disabled, onSelect, id: idProp,
|
|
|
1619
1630
|
declare function CommandSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
1620
1631
|
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
1621
1632
|
|
|
1622
|
-
type ChartConfig = {
|
|
1623
|
-
[k in string]: {
|
|
1624
|
-
label?: React.ReactNode;
|
|
1625
|
-
color?: string;
|
|
1626
|
-
};
|
|
1627
|
-
};
|
|
1628
|
-
declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
|
|
1629
|
-
config: ChartConfig;
|
|
1630
|
-
}): React.JSX.Element;
|
|
1631
|
-
declare const ChartStyle: ({ id, config }: {
|
|
1632
|
-
id: string;
|
|
1633
|
-
config: ChartConfig;
|
|
1634
|
-
}) => React.JSX.Element | null;
|
|
1635
|
-
type ChartItem = {
|
|
1636
|
-
label?: React.ReactNode;
|
|
1637
|
-
value?: React.ReactNode;
|
|
1638
|
-
color?: string;
|
|
1639
|
-
};
|
|
1640
|
-
declare const ChartTooltip: ({ children }: {
|
|
1641
|
-
children?: React.ReactNode;
|
|
1642
|
-
}) => React.JSX.Element;
|
|
1643
|
-
declare function ChartTooltipContent({ className, items, label, hideLabel, hideIndicator, labelClassName, }: React.ComponentProps<"div"> & {
|
|
1644
|
-
items?: ChartItem[];
|
|
1645
|
-
label?: React.ReactNode;
|
|
1646
|
-
hideLabel?: boolean;
|
|
1647
|
-
hideIndicator?: boolean;
|
|
1648
|
-
labelClassName?: string;
|
|
1649
|
-
}): React.JSX.Element | null;
|
|
1650
|
-
declare const ChartLegend: ({ children }: {
|
|
1651
|
-
children?: React.ReactNode;
|
|
1652
|
-
}) => React.JSX.Element;
|
|
1653
|
-
declare function ChartLegendContent({ className, hideIcon, items, }: React.ComponentProps<"div"> & {
|
|
1654
|
-
hideIcon?: boolean;
|
|
1655
|
-
items?: ChartItem[];
|
|
1656
|
-
}): React.JSX.Element | null;
|
|
1657
|
-
|
|
1658
1633
|
interface CalendarProps {
|
|
1659
1634
|
/** The currently selected day, if any. */
|
|
1660
1635
|
selected?: Date;
|
|
@@ -1852,24 +1827,6 @@ declare function FormControl({ error, ...props }: React.ComponentProps<typeof Sl
|
|
|
1852
1827
|
declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
1853
1828
|
declare function FormMessage({ className, children, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
|
|
1854
1829
|
|
|
1855
|
-
type ResizableDirection = "horizontal" | "vertical";
|
|
1856
|
-
interface ResizablePanelGroupProps extends React.ComponentProps<"div"> {
|
|
1857
|
-
direction?: ResizableDirection;
|
|
1858
|
-
keyboardStep?: number;
|
|
1859
|
-
onLayout?: (sizes: number[]) => void;
|
|
1860
|
-
}
|
|
1861
|
-
declare function ResizablePanelGroup({ className, direction, keyboardStep, onLayout, children, ...props }: ResizablePanelGroupProps): React.JSX.Element;
|
|
1862
|
-
interface ResizablePanelProps extends React.ComponentProps<"div"> {
|
|
1863
|
-
index: number;
|
|
1864
|
-
defaultSize?: number;
|
|
1865
|
-
}
|
|
1866
|
-
declare function ResizablePanel({ className, index, defaultSize, style, children, ...props }: ResizablePanelProps): React.JSX.Element;
|
|
1867
|
-
interface ResizableHandleProps extends React.ComponentProps<"div"> {
|
|
1868
|
-
index: number;
|
|
1869
|
-
withHandle?: boolean;
|
|
1870
|
-
}
|
|
1871
|
-
declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
|
|
1872
|
-
|
|
1873
1830
|
declare const terminalAreaClasses: {
|
|
1874
1831
|
readonly ticker: "lg:col-span-3 lg:row-start-1";
|
|
1875
1832
|
readonly chart: "lg:col-start-1 lg:row-start-2";
|
|
@@ -2453,4 +2410,4 @@ interface SettledProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
|
2453
2410
|
*/
|
|
2454
2411
|
declare function Settled({ loading, skeleton, children, ...props }: SettledProps): React.JSX.Element;
|
|
2455
2412
|
|
|
2456
|
-
export { type Accent, Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, AccountMenu, type AccountMenuLabels, type AccountMenuProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, type BookSide, BottomTabBar, type BottomTabBarLabels, type BottomTabBarProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselEdgeFade, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, type ChartConfig, ChartContainer, type ChartItem, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Check, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, type DismissEvent, DismissableLayerScope, Display, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Eyebrow, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Footer, type FooterLink, type FooterLinkGroup, type FooterOffice, type FooterProps, Forbidden, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, type HoverIntentHandlers, InfoTip, InfoTipContent, type InfoTipContentProps, type InfoTipProps, InfoTipTrigger, type InfoTipTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputProps, type InputSize, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, LAYER_IGNORE_ATTR, Label, ListRow, ListRowLabel, type ListRowLabelProps, type ListRowProps, ListRowValue, ListRows, type ListRowsProps, type ListRowsVariant, Logo, type LogoProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, MobileAppBar, type MobileAppBarBack, type MobileAppBarLabels, type MobileAppBarProps, NativeSelect, NativeSelectGroup, NativeSelectOption, type NativeSelectProps, type NativeSelectSize, NavBadge, type NavBadgeProps, type NavBadgeVariant, NavDot, type NavDotProps, type NavDotTone, type NavGroup, type NavItem, type NavItemState, type NavMatch, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenOrdersEmpty, OrderBook, OrderBookHead, type OrderBookHeadProps, OrderBookRow, type OrderBookRowProps, OrderBookSpread, OrderForm, OrderFormRow, type OrderFormRowProps, OrderFormSubmit, type OrderFormSubmitProps, type OrderSide, PageFrame, type PageFrameProps, type PageFrameWidth, PageHeading, type PageHeadingProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type Polarity, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, PortalProvider, type PortalProviderProps, Progress, type ProgressProps, Prose, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ResourceError, type ResourceErrorLabels, type ResourceErrorProps, ScrollArea, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, Section, SectionDescriptor, type SectionDescriptorProps, SectionHead, type SectionHeadProps, SectionLabel, type SectionLabelProps, type SectionLabelTone, SectionNav, type SectionNavGroup, type SectionNavItem, type SectionNavLabels, type SectionNavProps, type SectionProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, ServerError, type ServerErrorProps, Settled, type SettledProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type ShellBreakpoint, ShellNav, type ShellNavLabels, type ShellNavProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Stat, type StatProps, type StatusLinkData, type StatusPageProps, StatusScreen, type StatusScreenProps, type Surface, Switch, type SwitchProps, SystemBanner, type SystemBannerLabels, type SystemBannerProps, type SystemBannerTone, Table, type TableAlign, TableBody, TableCaption, TableCard, TableCell, type TableCellProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Terminal, type TerminalArea, TerminalChart, TerminalPane, TerminalPaneBody, TerminalPaneHeader, type TerminalPaneProps, TerminalTicker, Textarea, type TextareaProps, type TextareaSize, TickerStat, type TickerStatProps, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TopBar, type TopBarProps, TradesTapeRow, type TradesTapeRowProps, buttonVariants, cn, isNavItemActive, isPlainLeftClick, mergeRefs, navItemMatch, navigationMenuTriggerStyle, resolveActiveNavItem, statusCtaClass, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, useHoverIntent, usePendingNavigation, usePresence, useRovingFocus, useSidebar };
|
|
2413
|
+
export { type Accent, Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, AccountMenu, type AccountMenuLabels, type AccountMenuProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, AppShell, type AppShellProps, AuthWall, type AuthWallProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, type BookSide, BottomTabBar, type BottomTabBarLabels, type BottomTabBarProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselEdgeFade, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, Check, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, type DismissEvent, DismissableLayerScope, Display, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Eyebrow, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Footer, type FooterLink, type FooterLinkGroup, type FooterOffice, type FooterProps, Forbidden, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, type HoverIntentHandlers, InfoTip, InfoTipContent, type InfoTipContentProps, type InfoTipProps, InfoTipTrigger, type InfoTipTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputProps, type InputSize, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, LAYER_IGNORE_ATTR, Label, ListRow, ListRowLabel, type ListRowLabelProps, type ListRowProps, ListRowValue, ListRows, type ListRowsProps, type ListRowsVariant, Logo, type LogoProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, MobileAppBar, type MobileAppBarBack, type MobileAppBarLabels, type MobileAppBarProps, NativeSelect, NativeSelectGroup, NativeSelectOption, type NativeSelectProps, type NativeSelectSize, NavBadge, type NavBadgeProps, type NavBadgeVariant, NavDot, type NavDotProps, type NavDotTone, type NavGroup, type NavItem, type NavItemState, type NavMatch, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenOrdersEmpty, OrderBook, OrderBookHead, type OrderBookHeadProps, OrderBookRow, type OrderBookRowProps, OrderBookSpread, OrderForm, OrderFormRow, type OrderFormRowProps, OrderFormSubmit, type OrderFormSubmitProps, type OrderSide, PageFrame, type PageFrameProps, type PageFrameWidth, PageHeading, type PageHeadingProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type Polarity, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, PortalProvider, type PortalProviderProps, Progress, type ProgressProps, Prose, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResourceError, type ResourceErrorLabels, type ResourceErrorProps, ScrollArea, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, Section, SectionDescriptor, type SectionDescriptorProps, SectionHead, type SectionHeadProps, SectionLabel, type SectionLabelProps, type SectionLabelTone, SectionNav, type SectionNavGroup, type SectionNavItem, type SectionNavLabels, type SectionNavProps, type SectionProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, ServerError, type ServerErrorProps, Settled, type SettledProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type ShellBreakpoint, ShellNav, type ShellNavLabels, type ShellNavProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Stat, type StatProps, type StatusLinkData, type StatusPageProps, StatusScreen, type StatusScreenProps, type Surface, Switch, type SwitchProps, SystemBanner, type SystemBannerLabels, type SystemBannerProps, type SystemBannerTone, Table, type TableAlign, TableBody, TableCaption, TableCard, TableCell, type TableCellProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Terminal, type TerminalArea, TerminalChart, TerminalPane, TerminalPaneBody, TerminalPaneHeader, type TerminalPaneProps, TerminalTicker, Textarea, type TextareaProps, type TextareaSize, TickerStat, type TickerStatProps, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TopBar, type TopBarProps, TradesTapeRow, type TradesTapeRowProps, buttonVariants, cn, isNavItemActive, isPlainLeftClick, mergeRefs, navItemMatch, navigationMenuTriggerStyle, resolveActiveNavItem, statusCtaClass, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, useHoverIntent, usePendingNavigation, usePresence, useRovingFocus, useSidebar };
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { Button, buttonVariants } from "./components/button.js";
|
|
|
17
17
|
export { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, } from "./components/button-group.js";
|
|
18
18
|
export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, } from "./components/card.js";
|
|
19
19
|
export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, } from "./components/empty.js";
|
|
20
|
+
export { AuthWall } from "./components/auth-wall.js";
|
|
20
21
|
export { Field, FieldSet, FieldLegend, FieldGroup, FieldContent, FieldLabel, FieldTitle, FieldDescription, FieldSeparator, FieldError, } from "./components/field.js";
|
|
21
22
|
export { SectionDescriptor } from "./components/section-descriptor.js";
|
|
22
23
|
export { Footer } from "./components/footer.js";
|
|
@@ -65,12 +66,10 @@ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
|
|
|
65
66
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select.js";
|
|
66
67
|
export { NativeSelect, NativeSelectGroup, NativeSelectOption, } from "./components/native-select.js";
|
|
67
68
|
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./components/command.js";
|
|
68
|
-
export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, } from "./components/chart.js";
|
|
69
69
|
export { Calendar, } from "./components/calendar.js";
|
|
70
70
|
export { DateTimePicker, } from "./components/date-time-picker.js";
|
|
71
71
|
export { Toaster, toast, } from "./components/sonner.js";
|
|
72
72
|
export { Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from "./components/form.js";
|
|
73
|
-
export { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./components/resizable.js";
|
|
74
73
|
export { OpenOrdersEmpty, OrderBook, OrderBookHead, OrderBookRow, OrderBookSpread, OrderForm, OrderFormRow, OrderFormSubmit, Terminal, TerminalChart, TerminalPane, TerminalPaneBody, TerminalPaneHeader, TerminalTicker, TickerStat, TradesTapeRow, } from "./components/terminal.js";
|
|
75
74
|
export { AppShell } from "./components/app-shell.js";
|
|
76
75
|
export { isNavItemActive, isPlainLeftClick, navItemMatch, resolveActiveNavItem, } from "./components/nav-model.js";
|