@epilot/spark-ui 0.12.3 → 0.12.4
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 +2 -2
- package/dist/components/attachment.d.ts +2 -2
- package/dist/components/badge.cjs +1 -1
- package/dist/components/badge.cjs.map +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/badge.js.map +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/marker.d.cts +1 -1
- package/dist/components/marker.d.ts +1 -1
- package/dist/components/message-scroller.cjs +11 -7
- package/dist/components/message-scroller.cjs.map +1 -1
- package/dist/components/message-scroller.d.cts +1 -0
- package/dist/components/message-scroller.d.ts +1 -0
- package/dist/components/message-scroller.js +11 -7
- package/dist/components/message-scroller.js.map +1 -1
- package/dist/components/page-header.d.cts +1 -1
- package/dist/components/page-header.d.ts +1 -1
- package/dist/components/tooltip.cjs +1 -1
- package/dist/components/tooltip.cjs.map +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/icons/material-symbol.cjs +1 -1
- package/dist/icons/material-symbol.cjs.map +1 -1
- package/dist/icons/material-symbol.js +1 -1
- package/dist/icons/material-symbol.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?: "sm" | "default" | "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({
|
|
@@ -20,7 +20,7 @@ declare function Attachment({
|
|
|
20
20
|
state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
|
|
21
21
|
}): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
declare const attachmentMediaVariants: (props?: ({
|
|
23
|
-
variant?: "
|
|
23
|
+
variant?: "icon" | "image" | null | undefined;
|
|
24
24
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
25
25
|
declare function AttachmentMedia({
|
|
26
26
|
className,
|
|
@@ -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?: "sm" | "default" | "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({
|
|
@@ -20,7 +20,7 @@ declare function Attachment({
|
|
|
20
20
|
state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
|
|
21
21
|
}): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
declare const attachmentMediaVariants: (props?: ({
|
|
23
|
-
variant?: "
|
|
23
|
+
variant?: "icon" | "image" | null | undefined;
|
|
24
24
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
25
25
|
declare function AttachmentMedia({
|
|
26
26
|
className,
|
|
@@ -12,7 +12,7 @@ const Badge = react.forwardRef(({ className, children, styleVariant, color, ...p
|
|
|
12
12
|
"data-slot": "badge",
|
|
13
13
|
"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
|
|
14
14
|
"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
|
|
15
|
-
className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
|
|
15
|
+
className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
|
|
16
16
|
ref,
|
|
17
17
|
...props,
|
|
18
18
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n | 'accent'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n styleVariant?: SparkStyle\n color?: SparkBadgeColor\n children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, children, styleVariant, color, ...props }, ref) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n return (\n <span\n data-slot=\"badge\"\n data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n data-accent-color={color ? accentByColor[color] : undefined}\n className={cn(\n 'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n 'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n 'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,
|
|
1
|
+
{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n | 'accent'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n styleVariant?: SparkStyle\n color?: SparkBadgeColor\n children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, children, styleVariant, color, ...props }, ref) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n return (\n <span\n data-slot=\"badge\"\n data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n data-accent-color={color ? accentByColor[color] : undefined}\n className={cn(\n 'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n 'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n 'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
|
package/dist/components/badge.js
CHANGED
|
@@ -9,7 +9,7 @@ const Badge = React$1.forwardRef(({ className, children, styleVariant, color, ..
|
|
|
9
9
|
"data-slot": "badge",
|
|
10
10
|
"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
|
|
11
11
|
"data-accent-color": color ? accentByColor[color] : void 0,
|
|
12
|
-
className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
|
|
12
|
+
className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
|
|
13
13
|
ref,
|
|
14
14
|
...props,
|
|
15
15
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n | 'accent'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n styleVariant?: SparkStyle\n color?: SparkBadgeColor\n children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, children, styleVariant, color, ...props }, ref) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n return (\n <span\n data-slot=\"badge\"\n data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n data-accent-color={color ? accentByColor[color] : undefined}\n className={cn(\n 'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n 'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n 'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,
|
|
1
|
+
{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n | 'accent'\n | 'neutral'\n | 'success'\n | 'warning'\n | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n styleVariant?: SparkStyle\n color?: SparkBadgeColor\n children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, children, styleVariant, color, ...props }, ref) => {\n const hasLook = styleVariant !== undefined || color !== undefined\n return (\n <span\n data-slot=\"badge\"\n data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n data-accent-color={color ? accentByColor[color] : undefined}\n className={cn(\n 'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n 'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n 'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
|
|
@@ -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?: "ghost" | "
|
|
13
|
+
variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | 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?: "ghost" | "
|
|
13
|
+
variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "
|
|
10
|
+
variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
|
|
11
11
|
color?: "accent" | "neutral" | "danger" | null | undefined;
|
|
12
|
-
size?: "
|
|
12
|
+
size?: "icon" | "small" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
type SparkButtonColor = 'accent' | 'neutral' | 'danger';
|
|
15
15
|
interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
|
|
@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
|
|
8
8
|
//#region src/components/button.d.ts
|
|
9
9
|
declare const buttonVariants: (props?: ({
|
|
10
|
-
variant?: "
|
|
10
|
+
variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
|
|
11
11
|
color?: "accent" | "neutral" | "danger" | null | undefined;
|
|
12
|
-
size?: "
|
|
12
|
+
size?: "icon" | "small" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
type SparkButtonColor = 'accent' | 'neutral' | 'danger';
|
|
15
15
|
interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
|
|
@@ -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?: "separator" | "default" | "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?: "separator" | "default" | "border" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
declare function Marker({
|
|
12
12
|
className,
|
|
@@ -14,7 +14,7 @@ let motion_react_m = require("motion/react-m");
|
|
|
14
14
|
let cnfast = require("cnfast");
|
|
15
15
|
//#region src/components/message-scroller.tsx
|
|
16
16
|
const MessageScrollerAnimationReadyContext = react.createContext(false);
|
|
17
|
-
const
|
|
17
|
+
const MotionDiv = (0, motion_react_m.create)("div");
|
|
18
18
|
function MessageScrollerProvider(props) {
|
|
19
19
|
const [ready, setReady] = react.useState(false);
|
|
20
20
|
react.useEffect(() => {
|
|
@@ -50,19 +50,23 @@ function MessageScrollerContent({ className, ...props }) {
|
|
|
50
50
|
...props
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
|
-
function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
|
|
53
|
+
function MessageScrollerItem({ className, scrollAnchor = false, children, ...props }) {
|
|
54
54
|
const ready = react.useContext(MessageScrollerAnimationReadyContext);
|
|
55
55
|
const shouldReduceMotion = require_hooks_use_reduced_motion.useReducedMotion();
|
|
56
56
|
const skipEntrance = !ready || shouldReduceMotion;
|
|
57
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
57
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Item, {
|
|
58
58
|
...props,
|
|
59
59
|
"data-slot": "message-scroller-item",
|
|
60
60
|
scrollAnchor,
|
|
61
61
|
className: (0, cnfast.cn)("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionDiv, {
|
|
63
|
+
className: "w-full min-w-0",
|
|
64
|
+
variants: require_lib_message_animations.MESSAGE_ANIMATIONS["slide-up"].variants,
|
|
65
|
+
initial: skipEntrance ? false : "initial",
|
|
66
|
+
animate: "animate",
|
|
67
|
+
exit: skipEntrance ? void 0 : "exit",
|
|
68
|
+
children
|
|
69
|
+
})
|
|
66
70
|
});
|
|
67
71
|
}
|
|
68
72
|
function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-scroller.cjs","names":["React","
|
|
1
|
+
{"version":3,"file":"message-scroller.cjs","names":["React","LazyMotion","domAnimation","MessageScrollerPrimitive","useReducedMotion","MESSAGE_ANIMATIONS","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n | 'animate'\n | 'exit'\n | 'initial'\n | 'variants'\n | 'onAnimationStart'\n | 'onDrag'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n const [ready, setReady] = React.useState(false)\n\n React.useEffect(() => {\n setReady(true)\n }, [])\n\n return (\n <LazyMotion features={domAnimation} strict>\n <MessageScrollerAnimationReadyContext.Provider value={ready}>\n <MessageScrollerPrimitive.Provider {...props} />\n </MessageScrollerAnimationReadyContext.Provider>\n </LazyMotion>\n )\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n return (\n <MessageScrollerPrimitive.Root\n data-slot=\"message-scroller\"\n className={cn(\n 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n return (\n <MessageScrollerPrimitive.Viewport\n data-slot=\"message-scroller-viewport\"\n // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n // bar collapses to no-scrollbar (spark util) while autoscrolling.\n className={cn(\n 'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n return (\n <MessageScrollerPrimitive.Content\n data-slot=\"message-scroller-content\"\n className={cn('flex h-max min-h-full flex-col gap-8', className)}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n children,\n ...props\n}: MessageScrollerItemProps) {\n const ready = React.useContext(MessageScrollerAnimationReadyContext)\n const shouldReduceMotion = useReducedMotion()\n const skipEntrance = !ready || shouldReduceMotion\n\n return (\n <MessageScrollerPrimitive.Item\n {...props}\n data-slot=\"message-scroller-item\"\n scrollAnchor={scrollAnchor}\n className={cn(\n 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n className,\n )}\n >\n <MotionDiv\n className=\"w-full min-w-0\"\n variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n initial={skipEntrance ? false : 'initial'}\n animate=\"animate\"\n exit={skipEntrance ? undefined : 'exit'}\n >\n {children}\n </MotionDiv>\n </MessageScrollerPrimitive.Item>\n )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n styleVariant = 'surface',\n color = 'neutral',\n size = 'icon-small',\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n return (\n <MessageScrollerPrimitive.Button\n data-slot=\"message-scroller-button\"\n data-direction={direction}\n direction={direction}\n className={cn(\n 'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n className,\n )}\n render={\n render ?? (\n <Button styleVariant={styleVariant} color={color} size={size} />\n )\n }\n {...props}\n >\n {children ?? (\n <>\n <MaterialSymbol\n name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n />\n <span className=\"sr-only\">\n {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n </span>\n </>\n )}\n </MessageScrollerPrimitive.Button>\n )\n}\n\nexport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,uCAAuCA,MAAM,cAAc,KAAK;AACtE,MAAM,aAAA,GAAA,eAAA,QAAmB,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQH,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAACD,+BAAAA,gBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,WAAD;GACE,WAAU;GACV,UAAUE,+BAAAA,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACG,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
|
|
@@ -11,7 +11,7 @@ import { LazyMotion, domAnimation } from "motion/react";
|
|
|
11
11
|
import { create } from "motion/react-m";
|
|
12
12
|
//#region src/components/message-scroller.tsx
|
|
13
13
|
const MessageScrollerAnimationReadyContext = React$1.createContext(false);
|
|
14
|
-
const
|
|
14
|
+
const MotionDiv = create("div");
|
|
15
15
|
function MessageScrollerProvider(props) {
|
|
16
16
|
const [ready, setReady] = React$1.useState(false);
|
|
17
17
|
React$1.useEffect(() => {
|
|
@@ -47,19 +47,23 @@ function MessageScrollerContent({ className, ...props }) {
|
|
|
47
47
|
...props
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
|
|
50
|
+
function MessageScrollerItem({ className, scrollAnchor = false, children, ...props }) {
|
|
51
51
|
const ready = React$1.useContext(MessageScrollerAnimationReadyContext);
|
|
52
52
|
const shouldReduceMotion = useReducedMotion();
|
|
53
53
|
const skipEntrance = !ready || shouldReduceMotion;
|
|
54
|
-
return /* @__PURE__ */ jsx(
|
|
54
|
+
return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
|
|
55
55
|
...props,
|
|
56
56
|
"data-slot": "message-scroller-item",
|
|
57
57
|
scrollAnchor,
|
|
58
58
|
className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
children: /* @__PURE__ */ jsx(MotionDiv, {
|
|
60
|
+
className: "w-full min-w-0",
|
|
61
|
+
variants: MESSAGE_ANIMATIONS["slide-up"].variants,
|
|
62
|
+
initial: skipEntrance ? false : "initial",
|
|
63
|
+
animate: "animate",
|
|
64
|
+
exit: skipEntrance ? void 0 : "exit",
|
|
65
|
+
children
|
|
66
|
+
})
|
|
63
67
|
});
|
|
64
68
|
}
|
|
65
69
|
function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\n\ntype MessageScrollerItemProps = Omit<\n React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n | 'animate'\n | 'exit'\n | 'initial'\n | 'variants'\n | 'onAnimationStart'\n | 'onDrag'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDragTransitionEnd'\n>\n\
|
|
1
|
+
{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\nconst MotionDiv = create('div')\n\ntype MessageScrollerItemProps = Omit<\n React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n | 'animate'\n | 'exit'\n | 'initial'\n | 'variants'\n | 'onAnimationStart'\n | 'onDrag'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDragTransitionEnd'\n>\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n const [ready, setReady] = React.useState(false)\n\n React.useEffect(() => {\n setReady(true)\n }, [])\n\n return (\n <LazyMotion features={domAnimation} strict>\n <MessageScrollerAnimationReadyContext.Provider value={ready}>\n <MessageScrollerPrimitive.Provider {...props} />\n </MessageScrollerAnimationReadyContext.Provider>\n </LazyMotion>\n )\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n return (\n <MessageScrollerPrimitive.Root\n data-slot=\"message-scroller\"\n className={cn(\n 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n return (\n <MessageScrollerPrimitive.Viewport\n data-slot=\"message-scroller-viewport\"\n // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n // bar collapses to no-scrollbar (spark util) while autoscrolling.\n className={cn(\n 'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n return (\n <MessageScrollerPrimitive.Content\n data-slot=\"message-scroller-content\"\n className={cn('flex h-max min-h-full flex-col gap-8', className)}\n {...props}\n />\n )\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n children,\n ...props\n}: MessageScrollerItemProps) {\n const ready = React.useContext(MessageScrollerAnimationReadyContext)\n const shouldReduceMotion = useReducedMotion()\n const skipEntrance = !ready || shouldReduceMotion\n\n return (\n <MessageScrollerPrimitive.Item\n {...props}\n data-slot=\"message-scroller-item\"\n scrollAnchor={scrollAnchor}\n className={cn(\n 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n className,\n )}\n >\n <MotionDiv\n className=\"w-full min-w-0\"\n variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n initial={skipEntrance ? false : 'initial'}\n animate=\"animate\"\n exit={skipEntrance ? undefined : 'exit'}\n >\n {children}\n </MotionDiv>\n </MessageScrollerPrimitive.Item>\n )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n styleVariant = 'surface',\n color = 'neutral',\n size = 'icon-small',\n ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n return (\n <MessageScrollerPrimitive.Button\n data-slot=\"message-scroller-button\"\n data-direction={direction}\n direction={direction}\n className={cn(\n 'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n className,\n )}\n render={\n render ?? (\n <Button styleVariant={styleVariant} color={color} size={size} />\n )\n }\n {...props}\n >\n {children ?? (\n <>\n <MaterialSymbol\n name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n />\n <span className=\"sr-only\">\n {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n </span>\n </>\n )}\n </MessageScrollerPrimitive.Button>\n )\n}\n\nexport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uCAAuCA,QAAM,cAAc,KAAK;AACtE,MAAM,YAAY,OAAO,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,KAAK;CAE9C,QAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,UAAU;EAAc,QAAA;YAClC,oBAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,oBAACC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAACC,kBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;YAEA,oBAAC,WAAD;GACE,WAAU;GACV,UAAU,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
|
|
@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
6
6
|
|
|
7
7
|
//#region src/components/page-header.d.ts
|
|
8
8
|
declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
9
|
-
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "
|
|
9
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "styleVariant" | "color"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
declare const PageHeaderTitle: ({
|
|
11
11
|
className,
|
|
12
12
|
...props
|
|
@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
6
6
|
|
|
7
7
|
//#region src/components/page-header.d.ts
|
|
8
8
|
declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
|
|
9
|
-
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "
|
|
9
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "styleVariant" | "color"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
declare const PageHeaderTitle: ({
|
|
11
11
|
className,
|
|
12
12
|
...props
|
|
@@ -62,7 +62,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
|
|
|
62
62
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
|
|
63
63
|
render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
64
64
|
"aria-label": ariaLabel ?? label,
|
|
65
|
-
className: "focus-visible:ring-primary
|
|
65
|
+
className: "focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
|
|
66
66
|
type: "button"
|
|
67
67
|
}),
|
|
68
68
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n delay = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n Pick<\n TooltipPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > & {\n hideArrow?: boolean\n variant?: 'default' | 'destructive'\n }\n\nconst TooltipContent = ({\n className,\n hideArrow = false,\n variant = 'default',\n children,\n align,\n alignOffset,\n side,\n sideOffset = 4,\n ...props\n}: TooltipContentProps) => {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n className=\"isolate z-50\"\n side={side}\n sideOffset={sideOffset}\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n data-variant={variant}\n className={cn(\n 'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n // exit: instant (was data-[state=closed]:duration-0)\n 'data-ending-style:opacity-0 data-ending-style:duration-0',\n 'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n 'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n className,\n )}\n {...props}\n >\n {children}\n {!hideArrow && (\n <TooltipPrimitive.Arrow\n data-variant={variant}\n className={cn(\n 'z-50',\n // svg tip points up; rotate per side, overlap 2px for a seamless join\n 'data-[side=bottom]:top-[-8px]',\n 'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n 'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n 'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n 'data-[variant=default]:text-gray-12',\n 'data-[variant=destructive]:text-red-12',\n )}\n >\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n <path\n d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n fill=\"currentColor\"\n />\n </svg>\n </TooltipPrimitive.Arrow>\n )}\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\ninterface InfoTooltipProps {\n content: string\n label: string\n 'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n content,\n label,\n 'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <button\n aria-label={ariaLabel ?? label}\n className=\"focus-visible:ring-primary
|
|
1
|
+
{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n delay = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n Pick<\n TooltipPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > & {\n hideArrow?: boolean\n variant?: 'default' | 'destructive'\n }\n\nconst TooltipContent = ({\n className,\n hideArrow = false,\n variant = 'default',\n children,\n align,\n alignOffset,\n side,\n sideOffset = 4,\n ...props\n}: TooltipContentProps) => {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n className=\"isolate z-50\"\n side={side}\n sideOffset={sideOffset}\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n data-variant={variant}\n className={cn(\n 'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n // exit: instant (was data-[state=closed]:duration-0)\n 'data-ending-style:opacity-0 data-ending-style:duration-0',\n 'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n 'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n className,\n )}\n {...props}\n >\n {children}\n {!hideArrow && (\n <TooltipPrimitive.Arrow\n data-variant={variant}\n className={cn(\n 'z-50',\n // svg tip points up; rotate per side, overlap 2px for a seamless join\n 'data-[side=bottom]:top-[-8px]',\n 'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n 'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n 'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n 'data-[variant=default]:text-gray-12',\n 'data-[variant=destructive]:text-red-12',\n )}\n >\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n <path\n d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n fill=\"currentColor\"\n />\n </svg>\n </TooltipPrimitive.Arrow>\n )}\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\ninterface InfoTooltipProps {\n content: string\n label: string\n 'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n content,\n label,\n 'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <button\n aria-label={ariaLabel ?? label}\n className=\"focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n type=\"button\"\n />\n }\n >\n <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n {content}\n </TooltipContent>\n </Tooltip>\n )\n}\n\nexport {\n Tooltip,\n TooltipTrigger,\n TooltipContent,\n TooltipProvider,\n TooltipPortal,\n InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
|
|
@@ -59,7 +59,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
|
|
|
59
59
|
return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
60
60
|
render: /* @__PURE__ */ jsx("button", {
|
|
61
61
|
"aria-label": ariaLabel ?? label,
|
|
62
|
-
className: "focus-visible:ring-primary
|
|
62
|
+
className: "focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
|
|
63
63
|
type: "button"
|
|
64
64
|
}),
|
|
65
65
|
children: /* @__PURE__ */ jsx(MaterialSymbol, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n delay = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n Pick<\n TooltipPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > & {\n hideArrow?: boolean\n variant?: 'default' | 'destructive'\n }\n\nconst TooltipContent = ({\n className,\n hideArrow = false,\n variant = 'default',\n children,\n align,\n alignOffset,\n side,\n sideOffset = 4,\n ...props\n}: TooltipContentProps) => {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n className=\"isolate z-50\"\n side={side}\n sideOffset={sideOffset}\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n data-variant={variant}\n className={cn(\n 'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n // exit: instant (was data-[state=closed]:duration-0)\n 'data-ending-style:opacity-0 data-ending-style:duration-0',\n 'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n 'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n className,\n )}\n {...props}\n >\n {children}\n {!hideArrow && (\n <TooltipPrimitive.Arrow\n data-variant={variant}\n className={cn(\n 'z-50',\n // svg tip points up; rotate per side, overlap 2px for a seamless join\n 'data-[side=bottom]:top-[-8px]',\n 'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n 'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n 'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n 'data-[variant=default]:text-gray-12',\n 'data-[variant=destructive]:text-red-12',\n )}\n >\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n <path\n d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n fill=\"currentColor\"\n />\n </svg>\n </TooltipPrimitive.Arrow>\n )}\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\ninterface InfoTooltipProps {\n content: string\n label: string\n 'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n content,\n label,\n 'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <button\n aria-label={ariaLabel ?? label}\n className=\"focus-visible:ring-primary
|
|
1
|
+
{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n delay = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n Pick<\n TooltipPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n > & {\n hideArrow?: boolean\n variant?: 'default' | 'destructive'\n }\n\nconst TooltipContent = ({\n className,\n hideArrow = false,\n variant = 'default',\n children,\n align,\n alignOffset,\n side,\n sideOffset = 4,\n ...props\n}: TooltipContentProps) => {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n className=\"isolate z-50\"\n side={side}\n sideOffset={sideOffset}\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n data-variant={variant}\n className={cn(\n 'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\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-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n // exit: instant (was data-[state=closed]:duration-0)\n 'data-ending-style:opacity-0 data-ending-style:duration-0',\n 'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n 'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n className,\n )}\n {...props}\n >\n {children}\n {!hideArrow && (\n <TooltipPrimitive.Arrow\n data-variant={variant}\n className={cn(\n 'z-50',\n // svg tip points up; rotate per side, overlap 2px for a seamless join\n 'data-[side=bottom]:top-[-8px]',\n 'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n 'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n 'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n 'data-[variant=default]:text-gray-12',\n 'data-[variant=destructive]:text-red-12',\n )}\n >\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n <path\n d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n fill=\"currentColor\"\n />\n </svg>\n </TooltipPrimitive.Arrow>\n )}\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\ninterface InfoTooltipProps {\n content: string\n label: string\n 'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n content,\n label,\n 'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n return (\n <Tooltip>\n <TooltipTrigger\n render={\n <button\n aria-label={ariaLabel ?? label}\n className=\"focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n type=\"button\"\n />\n }\n >\n <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n </TooltipTrigger>\n <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n {content}\n </TooltipContent>\n </Tooltip>\n )\n}\n\nexport {\n Tooltip,\n TooltipTrigger,\n TooltipContent,\n TooltipProvider,\n TooltipPortal,\n InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
|
|
@@ -91,7 +91,7 @@ const MaterialSymbol = ({ name, className }) => {
|
|
|
91
91
|
if (!materialSymbolIconNames.includes(name)) console.warn(`[MaterialSymbol] "${name}" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`);
|
|
92
92
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
93
93
|
"aria-hidden": "true",
|
|
94
|
-
className: (0, cnfast.cn)("material-symbols-rounded inline-block size-
|
|
94
|
+
className: (0, cnfast.cn)("material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
|
|
95
95
|
translate: "no",
|
|
96
96
|
children: name
|
|
97
97
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"material-symbol.cjs","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n 'access_time',\n 'add',\n 'alarm',\n 'arrow_downward',\n 'arrow_upward',\n 'auto_awesome',\n 'bar_chart',\n 'battery_0_bar',\n 'battery_1_bar',\n 'battery_2_bar',\n 'battery_3_bar',\n 'battery_4_bar',\n 'battery_5_bar',\n 'battery_6_bar',\n 'battery_charging_20',\n 'battery_charging_30',\n 'battery_charging_50',\n 'battery_charging_60',\n 'battery_charging_80',\n 'battery_charging_90',\n 'battery_charging_full',\n 'battery_full',\n 'bolt',\n 'calendar_month',\n 'cancel',\n 'check',\n 'check_circle',\n 'chevron_left',\n 'chevron_right',\n 'circle',\n 'close',\n 'close_fullscreen',\n 'content_copy',\n 'dashboard_2',\n 'delete',\n 'dishwasher',\n 'drag_indicator',\n 'edit',\n 'edit_square',\n 'electric_bolt',\n 'electric_car',\n 'electrical_services',\n 'ev_station',\n 'expand_more',\n 'heat_pump',\n 'home',\n 'info',\n 'laundry',\n 'layers',\n 'local_fire_department',\n 'more_vert',\n 'open_in_full',\n 'open_in_new',\n 'payments',\n 'pending',\n 'photo_camera',\n 'power',\n 'search',\n 'power_settings_new',\n 'price_change',\n 'recycling',\n 'refresh',\n 'schedule',\n 'settings',\n 'solar_power',\n 'speed',\n 'sunny',\n 'partly_cloudy_day',\n 'cloudy',\n 'rainy',\n 'weather_snowy',\n 'swap_vert',\n 'thermostat',\n 'toggle_on',\n 'track_changes',\n 'trending_down',\n 'trending_up',\n 'tune',\n 'warning',\n 'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n .sort()\n .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n name: MaterialSymbolIconName\n className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n if (!materialSymbolIconNames.includes(name)) {\n console.warn(\n `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n )\n }\n\n return (\n <span\n aria-hidden=\"true\"\n className={cn(\n // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n // utility —
|
|
1
|
+
{"version":3,"file":"material-symbol.cjs","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n 'access_time',\n 'add',\n 'alarm',\n 'arrow_downward',\n 'arrow_upward',\n 'auto_awesome',\n 'bar_chart',\n 'battery_0_bar',\n 'battery_1_bar',\n 'battery_2_bar',\n 'battery_3_bar',\n 'battery_4_bar',\n 'battery_5_bar',\n 'battery_6_bar',\n 'battery_charging_20',\n 'battery_charging_30',\n 'battery_charging_50',\n 'battery_charging_60',\n 'battery_charging_80',\n 'battery_charging_90',\n 'battery_charging_full',\n 'battery_full',\n 'bolt',\n 'calendar_month',\n 'cancel',\n 'check',\n 'check_circle',\n 'chevron_left',\n 'chevron_right',\n 'circle',\n 'close',\n 'close_fullscreen',\n 'content_copy',\n 'dashboard_2',\n 'delete',\n 'dishwasher',\n 'drag_indicator',\n 'edit',\n 'edit_square',\n 'electric_bolt',\n 'electric_car',\n 'electrical_services',\n 'ev_station',\n 'expand_more',\n 'heat_pump',\n 'home',\n 'info',\n 'laundry',\n 'layers',\n 'local_fire_department',\n 'more_vert',\n 'open_in_full',\n 'open_in_new',\n 'payments',\n 'pending',\n 'photo_camera',\n 'power',\n 'search',\n 'power_settings_new',\n 'price_change',\n 'recycling',\n 'refresh',\n 'schedule',\n 'settings',\n 'solar_power',\n 'speed',\n 'sunny',\n 'partly_cloudy_day',\n 'cloudy',\n 'rainy',\n 'weather_snowy',\n 'swap_vert',\n 'thermostat',\n 'toggle_on',\n 'track_changes',\n 'trending_down',\n 'trending_up',\n 'tune',\n 'warning',\n 'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n .sort()\n .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n name: MaterialSymbolIconName\n className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n if (!materialSymbolIconNames.includes(name)) {\n console.warn(\n `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n )\n }\n\n return (\n <span\n aria-hidden=\"true\"\n className={cn(\n // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n // utility — default size is --spark-icon-size. size-[1em] keeps the box tied to the\n // effective font-size so text-[Npx]! overrides don't leave a 20px box around a smaller glyph.\n 'material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n className,\n )}\n translate=\"no\"\n >\n {name}\n </span>\n )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,eAAY;EACZ,YAAA,GAAA,OAAA,IAIE,4IACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}
|
|
@@ -90,7 +90,7 @@ const MaterialSymbol = ({ name, className }) => {
|
|
|
90
90
|
if (!materialSymbolIconNames.includes(name)) console.warn(`[MaterialSymbol] "${name}" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`);
|
|
91
91
|
return /* @__PURE__ */ jsx("span", {
|
|
92
92
|
"aria-hidden": "true",
|
|
93
|
-
className: cn("material-symbols-rounded inline-block size-
|
|
93
|
+
className: cn("material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
|
|
94
94
|
translate: "no",
|
|
95
95
|
children: name
|
|
96
96
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"material-symbol.js","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n 'access_time',\n 'add',\n 'alarm',\n 'arrow_downward',\n 'arrow_upward',\n 'auto_awesome',\n 'bar_chart',\n 'battery_0_bar',\n 'battery_1_bar',\n 'battery_2_bar',\n 'battery_3_bar',\n 'battery_4_bar',\n 'battery_5_bar',\n 'battery_6_bar',\n 'battery_charging_20',\n 'battery_charging_30',\n 'battery_charging_50',\n 'battery_charging_60',\n 'battery_charging_80',\n 'battery_charging_90',\n 'battery_charging_full',\n 'battery_full',\n 'bolt',\n 'calendar_month',\n 'cancel',\n 'check',\n 'check_circle',\n 'chevron_left',\n 'chevron_right',\n 'circle',\n 'close',\n 'close_fullscreen',\n 'content_copy',\n 'dashboard_2',\n 'delete',\n 'dishwasher',\n 'drag_indicator',\n 'edit',\n 'edit_square',\n 'electric_bolt',\n 'electric_car',\n 'electrical_services',\n 'ev_station',\n 'expand_more',\n 'heat_pump',\n 'home',\n 'info',\n 'laundry',\n 'layers',\n 'local_fire_department',\n 'more_vert',\n 'open_in_full',\n 'open_in_new',\n 'payments',\n 'pending',\n 'photo_camera',\n 'power',\n 'search',\n 'power_settings_new',\n 'price_change',\n 'recycling',\n 'refresh',\n 'schedule',\n 'settings',\n 'solar_power',\n 'speed',\n 'sunny',\n 'partly_cloudy_day',\n 'cloudy',\n 'rainy',\n 'weather_snowy',\n 'swap_vert',\n 'thermostat',\n 'toggle_on',\n 'track_changes',\n 'trending_down',\n 'trending_up',\n 'tune',\n 'warning',\n 'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n .sort()\n .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n name: MaterialSymbolIconName\n className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n if (!materialSymbolIconNames.includes(name)) {\n console.warn(\n `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n )\n }\n\n return (\n <span\n aria-hidden=\"true\"\n className={cn(\n // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n // utility —
|
|
1
|
+
{"version":3,"file":"material-symbol.js","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n 'access_time',\n 'add',\n 'alarm',\n 'arrow_downward',\n 'arrow_upward',\n 'auto_awesome',\n 'bar_chart',\n 'battery_0_bar',\n 'battery_1_bar',\n 'battery_2_bar',\n 'battery_3_bar',\n 'battery_4_bar',\n 'battery_5_bar',\n 'battery_6_bar',\n 'battery_charging_20',\n 'battery_charging_30',\n 'battery_charging_50',\n 'battery_charging_60',\n 'battery_charging_80',\n 'battery_charging_90',\n 'battery_charging_full',\n 'battery_full',\n 'bolt',\n 'calendar_month',\n 'cancel',\n 'check',\n 'check_circle',\n 'chevron_left',\n 'chevron_right',\n 'circle',\n 'close',\n 'close_fullscreen',\n 'content_copy',\n 'dashboard_2',\n 'delete',\n 'dishwasher',\n 'drag_indicator',\n 'edit',\n 'edit_square',\n 'electric_bolt',\n 'electric_car',\n 'electrical_services',\n 'ev_station',\n 'expand_more',\n 'heat_pump',\n 'home',\n 'info',\n 'laundry',\n 'layers',\n 'local_fire_department',\n 'more_vert',\n 'open_in_full',\n 'open_in_new',\n 'payments',\n 'pending',\n 'photo_camera',\n 'power',\n 'search',\n 'power_settings_new',\n 'price_change',\n 'recycling',\n 'refresh',\n 'schedule',\n 'settings',\n 'solar_power',\n 'speed',\n 'sunny',\n 'partly_cloudy_day',\n 'cloudy',\n 'rainy',\n 'weather_snowy',\n 'swap_vert',\n 'thermostat',\n 'toggle_on',\n 'track_changes',\n 'trending_down',\n 'trending_up',\n 'tune',\n 'warning',\n 'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n .sort()\n .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n name: MaterialSymbolIconName\n className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n if (!materialSymbolIconNames.includes(name)) {\n console.warn(\n `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n )\n }\n\n return (\n <span\n aria-hidden=\"true\"\n className={cn(\n // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n // utility — default size is --spark-icon-size. size-[1em] keeps the box tied to the\n // effective font-size so text-[Npx]! overrides don't leave a 20px box around a smaller glyph.\n 'material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n className,\n )}\n translate=\"no\"\n >\n {name}\n </span>\n )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,WAAW,GAIT,4IACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}
|