@fragment-build/ui 3.2.3 → 4.0.0

package/README.md

@@ -28,6 +28,8 @@ Fragment UI is a design system and React component library which provides alread
 - [🔧 Configuration](#-configuration)
     - [`linkComponent`](#linkcomponent)
   - [Next.js 13+](#nextjs-13)
+- [🎨 Theming](#-theming)
+  - [Fragment surfaces](#fragment-surfaces)
 - [🤝 Contributing](#-contributing)
 - [👨‍💻 Development](#-development)
 - [🤝 Community support](#-community-support)
@@ -179,6 +181,77 @@ import { ThemeSwitch } from '@fragment-build/ui';
 <ThemeSwitch />
 ```
 
+## 🎨 Theming
+
+Fragment UI builds on the [HeroUI theme tokens](https://v3.heroui.com/docs/react/getting-started/theming).
+Override any of them in your own stylesheet — see [`theme.example.css`](src/theme.example.css)
+for the full list. Import Fragment UI first, then declare your overrides: both blocks are
+unlayered and equally specific, so the later one wins.
+
+```css
+@import 'tailwindcss';
+@import "@heroui/styles";
+@import "@fragment-build/ui";
+
+:root,
+.light,
+[data-theme="light"] {
+  --accent: #F56460;
+}
+```
+
+### Fragment surfaces
+
+The `Sidebar` and `Navbar` fragments paint their own surface so they can be themed
+independently of the page. Each defaults to the page surface, so a theme that declares none of
+these renders exactly as it did before.
+
+| Token | Default | Applies to |
+| --- | --- | --- |
+| `--sidebar` | `var(--background)` | Sidebar rail (collapsed + expanded) and its mobile bottom nav |
+| `--sidebar-foreground` | `var(--foreground)` | Text, icons and tree guides inside the rail |
+| `--navbar` | `var(--background)` | Navbar topbar and its mobile bottom nav |
+| `--navbar-foreground` | `var(--foreground)` | Text and icons inside the navbar |
+
+A tinted rail on a white page:
+
+```css
+:root,
+.light,
+[data-theme="light"] {
+  --sidebar: #F7F5F0;
+}
+```
+
+They are also available as Tailwind utilities — `bg-sidebar`, `text-sidebar-foreground`,
+`bg-navbar`, `text-navbar-foreground` — so you can reuse the same surface in your own markup.
+
+#### Contrasting rails
+
+The interactive states inside the rail are page-level palette roles, not sidebar roles, and
+they do **not** follow `--sidebar` on their own. The active nav pill (`--accent-soft`) is
+translucent, so it composites over whatever the rail is painted and needs nothing. The other
+two do, once the rail contrasts noticeably with the page:
+
+| Token | Default | Controls |
+| --- | --- | --- |
+| `--sidebar-default` | `var(--default)` | Hover ground of collapsible nav groups |
+| `--sidebar-accent-soft-foreground` | `var(--accent-soft-foreground)` | Ink of the active nav item and active group |
+
+A dark rail on a light page:
+
+```css
+:root,
+.light,
+[data-theme="light"] {
+  --sidebar: oklch(21% 0.006 285.89);
+  --sidebar-foreground: oklch(99.11% 0 0);
+
+  --sidebar-default: rgba(255, 255, 255, 0.08);
+  --sidebar-accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--sidebar-foreground) 30%);
+}
+```
+
 ## 🤝 Contributing
 
 Feel free to fork and make a Pull Request to this project. All the input is warmly welcome!

package/components/code-snippet/CodeSnippet.d.ts

@@ -1,5 +1,14 @@
 export interface CodeSnippetProps {
     code: string;
     prefix?: string;
+    /**
+     * `inline` (default) is a one-line command with the copy button beside it. `block` is a panel
+     * for multi-line code, with a header carrying `title` and a labelled copy button.
+     */
+    variant?: 'inline' | 'block';
+    /** The block header's label, e.g. the file or language the snippet belongs to. */
+    title?: React.ReactNode;
+    copyLabel?: string;
+    copiedLabel?: string;
 }
 export declare const CodeSnippet: React.FC<CodeSnippetProps>;

package/components/code-snippet/CodeSnippet.js

@@ -1,15 +1,25 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button, Tooltip } from '@heroui/react';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
-export const CodeSnippet = ({ code, prefix = '$' }) => {
+export const CodeSnippet = ({ code, prefix = '$', variant = 'inline', title, copyLabel = 'Copy', copiedLabel = 'Copied', }) => {
     const [copied, setCopied] = useState(false);
     const handleCopy = async () => {
-        await navigator.clipboard.writeText(code);
+        try {
+            await navigator.clipboard.writeText(code);
+        }
+        catch {
+            // Denied outside a secure context and in some embedded browsers. The code is on screen and
+            // selectable either way, so the button simply does not claim a copy that did not happen.
+            return;
+        }
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    return (_jsxs("div", { className: "fragment-code-snippet", children: [_jsxs("pre", { className: "fragment-code-snippet__code", children: [prefix && _jsxs("span", { className: "fragment-code-snippet__prefix", children: [prefix, " "] }), code] }), _jsxs(Tooltip, { children: [_jsx(Button, { isIconOnly: true, "aria-label": "Copy to clipboard", size: "sm", variant: "ghost", onPress: handleCopy, children: copied ? _jsx(IconCheck, { size: 14 }) : _jsx(IconCopy, { size: 14 }) }), _jsx(Tooltip.Content, { children: copied ? 'Copied!' : 'Copy to clipboard' })] })] }));
+    if (variant === 'block') {
+        return (_jsxs("div", { className: "fragment-code-snippet--block", children: [_jsxs("div", { className: "fragment-code-snippet__header", children: [_jsx("span", { className: "fragment-code-snippet__title", children: title }), _jsxs(Button, { "aria-live": "polite", onPress: handleCopy, size: "sm", variant: "ghost", children: [copied ? _jsx(IconCheck, { size: 14 }) : _jsx(IconCopy, { size: 14 }), copied ? copiedLabel : copyLabel] })] }), _jsxs("pre", { className: "fragment-code-snippet__block-code", children: [prefix && _jsxs("span", { className: "fragment-code-snippet__prefix", children: [prefix, " "] }), code] })] }));
+    }
+    return (_jsxs("div", { className: "fragment-code-snippet", children: [_jsxs("pre", { className: "fragment-code-snippet__code", children: [prefix && _jsxs("span", { className: "fragment-code-snippet__prefix", children: [prefix, " "] }), code] }), _jsxs(Tooltip, { children: [_jsx(Button, { isIconOnly: true, "aria-label": copyLabel, size: "sm", variant: "ghost", onPress: handleCopy, children: copied ? _jsx(IconCheck, { size: 14 }) : _jsx(IconCopy, { size: 14 }) }), _jsx(Tooltip.Content, { children: copied ? copiedLabel : copyLabel })] })] }));
 };
 //# sourceMappingURL=CodeSnippet.js.map

package/components/code-snippet/CodeSnippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeSnippet.js","sourceRoot":"","sources":["../../src/components/code-snippet/CodeSnippet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAO1D,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE;IAChF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC1C,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAK,SAAS,EAAC,6BAA6B,aACzC,MAAM,IAAI,gBAAM,SAAS,EAAC,+BAA+B,aAAE,MAAM,SAAS,EAC1E,IAAI,IACD,EACN,MAAC,OAAO,eACN,KAAC,MAAM,IACL,UAAU,sBACC,mBAAmB,EAC9B,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,UAAU,YAElB,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GACnD,EACT,KAAC,OAAO,CAAC,OAAO,cAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,GAAmB,IACrE,IACN,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CodeSnippet.js","sourceRoot":"","sources":["../../src/components/code-snippet/CodeSnippet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAgB1D,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,IAAI,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,EAAE,WAAW,GAAG,QAAQ,GAC1F,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC5C,CAAC;QAAC,MAAM,CAAC;YACP,2FAA2F;YAC3F,yFAAyF;YACzF,OAAO;QACT,CAAC;QACD,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,eAAK,SAAS,EAAC,+BAA+B,aAC5C,eAAM,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAQ,EAC7D,MAAC,MAAM,iBAAW,QAAQ,EAAC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,aACtE,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,EACzD,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAC1B,IACL,EACN,eAAK,SAAS,EAAC,mCAAmC,aAC/C,MAAM,IAAI,gBAAM,SAAS,EAAC,+BAA+B,aAAE,MAAM,SAAS,EAC1E,IAAI,IACD,IACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAK,SAAS,EAAC,6BAA6B,aACzC,MAAM,IAAI,gBAAM,SAAS,EAAC,+BAA+B,aAAE,MAAM,SAAS,EAC1E,IAAI,IACD,EACN,MAAC,OAAO,eACN,KAAC,MAAM,IACL,UAAU,sBACE,SAAS,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,UAAU,YAElB,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GACnD,EACT,KAAC,OAAO,CAAC,OAAO,cAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GAAmB,IAC7D,IACN,CACP,CAAC;AACJ,CAAC,CAAC"}

package/components/code-snippet/code-snippet.css

@@ -11,3 +11,21 @@
     @apply text-muted;
   }
 }
+
+@layer components {
+  .fragment-code-snippet--block {
+    @apply overflow-hidden rounded-xl border border-border bg-surface-secondary;
+  }
+
+  .fragment-code-snippet__header {
+    @apply flex items-center justify-between gap-2 border-b border-border py-1 pr-1 pl-4;
+  }
+
+  .fragment-code-snippet__title {
+    @apply text-xs font-medium text-muted;
+  }
+
+  .fragment-code-snippet__block-code {
+    @apply overflow-x-auto px-4 py-3 font-mono text-xs leading-relaxed text-foreground;
+  }
+}

package/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,16 @@
+export interface SegmentedControlOption<K extends string> {
+    id: K;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+}
+export interface SegmentedControlProps<K extends string> {
+    options: SegmentedControlOption<K>[];
+    value: K;
+    onChange: (value: K) => void;
+    'aria-label': string;
+    size?: 'sm' | 'md';
+    fullWidth?: boolean;
+    className?: string;
+}
+export declare const SegmentedControl: <K extends string>({ options, value, onChange, size, fullWidth, className, ...props }: SegmentedControlProps<K>) => import("react").JSX.Element;

package/components/segmented-control/SegmentedControl.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A small set of mutually exclusive options shown all at once: a time range, a view mode, a metric.
+ * A Select hides the alternatives behind a click; for two to five short options this keeps them
+ * visible and one click apart.
+ */
+import { ToggleButton, ToggleButtonGroup } from '@heroui/react';
+import { segmentedControl } from './SegmentedControl.styles';
+export const SegmentedControl = ({ options, value, onChange, size, fullWidth, className, ...props }) => {
+    const v = segmentedControl({ size, fullWidth });
+    return (_jsx(ToggleButtonGroup, { "aria-label": props['aria-label'], className: v.base({ className }), disallowEmptySelection: true, isDetached: true, onSelectionChange: (keys) => {
+            const next = [...keys][0];
+            if (next !== undefined)
+                onChange(String(next));
+        }, selectedKeys: [value], selectionMode: "single", children: options.map((option) => (_jsxs(ToggleButton, { className: v.item(), id: option.id, isDisabled: option.isDisabled, children: [option.icon, option.label] }, option.id))) }));
+};
+//# sourceMappingURL=SegmentedControl.js.map

package/components/segmented-control/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAmB7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EACjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EACrC,EAAE,EAAE;IAC7B,MAAM,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAEhD,OAAO,CACL,KAAC,iBAAiB,kBACJ,KAAK,CAAC,YAAY,CAAC,EAC/B,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,EAChC,sBAAsB,QACtB,UAAU,QACV,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE;YAC1B,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,IAAI,KAAK,SAAS;gBAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAM,CAAC,CAAC;QACtD,CAAC,EACD,YAAY,EAAE,CAAC,KAAK,CAAC,EACrB,aAAa,EAAC,QAAQ,YAErB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,MAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,aAC5E,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK,KAFuE,MAAM,CAAC,EAAE,CAGhF,CAChB,CAAC,GACgB,CACrB,CAAC;AACJ,CAAC,CAAC"}

package/components/segmented-control/SegmentedControl.styles.d.ts

@@ -0,0 +1,46 @@
+export declare const segmentedControl: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {};
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {};
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {};
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}>>;

package/components/segmented-control/SegmentedControl.styles.js

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+export const segmentedControl = tv({
+    slots: {
+        base: 'fragment-segmented-control',
+        item: 'fragment-segmented-control__item',
+    },
+    variants: {
+        size: {
+            sm: { base: 'fragment-segmented-control--sm' },
+            md: {},
+        },
+        fullWidth: {
+            true: { base: 'fragment-segmented-control--full-width' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+//# sourceMappingURL=SegmentedControl.styles.js.map

package/components/segmented-control/SegmentedControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.styles.js","sourceRoot":"","sources":["../../src/components/segmented-control/SegmentedControl.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;IACjC,KAAK,EAAE;QACL,IAAI,EAAE,4BAA4B;QAClC,IAAI,EAAE,kCAAkC;KACzC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,IAAI,EAAE,gCAAgC,EAAE;YAC9C,EAAE,EAAE,EAAE;SACP;QACD,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,wCAAwC,EAAE;SACzD;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC"}

package/components/segmented-control/segmented-control.css

@@ -0,0 +1,41 @@
+@layer components {
+  .fragment-segmented-control {
+    @apply inline-flex items-center gap-0.5 rounded-[var(--field-radius)] bg-default p-0.5;
+  }
+
+  .fragment-segmented-control--full-width {
+    @apply flex w-full;
+
+    .fragment-segmented-control__item {
+      @apply flex-1;
+    }
+  }
+
+  .fragment-segmented-control__item.toggle-button {
+    @apply h-8 rounded-[calc(var(--field-radius)-0.125rem)] px-3 text-sm font-medium text-muted md:h-8;
+
+    --toggle-button-bg: transparent;
+    --toggle-button-bg-hover: transparent;
+    --toggle-button-bg-pressed: transparent;
+    --toggle-button-bg-selected: var(--surface);
+    --toggle-button-bg-selected-hover: var(--surface);
+    --toggle-button-bg-selected-pressed: var(--surface);
+    --toggle-button-fg-selected: var(--surface-foreground, var(--foreground));
+
+    &:hover, &[data-hovered="true"] {
+      @apply text-foreground;
+    }
+
+    &[data-selected="true"] {
+      @apply shadow-sm text-foreground;
+    }
+
+    & svg {
+      @apply size-4;
+    }
+  }
+
+  .fragment-segmented-control--sm .fragment-segmented-control__item.toggle-button {
+    @apply h-7 px-2.5 text-xs md:h-7;
+  }
+}

package/fragments/empty-state/EmptyState.d.ts

@@ -0,0 +1,12 @@
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Buttons or links. */
+    children?: React.ReactNode;
+    size?: 'sm' | 'md';
+    /** Draws a dashed outline, for an empty state that stands in for a whole card. */
+    bordered?: boolean;
+    className?: string;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/fragments/empty-state/EmptyState.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What a list, table or panel shows when there is nothing in it yet: an icon, one line saying
+ * what would be here, one saying how to get it there, and the action that does.
+ */
+import { emptyState } from './EmptyState.styles';
+export const EmptyState = ({ icon, title, description, children, className, ...props }) => {
+    const v = emptyState(props);
+    return (_jsxs("div", { className: v.base({ className }), children: [icon && _jsx("div", { className: v.icon(), children: icon }), _jsx("p", { className: v.title(), children: title }), description && _jsx("p", { className: v.description(), children: description }), children && _jsx("div", { className: v.actions(), children: children })] }));
+};
+//# sourceMappingURL=EmptyState.js.map

package/fragments/empty-state/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/fragments/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAcjD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EACxD,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,aAClC,IAAI,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,IAAI,GAAO,EAC/C,YAAG,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAK,EACnC,WAAW,IAAI,YAAG,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAK,EAC/D,QAAQ,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YAAG,QAAQ,GAAO,IACtD,CACP,CAAC;AACJ,CAAC,CAAC"}

package/fragments/empty-state/EmptyState.styles.d.ts

@@ -0,0 +1,55 @@
+export declare const emptyState: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {};
+    };
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {};
+    };
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    title: string;
+    description: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {};
+    };
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    title: string;
+    description: string;
+    actions: string;
+}>>;

package/fragments/empty-state/EmptyState.styles.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+export const emptyState = tv({
+    slots: {
+        base: 'fragment-empty-state',
+        icon: 'fragment-empty-state__icon',
+        title: 'fragment-empty-state__title',
+        description: 'fragment-empty-state__description',
+        actions: 'fragment-empty-state__actions',
+    },
+    variants: {
+        size: {
+            sm: { base: 'fragment-empty-state--sm' },
+            md: {},
+        },
+        bordered: {
+            true: { base: 'fragment-empty-state--bordered' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+//# sourceMappingURL=EmptyState.styles.js.map

package/fragments/empty-state/EmptyState.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.styles.js","sourceRoot":"","sources":["../../src/fragments/empty-state/EmptyState.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;IAC3B,KAAK,EAAE;QACL,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,4BAA4B;QAClC,KAAK,EAAE,6BAA6B;QACpC,WAAW,EAAE,mCAAmC;QAChD,OAAO,EAAE,+BAA+B;KACzC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE;YACxC,EAAE,EAAE,EAAE;SACP;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,gCAAgC,EAAE;SACjD;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC"}

package/fragments/empty-state/empty-state.css

@@ -0,0 +1,39 @@
+@layer components {
+  .fragment-empty-state {
+    @apply flex flex-col items-center justify-center text-center px-6 py-12;
+  }
+
+  .fragment-empty-state--sm {
+    @apply py-8;
+
+    .fragment-empty-state__icon {
+      @apply size-9 mb-3;
+      & svg {
+        @apply size-[18px];
+      }
+    }
+  }
+
+  .fragment-empty-state--bordered {
+    @apply rounded-2xl border border-dashed border-border bg-surface;
+  }
+
+  .fragment-empty-state__icon {
+    @apply mb-4 flex size-11 items-center justify-center rounded-xl bg-default text-muted;
+    & svg {
+      @apply size-5;
+    }
+  }
+
+  .fragment-empty-state__title {
+    @apply text-sm font-semibold text-foreground;
+  }
+
+  .fragment-empty-state__description {
+    @apply mt-1 max-w-sm text-sm text-muted text-balance;
+  }
+
+  .fragment-empty-state__actions {
+    @apply mt-5 flex flex-wrap items-center justify-center gap-2;
+  }
+}

package/fragments/form/FormCard.d.ts

@@ -0,0 +1,14 @@
+export interface FormCardProps {
+    children: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Beside the title: a status chip, a "reset" link, a switch that enables the whole group. */
+    titleEndContent?: React.ReactNode;
+    /** Behind a hairline at the bottom: secondary actions, or a note on when the change applies. */
+    footer?: React.ReactNode;
+    /** `danger` marks a group of irreversible actions. */
+    variant?: 'default' | 'danger';
+    id?: string;
+    className?: string;
+}
+export declare const FormCard: React.FC<FormCardProps>;

package/fragments/form/FormCard.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One group of settings drawn as a card: a heading that says what the group is for, then its
+ * fields. Where FormSection separates groups with rules on one sheet, FormCard gives each group its
+ * own surface — the better fit for a long settings page, where the eye needs landmarks to scan by.
+ */
+import { Card } from '@heroui/react';
+import { formCard } from './FormCard.styles';
+export const FormCard = ({ children, title, description, titleEndContent, footer, id, className, ...props }) => {
+    const v = formCard(props);
+    return (_jsxs(Card, { className: v.base({ className }), id: id, children: [_jsxs("div", { className: v.header(), children: [_jsxs("div", { className: v.heading(), children: [_jsx("h3", { className: v.title(), children: title }), description && _jsx("div", { className: v.description(), children: description })] }), titleEndContent && _jsx("div", { className: v.headerEnd(), children: titleEndContent })] }), _jsx("div", { className: v.body(), children: children }), footer && _jsx("div", { className: v.footer(), children: footer })] }));
+};
+//# sourceMappingURL=FormCard.js.map

package/fragments/form/FormCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCard.js","sourceRoot":"","sources":["../../src/fragments/form/FormCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAgB7C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAC/E,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,aACxB,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,aACzB,aAAI,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAM,EACrC,WAAW,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAO,IAChE,EACL,eAAe,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,YAAG,eAAe,GAAO,IACtE,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YAAG,QAAQ,GAAO,EACzC,MAAM,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,YAAG,MAAM,GAAO,IAChD,CACR,CAAC;AACJ,CAAC,CAAC"}

package/fragments/form/FormCard.styles.d.ts

@@ -0,0 +1,49 @@
+export declare const formCard: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    heading: string;
+    title: string;
+    description: string;
+    headerEnd: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    variant: {
+        default: {};
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    heading: string;
+    title: string;
+    description: string;
+    headerEnd: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: {};
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    heading: string;
+    title: string;
+    description: string;
+    headerEnd: string;
+    body: string;
+    footer: string;
+}>>;

package/fragments/form/FormCard.styles.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+export const formCard = tv({
+    slots: {
+        base: 'fragment-form-card',
+        header: 'fragment-form-card__header',
+        heading: 'fragment-form-card__heading',
+        title: 'fragment-form-card__title',
+        description: 'fragment-form-card__description',
+        headerEnd: 'fragment-form-card__header-end',
+        body: 'fragment-form-card__body',
+        footer: 'fragment-form-card__footer',
+    },
+    variants: {
+        variant: {
+            default: {},
+            danger: { base: 'fragment-form-card--danger' },
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+//# sourceMappingURL=FormCard.styles.js.map

package/fragments/form/FormCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCard.styles.js","sourceRoot":"","sources":["../../src/fragments/form/FormCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAC;IACzB,KAAK,EAAE;QACL,IAAI,EAAE,oBAAoB;QAC1B,MAAM,EAAE,4BAA4B;QACpC,OAAO,EAAE,6BAA6B;QACtC,KAAK,EAAE,2BAA2B;QAClC,WAAW,EAAE,iCAAiC;QAC9C,SAAS,EAAE,gCAAgC;QAC3C,IAAI,EAAE,0BAA0B;QAChC,MAAM,EAAE,4BAA4B;KACrC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,EAAE,IAAI,EAAE,4BAA4B,EAAE;SAC/C;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC"}

package/fragments/form/FormSection.d.ts

@@ -4,8 +4,10 @@
 import React from 'react';
 export interface FormSectionProps {
     children: React.ReactNode;
-    title: string;
+    title: React.ReactNode;
     description?: React.ReactNode;
+    /** Sits beside the title, for a status chip or a "reset to default" link. */
+    titleEndContent?: React.ReactNode;
     direction?: 'vertical' | 'horizontal';
     fullWidth?: boolean;
 }

package/fragments/form/FormSection.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formSection } from './FormSection.styles';
-export const FormSection = ({ children, title, description, ...props }) => {
+export const FormSection = ({ children, title, description, titleEndContent, ...props }) => {
     const v = formSection(props);
-    return (_jsx("div", { className: v.base(), children: _jsxs("div", { className: v.main(), children: [_jsxs("div", { className: v.info(), children: [_jsx("h3", { children: title }), _jsx("div", { className: v.description(), children: description })] }), _jsx("div", { className: v.content(), children: children })] }) }));
+    return (_jsx("div", { className: v.base(), children: _jsxs("div", { className: v.main(), children: [_jsxs("div", { className: v.info(), children: [_jsxs("div", { className: v.titleRow(), children: [_jsx("h3", { className: v.title(), children: title }), titleEndContent] }), description && _jsx("div", { className: v.description(), children: description })] }), _jsx("div", { className: v.content(), children: children })] }) }));
 };
 //# sourceMappingURL=FormSection.js.map

package/fragments/form/FormSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.js","sourceRoot":"","sources":["../../src/fragments/form/FormSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAOb,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUnD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpG,MAAM,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YACtB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACtB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACtB,uBAAK,KAAK,GAAM,EAChB,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAO,IAChD,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YACxB,QAAQ,GACL,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"FormSection.js","sourceRoot":"","sources":["../../src/fragments/form/FormSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAOb,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAYnD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,KAAK,EACxD,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,YACtB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACtB,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACtB,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,aAC1B,aAAI,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAM,EACrC,eAAe,IACZ,EACL,WAAW,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAO,IAChE,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YACxB,QAAQ,GACL,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/fragments/form/FormSection.styles.d.ts

@@ -16,6 +16,8 @@ export declare const formSection: import("tailwind-variants").TVReturnType<{
     base: string;
     main: string;
     info: string;
+    titleRow: string;
+    title: string;
     content: string;
     description: string;
 }, undefined, {
@@ -36,6 +38,8 @@ export declare const formSection: import("tailwind-variants").TVReturnType<{
     base: string;
     main: string;
     info: string;
+    titleRow: string;
+    title: string;
     content: string;
     description: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -56,6 +60,8 @@ export declare const formSection: import("tailwind-variants").TVReturnType<{
     base: string;
     main: string;
     info: string;
+    titleRow: string;
+    title: string;
     content: string;
     description: string;
 }>>;