@forthtilliath/forth-ui 0.2.5 → 0.3.0

package/README.md

@@ -8,7 +8,7 @@ built from `Popover` + `Command`, a `PasswordInput` with a strength meter, a
 `Dropdrawer` that's a `DropdownMenu` on desktop and a `Drawer` on mobile —
 so you don't have to wire the same recipe from scratch in every project.
 
-58 components across 8 categories, styled with Tailwind CSS and
+62 components across 8 categories, styled with Tailwind CSS and
 `class-variance-authority`, fully typed, and browsable in Storybook
 (`pnpm run dev:sb` from the repo root).
 
@@ -186,6 +186,7 @@ Grouped the same way as the Storybook sidebar (`forth-ui/<Category>/...`).
 | `Rating`                  | `components/rating`         | A star rating control with keyboard navigation and hover preview.        |
 | `SubmitButton`            | `components/submit-button`  | A submit `Button` that shows its own loading state via `useFormStatus`.  |
 | `TagsInput`               | `components/tags-input`     | A flexible input for adding/removing multiple tags.                      |
+| `ToggleSwitch`            | `components/toggle-switch`  | An on/off switch with an optional visible label and description.         |
 
 ### Feedback
 
@@ -211,17 +212,20 @@ Grouped the same way as the Storybook sidebar (`forth-ui/<Category>/...`).
 
 ### Data Display
 
-| Component               | Import                        | Description                                                              |
-| ----------------------- | ----------------------------- | ------------------------------------------------------------------------ |
-| `Avatar`, `AvatarGroup` | `components/avatar`           | An image with a fallback, status/badge indicators, and stacked grouping. |
-| `DescriptionList`       | `components/description-list` | A description list, with terms and descriptions.                         |
-| `FileList`              | `components/file-list`        | Displays a list of files with name, size, and upload progress.           |
-| `Kbd`                   | `components/kbd`              | Displays which key or combination of keys performs a given action.       |
-| `QrCode`                | `components/qr-code`          | Generates a QR code from a string, rendered as inline SVG.               |
-| `RelativeTime`          | `components/relative-time`    | Displays a live-updating time, defaulting to the local timezone.         |
-| `Sortable`              | `components/sortable`         | A drag-to-reorder list built on native HTML5 drag events.                |
-| `Timeline`              | `components/timeline`         | A vertical sequence of dated events, connected by a line.                |
-| `Tree`                  | `components/tree`             | A hierarchical, expandable/collapsible list of nodes.                    |
+| Component                      | Import                        | Description                                                              |
+| ------------------------------ | ----------------------------- | ------------------------------------------------------------------------ |
+| `Avatar`, `AvatarGroup`        | `components/avatar`           | An image with a fallback, status/badge indicators, and stacked grouping. |
+| `ColumnMenu` (`useDndSensors`) | `components/column-menu`      | A dropdown to show/hide and reorder (drag and drop) a table's columns.   |
+| `DescriptionList`              | `components/description-list` | A description list, with terms and descriptions.                         |
+| `FileList`                     | `components/file-list`        | Displays a list of files with name, size, and upload progress.           |
+| `GradientFrame`                | `components/gradient-frame`   | A visual laid on an offset, gradient-filled frame.                       |
+| `IconBubble`                   | `components/icon-bubble`      | An icon inside a round, tinted bubble.                                   |
+| `Kbd`                          | `components/kbd`              | Displays which key or combination of keys performs a given action.       |
+| `QrCode`                       | `components/qr-code`          | Generates a QR code from a string, rendered as inline SVG.               |
+| `RelativeTime`                 | `components/relative-time`    | Displays a live-updating time, defaulting to the local timezone.         |
+| `Sortable`                     | `components/sortable`         | A drag-to-reorder list built on native HTML5 drag events.                |
+| `Timeline`                     | `components/timeline`         | A vertical sequence of dated events, connected by a line.                |
+| `Tree`                         | `components/tree`             | A hierarchical, expandable/collapsible list of nodes.                    |
 
 ### Code & Content
 

package/dist/components/column-menu/column-menu.d.ts

@@ -0,0 +1,39 @@
+import type { ColumnMenuColumn, ColumnMenuLabels } from "./types";
+export interface ColumnMenuProps<C extends ColumnMenuColumn> {
+    columns: C[];
+    /** Restored by the reset button. */
+    defaultColumns: C[];
+    /** Receives an updater, so a `useState` setter can be passed directly. */
+    onColumnsChange: (update: (prev: C[]) => C[]) => void;
+    /** Overrides some or all of the displayed texts. */
+    labels?: Partial<ColumnMenuLabels>;
+    /** Side of the trigger the dropdown is aligned to (default: `"end"`). */
+    align?: "start" | "end";
+    /**
+     * Custom classes for each part of the component.
+     *
+     * - `root` wraps the trigger and the dropdown.
+     * - `trigger` is the toggle button.
+     * - `badge` is the "visible / total" counter inside the trigger.
+     * - `content` is the dropdown panel.
+     * - `header` is the title + reset bar.
+     * - `hint` is the usage hint under the header.
+     * - `list` wraps the rows.
+     * - `row` is applied to every column row.
+     */
+    className?: Partial<Record<"root" | "trigger" | "badge" | "content" | "header" | "hint" | "list" | "row", string>>;
+}
+/**
+ * A dropdown to show/hide and reorder (drag and drop, touch and keyboard
+ * included) the columns of a table, with a "visible / total" counter and a
+ * reset button. Closes on outside click and `Escape`.
+ *
+ * Pair it with `createColumnStorage` from `@forthtilliath/ts-kit` to persist
+ * the user's layout.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ColumnMenu<C extends ColumnMenuColumn>({ columns, defaultColumns, onColumnsChange, labels, align, className, }: ColumnMenuProps<C>): import("react").JSX.Element;
+//# sourceMappingURL=column-menu.d.ts.map

package/dist/components/column-menu/column-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu.d.ts","sourceRoot":"","sources":["../../../src/components/column-menu/column-menu.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIlE,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,gBAAgB;IACzD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,oCAAoC;IACpC,cAAc,EAAE,CAAC,EAAE,CAAC;IACpB,0EAA0E;IAC1E,eAAe,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,OAAO,CACjB,MAAM,CACF,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,EACP,MAAM,CACP,CACF,CAAC;CACH;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,gBAAgB,EAAE,EACrD,OAAO,EACP,cAAc,EACd,eAAe,EACf,MAAM,EACN,KAAa,EACb,SAAS,GACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BAyJpB"}

package/dist/components/column-menu/column-menu.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { closestCenter, DndContext } from "@dnd-kit/core";
+import { arrayMove, SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { ChevronDown, RotateCcw } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { SortableColumnRow } from "./sortable-column-row";
+import { DEFAULT_COLUMN_MENU_LABELS } from "./types";
+import { useDndSensors } from "./use-dnd-sensors";
+/**
+ * A dropdown to show/hide and reorder (drag and drop, touch and keyboard
+ * included) the columns of a table, with a "visible / total" counter and a
+ * reset button. Closes on outside click and `Escape`.
+ *
+ * Pair it with `createColumnStorage` from `@forthtilliath/ts-kit` to persist
+ * the user's layout.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ColumnMenu({ columns, defaultColumns, onColumnsChange, labels, align = "end", className, }) {
+    const text = { ...DEFAULT_COLUMN_MENU_LABELS, ...labels };
+    // Stable id: avoids a hydration mismatch on dnd-kit's aria-describedby
+    const dndId = useId();
+    const contentId = useId();
+    const rootRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const sensors = useDndSensors();
+    const visibleCount = columns.filter((c) => c.visible).length;
+    const allVisible = visibleCount === columns.length;
+    useEffect(() => {
+        if (!open)
+            return;
+        function handlePointerDown(event) {
+            if (!rootRef.current?.contains(event.target))
+                setOpen(false);
+        }
+        function handleKeyDown(event) {
+            if (event.key === "Escape")
+                setOpen(false);
+        }
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [open]);
+    function handleDragEnd({ active, over }) {
+        if (!over || active.id === over.id)
+            return;
+        onColumnsChange((prev) => {
+            const oldIndex = prev.findIndex((c) => c.key === active.id);
+            const newIndex = prev.findIndex((c) => c.key === over.id);
+            return arrayMove(prev, oldIndex, newIndex);
+        });
+    }
+    function toggleColumn(key) {
+        onColumnsChange((prev) => prev.map((c) => (c.key === key ? { ...c, visible: !c.visible } : c)));
+    }
+    function reset() {
+        onColumnsChange(() => defaultColumns);
+        setOpen(false);
+    }
+    return (_jsxs("div", { ref: rootRef, "data-slot": "column-menu", className: cn("relative", className?.root), children: [_jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": contentId, onClick: () => {
+                    setOpen((v) => !v);
+                }, className: cn("flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-sm transition-all", open
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border text-foreground/60 hover:border-primary hover:text-foreground", className?.trigger), children: [_jsx("span", { className: "hidden sm:inline", children: text.trigger }), _jsxs("span", { className: cn("rounded-full px-1.5 py-0.5 text-xs font-medium", allVisible
+                            ? "bg-foreground/10 text-foreground/40"
+                            : "bg-primary text-primary-foreground", className?.badge), children: [visibleCount, "/", columns.length] }), _jsx(ChevronDown, { className: cn("size-3.5 opacity-60 transition-transform", open && "rotate-180"), "aria-hidden": "true" })] }), open && (_jsxs("div", { id: contentId, "data-slot": "column-menu-content", className: cn("bg-background border-border absolute top-full z-20 mt-2 w-64 overflow-hidden rounded-xl border shadow-xl", align === "end" ? "right-0" : "left-0", className?.content), children: [_jsxs("div", { className: cn("border-border bg-muted flex items-center justify-between border-b px-4 py-3", className?.header), children: [_jsx("p", { className: "text-foreground text-xs font-medium", children: text.title }), _jsxs("button", { type: "button", onClick: reset, className: "text-foreground/50 hover:text-primary flex items-center gap-1 text-xs transition-colors", children: [_jsx(RotateCcw, { className: "size-3", "aria-hidden": "true" }), text.reset] })] }), _jsx("p", { className: cn("border-border bg-muted/50 text-foreground/50 border-b px-4 py-2 text-xs", className?.hint), children: text.hint }), _jsx("div", { className: cn("p-2", className?.list), children: _jsx(DndContext, { id: dndId, sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns.map((c) => c.key), strategy: verticalListSortingStrategy, children: columns.map((column, index) => (_jsx(SortableColumnRow, { column: column, index: index, total: columns.length, dragHandleLabel: text.dragHandle(column.label), onToggle: toggleColumn, className: className?.row }, column.key))) }) }) })] }))] }));
+}

package/dist/components/column-menu/index.d.ts

@@ -0,0 +1,6 @@
+export type { ColumnMenuProps } from "./column-menu";
+export { ColumnMenu } from "./column-menu";
+export type { ColumnMenuColumn, ColumnMenuLabels } from "./types";
+export { DEFAULT_COLUMN_MENU_LABELS } from "./types";
+export { useDndSensors } from "./use-dnd-sensors";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/column-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/column-menu/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/column-menu/index.js

@@ -0,0 +1,3 @@
+export { ColumnMenu } from "./column-menu";
+export { DEFAULT_COLUMN_MENU_LABELS } from "./types";
+export { useDndSensors } from "./use-dnd-sensors";

package/dist/components/column-menu/sortable-column-row.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnMenuColumn } from "./types";
+export interface SortableColumnRowProps<K extends string> {
+    column: ColumnMenuColumn<K>;
+    index: number;
+    total: number;
+    dragHandleLabel: string;
+    onToggle: (key: K) => void;
+    /** Carries `data-dragging` while the row is being dragged. */
+    className?: string;
+}
+/** One row of `ColumnMenu`: drag handle, visibility switch, position. */
+export declare function SortableColumnRow<K extends string>({ column, index, total, dragHandleLabel, onToggle, className, }: SortableColumnRowProps<K>): import("react").JSX.Element;
+//# sourceMappingURL=sortable-column-row.d.ts.map

package/dist/components/column-menu/sortable-column-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-column-row.d.ts","sourceRoot":"","sources":["../../../src/components/column-menu/sortable-column-row.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM;IACtD,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,MAAM,EACN,KAAK,EACL,KAAK,EACL,eAAe,EACf,QAAQ,EACR,SAAS,GACV,EAAE,sBAAsB,CAAC,CAAC,CAAC,+BAuD3B"}

package/dist/components/column-menu/sortable-column-row.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { ToggleSwitch } from "../toggle-switch";
+/** One row of `ColumnMenu`: drag handle, visibility switch, position. */
+export function SortableColumnRow({ column, index, total, dragHandleLabel, onToggle, className, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: column.key });
+    return (_jsxs("div", { ref: setNodeRef, "data-slot": "column-menu-row", "data-dragging": isDragging || undefined, style: {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            opacity: isDragging ? 0.5 : 1,
+            zIndex: isDragging ? 10 : undefined,
+        }, className: cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-colors", isDragging ? "bg-primary/5 border-primary/20 border" : "hover:bg-muted", className), children: [_jsx("button", { type: "button", ...attributes, ...listeners, "aria-label": dragHandleLabel, title: dragHandleLabel, className: "text-foreground/30 hover:text-foreground/60 shrink-0 cursor-grab touch-none transition-colors active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-4", "aria-hidden": "true" }) }), _jsx(ToggleSwitch, { size: "sm", checked: column.visible, onCheckedChange: () => {
+                    onToggle(column.key);
+                }, label: column.label, className: {
+                    root: "flex-1 gap-3",
+                    label: "text-foreground/40 group-data-[state=checked]/toggle-switch:text-foreground flex-1 text-left transition-colors",
+                } }), _jsxs("span", { className: "text-foreground/30 shrink-0 font-mono text-xs", children: [index + 1, "/", total] })] }));
+}

package/dist/components/column-menu/types.d.ts

@@ -0,0 +1,21 @@
+/** A table column the user can show/hide and reorder. */
+export interface ColumnMenuColumn<K extends string = string> {
+    key: K;
+    label: string;
+    visible: boolean;
+}
+/** Texts displayed by `ColumnMenu` (English by default). */
+export interface ColumnMenuLabels {
+    /** Trigger button text (hidden on small screens). */
+    trigger: string;
+    /** Menu title. */
+    title: string;
+    /** Reset button text. */
+    reset: string;
+    /** Usage hint under the title. */
+    hint: string;
+    /** Tooltip / accessible name of a row's drag handle. */
+    dragHandle: (label: string) => string;
+}
+export declare const DEFAULT_COLUMN_MENU_LABELS: ColumnMenuLabels;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/column-menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/column-menu/types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,4DAA4D;AAC5D,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC;AAED,eAAO,MAAM,0BAA0B,EAAE,gBAMxC,CAAC"}

package/dist/components/column-menu/types.js

@@ -0,0 +1,7 @@
+export const DEFAULT_COLUMN_MENU_LABELS = {
+    trigger: "Columns",
+    title: "Visible columns",
+    reset: "Reset",
+    hint: "Drag to reorder · toggle to show/hide",
+    dragHandle: (label) => `Move column ${label}`,
+};

package/dist/components/column-menu/use-dnd-sensors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Mouse (5px threshold, so clicks still work), touch (250ms long press, so
+ * the list still scrolls) and keyboard sensors for a sortable list.
+ */
+export declare function useDndSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+//# sourceMappingURL=use-dnd-sensors.d.ts.map

package/dist/components/column-menu/use-dnd-sensors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dnd-sensors.d.ts","sourceRoot":"","sources":["../../../src/components/column-menu/use-dnd-sensors.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,aAAa,sFAU5B"}

package/dist/components/column-menu/use-dnd-sensors.js

@@ -0,0 +1,14 @@
+"use client";
+import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+/**
+ * Mouse (5px threshold, so clicks still work), touch (250ms long press, so
+ * the list still scrolls) and keyboard sensors for a sortable list.
+ */
+export function useDndSensors() {
+    return useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 5 } }), useSensor(TouchSensor, {
+        activationConstraint: { delay: 250, tolerance: 5 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+}

package/dist/components/gradient-frame/gradient-frame.d.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+export interface GradientFrameProps {
+    /** Side the gradient frame sticks out on (default: `"right"`). */
+    side?: "left" | "right";
+    children: React.ReactNode;
+    /**
+     * Custom classes for each part of the component.
+     *
+     * - `root` wraps the frame and the content.
+     * - `frame` is the offset gradient panel — set its colors here with
+     *   gradient stops (`from-* via-* to-*`), the direction (`bg-linear-135`)
+     *   is already set.
+     * - `content` is the rounded, clipped container around `children`.
+     */
+    className?: Partial<Record<"root" | "frame" | "content", string>>;
+}
+/**
+ * A visual (image, video, card…) laid on a rounded frame offset diagonally
+ * behind it, filled with a gradient — a decorative "photo on a colored card"
+ * effect. The offset grows from `md` screens on.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function GradientFrame({ side, children, className, }: GradientFrameProps): React.JSX.Element;
+//# sourceMappingURL=gradient-frame.d.ts.map

package/dist/components/gradient-frame/gradient-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-frame.d.ts","sourceRoot":"","sources":["../../../src/components/gradient-frame/gradient-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;CACnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,QAAQ,EACR,SAAS,GACV,EAAE,kBAAkB,qBAuBpB"}

package/dist/components/gradient-frame/gradient-frame.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A visual (image, video, card…) laid on a rounded frame offset diagonally
+ * behind it, filled with a gradient — a decorative "photo on a colored card"
+ * effect. The offset grows from `md` screens on.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function GradientFrame({ side = "right", children, className, }) {
+    return (_jsxs("div", { "data-slot": "gradient-frame", className: cn("relative", className?.root), children: [_jsx("div", { "aria-hidden": "true", className: cn("from-primary to-primary/40 absolute inset-0 rounded-3xl bg-linear-135", side === "right"
+                    ? "translate-x-3 translate-y-3 md:translate-x-5 md:translate-y-5"
+                    : "-translate-x-3 translate-y-3 md:-translate-x-5 md:translate-y-5", className?.frame) }), _jsx("div", { className: cn("relative overflow-hidden rounded-3xl shadow-xl", className?.content), children: children })] }));
+}

package/dist/components/gradient-frame/index.d.ts

@@ -0,0 +1,3 @@
+export type { GradientFrameProps } from "./gradient-frame";
+export { GradientFrame } from "./gradient-frame";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/gradient-frame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/gradient-frame/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/gradient-frame/index.js

@@ -0,0 +1 @@
+export { GradientFrame } from "./gradient-frame";

package/dist/components/grid/variants.d.ts

@@ -1,6 +1,6 @@
 import type { VariantProps } from "class-variance-authority";
 export declare const gridVariants: (props?: ({
-    cols?: 1 | 2 | 3 | 7 | 12 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | null | undefined;
+    cols?: 1 | 2 | 3 | 7 | 10 | 5 | 12 | 4 | 6 | 8 | 9 | 11 | null | undefined;
     spacing?: "sm" | "lg" | "none" | "xs" | "md" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type GridVariants = VariantProps<typeof gridVariants>;

package/dist/components/icon-bubble/icon-bubble.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import type { IconBubbleVariants } from "./variants";
+export type IconBubbleProps = Omit<React.ComponentProps<"span">, "children"> & IconBubbleVariants & {
+    /** Icon component, e.g. a `lucide-react` icon. Decorative (`aria-hidden`). */
+    icon: React.ComponentType<{
+        size?: number | string;
+        "aria-hidden"?: boolean | "true" | "false";
+    }>;
+};
+/**
+ * An icon inside a round, tinted bubble — e.g. to lead an information line
+ * (date, place…). Tinted with `primary` by default; override both the
+ * background and the icon color through `className`
+ * (`bg-sky-500/15 text-sky-600`).
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function IconBubble({ icon: Icon, size, className, ...props }: IconBubbleProps): React.JSX.Element;
+//# sourceMappingURL=icon-bubble.d.ts.map

package/dist/components/icon-bubble/icon-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-bubble.d.ts","sourceRoot":"","sources":["../../../src/components/icon-bubble/icon-bubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAC1E,kBAAkB,GAAG;IACnB,8EAA8E;IAC9E,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QACxB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;KAC5C,CAAC,CAAC;CACJ,CAAC;AAEJ;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,IAAI,EACV,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAajB"}

package/dist/components/icon-bubble/icon-bubble.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { ICON_BUBBLE_ICON_SIZES, iconBubbleVariants } from "./variants";
+/**
+ * An icon inside a round, tinted bubble — e.g. to lead an information line
+ * (date, place…). Tinted with `primary` by default; override both the
+ * background and the icon color through `className`
+ * (`bg-sky-500/15 text-sky-600`).
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function IconBubble({ icon: Icon, size, className, ...props }) {
+    return (_jsx("span", { "data-slot": "icon-bubble", className: cn(iconBubbleVariants({ size }), className), ...props, children: _jsx(Icon, { size: ICON_BUBBLE_ICON_SIZES[size ?? "default"], "aria-hidden": "true" }) }));
+}

package/dist/components/icon-bubble/index.d.ts

@@ -0,0 +1,4 @@
+export type { IconBubbleProps } from "./icon-bubble";
+export { IconBubble } from "./icon-bubble";
+export type { IconBubbleVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon-bubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-bubble/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/icon-bubble/index.js

@@ -0,0 +1 @@
+export { IconBubble } from "./icon-bubble";

package/dist/components/icon-bubble/variants.d.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const iconBubbleVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Icon size (px) matching each bubble size. */
+export declare const ICON_BUBBLE_ICON_SIZES: {
+    readonly sm: 14;
+    readonly default: 17;
+    readonly lg: 20;
+};
+export type IconBubbleVariants = VariantProps<typeof iconBubbleVariants>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/icon-bubble/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/icon-bubble/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,eAAO,MAAM,kBAAkB;;8EAc9B,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,sBAAsB;;;;CAIzB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/icon-bubble/variants.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+export const iconBubbleVariants = cva("bg-primary/15 text-primary grid shrink-0 place-items-center rounded-full", {
+    variants: {
+        size: {
+            sm: "size-7",
+            default: "size-9",
+            lg: "size-11",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+/** Icon size (px) matching each bubble size. */
+export const ICON_BUBBLE_ICON_SIZES = {
+    sm: 14,
+    default: 17,
+    lg: 20,
+};

package/dist/components/toggle-switch/index.d.ts

@@ -0,0 +1,4 @@
+export type { ToggleSwitchProps } from "./toggle-switch";
+export { ToggleSwitch } from "./toggle-switch";
+export type { ToggleSwitchSizeVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle-switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/toggle-switch/index.js

@@ -0,0 +1 @@
+export { ToggleSwitch } from "./toggle-switch";

package/dist/components/toggle-switch/toggle-switch.d.ts

@@ -0,0 +1,37 @@
+import type React from "react";
+import type { ToggleSwitchSizeVariants } from "./variants";
+export type ToggleSwitchProps = Omit<React.ComponentProps<"button">, "children" | "className" | "onChange" | "onClick" | "role" | "type" | "value"> & ToggleSwitchSizeVariants & {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Visible text, also used as the accessible name. */
+    label?: React.ReactNode;
+    /** Secondary text under the label. */
+    description?: React.ReactNode;
+    /** Side of the text relative to the track (default: `"end"`). */
+    labelPosition?: "start" | "end";
+    /**
+     * Custom classes for each part of the component.
+     *
+     * - `root` is the `<button role="switch">` element — a `group/toggle-switch`
+     *   carrying `data-state="checked" | "unchecked"`, so any part can be
+     *   styled per state (`group-data-[state=checked]/toggle-switch:...`).
+     * - `track` / `thumb` are the switch itself.
+     * - `text` wraps the label and description (only when a description is set).
+     * - `label` / `description` are the text elements.
+     */
+    className?: Partial<Record<"root" | "track" | "thumb" | "text" | "label" | "description", string>>;
+};
+/**
+ * An on/off switch (`role="switch"`) with an optional visible label and
+ * description — clicking the text toggles it too. Visually distinct from an
+ * action button.
+ *
+ * Unlike shadcn's `Switch`, it has no Radix dependency and bundles the label,
+ * so a whole settings row is a single, fully clickable element.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ToggleSwitch({ checked, onCheckedChange, label, description, labelPosition, size, className, ...props }: ToggleSwitchProps): React.JSX.Element;
+//# sourceMappingURL=toggle-switch.d.ts.map

package/dist/components/toggle-switch/toggle-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAM3D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAC9E,GACC,wBAAwB,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,sDAAsD;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sCAAsC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAChC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CACjB,MAAM,CACJ,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,EAC7D,MAAM,CACP,CACF,CAAC;CACH,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,eAAe,EACf,KAAK,EACL,WAAW,EACX,aAAqB,EACrB,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAmDnB"}

package/dist/components/toggle-switch/toggle-switch.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { toggleSwitchThumbVariants, toggleSwitchTrackVariants, } from "./variants";
+/**
+ * An on/off switch (`role="switch"`) with an optional visible label and
+ * description — clicking the text toggles it too. Visually distinct from an
+ * action button.
+ *
+ * Unlike shadcn's `Switch`, it has no Radix dependency and bundles the label,
+ * so a whole settings row is a single, fully clickable element.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ToggleSwitch({ checked, onCheckedChange, label, description, labelPosition = "end", size, className, ...props }) {
+    const labelNode = label === undefined ? null : (_jsx("span", { className: cn("text-foreground text-sm", className?.label), children: label }));
+    // Without a description, the label is a direct flex child so that hiding it
+    // (e.g. `hidden sm:inline`) also removes the gap.
+    const text = description === undefined ? (labelNode) : (_jsxs("span", { className: cn("flex flex-col text-left", className?.text), children: [labelNode, _jsx("span", { className: cn("text-foreground/60 text-xs", className?.description), children: description })] }));
+    return (_jsxs("button", { type: "button", role: "switch", "aria-checked": checked, "data-slot": "toggle-switch", "data-state": checked ? "checked" : "unchecked", onClick: () => {
+            onCheckedChange(!checked);
+        }, className: cn("group/toggle-switch inline-flex cursor-pointer items-center gap-2 rounded-md focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", className?.root), ...props, children: [labelPosition === "start" && text, _jsx("span", { "data-slot": "toggle-switch-track", className: cn(toggleSwitchTrackVariants({ size }), className?.track), children: _jsx("span", { className: cn(toggleSwitchThumbVariants({ size }), className?.thumb) }) }), labelPosition === "end" && text] }));
+}

package/dist/components/toggle-switch/variants.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const toggleSwitchTrackVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const toggleSwitchThumbVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToggleSwitchSizeVariants = VariantProps<typeof toggleSwitchTrackVariants>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/toggle-switch/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,eAAO,MAAM,yBAAyB;;8EAmBrC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;8EAerC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,YAAY,CACjD,OAAO,yBAAyB,CACjC,CAAC"}

package/dist/components/toggle-switch/variants.js

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+export const toggleSwitchTrackVariants = cva([
+    "relative shrink-0 rounded-full bg-foreground/20 transition-colors",
+    "group-data-[state=checked]/toggle-switch:bg-primary",
+    "group-focus-visible/toggle-switch:ring-2 group-focus-visible/toggle-switch:ring-primary",
+    "group-focus-visible/toggle-switch:ring-offset-2 group-focus-visible/toggle-switch:ring-offset-background",
+], {
+    variants: {
+        size: {
+            sm: "h-5 w-8",
+            default: "h-5 w-9",
+            lg: "h-6 w-10",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+export const toggleSwitchThumbVariants = cva("absolute size-4 rounded-full bg-white shadow transition-transform", {
+    variants: {
+        size: {
+            sm: "top-0.5 left-0.5 group-data-[state=checked]/toggle-switch:translate-x-3",
+            default: "top-0.5 left-0.5 group-data-[state=checked]/toggle-switch:translate-x-4",
+            lg: "top-1 left-1 group-data-[state=checked]/toggle-switch:translate-x-4",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});

package/dist/globals.css

@@ -73,6 +73,7 @@
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
+    --radius-3xl: 1.5rem;
     --shadow-2xs: var(--shadow-2xs);
     --shadow-xs: var(--shadow-xs);
     --shadow-sm: var(--shadow-sm);
@@ -323,9 +324,15 @@
   .top-0 {
     top: 0px;
   }
+  .top-0\.5 {
+    top: calc(var(--spacing) * 0.5);
+  }
   .top-0\.25 {
     top: calc(var(--spacing) * 0.25);
   }
+  .top-1 {
+    top: var(--spacing);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -338,6 +345,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-full {
+    top: 100%;
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
@@ -365,9 +375,21 @@
   .-left-1 {
     left: calc(var(--spacing) * -1);
   }
+  .left-0 {
+    left: 0px;
+  }
+  .left-0\.5 {
+    left: calc(var(--spacing) * 0.5);
+  }
   .left-0\.25 {
     left: calc(var(--spacing) * 0.25);
   }
+  .left-1 {
+    left: var(--spacing);
+  }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -557,6 +579,10 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
   .size-14 {
     width: calc(var(--spacing) * 14);
     height: calc(var(--spacing) * 14);
@@ -636,12 +662,24 @@
   .w-1 {
     width: var(--spacing);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -687,6 +725,18 @@
   .origin-top {
     transform-origin: top;
   }
+  .-translate-x-3 {
+    --tw-translate-x: calc(var(--spacing) * -3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-3 {
+    --tw-translate-x: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-3 {
+    --tw-translate-y: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-y-0 {
     --tw-scale-y: 0%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
@@ -695,6 +745,9 @@
     --tw-scale-y: 100%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -728,6 +781,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .\[appearance\:textfield\] {
     appearance: textfield;
   }
@@ -788,6 +844,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-center {
     align-items: center;
   }
@@ -895,6 +954,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1101,6 +1163,18 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
     }
   }
+  .bg-foreground\/10 {
+    background-color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+    }
+  }
+  .bg-foreground\/20 {
+    background-color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
+    }
+  }
   .bg-fuchsia-500 {
     background-color: var(--color-fuchsia-500);
   }
@@ -1167,6 +1241,12 @@
       background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
     }
   }
+  .bg-muted\/50 {
+    background-color: var(--color-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+    }
+  }
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
@@ -1188,12 +1268,24 @@
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-primary\/5 {
+    background-color: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+    }
+  }
   .bg-primary\/10 {
     background-color: var(--color-primary);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
     }
   }
+  .bg-primary\/15 {
+    background-color: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
+  }
   .bg-primary\/20 {
     background-color: var(--color-primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1242,6 +1334,12 @@
   .bg-sky-500 {
     background-color: var(--color-sky-500);
   }
+  .bg-sky-500\/15 {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
+    }
+  }
   .bg-sky-500\/25 {
     background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1287,6 +1385,9 @@
       background-color: color-mix(in oklab, var(--color-violet-500) 25%, transparent);
     }
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
@@ -1296,6 +1397,24 @@
       background-color: color-mix(in oklab, var(--color-yellow-500) 25%, transparent);
     }
   }
+  .bg-linear-135 {
+    --tw-gradient-position: 135deg;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: 135deg in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-primary {
+    --tw-gradient-from: var(--color-primary);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-primary\/40 {
+    --tw-gradient-to: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .fill-amber-400 {
     fill: var(--color-amber-400);
   }
@@ -1311,6 +1430,9 @@
   .p-1 {
     padding: var(--spacing);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1486,6 +1608,30 @@
   .text-foreground {
     color: var(--color-foreground);
   }
+  .text-foreground\/30 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
+    }
+  }
+  .text-foreground\/40 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
+    }
+  }
+  .text-foreground\/50 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
+    }
+  }
+  .text-foreground\/60 {
+    color: var(--color-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+    }
+  }
   .text-fuchsia-500 {
     color: var(--color-fuchsia-500);
   }
@@ -1543,6 +1689,9 @@
   .text-sky-500 {
     color: var(--color-sky-500);
   }
+  .text-sky-600 {
+    color: var(--color-sky-600);
+  }
   .text-sky-700 {
     color: var(--color-sky-700);
   }
@@ -1586,6 +1735,9 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-60 {
+    opacity: 60%;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -1595,6 +1747,14 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow {
+    --tw-shadow: var(--shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: var(--shadow-xl);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xs {
     --tw-shadow: var(--shadow-xs);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1700,6 +1860,34 @@
       animation-play-state: paused;
     }
   }
+  .group-focus-visible\/toggle-switch\:ring-2:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .group-focus-visible\/toggle-switch\:ring-primary:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-color: var(--color-primary);
+  }
+  .group-focus-visible\/toggle-switch\:ring-offset-2:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .group-focus-visible\/toggle-switch\:ring-offset-background:is(:where(.group\/toggle-switch):focus-visible *) {
+    --tw-ring-offset-color: var(--color-background);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:translate-x-3:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    --tw-translate-x: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:translate-x-4:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    --tw-translate-x: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:bg-primary:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    background-color: var(--color-primary);
+  }
+  .group-data-\[state\=checked\]\/toggle-switch\:text-foreground:is(:where(.group\/toggle-switch)[data-state="checked"] *) {
+    color: var(--color-foreground);
+  }
   .placeholder\:text-muted-foreground::placeholder {
     color: var(--color-muted-foreground);
   }
@@ -1746,6 +1934,9 @@
     .hover\:z-10:hover {
       z-index: 10;
     }
+    .hover\:border-primary:hover {
+      border-color: var(--color-primary);
+    }
     .hover\:bg-accent:hover {
       background-color: var(--color-accent);
     }
@@ -1760,6 +1951,9 @@
     .hover\:bg-background:hover {
       background-color: var(--color-background);
     }
+    .hover\:bg-muted:hover {
+      background-color: var(--color-muted);
+    }
     .hover\:text-accent-foreground:hover {
       color: var(--color-accent-foreground);
     }
@@ -1774,6 +1968,14 @@
     .hover\:text-foreground:hover {
       color: var(--color-foreground);
     }
+    .hover\:text-foreground\/60:hover {
+      color: var(--color-foreground);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:text-foreground\/60:hover {
+        color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
+      }
+    }
     .hover\:text-primary:hover {
       color: var(--color-primary);
     }
@@ -1812,6 +2014,10 @@
       --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
     }
   }
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .active\:cursor-grabbing:active {
     cursor: grabbing;
   }
@@ -1939,6 +2145,9 @@
     .sm\:hidden {
       display: none;
     }
+    .sm\:inline {
+      display: inline;
+    }
     .sm\:w-1\/3 {
       width: calc(1 / 3 * 100%);
     }
@@ -1962,6 +2171,18 @@
     .md\:hidden {
       display: none;
     }
+    .md\:-translate-x-5 {
+      --tw-translate-x: calc(var(--spacing) * -5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .md\:translate-x-5 {
+      --tw-translate-x: calc(var(--spacing) * 5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .md\:translate-y-5 {
+      --tw-translate-y: calc(var(--spacing) * 5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
   }
   @media (width >= 64rem) {
     .lg\:hidden {
@@ -2642,6 +2863,21 @@
     transform: translateY(-100%);
   }
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -2697,6 +2933,48 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -2844,21 +3122,6 @@
   initial-value: "";
   inherits: false;
 }
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2930,6 +3193,9 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
@@ -2942,6 +3208,15 @@
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-ordinal: initial;
@@ -2976,9 +3251,6 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
       --tw-animation-duration: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/forth-ui",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -14,6 +14,9 @@
   "homepage": "https://github.com/Forthtilliath/forthtilliath-packages/tree/main/packages/react/forth-ui#readme",
   "bugs": "https://github.com/Forthtilliath/forthtilliath-packages/issues",
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-radio-group": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
@@ -40,9 +43,9 @@
     "size-limit": "^11.2.0",
     "tailwindcss": "4.1.12",
     "typescript": "^5.9.3",
-    "@forthtilliath/eslint-config": "0.7.0",
     "@forthtilliath/ts-types": "0.2.0",
-    "@forthtilliath/typescript-config": "0.1.1"
+    "@forthtilliath/typescript-config": "0.1.1",
+    "@forthtilliath/eslint-config": "0.7.0"
   },
   "files": [
     "dist"