@adea-ai/ui 0.99.1 → 0.99.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layout/orbit-layout/orbit-layout.d.ts +5 -1
- package/dist/components/layout/orbit-layout/orbit-layout.d.ts.map +1 -1
- package/dist/components/layout/orbit-layout/orbit-layout.js.map +1 -1
- package/dist/components/layout/side-rail/side-rail.d.ts +4 -1
- package/dist/components/layout/side-rail/side-rail.d.ts.map +1 -1
- package/dist/components/layout/side-rail/side-rail.js +58 -64
- package/dist/components/layout/side-rail/side-rail.js.map +1 -1
- package/dist/components/layout/sidebar-nav/sidebar-nav.js +2 -2
- package/dist/components/layout/sidebar-nav/sidebar-nav.js.map +1 -1
- package/dist/components/motion/presence.d.ts +17 -7
- package/dist/components/motion/presence.d.ts.map +1 -1
- package/dist/components/motion/presence.js.map +1 -1
- package/dist/components/theme/theme-picker.d.ts.map +1 -1
- package/dist/components/theme/theme-picker.js +1 -1
- package/dist/components/theme/theme-picker.js.map +1 -1
- package/dist/components/theme/theme-provider.d.ts.map +1 -1
- package/dist/components/theme/theme-provider.js +15 -4
- package/dist/components/theme/theme-provider.js.map +1 -1
- package/dist/components/ui/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/components/ui/aspect-ratio/aspect-ratio.d.ts.map +1 -1
- package/dist/components/ui/aspect-ratio/aspect-ratio.js +15 -1
- package/dist/components/ui/aspect-ratio/aspect-ratio.js.map +1 -1
- package/dist/components/ui/badge/badge.d.ts +1 -1
- package/dist/components/ui/button/button.d.ts +1 -1
- package/dist/components/ui/calendar/calendar.d.ts.map +1 -1
- package/dist/components/ui/calendar/calendar.js +1 -1
- package/dist/components/ui/calendar/calendar.js.map +1 -1
- package/dist/components/ui/card/card.d.ts +2 -2
- package/dist/components/ui/card/card.js +2 -2
- package/dist/components/ui/card/card.js.map +1 -1
- package/dist/components/ui/chart/chart-options.d.ts +50 -0
- package/dist/components/ui/chart/chart-options.d.ts.map +1 -0
- package/dist/components/ui/chart/chart-options.js +178 -0
- package/dist/components/ui/chart/chart-options.js.map +1 -0
- package/dist/components/ui/chart/chart.d.ts +21 -18
- package/dist/components/ui/chart/chart.d.ts.map +1 -1
- package/dist/components/ui/chart/chart.js +175 -155
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/chart/index.js +2 -1
- package/dist/components/ui/context-menu/context-menu.d.ts +8 -0
- package/dist/components/ui/context-menu/context-menu.d.ts.map +1 -1
- package/dist/components/ui/context-menu/context-menu.js +8 -0
- package/dist/components/ui/context-menu/context-menu.js.map +1 -1
- package/dist/components/ui/drawer/drawer.d.ts +8 -1
- package/dist/components/ui/drawer/drawer.d.ts.map +1 -1
- package/dist/components/ui/drawer/drawer.js.map +1 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts +8 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu.js +8 -0
- package/dist/components/ui/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/ui/input-otp/input-otp.d.ts.map +1 -1
- package/dist/components/ui/input-otp/input-otp.js +2 -2
- package/dist/components/ui/input-otp/input-otp.js.map +1 -1
- package/dist/components/ui/menubar/menubar.d.ts +8 -0
- package/dist/components/ui/menubar/menubar.d.ts.map +1 -1
- package/dist/components/ui/menubar/menubar.js +8 -0
- package/dist/components/ui/menubar/menubar.js.map +1 -1
- package/dist/components/ui/navigation-menu/navigation-menu.d.ts +14 -2
- package/dist/components/ui/navigation-menu/navigation-menu.d.ts.map +1 -1
- package/dist/components/ui/navigation-menu/navigation-menu.js +28 -23
- package/dist/components/ui/navigation-menu/navigation-menu.js.map +1 -1
- package/dist/components/ui/pagination/pagination.d.ts.map +1 -1
- package/dist/components/ui/pagination/pagination.js +1 -1
- package/dist/components/ui/pagination/pagination.js.map +1 -1
- package/dist/components/ui/resizable/resizable.d.ts +0 -12
- package/dist/components/ui/resizable/resizable.d.ts.map +1 -1
- package/dist/components/ui/resizable/resizable.js +43 -9
- package/dist/components/ui/resizable/resizable.js.map +1 -1
- package/dist/components/ui/toast/toast.d.ts.map +1 -1
- package/dist/components/ui/toast/toast.js +19 -6
- package/dist/components/ui/toast/toast.js.map +1 -1
- package/dist/lib/cn-tables.generated.js +10 -10
- package/dist/lib/cn-tables.generated.js.map +1 -1
- package/dist/r/chart.json +5 -0
- package/dist/r/registry.json +5 -0
- package/dist/r/src/components/layout/orbit-layout/orbit-layout.tsx +5 -1
- package/dist/r/src/components/layout/side-rail/side-rail.tsx +29 -16
- package/dist/r/src/components/layout/sidebar-nav/sidebar-nav.tsx +2 -2
- package/dist/r/src/components/motion/presence.tsx +17 -7
- package/dist/r/src/components/theme/theme-picker.tsx +5 -1
- package/dist/r/src/components/theme/theme-provider.tsx +19 -9
- package/dist/r/src/components/ui/aspect-ratio/aspect-ratio.tsx +14 -3
- package/dist/r/src/components/ui/calendar/calendar.tsx +6 -1
- package/dist/r/src/components/ui/card/card.tsx +2 -2
- package/dist/r/src/components/ui/chart/chart-options.ts +196 -0
- package/dist/r/src/components/ui/chart/chart.tsx +149 -101
- package/dist/r/src/components/ui/context-menu/context-menu.tsx +8 -0
- package/dist/r/src/components/ui/drawer/drawer.tsx +8 -1
- package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx +8 -0
- package/dist/r/src/components/ui/input-otp/input-otp.tsx +14 -2
- package/dist/r/src/components/ui/menubar/menubar.tsx +8 -0
- package/dist/r/src/components/ui/navigation-menu/navigation-menu.tsx +42 -28
- package/dist/r/src/components/ui/pagination/pagination.tsx +8 -1
- package/dist/r/src/components/ui/resizable/resizable.tsx +46 -8
- package/dist/r/src/components/ui/toast/toast.tsx +21 -6
- package/dist/r/src/lib/cn-tables.generated.ts +10 -10
- package/dist/r/src/styles/base.css +4 -1
- package/dist/r/src/styles/theme.css +23 -43
- package/package.json +1 -1
- package/registry.json +5 -0
- package/src/components/layout/orbit-layout/orbit-layout.tsx +5 -1
- package/src/components/layout/side-rail/side-rail.tsx +29 -16
- package/src/components/layout/sidebar-nav/sidebar-nav.tsx +2 -2
- package/src/components/motion/presence.tsx +17 -7
- package/src/components/theme/theme-picker.tsx +5 -1
- package/src/components/theme/theme-provider.tsx +19 -9
- package/src/components/ui/aspect-ratio/aspect-ratio.tsx +14 -3
- package/src/components/ui/calendar/calendar.tsx +6 -1
- package/src/components/ui/card/card.tsx +2 -2
- package/src/components/ui/chart/chart-options.ts +196 -0
- package/src/components/ui/chart/chart.tsx +149 -101
- package/src/components/ui/context-menu/context-menu.tsx +8 -0
- package/src/components/ui/drawer/drawer.tsx +8 -1
- package/src/components/ui/dropdown-menu/dropdown-menu.tsx +8 -0
- package/src/components/ui/input-otp/input-otp.tsx +14 -2
- package/src/components/ui/menubar/menubar.tsx +8 -0
- package/src/components/ui/navigation-menu/navigation-menu.tsx +42 -28
- package/src/components/ui/pagination/pagination.tsx +8 -1
- package/src/components/ui/resizable/resizable.tsx +46 -8
- package/src/components/ui/toast/toast.tsx +21 -6
- package/src/lib/cn-tables.generated.ts +10 -10
- package/src/styles/base.css +4 -1
- package/src/styles/theme.css +23 -43
|
@@ -85,6 +85,14 @@ function ContextMenuRadioItem(props) {
|
|
|
85
85
|
})];
|
|
86
86
|
} }));
|
|
87
87
|
}
|
|
88
|
+
/**
|
|
89
|
+
* The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
|
|
90
|
+
* child of the group it names: Kobalte reads the group from context, so a label
|
|
91
|
+
* placed directly in the content throws `useMenuGroupContext must be used within
|
|
92
|
+
* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
|
|
93
|
+
* label and its items in a group anyway — the grouping is what a screen reader
|
|
94
|
+
* announces.
|
|
95
|
+
*/
|
|
88
96
|
function ContextMenuLabel(props) {
|
|
89
97
|
const [local, rest] = splitProps(props, ["class"]);
|
|
90
98
|
return createComponent(ContextMenu.GroupLabel, mergeProps({ get ["class"]() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.js","names":["ContextMenu","KobalteContextMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","cn","props","_$createComponent","ContextMenuTrigger","Trigger","ContextMenuContent","Content","local","rest","Portal","children","_$mergeProps","class","ContextMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_$memo","_el$","_tmpl$","_$insert","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioGroup","RadioGroup","ContextMenuRadioItem","RadioItem","ContextMenuLabel","GroupLabel","ContextMenuGroup","Group","ContextMenuSeparator","Separator","ContextMenuSub","Sub","ContextMenuSubTrigger","SubTrigger","ContextMenuSubContent","SubContent","ContextMenu","_$createComponent","KobalteContextMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n menuContentPadding,\n destructiveMenuItem,\n menuItem,\n menuLabel,\n menuSeparator,\n overlayMotion,\n overlaySurface,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * ContextMenu.\n *\n * The same actions as DropdownMenu, opened by right-click. The trigger is the\n * region the menu belongs to — a file row, a canvas, a code block — and the\n * menu opens at the pointer.\n *\n * The accessibility rule for this component is not about its own markup: a\n * context menu must never hold the *only* route to an action, because a\n * right-click is unavailable on touch and undiscoverable on a trackpad. Every\n * item here should also appear somewhere reachable, usually a DropdownMenu on\n * the same row.\n */\nexport function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {\n return <KobalteContextMenu {...props} />\n}\n\nexport function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {\n return <KobalteContextMenu.Trigger {...props} />\n}\n\nexport function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteContextMenu.Portal>\n <KobalteContextMenu.Content\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteContextMenu.Portal>\n )\n}\n\nexport function ContextMenuItem(\n props: ComponentProps<typeof KobalteContextMenu.Item> & {\n variant?: 'default' | 'destructive'\n shortcut?: string\n /**\n * The parseable chord behind `shortcut`, e.g. `Meta+C`. The drawn glyph is\n * `aria-hidden` — reading it out would pollute the item's accessible name —\n * so this is what assistive technology announces instead. Supply it\n * whenever `shortcut` is drawn.\n */\n keyshortcuts?: string\n }\n) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'variant',\n 'shortcut',\n 'keyshortcuts',\n 'children',\n ])\n\n return (\n <KobalteContextMenu.Item\n class={cn(\n menuItem,\n {\n [destructiveMenuItem]: local.variant === 'destructive',\n },\n local.class\n )}\n aria-keyshortcuts={local.keyshortcuts}\n {...rest}\n >\n {local.children}\n {local.shortcut ? (\n <span\n aria-hidden=\"true\"\n class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n >\n {local.shortcut}\n </span>\n ) : null}\n </KobalteContextMenu.Item>\n )\n}\n\nexport function ContextMenuCheckboxItem(\n props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>\n) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Check class=\"size-4\" />\n </KobalteContextMenu.ItemIndicator>\n </KobalteContextMenu.CheckboxItem>\n )\n}\n\nexport function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {\n return <KobalteContextMenu.RadioGroup {...props} />\n}\n\nexport function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Circle class=\"size-2 fill-current\" />\n </KobalteContextMenu.ItemIndicator>\n </KobalteContextMenu.RadioItem>\n )\n}\n\nexport function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {\n return <KobalteContextMenu.Group {...props} />\n}\n\nexport function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {\n return <KobalteContextMenu.Sub {...props} />\n}\n\nexport function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n {local.children}\n <ChevronRight class=\"ms-auto size-4\" />\n </KobalteContextMenu.SubTrigger>\n )\n}\n\nexport function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteContextMenu.Portal>\n <KobalteContextMenu.SubContent\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteContextMenu.Portal>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"context-menu.js","names":["ContextMenu","KobalteContextMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","cn","props","_$createComponent","ContextMenuTrigger","Trigger","ContextMenuContent","Content","local","rest","Portal","children","_$mergeProps","class","ContextMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_$memo","_el$","_tmpl$","_$insert","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioGroup","RadioGroup","ContextMenuRadioItem","RadioItem","ContextMenuLabel","GroupLabel","ContextMenuGroup","Group","ContextMenuSeparator","Separator","ContextMenuSub","Sub","ContextMenuSubTrigger","SubTrigger","ContextMenuSubContent","SubContent","ContextMenu","_$createComponent","KobalteContextMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n menuContentPadding,\n destructiveMenuItem,\n menuItem,\n menuLabel,\n menuSeparator,\n overlayMotion,\n overlaySurface,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * ContextMenu.\n *\n * The same actions as DropdownMenu, opened by right-click. The trigger is the\n * region the menu belongs to — a file row, a canvas, a code block — and the\n * menu opens at the pointer.\n *\n * The accessibility rule for this component is not about its own markup: a\n * context menu must never hold the *only* route to an action, because a\n * right-click is unavailable on touch and undiscoverable on a trackpad. Every\n * item here should also appear somewhere reachable, usually a DropdownMenu on\n * the same row.\n */\nexport function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {\n return <KobalteContextMenu {...props} />\n}\n\nexport function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {\n return <KobalteContextMenu.Trigger {...props} />\n}\n\nexport function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteContextMenu.Portal>\n <KobalteContextMenu.Content\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteContextMenu.Portal>\n )\n}\n\nexport function ContextMenuItem(\n props: ComponentProps<typeof KobalteContextMenu.Item> & {\n variant?: 'default' | 'destructive'\n shortcut?: string\n /**\n * The parseable chord behind `shortcut`, e.g. `Meta+C`. The drawn glyph is\n * `aria-hidden` — reading it out would pollute the item's accessible name —\n * so this is what assistive technology announces instead. Supply it\n * whenever `shortcut` is drawn.\n */\n keyshortcuts?: string\n }\n) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'variant',\n 'shortcut',\n 'keyshortcuts',\n 'children',\n ])\n\n return (\n <KobalteContextMenu.Item\n class={cn(\n menuItem,\n {\n [destructiveMenuItem]: local.variant === 'destructive',\n },\n local.class\n )}\n aria-keyshortcuts={local.keyshortcuts}\n {...rest}\n >\n {local.children}\n {local.shortcut ? (\n <span\n aria-hidden=\"true\"\n class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n >\n {local.shortcut}\n </span>\n ) : null}\n </KobalteContextMenu.Item>\n )\n}\n\nexport function ContextMenuCheckboxItem(\n props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>\n) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Check class=\"size-4\" />\n </KobalteContextMenu.ItemIndicator>\n </KobalteContextMenu.CheckboxItem>\n )\n}\n\nexport function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {\n return <KobalteContextMenu.RadioGroup {...props} />\n}\n\nexport function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Circle class=\"size-2 fill-current\" />\n </KobalteContextMenu.ItemIndicator>\n </KobalteContextMenu.RadioItem>\n )\n}\n\n/**\n * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {\n return <KobalteContextMenu.Group {...props} />\n}\n\nexport function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {\n return <KobalteContextMenu.Sub {...props} />\n}\n\nexport function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n {local.children}\n <ChevronRight class=\"ms-auto size-4\" />\n </KobalteContextMenu.SubTrigger>\n )\n}\n\nexport function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteContextMenu.Portal>\n <KobalteContextMenu.SubContent\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteContextMenu.Portal>\n )\n}\n"],"mappings":"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"}
|
|
@@ -18,7 +18,14 @@ import type { ComponentProps } from 'solid-js';
|
|
|
18
18
|
export declare function Drawer(props: ComponentProps<typeof DrawerPrimitive>): import("solid-js").JSX.Element;
|
|
19
19
|
export declare function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>): import("solid-js").JSX.Element;
|
|
20
20
|
export declare function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>): import("solid-js").JSX.Element;
|
|
21
|
-
export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
|
|
21
|
+
export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {
|
|
22
|
+
/**
|
|
23
|
+
* Not accepted here. corvu reads the side from the root `Drawer`, which uses it
|
|
24
|
+
* for the drag axis and publishes it as `data-side`; a `side` on the content
|
|
25
|
+
* would type-check through the polymorphic props and be silently ignored,
|
|
26
|
+
* leaving the drawer on the bottom edge. Set `<Drawer side="right">` instead.
|
|
27
|
+
*/
|
|
28
|
+
side?: never;
|
|
22
29
|
/**
|
|
23
30
|
* Draw the grabber at the leading edge of the sheet.
|
|
24
31
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,kCAEnE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAElF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAalF;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,kCAEnE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAElF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAalF;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9F;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA8BtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAQ9E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,kCAQ1F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAGpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAStD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","names":["DrawerPrimitive","ComponentProps","splitProps","cn","Drawer","props","_$createComponent","DrawerTrigger","Trigger","DrawerOverlay","Overlay","local","rest","_$mergeProps","class","DrawerContentProps","Content","withHandle","DrawerContent","Portal","children","_$memo","_el$","_tmpl$","_$effect","_$className","DrawerTitle","Label","DrawerDescription","Description","DrawerCloseButton","Close","DrawerHeader","_el$2","_tmpl$2","_$spread","DrawerBody","_el$3","_tmpl$3","DrawerFooter","_el$4","_tmpl$4","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import DrawerPrimitive from '@corvu/drawer'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Drawer.\n *\n * A sheet the user can drag away: it opens from an edge, carries a handle, and\n * closes by swipe as well as by button. That drag affordance is the reason to\n * choose it over Sheet — the gesture is for content the user is *finishing*\n * with (a summary, a queue, a confirmation), not for browsing.\n *\n * On a large window a Drawer is usually the wrong control: dragging is a touch\n * idiom, and on a desktop the same content is better as a Sheet or a Dialog.\n * The exceptions are the surfaces a pointer also drags naturally — a bottom\n * console, a media panel.\n *\n * corvu supplies the drag physics, the snap points and the pointer capture.\n */\nexport function Drawer(props: ComponentProps<typeof DrawerPrimitive>) {\n return <DrawerPrimitive {...props} />\n}\n\nexport function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>) {\n return <DrawerPrimitive.Trigger {...props} />\n}\n\nexport function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <DrawerPrimitive.Overlay\n class={cn(\n 'fixed inset-0 z-(--z-drawer) bg-scrim/50',\n 'data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {\n /**\n * Draw the grabber at the leading edge of the sheet.\n *\n * It is an affordance, not the drag target: corvu makes the whole sheet\n * draggable, exactly as the platform's own sheets behave. So this is\n * `aria-hidden` decoration that tells the user the sheet can be pulled — it\n * carries no behaviour and must not be the only thing that moves.\n */\n withHandle?: boolean\n}\n\nexport function DrawerContent(props: DrawerContentProps) {\n const [local, rest] = splitProps(props, ['class', 'withHandle', 'children'])\n\n return (\n <DrawerPrimitive.Portal>\n <DrawerOverlay />\n <DrawerPrimitive.Content\n class={cn(\n 'group/drawer bg-popover text-popover-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',\n 'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:max-h-[85vh] data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t',\n 'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:max-h-[85vh] data-[side=top]:rounded-b-xl data-[side=top]:border-b',\n 'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:w-80 data-[side=left]:rounded-e-xl data-[side=left]:border-e',\n 'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:w-80 data-[side=right]:rounded-s-xl data-[side=right]:border-s',\n local.class\n )}\n {...rest}\n >\n {local.withHandle ? (\n <span\n aria-hidden=\"true\"\n class={cn(\n 'bg-muted shrink-0 self-center',\n 'group-data-[side=bottom]/drawer:mt-2 group-data-[side=bottom]/drawer:h-1.5 group-data-[side=bottom]/drawer:w-10 group-data-[side=bottom]/drawer:rounded-full'\n )}\n />\n ) : null}\n {local.children}\n </DrawerPrimitive.Content>\n </DrawerPrimitive.Portal>\n )\n}\n\nexport function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <DrawerPrimitive.Label\n class={cn('text-base leading-none font-semibold tracking-tight', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <DrawerPrimitive.Description\n class={cn('text-muted-foreground text-sm', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerCloseButton(props: ComponentProps<typeof DrawerPrimitive.Close>) {\n const [local, rest] = splitProps(props, ['class'])\n return <DrawerPrimitive.Close class={cn('focus-ring', local.class)} {...rest} />\n}\n\nexport function DrawerHeader(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"drawer-header\"\n class={cn('flex flex-col gap-1.5 p-5 pb-3 text-start', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerBody(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"drawer-body\"\n class={cn('min-h-0 flex-1 overflow-y-auto px-5 pb-4', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerFooter(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"drawer-footer\"\n class={cn('flex flex-col-reverse gap-2 p-5 pt-3 sm:flex-row sm:justify-end', local.class)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgBI,OAAOC,OAA+C;CACpE,OAAAC,gBAAQN,iBAAoBK,KAAK;AACnC;AAEA,SAAgBE,cAAcF,OAAuD;CACnF,OAAAC,gBAAQN,gBAAgBQ,SAAYH,KAAK;AAC3C;AAEA,SAAgBI,cAAcJ,OAAuD;CACnF,MAAM,CAACM,OAAOC,QAAQV,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAC,gBACGN,gBAAgBU,SAAOG,WAAA,EAAA,KAAA,WAAA;EAAA,OACfV,GACL,4CACA,mGACAQ,MAAMG,KACR;CAAC,EAAA,GACGF,IAAI,CAAA;AAGd;
|
|
1
|
+
{"version":3,"file":"drawer.js","names":["DrawerPrimitive","ComponentProps","splitProps","cn","Drawer","props","_$createComponent","DrawerTrigger","Trigger","DrawerOverlay","Overlay","local","rest","_$mergeProps","class","DrawerContentProps","Omit","Content","side","withHandle","DrawerContent","Portal","children","_$memo","_el$","_tmpl$","_$effect","_$className","DrawerTitle","Label","DrawerDescription","Description","DrawerCloseButton","Close","DrawerHeader","_el$2","_tmpl$2","_$spread","DrawerBody","_el$3","_tmpl$3","DrawerFooter","_el$4","_tmpl$4","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import DrawerPrimitive from '@corvu/drawer'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Drawer.\n *\n * A sheet the user can drag away: it opens from an edge, carries a handle, and\n * closes by swipe as well as by button. That drag affordance is the reason to\n * choose it over Sheet — the gesture is for content the user is *finishing*\n * with (a summary, a queue, a confirmation), not for browsing.\n *\n * On a large window a Drawer is usually the wrong control: dragging is a touch\n * idiom, and on a desktop the same content is better as a Sheet or a Dialog.\n * The exceptions are the surfaces a pointer also drags naturally — a bottom\n * console, a media panel.\n *\n * corvu supplies the drag physics, the snap points and the pointer capture.\n */\nexport function Drawer(props: ComponentProps<typeof DrawerPrimitive>) {\n return <DrawerPrimitive {...props} />\n}\n\nexport function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>) {\n return <DrawerPrimitive.Trigger {...props} />\n}\n\nexport function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <DrawerPrimitive.Overlay\n class={cn(\n 'fixed inset-0 z-(--z-drawer) bg-scrim/50',\n 'data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {\n /**\n * Not accepted here. corvu reads the side from the root `Drawer`, which uses it\n * for the drag axis and publishes it as `data-side`; a `side` on the content\n * would type-check through the polymorphic props and be silently ignored,\n * leaving the drawer on the bottom edge. Set `<Drawer side=\"right\">` instead.\n */\n side?: never\n /**\n * Draw the grabber at the leading edge of the sheet.\n *\n * It is an affordance, not the drag target: corvu makes the whole sheet\n * draggable, exactly as the platform's own sheets behave. So this is\n * `aria-hidden` decoration that tells the user the sheet can be pulled — it\n * carries no behaviour and must not be the only thing that moves.\n */\n withHandle?: boolean\n}\n\nexport function DrawerContent(props: DrawerContentProps) {\n const [local, rest] = splitProps(props, ['class', 'withHandle', 'children'])\n\n return (\n <DrawerPrimitive.Portal>\n <DrawerOverlay />\n <DrawerPrimitive.Content\n class={cn(\n 'group/drawer bg-popover text-popover-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',\n 'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:max-h-[85vh] data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t',\n 'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:max-h-[85vh] data-[side=top]:rounded-b-xl data-[side=top]:border-b',\n 'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:w-80 data-[side=left]:rounded-e-xl data-[side=left]:border-e',\n 'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:w-80 data-[side=right]:rounded-s-xl data-[side=right]:border-s',\n local.class\n )}\n {...rest}\n >\n {local.withHandle ? (\n <span\n aria-hidden=\"true\"\n class={cn(\n 'bg-muted shrink-0 self-center',\n 'group-data-[side=bottom]/drawer:mt-2 group-data-[side=bottom]/drawer:h-1.5 group-data-[side=bottom]/drawer:w-10 group-data-[side=bottom]/drawer:rounded-full'\n )}\n />\n ) : null}\n {local.children}\n </DrawerPrimitive.Content>\n </DrawerPrimitive.Portal>\n )\n}\n\nexport function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <DrawerPrimitive.Label\n class={cn('text-base leading-none font-semibold tracking-tight', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <DrawerPrimitive.Description\n class={cn('text-muted-foreground text-sm', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerCloseButton(props: ComponentProps<typeof DrawerPrimitive.Close>) {\n const [local, rest] = splitProps(props, ['class'])\n return <DrawerPrimitive.Close class={cn('focus-ring', local.class)} {...rest} />\n}\n\nexport function DrawerHeader(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"drawer-header\"\n class={cn('flex flex-col gap-1.5 p-5 pb-3 text-start', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerBody(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"drawer-body\"\n class={cn('min-h-0 flex-1 overflow-y-auto px-5 pb-4', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DrawerFooter(props: ComponentProps<'div'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <div\n data-slot=\"drawer-footer\"\n class={cn('flex flex-col-reverse gap-2 p-5 pt-3 sm:flex-row sm:justify-end', local.class)}\n {...rest}\n />\n )\n}\n"],"mappings":"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"}
|
|
@@ -56,6 +56,14 @@ export declare function DropdownMenuShortcut(props: ComponentProps<'span'>): imp
|
|
|
56
56
|
export declare function DropdownMenuCheckboxItem(props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>): import("solid-js").JSX.Element;
|
|
57
57
|
export declare function DropdownMenuRadioGroup(props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>): import("solid-js").JSX.Element;
|
|
58
58
|
export declare function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>): import("solid-js").JSX.Element;
|
|
59
|
+
/**
|
|
60
|
+
* The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
|
|
61
|
+
* child of the group it names: Kobalte reads the group from context, so a label
|
|
62
|
+
* placed directly in the content throws `useMenuGroupContext must be used within
|
|
63
|
+
* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
|
|
64
|
+
* label and its items in a group anyway — the grouping is what a screen reader
|
|
65
|
+
* announces.
|
|
66
|
+
*/
|
|
59
67
|
export declare function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>): import("solid-js").JSX.Element;
|
|
60
68
|
export declare function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>): import("solid-js").JSX.Element;
|
|
61
69
|
export declare function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>): import("solid-js").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,kCAG7E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,kCAE5F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,MAAM,CAAC,kCAE1F;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,GAAG;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAoBlE;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IACvD,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUjE;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,YAAY,CAAC,kCAe/D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAgBhG;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,kCAExF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAGhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG,CAAC,kCAEpF;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAU7D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAkB7D"}
|
|
1
|
+
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,kCAG7E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,kCAE5F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,MAAM,CAAC,kCAE1F;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,GAAG;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAoBlE;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IACvD,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUjE;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,YAAY,CAAC,kCAe/D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAgBhG;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,kCAExF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAGhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG,CAAC,kCAEpF;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAU7D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAkB7D"}
|
|
@@ -136,6 +136,14 @@ function DropdownMenuRadioItem(props) {
|
|
|
136
136
|
})];
|
|
137
137
|
} }));
|
|
138
138
|
}
|
|
139
|
+
/**
|
|
140
|
+
* The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
|
|
141
|
+
* child of the group it names: Kobalte reads the group from context, so a label
|
|
142
|
+
* placed directly in the content throws `useMenuGroupContext must be used within
|
|
143
|
+
* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
|
|
144
|
+
* label and its items in a group anyway — the grouping is what a screen reader
|
|
145
|
+
* announces.
|
|
146
|
+
*/
|
|
139
147
|
function DropdownMenuLabel(props) {
|
|
140
148
|
const [local, rest] = splitProps(props, ["class"]);
|
|
141
149
|
return createComponent(DropdownMenu.GroupLabel, mergeProps({ get ["class"]() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","KobalteDropdownMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","modal","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","portalMount","HTMLElement","DropdownMenuContent","mount","children","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","DropdownMenuShortcut","_el$2","_tmpl$2","_$spread","DropdownMenuCheckboxItem","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","DropdownMenuRadioItem","RadioItem","DropdownMenuLabel","GroupLabel","DropdownMenuGroup","Group","DropdownMenuSeparator","Separator","DropdownMenuSub","Sub","DropdownMenuSubTrigger","SubTrigger","DropdownMenuSubContent","SubContent","DropdownMenu","_$createComponent","KobalteDropdownMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n menuContentPadding,\n destructiveMenuItem,\n menuItem,\n menuLabel,\n menuSeparator,\n overlayMotion,\n overlaySurface,\n popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * DropdownMenu.\n *\n * A list of actions on a trigger, with radio groups for persistent choices\n * that fit naturally in a compact menu. Use Select for form inputs whose\n * selected value needs the field-style control, and Popover for arbitrary\n * content.\n *\n * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving\n * highlight, Escape to close and return focus — which is exactly what a\n * hand-rolled `div` with click handlers gets wrong.\n * Menus are nonmodal by default so their generated focus guards do not become\n * invalid direct children of the ARIA menu. Set `modal` explicitly when the\n * surrounding interaction needs modal containment.\n *\n * The `destructive` variant marks the row with a status-coloured edge and\n * highlighted tint while keeping its label on the body foreground. Pairing it\n * with an AlertDialog is the caller's job.\n */\nexport function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {\n const [local, rest] = splitProps(props, ['modal'])\n return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />\n}\n\nexport function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {\n return <KobalteDropdownMenu.Trigger {...props} />\n}\n\nexport function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {\n return <KobalteDropdownMenu.Portal {...props} />\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {\n hideArrow?: boolean\n /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */\n portalMount?: HTMLElement\n}\n\nexport function DropdownMenuContent(props: DropdownMenuContentProps) {\n const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children', 'portalMount'])\n\n return (\n <KobalteDropdownMenu.Portal mount={local.portalMount}>\n <KobalteDropdownMenu.Content\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n >\n {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden=\"true\" class={popoverArrow} />}\n {local.children}\n </KobalteDropdownMenu.Content>\n </KobalteDropdownMenu.Portal>\n )\n}\n\nexport function DropdownMenuItem(\n props: ComponentProps<typeof KobalteDropdownMenu.Item> & {\n /** Colour the row as a destructive action. Confirm it separately. */\n variant?: 'default' | 'destructive'\n /** Draw a shortcut hint at the trailing edge of the row. */\n shortcut?: string\n /**\n * The parseable chord behind `shortcut`, e.g. `Meta+E`. The drawn glyph is\n * `aria-hidden` — reading it out would pollute the item's accessible name —\n * so this is what assistive technology announces instead. Supply it\n * whenever `shortcut` is drawn.\n */\n keyshortcuts?: string\n }\n) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'variant',\n 'shortcut',\n 'keyshortcuts',\n 'children',\n ])\n\n return (\n <KobalteDropdownMenu.Item\n class={cn(\n menuItem,\n {\n [destructiveMenuItem]: local.variant === 'destructive',\n },\n local.class\n )}\n aria-keyshortcuts={local.keyshortcuts}\n {...rest}\n >\n {local.children}\n {local.shortcut ? (\n <span\n aria-hidden=\"true\"\n class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n >\n {local.shortcut}\n </span>\n ) : null}\n </KobalteDropdownMenu.Item>\n )\n}\n\n/**\n * The chord drawn at a row's trailing edge.\n *\n * A component as well as the `shortcut` prop on an item, because a caller composing\n * a row by hand needs the same treatment — and because the alternative is every\n * caller inventing the same mono-and-dimmed span.\n *\n * The glyphs are decorative: the span is `aria-hidden` and the parseable chord\n * belongs in the row's `aria-keyshortcuts`, so the item's accessible name stays\n * exactly its label.\n */\nexport function DropdownMenuShortcut(props: ComponentProps<'span'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n aria-hidden=\"true\"\n class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DropdownMenuCheckboxItem(\n props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>\n) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteDropdownMenu.ItemIndicator\n data-slot=\"dropdown-menu-indicator\"\n class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n >\n <Check class=\"size-4\" />\n </KobalteDropdownMenu.ItemIndicator>\n </KobalteDropdownMenu.CheckboxItem>\n )\n}\n\nexport function DropdownMenuRadioGroup(\n props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>\n) {\n return <KobalteDropdownMenu.RadioGroup {...props} />\n}\n\nexport function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n {/* The indicator reads in the accent, like every other selected state in\n the system — a canvas-colored dot on a checked row reads as decoration. */}\n <KobalteDropdownMenu.ItemIndicator\n data-slot=\"dropdown-menu-indicator\"\n class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n >\n <Circle class=\"size-2 fill-current\" />\n </KobalteDropdownMenu.ItemIndicator>\n </KobalteDropdownMenu.RadioItem>\n )\n}\n\nexport function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {\n return <KobalteDropdownMenu.Group {...props} />\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {\n return <KobalteDropdownMenu.Sub {...props} />\n}\n\nexport function DropdownMenuSubTrigger(\n props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>\n) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n {local.children}\n <ChevronRight class=\"ms-auto size-4\" />\n </KobalteDropdownMenu.SubTrigger>\n )\n}\n\nexport function DropdownMenuSubContent(\n props: ComponentProps<typeof KobalteDropdownMenu.SubContent>\n) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteDropdownMenu.Portal>\n <KobalteDropdownMenu.SubContent\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteDropdownMenu.Portal>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","KobalteDropdownMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","modal","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","portalMount","HTMLElement","DropdownMenuContent","mount","children","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","DropdownMenuShortcut","_el$2","_tmpl$2","_$spread","DropdownMenuCheckboxItem","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","DropdownMenuRadioItem","RadioItem","DropdownMenuLabel","GroupLabel","DropdownMenuGroup","Group","DropdownMenuSeparator","Separator","DropdownMenuSub","Sub","DropdownMenuSubTrigger","SubTrigger","DropdownMenuSubContent","SubContent","DropdownMenu","_$createComponent","KobalteDropdownMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n menuContentPadding,\n destructiveMenuItem,\n menuItem,\n menuLabel,\n menuSeparator,\n overlayMotion,\n overlaySurface,\n popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * DropdownMenu.\n *\n * A list of actions on a trigger, with radio groups for persistent choices\n * that fit naturally in a compact menu. Use Select for form inputs whose\n * selected value needs the field-style control, and Popover for arbitrary\n * content.\n *\n * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving\n * highlight, Escape to close and return focus — which is exactly what a\n * hand-rolled `div` with click handlers gets wrong.\n * Menus are nonmodal by default so their generated focus guards do not become\n * invalid direct children of the ARIA menu. Set `modal` explicitly when the\n * surrounding interaction needs modal containment.\n *\n * The `destructive` variant marks the row with a status-coloured edge and\n * highlighted tint while keeping its label on the body foreground. Pairing it\n * with an AlertDialog is the caller's job.\n */\nexport function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {\n const [local, rest] = splitProps(props, ['modal'])\n return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />\n}\n\nexport function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {\n return <KobalteDropdownMenu.Trigger {...props} />\n}\n\nexport function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {\n return <KobalteDropdownMenu.Portal {...props} />\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {\n hideArrow?: boolean\n /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */\n portalMount?: HTMLElement\n}\n\nexport function DropdownMenuContent(props: DropdownMenuContentProps) {\n const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children', 'portalMount'])\n\n return (\n <KobalteDropdownMenu.Portal mount={local.portalMount}>\n <KobalteDropdownMenu.Content\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n >\n {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden=\"true\" class={popoverArrow} />}\n {local.children}\n </KobalteDropdownMenu.Content>\n </KobalteDropdownMenu.Portal>\n )\n}\n\nexport function DropdownMenuItem(\n props: ComponentProps<typeof KobalteDropdownMenu.Item> & {\n /** Colour the row as a destructive action. Confirm it separately. */\n variant?: 'default' | 'destructive'\n /** Draw a shortcut hint at the trailing edge of the row. */\n shortcut?: string\n /**\n * The parseable chord behind `shortcut`, e.g. `Meta+E`. The drawn glyph is\n * `aria-hidden` — reading it out would pollute the item's accessible name —\n * so this is what assistive technology announces instead. Supply it\n * whenever `shortcut` is drawn.\n */\n keyshortcuts?: string\n }\n) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'variant',\n 'shortcut',\n 'keyshortcuts',\n 'children',\n ])\n\n return (\n <KobalteDropdownMenu.Item\n class={cn(\n menuItem,\n {\n [destructiveMenuItem]: local.variant === 'destructive',\n },\n local.class\n )}\n aria-keyshortcuts={local.keyshortcuts}\n {...rest}\n >\n {local.children}\n {local.shortcut ? (\n <span\n aria-hidden=\"true\"\n class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n >\n {local.shortcut}\n </span>\n ) : null}\n </KobalteDropdownMenu.Item>\n )\n}\n\n/**\n * The chord drawn at a row's trailing edge.\n *\n * A component as well as the `shortcut` prop on an item, because a caller composing\n * a row by hand needs the same treatment — and because the alternative is every\n * caller inventing the same mono-and-dimmed span.\n *\n * The glyphs are decorative: the span is `aria-hidden` and the parseable chord\n * belongs in the row's `aria-keyshortcuts`, so the item's accessible name stays\n * exactly its label.\n */\nexport function DropdownMenuShortcut(props: ComponentProps<'span'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n aria-hidden=\"true\"\n class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}\n {...rest}\n />\n )\n}\n\nexport function DropdownMenuCheckboxItem(\n props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>\n) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteDropdownMenu.ItemIndicator\n data-slot=\"dropdown-menu-indicator\"\n class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n >\n <Check class=\"size-4\" />\n </KobalteDropdownMenu.ItemIndicator>\n </KobalteDropdownMenu.CheckboxItem>\n )\n}\n\nexport function DropdownMenuRadioGroup(\n props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>\n) {\n return <KobalteDropdownMenu.RadioGroup {...props} />\n}\n\nexport function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n {/* The indicator reads in the accent, like every other selected state in\n the system — a canvas-colored dot on a checked row reads as decoration. */}\n <KobalteDropdownMenu.ItemIndicator\n data-slot=\"dropdown-menu-indicator\"\n class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n >\n <Circle class=\"size-2 fill-current\" />\n </KobalteDropdownMenu.ItemIndicator>\n </KobalteDropdownMenu.RadioItem>\n )\n}\n\n/**\n * The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {\n return <KobalteDropdownMenu.Group {...props} />\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {\n return <KobalteDropdownMenu.Sub {...props} />\n}\n\nexport function DropdownMenuSubTrigger(\n props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>\n) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n {local.children}\n <ChevronRight class=\"ms-auto size-4\" />\n </KobalteDropdownMenu.SubTrigger>\n )\n}\n\nexport function DropdownMenuSubContent(\n props: ComponentProps<typeof KobalteDropdownMenu.SubContent>\n) {\n const [local, rest] = splitProps(props, ['class'])\n\n return (\n <KobalteDropdownMenu.Portal>\n <KobalteDropdownMenu.SubContent\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteDropdownMenu.Portal>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;GAaG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG;IAC/E,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC3B,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;GAaG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG;IAC/E,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC3B,CAAA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAsE5C;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAS1D"}
|
|
@@ -21,7 +21,7 @@ function InputOtp(props) {
|
|
|
21
21
|
return length();
|
|
22
22
|
},
|
|
23
23
|
get ["class"]() {
|
|
24
|
-
return cn("flex items-center gap-2", local.class);
|
|
24
|
+
return cn("flex items-center gap-2", "overflow-hidden p-1", local.class);
|
|
25
25
|
}
|
|
26
26
|
}, rest, { children: (field) => [createComponent(OtpField.Input, {
|
|
27
27
|
get ["aria-label"]() {
|
|
@@ -51,7 +51,7 @@ function InputOtp(props) {
|
|
|
51
51
|
var _el$3 = _tmpl$3();
|
|
52
52
|
insert(_el$3, () => field.value[slot] ?? "");
|
|
53
53
|
effect((_p$) => {
|
|
54
|
-
var _v$ = cn("border-input bg-transparent flex size-10 items-center justify-center rounded-md border text-sm font-medium", "transition-[color,box-shadow,border-color] ease-out", "data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-primary-subtle", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"), _v$2 = field.activeSlots.includes(slot), _v$3 = props.disabled;
|
|
54
|
+
var _v$ = cn("border-input bg-transparent flex size-10 items-center justify-center rounded-md border text-sm font-medium", "transition-[color,box-shadow,border-color] ease-out", "data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-primary-subtle", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"), _v$2 = field.activeSlots.includes(slot), _v$3 = props.disabled ? "" : void 0;
|
|
55
55
|
_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
|
|
56
56
|
_v$2 !== _p$.t && setAttribute(_el$3, "data-active", _p$.t = _v$2);
|
|
57
57
|
_v$3 !== _p$.a && setAttribute(_el$3, "data-disabled", _p$.a = _v$3);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-otp.js","names":["OtpField","ComponentProps","For","Show","splitProps","cn","InputOtpProps","Omit","length","groups","InputOtp","props","local","rest","_$createComponent","_$mergeProps","maxLength","class","children","field","Input","aria-label","each","size","groupIndex","when","_tmpl$","_el$2","_tmpl$2","_$insert","Array","from","_","index","offset","slice","reduce","total","run","slot","_el$3","_tmpl$3","value","_$effect","_p$","_v$","_v$2","activeSlots","includes","_v$3","disabled","e","_$className","t","_$setAttribute","a","
|
|
1
|
+
{"version":3,"file":"input-otp.js","names":["OtpField","ComponentProps","For","Show","splitProps","cn","InputOtpProps","Omit","length","groups","InputOtp","props","local","rest","_$createComponent","_$mergeProps","maxLength","class","children","field","Input","aria-label","each","size","groupIndex","when","_tmpl$","_el$2","_tmpl$2","_$insert","Array","from","_","index","offset","slice","reduce","total","run","slot","_el$3","_tmpl$3","value","_$effect","_p$","_v$","_v$2","activeSlots","includes","_v$3","disabled","undefined","e","_$className","t","_$setAttribute","a","InputOtpCaret","_el$4","_tmpl$4","_$spread","_$createComponent","_$mergeProps","_$className","_$setAttribute"],"sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"sourcesContent":["import OtpField from '@corvu/otp-field'\nimport type { ComponentProps } from 'solid-js'\nimport { For, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * InputOtp.\n *\n * A one-time code, entered into separate boxes. The boxes are the *paint*: the\n * value lives in a single real input, so paste works, autofill works, and a\n * password manager sees one field rather than six.\n *\n * That split is the whole reason to use a component rather than six inputs. Six\n * inputs cannot be pasted into, cannot be autofilled, and announce as six unrelated\n * fields — every one of which is a defect a user hits on the first try.\n *\n * corvu supplies the value handling, the caret movement, the paste split and the\n * keyboard behaviour.\n */\n/**\n * `maxLength` is omitted rather than exposed: corvu requires it, and a caller who\n * has to set both it and `length` will eventually set them to different numbers.\n * `length` is the one input and it drives the other.\n */\nexport type InputOtpProps = Omit<ComponentProps<typeof OtpField>, 'maxLength'> & {\n /** How many characters. */\n length?: number\n /** Group the boxes into runs, e.g. `[3, 3]` for a six-character code. */\n groups?: readonly number[]\n}\n\nexport function InputOtp(props: InputOtpProps) {\n const [local, rest] = splitProps(props, ['class', 'length', 'groups', 'children'])\n\n const length = () => local.length ?? 6\n const groups = () => local.groups ?? [length()]\n\n return (\n <OtpField\n maxLength={length()}\n class={cn(\n 'flex items-center gap-2',\n // corvu positions the field itself, but its hidden input is 40px wider\n // than the field so a password manager's badge lands outside the boxes\n // (`shiftPWManagers`). `clip-path` only hides that overhang; it still\n // counts as overflow, and a full-width field scrolled the page sideways.\n // `overflow-hidden` contains it, and `p-1` keeps the edge boxes' focus\n // ring (`ring-3`) inside the clip.\n 'overflow-hidden p-1',\n local.class\n )}\n {...rest}\n children={(field) => (\n <>\n <OtpField.Input\n aria-label={props['aria-label'] ?? 'One-time code'}\n class=\"absolute inset-0 opacity-0\"\n />\n <For each={groups()}>\n {(size, groupIndex) => (\n <>\n <Show when={groupIndex() > 0}>\n <span aria-hidden=\"true\" class=\"text-muted-foreground px-1\">\n –\n </span>\n </Show>\n <span class=\"flex items-center gap-1.5\">\n <For each={Array.from({ length: size })}>\n {(_, index) => {\n // The slot's index across the whole field, so the boxes after a\n // group boundary continue counting rather than restarting.\n const offset = groups()\n .slice(0, groupIndex())\n .reduce((total, run) => total + run, 0)\n const slot = offset + index()\n return (\n <span\n class={cn(\n 'border-input bg-transparent flex size-10 items-center justify-center rounded-md border text-sm font-medium',\n 'transition-[color,box-shadow,border-color] ease-out',\n 'data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-primary-subtle',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'\n )}\n data-active={field.activeSlots.includes(slot)}\n // Present-or-absent, never `\"false\"`: `data-[disabled]`\n // matches any value, so `disabled={false}` dimmed the boxes.\n data-disabled={props.disabled ? '' : undefined}\n >\n {field.value[slot] ?? ''}\n </span>\n )\n }}\n </For>\n </span>\n </>\n )}\n </For>\n </>\n )}\n />\n )\n}\n\n/**\n * A caret drawn inside the active box.\n *\n * Exported for a caller building its own slot: the box above renders the character\n * directly, and a blinking caret is the alternative when the field should look\n * empty until something is typed.\n */\nexport function InputOtpCaret(props: ComponentProps<'span'>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <span\n aria-hidden=\"true\"\n class={cn('animate-caret bg-foreground inline-block h-4 w-px', local.class)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;;;AA+BA,SAAgBU,SAASC,OAAsB;CAC7C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EAAC;EAAS;EAAU;EAAU;CAAU,CAAC;CAEjF,MAAMH,eAAeI,MAAMJ,UAAU;CACrC,MAAMC,eAAeG,MAAMH,UAAU,CAACD,OAAO,CAAC;CAE9C,OAAAM,gBACGd,UAAQe,WAAA;EAAA,IACPC,YAAS;GAAA,OAAER,OAAO;EAAC;EAAA,KAAA,WAAA;GAAA,OACZH,GACL,2BAOA,uBACAO,MAAMK,KACR;EAAC;CAAA,GACGJ,MAAI,EACRK,WAAWC,UAAK,CAAAL,gBAEXd,SAASoB,OAAK;EAAA,KAAA,gBAAA;GAAA,OACDT,MAAM,iBAAiB;EAAe;EAAA,SAAA;CAAA,CAAA,GAAAG,gBAGnDZ,KAAG;EAAA,IAACoB,OAAI;GAAA,OAAEb,OAAO;EAAC;EAAAS,WACfK,MAAMC,eAAU,CAAAV,gBAEbX,MAAI;GAAA,IAACsB,OAAI;IAAA,OAAED,WAAW,IAAI;GAAC;GAAA,IAAAN,WAAA;IAAA,OAAAQ,OAAA;GAAA;EAAA,CAAA,UAAA;GAAA,IAAAC,QAAAC,QAAA;GAAAC,OAAAF,OAAAb,gBAMzBZ,KAAG;IAAA,IAACoB,OAAI;KAAA,OAAEQ,MAAMC,KAAK,EAAEvB,QAAQe,KAAK,CAAC;IAAC;IAAAL,WACnCc,GAAGC,UAAU;KAMb,MAAMM,OAHS9B,OAAO,CAAC,CACpB0B,MAAM,GAAGX,WAAW,CAAC,CAAC,CACtBY,QAAQC,OAAOC,QAAQD,QAAQC,KAAK,CAC1BJ,IAASD,MAAM;KAC5B,cAAA;MAAA,IAAAO,QAAAC,QAAA;MAAAZ,OAAAW,aAaKrB,MAAMuB,MAAMH,SAAS,EAAE;MAAAI,QAAAC,QAAA;OAAA,IAAAC,MAXjBxC,GACL,8GACA,uDACA,mGACA,+DACF,GAACyC,OACY3B,MAAM4B,YAAYC,SAAST,IAAI,GAACU,OAG9BtC,MAAMuC,WAAW,KAAKC,KAAAA;OAASN,QAAAD,IAAAQ,KAAAC,UAAAb,OAAAI,IAAAQ,IAAAP,GAAA;OAAAC,SAAAF,IAAAU,KAAAC,aAAAf,OAAA,eAAAI,IAAAU,IAAAR,IAAA;OAAAG,SAAAL,IAAAY,KAAAD,aAAAf,OAAA,iBAAAI,IAAAY,IAAAP,IAAA;OAAA,OAAAL;MAAA,GAAA;OAAAQ,GAAAD,KAAAA;OAAAG,GAAAH,KAAAA;OAAAK,GAAAL,KAAAA;MAAA,CAAA;MAAA,OAAAX;KAAA,EAAA,CAAA;IAKpD;GAAC,CAAA,CAAA;GAAA,OAAAb;EAAA,EAAA,CAAA,CAAA;CAIR,CAAA,CAAA,EAGN,CAAA,CAAA;AAGP;;;;;;;;AASA,SAAgB8B,cAAc9C,OAA+B;CAC3D,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA+C,QAAAC,QAAA;EAAAC,OAAAF,OAAA3C,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWV,GAAG,qDAAqDO,MAAMK,KAAK;EAAC,EAAA,GACvEJ,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA6C;CAAA,EAAA,CAAA;AAGd"}
|
|
@@ -36,6 +36,14 @@ export declare function MenubarItem(props: ComponentProps<typeof KobalteMenubar.
|
|
|
36
36
|
export declare function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>): import("solid-js").JSX.Element;
|
|
37
37
|
export declare function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>): import("solid-js").JSX.Element;
|
|
38
38
|
export declare function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>): import("solid-js").JSX.Element;
|
|
39
|
+
/**
|
|
40
|
+
* The caption of a `MenubarGroup`, and that group's accessible name. It must be a
|
|
41
|
+
* child of the group it names: Kobalte reads the group from context, so a label
|
|
42
|
+
* placed directly in the content throws `useMenuGroupContext must be used within
|
|
43
|
+
* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
|
|
44
|
+
* label and its items in a group anyway — the grouping is what a screen reader
|
|
45
|
+
* announces.
|
|
46
|
+
*/
|
|
39
47
|
export declare function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>): import("solid-js").JSX.Element;
|
|
40
48
|
export declare function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>): import("solid-js").JSX.Element;
|
|
41
49
|
export declare function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>): import("solid-js").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAmBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAgCF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAU5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAUtF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAgBxF"}
|
|
1
|
+
{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAmBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAgCF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAU5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAUtF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAgBxF"}
|
|
@@ -104,6 +104,14 @@ function MenubarRadioItem(props) {
|
|
|
104
104
|
})];
|
|
105
105
|
} }));
|
|
106
106
|
}
|
|
107
|
+
/**
|
|
108
|
+
* The caption of a `MenubarGroup`, and that group's accessible name. It must be a
|
|
109
|
+
* child of the group it names: Kobalte reads the group from context, so a label
|
|
110
|
+
* placed directly in the content throws `useMenuGroupContext must be used within
|
|
111
|
+
* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
|
|
112
|
+
* label and its items in a group anyway — the grouping is what a screen reader
|
|
113
|
+
* announces.
|
|
114
|
+
*/
|
|
107
115
|
function MenubarLabel(props) {
|
|
108
116
|
const [local, rest] = splitProps(props, ["class"]);
|
|
109
117
|
return createComponent(Menubar.GroupLabel, mergeProps({ get ["class"]() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n menuContentPadding,\n destructiveMenuItem,\n menuItem,\n menuLabel,\n menuSeparator,\n overlayMotion,\n overlaySurface,\n popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteMenubar\n class={cn(\n 'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n local.class\n )}\n {...rest}\n />\n )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteMenubar.Trigger\n class={cn(\n 'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n 'transition-colors ease-out outline-none',\n 'data-[expanded]:bg-surface-active',\n 'data-[highlighted]:bg-surface-hover',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.Portal>\n <KobalteMenubar.Content\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n >\n <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n {local.children}\n </KobalteMenubar.Content>\n </KobalteMenubar.Portal>\n )\n}\n\nexport function MenubarItem(\n props: ComponentProps<typeof KobalteMenubar.Item> & {\n variant?: 'default' | 'destructive'\n shortcut?: string\n /**\n * The parseable chord behind `shortcut`, e.g. `Meta+N`. The drawn glyph is\n * `aria-hidden` — reading it out would pollute the item's accessible name —\n * so this is what assistive technology announces instead. Supply it\n * whenever `shortcut` is drawn.\n */\n keyshortcuts?: string\n }\n) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'variant',\n 'shortcut',\n 'keyshortcuts',\n 'children',\n ])\n return (\n <KobalteMenubar.Item\n class={cn(\n menuItem,\n {\n [destructiveMenuItem]: local.variant === 'destructive',\n },\n local.class\n )}\n aria-keyshortcuts={local.keyshortcuts}\n {...rest}\n >\n {local.children}\n {local.shortcut ? (\n <span\n aria-hidden=\"true\"\n class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n >\n {local.shortcut}\n </span>\n ) : null}\n </KobalteMenubar.Item>\n )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Check class=\"size-4\" />\n </KobalteMenubar.ItemIndicator>\n </KobalteMenubar.CheckboxItem>\n )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Circle class=\"size-2 fill-current\" />\n </KobalteMenubar.ItemIndicator>\n </KobalteMenubar.RadioItem>\n )\n}\n\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n {local.children}\n <ChevronRight class=\"ms-auto size-4\" />\n </KobalteMenubar.SubTrigger>\n )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteMenubar.Portal>\n <KobalteMenubar.SubContent\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteMenubar.Portal>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n menuContentPadding,\n destructiveMenuItem,\n menuItem,\n menuLabel,\n menuSeparator,\n overlayMotion,\n overlaySurface,\n popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteMenubar\n class={cn(\n 'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n local.class\n )}\n {...rest}\n />\n )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteMenubar.Trigger\n class={cn(\n 'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n 'transition-colors ease-out outline-none',\n 'data-[expanded]:bg-surface-active',\n 'data-[highlighted]:bg-surface-hover',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n local.class\n )}\n {...rest}\n />\n )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.Portal>\n <KobalteMenubar.Content\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n >\n <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n {local.children}\n </KobalteMenubar.Content>\n </KobalteMenubar.Portal>\n )\n}\n\nexport function MenubarItem(\n props: ComponentProps<typeof KobalteMenubar.Item> & {\n variant?: 'default' | 'destructive'\n shortcut?: string\n /**\n * The parseable chord behind `shortcut`, e.g. `Meta+N`. The drawn glyph is\n * `aria-hidden` — reading it out would pollute the item's accessible name —\n * so this is what assistive technology announces instead. Supply it\n * whenever `shortcut` is drawn.\n */\n keyshortcuts?: string\n }\n) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'variant',\n 'shortcut',\n 'keyshortcuts',\n 'children',\n ])\n return (\n <KobalteMenubar.Item\n class={cn(\n menuItem,\n {\n [destructiveMenuItem]: local.variant === 'destructive',\n },\n local.class\n )}\n aria-keyshortcuts={local.keyshortcuts}\n {...rest}\n >\n {local.children}\n {local.shortcut ? (\n <span\n aria-hidden=\"true\"\n class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n >\n {local.shortcut}\n </span>\n ) : null}\n </KobalteMenubar.Item>\n )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Check class=\"size-4\" />\n </KobalteMenubar.ItemIndicator>\n </KobalteMenubar.CheckboxItem>\n )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n {local.children}\n <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n <Circle class=\"size-2 fill-current\" />\n </KobalteMenubar.ItemIndicator>\n </KobalteMenubar.RadioItem>\n )\n}\n\n/**\n * The caption of a `MenubarGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n return (\n <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n {local.children}\n <ChevronRight class=\"ms-auto size-4\" />\n </KobalteMenubar.SubTrigger>\n )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteMenubar.Portal>\n <KobalteMenubar.SubContent\n class={cn(\n overlaySurface,\n overlayMotion,\n 'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n menuContentPadding,\n local.class\n )}\n {...rest}\n />\n </KobalteMenubar.Portal>\n )\n}\n"],"mappings":"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"}
|
|
@@ -37,9 +37,15 @@ import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu';
|
|
|
37
37
|
* - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
|
|
38
38
|
* of the menus** — not inside them. All the panels share one viewport, which is
|
|
39
39
|
* what lets the bar animate between them instead of each panel popping in place.
|
|
40
|
+
* - The viewport is an empty surface. Each `Content` reaches it through Kobalte's
|
|
41
|
+
* `Portal`, which mounts the panel inside the viewport while keeping it in its
|
|
42
|
+
* own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own
|
|
43
|
+
* children included — has no `Menu` above it, and Kobalte throws
|
|
44
|
+
* `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.
|
|
40
45
|
*
|
|
41
|
-
* The wrapper enforces the last
|
|
42
|
-
*
|
|
46
|
+
* The wrapper enforces the last two by rendering the `Viewport` itself and by
|
|
47
|
+
* portalling every `NavigationMenuContent`, so a caller cannot forget either and
|
|
48
|
+
* get a menu whose panels never appear.
|
|
43
49
|
*/
|
|
44
50
|
export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
|
|
45
51
|
/** The accessible name for the navigation landmark. */
|
|
@@ -56,6 +62,12 @@ export declare function NavigationMenuContent(props: ComponentProps<typeof Kobal
|
|
|
56
62
|
/**
|
|
57
63
|
* The shared panel surface. One per menu bar, and the wrapper supplies it — but
|
|
58
64
|
* exported so a caller with an unusual layout can place it themselves.
|
|
65
|
+
*
|
|
66
|
+
* It renders no children: the panels arrive through each `NavigationMenuContent`'s
|
|
67
|
+
* portal. Kobalte positions it under the bar and publishes the active panel's size
|
|
68
|
+
* as `--kb-navigation-menu-viewport-*`, which the surface animates between.
|
|
69
|
+
* `box-content` keeps the border outside that measured size so a panel is never
|
|
70
|
+
* clipped by its own frame.
|
|
59
71
|
*/
|
|
60
72
|
export declare function NavigationMenuViewport(props: ComponentProps<typeof KobalteNavigationMenu.Viewport>): JSX.Element;
|
|
61
73
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AACpE,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAKtE
|
|
1
|
+
{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AACpE,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAKtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACpF,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsBxD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,eAE1F;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eAuBhG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eA4BhG;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,QAAQ,CAAC,eAiB7D;AAED;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACxF,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAoBhE;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,eAS9D;AAED,wDAAwD;AACxD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,eAa/D;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,eAG5F"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { cn } from "../../../lib/utils.js";
|
|
2
2
|
import { menuItem, overlayMotion, overlaySurface } from "../../../lib/overlay.js";
|
|
3
|
-
import {
|
|
3
|
+
import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
|
|
4
4
|
import { ChevronDown } from "lucide-solid";
|
|
5
5
|
import { splitProps } from "solid-js";
|
|
6
6
|
import * as KobalteNavigationMenu from "@kobalte/core/navigation-menu";
|
|
7
7
|
//#region src/components/ui/navigation-menu/navigation-menu.tsx
|
|
8
|
-
var _tmpl$ = /*#__PURE__*/ template(`<
|
|
9
|
-
var _tmpl$2 = /*#__PURE__*/ template(`<span class=
|
|
10
|
-
var _tmpl$3 = /*#__PURE__*/ template(`<span class="col-start-2 text-xs text-muted-foreground">`);
|
|
8
|
+
var _tmpl$ = /*#__PURE__*/ template(`<span class=font-medium>`);
|
|
9
|
+
var _tmpl$2 = /*#__PURE__*/ template(`<span class="col-start-2 text-xs text-muted-foreground">`);
|
|
11
10
|
function NavigationMenu(props) {
|
|
12
11
|
const [local, rest] = splitProps(props, [
|
|
13
12
|
"label",
|
|
@@ -45,26 +44,32 @@ function NavigationMenuTrigger(props) {
|
|
|
45
44
|
}
|
|
46
45
|
function NavigationMenuContent(props) {
|
|
47
46
|
const [local, rest] = splitProps(props, ["class", "children"]);
|
|
48
|
-
return createComponent(KobalteNavigationMenu.
|
|
49
|
-
return
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
return createComponent(KobalteNavigationMenu.Portal, { get children() {
|
|
48
|
+
return createComponent(KobalteNavigationMenu.Content, mergeProps({ get ["class"]() {
|
|
49
|
+
return cn("absolute top-0 left-0 grid w-max gap-1 p-2 outline-none", overlayMotion, "data-[wide]:grid-cols-2", local.class);
|
|
50
|
+
} }, rest, { get children() {
|
|
51
|
+
return local.children;
|
|
52
|
+
} }));
|
|
53
|
+
} });
|
|
53
54
|
}
|
|
54
55
|
/**
|
|
55
56
|
* The shared panel surface. One per menu bar, and the wrapper supplies it — but
|
|
56
57
|
* exported so a caller with an unusual layout can place it themselves.
|
|
58
|
+
*
|
|
59
|
+
* It renders no children: the panels arrive through each `NavigationMenuContent`'s
|
|
60
|
+
* portal. Kobalte positions it under the bar and publishes the active panel's size
|
|
61
|
+
* as `--kb-navigation-menu-viewport-*`, which the surface animates between.
|
|
62
|
+
* `box-content` keeps the border outside that measured size so a panel is never
|
|
63
|
+
* clipped by its own frame.
|
|
57
64
|
*/
|
|
58
65
|
function NavigationMenuViewport(props) {
|
|
59
66
|
const [local, rest] = splitProps(props, ["class"]);
|
|
60
|
-
return createComponent(KobalteNavigationMenu.Viewport, mergeProps({
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
return _el$;
|
|
67
|
-
} }));
|
|
67
|
+
return createComponent(KobalteNavigationMenu.Viewport, mergeProps({
|
|
68
|
+
"data-slot": "navigation-menu-viewport",
|
|
69
|
+
get ["class"]() {
|
|
70
|
+
return cn(overlaySurface, "isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden", "h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)", "origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out", local.class);
|
|
71
|
+
}
|
|
72
|
+
}, rest));
|
|
68
73
|
}
|
|
69
74
|
function NavigationMenuItem(props) {
|
|
70
75
|
const [local, rest] = splitProps(props, [
|
|
@@ -79,14 +84,14 @@ function NavigationMenuItem(props) {
|
|
|
79
84
|
return [
|
|
80
85
|
memo(() => local.icon),
|
|
81
86
|
(() => {
|
|
82
|
-
var _el$
|
|
83
|
-
insert(_el
|
|
84
|
-
return _el
|
|
87
|
+
var _el$ = _tmpl$();
|
|
88
|
+
insert(_el$, () => local.children);
|
|
89
|
+
return _el$;
|
|
85
90
|
})(),
|
|
86
91
|
memo(() => memo(() => !!local.description)() && (() => {
|
|
87
|
-
var _el$
|
|
88
|
-
insert(_el$
|
|
89
|
-
return _el$
|
|
92
|
+
var _el$2 = _tmpl$2();
|
|
93
|
+
insert(_el$2, () => local.description);
|
|
94
|
+
return _el$2;
|
|
90
95
|
})())
|
|
91
96
|
];
|
|
92
97
|
} }));
|