lynote-ui 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/combobox/index.d.ts +1 -1
- package/dist/combobox/index.js +7 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +7 -1
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/select/index.js +4 -4
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +4 -4
- package/dist/select/index.mjs.map +1 -1
- package/dist/style.css +121 -0
- package/package.json +2 -2
package/dist/combobox/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ declare function ComboboxInput({ className, children, disabled, showTrigger, sho
|
|
|
7
7
|
showTrigger?: boolean;
|
|
8
8
|
showClear?: boolean;
|
|
9
9
|
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, disableAnchorTracking, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "sticky" | "positionMethod" | "disableAnchorTracking">): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
|
package/dist/combobox/index.js
CHANGED
|
@@ -60,13 +60,19 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
|
|
|
60
60
|
]
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
-
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
63
|
+
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, disableAnchorTracking, ...props }) {
|
|
64
64
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Positioner, {
|
|
65
65
|
side,
|
|
66
66
|
sideOffset,
|
|
67
67
|
align,
|
|
68
68
|
alignOffset,
|
|
69
69
|
anchor,
|
|
70
|
+
collisionAvoidance,
|
|
71
|
+
collisionBoundary,
|
|
72
|
+
collisionPadding,
|
|
73
|
+
sticky,
|
|
74
|
+
positionMethod,
|
|
75
|
+
disableAnchorTracking,
|
|
70
76
|
className: "isolate z-50",
|
|
71
77
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react.Combobox.Popup, {
|
|
72
78
|
"data-slot": "combobox-content",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport * as React from \"react\";\n\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"../input-group\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n {...props}\n >\n {children}\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n </ComboboxPrimitive.Trigger>\n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(className)}\n {...props}\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.Clear>\n );\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean;\n showClear?: boolean;\n}) {\n return (\n <InputGroup className={cn(\"w-auto\", className)}>\n <ComboboxPrimitive.Input\n render={<InputGroupInput disabled={disabled} />}\n {...props}\n />\n <InputGroupAddon align=\"inline-end\">\n {showTrigger && (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && <ComboboxClear disabled={disabled} />}\n </InputGroupAddon>\n {children}\n </InputGroup>\n );\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n data-chips={!!anchor}\n className={cn(\n \"group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n ComboboxPrimitive.Chips.Props) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean;\n}) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove && (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ChipRemove>\n )}\n </ComboboxPrimitive.Chip>\n );\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null);\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport * as React from \"react\";\n\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"../input-group\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n {...props}\n >\n {children}\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n </ComboboxPrimitive.Trigger>\n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(className)}\n {...props}\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.Clear>\n );\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean;\n showClear?: boolean;\n}) {\n return (\n <InputGroup className={cn(\"w-auto\", className)}>\n <ComboboxPrimitive.Input\n render={<InputGroupInput disabled={disabled} />}\n {...props}\n />\n <InputGroupAddon align=\"inline-end\">\n {showTrigger && (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && <ComboboxClear disabled={disabled} />}\n </InputGroupAddon>\n {children}\n </InputGroup>\n );\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n collisionAvoidance,\n collisionBoundary,\n collisionPadding,\n sticky,\n positionMethod,\n disableAnchorTracking,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n | \"side\"\n | \"align\"\n | \"sideOffset\"\n | \"alignOffset\"\n | \"anchor\"\n | \"collisionAvoidance\"\n | \"collisionBoundary\"\n | \"collisionPadding\"\n | \"sticky\"\n | \"positionMethod\"\n | \"disableAnchorTracking\"\n >) {\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n collisionAvoidance={collisionAvoidance}\n collisionBoundary={collisionBoundary}\n collisionPadding={collisionPadding}\n sticky={sticky}\n positionMethod={positionMethod}\n disableAnchorTracking={disableAnchorTracking}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n data-chips={!!anchor}\n className={cn(\n \"group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n ComboboxPrimitive.Chips.Props) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean;\n}) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove && (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ChipRemove>\n )}\n </ComboboxPrimitive.Chip>\n );\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null);\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n};\n"],"mappings":"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"}
|
package/dist/combobox/index.mjs
CHANGED
|
@@ -57,13 +57,19 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
|
|
|
57
57
|
]
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
|
-
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
60
|
+
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, disableAnchorTracking, ...props }) {
|
|
61
61
|
return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
|
|
62
62
|
side,
|
|
63
63
|
sideOffset,
|
|
64
64
|
align,
|
|
65
65
|
alignOffset,
|
|
66
66
|
anchor,
|
|
67
|
+
collisionAvoidance,
|
|
68
|
+
collisionBoundary,
|
|
69
|
+
collisionPadding,
|
|
70
|
+
sticky,
|
|
71
|
+
positionMethod,
|
|
72
|
+
disableAnchorTracking,
|
|
67
73
|
className: "isolate z-50",
|
|
68
74
|
children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
|
|
69
75
|
"data-slot": "combobox-content",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport * as React from \"react\";\n\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"../input-group\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n {...props}\n >\n {children}\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n </ComboboxPrimitive.Trigger>\n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(className)}\n {...props}\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.Clear>\n );\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean;\n showClear?: boolean;\n}) {\n return (\n <InputGroup className={cn(\"w-auto\", className)}>\n <ComboboxPrimitive.Input\n render={<InputGroupInput disabled={disabled} />}\n {...props}\n />\n <InputGroupAddon align=\"inline-end\">\n {showTrigger && (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && <ComboboxClear disabled={disabled} />}\n </InputGroupAddon>\n {children}\n </InputGroup>\n );\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n data-chips={!!anchor}\n className={cn(\n \"group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n ComboboxPrimitive.Chips.Props) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean;\n}) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove && (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ChipRemove>\n )}\n </ComboboxPrimitive.Chip>\n );\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null);\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport * as React from \"react\";\n\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"../input-group\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n {...props}\n >\n {children}\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n </ComboboxPrimitive.Trigger>\n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(className)}\n {...props}\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.Clear>\n );\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean;\n showClear?: boolean;\n}) {\n return (\n <InputGroup className={cn(\"w-auto\", className)}>\n <ComboboxPrimitive.Input\n render={<InputGroupInput disabled={disabled} />}\n {...props}\n />\n <InputGroupAddon align=\"inline-end\">\n {showTrigger && (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && <ComboboxClear disabled={disabled} />}\n </InputGroupAddon>\n {children}\n </InputGroup>\n );\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n collisionAvoidance,\n collisionBoundary,\n collisionPadding,\n sticky,\n positionMethod,\n disableAnchorTracking,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n | \"side\"\n | \"align\"\n | \"sideOffset\"\n | \"alignOffset\"\n | \"anchor\"\n | \"collisionAvoidance\"\n | \"collisionBoundary\"\n | \"collisionPadding\"\n | \"sticky\"\n | \"positionMethod\"\n | \"disableAnchorTracking\"\n >) {\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n collisionAvoidance={collisionAvoidance}\n collisionBoundary={collisionBoundary}\n collisionPadding={collisionPadding}\n sticky={sticky}\n positionMethod={positionMethod}\n disableAnchorTracking={disableAnchorTracking}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n data-chips={!!anchor}\n className={cn(\n \"group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPrimitive.Positioner>\n </ComboboxPrimitive.Portal>\n );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"no-scrollbar data-empty:p-0 max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n ComboboxPrimitive.Chips.Props) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean;\n}) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove && (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <XIcon className=\"pointer-events-none\" />\n </ComboboxPrimitive.ChipRemove>\n )}\n </ComboboxPrimitive.Chip>\n );\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n );\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null);\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n};\n"],"mappings":";;;;;;;;;AAeA,IAAM,WAAW,WAAkB;AAEnC,SAAS,cAAc,EAAE,GAAG,SAAwC;AAClE,QAAO,oBAAC,WAAkB,OAAnB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,gBAAgB,EACvB,WACA,UACA,GAAG,SAC+B;AAClC,QACE,qBAAC,WAAkB,SAAnB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;YAHN,CAKG,UACD,oBAAC,iBAAD,EAAiB,WAAU,oDAAqD,CAAA,CACtD;;;AAIhC,SAAS,cAAc,EAAE,WAAW,GAAG,SAAwC;AAC7E,QACE,oBAAC,WAAkB,OAAnB;EACE,aAAU;EACV,QAAQ,oBAAC,kBAAD;GAAkB,SAAQ;GAAQ,MAAK;GAAY,CAAA;EAC3D,WAAW,GAAG,UAAU;EACxB,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,uBAAwB,CAAA;EACjB,CAAA;;AAI9B,SAAS,cAAc,EACrB,WACA,UACA,WAAW,OACX,cAAc,MACd,YAAY,OACZ,GAAG,SAIF;AACD,QACE,qBAAC,YAAD;EAAY,WAAW,GAAG,UAAU,UAAU;YAA9C;GACE,oBAAC,WAAkB,OAAnB;IACE,QAAQ,oBAAC,iBAAD,EAA2B,UAAY,CAAA;IAC/C,GAAI;IACJ,CAAA;GACF,qBAAC,iBAAD;IAAiB,OAAM;cAAvB,CACG,eACC,oBAAC,kBAAD;KACE,MAAK;KACL,SAAQ;KACR,QAAQ,oBAAC,iBAAD,EAAmB,CAAA;KAC3B,aAAU;KACV,WAAU;KACA;KACV,CAAA,EAEH,aAAa,oBAAC,eAAD,EAAyB,UAAY,CAAA,CACnC;;GACjB;GACU;;;AAIjB,SAAS,gBAAgB,EACvB,WACA,OAAO,UACP,aAAa,GACb,QAAQ,SACR,cAAc,GACd,QACA,oBACA,mBACA,kBACA,QACA,gBACA,uBACA,GAAG,SAeA;AACH,QACE,oBAAC,WAAkB,QAAnB,EAAA,UACE,oBAAC,WAAkB,YAAnB;EACQ;EACM;EACL;EACM;EACL;EACY;EACD;EACD;EACV;EACQ;EACO;EACvB,WAAU;YAEV,oBAAC,WAAkB,OAAnB;GACE,aAAU;GACV,cAAY,CAAC,CAAC;GACd,WAAW,GACT,25BACA,UACD;GACD,GAAI;GACJ,CAAA;EAC2B,CAAA,EACN,CAAA;;AAI/B,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;AAC3E,QACE,oBAAC,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,2KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,UACA,GAAG,SAC4B;AAC/B,QACE,qBAAC,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,mZACA,UACD;EACD,GAAI;YANN,CAQG,UACD,oBAAC,WAAkB,eAAnB;GACE,QACE,oBAAC,QAAD,EAAM,WAAU,gFAAiF,CAAA;aAGnG,oBAAC,WAAD,EAAW,WAAU,uBAAwB,CAAA;GACb,CAAA,CACX;;;AAI7B,SAAS,cAAc,EAAE,WAAW,GAAG,SAAwC;AAC7E,QACE,oBAAC,WAAkB,OAAnB;EACE,aAAU;EACV,WAAW,GAAG,UAAU;EACxB,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,GAAG,SACkC;AACrC,QACE,oBAAC,WAAkB,YAAnB;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,UAAU;EACrE,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAAE,GAAG,SAA6C;AAC5E,QACE,oBAAC,WAAkB,YAAnB;EAA8B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAI/E,SAAS,cAAc,EAAE,WAAW,GAAG,SAAwC;AAC7E,QACE,oBAAC,WAAkB,OAAnB;EACE,aAAU;EACV,WAAW,GACT,sHACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACiC;AACpC,QACE,oBAAC,WAAkB,WAAnB;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EACrD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,GAAG,SAE4B;AAC/B,QACE,oBAAC,WAAkB,OAAnB;EACE,aAAU;EACV,WAAW,GACT,mcACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,UACA,aAAa,MACb,GAAG,SAGF;AACD,QACE,qBAAC,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,8RACA,UACD;EACD,GAAI;YANN,CAQG,UACA,cACC,oBAAC,WAAkB,YAAnB;GACE,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,MAAK;IAAY,CAAA;GACjD,WAAU;GACV,aAAU;aAEV,oBAAC,OAAD,EAAO,WAAU,uBAAwB,CAAA;GACZ,CAAA,CAEV;;;AAI7B,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC6B;AAChC,QACE,oBAAC,WAAkB,OAAnB;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,UAAU;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB;AAC3B,QAAO,MAAM,OAA8B,KAAK"}
|
package/dist/select/index.js
CHANGED
|
@@ -32,7 +32,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
|
32
32
|
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Icon, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" }) })]
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
|
-
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger =
|
|
35
|
+
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
|
|
36
36
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
|
|
37
37
|
side,
|
|
38
38
|
sideOffset,
|
|
@@ -68,10 +68,10 @@ function SelectItem({ className, children, ...props }) {
|
|
|
68
68
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemText, {
|
|
69
69
|
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
70
70
|
children
|
|
71
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemIndicator, {
|
|
72
|
-
|
|
71
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemIndicator, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
72
|
+
className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
|
|
73
73
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "pointer-events-none" })
|
|
74
|
-
})]
|
|
74
|
+
}) })]
|
|
75
75
|
});
|
|
76
76
|
}
|
|
77
77
|
function SelectSeparator({ className, ...props }) {
|
package/dist/select/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib\";\n\nconst Select = SelectPrimitive.Root;\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n return (\n <SelectPrimitive.Group\n data-slot=\"select-group\"\n className={cn(\"scroll-my-1 p-1\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n return (\n <SelectPrimitive.Value\n data-slot=\"select-value\"\n className={cn(\"flex flex-1 text-left\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: SelectPrimitive.Trigger.Props & {\n size?: \"sm\" | \"default\";\n}) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"border-input focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit select-none items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border bg-transparent py-2 pl-2.5 pr-2 text-sm outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon\n render={\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n }\n />\n </SelectPrimitive.Trigger>\n );\n}\n\nfunction SelectContent({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n alignItemWithTrigger = false,\n ...props\n}: SelectPrimitive.Popup.Props &\n Pick<\n SelectPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n >) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n alignItemWithTrigger={alignItemWithTrigger}\n className=\"isolate z-50\"\n >\n <SelectPrimitive.Popup\n data-slot=\"select-content\"\n data-align-trigger={alignItemWithTrigger}\n className={cn(\n \"max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 min-w-36 overflow-y-auto overflow-x-hidden rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n className,\n )}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.List>{children}</SelectPrimitive.List>\n <SelectScrollDownButton />\n </SelectPrimitive.Popup>\n </SelectPrimitive.Positioner>\n </SelectPrimitive.Portal>\n );\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: SelectPrimitive.GroupLabel.Props) {\n return (\n <SelectPrimitive.GroupLabel\n data-slot=\"select-label\"\n className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: SelectPrimitive.Item.Props) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-1.5 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n {children}\n </SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n <CheckIcon className=\"pointer-events-none\" />\n </span>\n }\n />\n </SelectPrimitive.Item>\n );\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: SelectPrimitive.Separator.Props) {\n return (\n <SelectPrimitive.Separator\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\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n return (\n <SelectPrimitive.ScrollUpArrow\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpArrow>\n );\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n return (\n <SelectPrimitive.ScrollDownArrow\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownArrow>\n );\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n};\n"],"mappings":"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"}
|
package/dist/select/index.mjs
CHANGED
|
@@ -29,7 +29,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
|
29
29
|
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" }) })]
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
|
-
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger =
|
|
32
|
+
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
|
|
33
33
|
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
|
|
34
34
|
side,
|
|
35
35
|
sideOffset,
|
|
@@ -65,10 +65,10 @@ function SelectItem({ className, children, ...props }) {
|
|
|
65
65
|
children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
|
|
66
66
|
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
67
67
|
children
|
|
68
|
-
}), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
|
|
69
|
-
|
|
68
|
+
}), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { render: /* @__PURE__ */ jsx("span", {
|
|
69
|
+
className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
|
|
70
70
|
children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
|
|
71
|
-
})]
|
|
71
|
+
}) })]
|
|
72
72
|
});
|
|
73
73
|
}
|
|
74
74
|
function SelectSeparator({ className, ...props }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib\";\n\nconst Select = SelectPrimitive.Root;\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n return (\n <SelectPrimitive.Group\n data-slot=\"select-group\"\n className={cn(\"scroll-my-1 p-1\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n return (\n <SelectPrimitive.Value\n data-slot=\"select-value\"\n className={cn(\"flex flex-1 text-left\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: SelectPrimitive.Trigger.Props & {\n size?: \"sm\" | \"default\";\n}) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"border-input focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit select-none items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border bg-transparent py-2 pl-2.5 pr-2 text-sm outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon\n render={\n <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n }\n />\n </SelectPrimitive.Trigger>\n );\n}\n\nfunction SelectContent({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n alignItemWithTrigger = false,\n ...props\n}: SelectPrimitive.Popup.Props &\n Pick<\n SelectPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n >) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Positioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n alignItemWithTrigger={alignItemWithTrigger}\n className=\"isolate z-50\"\n >\n <SelectPrimitive.Popup\n data-slot=\"select-content\"\n data-align-trigger={alignItemWithTrigger}\n className={cn(\n \"max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 min-w-36 overflow-y-auto overflow-x-hidden rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n className,\n )}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.List>{children}</SelectPrimitive.List>\n <SelectScrollDownButton />\n </SelectPrimitive.Popup>\n </SelectPrimitive.Positioner>\n </SelectPrimitive.Portal>\n );\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: SelectPrimitive.GroupLabel.Props) {\n return (\n <SelectPrimitive.GroupLabel\n data-slot=\"select-label\"\n className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: SelectPrimitive.Item.Props) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-1.5 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n {children}\n </SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator\n render={\n <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n <CheckIcon className=\"pointer-events-none\" />\n </span>\n }\n />\n </SelectPrimitive.Item>\n );\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: SelectPrimitive.Separator.Props) {\n return (\n <SelectPrimitive.Separator\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\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n return (\n <SelectPrimitive.ScrollUpArrow\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpArrow>\n );\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n return (\n <SelectPrimitive.ScrollDownArrow\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownArrow>\n );\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n};\n"],"mappings":";;;;;;;AAQA,IAAM,SAAS,SAAgB;AAE/B,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,oBAAC,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,mBAAmB,UAAU;EAC3C,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,oBAAC,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB,UAAU;EACjD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SAGF;AACD,QACE,qBAAC,SAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,u2BACA,UACD;EACD,GAAI;YAPN,CASG,UACD,oBAAC,SAAgB,MAAjB,EACE,QACE,oBAAC,iBAAD,EAAiB,WAAU,oDAAqD,CAAA,EAElF,CAAA,CACsB;;;AAI9B,SAAS,cAAc,EACrB,WACA,UACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,uBAAuB,OACvB,GAAG,SAKA;AACH,QACE,oBAAC,SAAgB,QAAjB,EAAA,UACE,oBAAC,SAAgB,YAAjB;EACQ;EACM;EACL;EACM;EACS;EACtB,WAAU;YAEV,qBAAC,SAAgB,OAAjB;GACE,aAAU;GACV,sBAAoB;GACpB,WAAW,GACT,gpBACA,UACD;GACD,GAAI;aAPN;IASE,oBAAC,sBAAD,EAAwB,CAAA;IACxB,oBAAC,SAAgB,MAAjB,EAAuB,UAAgC,CAAA;IACvD,oBAAC,wBAAD,EAA0B,CAAA;IACJ;;EACG,CAAA,EACN,CAAA;;AAI7B,SAAS,YAAY,EACnB,WACA,GAAG,SACgC;AACnC,QACE,oBAAC,SAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,UAAU;EACrE,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SAC0B;AAC7B,QACE,qBAAC,SAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,sbACA,UACD;EACD,GAAI;YANN,CAQE,oBAAC,SAAgB,UAAjB;GAA0B,WAAU;GACjC;GACwB,CAAA,EAC3B,oBAAC,SAAgB,eAAjB,EACE,QACE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,WAAD,EAAW,WAAU,uBAAwB,CAAA;GACxC,CAAA,EAET,CAAA,CACmB;;;AAI3B,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC+B;AAClC,QACE,oBAAC,SAAgB,WAAjB;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,UAAU;EACzE,GAAI;EACJ,CAAA;;AAIN,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC0D;AAC7D,QACE,oBAAC,SAAgB,eAAjB;EACE,aAAU;EACV,WAAW,GACT,0HACA,UACD;EACD,GAAI;YAEJ,oBAAC,eAAD,EAAiB,CAAA;EACa,CAAA;;AAIpC,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC4D;AAC/D,QACE,oBAAC,SAAgB,iBAAjB;EACE,aAAU;EACV,WAAW,GACT,6HACA,UACD;EACD,GAAI;YAEJ,oBAAC,iBAAD,EAAmB,CAAA;EACa,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -31,6 +31,19 @@
|
|
|
31
31
|
--tw-ring-offset-color: #fff;
|
|
32
32
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
33
33
|
--tw-outline-style: solid;
|
|
34
|
+
--tw-blur: initial;
|
|
35
|
+
--tw-brightness: initial;
|
|
36
|
+
--tw-contrast: initial;
|
|
37
|
+
--tw-grayscale: initial;
|
|
38
|
+
--tw-hue-rotate: initial;
|
|
39
|
+
--tw-invert: initial;
|
|
40
|
+
--tw-opacity: initial;
|
|
41
|
+
--tw-saturate: initial;
|
|
42
|
+
--tw-sepia: initial;
|
|
43
|
+
--tw-drop-shadow: initial;
|
|
44
|
+
--tw-drop-shadow-color: initial;
|
|
45
|
+
--tw-drop-shadow-alpha: 100%;
|
|
46
|
+
--tw-drop-shadow-size: initial;
|
|
34
47
|
--tw-duration: initial;
|
|
35
48
|
--tw-ease: initial;
|
|
36
49
|
--tw-content: "";
|
|
@@ -420,6 +433,10 @@
|
|
|
420
433
|
position: relative;
|
|
421
434
|
}
|
|
422
435
|
|
|
436
|
+
.sticky {
|
|
437
|
+
position: sticky;
|
|
438
|
+
}
|
|
439
|
+
|
|
423
440
|
.inset-0 {
|
|
424
441
|
inset: calc(var(--spacing) * 0);
|
|
425
442
|
}
|
|
@@ -889,6 +906,10 @@
|
|
|
889
906
|
height: calc(var(--spacing) * 12);
|
|
890
907
|
}
|
|
891
908
|
|
|
909
|
+
.h-14\! {
|
|
910
|
+
height: calc(var(--spacing) * 14) !important;
|
|
911
|
+
}
|
|
912
|
+
|
|
892
913
|
.h-40 {
|
|
893
914
|
height: calc(var(--spacing) * 40);
|
|
894
915
|
}
|
|
@@ -1057,14 +1078,30 @@
|
|
|
1057
1078
|
width: 212px;
|
|
1058
1079
|
}
|
|
1059
1080
|
|
|
1081
|
+
.w-\[240px\] {
|
|
1082
|
+
width: 240px;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1060
1085
|
.w-\[250px\] {
|
|
1061
1086
|
width: 250px;
|
|
1062
1087
|
}
|
|
1063
1088
|
|
|
1089
|
+
.w-\[260px\] {
|
|
1090
|
+
width: 260px;
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.w-\[280px\] {
|
|
1094
|
+
width: 280px;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1064
1097
|
.w-\[300px\] {
|
|
1065
1098
|
width: 300px;
|
|
1066
1099
|
}
|
|
1067
1100
|
|
|
1101
|
+
.w-\[320px\] {
|
|
1102
|
+
width: 320px;
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1068
1105
|
.w-\[350px\] {
|
|
1069
1106
|
width: 350px;
|
|
1070
1107
|
}
|
|
@@ -1073,6 +1110,10 @@
|
|
|
1073
1110
|
width: 400px;
|
|
1074
1111
|
}
|
|
1075
1112
|
|
|
1113
|
+
.w-\[420px\] {
|
|
1114
|
+
width: 420px;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1076
1117
|
.w-\[450px\] {
|
|
1077
1118
|
width: 450px;
|
|
1078
1119
|
}
|
|
@@ -1161,6 +1202,10 @@
|
|
|
1161
1202
|
min-width: calc(var(--spacing) * 36);
|
|
1162
1203
|
}
|
|
1163
1204
|
|
|
1205
|
+
.min-w-60 {
|
|
1206
|
+
min-width: calc(var(--spacing) * 60);
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1164
1209
|
.min-w-\[96px\] {
|
|
1165
1210
|
min-width: 96px;
|
|
1166
1211
|
}
|
|
@@ -1424,6 +1469,12 @@
|
|
|
1424
1469
|
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
|
1425
1470
|
}
|
|
1426
1471
|
|
|
1472
|
+
:where(.space-y-3 > :not(:last-child)) {
|
|
1473
|
+
--tw-space-y-reverse: 0;
|
|
1474
|
+
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
|
|
1475
|
+
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1427
1478
|
:where(.space-y-4 > :not(:last-child)) {
|
|
1428
1479
|
--tw-space-y-reverse: 0;
|
|
1429
1480
|
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
|
|
@@ -2262,6 +2313,10 @@
|
|
|
2262
2313
|
outline-width: 1px;
|
|
2263
2314
|
}
|
|
2264
2315
|
|
|
2316
|
+
.filter {
|
|
2317
|
+
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
|
|
2318
|
+
}
|
|
2319
|
+
|
|
2265
2320
|
.transition {
|
|
2266
2321
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
|
2267
2322
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
@@ -6157,6 +6212,72 @@
|
|
|
6157
6212
|
initial-value: solid;
|
|
6158
6213
|
}
|
|
6159
6214
|
|
|
6215
|
+
@property --tw-blur {
|
|
6216
|
+
syntax: "*";
|
|
6217
|
+
inherits: false
|
|
6218
|
+
}
|
|
6219
|
+
|
|
6220
|
+
@property --tw-brightness {
|
|
6221
|
+
syntax: "*";
|
|
6222
|
+
inherits: false
|
|
6223
|
+
}
|
|
6224
|
+
|
|
6225
|
+
@property --tw-contrast {
|
|
6226
|
+
syntax: "*";
|
|
6227
|
+
inherits: false
|
|
6228
|
+
}
|
|
6229
|
+
|
|
6230
|
+
@property --tw-grayscale {
|
|
6231
|
+
syntax: "*";
|
|
6232
|
+
inherits: false
|
|
6233
|
+
}
|
|
6234
|
+
|
|
6235
|
+
@property --tw-hue-rotate {
|
|
6236
|
+
syntax: "*";
|
|
6237
|
+
inherits: false
|
|
6238
|
+
}
|
|
6239
|
+
|
|
6240
|
+
@property --tw-invert {
|
|
6241
|
+
syntax: "*";
|
|
6242
|
+
inherits: false
|
|
6243
|
+
}
|
|
6244
|
+
|
|
6245
|
+
@property --tw-opacity {
|
|
6246
|
+
syntax: "*";
|
|
6247
|
+
inherits: false
|
|
6248
|
+
}
|
|
6249
|
+
|
|
6250
|
+
@property --tw-saturate {
|
|
6251
|
+
syntax: "*";
|
|
6252
|
+
inherits: false
|
|
6253
|
+
}
|
|
6254
|
+
|
|
6255
|
+
@property --tw-sepia {
|
|
6256
|
+
syntax: "*";
|
|
6257
|
+
inherits: false
|
|
6258
|
+
}
|
|
6259
|
+
|
|
6260
|
+
@property --tw-drop-shadow {
|
|
6261
|
+
syntax: "*";
|
|
6262
|
+
inherits: false
|
|
6263
|
+
}
|
|
6264
|
+
|
|
6265
|
+
@property --tw-drop-shadow-color {
|
|
6266
|
+
syntax: "*";
|
|
6267
|
+
inherits: false
|
|
6268
|
+
}
|
|
6269
|
+
|
|
6270
|
+
@property --tw-drop-shadow-alpha {
|
|
6271
|
+
syntax: "<percentage>";
|
|
6272
|
+
inherits: false;
|
|
6273
|
+
initial-value: 100%;
|
|
6274
|
+
}
|
|
6275
|
+
|
|
6276
|
+
@property --tw-drop-shadow-size {
|
|
6277
|
+
syntax: "*";
|
|
6278
|
+
inherits: false
|
|
6279
|
+
}
|
|
6280
|
+
|
|
6160
6281
|
@property --tw-duration {
|
|
6161
6282
|
syntax: "*";
|
|
6162
6283
|
inherits: false
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lynote-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "Reusable React UI component library.",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -337,7 +337,7 @@
|
|
|
337
337
|
"react-dom": ">=18"
|
|
338
338
|
},
|
|
339
339
|
"dependencies": {
|
|
340
|
-
"@base-ui/react": "^1.
|
|
340
|
+
"@base-ui/react": "^1.4.1",
|
|
341
341
|
"@radix-ui/react-slot": "^1.2.4",
|
|
342
342
|
"class-variance-authority": "^0.7.1",
|
|
343
343
|
"clsx": "^2.1.1",
|