@slugbase/ui 0.0.0
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/.turbo/turbo-build.log +4 -0
- package/.turbo/turbo-lint.log +4 -0
- package/.turbo/turbo-typecheck.log +4 -0
- package/dist/components/AppShell.d.ts +17 -0
- package/dist/components/AppShell.d.ts.map +1 -0
- package/dist/components/AppShell.js +11 -0
- package/dist/components/AppShell.js.map +1 -0
- package/dist/components/Badge.d.ts +13 -0
- package/dist/components/Badge.d.ts.map +1 -0
- package/dist/components/Badge.js +21 -0
- package/dist/components/Badge.js.map +1 -0
- package/dist/components/Button.d.ts +11 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/Button.js +21 -0
- package/dist/components/Button.js.map +1 -0
- package/dist/components/Checkbox.d.ts +16 -0
- package/dist/components/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox.js +19 -0
- package/dist/components/Checkbox.js.map +1 -0
- package/dist/components/ColorPicker.d.ts +14 -0
- package/dist/components/ColorPicker.d.ts.map +1 -0
- package/dist/components/ColorPicker.js +29 -0
- package/dist/components/ColorPicker.js.map +1 -0
- package/dist/components/ConfirmDialog.d.ts +17 -0
- package/dist/components/ConfirmDialog.d.ts.map +1 -0
- package/dist/components/ConfirmDialog.js +8 -0
- package/dist/components/ConfirmDialog.js.map +1 -0
- package/dist/components/Dialog.d.ts +15 -0
- package/dist/components/Dialog.d.ts.map +1 -0
- package/dist/components/Dialog.js +12 -0
- package/dist/components/Dialog.js.map +1 -0
- package/dist/components/EmptyState.d.ts +12 -0
- package/dist/components/EmptyState.d.ts.map +1 -0
- package/dist/components/EmptyState.js +6 -0
- package/dist/components/EmptyState.js.map +1 -0
- package/dist/components/FieldError.d.ts +7 -0
- package/dist/components/FieldError.d.ts.map +1 -0
- package/dist/components/FieldError.js +5 -0
- package/dist/components/FieldError.js.map +1 -0
- package/dist/components/FolderGlyph.d.ts +8 -0
- package/dist/components/FolderGlyph.d.ts.map +1 -0
- package/dist/components/FolderGlyph.js +14 -0
- package/dist/components/FolderGlyph.js.map +1 -0
- package/dist/components/IconButton.d.ts +14 -0
- package/dist/components/IconButton.d.ts.map +1 -0
- package/dist/components/IconButton.js +15 -0
- package/dist/components/IconButton.js.map +1 -0
- package/dist/components/IconPicker.d.ts +16 -0
- package/dist/components/IconPicker.d.ts.map +1 -0
- package/dist/components/IconPicker.js +32 -0
- package/dist/components/IconPicker.js.map +1 -0
- package/dist/components/Input.d.ts +10 -0
- package/dist/components/Input.d.ts.map +1 -0
- package/dist/components/Input.js +33 -0
- package/dist/components/Input.js.map +1 -0
- package/dist/components/Kbd.d.ts +11 -0
- package/dist/components/Kbd.d.ts.map +1 -0
- package/dist/components/Kbd.js +18 -0
- package/dist/components/Kbd.js.map +1 -0
- package/dist/components/Label.d.ts +6 -0
- package/dist/components/Label.d.ts.map +1 -0
- package/dist/components/Label.js +5 -0
- package/dist/components/Label.js.map +1 -0
- package/dist/components/Popover.d.ts +14 -0
- package/dist/components/Popover.d.ts.map +1 -0
- package/dist/components/Popover.js +9 -0
- package/dist/components/Popover.js.map +1 -0
- package/dist/components/Skeleton.d.ts +22 -0
- package/dist/components/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton.js +14 -0
- package/dist/components/Skeleton.js.map +1 -0
- package/dist/components/SlugBadge.d.ts +13 -0
- package/dist/components/SlugBadge.d.ts.map +1 -0
- package/dist/components/SlugBadge.js +17 -0
- package/dist/components/SlugBadge.js.map +1 -0
- package/dist/components/Tag.d.ts +11 -0
- package/dist/components/Tag.d.ts.map +1 -0
- package/dist/components/Tag.js +16 -0
- package/dist/components/Tag.js.map +1 -0
- package/dist/components/ThemeSwitcher.d.ts +11 -0
- package/dist/components/ThemeSwitcher.d.ts.map +1 -0
- package/dist/components/ThemeSwitcher.js +25 -0
- package/dist/components/ThemeSwitcher.js.map +1 -0
- package/dist/components/ToastProvider.d.ts +19 -0
- package/dist/components/ToastProvider.d.ts.map +1 -0
- package/dist/components/ToastProvider.js +62 -0
- package/dist/components/ToastProvider.js.map +1 -0
- package/dist/components/Tooltip.d.ts +13 -0
- package/dist/components/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip.js +9 -0
- package/dist/components/Tooltip.js.map +1 -0
- package/dist/components/auth-kit.d.ts +59 -0
- package/dist/components/auth-kit.d.ts.map +1 -0
- package/dist/components/auth-kit.js +101 -0
- package/dist/components/auth-kit.js.map +1 -0
- package/dist/constants.d.ts +2 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/constants.js +2 -0
- package/dist/constants.js.map +1 -0
- package/dist/icons/folder-icon-names.d.ts +4 -0
- package/dist/icons/folder-icon-names.d.ts.map +1 -0
- package/dist/icons/folder-icon-names.js +164 -0
- package/dist/icons/folder-icon-names.js.map +1 -0
- package/dist/icons/lucide-icon.d.ts +8 -0
- package/dist/icons/lucide-icon.d.ts.map +1 -0
- package/dist/icons/lucide-icon.js +38 -0
- package/dist/icons/lucide-icon.js.map +1 -0
- package/dist/index.d.ts +32 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +31 -0
- package/dist/index.js.map +1 -0
- package/dist/tailwind/token-theme.d.ts +167 -0
- package/dist/tailwind/token-theme.d.ts.map +1 -0
- package/dist/tailwind/token-theme.js +109 -0
- package/dist/tailwind/token-theme.js.map +1 -0
- package/dist/theme/resolve-theme.d.ts +6 -0
- package/dist/theme/resolve-theme.d.ts.map +1 -0
- package/dist/theme/resolve-theme.js +24 -0
- package/dist/theme/resolve-theme.js.map +1 -0
- package/dist/theme/theme-context.d.ts +15 -0
- package/dist/theme/theme-context.d.ts.map +1 -0
- package/dist/theme/theme-context.js +51 -0
- package/dist/theme/theme-context.js.map +1 -0
- package/dist/theme/theme-types.d.ts +5 -0
- package/dist/theme/theme-types.d.ts.map +1 -0
- package/dist/theme/theme-types.js +3 -0
- package/dist/theme/theme-types.js.map +1 -0
- package/package.json +55 -0
- package/postcss.config.js +6 -0
- package/src/components/AppShell.spec.tsx +28 -0
- package/src/components/AppShell.tsx +49 -0
- package/src/components/Badge.tsx +41 -0
- package/src/components/Button.tsx +56 -0
- package/src/components/Checkbox.tsx +70 -0
- package/src/components/ColorPicker.spec.tsx +53 -0
- package/src/components/ColorPicker.tsx +87 -0
- package/src/components/ConfirmDialog.spec.tsx +44 -0
- package/src/components/ConfirmDialog.tsx +67 -0
- package/src/components/Dialog.tsx +63 -0
- package/src/components/EmptyState.spec.tsx +22 -0
- package/src/components/EmptyState.tsx +54 -0
- package/src/components/FieldError.tsx +19 -0
- package/src/components/FolderGlyph.tsx +38 -0
- package/src/components/IconButton.tsx +42 -0
- package/src/components/IconPicker.spec.tsx +54 -0
- package/src/components/IconPicker.tsx +132 -0
- package/src/components/Input.tsx +76 -0
- package/src/components/Kbd.tsx +30 -0
- package/src/components/Label.tsx +17 -0
- package/src/components/Popover.tsx +35 -0
- package/src/components/Skeleton.spec.tsx +18 -0
- package/src/components/Skeleton.tsx +94 -0
- package/src/components/SlugBadge.tsx +35 -0
- package/src/components/Tag.tsx +31 -0
- package/src/components/ThemeSwitcher.tsx +60 -0
- package/src/components/ToastProvider.spec.tsx +60 -0
- package/src/components/ToastProvider.tsx +167 -0
- package/src/components/Tooltip.tsx +33 -0
- package/src/components/__snapshots__/AppShell.spec.tsx.snap +41 -0
- package/src/components/auth-kit.spec.tsx +24 -0
- package/src/components/auth-kit.tsx +475 -0
- package/src/constants.ts +1 -0
- package/src/icons/folder-icon-names.ts +165 -0
- package/src/icons/lucide-icon.spec.ts +32 -0
- package/src/icons/lucide-icon.tsx +47 -0
- package/src/index.ts +100 -0
- package/src/styles/app.css +5 -0
- package/src/styles/colors-and-type.css +140 -0
- package/src/styles/ibm-plex-fonts.css +8 -0
- package/src/tailwind/token-theme.spec.ts +13 -0
- package/src/tailwind/token-theme.ts +114 -0
- package/src/theme/resolve-theme.spec.ts +17 -0
- package/src/theme/resolve-theme.ts +30 -0
- package/src/theme/theme-context.tsx +99 -0
- package/src/theme/theme-types.ts +7 -0
- package/tailwind.config.ts +11 -0
- package/tsconfig.build.json +4 -0
- package/tsconfig.build.tsbuildinfo +1 -0
- package/tsconfig.json +11 -0
- package/tsconfig.tsbuildinfo +1 -0
- package/vitest.config.ts +8 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type AppShellProps = {
|
|
3
|
+
/** 248px left sidebar content */
|
|
4
|
+
sidebar: ReactNode;
|
|
5
|
+
/** 52px fixed-height top bar content */
|
|
6
|
+
topBar: ReactNode;
|
|
7
|
+
/** Scrollable main content area */
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Base signed-in layout shell.
|
|
12
|
+
* Grid: 248px sidebar | flexible main column with 52px topbar + scrollable content.
|
|
13
|
+
* Layout is viewport-locked (h-screen, overflow-hidden) - scroll lives inside the
|
|
14
|
+
* main content area only (spec §9.3.1).
|
|
15
|
+
*/
|
|
16
|
+
export declare function AppShell({ sidebar, topBar, children }: AppShellProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
//# sourceMappingURL=AppShell.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/components/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,iCAAiC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,MAAM,EAAE,SAAS,CAAC;IAClB,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,aAAa,2CA+BpE"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Base signed-in layout shell.
|
|
4
|
+
* Grid: 248px sidebar | flexible main column with 52px topbar + scrollable content.
|
|
5
|
+
* Layout is viewport-locked (h-screen, overflow-hidden) - scroll lives inside the
|
|
6
|
+
* main content area only (spec §9.3.1).
|
|
7
|
+
*/
|
|
8
|
+
export function AppShell({ sidebar, topBar, children }) {
|
|
9
|
+
return (_jsxs("div", { className: "grid h-screen overflow-hidden bg-canvas font-sans text-body text-fg", style: { gridTemplateColumns: "248px 1fr" }, "data-testid": "app-shell", children: [_jsx("aside", { className: "flex min-h-0 flex-col overflow-y-auto border-r border-[color:var(--border-subtle)] bg-base", "data-testid": "app-shell-sidebar", children: sidebar }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden", children: [_jsx("header", { className: "flex shrink-0 items-center border-b border-[color:var(--border-subtle)]", style: { height: 52, background: "color-mix(in srgb, var(--base) 60%, transparent)" }, "data-testid": "app-shell-topbar", children: topBar }), _jsx("main", { className: "flex-1 overflow-y-auto bg-canvas p-sp-7", "data-testid": "app-shell-main", children: children })] })] }));
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=AppShell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../src/components/AppShell.tsx"],"names":[],"mappings":";AAWA;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAiB;IACnE,OAAO,CACL,eACE,SAAS,EAAC,qEAAqE,EAC/E,KAAK,EAAE,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAC/B,WAAW,aAEvB,gBACE,SAAS,EAAC,4FAA4F,iBAC1F,mBAAmB,YAE9B,OAAO,GACF,EAER,eAAK,SAAS,EAAC,+CAA+C,aAC5D,iBACE,SAAS,EAAC,yEAAyE,EACnF,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,kDAAkD,EAAE,iBACzE,kBAAkB,YAE7B,MAAM,GACA,EACT,eACE,SAAS,EAAC,yCAAyC,iBACvC,gBAAgB,YAE3B,QAAQ,GACJ,IACH,IACF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type BadgeVariant = "accent" | "success" | "warning" | "neutral";
|
|
3
|
+
export type BadgeProps = {
|
|
4
|
+
variant?: BadgeVariant;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Status / plan badge - matches prototype `.badge` pattern.
|
|
10
|
+
* Variant: accent | success | warning | neutral.
|
|
11
|
+
*/
|
|
12
|
+
export declare function Badge({ variant, children, className, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAExE,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AASF;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,QAAQ,EACR,SAAc,GACf,EAAE,UAAU,2CAeZ"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const variantClasses = {
|
|
3
|
+
accent: "bg-accent-subtle text-accent-text",
|
|
4
|
+
success: "bg-success-subtle text-success-text",
|
|
5
|
+
warning: "bg-warning-subtle text-warning-text",
|
|
6
|
+
neutral: "bg-raised-2 text-fg-muted",
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Status / plan badge - matches prototype `.badge` pattern.
|
|
10
|
+
* Variant: accent | success | warning | neutral.
|
|
11
|
+
*/
|
|
12
|
+
export function Badge({ variant = "neutral", children, className = "", }) {
|
|
13
|
+
return (_jsx("span", { className: `inline-flex items-center gap-1 rounded-full font-semibold ${variantClasses[variant]} ${className}`, style: {
|
|
14
|
+
height: "18px",
|
|
15
|
+
padding: "0 7px",
|
|
16
|
+
fontSize: "var(--text-micro)",
|
|
17
|
+
lineHeight: "var(--lh-micro)",
|
|
18
|
+
letterSpacing: "0.02em",
|
|
19
|
+
}, children: children }));
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAUA,MAAM,cAAc,GAAiC;IACnD,MAAM,EAAE,mCAAmC;IAC3C,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,2BAA2B;CACrC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,SAAS,GAAG,EAAE,GACH;IACX,OAAO,CACL,eACE,SAAS,EAAE,6DAA6D,cAAc,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,EAC9G,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,mBAAmB;YAC7B,UAAU,EAAE,iBAAiB;YAC7B,aAAa,EAAE,QAAQ;SACxB,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
|
|
3
|
+
export type ButtonSize = "default" | "sm" | "lg";
|
|
4
|
+
export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
+
variant?: ButtonVariant;
|
|
6
|
+
size?: ButtonSize;
|
|
7
|
+
block?: boolean;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export declare function Button({ variant, size, block, className, type, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAyBF,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAgB,EAChB,KAAa,EACb,SAAc,EACd,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAWb"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const variantClasses = {
|
|
3
|
+
primary: "border border-transparent bg-accent text-accent-fg font-semibold hover:bg-accent-hover active:bg-accent-active disabled:opacity-50",
|
|
4
|
+
secondary: "border border-[color:var(--border)] bg-raised text-fg hover:bg-raised-2 hover:border-[color:var(--border-strong)] disabled:opacity-50",
|
|
5
|
+
ghost: "border border-transparent bg-transparent text-fg-muted hover:bg-raised hover:text-fg disabled:opacity-50",
|
|
6
|
+
danger: "border border-transparent bg-danger text-danger-fg font-semibold hover:bg-danger-hover disabled:opacity-50",
|
|
7
|
+
};
|
|
8
|
+
const sizeClasses = {
|
|
9
|
+
default: "h-[34px] px-sp-5",
|
|
10
|
+
sm: "h-[28px] px-sp-4",
|
|
11
|
+
lg: "h-[44px] px-sp-6",
|
|
12
|
+
};
|
|
13
|
+
const sizeFontStyles = {
|
|
14
|
+
default: "var(--text-body)",
|
|
15
|
+
sm: "var(--text-small)",
|
|
16
|
+
lg: "var(--text-body-lg)",
|
|
17
|
+
};
|
|
18
|
+
export function Button({ variant = "primary", size = "default", block = false, className = "", type = "button", children, ...props }) {
|
|
19
|
+
return (_jsx("button", { type: type, className: `inline-flex items-center justify-center gap-sp-3 rounded-md font-medium transition-colors duration-micro ease-in-out active:translate-y-[0.5px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed ${sizeClasses[size]} ${variantClasses[variant]}${block ? " w-full" : ""} ${className}`, style: { fontSize: sizeFontStyles[size], lineHeight: "1" }, ...props, children: children }));
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAaA,MAAM,cAAc,GAAkC;IACpD,OAAO,EACL,oIAAoI;IACtI,SAAS,EACP,uIAAuI;IACzI,KAAK,EACH,0GAA0G;IAC5G,MAAM,EACJ,4GAA4G;CAC/G,CAAC;AAEF,MAAM,WAAW,GAA+B;IAC9C,OAAO,EAAE,kBAAkB;IAC3B,EAAE,EAAE,kBAAkB;IACtB,EAAE,EAAE,kBAAkB;CACvB,CAAC;AAEF,MAAM,cAAc,GAA+B;IACjD,OAAO,EAAE,kBAAkB;IAC3B,EAAE,EAAE,mBAAmB;IACvB,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAEF,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,sTAAsT,WAAW,CAAC,IAAI,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,EACrZ,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,KACtD,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type CheckboxProps = {
|
|
2
|
+
checked?: boolean | "indeterminate";
|
|
3
|
+
onCheckedChange?: (checked: boolean | "indeterminate") => void;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
id?: string;
|
|
6
|
+
"aria-label"?: string;
|
|
7
|
+
"aria-labelledby"?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* 3-state checkbox (off / on / indeterminate).
|
|
12
|
+
* Styled to match prototype `.cb` pattern from app.css.
|
|
13
|
+
* Uses Radix Checkbox primitive for accessible keyboard + pointer handling.
|
|
14
|
+
*/
|
|
15
|
+
export declare function Checkbox({ checked, onCheckedChange, disabled, id, className, ...ariaProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,eAAe,EACf,QAAQ,EACR,EAAE,EACF,SAAc,EACd,GAAG,SAAS,EACb,EAAE,aAAa,2CA6Cf"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
3
|
+
/**
|
|
4
|
+
* 3-state checkbox (off / on / indeterminate).
|
|
5
|
+
* Styled to match prototype `.cb` pattern from app.css.
|
|
6
|
+
* Uses Radix Checkbox primitive for accessible keyboard + pointer handling.
|
|
7
|
+
*/
|
|
8
|
+
export function Checkbox({ checked, onCheckedChange, disabled, id, className = "", ...ariaProps }) {
|
|
9
|
+
return (_jsx(CheckboxPrimitive.Root, { id: id, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: `flex-none cursor-pointer rounded-sm bg-canvas transition-[background,border-color] duration-micro ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent ${className}`, style: {
|
|
10
|
+
width: "17px",
|
|
11
|
+
height: "17px",
|
|
12
|
+
border: "1.5px solid var(--border-strong)",
|
|
13
|
+
display: "grid",
|
|
14
|
+
placeItems: "center",
|
|
15
|
+
}, ...(ariaProps["aria-label"] ? { "aria-label": ariaProps["aria-label"] } : {}), ...(ariaProps["aria-labelledby"]
|
|
16
|
+
? { "aria-labelledby": ariaProps["aria-labelledby"] }
|
|
17
|
+
: {}), children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-accent-fg", children: checked === "indeterminate" ? (_jsx("span", { "aria-hidden": "true", className: "block rounded-[2px] bg-accent-fg", style: { width: "8px", height: "2px" } })) : (_jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) }) }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAY9D;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,EACP,eAAe,EACf,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACE;IACd,OAAO,CACL,KAAC,iBAAiB,CAAC,IAAI,IACrB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,wbAAwb,SAAS,EAAE,EAC9c,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,kCAAkC;YAC1C,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;SACrB,KACG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC1E,CAAC,SAAS,CAAC,iBAAiB,CAAC;YAC/B,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,CAAC,iBAAiB,CAAC,EAAE;YACrD,CAAC,CAAC,EAAE,CAAC,YAEP,KAAC,iBAAiB,CAAC,SAAS,IAAC,SAAS,EAAC,iDAAiD,YACrF,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,CAC7B,8BACc,MAAM,EAClB,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GACtC,CACH,CAAC,CAAC,CAAC,CACF,6BACc,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,YAEtB,mBAAU,MAAM,EAAC,gBAAgB,GAAG,GAChC,CACP,GAC2B,GACP,CAC1B,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/** Curated palette — semantic hues + accent variants aligned with design tokens. */
|
|
2
|
+
export declare const PRESET_COLORS: readonly ["#7782f7", "#45c98a", "#e6b24e", "#f0686b", "#5ba4e6", "#56b6e6", "#e8944a", "#a77bea", "#b178f7", "#f78fb0", "#5fd6a0", "#8a90a0", "#6571ec", "#9aa2fa", "#efc878", "#f48a8c"];
|
|
3
|
+
export type ColorPickerLabels = {
|
|
4
|
+
label: string;
|
|
5
|
+
none: string;
|
|
6
|
+
};
|
|
7
|
+
export type ColorPickerProps = {
|
|
8
|
+
value: string | null;
|
|
9
|
+
onChange: (color: string | null) => void;
|
|
10
|
+
labels: ColorPickerLabels;
|
|
11
|
+
testId?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare function ColorPicker({ value, onChange, labels, testId, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=ColorPicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/components/ColorPicker.tsx"],"names":[],"mappings":"AAEA,oFAAoF;AACpF,eAAO,MAAM,aAAa,2LAiBhB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAuB,GACxB,EAAE,gBAAgB,2CA+ClB"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { CheckIcon } from "lucide-react";
|
|
3
|
+
/** Curated palette — semantic hues + accent variants aligned with design tokens. */
|
|
4
|
+
export const PRESET_COLORS = [
|
|
5
|
+
"#7782f7",
|
|
6
|
+
"#45c98a",
|
|
7
|
+
"#e6b24e",
|
|
8
|
+
"#f0686b",
|
|
9
|
+
"#5ba4e6",
|
|
10
|
+
"#56b6e6",
|
|
11
|
+
"#e8944a",
|
|
12
|
+
"#a77bea",
|
|
13
|
+
"#b178f7",
|
|
14
|
+
"#f78fb0",
|
|
15
|
+
"#5fd6a0",
|
|
16
|
+
"#8a90a0",
|
|
17
|
+
"#6571ec",
|
|
18
|
+
"#9aa2fa",
|
|
19
|
+
"#efc878",
|
|
20
|
+
"#f48a8c",
|
|
21
|
+
];
|
|
22
|
+
export function ColorPicker({ value, onChange, labels, testId = "color-picker", }) {
|
|
23
|
+
return (_jsxs("div", { className: "flex flex-col gap-sp-2", "data-testid": testId, children: [_jsx("span", { className: "text-fg-muted", style: { fontSize: "var(--text-small)", lineHeight: "var(--lh-small)" }, children: labels.label }), _jsx("div", { className: "grid grid-cols-8 gap-sp-3", "data-testid": `${testId}-grid`, children: PRESET_COLORS.map((swatch) => (_jsx("button", { type: "button", className: "relative h-7 w-7 rounded-full transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] focus:ring-offset-2 focus:ring-offset-[color:var(--overlay)]", style: { backgroundColor: swatch }, "aria-label": swatch, "aria-pressed": value === swatch, "data-testid": `${testId}-swatch-${swatch.slice(1)}`, onClick: () => {
|
|
24
|
+
onChange(value === swatch ? null : swatch);
|
|
25
|
+
}, children: value === swatch && (_jsx(CheckIcon, { size: 14, className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white" })) }, swatch))) }), value && (_jsx("button", { type: "button", className: "self-start text-fg-muted transition-colors hover:text-fg", style: { fontSize: "var(--text-small)" }, "data-testid": `${testId}-clear`, onClick: () => {
|
|
26
|
+
onChange(null);
|
|
27
|
+
}, children: labels.none }))] }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=ColorPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../src/components/ColorPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,oFAAoF;AACpF,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACD,CAAC;AAcX,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,cAAc,GACN;IACjB,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,iBAAc,MAAM,aACzD,eACE,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAEtE,MAAM,CAAC,KAAK,GACR,EACP,cAAK,SAAS,EAAC,2BAA2B,iBAAc,GAAG,MAAM,OAAO,YACrE,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,iBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,kMAAkM,EAC5M,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,gBACtB,MAAM,kBACJ,KAAK,KAAK,MAAM,iBACjB,GAAG,MAAM,WAAW,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAClD,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBAC7C,CAAC,YAEA,KAAK,KAAK,MAAM,IAAI,CACnB,KAAC,SAAS,IACR,IAAI,EAAE,EAAE,EACR,SAAS,EAAC,wEAAwE,GAClF,CACH,IAhBI,MAAM,CAiBJ,CACV,CAAC,GACE,EACL,KAAK,IAAI,CACR,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0DAA0D,EACpE,KAAK,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,iBAC3B,GAAG,MAAM,QAAQ,EAC9B,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACjB,CAAC,YAEA,MAAM,CAAC,IAAI,GACL,CACV,IACG,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type ConfirmDialogProps = {
|
|
3
|
+
open: boolean;
|
|
4
|
+
onOpenChange: (open: boolean) => void;
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
confirmLabel: string;
|
|
8
|
+
cancelLabel: string;
|
|
9
|
+
onConfirm: () => void;
|
|
10
|
+
destructive?: boolean;
|
|
11
|
+
busy?: boolean;
|
|
12
|
+
testId?: string;
|
|
13
|
+
body?: ReactNode;
|
|
14
|
+
};
|
|
15
|
+
/** Keyboard-friendly destructive / high-impact confirmation (Radix dialog + focus trap). */
|
|
16
|
+
export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, destructive, busy, testId, body, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
//# sourceMappingURL=ConfirmDialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAmB,EACnB,IAAY,EACZ,MAAyB,EACzB,IAAI,GACL,EAAE,kBAAkB,2CA8BpB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "./Button.js";
|
|
3
|
+
import { Dialog, DialogClose, DialogContent, } from "./Dialog.js";
|
|
4
|
+
/** Keyboard-friendly destructive / high-impact confirmation (Radix dialog + focus trap). */
|
|
5
|
+
export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, destructive = false, busy = false, testId = "confirm-dialog", body, }) {
|
|
6
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { title: title, description: description, testId: testId, children: [body ? (_jsx("div", { className: "px-sp-8 py-sp-6", style: { fontSize: "var(--text-body)", lineHeight: "var(--lh-body)" }, children: body })) : null, _jsxs("div", { className: "flex flex-wrap justify-end gap-sp-3 border-t border-[color:var(--border-subtle)] px-sp-8 py-sp-6", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "ghost", disabled: busy, type: "button", children: cancelLabel }) }), _jsx(Button, { variant: destructive ? "danger" : "primary", disabled: busy, onClick: onConfirm, type: "button", children: confirmLabel })] })] }) }));
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=ConfirmDialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,GACd,MAAM,aAAa,CAAC;AAgBrB,4FAA4F;AAC5F,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,gBAAgB,EACzB,IAAI,GACe;IACnB,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,YAC5C,MAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,aAClE,IAAI,CAAC,CAAC,CAAC,CACN,cACE,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAEpE,IAAI,GACD,CACP,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAC,kGAAkG,aAC/G,KAAC,WAAW,IAAC,OAAO,kBAClB,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,YAClD,WAAW,GACL,GACG,EACd,KAAC,MAAM,IACL,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC3C,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,SAAS,EAClB,IAAI,EAAC,QAAQ,YAEZ,YAAY,GACN,IACL,IACQ,GACT,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
|
|
4
|
+
export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
export type DialogContentProps = {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
title: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
testId?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare function DialogOverlay({ className, ...props }: DialogPrimitive.DialogOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function DialogContent({ children, title, description, className, testId, }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,MAAM,iDAAuB,CAAC;AAC3C,eAAO,MAAM,aAAa,kIAA0B,CAAC;AACrD,eAAO,MAAM,WAAW,gIAAwB,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,SAAc,EACd,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,kBAAkB,2CAOpC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAc,EACd,MAAM,GACP,EAAE,kBAAkB,2CA6BpB"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
export const Dialog = DialogPrimitive.Root;
|
|
4
|
+
export const DialogTrigger = DialogPrimitive.Trigger;
|
|
5
|
+
export const DialogClose = DialogPrimitive.Close;
|
|
6
|
+
export function DialogOverlay({ className = "", ...props }) {
|
|
7
|
+
return (_jsx(DialogPrimitive.Overlay, { className: `fixed inset-0 z-[110] bg-[color:var(--overlay-scrim)] backdrop-blur-[3px] ${className}`, ...props }));
|
|
8
|
+
}
|
|
9
|
+
export function DialogContent({ children, title, description, className = "", testId, }) {
|
|
10
|
+
return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-testid": testId, ...(description ? {} : { "aria-describedby": undefined }), className: `fixed left-1/2 top-1/2 z-[120] flex max-h-[min(90vh,720px)] w-[min(560px,92vw)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-[color:var(--border-strong)] bg-overlay shadow-overlay focus:outline-none ${className}`, children: [_jsxs("div", { className: "border-b border-[color:var(--border-subtle)] px-sp-8 py-sp-6", children: [_jsx(DialogPrimitive.Title, { className: "text-fg font-semibold", style: { fontSize: "var(--text-h2)", lineHeight: "var(--lh-h2)" }, children: title }), description ? (_jsx(DialogPrimitive.Description, { className: "mt-sp-3 text-fg-muted", style: { fontSize: "var(--text-body)", lineHeight: "var(--lh-body)" }, children: description })) : null] }), children] })] }));
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=Dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC,OAAO,CAAC;AACrD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC;AAUjD,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EAC2B;IACnC,OAAO,CACL,KAAC,eAAe,CAAC,OAAO,IACtB,SAAS,EAAE,6EAA6E,SAAS,EAAE,KAC/F,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,EAAE,EACd,MAAM,GACa;IACnB,OAAO,CACL,MAAC,eAAe,CAAC,MAAM,eACrB,KAAC,aAAa,KAAG,EACjB,MAAC,eAAe,CAAC,OAAO,mBACT,MAAM,KACf,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,EAC1D,SAAS,EAAE,iPAAiP,SAAS,EAAE,aAEvQ,eAAK,SAAS,EAAC,8DAA8D,aAC3E,KAAC,eAAe,CAAC,KAAK,IACpB,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE,YAEhE,KAAK,GACgB,EACvB,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,eAAe,CAAC,WAAW,IAC1B,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAEpE,WAAW,GACgB,CAC/B,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,QAAQ,IACe,IACH,CAC1B,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type EmptyStateProps = {
|
|
3
|
+
title: ReactNode;
|
|
4
|
+
description?: ReactNode;
|
|
5
|
+
illustration?: ReactNode;
|
|
6
|
+
actions?: ReactNode;
|
|
7
|
+
testId?: string;
|
|
8
|
+
compact?: boolean;
|
|
9
|
+
};
|
|
10
|
+
/** Centered empty state - prototype `.empty` pattern (spec §23). */
|
|
11
|
+
export declare function EmptyState({ title, description, illustration, actions, testId, compact, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
//# sourceMappingURL=EmptyState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAsB,EACtB,OAAe,GAChB,EAAE,eAAe,2CAkCjB"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/** Centered empty state - prototype `.empty` pattern (spec §23). */
|
|
3
|
+
export function EmptyState({ title, description, illustration, actions, testId = "empty-state", compact = false, }) {
|
|
4
|
+
return (_jsxs("div", { className: `mx-auto flex max-w-[420px] flex-col items-center justify-center text-center ${compact ? "gap-sp-4 px-sp-6 py-sp-8" : "gap-sp-5 px-sp-6 py-sp-10"}`, "data-testid": testId, children: [illustration ? (_jsx("div", { className: "mb-sp-3 text-fg-faint", "aria-hidden": "true", children: illustration })) : null, _jsx("h3", { className: "m-0 font-semibold text-fg", style: { fontSize: "var(--text-h2)", lineHeight: "var(--lh-h2)" }, children: title }), description ? (_jsx("p", { className: "m-0 text-fg-subtle", style: { fontSize: "var(--text-body-lg)", lineHeight: "1.5" }, children: description })) : null, actions ? (_jsx("div", { className: "mt-sp-3 flex flex-wrap items-center justify-center gap-sp-4", children: actions })) : null] }));
|
|
5
|
+
}
|
|
6
|
+
//# sourceMappingURL=EmptyState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":";AAWA,oEAAoE;AACpE,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,KAAK,GACC;IAChB,OAAO,CACL,eACE,SAAS,EAAE,+EACT,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BACzC,EAAE,iBACW,MAAM,aAElB,YAAY,CAAC,CAAC,CAAC,CACd,cAAK,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACtD,YAAY,GACT,CACP,CAAC,CAAC,CAAC,IAAI,EACR,aACE,SAAS,EAAC,2BAA2B,EACrC,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE,YAEhE,KAAK,GACH,EACJ,WAAW,CAAC,CAAC,CAAC,CACb,YACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,KAAK,EAAE,YAE5D,WAAW,GACV,CACL,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,6DAA6D,YACzE,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type FieldErrorProps = {
|
|
3
|
+
id?: string;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
export declare function FieldError({ id, children }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=FieldError.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldError.d.ts","sourceRoot":"","sources":["../../src/components/FieldError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAW3D"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function FieldError({ id, children }) {
|
|
3
|
+
return (_jsx("p", { id: id, role: "alert", className: "text-danger-text", style: { fontSize: "var(--text-small)", lineHeight: "var(--lh-small)" }, children: children }));
|
|
4
|
+
}
|
|
5
|
+
//# sourceMappingURL=FieldError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldError.js","sourceRoot":"","sources":["../../src/components/FieldError.tsx"],"names":[],"mappings":";AAOA,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAmB;IAC1D,OAAO,CACL,YACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAEtE,QAAQ,GACP,CACL,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type FolderGlyphProps = {
|
|
2
|
+
icon: string | null;
|
|
3
|
+
color: string | null;
|
|
4
|
+
size?: number;
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare function FolderGlyph({ icon, color, size, className, }: FolderGlyphProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
//# sourceMappingURL=FolderGlyph.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FolderGlyph.d.ts","sourceRoot":"","sources":["../../src/components/FolderGlyph.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,IAAS,EACT,SAAc,GACf,EAAE,gBAAgB,2CAuBlB"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { LucideIcon } from "../icons/lucide-icon.js";
|
|
3
|
+
export function FolderGlyph({ icon, color, size = 22, className = "", }) {
|
|
4
|
+
const iconSize = Math.round(size * 0.59);
|
|
5
|
+
return (_jsx("span", { "aria-hidden": true, className: [
|
|
6
|
+
"inline-grid shrink-0 place-items-center rounded-md",
|
|
7
|
+
className,
|
|
8
|
+
].join(" "), style: {
|
|
9
|
+
width: size,
|
|
10
|
+
height: size,
|
|
11
|
+
background: color ?? "var(--accent-subtle)",
|
|
12
|
+
}, children: _jsx(LucideIcon, { name: icon ?? "folder", size: iconSize, className: "text-[color:var(--accent-fg)]", strokeWidth: 2 }) }));
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=FolderGlyph.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FolderGlyph.js","sourceRoot":"","sources":["../../src/components/FolderGlyph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AASrD,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,EAAE,GACG;IACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACzC,OAAO,CACL,oCAEE,SAAS,EAAE;YACT,oDAAoD;YACpD,SAAS;SACV,CAAC,IAAI,CAAC,GAAG,CAAC,EACX,KAAK,EAAE;YACL,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,KAAK,IAAI,sBAAsB;SAC5C,YAED,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,IAAI,QAAQ,EACtB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAC,+BAA+B,EACzC,WAAW,EAAE,CAAC,GACd,GACG,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
export type IconButtonSize = "default" | "sm";
|
|
3
|
+
export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
4
|
+
size?: IconButtonSize;
|
|
5
|
+
active?: boolean;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
"aria-label": string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Icon-only action button - matches prototype `.icon-btn` pattern from app.css.
|
|
11
|
+
* Requires `aria-label` for accessibility.
|
|
12
|
+
*/
|
|
13
|
+
export declare function IconButton({ size, active, className, type, children, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAOF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,MAAc,EACd,SAAc,EACd,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAcjB"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const sizeClasses = {
|
|
3
|
+
default: "h-[34px] w-[34px]",
|
|
4
|
+
sm: "h-[28px] w-[28px]",
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Icon-only action button - matches prototype `.icon-btn` pattern from app.css.
|
|
8
|
+
* Requires `aria-label` for accessibility.
|
|
9
|
+
*/
|
|
10
|
+
export function IconButton({ size = "default", active = false, className = "", type = "button", children, ...props }) {
|
|
11
|
+
return (_jsx("button", { type: type, className: `inline-grid cursor-pointer place-items-center rounded-md border border-transparent bg-transparent transition-[background,color,border-color] duration-micro ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-50 ${active
|
|
12
|
+
? "bg-accent-subtle text-accent-text"
|
|
13
|
+
: "text-fg-muted hover:bg-raised hover:text-fg"} ${sizeClasses[size]} ${className}`, ...props, children: children }));
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=IconButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":";AAWA,MAAM,WAAW,GAAmC;IAClD,OAAO,EAAE,mBAAmB;IAC5B,EAAE,EAAE,mBAAmB;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,kWACT,MAAM;YACJ,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,6CACN,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,SAAS,EAAE,KAChC,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type IconPickerLabels = {
|
|
2
|
+
searchPlaceholder: string;
|
|
3
|
+
noResults: string;
|
|
4
|
+
clear: string;
|
|
5
|
+
};
|
|
6
|
+
export type IconPickerProps = {
|
|
7
|
+
value: string | null;
|
|
8
|
+
onChange: (icon: string | null) => void;
|
|
9
|
+
labels: IconPickerLabels;
|
|
10
|
+
id?: string;
|
|
11
|
+
testId?: string;
|
|
12
|
+
};
|
|
13
|
+
declare function filterIconNames(query: string): readonly string[];
|
|
14
|
+
export declare function IconPicker({ value, onChange, labels, id, testId, }: IconPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export { filterIconNames };
|
|
16
|
+
//# sourceMappingURL=IconPicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../src/components/IconPicker.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,gBAAgB,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAIzD;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,EAAE,EACF,MAAsB,GACvB,EAAE,eAAe,2CAiGjB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useState } from "react";
|
|
3
|
+
import { CheckIcon, SearchIcon, XIcon } from "lucide-react";
|
|
4
|
+
import { FOLDER_ICON_NAMES } from "../icons/folder-icon-names.js";
|
|
5
|
+
import { LucideIcon } from "../icons/lucide-icon.js";
|
|
6
|
+
function filterIconNames(query) {
|
|
7
|
+
const normalized = query.trim().toLowerCase();
|
|
8
|
+
if (!normalized)
|
|
9
|
+
return FOLDER_ICON_NAMES;
|
|
10
|
+
return FOLDER_ICON_NAMES.filter((name) => name.includes(normalized));
|
|
11
|
+
}
|
|
12
|
+
export function IconPicker({ value, onChange, labels, id, testId = "icon-picker", }) {
|
|
13
|
+
const [query, setQuery] = useState("");
|
|
14
|
+
const matches = useMemo(() => filterIconNames(query), [query]);
|
|
15
|
+
return (_jsxs("div", { className: "flex flex-col gap-sp-3", "data-testid": testId, children: [_jsxs("div", { className: "relative", children: [_jsx(SearchIcon, { size: 15, className: "pointer-events-none absolute left-sp-3 top-1/2 -translate-y-1/2 text-fg-muted", "aria-hidden": true }), _jsx("input", { id: id, type: "search", value: query, onChange: (event) => {
|
|
16
|
+
setQuery(event.target.value);
|
|
17
|
+
}, placeholder: labels.searchPlaceholder, className: "w-full rounded-md border border-[color:var(--border)] bg-[color:var(--base)] py-sp-3 pl-sp-9 pr-sp-4 text-fg focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)]", style: { fontSize: "var(--text-body)" }, "data-testid": `${testId}-search` })] }), value ? (_jsxs("div", { className: "flex items-center justify-between gap-sp-3", children: [_jsxs("span", { className: "inline-flex items-center gap-sp-3 text-fg-muted", style: { fontSize: "var(--text-small)" }, children: [_jsx(LucideIcon, { name: value, size: 18, "aria-hidden": true }), _jsx("span", { className: "font-mono", children: value })] }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-sp-2 text-fg-muted transition-colors hover:text-fg", style: { fontSize: "var(--text-small)" }, onClick: () => {
|
|
18
|
+
onChange(null);
|
|
19
|
+
}, "data-testid": `${testId}-clear`, children: [_jsx(XIcon, { size: 14, "aria-hidden": true }), labels.clear] })] })) : null, matches.length === 0 ? (_jsx("p", { className: "py-sp-5 text-center text-fg-subtle", style: { fontSize: "var(--text-small)" }, "data-testid": `${testId}-no-results`, children: labels.noResults })) : (_jsx("div", { className: "grid max-h-[200px] grid-cols-8 gap-sp-2 overflow-y-auto rounded-md border border-[color:var(--border-subtle)] bg-[color:var(--base)] p-sp-3", role: "listbox", "aria-label": labels.searchPlaceholder, "data-testid": `${testId}-grid`, children: matches.map((name) => {
|
|
20
|
+
const selected = value === name;
|
|
21
|
+
return (_jsxs("button", { type: "button", role: "option", "aria-selected": selected, title: name, className: [
|
|
22
|
+
"relative inline-grid h-9 w-9 place-items-center rounded-md border transition-colors",
|
|
23
|
+
selected
|
|
24
|
+
? "border-[color:var(--accent)] bg-[color:var(--accent-subtle)] text-[color:var(--accent-text)]"
|
|
25
|
+
: "border-transparent text-fg-muted hover:border-[color:var(--border)] hover:bg-[color:var(--raised-2)] hover:text-fg",
|
|
26
|
+
].join(" "), onClick: () => {
|
|
27
|
+
onChange(selected ? null : name);
|
|
28
|
+
}, "data-testid": `${testId}-option-${name}`, children: [_jsx(LucideIcon, { name: name, size: 18, "aria-hidden": true }), selected ? (_jsx(CheckIcon, { size: 10, className: "absolute right-0.5 top-0.5 text-[color:var(--accent-text)]", "aria-hidden": true })) : null] }, name));
|
|
29
|
+
}) }))] }));
|
|
30
|
+
}
|
|
31
|
+
export { filterIconNames };
|
|
32
|
+
//# sourceMappingURL=IconPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconPicker.js","sourceRoot":"","sources":["../../src/components/IconPicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
export type InputSize = "default" | "lg";
|
|
3
|
+
export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
4
|
+
invalid?: boolean;
|
|
5
|
+
size?: InputSize;
|
|
6
|
+
startIcon?: ReactNode;
|
|
7
|
+
endIcon?: ReactNode;
|
|
8
|
+
};
|
|
9
|
+
export declare function Input({ invalid, size, startIcon, endIcon, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAYF,wBAAgB,KAAK,CAAC,EACpB,OAAe,EACf,IAAgB,EAChB,SAAS,EACT,OAAO,EACP,SAAc,EACd,GAAG,KAAK,EACT,EAAE,UAAU,2CA+CZ"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
const sizeHeight = {
|
|
3
|
+
default: "34px",
|
|
4
|
+
lg: "42px",
|
|
5
|
+
};
|
|
6
|
+
const sizeFontSize = {
|
|
7
|
+
default: "var(--text-body)",
|
|
8
|
+
lg: "var(--text-body-lg)",
|
|
9
|
+
};
|
|
10
|
+
export function Input({ invalid = false, size = "default", startIcon, endIcon, className = "", ...props }) {
|
|
11
|
+
const borderColor = invalid
|
|
12
|
+
? "var(--danger)"
|
|
13
|
+
: "var(--border)";
|
|
14
|
+
const focusBorderColor = invalid
|
|
15
|
+
? "var(--danger)"
|
|
16
|
+
: "var(--accent-border)";
|
|
17
|
+
const focusShadow = invalid
|
|
18
|
+
? "0 0 0 3px var(--danger-subtle)"
|
|
19
|
+
: "0 0 0 3px var(--accent-subtle)";
|
|
20
|
+
return (_jsxs("div", { className: `flex w-full items-center gap-sp-4 rounded-md border bg-raised px-sp-4 transition-[border-color,box-shadow] duration-micro ease-in-out focus-within:outline-none has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ${className}`, style: {
|
|
21
|
+
height: sizeHeight[size],
|
|
22
|
+
borderColor,
|
|
23
|
+
}, onFocus: (e) => {
|
|
24
|
+
e.currentTarget.style.borderColor = focusBorderColor;
|
|
25
|
+
e.currentTarget.style.boxShadow = focusShadow;
|
|
26
|
+
}, onBlur: (e) => {
|
|
27
|
+
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
28
|
+
e.currentTarget.style.borderColor = borderColor;
|
|
29
|
+
e.currentTarget.style.boxShadow = "";
|
|
30
|
+
}
|
|
31
|
+
}, children: [startIcon ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-fg-subtle", children: startIcon })) : null, _jsx("input", { className: "min-w-0 flex-1 bg-transparent text-fg placeholder:text-fg-faint focus:outline-none disabled:cursor-not-allowed", "aria-invalid": invalid || undefined, style: { fontSize: sizeFontSize[size], lineHeight: "var(--lh-body)" }, ...props }), endIcon ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-fg-subtle", children: endIcon })) : null] }));
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":";AAWA,MAAM,UAAU,GAA8B;IAC5C,OAAO,EAAE,MAAM;IACf,EAAE,EAAE,MAAM;CACX,CAAC;AAEF,MAAM,YAAY,GAA8B;IAC9C,OAAO,EAAE,kBAAkB;IAC3B,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EACpB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,OAAO,EACP,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACG;IACX,MAAM,WAAW,GAAG,OAAO;QACzB,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,eAAe,CAAC;IACpB,MAAM,gBAAgB,GAAG,OAAO;QAC9B,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,sBAAsB,CAAC;IAC3B,MAAM,WAAW,GAAG,OAAO;QACzB,CAAC,CAAC,gCAAgC;QAClC,CAAC,CAAC,gCAAgC,CAAC;IAErC,OAAO,CACL,eACE,SAAS,EAAE,iOAAiO,SAAS,EAAE,EACvP,KAAK,EAAE;YACL,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;YACxB,WAAW;SACZ,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC;YACrD,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC;QAChD,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;gBAC/C,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;gBAChD,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;YACvC,CAAC;QACH,CAAC,aAEA,SAAS,CAAC,CAAC,CAAC,CACX,8BAAkB,MAAM,EAAC,SAAS,EAAC,yBAAyB,YACzD,SAAS,GACL,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAC,gHAAgH,kBAC5G,OAAO,IAAI,SAAS,EAClC,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,gBAAgB,EAAE,KACjE,KAAK,GACT,EACD,OAAO,CAAC,CAAC,CAAC,CACT,8BAAkB,MAAM,EAAC,SAAS,EAAC,yBAAyB,YACzD,OAAO,GACH,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}
|