@epilot/spark-ui 0.23.0 → 0.23.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/attachment.d.cts +1 -1
- package/dist/components/attachment.d.ts +1 -1
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button.d.cts +2 -2
- package/dist/components/button.d.ts +2 -2
- package/dist/components/dialog.cjs +1 -1
- package/dist/components/dialog.cjs.map +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/input-date.cjs +4 -0
- package/dist/components/input-date.cjs.map +1 -1
- package/dist/components/input-date.js +4 -0
- package/dist/components/input-date.js.map +1 -1
- package/dist/components/line-chart.cjs +1 -1
- package/dist/components/line-chart.js +1 -1
- package/dist/components/marker.d.cts +1 -1
- package/dist/components/marker.d.ts +1 -1
- package/dist/components/popover.cjs +2 -1
- package/dist/components/popover.cjs.map +1 -1
- package/dist/components/popover.d.cts +2 -1
- package/dist/components/popover.d.ts +2 -1
- package/dist/components/popover.js +2 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/power-history-chart.cjs +1 -1
- package/dist/components/power-history-chart.js +1 -1
- package/dist/components/sheet.cjs +1 -1
- package/dist/components/sheet.cjs.map +1 -1
- package/dist/components/sheet.js +1 -1
- package/dist/components/sheet.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/attachment.d.ts
|
|
9
9
|
declare const attachmentVariants: (props?: ({
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "default" | "sm" | "xs" | null | undefined;
|
|
11
11
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
declare function Attachment({
|
|
@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/attachment.d.ts
|
|
9
9
|
declare const attachmentVariants: (props?: ({
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "default" | "sm" | "xs" | null | undefined;
|
|
11
11
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
declare function Attachment({
|
|
@@ -10,7 +10,7 @@ declare function BubbleGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const bubbleVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
13
|
+
variant?: "default" | "destructive" | "secondary" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -10,7 +10,7 @@ declare function BubbleGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const bubbleVariants: (props?: ({
|
|
13
|
-
variant?: "
|
|
13
|
+
variant?: "default" | "destructive" | "secondary" | "ghost" | "outline" | "muted" | "tinted" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -8,8 +8,8 @@ import { VariantProps } from "class-variance-authority";
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
10
|
variant?: "primary" | "destructive" | "secondary" | "tertiary" | "bare" | null | undefined;
|
|
11
|
-
color?: "
|
|
12
|
-
size?: "
|
|
11
|
+
color?: "accent" | "primary" | "neutral" | "danger" | "destructive" | null | undefined;
|
|
12
|
+
size?: "default" | "small" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */
|
|
15
15
|
type SparkButtonColor = 'primary' | 'accent' | 'neutral' | 'destructive' | 'danger';
|
|
@@ -8,8 +8,8 @@ import { VariantProps } from "class-variance-authority";
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
10
|
variant?: "primary" | "destructive" | "secondary" | "tertiary" | "bare" | null | undefined;
|
|
11
|
-
color?: "
|
|
12
|
-
size?: "
|
|
11
|
+
color?: "accent" | "primary" | "neutral" | "danger" | "destructive" | null | undefined;
|
|
12
|
+
size?: "default" | "small" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */
|
|
15
15
|
type SparkButtonColor = 'primary' | 'accent' | 'neutral' | 'destructive' | 'danger';
|
|
@@ -65,7 +65,7 @@ function DialogOverlay({ className, ...props }) {
|
|
|
65
65
|
function DialogContent({ className, ...props }) {
|
|
66
66
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
|
|
67
67
|
"data-slot": "dialog-content",
|
|
68
|
-
className: (0, cn.cn)("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-
|
|
68
|
+
className: (0, cn.cn)("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2", "data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0", className),
|
|
69
69
|
...props
|
|
70
70
|
});
|
|
71
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.cjs","names":["DialogPrimitive","buttonVariants","Close"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n const target = event?.target\n return (\n target instanceof HTMLElement &&\n (target.dataset.overlay === 'true' ||\n target.hasAttribute('data-base-ui-inert'))\n )\n}\n\nfunction Dialog({\n onOpenChange,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return (\n <DialogPrimitive.Root\n {...props}\n onOpenChange={(open, eventDetails) => {\n if (\n !open &&\n eventDetails.reason === 'outside-press' &&\n !isBackdropPress(eventDetails.event)\n ) {\n eventDetails.cancel()\n return\n }\n onOpenChange?.(open, eventDetails)\n }}\n />\n )\n}\n\nfunction DialogTrigger(\n props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n if (children || props.render) {\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={className}\n {...props}\n >\n {children}\n </DialogPrimitive.Close>\n )\n }\n\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </DialogPrimitive.Close>\n )\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n className,\n )}\n data-overlay=\"true\"\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n return (\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-
|
|
1
|
+
{"version":3,"file":"dialog.cjs","names":["DialogPrimitive","buttonVariants","Close"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n const target = event?.target\n return (\n target instanceof HTMLElement &&\n (target.dataset.overlay === 'true' ||\n target.hasAttribute('data-base-ui-inert'))\n )\n}\n\nfunction Dialog({\n onOpenChange,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return (\n <DialogPrimitive.Root\n {...props}\n onOpenChange={(open, eventDetails) => {\n if (\n !open &&\n eventDetails.reason === 'outside-press' &&\n !isBackdropPress(eventDetails.event)\n ) {\n eventDetails.cancel()\n return\n }\n onOpenChange?.(open, eventDetails)\n }}\n />\n )\n}\n\nfunction DialogTrigger(\n props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n if (children || props.render) {\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={className}\n {...props}\n >\n {children}\n </DialogPrimitive.Close>\n )\n }\n\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </DialogPrimitive.Close>\n )\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n className,\n )}\n data-overlay=\"true\"\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n return (\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n 'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n 'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn('flex flex-col gap-1', className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n 'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('text-lg font-bold text-gray', className)}\n {...props}\n />\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn('text-sm text-gray-light', className)}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACrD,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAgB,UAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,aAAjB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -62,7 +62,7 @@ function DialogOverlay({ className, ...props }) {
|
|
|
62
62
|
function DialogContent({ className, ...props }) {
|
|
63
63
|
return /* @__PURE__ */ jsx(Dialog$1.Popup, {
|
|
64
64
|
"data-slot": "dialog-content",
|
|
65
|
-
className: cn("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-
|
|
65
|
+
className: cn("fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2", "data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0", className),
|
|
66
66
|
...props
|
|
67
67
|
});
|
|
68
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n const target = event?.target\n return (\n target instanceof HTMLElement &&\n (target.dataset.overlay === 'true' ||\n target.hasAttribute('data-base-ui-inert'))\n )\n}\n\nfunction Dialog({\n onOpenChange,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return (\n <DialogPrimitive.Root\n {...props}\n onOpenChange={(open, eventDetails) => {\n if (\n !open &&\n eventDetails.reason === 'outside-press' &&\n !isBackdropPress(eventDetails.event)\n ) {\n eventDetails.cancel()\n return\n }\n onOpenChange?.(open, eventDetails)\n }}\n />\n )\n}\n\nfunction DialogTrigger(\n props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n if (children || props.render) {\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={className}\n {...props}\n >\n {children}\n </DialogPrimitive.Close>\n )\n }\n\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </DialogPrimitive.Close>\n )\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n className,\n )}\n data-overlay=\"true\"\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n return (\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-
|
|
1
|
+
{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\n// Our dialogs contain interactive elements that are mounted outside of the dialog\n// Browser extensions like password managers or grammar checkers are also mounted outside\n// We still dismiss on a click/tap outside: a genuine outside press lands on a\n// backdrop (our styled one, or Base UI's internal inert backdrop when modal)\nfunction isBackdropPress(event: Event | undefined) {\n const target = event?.target\n return (\n target instanceof HTMLElement &&\n (target.dataset.overlay === 'true' ||\n target.hasAttribute('data-base-ui-inert'))\n )\n}\n\nfunction Dialog({\n onOpenChange,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return (\n <DialogPrimitive.Root\n {...props}\n onOpenChange={(open, eventDetails) => {\n if (\n !open &&\n eventDetails.reason === 'outside-press' &&\n !isBackdropPress(eventDetails.event)\n ) {\n eventDetails.cancel()\n return\n }\n onOpenChange?.(open, eventDetails)\n }}\n />\n )\n}\n\nfunction DialogTrigger(\n props: React.ComponentProps<typeof DialogPrimitive.Trigger>,\n) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(\n props: React.ComponentProps<typeof DialogPrimitive.Portal>,\n) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, custom closes)\nfunction DialogClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n if (children || props.render) {\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={className}\n {...props}\n >\n {children}\n </DialogPrimitive.Close>\n )\n }\n\n return (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </DialogPrimitive.Close>\n )\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',\n className,\n )}\n data-overlay=\"true\"\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup>) {\n return (\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-[90%] max-w-lg min-w-80 translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 motion-reduce:transition-none sm:w-1/2',\n // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n 'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n 'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn('flex flex-col gap-1', className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n 'flex flex-col-reverse gap-4 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('text-lg font-bold text-gray', className)}\n {...props}\n />\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn('text-sm text-gray-light', className)}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAUA,SAAS,gBAAgB,OAA0B;CACjD,MAAM,SAAS,OAAO;CACtB,OACE,kBAAkB,gBACjB,OAAO,QAAQ,YAAY,UAC1B,OAAO,aAAa,oBAAoB;AAE9C;AAEA,SAAS,OAAO,EACd,cACA,GAAG,SACiD;CACpD,OACE,oBAACA,SAAgB,MAAjB;EACE,GAAI;EACJ,eAAe,MAAM,iBAAiB;GACpC,IACE,CAAC,QACD,aAAa,WAAW,mBACxB,CAAC,gBAAgB,aAAa,KAAK,GACnC;IACA,aAAa,OAAO;IACpB;GACF;GACA,eAAe,MAAM,YAAY;EACnC;CACD,CAAA;AAEL;AAEA,SAAS,cACP,OACA;CACA,OAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,YAAY,EACnB,WACA,UACA,GAAG,SACkD;CACrD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACoB,CAAA;CAI3B,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACrD,CAAA;AAE3B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,kRACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,kRAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -118,6 +118,10 @@ const InputDate = react.forwardRef(function InputDate({ calendarLabel, calendarP
|
|
|
118
118
|
align: "start",
|
|
119
119
|
"aria-label": calendarLabel,
|
|
120
120
|
className: "w-auto p-0",
|
|
121
|
+
collisionAvoidance: {
|
|
122
|
+
side: "flip",
|
|
123
|
+
fallbackAxisSide: "none"
|
|
124
|
+
},
|
|
121
125
|
container,
|
|
122
126
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_calendar.Calendar, {
|
|
123
127
|
...calendarProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-date.cjs","names":["React","Popover","PopoverAnchor","InputGroup","InputGroupInput","InputGroupAddon","PopoverTrigger","Button","CalendarMonth","PopoverContent","Calendar"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n Popover,\n PopoverAnchor,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n defaultProp,\n onChange,\n prop,\n}: {\n defaultProp: T\n onChange?: (value: T) => void\n prop?: T\n}) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n const isControlled = prop !== undefined\n const value = isControlled ? prop : uncontrolled\n\n const setValue = React.useCallback(\n (next: T) => {\n if (!isControlled) setUncontrolled(next)\n onChange?.(next)\n },\n [isControlled, onChange],\n )\n\n return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n React.ComponentProps<'input'>,\n 'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'\n> & {\n calendarLabel: string\n calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n /** Element the calendar popup mounts into, e.g. the drawer it sits in. */\n container?: React.ComponentProps<typeof PopoverContent>['container']\n defaultOpen?: boolean\n defaultValue?: string\n onDateChange?: (date: Date | undefined) => void\n onOpenChange?: (open: boolean) => void\n onValueChange?: (value: string) => void\n open?: boolean\n pickerOnly?: boolean\n separator?: string\n value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n function InputDate(\n {\n calendarLabel,\n calendarProps,\n className,\n container,\n defaultOpen = false,\n defaultValue = '',\n disabled,\n id,\n onDateChange,\n onKeyDown,\n onOpenChange,\n onValueChange,\n open: openProp,\n pickerOnly = false,\n placeholder,\n separator = '.',\n value: valueProp,\n ...props\n },\n ref,\n ) {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [text, setText] = useControllableState({\n defaultProp: defaultValue,\n onChange: onValueChange,\n prop: valueProp,\n })\n const [open, setOpenState] = useControllableState({\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n prop: openProp,\n })\n const selected = parseDate(text)\n const [month, setMonth] = React.useState<Date | undefined>(\n () => selected ?? calendarProps?.month,\n )\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (next && calendarProps?.month === undefined) {\n setMonth(parseDate(text) ?? new Date())\n }\n setOpenState(next)\n },\n [calendarProps?.month, setOpenState, text],\n )\n\n const commit = React.useCallback(\n (next: string) => {\n if (next === text) return\n setText(next)\n onDateChange?.(parseDate(next))\n },\n [onDateChange, setText, text],\n )\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n },\n [ref],\n )\n\n return (\n <Popover onOpenChange={setOpen} open={open}>\n <PopoverAnchor render={<InputGroup className={className} />}>\n <InputGroupInput\n autoComplete=\"off\"\n {...props}\n className={cn(pickerOnly && 'cursor-pointer')}\n disabled={disabled}\n id={id}\n inputMode={pickerOnly ? undefined : 'numeric'}\n onChange={() => {}}\n onClick={\n pickerOnly && !disabled\n ? (event) => {\n props.onClick?.(event)\n if (!event.defaultPrevented) setOpen(true)\n }\n : props.onClick\n }\n onKeyDown={(event) => {\n onKeyDown?.(event)\n if (event.defaultPrevented) return\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n setOpen(true)\n return\n }\n if (pickerOnly || !isDateMaskKey(event.key)) return\n event.preventDefault()\n const next = apply({\n caret: event.currentTarget.selectionStart ?? 0,\n key: event.key,\n selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n separator,\n value: event.currentTarget.value,\n })\n commit(next.value)\n const caret = next.caret\n const input = inputRef.current\n requestAnimationFrame(() => {\n input?.setSelectionRange(caret, caret)\n })\n }}\n placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n readOnly={pickerOnly}\n ref={setInputRef}\n spellCheck={false}\n value={text}\n />\n <InputGroupAddon align=\"inline-end\">\n <PopoverTrigger\n render={\n <Button\n aria-label={calendarLabel}\n color=\"neutral\"\n disabled={disabled}\n size=\"icon-small\"\n styleVariant=\"ghost\"\n >\n <CalendarMonth />\n </Button>\n }\n />\n </InputGroupAddon>\n </PopoverAnchor>\n <PopoverContent\n align=\"start\"\n aria-label={calendarLabel}\n className=\"w-auto p-0\"\n container={container}\n >\n <Calendar\n {...calendarProps}\n mode=\"single\"\n month={calendarProps?.month ?? month}\n onMonthChange={(next) => {\n calendarProps?.onMonthChange?.(next)\n if (calendarProps?.month === undefined) setMonth(next)\n }}\n onSelect={(next) => {\n commit(next ? formatDate(next, separator) : '')\n setOpen(false)\n }}\n selected={selected}\n />\n </PopoverContent>\n </Popover>\n )\n },\n)\n\nexport { InputDate }\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"input-date.cjs","names":["React","Popover","PopoverAnchor","InputGroup","InputGroupInput","InputGroupAddon","PopoverTrigger","Button","CalendarMonth","PopoverContent","Calendar"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n Popover,\n PopoverAnchor,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n defaultProp,\n onChange,\n prop,\n}: {\n defaultProp: T\n onChange?: (value: T) => void\n prop?: T\n}) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n const isControlled = prop !== undefined\n const value = isControlled ? prop : uncontrolled\n\n const setValue = React.useCallback(\n (next: T) => {\n if (!isControlled) setUncontrolled(next)\n onChange?.(next)\n },\n [isControlled, onChange],\n )\n\n return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n React.ComponentProps<'input'>,\n 'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'\n> & {\n calendarLabel: string\n calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n /** Element the calendar popup mounts into, e.g. the drawer it sits in. */\n container?: React.ComponentProps<typeof PopoverContent>['container']\n defaultOpen?: boolean\n defaultValue?: string\n onDateChange?: (date: Date | undefined) => void\n onOpenChange?: (open: boolean) => void\n onValueChange?: (value: string) => void\n open?: boolean\n pickerOnly?: boolean\n separator?: string\n value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n function InputDate(\n {\n calendarLabel,\n calendarProps,\n className,\n container,\n defaultOpen = false,\n defaultValue = '',\n disabled,\n id,\n onDateChange,\n onKeyDown,\n onOpenChange,\n onValueChange,\n open: openProp,\n pickerOnly = false,\n placeholder,\n separator = '.',\n value: valueProp,\n ...props\n },\n ref,\n ) {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [text, setText] = useControllableState({\n defaultProp: defaultValue,\n onChange: onValueChange,\n prop: valueProp,\n })\n const [open, setOpenState] = useControllableState({\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n prop: openProp,\n })\n const selected = parseDate(text)\n const [month, setMonth] = React.useState<Date | undefined>(\n () => selected ?? calendarProps?.month,\n )\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (next && calendarProps?.month === undefined) {\n setMonth(parseDate(text) ?? new Date())\n }\n setOpenState(next)\n },\n [calendarProps?.month, setOpenState, text],\n )\n\n const commit = React.useCallback(\n (next: string) => {\n if (next === text) return\n setText(next)\n onDateChange?.(parseDate(next))\n },\n [onDateChange, setText, text],\n )\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n },\n [ref],\n )\n\n return (\n <Popover onOpenChange={setOpen} open={open}>\n <PopoverAnchor render={<InputGroup className={className} />}>\n <InputGroupInput\n autoComplete=\"off\"\n {...props}\n className={cn(pickerOnly && 'cursor-pointer')}\n disabled={disabled}\n id={id}\n inputMode={pickerOnly ? undefined : 'numeric'}\n onChange={() => {}}\n onClick={\n pickerOnly && !disabled\n ? (event) => {\n props.onClick?.(event)\n if (!event.defaultPrevented) setOpen(true)\n }\n : props.onClick\n }\n onKeyDown={(event) => {\n onKeyDown?.(event)\n if (event.defaultPrevented) return\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n setOpen(true)\n return\n }\n if (pickerOnly || !isDateMaskKey(event.key)) return\n event.preventDefault()\n const next = apply({\n caret: event.currentTarget.selectionStart ?? 0,\n key: event.key,\n selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n separator,\n value: event.currentTarget.value,\n })\n commit(next.value)\n const caret = next.caret\n const input = inputRef.current\n requestAnimationFrame(() => {\n input?.setSelectionRange(caret, caret)\n })\n }}\n placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n readOnly={pickerOnly}\n ref={setInputRef}\n spellCheck={false}\n value={text}\n />\n <InputGroupAddon align=\"inline-end\">\n <PopoverTrigger\n render={\n <Button\n aria-label={calendarLabel}\n color=\"neutral\"\n disabled={disabled}\n size=\"icon-small\"\n styleVariant=\"ghost\"\n >\n <CalendarMonth />\n </Button>\n }\n />\n </InputGroupAddon>\n </PopoverAnchor>\n <PopoverContent\n align=\"start\"\n aria-label={calendarLabel}\n className=\"w-auto p-0\"\n collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n container={container}\n >\n <Calendar\n {...calendarProps}\n mode=\"single\"\n month={calendarProps?.month ?? month}\n onMonthChange={(next) => {\n calendarProps?.onMonthChange?.(next)\n if (calendarProps?.month === undefined) setMonth(next)\n }}\n onSelect={(next) => {\n commit(next ? formatDate(next, separator) : '')\n setOpen(false)\n }}\n selected={selected}\n />\n </PopoverContent>\n </Popover>\n )\n },\n)\n\nexport { InputDate }\n"],"mappings":"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"}
|
|
@@ -115,6 +115,10 @@ const InputDate = React$1.forwardRef(function InputDate({ calendarLabel, calenda
|
|
|
115
115
|
align: "start",
|
|
116
116
|
"aria-label": calendarLabel,
|
|
117
117
|
className: "w-auto p-0",
|
|
118
|
+
collisionAvoidance: {
|
|
119
|
+
side: "flip",
|
|
120
|
+
fallbackAxisSide: "none"
|
|
121
|
+
},
|
|
118
122
|
container,
|
|
119
123
|
children: /* @__PURE__ */ jsx(Calendar, {
|
|
120
124
|
...calendarProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-date.js","names":["React"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n Popover,\n PopoverAnchor,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n defaultProp,\n onChange,\n prop,\n}: {\n defaultProp: T\n onChange?: (value: T) => void\n prop?: T\n}) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n const isControlled = prop !== undefined\n const value = isControlled ? prop : uncontrolled\n\n const setValue = React.useCallback(\n (next: T) => {\n if (!isControlled) setUncontrolled(next)\n onChange?.(next)\n },\n [isControlled, onChange],\n )\n\n return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n React.ComponentProps<'input'>,\n 'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'\n> & {\n calendarLabel: string\n calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n /** Element the calendar popup mounts into, e.g. the drawer it sits in. */\n container?: React.ComponentProps<typeof PopoverContent>['container']\n defaultOpen?: boolean\n defaultValue?: string\n onDateChange?: (date: Date | undefined) => void\n onOpenChange?: (open: boolean) => void\n onValueChange?: (value: string) => void\n open?: boolean\n pickerOnly?: boolean\n separator?: string\n value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n function InputDate(\n {\n calendarLabel,\n calendarProps,\n className,\n container,\n defaultOpen = false,\n defaultValue = '',\n disabled,\n id,\n onDateChange,\n onKeyDown,\n onOpenChange,\n onValueChange,\n open: openProp,\n pickerOnly = false,\n placeholder,\n separator = '.',\n value: valueProp,\n ...props\n },\n ref,\n ) {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [text, setText] = useControllableState({\n defaultProp: defaultValue,\n onChange: onValueChange,\n prop: valueProp,\n })\n const [open, setOpenState] = useControllableState({\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n prop: openProp,\n })\n const selected = parseDate(text)\n const [month, setMonth] = React.useState<Date | undefined>(\n () => selected ?? calendarProps?.month,\n )\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (next && calendarProps?.month === undefined) {\n setMonth(parseDate(text) ?? new Date())\n }\n setOpenState(next)\n },\n [calendarProps?.month, setOpenState, text],\n )\n\n const commit = React.useCallback(\n (next: string) => {\n if (next === text) return\n setText(next)\n onDateChange?.(parseDate(next))\n },\n [onDateChange, setText, text],\n )\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n },\n [ref],\n )\n\n return (\n <Popover onOpenChange={setOpen} open={open}>\n <PopoverAnchor render={<InputGroup className={className} />}>\n <InputGroupInput\n autoComplete=\"off\"\n {...props}\n className={cn(pickerOnly && 'cursor-pointer')}\n disabled={disabled}\n id={id}\n inputMode={pickerOnly ? undefined : 'numeric'}\n onChange={() => {}}\n onClick={\n pickerOnly && !disabled\n ? (event) => {\n props.onClick?.(event)\n if (!event.defaultPrevented) setOpen(true)\n }\n : props.onClick\n }\n onKeyDown={(event) => {\n onKeyDown?.(event)\n if (event.defaultPrevented) return\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n setOpen(true)\n return\n }\n if (pickerOnly || !isDateMaskKey(event.key)) return\n event.preventDefault()\n const next = apply({\n caret: event.currentTarget.selectionStart ?? 0,\n key: event.key,\n selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n separator,\n value: event.currentTarget.value,\n })\n commit(next.value)\n const caret = next.caret\n const input = inputRef.current\n requestAnimationFrame(() => {\n input?.setSelectionRange(caret, caret)\n })\n }}\n placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n readOnly={pickerOnly}\n ref={setInputRef}\n spellCheck={false}\n value={text}\n />\n <InputGroupAddon align=\"inline-end\">\n <PopoverTrigger\n render={\n <Button\n aria-label={calendarLabel}\n color=\"neutral\"\n disabled={disabled}\n size=\"icon-small\"\n styleVariant=\"ghost\"\n >\n <CalendarMonth />\n </Button>\n }\n />\n </InputGroupAddon>\n </PopoverAnchor>\n <PopoverContent\n align=\"start\"\n aria-label={calendarLabel}\n className=\"w-auto p-0\"\n container={container}\n >\n <Calendar\n {...calendarProps}\n mode=\"single\"\n month={calendarProps?.month ?? month}\n onMonthChange={(next) => {\n calendarProps?.onMonthChange?.(next)\n if (calendarProps?.month === undefined) setMonth(next)\n }}\n onSelect={(next) => {\n commit(next ? formatDate(next, separator) : '')\n setOpen(false)\n }}\n selected={selected}\n />\n </PopoverContent>\n </Popover>\n )\n },\n)\n\nexport { InputDate }\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"input-date.js","names":["React"],"sources":["../../src/components/input-date.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarMonth } from '@epilot/spark-icons'\nimport { apply, formatDate, isDateMaskKey, parseDate } from 'ictus'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from './input-group'\nimport {\n Popover,\n PopoverAnchor,\n PopoverContent,\n PopoverTrigger,\n} from './popover'\n\nfunction useControllableState<T>({\n defaultProp,\n onChange,\n prop,\n}: {\n defaultProp: T\n onChange?: (value: T) => void\n prop?: T\n}) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp)\n const isControlled = prop !== undefined\n const value = isControlled ? prop : uncontrolled\n\n const setValue = React.useCallback(\n (next: T) => {\n if (!isControlled) setUncontrolled(next)\n onChange?.(next)\n },\n [isControlled, onChange],\n )\n\n return [value, setValue] as const\n}\n\nexport type InputDateProps = Omit<\n React.ComponentProps<'input'>,\n 'children' | 'defaultValue' | 'onChange' | 'readOnly' | 'type' | 'value'\n> & {\n calendarLabel: string\n calendarProps?: Omit<CalendarProps, 'mode' | 'onSelect' | 'selected'>\n /** Element the calendar popup mounts into, e.g. the drawer it sits in. */\n container?: React.ComponentProps<typeof PopoverContent>['container']\n defaultOpen?: boolean\n defaultValue?: string\n onDateChange?: (date: Date | undefined) => void\n onOpenChange?: (open: boolean) => void\n onValueChange?: (value: string) => void\n open?: boolean\n pickerOnly?: boolean\n separator?: string\n value?: string\n}\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n function InputDate(\n {\n calendarLabel,\n calendarProps,\n className,\n container,\n defaultOpen = false,\n defaultValue = '',\n disabled,\n id,\n onDateChange,\n onKeyDown,\n onOpenChange,\n onValueChange,\n open: openProp,\n pickerOnly = false,\n placeholder,\n separator = '.',\n value: valueProp,\n ...props\n },\n ref,\n ) {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [text, setText] = useControllableState({\n defaultProp: defaultValue,\n onChange: onValueChange,\n prop: valueProp,\n })\n const [open, setOpenState] = useControllableState({\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n prop: openProp,\n })\n const selected = parseDate(text)\n const [month, setMonth] = React.useState<Date | undefined>(\n () => selected ?? calendarProps?.month,\n )\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (next && calendarProps?.month === undefined) {\n setMonth(parseDate(text) ?? new Date())\n }\n setOpenState(next)\n },\n [calendarProps?.month, setOpenState, text],\n )\n\n const commit = React.useCallback(\n (next: string) => {\n if (next === text) return\n setText(next)\n onDateChange?.(parseDate(next))\n },\n [onDateChange, setText, text],\n )\n\n const setInputRef = React.useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n },\n [ref],\n )\n\n return (\n <Popover onOpenChange={setOpen} open={open}>\n <PopoverAnchor render={<InputGroup className={className} />}>\n <InputGroupInput\n autoComplete=\"off\"\n {...props}\n className={cn(pickerOnly && 'cursor-pointer')}\n disabled={disabled}\n id={id}\n inputMode={pickerOnly ? undefined : 'numeric'}\n onChange={() => {}}\n onClick={\n pickerOnly && !disabled\n ? (event) => {\n props.onClick?.(event)\n if (!event.defaultPrevented) setOpen(true)\n }\n : props.onClick\n }\n onKeyDown={(event) => {\n onKeyDown?.(event)\n if (event.defaultPrevented) return\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n setOpen(true)\n return\n }\n if (pickerOnly || !isDateMaskKey(event.key)) return\n event.preventDefault()\n const next = apply({\n caret: event.currentTarget.selectionStart ?? 0,\n key: event.key,\n selectionEnd: event.currentTarget.selectionEnd ?? undefined,\n separator,\n value: event.currentTarget.value,\n })\n commit(next.value)\n const caret = next.caret\n const input = inputRef.current\n requestAnimationFrame(() => {\n input?.setSelectionRange(caret, caret)\n })\n }}\n placeholder={placeholder ?? `DD${separator}MM${separator}YYYY`}\n readOnly={pickerOnly}\n ref={setInputRef}\n spellCheck={false}\n value={text}\n />\n <InputGroupAddon align=\"inline-end\">\n <PopoverTrigger\n render={\n <Button\n aria-label={calendarLabel}\n color=\"neutral\"\n disabled={disabled}\n size=\"icon-small\"\n styleVariant=\"ghost\"\n >\n <CalendarMonth />\n </Button>\n }\n />\n </InputGroupAddon>\n </PopoverAnchor>\n <PopoverContent\n align=\"start\"\n aria-label={calendarLabel}\n className=\"w-auto p-0\"\n collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n container={container}\n >\n <Calendar\n {...calendarProps}\n mode=\"single\"\n month={calendarProps?.month ?? month}\n onMonthChange={(next) => {\n calendarProps?.onMonthChange?.(next)\n if (calendarProps?.month === undefined) setMonth(next)\n }}\n onSelect={(next) => {\n commit(next ? formatDate(next, separator) : '')\n setOpen(false)\n }}\n selected={selected}\n />\n </PopoverContent>\n </Popover>\n )\n },\n)\n\nexport { InputDate }\n"],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
|
|
|
5
5
|
const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
|
|
6
6
|
const require_utils_format = require("../utils/format.cjs");
|
|
7
7
|
const require_utils_chart_scale = require("../utils/chart-scale.cjs");
|
|
8
|
-
const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
|
|
9
8
|
const require_components_chart = require("./chart.cjs");
|
|
9
|
+
const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
|
|
10
10
|
let react = require("react");
|
|
11
11
|
react = require_chunk.__toESM(react);
|
|
12
12
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -4,8 +4,8 @@ import { useReducedMotion } from "../hooks/use-reduced-motion.js";
|
|
|
4
4
|
import { cn } from "../utils/cn.js";
|
|
5
5
|
import { getDocumentLang, localeNumberFormat } from "../utils/format.js";
|
|
6
6
|
import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
|
|
7
|
-
import { buildTimeTicks } from "../utils/chart-time-ticks.js";
|
|
8
7
|
import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
|
|
8
|
+
import { buildTimeTicks } from "../utils/chart-time-ticks.js";
|
|
9
9
|
import * as React$1 from "react";
|
|
10
10
|
import { useCallback, useMemo } from "react";
|
|
11
11
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
6
6
|
|
|
7
7
|
//#region src/components/marker.d.ts
|
|
8
8
|
declare const markerVariants: (props?: ({
|
|
9
|
-
variant?: "
|
|
9
|
+
variant?: "default" | "separator" | "border" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
declare function Marker({
|
|
12
12
|
className,
|
|
@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
6
6
|
|
|
7
7
|
//#region src/components/marker.d.ts
|
|
8
8
|
declare const markerVariants: (props?: ({
|
|
9
|
-
variant?: "
|
|
9
|
+
variant?: "default" | "separator" | "border" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
declare function Marker({
|
|
12
12
|
className,
|
|
@@ -43,7 +43,7 @@ function PopoverAnchor({ render, ...props }) {
|
|
|
43
43
|
props: (0, _base_ui_react_merge_props.mergeProps)({ "data-slot": "popover-anchor" }, props)
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
|
-
function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, container, ...props }) {
|
|
46
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, collisionAvoidance, container, ...props }) {
|
|
47
47
|
const context = react.useContext(PopoverAnchorContext);
|
|
48
48
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, {
|
|
49
49
|
container,
|
|
@@ -52,6 +52,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
|
|
|
52
52
|
alignOffset,
|
|
53
53
|
anchor: anchor ?? context?.anchor ?? void 0,
|
|
54
54
|
className: "isolate z-50",
|
|
55
|
+
collisionAvoidance,
|
|
55
56
|
side,
|
|
56
57
|
sideOffset,
|
|
57
58
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Popup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n anchor: HTMLElement | null\n setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n return (\n <PopoverAnchorContext.Provider value={value}>\n <PopoverPrimitive.Root {...props} />\n </PopoverAnchorContext.Provider>\n )\n}\n\nfunction PopoverTrigger(\n props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n const context = React.useContext(PopoverAnchorContext)\n return useRender({\n defaultTagName: 'div',\n render,\n ref: context?.setAnchor,\n props: mergeProps<'div'>(\n { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n props,\n ),\n })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n Pick<\n PopoverPrimitive.Positioner.Props,\n 'align'
|
|
1
|
+
{"version":3,"file":"popover.cjs","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n anchor: HTMLElement | null\n setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n return (\n <PopoverAnchorContext.Provider value={value}>\n <PopoverPrimitive.Root {...props} />\n </PopoverAnchorContext.Provider>\n )\n}\n\nfunction PopoverTrigger(\n props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n const context = React.useContext(PopoverAnchorContext)\n return useRender({\n defaultTagName: 'div',\n render,\n ref: context?.setAnchor,\n props: mergeProps<'div'>(\n { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n props,\n ),\n })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n Pick<\n PopoverPrimitive.Positioner.Props,\n | 'align'\n | 'alignOffset'\n | 'side'\n | 'sideOffset'\n | 'anchor'\n | 'collisionAvoidance'\n > &\n Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n className,\n align = 'center',\n sideOffset = 4,\n side,\n alignOffset,\n anchor,\n collisionAvoidance,\n container,\n ...props\n}: PopoverContentProps) {\n const context = React.useContext(PopoverAnchorContext)\n return (\n <PopoverPrimitive.Portal container={container}>\n <PopoverPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n anchor={anchor ?? context?.anchor ?? undefined}\n className=\"isolate z-50\"\n collisionAvoidance={collisionAvoidance}\n side={side}\n sideOffset={sideOffset}\n >\n <PopoverPrimitive.Popup\n data-slot=\"popover-content\"\n className={cn(\n 'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n // enter: fade + zoom + a slight per-side slide (was animate-in)\n 'data-starting-style:scale-95 data-starting-style:opacity-0',\n 'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n // exit: fade + zoom (was animate-out)\n 'data-ending-style:scale-95 data-ending-style:opacity-0',\n className,\n )}\n {...props}\n />\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,uBAAuBA,MAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,MAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,MAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;EAAsC;YACpC,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,KAJcD,MAAM,WAAW,oBAIpB,GAAG;EACd,QAAA,GAAA,2BAAA,YACE,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,MAAM,WAAW,oBAAoB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,QAAiB,QAAlB;EAAoC;YAClC,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,aAAU;IACV,YAAA,GAAA,GAAA,IACE,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
|
|
@@ -14,7 +14,7 @@ declare function PopoverAnchor({
|
|
|
14
14
|
render,
|
|
15
15
|
...props
|
|
16
16
|
}: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
17
|
-
type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'> & Pick<Popover$1.Portal.Props, 'container'>;
|
|
17
|
+
type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor' | 'collisionAvoidance'> & Pick<Popover$1.Portal.Props, 'container'>;
|
|
18
18
|
declare function PopoverContent({
|
|
19
19
|
className,
|
|
20
20
|
align,
|
|
@@ -22,6 +22,7 @@ declare function PopoverContent({
|
|
|
22
22
|
side,
|
|
23
23
|
alignOffset,
|
|
24
24
|
anchor,
|
|
25
|
+
collisionAvoidance,
|
|
25
26
|
container,
|
|
26
27
|
...props
|
|
27
28
|
}: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -14,7 +14,7 @@ declare function PopoverAnchor({
|
|
|
14
14
|
render,
|
|
15
15
|
...props
|
|
16
16
|
}: useRender.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
17
|
-
type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'> & Pick<Popover$1.Portal.Props, 'container'>;
|
|
17
|
+
type PopoverContentProps = React$1.ComponentProps<typeof Popover$1.Popup> & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor' | 'collisionAvoidance'> & Pick<Popover$1.Portal.Props, 'container'>;
|
|
18
18
|
declare function PopoverContent({
|
|
19
19
|
className,
|
|
20
20
|
align,
|
|
@@ -22,6 +22,7 @@ declare function PopoverContent({
|
|
|
22
22
|
side,
|
|
23
23
|
alignOffset,
|
|
24
24
|
anchor,
|
|
25
|
+
collisionAvoidance,
|
|
25
26
|
container,
|
|
26
27
|
...props
|
|
27
28
|
}: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -40,7 +40,7 @@ function PopoverAnchor({ render, ...props }) {
|
|
|
40
40
|
props: mergeProps({ "data-slot": "popover-anchor" }, props)
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
|
-
function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, container, ...props }) {
|
|
43
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, collisionAvoidance, container, ...props }) {
|
|
44
44
|
const context = React$1.useContext(PopoverAnchorContext);
|
|
45
45
|
return /* @__PURE__ */ jsx(Popover$1.Portal, {
|
|
46
46
|
container,
|
|
@@ -49,6 +49,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, side, ali
|
|
|
49
49
|
alignOffset,
|
|
50
50
|
anchor: anchor ?? context?.anchor ?? void 0,
|
|
51
51
|
className: "isolate z-50",
|
|
52
|
+
collisionAvoidance,
|
|
52
53
|
side,
|
|
53
54
|
sideOffset,
|
|
54
55
|
children: /* @__PURE__ */ jsx(Popover$1.Popup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n anchor: HTMLElement | null\n setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n return (\n <PopoverAnchorContext.Provider value={value}>\n <PopoverPrimitive.Root {...props} />\n </PopoverAnchorContext.Provider>\n )\n}\n\nfunction PopoverTrigger(\n props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n const context = React.useContext(PopoverAnchorContext)\n return useRender({\n defaultTagName: 'div',\n render,\n ref: context?.setAnchor,\n props: mergeProps<'div'>(\n { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n props,\n ),\n })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n Pick<\n PopoverPrimitive.Positioner.Props,\n 'align'
|
|
1
|
+
{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n anchor: HTMLElement | null\n setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n return (\n <PopoverAnchorContext.Provider value={value}>\n <PopoverPrimitive.Root {...props} />\n </PopoverAnchorContext.Provider>\n )\n}\n\nfunction PopoverTrigger(\n props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n// A Close part inside the popup is also what enables Base UI's focus trap for modal popovers.\nfunction PopoverClose(\n props: React.ComponentProps<typeof PopoverPrimitive.Close>,\n) {\n return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n const context = React.useContext(PopoverAnchorContext)\n return useRender({\n defaultTagName: 'div',\n render,\n ref: context?.setAnchor,\n props: mergeProps<'div'>(\n { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n props,\n ),\n })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n Pick<\n PopoverPrimitive.Positioner.Props,\n | 'align'\n | 'alignOffset'\n | 'side'\n | 'sideOffset'\n | 'anchor'\n | 'collisionAvoidance'\n > &\n Pick<PopoverPrimitive.Portal.Props, 'container'>\n\nfunction PopoverContent({\n className,\n align = 'center',\n sideOffset = 4,\n side,\n alignOffset,\n anchor,\n collisionAvoidance,\n container,\n ...props\n}: PopoverContentProps) {\n const context = React.useContext(PopoverAnchorContext)\n return (\n <PopoverPrimitive.Portal container={container}>\n <PopoverPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n anchor={anchor ?? context?.anchor ?? undefined}\n className=\"isolate z-50\"\n collisionAvoidance={collisionAvoidance}\n side={side}\n sideOffset={sideOffset}\n >\n <PopoverPrimitive.Popup\n data-slot=\"popover-content\"\n className={cn(\n 'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n // enter: fade + zoom + a slight per-side slide (was animate-in)\n 'data-starting-style:scale-95 data-starting-style:opacity-0',\n 'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n // exit: fade + zoom (was animate-out)\n 'data-ending-style:scale-95 data-ending-style:opacity-0',\n className,\n )}\n {...props}\n />\n </PopoverPrimitive.Positioner>\n </PopoverPrimitive.Portal>\n )\n}\n\nexport { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,IAAI;AAEd,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,IAAI;CACnE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;CAAU,IAAI,CAAC,MAAM,CAAC;CACnE,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;CACN,CAAA;AAEnC;AAEA,SAAS,eACP,OACA;CACA,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAGA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,UAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;AAIA,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;CAE5E,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,oBAIpB,GAAG;EACd,OAAO,WACL,EAAE,aAAa,iBAAiB,GAChC,KACF;CACF,CAAC;AACH;AAcA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,oBACA,WACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,oBAAoB;CACrD,OACE,oBAACC,UAAiB,QAAlB;EAAoC;YAClC,oBAACA,UAAiB,YAAlB;GACS;GACM;GACb,QAAQ,UAAU,SAAS,UAAU,KAAA;GACrC,WAAU;GACU;GACd;GACM;aAEZ,oBAACA,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,SACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}
|
|
@@ -6,10 +6,10 @@ const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cj
|
|
|
6
6
|
require("../utils/chars.cjs");
|
|
7
7
|
const require_utils_format = require("../utils/format.cjs");
|
|
8
8
|
const require_utils_chart_scale = require("../utils/chart-scale.cjs");
|
|
9
|
-
const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
|
|
10
9
|
const require_components_chart = require("./chart.cjs");
|
|
11
10
|
const require_components_series_legend = require("./series-legend.cjs");
|
|
12
11
|
const require_components_typography = require("./typography.cjs");
|
|
12
|
+
const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
|
|
13
13
|
let react = require("react");
|
|
14
14
|
react = require_chunk.__toESM(react);
|
|
15
15
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -5,10 +5,10 @@ import { cn } from "../utils/cn.js";
|
|
|
5
5
|
import "../utils/chars.js";
|
|
6
6
|
import { twoDecimalFormat } from "../utils/format.js";
|
|
7
7
|
import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
|
|
8
|
-
import { buildTimeTicks } from "../utils/chart-time-ticks.js";
|
|
9
8
|
import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
|
|
10
9
|
import { SeriesLegend } from "./series-legend.js";
|
|
11
10
|
import { SectionTitle } from "./typography.js";
|
|
11
|
+
import { buildTimeTicks } from "../utils/chart-time-ticks.js";
|
|
12
12
|
import * as React$1 from "react";
|
|
13
13
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
14
14
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -52,7 +52,7 @@ function SheetContent({ side = "right", className, ...props }) {
|
|
|
52
52
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
|
|
53
53
|
"data-slot": "sheet-content",
|
|
54
54
|
"data-side": side,
|
|
55
|
-
className: (0, cn.cn)("fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-
|
|
55
|
+
className: (0, cn.cn)("fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none", "data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full", "data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full", "data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm", "data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm", className),
|
|
56
56
|
...props
|
|
57
57
|
});
|
|
58
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n if (children || props.render) {\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={className}\n {...props}\n >\n {children}\n </SheetPrimitive.Close>\n )\n }\n\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </SheetPrimitive.Close>\n )\n}\n\nfunction SheetPortal(\n props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n typeof SheetPrimitive.Popup\n> {\n side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n side = 'right',\n className,\n ...props\n}: SheetContentProps) {\n return (\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-
|
|
1
|
+
{"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n if (children || props.render) {\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={className}\n {...props}\n >\n {children}\n </SheetPrimitive.Close>\n )\n }\n\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </SheetPrimitive.Close>\n )\n}\n\nfunction SheetPortal(\n props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n typeof SheetPrimitive.Popup\n> {\n side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n side = 'right',\n className,\n ...props\n}: SheetContentProps) {\n return (\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n 'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n 'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n 'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n 'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\n 'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-lg font-semibold text-gray', className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-sm text-gray-light', className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,GAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
|
package/dist/components/sheet.js
CHANGED
|
@@ -49,7 +49,7 @@ function SheetContent({ side = "right", className, ...props }) {
|
|
|
49
49
|
return /* @__PURE__ */ jsx(Dialog.Popup, {
|
|
50
50
|
"data-slot": "sheet-content",
|
|
51
51
|
"data-side": side,
|
|
52
|
-
className: cn("fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-
|
|
52
|
+
className: cn("fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none", "data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full", "data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full", "data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm", "data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm", className),
|
|
53
53
|
...props
|
|
54
54
|
});
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n if (children || props.render) {\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={className}\n {...props}\n >\n {children}\n </SheetPrimitive.Close>\n )\n }\n\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </SheetPrimitive.Close>\n )\n}\n\nfunction SheetPortal(\n props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n typeof SheetPrimitive.Popup\n> {\n side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n side = 'right',\n className,\n ...props\n}: SheetContentProps) {\n return (\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-
|
|
1
|
+
{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n if (children || props.render) {\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={className}\n {...props}\n >\n {children}\n </SheetPrimitive.Close>\n )\n }\n\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </SheetPrimitive.Close>\n )\n}\n\nfunction SheetPortal(\n props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n typeof SheetPrimitive.Popup\n> {\n side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n side = 'right',\n className,\n ...props\n}: SheetContentProps) {\n return (\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-2 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n 'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n 'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n 'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n 'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\n 'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-lg font-semibold text-gray', className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-sm text-gray-light', className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,oBAACA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
|