@epilot/spark-ui 0.27.0 → 0.27.1
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/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button.cjs +4 -3
- package/dist/components/button.cjs.map +1 -1
- package/dist/components/button.d.cts +3 -3
- package/dist/components/button.d.ts +3 -3
- package/dist/components/button.js +4 -3
- package/dist/components/button.js.map +1 -1
- package/dist/components/empty-state.d.cts +1 -1
- package/dist/components/empty-state.d.ts +1 -1
- package/dist/components/input-group.d.cts +1 -1
- package/dist/components/input-group.d.ts +1 -1
- package/dist/components/page-header.d.cts +1 -1
- package/dist/components/page-header.d.ts +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({
|
|
@@ -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?: "image" | "icon" | 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?: "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({
|
|
@@ -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?: "image" | "icon" | null | undefined;
|
|
24
24
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
25
25
|
declare function AttachmentMedia({
|
|
26
26
|
className,
|
|
@@ -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" | "ghost" | "outline" | "destructive" | "secondary" | "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" | "ghost" | "outline" | "destructive" | "secondary" | "muted" | "tinted" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function Bubble({
|
|
16
16
|
variant,
|
|
@@ -47,13 +47,14 @@ const defaultStyleByEmphasis = {
|
|
|
47
47
|
};
|
|
48
48
|
function useEmphasisLook(emphasis, styleVariant, color) {
|
|
49
49
|
const roles = require_components_theme.useTheme().buttons;
|
|
50
|
-
|
|
50
|
+
const resolved = emphasis ?? (styleVariant === void 0 && color === void 0 ? "primary" : void 0);
|
|
51
|
+
if (!resolved) return {
|
|
51
52
|
styleVariant,
|
|
52
53
|
color
|
|
53
54
|
};
|
|
54
|
-
const role = roles?.[
|
|
55
|
+
const role = roles?.[resolved];
|
|
55
56
|
return {
|
|
56
|
-
styleVariant: styleVariant ?? role?.style ?? defaultStyleByEmphasis[
|
|
57
|
+
styleVariant: styleVariant ?? role?.style ?? defaultStyleByEmphasis[resolved],
|
|
57
58
|
color: color ?? role?.color
|
|
58
59
|
};
|
|
59
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs","names":["useTheme","React","ButtonPrimitive","accentByColor"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type {\n SparkButtonColor,\n SparkButtonEmphasis,\n SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useTheme } from './theme'\n\nconst buttonVariants = cva(\n 'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_[data-slot=spinner]]:text-current [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))',\n secondary:\n 'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n bare: 'rounded-none! text-gray-12 outline-hidden!',\n destructive:\n 'bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive',\n },\n color: {\n accent: '',\n primary: '',\n neutral: '',\n danger: 'focus-visible:ring-destructive',\n destructive: 'focus-visible:ring-destructive',\n },\n size: {\n small:\n 'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n default:\n 'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n medium:\n 'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n 'icon-small':\n 'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n 'icon-medium':\n 'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n },\n)\n\nconst buttonRecipe =\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nconst mediaRecipe =\n 'bg-(--spark-button-media-bg,color-mix(in_srgb,black_50%,transparent)) text-(--spark-button-media-fg,white) shadow-none backdrop-blur-md hover:bg-(--spark-button-media-bg-hover,color-mix(in_srgb,black_65%,transparent))'\n\nexport type { SparkButtonColor, SparkButtonEmphasis }\n\nconst defaultStyleByEmphasis: Record<\n SparkButtonEmphasis,\n SparkStyle | undefined\n> = {\n primary: undefined,\n secondary: 'soft',\n tertiary: 'ghost',\n}\n\nfunction useEmphasisLook(\n emphasis: SparkButtonEmphasis | undefined,\n styleVariant: ButtonProps['styleVariant'],\n color: SparkButtonColor | undefined,\n) {\n const roles = useTheme().buttons\n if (!
|
|
1
|
+
{"version":3,"file":"button.cjs","names":["useTheme","React","ButtonPrimitive","accentByColor"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type {\n SparkButtonColor,\n SparkButtonEmphasis,\n SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useTheme } from './theme'\n\nconst buttonVariants = cva(\n 'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_[data-slot=spinner]]:text-current [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))',\n secondary:\n 'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n bare: 'rounded-none! text-gray-12 outline-hidden!',\n destructive:\n 'bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive',\n },\n color: {\n accent: '',\n primary: '',\n neutral: '',\n danger: 'focus-visible:ring-destructive',\n destructive: 'focus-visible:ring-destructive',\n },\n size: {\n small:\n 'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n default:\n 'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n medium:\n 'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n 'icon-small':\n 'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n 'icon-medium':\n 'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n },\n)\n\nconst buttonRecipe =\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nconst mediaRecipe =\n 'bg-(--spark-button-media-bg,color-mix(in_srgb,black_50%,transparent)) text-(--spark-button-media-fg,white) shadow-none backdrop-blur-md hover:bg-(--spark-button-media-bg-hover,color-mix(in_srgb,black_65%,transparent))'\n\nexport type { SparkButtonColor, SparkButtonEmphasis }\n\nconst defaultStyleByEmphasis: Record<\n SparkButtonEmphasis,\n SparkStyle | undefined\n> = {\n primary: undefined,\n secondary: 'soft',\n tertiary: 'ghost',\n}\n\nfunction useEmphasisLook(\n emphasis: SparkButtonEmphasis | undefined,\n styleVariant: ButtonProps['styleVariant'],\n color: SparkButtonColor | undefined,\n) {\n const roles = useTheme().buttons\n const resolved =\n emphasis ??\n (styleVariant === undefined && color === undefined ? 'primary' : undefined)\n if (!resolved) return { styleVariant, color }\n const role = roles?.[resolved]\n return {\n styleVariant:\n styleVariant ?? role?.style ?? defaultStyleByEmphasis[resolved],\n color: color ?? role?.color,\n }\n}\n\nexport interface ButtonProps\n extends\n Omit<React.ComponentProps<typeof ButtonPrimitive>, 'ref'>,\n Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n /** `media`: translucent dark fill for actions over images; ignores `color`. */\n styleVariant?: SparkStyle | 'media'\n color?: SparkButtonColor\n /** Draws the look the enclosing `<Theme buttons>` gives this role; `styleVariant` / `color` still win. Defaults to `primary` when neither is set. */\n emphasis?: SparkButtonEmphasis\n /**\n * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n * (`solid | soft | surface | ghost | outline`) and `color`\n * (`primary | neutral | destructive`) instead. The `variant` axis on\n * `buttonVariants` exists only for class-string callers.\n */\n variant?: never\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n className,\n emphasis,\n styleVariant: ownStyleVariant,\n color: ownColor,\n size,\n render,\n nativeButton,\n // oxlint-disable-next-line typescript/no-deprecated -- strips deprecated back-compat prop before DOM spread\n variant: _variant,\n ...props\n },\n ref,\n) {\n const { styleVariant, color } = useEmphasisLook(\n emphasis,\n ownStyleVariant,\n ownColor,\n )\n const media = styleVariant === 'media'\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook && !media ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color && !media ? accentByColor[color] : undefined\n\n return (\n <ButtonPrimitive\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n nativeButton={nativeButton ?? render === undefined}\n render={render}\n className={cn(\n buttonVariants({ size, color: media ? undefined : color }),\n buttonRecipe,\n media && mediaRecipe,\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n})\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,kBAAA,GAAA,yBAAA,KACJ,+fACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;EACJ;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,QAAQ;GACR,aAAa;EACf;EACA,MAAM;GACJ,OACE;GACF,SACE;GACF,QACE;GACF,cACE;GACF,MAAM;GACN,eACE;EACJ;CACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,eACJ;AAEF,MAAM,cACJ;AAIF,MAAM,yBAGF;CACF,SAAS,KAAA;CACT,WAAW;CACX,UAAU;AACZ;AAEA,SAAS,gBACP,UACA,cACA,OACA;CACA,MAAM,QAAQA,yBAAAA,SAAS,EAAE;CACzB,MAAM,WACJ,aACC,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAAY,YAAY,KAAA;CACnE,IAAI,CAAC,UAAU,OAAO;EAAE;EAAc;CAAM;CAC5C,MAAM,OAAO,QAAQ;CACrB,OAAO;EACL,cACE,gBAAgB,MAAM,SAAS,uBAAuB;EACxD,OAAO,SAAS,MAAM;CACxB;AACF;AAqBA,MAAM,SAASC,MAAM,WAA2C,SAAS,OACvE,EACE,WACA,UACA,cAAc,iBACd,OAAO,UACP,MACA,QACA,cAEA,SAAS,UACT,GAAG,SAEL,KACA;CACA,MAAM,EAAE,cAAc,UAAU,gBAC9B,UACA,iBACA,QACF;CACA,MAAM,QAAQ,iBAAiB;CAK/B,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,QAAD;EACE,eANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,MAC3B,CAAC,QAAS,gBAAgB,UAAW,KAAA;EAM9D,qBALoB,SAAS,CAAC,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAM7D,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,YAAA,GAAA,GAAA,IACE,eAAe;GAAE;GAAM,OAAO,QAAQ,KAAA,IAAY;EAAM,CAAC,GACzD,cACA,SAAS,aACT,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,OAAO,cAAc"}
|
|
@@ -8,14 +8,14 @@ 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?: "primary" | "accent" | "neutral" | "danger" | "destructive" | null | undefined;
|
|
12
|
+
size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
|
|
15
15
|
/** `media`: translucent dark fill for actions over images; ignores `color`. */
|
|
16
16
|
styleVariant?: SparkStyle | 'media';
|
|
17
17
|
color?: SparkButtonColor;
|
|
18
|
-
/** Draws the look the enclosing `<Theme buttons>` gives this role; `styleVariant` / `color` still win. */
|
|
18
|
+
/** Draws the look the enclosing `<Theme buttons>` gives this role; `styleVariant` / `color` still win. Defaults to `primary` when neither is set. */
|
|
19
19
|
emphasis?: SparkButtonEmphasis;
|
|
20
20
|
/**
|
|
21
21
|
* @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`
|
|
@@ -8,14 +8,14 @@ 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?: "primary" | "accent" | "neutral" | "danger" | "destructive" | null | undefined;
|
|
12
|
+
size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
|
|
15
15
|
/** `media`: translucent dark fill for actions over images; ignores `color`. */
|
|
16
16
|
styleVariant?: SparkStyle | 'media';
|
|
17
17
|
color?: SparkButtonColor;
|
|
18
|
-
/** Draws the look the enclosing `<Theme buttons>` gives this role; `styleVariant` / `color` still win. */
|
|
18
|
+
/** Draws the look the enclosing `<Theme buttons>` gives this role; `styleVariant` / `color` still win. Defaults to `primary` when neither is set. */
|
|
19
19
|
emphasis?: SparkButtonEmphasis;
|
|
20
20
|
/**
|
|
21
21
|
* @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`
|
|
@@ -44,13 +44,14 @@ const defaultStyleByEmphasis = {
|
|
|
44
44
|
};
|
|
45
45
|
function useEmphasisLook(emphasis, styleVariant, color) {
|
|
46
46
|
const roles = useTheme().buttons;
|
|
47
|
-
|
|
47
|
+
const resolved = emphasis ?? (styleVariant === void 0 && color === void 0 ? "primary" : void 0);
|
|
48
|
+
if (!resolved) return {
|
|
48
49
|
styleVariant,
|
|
49
50
|
color
|
|
50
51
|
};
|
|
51
|
-
const role = roles?.[
|
|
52
|
+
const role = roles?.[resolved];
|
|
52
53
|
return {
|
|
53
|
-
styleVariant: styleVariant ?? role?.style ?? defaultStyleByEmphasis[
|
|
54
|
+
styleVariant: styleVariant ?? role?.style ?? defaultStyleByEmphasis[resolved],
|
|
54
55
|
color: color ?? role?.color
|
|
55
56
|
};
|
|
56
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":["React","ButtonPrimitive"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type {\n SparkButtonColor,\n SparkButtonEmphasis,\n SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useTheme } from './theme'\n\nconst buttonVariants = cva(\n 'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_[data-slot=spinner]]:text-current [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))',\n secondary:\n 'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n bare: 'rounded-none! text-gray-12 outline-hidden!',\n destructive:\n 'bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive',\n },\n color: {\n accent: '',\n primary: '',\n neutral: '',\n danger: 'focus-visible:ring-destructive',\n destructive: 'focus-visible:ring-destructive',\n },\n size: {\n small:\n 'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n default:\n 'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n medium:\n 'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n 'icon-small':\n 'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n 'icon-medium':\n 'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n },\n)\n\nconst buttonRecipe =\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nconst mediaRecipe =\n 'bg-(--spark-button-media-bg,color-mix(in_srgb,black_50%,transparent)) text-(--spark-button-media-fg,white) shadow-none backdrop-blur-md hover:bg-(--spark-button-media-bg-hover,color-mix(in_srgb,black_65%,transparent))'\n\nexport type { SparkButtonColor, SparkButtonEmphasis }\n\nconst defaultStyleByEmphasis: Record<\n SparkButtonEmphasis,\n SparkStyle | undefined\n> = {\n primary: undefined,\n secondary: 'soft',\n tertiary: 'ghost',\n}\n\nfunction useEmphasisLook(\n emphasis: SparkButtonEmphasis | undefined,\n styleVariant: ButtonProps['styleVariant'],\n color: SparkButtonColor | undefined,\n) {\n const roles = useTheme().buttons\n if (!
|
|
1
|
+
{"version":3,"file":"button.js","names":["React","ButtonPrimitive"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type {\n SparkButtonColor,\n SparkButtonEmphasis,\n SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useTheme } from './theme'\n\nconst buttonVariants = cva(\n 'group/button touch-target inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none [&_[data-slot=spinner]]:text-current [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover))',\n secondary:\n 'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--neutral-a7)] hover:bg-gray-a3',\n tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n bare: 'rounded-none! text-gray-12 outline-hidden!',\n destructive:\n 'bg-destructive-soft text-destructive-soft-foreground hover:bg-destructive-soft-hover focus-visible:ring-destructive',\n },\n color: {\n accent: '',\n primary: '',\n neutral: '',\n danger: 'focus-visible:ring-destructive',\n destructive: 'focus-visible:ring-destructive',\n },\n size: {\n small:\n 'h-9 px-3 text-sm [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n default:\n 'h-10 px-3 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n medium:\n 'h-11 px-4 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n 'icon-small':\n 'size-9 [--spark-icon-size:16px] [&_svg:not([class*=size-])]:size-4',\n icon: 'size-10 [--spark-icon-size:20px] [&_svg:not([class*=size-])]:size-5',\n 'icon-medium':\n 'size-11 [--spark-icon-size:24px] [&_svg:not([class*=size-])]:size-6',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n },\n)\n\nconst buttonRecipe =\n 'bg-(--spark-style-bg,var(--color-primary)) text-(--spark-style-fg,var(--color-primary-foreground)) hover:bg-(--spark-style-bg-hover,var(--color-primary-hover)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nconst mediaRecipe =\n 'bg-(--spark-button-media-bg,color-mix(in_srgb,black_50%,transparent)) text-(--spark-button-media-fg,white) shadow-none backdrop-blur-md hover:bg-(--spark-button-media-bg-hover,color-mix(in_srgb,black_65%,transparent))'\n\nexport type { SparkButtonColor, SparkButtonEmphasis }\n\nconst defaultStyleByEmphasis: Record<\n SparkButtonEmphasis,\n SparkStyle | undefined\n> = {\n primary: undefined,\n secondary: 'soft',\n tertiary: 'ghost',\n}\n\nfunction useEmphasisLook(\n emphasis: SparkButtonEmphasis | undefined,\n styleVariant: ButtonProps['styleVariant'],\n color: SparkButtonColor | undefined,\n) {\n const roles = useTheme().buttons\n const resolved =\n emphasis ??\n (styleVariant === undefined && color === undefined ? 'primary' : undefined)\n if (!resolved) return { styleVariant, color }\n const role = roles?.[resolved]\n return {\n styleVariant:\n styleVariant ?? role?.style ?? defaultStyleByEmphasis[resolved],\n color: color ?? role?.color,\n }\n}\n\nexport interface ButtonProps\n extends\n Omit<React.ComponentProps<typeof ButtonPrimitive>, 'ref'>,\n Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n /** `media`: translucent dark fill for actions over images; ignores `color`. */\n styleVariant?: SparkStyle | 'media'\n color?: SparkButtonColor\n /** Draws the look the enclosing `<Theme buttons>` gives this role; `styleVariant` / `color` still win. Defaults to `primary` when neither is set. */\n emphasis?: SparkButtonEmphasis\n /**\n * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n * (`solid | soft | surface | ghost | outline`) and `color`\n * (`primary | neutral | destructive`) instead. The `variant` axis on\n * `buttonVariants` exists only for class-string callers.\n */\n variant?: never\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n className,\n emphasis,\n styleVariant: ownStyleVariant,\n color: ownColor,\n size,\n render,\n nativeButton,\n // oxlint-disable-next-line typescript/no-deprecated -- strips deprecated back-compat prop before DOM spread\n variant: _variant,\n ...props\n },\n ref,\n) {\n const { styleVariant, color } = useEmphasisLook(\n emphasis,\n ownStyleVariant,\n ownColor,\n )\n const media = styleVariant === 'media'\n const hasLook = styleVariant !== undefined || color !== undefined\n const dataStyle = hasLook && !media ? (styleVariant ?? 'solid') : undefined\n const dataAccentColor = color && !media ? accentByColor[color] : undefined\n\n return (\n <ButtonPrimitive\n data-style={dataStyle}\n data-accent-color={dataAccentColor}\n nativeButton={nativeButton ?? render === undefined}\n render={render}\n className={cn(\n buttonVariants({ size, color: media ? undefined : color }),\n buttonRecipe,\n media && mediaRecipe,\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n})\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;AAcA,MAAM,iBAAiB,IACrB,+fACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;EACJ;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,QAAQ;GACR,aAAa;EACf;EACA,MAAM;GACJ,OACE;GACF,SACE;GACF,QACE;GACF,cACE;GACF,MAAM;GACN,eACE;EACJ;CACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;AAEA,MAAM,eACJ;AAEF,MAAM,cACJ;AAIF,MAAM,yBAGF;CACF,SAAS,KAAA;CACT,WAAW;CACX,UAAU;AACZ;AAEA,SAAS,gBACP,UACA,cACA,OACA;CACA,MAAM,QAAQ,SAAS,EAAE;CACzB,MAAM,WACJ,aACC,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAAY,YAAY,KAAA;CACnE,IAAI,CAAC,UAAU,OAAO;EAAE;EAAc;CAAM;CAC5C,MAAM,OAAO,QAAQ;CACrB,OAAO;EACL,cACE,gBAAgB,MAAM,SAAS,uBAAuB;EACxD,OAAO,SAAS,MAAM;CACxB;AACF;AAqBA,MAAM,SAASA,QAAM,WAA2C,SAAS,OACvE,EACE,WACA,UACA,cAAc,iBACd,OAAO,UACP,MACA,QACA,cAEA,SAAS,UACT,GAAG,SAEL,KACA;CACA,MAAM,EAAE,cAAc,UAAU,gBAC9B,UACA,iBACA,QACF;CACA,MAAM,QAAQ,iBAAiB;CAK/B,OACE,oBAACC,UAAD;EACE,eANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,MAC3B,CAAC,QAAS,gBAAgB,UAAW,KAAA;EAM9D,qBALoB,SAAS,CAAC,QAAQ,cAAc,SAAS,KAAA;EAM7D,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,WAAW,GACT,eAAe;GAAE;GAAM,OAAO,QAAQ,KAAA,IAAY;EAAM,CAAC,GACzD,cACA,SAAS,aACT,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL,CAAC;AAED,OAAO,cAAc"}
|
|
@@ -7,7 +7,7 @@ import { SparkIcon } from "@epilot/spark-icons";
|
|
|
7
7
|
//#region src/components/empty-state.d.ts
|
|
8
8
|
declare const emptyStateVariants: (props?: ({
|
|
9
9
|
variant?: "ghost" | "dashed" | null | undefined;
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "default" | "sm" | null | undefined;
|
|
11
11
|
layout?: "inline" | "stacked" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
type EmptyStateVariants = VariantProps<typeof emptyStateVariants>;
|
|
@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
7
7
|
//#region src/components/empty-state.d.ts
|
|
8
8
|
declare const emptyStateVariants: (props?: ({
|
|
9
9
|
variant?: "ghost" | "dashed" | null | undefined;
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "default" | "sm" | null | undefined;
|
|
11
11
|
layout?: "inline" | "stacked" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
type EmptyStateVariants = VariantProps<typeof emptyStateVariants>;
|
|
@@ -10,7 +10,7 @@ declare function InputGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const inputGroupAddonVariants: (props?: ({
|
|
13
|
-
align?: "inline-
|
|
13
|
+
align?: "inline-start" | "inline-end" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function InputGroupAddon({
|
|
16
16
|
className,
|
|
@@ -10,7 +10,7 @@ declare function InputGroup({
|
|
|
10
10
|
...props
|
|
11
11
|
}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
declare const inputGroupAddonVariants: (props?: ({
|
|
13
|
-
align?: "inline-
|
|
13
|
+
align?: "inline-start" | "inline-end" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
declare function InputGroupAddon({
|
|
16
16
|
className,
|
|
@@ -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, "
|
|
9
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & 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, "
|
|
9
|
+
declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
declare const PageHeaderTitle: ({
|
|
11
11
|
className,
|
|
12
12
|
...props
|