@wheelhouse/ui 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion/accordion.js +2 -2
- package/dist/components/alert/alert.stories.js +4 -4
- package/dist/components/alert-dialog/alert-dialog.stories.js +2 -2
- package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +3 -4
- package/dist/components/calendar/calendar.d.ts +34 -0
- package/dist/components/calendar/calendar.d.ts.map +1 -0
- package/dist/components/calendar/calendar.js +82 -0
- package/dist/components/calendar/calendar.stories.d.ts +16 -0
- package/dist/components/calendar/calendar.stories.d.ts.map +1 -0
- package/dist/components/calendar/calendar.stories.js +33 -0
- package/dist/components/calendar/index.d.ts +3 -0
- package/dist/components/calendar/index.d.ts.map +1 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/checkbox/checkbox.js +2 -2
- package/dist/components/collapsible/collapsible.stories.js +4 -4
- package/dist/components/combobox/combobox.d.ts.map +1 -1
- package/dist/components/combobox/combobox.js +5 -7
- package/dist/components/command/command.d.ts.map +1 -1
- package/dist/components/command/command.js +3 -4
- package/dist/components/context-menu/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu/context-menu.js +4 -5
- package/dist/components/date-selector/date-selector-context.d.ts +6 -0
- package/dist/components/date-selector/date-selector-context.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-context.js +11 -0
- package/dist/components/date-selector/date-selector-parts.d.ts +68 -0
- package/dist/components/date-selector/date-selector-parts.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-parts.js +131 -0
- package/dist/components/date-selector/date-selector-types.d.ts +118 -0
- package/dist/components/date-selector/date-selector-types.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-types.js +32 -0
- package/dist/components/date-selector/date-selector-value.d.ts +47 -0
- package/dist/components/date-selector/date-selector-value.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-value.js +183 -0
- package/dist/components/date-selector/date-selector.d.ts +6 -0
- package/dist/components/date-selector/date-selector.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector.js +144 -0
- package/dist/components/date-selector/date-selector.stories.d.ts +135 -0
- package/dist/components/date-selector/date-selector.stories.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector.stories.js +144 -0
- package/dist/components/date-selector/index.d.ts +7 -0
- package/dist/components/date-selector/index.d.ts.map +1 -0
- package/dist/components/date-selector/index.js +5 -0
- package/dist/components/date-selector/use-date-selector.d.ts +50 -0
- package/dist/components/date-selector/use-date-selector.d.ts.map +1 -0
- package/dist/components/date-selector/use-date-selector.js +305 -0
- package/dist/components/dialog/dialog.js +2 -2
- package/dist/components/dropdown-menu/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +5 -6
- package/dist/components/empty/empty.stories.js +2 -2
- package/dist/components/filters/filters.js +4 -4
- package/dist/components/filters/filters.stories.js +3 -3
- package/dist/components/index.d.ts +5 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +5 -0
- package/dist/components/input-group/input-group.stories.js +3 -3
- package/dist/components/item/item.stories.d.ts.map +1 -1
- package/dist/components/item/item.stories.js +5 -6
- package/dist/components/kbd/kbd.stories.js +2 -2
- package/dist/components/menubar/menubar.js +3 -3
- package/dist/components/native-select/native-select.js +2 -2
- package/dist/components/navigation-menu/navigation-menu.js +2 -2
- package/dist/components/navigation-pattern-1/index.d.ts +3 -0
- package/dist/components/navigation-pattern-1/index.d.ts.map +1 -0
- package/dist/components/navigation-pattern-1/index.js +1 -0
- package/dist/components/navigation-pattern-1/pattern-1.config.d.ts +47 -0
- package/dist/components/navigation-pattern-1/pattern-1.config.d.ts.map +1 -0
- package/dist/components/navigation-pattern-1/pattern-1.config.js +55 -0
- package/dist/components/navigation-pattern-1/pattern-1.d.ts +7 -0
- package/dist/components/navigation-pattern-1/pattern-1.d.ts.map +1 -0
- package/dist/components/navigation-pattern-1/pattern-1.js +83 -0
- package/dist/components/navigation-pattern-1/pattern-1.stories.d.ts +16 -0
- package/dist/components/navigation-pattern-1/pattern-1.stories.d.ts.map +1 -0
- package/dist/components/navigation-pattern-1/pattern-1.stories.js +20 -0
- package/dist/components/pagination/pagination.js +4 -4
- package/dist/components/select/select.js +5 -5
- package/dist/components/sheet/sheet.js +2 -2
- package/dist/components/sonner/sonner.d.ts +1 -1
- package/dist/components/sonner/sonner.js +7 -7
- package/dist/components/sortable/index.d.ts +3 -0
- package/dist/components/sortable/index.d.ts.map +1 -0
- package/dist/components/sortable/index.js +1 -0
- package/dist/components/sortable/sortable.d.ts +94 -0
- package/dist/components/sortable/sortable.d.ts.map +1 -0
- package/dist/components/sortable/sortable.js +210 -0
- package/dist/components/sortable/sortable.stories.d.ts +14 -0
- package/dist/components/sortable/sortable.stories.d.ts.map +1 -0
- package/dist/components/sortable/sortable.stories.js +38 -0
- package/dist/components/spinner/spinner.d.ts +3 -3
- package/dist/components/spinner/spinner.d.ts.map +1 -1
- package/dist/components/spinner/spinner.js +2 -2
- package/dist/components/status-indicator/index.d.ts +3 -0
- package/dist/components/status-indicator/index.d.ts.map +1 -0
- package/dist/components/status-indicator/index.js +1 -0
- package/dist/components/status-indicator/status-indicator.d.ts +51 -0
- package/dist/components/status-indicator/status-indicator.d.ts.map +1 -0
- package/dist/components/status-indicator/status-indicator.js +48 -0
- package/dist/components/status-indicator/status-indicator.stories.d.ts +20 -0
- package/dist/components/status-indicator/status-indicator.stories.d.ts.map +1 -0
- package/dist/components/status-indicator/status-indicator.stories.js +97 -0
- package/dist/components/text/text.js +1 -1
- package/dist/hooks/use-mobile.d.ts +2 -0
- package/dist/hooks/use-mobile.d.ts.map +1 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/llms.txt +4 -4
- package/package.json +7 -4
- package/src/styles/globals.css +4 -12
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
|
-
import {
|
|
5
|
+
import { ChevronDown, ChevronUp } from 'lucide-react';
|
|
6
6
|
function Accordion({ className, ...props }) {
|
|
7
7
|
return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn('flex w-full flex-col', className), ...props });
|
|
8
8
|
}
|
|
@@ -10,7 +10,7 @@ function AccordionItem({ className, ...props }) {
|
|
|
10
10
|
return _jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('not-last:border-b', className), ...props });
|
|
11
11
|
}
|
|
12
12
|
function AccordionTrigger({ className, children, ...props }) {
|
|
13
|
-
return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground', className), ...props, children: [children, _jsx(
|
|
13
|
+
return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground', className), ...props, children: [children, _jsx(ChevronDown, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), _jsx(ChevronUp, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
|
|
14
14
|
}
|
|
15
15
|
function AccordionContent({ className, children, ...props }) {
|
|
16
16
|
return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: _jsx("div", { className: cn('h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4', className), children: children }) }));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
|
|
3
3
|
import { Button } from '../button';
|
|
4
|
-
import {
|
|
4
|
+
import { AlertTriangle, Info } from 'lucide-react';
|
|
5
5
|
const meta = {
|
|
6
6
|
title: 'UI/Alert',
|
|
7
7
|
component: Alert,
|
|
@@ -22,13 +22,13 @@ export const Gallery = {
|
|
|
22
22
|
layout: 'padded',
|
|
23
23
|
controls: { disable: true },
|
|
24
24
|
},
|
|
25
|
-
render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,42rem)] flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Heads up!" }), _jsx(AlertDescription, { children: "You can add components to your app using the CLI." })] }), _jsxs(Alert, { children: [_jsx(
|
|
25
|
+
render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,42rem)] flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Heads up!" }), _jsx(AlertDescription, { children: "You can add components to your app using the CLI." })] }), _jsxs(Alert, { children: [_jsx(Info, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Destructive" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangle, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With Action" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangle, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Payment failed" }), _jsx(AlertDescription, { children: "We could not process your payment. Please update your billing details." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Fix now" }) })] })] })] })] })),
|
|
26
26
|
};
|
|
27
27
|
export const WithIcon = {
|
|
28
|
-
render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(
|
|
28
|
+
render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(Info, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Information" }), _jsx(AlertDescription, { children: "Your subscription renews on the 1st of next month." })] })),
|
|
29
29
|
};
|
|
30
30
|
export const Destructive = {
|
|
31
|
-
render: (args) => (_jsxs(Alert, { ...args, variant: "destructive", children: [_jsx(
|
|
31
|
+
render: (args) => (_jsxs(Alert, { ...args, variant: "destructive", children: [_jsx(AlertTriangle, { "aria-hidden": "true" }), _jsx(AlertTitle, { children: "Something went wrong" }), _jsx(AlertDescription, { children: "Your session has expired. Please sign in again to continue." })] })),
|
|
32
32
|
};
|
|
33
33
|
export const WithAction = {
|
|
34
34
|
render: (args) => (_jsxs(Alert, { ...args, children: [_jsx(AlertTitle, { children: "Update available" }), _jsx(AlertDescription, { children: "A new version of the application is ready to install." }), _jsx(AlertAction, { children: _jsx(Button, { size: "xs", variant: "outline", children: "Update" }) })] })),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { AlertCircle } from 'lucide-react';
|
|
3
3
|
import { Button } from '../button';
|
|
4
4
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
|
|
5
5
|
const meta = {
|
|
@@ -15,7 +15,7 @@ export const Default = {
|
|
|
15
15
|
render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Delete item" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete this item?" }), _jsx(AlertDialogDescription, { children: "This action cannot be undone. The item will be removed permanently." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] })] })),
|
|
16
16
|
};
|
|
17
17
|
export const WithMedia = {
|
|
18
|
-
render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Unsaved changes" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogMedia, { children: _jsx(
|
|
18
|
+
render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Unsaved changes" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogMedia, { children: _jsx(AlertCircle, { "aria-hidden": true }) }), _jsx(AlertDialogTitle, { children: "Discard changes?" }), _jsx(AlertDialogDescription, { children: "You have unsaved edits. If you leave now, they will be lost." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Discard" })] })] })] })),
|
|
19
19
|
};
|
|
20
20
|
export const SizeSm = {
|
|
21
21
|
render: () => (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Compact layout" }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign out?" }), _jsx(AlertDialogDescription, { children: "You will need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { children: "Sign out" })] })] })] })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC7D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC/D,uCAAuC;AACvC,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAClE,sCAAsC;AACtC,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEvE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAcrF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAMzF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAahF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -4,8 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { mergeProps } from '@base-ui/react/merge-props';
|
|
5
5
|
import { useRender } from '@base-ui/react/use-render';
|
|
6
6
|
import { cn } from '../../lib/utils';
|
|
7
|
-
import {
|
|
8
|
-
import { DotsThreeIcon } from '@phosphor-icons/react/DotsThree';
|
|
7
|
+
import { ChevronRight, MoreHorizontal } from 'lucide-react';
|
|
9
8
|
function Breadcrumb({ className, ...props }) {
|
|
10
9
|
return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props });
|
|
11
10
|
}
|
|
@@ -31,9 +30,9 @@ function BreadcrumbPage({ className, ...props }) {
|
|
|
31
30
|
return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('font-normal text-foreground', className), ...props }));
|
|
32
31
|
}
|
|
33
32
|
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
34
|
-
return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(
|
|
33
|
+
return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
|
|
35
34
|
}
|
|
36
35
|
function BreadcrumbEllipsis({ className, ...props }) {
|
|
37
|
-
return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-5 items-center justify-center [&>svg]:size-4', className), ...props, children: [_jsx(
|
|
36
|
+
return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-5 items-center justify-center [&>svg]:size-4', className), ...props, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
|
|
38
37
|
}
|
|
39
38
|
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type DayButton, DayPicker, type Locale } from 'react-day-picker';
|
|
3
|
+
import { Button } from '../button';
|
|
4
|
+
/**
|
|
5
|
+
* Props for {@link Calendar}. Includes all [react-day-picker `DayPicker` props](https://daypicker.dev/api/interfaces/DayPickerProps)
|
|
6
|
+
* plus Wheelhouse styling options.
|
|
7
|
+
*/
|
|
8
|
+
export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
|
|
9
|
+
/**
|
|
10
|
+
* Visual variant for the previous/next month controls; matches {@link Button} `variant` values.
|
|
11
|
+
* @default "ghost"
|
|
12
|
+
*/
|
|
13
|
+
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Month grid for picking dates, ranges, or multiple days. Wraps [react-day-picker](https://react-day-picker.js.org/) `DayPicker`
|
|
17
|
+
* with design-token class names, Lucide chevrons, and {@link Button}-based day cells (`data-slot="calendar"` on the root).
|
|
18
|
+
*/
|
|
19
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
/**
|
|
21
|
+
* Props for {@link CalendarDayButton}. Mirrors the `DayButton` component from react-day-picker with an optional `locale`
|
|
22
|
+
* for `data-day` formatting.
|
|
23
|
+
*/
|
|
24
|
+
export type CalendarDayButtonProps = React.ComponentProps<typeof DayButton> & {
|
|
25
|
+
/** Passed from the parent `DayPicker` for locale-aware day labels. */
|
|
26
|
+
locale?: Partial<Locale>;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Individual day cell button used inside {@link Calendar}. Focus management for keyboard navigation is handled here.
|
|
30
|
+
* Override via `components.DayButton` on {@link Calendar} only when you need custom day rendering.
|
|
31
|
+
*/
|
|
32
|
+
declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: CalendarDayButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export { Calendar, CalendarDayButton };
|
|
34
|
+
//# sourceMappingURL=calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAE,SAAS,EAAwB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGhG,OAAO,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AAGnD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACjE;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAClE,CAAC;AAEF;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,aAAa,2CAqGf;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1E,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAyBjG;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { DayPicker, getDefaultClassNames } from 'react-day-picker';
|
|
5
|
+
import { cn } from '../../lib/utils';
|
|
6
|
+
import { Button, buttonVariants } from '../button';
|
|
7
|
+
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
8
|
+
/**
|
|
9
|
+
* Month grid for picking dates, ranges, or multiple days. Wraps [react-day-picker](https://react-day-picker.js.org/) `DayPicker`
|
|
10
|
+
* with design-token class names, Lucide chevrons, and {@link Button}-based day cells (`data-slot="calendar"` on the root).
|
|
11
|
+
*/
|
|
12
|
+
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', locale, formatters, components, ...props }) {
|
|
13
|
+
const defaultClassNames = getDefaultClassNames();
|
|
14
|
+
return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
|
|
15
|
+
formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
|
|
16
|
+
...formatters,
|
|
17
|
+
}, classNames: {
|
|
18
|
+
root: cn('w-fit', defaultClassNames.root),
|
|
19
|
+
months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
|
|
20
|
+
month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
|
|
21
|
+
nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
|
|
22
|
+
button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_previous),
|
|
23
|
+
button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) p-0 select-none aria-disabled:opacity-50', defaultClassNames.button_next),
|
|
24
|
+
month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),
|
|
25
|
+
dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),
|
|
26
|
+
dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),
|
|
27
|
+
dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
|
|
28
|
+
caption_label: cn('font-medium select-none', captionLayout === 'label'
|
|
29
|
+
? 'text-sm'
|
|
30
|
+
: 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground', defaultClassNames.caption_label),
|
|
31
|
+
/** RDP v9: the day grid `<table>` uses the `month_grid` class key (not `table`). */
|
|
32
|
+
month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
|
|
33
|
+
weekdays: cn('flex', defaultClassNames.weekdays),
|
|
34
|
+
weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),
|
|
35
|
+
week: cn('mt-2 flex w-full', defaultClassNames.week),
|
|
36
|
+
week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
|
|
37
|
+
week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
|
|
38
|
+
day: cn('group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)', props.showWeekNumber
|
|
39
|
+
? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
|
|
40
|
+
: '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)', defaultClassNames.day),
|
|
41
|
+
range_start: cn('relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted', defaultClassNames.range_start),
|
|
42
|
+
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
|
43
|
+
range_end: cn('relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted', defaultClassNames.range_end),
|
|
44
|
+
today: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),
|
|
45
|
+
outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
|
|
46
|
+
disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
|
|
47
|
+
hidden: cn('invisible', defaultClassNames.hidden),
|
|
48
|
+
...classNames,
|
|
49
|
+
}, components: {
|
|
50
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
51
|
+
return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
|
|
52
|
+
},
|
|
53
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
54
|
+
if (orientation === 'left') {
|
|
55
|
+
return _jsx(ChevronLeft, { className: cn('size-4', className), ...props });
|
|
56
|
+
}
|
|
57
|
+
if (orientation === 'right') {
|
|
58
|
+
return _jsx(ChevronRight, { className: cn('size-4', className), ...props });
|
|
59
|
+
}
|
|
60
|
+
return _jsx(ChevronDown, { className: cn('size-4', className), ...props });
|
|
61
|
+
},
|
|
62
|
+
DayButton: ({ ...props }) => _jsx(CalendarDayButton, { locale: locale, ...props }),
|
|
63
|
+
WeekNumber: ({ children, ...props }) => {
|
|
64
|
+
return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
|
|
65
|
+
},
|
|
66
|
+
...components,
|
|
67
|
+
}, ...props }));
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Individual day cell button used inside {@link Calendar}. Focus management for keyboard navigation is handled here.
|
|
71
|
+
* Override via `components.DayButton` on {@link Calendar} only when you need custom day rendering.
|
|
72
|
+
*/
|
|
73
|
+
function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
|
|
74
|
+
const defaultClassNames = getDefaultClassNames();
|
|
75
|
+
const ref = React.useRef(null);
|
|
76
|
+
React.useEffect(() => {
|
|
77
|
+
if (modifiers.focused)
|
|
78
|
+
ref.current?.focus();
|
|
79
|
+
}, [modifiers.focused]);
|
|
80
|
+
return (_jsx(Button, { variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
|
|
81
|
+
}
|
|
82
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Calendar } from '.';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Calendar;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Single: Story;
|
|
14
|
+
export declare const Range: Story;
|
|
15
|
+
export declare const DropdownCaption: Story;
|
|
16
|
+
//# sourceMappingURL=calendar.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Calendar } from '.';
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'UI/Calendar',
|
|
6
|
+
component: Calendar,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export const Single = {
|
|
14
|
+
render: function SingleCalendar() {
|
|
15
|
+
const [selected, setSelected] = useState(new Date(2026, 3, 13));
|
|
16
|
+
return _jsx(Calendar, { mode: "single", selected: selected, onSelect: setSelected, defaultMonth: selected, className: "rounded-md border" });
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
export const Range = {
|
|
20
|
+
render: function RangeCalendar() {
|
|
21
|
+
const [range, setRange] = useState({
|
|
22
|
+
from: new Date(2026, 3, 10),
|
|
23
|
+
to: new Date(2026, 3, 18),
|
|
24
|
+
});
|
|
25
|
+
return _jsx(Calendar, { mode: "range", selected: range, onSelect: setRange, defaultMonth: range?.from, numberOfMonths: 2, className: "rounded-md border" });
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
export const DropdownCaption = {
|
|
29
|
+
render: function DropdownCaptionCalendar() {
|
|
30
|
+
const [selected, setSelected] = useState(new Date(2026, 3, 13));
|
|
31
|
+
return (_jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: selected, onSelect: setSelected, defaultMonth: selected, fromYear: 2020, toYear: 2030, className: "rounded-md border" }));
|
|
32
|
+
},
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Calendar, CalendarDayButton } from './calendar';
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
|
-
import {
|
|
5
|
+
import { Check } from 'lucide-react';
|
|
6
6
|
function Checkbox({ className, ...props }) {
|
|
7
|
-
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(
|
|
7
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(Check, {}) }) }));
|
|
8
8
|
}
|
|
9
9
|
export { Checkbox };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { ChevronDown } from 'lucide-react';
|
|
3
3
|
import { Button } from '../button';
|
|
4
4
|
import { Text } from '../text';
|
|
5
5
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.';
|
|
@@ -13,12 +13,12 @@ const meta = {
|
|
|
13
13
|
};
|
|
14
14
|
export default meta;
|
|
15
15
|
export const Default = {
|
|
16
|
-
render: () => (_jsxs(Collapsible, { className: "flex w-72 flex-col gap-2", children: [_jsx(CollapsibleTrigger, { render: _jsxs(Button, { variant: "outline", className: "group flex w-full items-center justify-between gap-2", children: [_jsx("span", { children: "Advanced options" }), _jsx(
|
|
16
|
+
render: () => (_jsxs(Collapsible, { className: "flex w-72 flex-col gap-2", children: [_jsx(CollapsibleTrigger, { render: _jsxs(Button, { variant: "outline", className: "group flex w-full items-center justify-between gap-2", children: [_jsx("span", { children: "Advanced options" }), _jsx(ChevronDown, { className: "size-4 shrink-0 transition-transform group-data-[panel-open]:rotate-180" })] }) }), _jsx(CollapsibleContent, { className: "flex flex-col gap-2 rounded-md border bg-card p-3 text-card-foreground shadow-xs", children: _jsx(Text, { size: "sm", tone: "muted", children: "Extra settings and details appear here when expanded." }) })] })),
|
|
17
17
|
};
|
|
18
18
|
export const OpenByDefault = {
|
|
19
|
-
render: () => (_jsxs(Collapsible, { defaultOpen: true, className: "flex w-72 flex-col gap-2", children: [_jsx(CollapsibleTrigger, { render: _jsxs(Button, { variant: "ghost", className: "group w-full justify-between px-2", children: [_jsx("span", { children: "Details" }), _jsx(
|
|
19
|
+
render: () => (_jsxs(Collapsible, { defaultOpen: true, className: "flex w-72 flex-col gap-2", children: [_jsx(CollapsibleTrigger, { render: _jsxs(Button, { variant: "ghost", className: "group w-full justify-between px-2", children: [_jsx("span", { children: "Details" }), _jsx(ChevronDown, { className: "size-4 transition-transform group-data-[panel-open]:rotate-180" })] }) }), _jsx(CollapsibleContent, { className: "rounded-md border border-dashed p-3", children: _jsx(Text, { size: "sm", children: "This block starts expanded." }) })] })),
|
|
20
20
|
};
|
|
21
21
|
export const Gallery = {
|
|
22
22
|
parameters: { layout: 'padded' },
|
|
23
|
-
render: () => (_jsx("div", { className: "flex max-w-md flex-col gap-6", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Bordered card" }), _jsxs(Collapsible, { defaultOpen: true, className: "rounded-lg border bg-card text-card-foreground shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx(Text, { weight: "medium", children: "Shipping address" }), _jsx(CollapsibleTrigger, { className: "group inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Toggle shipping section", children: _jsx(
|
|
23
|
+
render: () => (_jsx("div", { className: "flex max-w-md flex-col gap-6", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Bordered card" }), _jsxs(Collapsible, { defaultOpen: true, className: "rounded-lg border bg-card text-card-foreground shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsx(Text, { weight: "medium", children: "Shipping address" }), _jsx(CollapsibleTrigger, { className: "group inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Toggle shipping section", children: _jsx(ChevronDown, { className: "size-4 transition-transform group-data-[panel-open]:rotate-180" }) })] }), _jsx(CollapsibleContent, { className: "px-3 py-3", children: _jsx(Text, { size: "sm", tone: "muted", children: "742 Evergreen Terrace, Springfield." }) })] })] }) })),
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,9 +5,7 @@ import { Combobox as ComboboxPrimitive } from '@base-ui/react';
|
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
6
|
import { Button } from '../button';
|
|
7
7
|
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../input-group';
|
|
8
|
-
import {
|
|
9
|
-
import { CheckIcon } from '@phosphor-icons/react/Check';
|
|
10
|
-
import { XIcon } from '@phosphor-icons/react/X';
|
|
8
|
+
import { Check, ChevronDown, X } from 'lucide-react';
|
|
11
9
|
/**
|
|
12
10
|
* Root for a combobox. Provide `items` and compose with input, popup, list, and items.
|
|
13
11
|
*/
|
|
@@ -18,10 +16,10 @@ function ComboboxValue({ ...props }) {
|
|
|
18
16
|
return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
|
|
19
17
|
}
|
|
20
18
|
function ComboboxTrigger({ className, children, ...props }) {
|
|
21
|
-
return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(
|
|
19
|
+
return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDown, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
|
|
22
20
|
}
|
|
23
21
|
function ComboboxClear({ className, ...props }) {
|
|
24
|
-
return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(
|
|
22
|
+
return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(X, { className: "pointer-events-none" }) }));
|
|
25
23
|
}
|
|
26
24
|
function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
|
|
27
25
|
return (_jsxs(InputGroup, { className: cn('w-auto', className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
@@ -33,7 +31,7 @@ function ComboboxList({ className, ...props }) {
|
|
|
33
31
|
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0', className), ...props }));
|
|
34
32
|
}
|
|
35
33
|
function ComboboxItem({ className, children, ...props }) {
|
|
36
|
-
return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(
|
|
34
|
+
return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(Check, { className: "pointer-events-none" }) })] }));
|
|
37
35
|
}
|
|
38
36
|
function ComboboxGroup({ className, ...props }) {
|
|
39
37
|
return _jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props });
|
|
@@ -54,7 +52,7 @@ function ComboboxChips({ className, ...props }) {
|
|
|
54
52
|
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40', className), ...props }));
|
|
55
53
|
}
|
|
56
54
|
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
57
|
-
return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(
|
|
55
|
+
return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(X, { className: "pointer-events-none" }) }))] }));
|
|
58
56
|
}
|
|
59
57
|
function ComboboxChipsInput({ className, ...props }) {
|
|
60
58
|
return _jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn('min-w-16 flex-1 outline-none', className), ...props });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/command/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/command/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAInD,OAAO,EAAE,MAAM,EAA+D,MAAM,WAAW,CAAC;AAGhG,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEzE,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAQrD;AAED,qFAAqF;AACrF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,iBAAS,aAAa,CAAC,EACnB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACX,EAAE,kBAAkB,2CAYpB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAe/D;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAE/D;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;AAED,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAE5F,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAcvE;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEhE,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAQrE;AAED,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Command as CommandPrimitive } from 'cmdk';
|
|
5
|
-
import {
|
|
6
|
-
import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass';
|
|
5
|
+
import { Check, Search } from 'lucide-react';
|
|
7
6
|
import { cn } from '../../lib/utils';
|
|
8
7
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog';
|
|
9
8
|
import { InputGroup, InputGroupAddon } from '../input-group';
|
|
@@ -14,7 +13,7 @@ function CommandDialog({ title = 'Command Palette', description = 'Search for a
|
|
|
14
13
|
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className), showCloseButton: showCloseButton, children: children })] }));
|
|
15
14
|
}
|
|
16
15
|
function CommandInput({ className, ...props }) {
|
|
17
|
-
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), _jsx(InputGroupAddon, { children: _jsx(
|
|
16
|
+
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), _jsx(InputGroupAddon, { children: _jsx(Search, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
|
18
17
|
}
|
|
19
18
|
function CommandList({ className, ...props }) {
|
|
20
19
|
return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none', className), ...props }));
|
|
@@ -29,7 +28,7 @@ function CommandSeparator({ className, ...props }) {
|
|
|
29
28
|
return _jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('-mx-1 h-px bg-border', className), ...props });
|
|
30
29
|
}
|
|
31
30
|
function CommandItem({ className, children, ...props }) {
|
|
32
|
-
return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(
|
|
31
|
+
return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(Check, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
|
|
33
32
|
}
|
|
34
33
|
function CommandShortcut({ className, ...props }) {
|
|
35
34
|
return (_jsx("span", { "data-slot": "command-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground', className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,8 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
|
-
import {
|
|
7
|
-
import { CheckIcon } from '@phosphor-icons/react/dist/ssr/Check';
|
|
6
|
+
import { Check, ChevronRight } from 'lucide-react';
|
|
8
7
|
function ContextMenu({ ...props }) {
|
|
9
8
|
return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
|
|
10
9
|
}
|
|
@@ -30,19 +29,19 @@ function ContextMenuSub({ ...props }) {
|
|
|
30
29
|
return _jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props });
|
|
31
30
|
}
|
|
32
31
|
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
33
|
-
return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(
|
|
32
|
+
return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto" })] }));
|
|
34
33
|
}
|
|
35
34
|
function ContextMenuSubContent({ ...props }) {
|
|
36
35
|
return _jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", className: "shadow-lg", side: "right", ...props });
|
|
37
36
|
}
|
|
38
37
|
function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
39
|
-
return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(
|
|
38
|
+
return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
|
|
40
39
|
}
|
|
41
40
|
function ContextMenuRadioGroup({ ...props }) {
|
|
42
41
|
return _jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props });
|
|
43
42
|
}
|
|
44
43
|
function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
45
|
-
return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(
|
|
44
|
+
return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
|
|
46
45
|
}
|
|
47
46
|
function ContextMenuSeparator({ className, ...props }) {
|
|
48
47
|
return _jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { type DateSelectorContextValue } from './date-selector-types';
|
|
2
|
+
declare const DateSelectorContext: import("react").Context<DateSelectorContextValue>;
|
|
3
|
+
/** Reads {@link DateSelectorContextValue} from a parent {@link DateSelector}. */
|
|
4
|
+
export declare const useDateSelectorContext: () => DateSelectorContextValue;
|
|
5
|
+
export { DateSelectorContext };
|
|
6
|
+
//# sourceMappingURL=date-selector-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-selector-context.d.ts","sourceRoot":"","sources":["../../../src/components/date-selector/date-selector-context.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,wBAAwB,EAA8B,MAAM,uBAAuB,CAAC;AAElG,QAAA,MAAM,mBAAmB,mDAIvB,CAAC;AAEH,iFAAiF;AACjF,eAAO,MAAM,sBAAsB,gCAAwC,CAAC;AAE5E,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
|
+
import { DEFAULT_DATE_SELECTOR_I18N } from './date-selector-types';
|
|
4
|
+
const DateSelectorContext = createContext({
|
|
5
|
+
i18n: DEFAULT_DATE_SELECTOR_I18N,
|
|
6
|
+
variant: 'outline',
|
|
7
|
+
size: 'default',
|
|
8
|
+
});
|
|
9
|
+
/** Reads {@link DateSelectorContextValue} from a parent {@link DateSelector}. */
|
|
10
|
+
export const useDateSelectorContext = () => useContext(DateSelectorContext);
|
|
11
|
+
export { DateSelectorContext };
|