@forthtilliath/forth-ui 0.2.0

package/dist/components/bento-grid/bento-grid.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+export function BentoGrid({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "bento-grid", className: cn("grid auto-rows-[12rem] grid-cols-3 gap-4", className), ...props }));
+}
+const COL_SPAN_CLASSES = {
+    1: "",
+    2: "col-span-2",
+    3: "col-span-3",
+};
+const ROW_SPAN_CLASSES = {
+    1: "",
+    2: "row-span-2",
+};
+/**
+ * A CSS-grid layout for unevenly-sized cards ("bento box" layouts) — a
+ * lightweight layout helper (`grid`+`col-span`/`row-span`), not a
+ * dependency-driven masonry/packing algorithm.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.aceternity.com/components/bento-grid
+ * @see https://blocks.mvp-subha.me/docs/grids/bento
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function BentoGridItem({ colSpan = 1, rowSpan = 1, className, ...props }) {
+    return (_jsx("div", { "data-slot": "bento-grid-item", className: cn("border-border rounded-xl border p-4", COL_SPAN_CLASSES[colSpan], ROW_SPAN_CLASSES[rowSpan], className), ...props }));
+}

package/dist/components/bento-grid/index.d.ts

@@ -0,0 +1,3 @@
+export type { BentoGridItemProps } from "./bento-grid";
+export { BentoGrid, BentoGridItem } from "./bento-grid";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/bento-grid/index.d.ts.map

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

package/dist/components/bento-grid/index.js

@@ -0,0 +1 @@
+export { BentoGrid, BentoGridItem } from "./bento-grid";

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,29 @@
+import type React from "react";
+export interface BreadcrumbEntry {
+    label: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbEntry[];
+    /**
+     * Collapses items between the first and last into a dropdown "…" once
+     * there are more than this many — shadcn-ui's own `BreadcrumbEllipsis` is
+     * purely decorative (no dropdown behavior), unlike ktui's.
+     */
+    maxItems?: number;
+    className?: string;
+}
+/**
+ * Displays the path to the current resource using a hierarchy of links.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/breadcrumb
+ * @see https://ktui.io/docs/breadcrumb
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Breadcrumb({ items, maxItems, className }: BreadcrumbProps): React.JSX.Element;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/breadcrumb/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,qBAyFzE"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Breadcrumb as BreadcrumbPrimitive, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@forthtilliath/shadcn-ui/components/breadcrumb";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@forthtilliath/shadcn-ui/components/dropdown-menu";
+function EntryLink({ item }) {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [item.icon, item.label] }));
+}
+/**
+ * Displays the path to the current resource using a hierarchy of links.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/breadcrumb
+ * @see https://ktui.io/docs/breadcrumb
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Breadcrumb({ items, maxItems, className }) {
+    const shouldCollapse = maxItems !== undefined && items.length > maxItems;
+    const firstItem = items[0];
+    const lastItem = items.at(-1);
+    const hiddenItems = shouldCollapse ? items.slice(1, -1) : [];
+    const visibleMiddleItems = shouldCollapse ? [] : items.slice(1, -1);
+    return (_jsx(BreadcrumbPrimitive, { className: className, children: _jsxs(BreadcrumbList, { children: [firstItem && (_jsx(BreadcrumbItem, { children: firstItem.href ? (_jsx(BreadcrumbLink, { href: firstItem.href, children: _jsx(EntryLink, { item: firstItem }) })) : (_jsx(BreadcrumbPage, { children: _jsx(EntryLink, { item: firstItem }) })) })), items.length > 1 && _jsx(BreadcrumbSeparator, {}), shouldCollapse && (_jsxs(_Fragment, { children: [_jsx(BreadcrumbItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "hover:text-foreground flex items-center transition-colors", "aria-label": "Show hidden breadcrumb items", children: "\u2026" }), _jsx(DropdownMenuContent, { align: "start", children: hiddenItems.map((item, index) => (
+                                        // eslint-disable-next-line @eslint-react/no-array-index-key -- `label` is an arbitrary ReactNode and `href` is optional, so index is the only stable fallback
+                                        _jsx(DropdownMenuItem, { asChild: true, children: item.href ? (_jsx("a", { href: item.href, children: _jsx(EntryLink, { item: item }) })) : (_jsx("span", { children: _jsx(EntryLink, { item: item }) })) }, item.href ?? index))) })] }) }), _jsx(BreadcrumbSeparator, {})] })), visibleMiddleItems.map((item, index) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 sm:gap-2.5", children: [_jsx(BreadcrumbItem, { children: item.href ? (_jsx(BreadcrumbLink, { href: item.href, children: _jsx(EntryLink, { item: item }) })) : (_jsx(BreadcrumbPage, { children: _jsx(EntryLink, { item: item }) })) }), _jsx(BreadcrumbSeparator, {})] }, item.href ?? index))), lastItem && items.length > 1 && (_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: _jsx(EntryLink, { item: lastItem }) }) }))] }) }));
+}

package/dist/components/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export type { BreadcrumbEntry, BreadcrumbProps } from "./breadcrumb";
+export { Breadcrumb } from "./breadcrumb";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumb/index.d.ts.map

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

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { Breadcrumb } from "./breadcrumb";

package/dist/components/button/button-group.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+export type ButtonGroupProps = React.ComponentProps<"div"> & {
+    /**
+     * Stack the buttons vertically instead of horizontally.
+     * @default false
+     */
+    vertical?: boolean;
+};
+/**
+ * Groups buttons into a single, visually connected row (or column), joining
+ * their borders and radii — for segmented controls / toolbars.
+ *
+ * @see https://ui.shadcn.com/docs/components/button#button-group
+ */
+export declare function ButtonGroup({ className, vertical, ...props }: ButtonGroupProps): React.JSX.Element;
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/button/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAgBlB"}

package/dist/components/button/button-group.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * Groups buttons into a single, visually connected row (or column), joining
+ * their borders and radii — for segmented controls / toolbars.
+ *
+ * @see https://ui.shadcn.com/docs/components/button#button-group
+ */
+export function ButtonGroup({ className, vertical = false, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", className: cn("flex w-fit", vertical
+            ? "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
+            : "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none", "[&>*]:relative [&>*]:focus-visible:z-10", className), ...props }));
+}

package/dist/components/button/button.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { Button as ButtonPrimitive } from "@forthtilliath/shadcn-ui/components/button";
+import type { ButtonSizeVariants } from "./variants";
+export type ButtonProps = Omit<React.ComponentProps<typeof ButtonPrimitive>, "size"> & ButtonSizeVariants & {
+    /**
+     * Shows a spinner before the content and disables the button.
+     *
+     * Controlled by the caller (pairs with your own mutation/submit state)
+     * rather than an internal idle/loading/success animation — the more
+     * flexible pattern when the loading source is already a promise your
+     * app is tracking (React Query, a form library, etc).
+     */
+    loading?: boolean;
+};
+/**
+ * Displays a button or a component that looks like a button.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/button
+ * @see https://ktui.io/docs/button
+ * @see https://ui.aceternity.com/components/stateful-button
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Button({ className, size, shape, loading, disabled, children, ...props }: ButtonProps): React.JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAGvF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAC5C,MAAM,CACP,GACC,kBAAkB,GAAG;IACnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,qBAYb"}

package/dist/components/button/button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+import { Button as ButtonPrimitive } from "@forthtilliath/shadcn-ui/components/button";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { buttonSizeVariants } from "./variants";
+/**
+ * Displays a button or a component that looks like a button.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/button
+ * @see https://ktui.io/docs/button
+ * @see https://ui.aceternity.com/components/stateful-button
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Button({ className, size, shape, loading = false, disabled, children, ...props }) {
+    return (_jsxs(ButtonPrimitive, { className: cn(buttonSizeVariants({ size, shape }), className), disabled: disabled ?? loading, "aria-busy": loading, ...props, children: [loading && _jsx(Loader2Icon, { className: "animate-spin" }), children] }));
+}

package/dist/components/button/index.d.ts

@@ -0,0 +1,6 @@
+export type { ButtonProps } from "./button";
+export { Button } from "./button";
+export type { ButtonGroupProps } from "./button-group";
+export { ButtonGroup } from "./button-group";
+export type { ButtonSizeVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./button";
+export { ButtonGroup } from "./button-group";

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

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

package/dist/components/button/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/button/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAO7D,eAAO,MAAM,kBAAkB;;;8EAqB7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/button/variants.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+// shadcn-ui's own Button only exposes size: default | sm | lg | icon.
+// forth-ui owns the full size scale itself (applied via className on top
+// of the underlying primitive) rather than trying to extend a cva that
+// isn't ours to extend.
+export const buttonSizeVariants = cva("", {
+    variants: {
+        size: {
+            xs: "h-7 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5",
+            sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            "icon-xs": "size-7",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10",
+        },
+        shape: {
+            default: "",
+            pill: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        shape: "default",
+    },
+});

package/dist/components/checkbox/checkbox-group.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface CheckboxGroupOption {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    options: CheckboxGroupOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+}
+/**
+ * A group of `Checkbox`es sharing a single array value — shadcn-ui's own
+ * `Checkbox` is a standalone control with no grouped-value management, the
+ * gap heroui's Checkbox Group fills.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/checkbox
+ * @see https://www.heroui.com/docs/components/checkbox-group
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function CheckboxGroup({ options, value, defaultValue, onValueChange, disabled, orientation, className, }: CheckboxGroupProps): React.JSX.Element;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/checkbox/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAgB,EAChB,WAAwB,EACxB,SAAS,GACV,EAAE,kBAAkB,qBA2CpB"}

package/dist/components/checkbox/checkbox-group.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox } from "@forthtilliath/shadcn-ui/components/checkbox";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A group of `Checkbox`es sharing a single array value — shadcn-ui's own
+ * `Checkbox` is a standalone control with no grouped-value management, the
+ * gap heroui's Checkbox Group fills.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/checkbox
+ * @see https://www.heroui.com/docs/components/checkbox-group
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function CheckboxGroup({ options, value, defaultValue, onValueChange, disabled = false, orientation = "vertical", className, }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const selected = value ?? uncontrolledValue;
+    function toggle(optionValue, checked) {
+        const next = checked
+            ? [...selected, optionValue]
+            : selected.filter((v) => v !== optionValue);
+        setUncontrolledValue(next);
+        onValueChange?.(next);
+    }
+    return (_jsx("div", { role: "group", "data-slot": "checkbox-group", className: cn(orientation === "horizontal" ? "flex flex-wrap gap-4" : "grid gap-3", className), children: options.map((option) => (_jsxs("label", { className: cn("flex items-center gap-2 text-sm", (disabled || option.disabled) && "cursor-not-allowed opacity-50"), children: [_jsx(Checkbox, { checked: selected.includes(option.value), disabled: disabled || option.disabled, onCheckedChange: (checked) => {
+                        toggle(option.value, checked === true);
+                    } }), option.label] }, option.value))) }));
+}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxGroupOption, CheckboxGroupProps } from "./checkbox-group";
+export { CheckboxGroup } from "./checkbox-group";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

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

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./checkbox-group";

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,27 @@
+import type { AvatarProps } from "../avatar";
+import type { BadgeProps } from "../badge";
+export type ChipProps = BadgeProps & {
+    /**
+     * Renders a small `Avatar` before the content — for "person/entity chip"
+     * patterns (e.g. an assignee or a mentioned user).
+     */
+    avatar?: Pick<AvatarProps, "src" | "alt" | "fallback">;
+    /**
+     * Prevents interaction and dims the chip.
+     * @default false
+     */
+    isDisabled?: boolean;
+};
+/**
+ * A compact, interactive element for displaying status, categories, or
+ * filters — `Badge` with an optional avatar slot for tagging people/entities.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://v2.heroui.com/docs/components/chip
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Chip({ avatar, isDisabled, className, children, ...props }: ChipProps): import("react").JSX.Element;
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC;IACvD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAM,EACN,UAAkB,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BAWX"}

package/dist/components/chip/chip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Avatar } from "../avatar";
+import { Badge } from "../badge";
+/**
+ * A compact, interactive element for displaying status, categories, or
+ * filters — `Badge` with an optional avatar slot for tagging people/entities.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://v2.heroui.com/docs/components/chip
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Chip({ avatar, isDisabled = false, className, children, ...props }) {
+    return (_jsxs(Badge, { className: cn(isDisabled && "pointer-events-none opacity-50", className), "aria-disabled": isDisabled, ...props, children: [avatar && _jsx(Avatar, { size: "xs", className: { root: "-ml-1" }, ...avatar }), children] }));
+}

package/dist/components/chip/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChipProps } from "./chip";
+export { Chip } from "./chip";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/chip/index.js

@@ -0,0 +1 @@
+export { Chip } from "./chip";

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { BundledLanguage, BundledTheme, SpecialLanguage } from "shiki";
+export interface CodeBlockProps {
+    code: string;
+    language?: BundledLanguage | SpecialLanguage;
+    /** Shown in the header, before the language badge. */
+    filename?: string;
+    /**
+     * @default { light: "github-light", dark: "github-dark" }
+     */
+    theme?: {
+        light: BundledTheme;
+        dark: BundledTheme;
+    };
+    showLineNumbers?: boolean;
+    className?: string;
+}
+/**
+ * A syntax-highlighted code block with a copy-to-clipboard button, an
+ * optional filename/language header, and optional line numbers.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/code-block
+ * @see https://ui.aceternity.com/components/code-block
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function CodeBlock({ code, language, filename, theme, showLineNumbers, className, }: CodeBlockProps): React.JSX.Element;
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAO5E,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,eAAe,GAAG,eAAe,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,KAAqB,EACrB,eAAuB,EACvB,SAAS,GACV,EAAE,cAAc,qBAkFhB"}

package/dist/components/code-block/code-block.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { codeToHtml } from "shiki";
+import { Badge } from "@forthtilliath/shadcn-ui/components/badge";
+import { Button } from "@forthtilliath/shadcn-ui/components/button";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const DEFAULT_THEME = { light: "github-light", dark: "github-dark" };
+const COPY_FEEDBACK_MS = 2000;
+/**
+ * A syntax-highlighted code block with a copy-to-clipboard button, an
+ * optional filename/language header, and optional line numbers.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/code-block
+ * @see https://ui.aceternity.com/components/code-block
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function CodeBlock({ code, language = "text", filename, theme = DEFAULT_THEME, showLineNumbers = false, className, }) {
+    const [html, setHtml] = React.useState(null);
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        let cancelled = false;
+        void codeToHtml(code, {
+            lang: language,
+            themes: theme,
+            defaultColor: false,
+        }).then((result) => {
+            if (!cancelled) {
+                setHtml(result);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [code, language, theme]);
+    function handleCopy() {
+        void navigator.clipboard.writeText(code).then(() => {
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+            }, COPY_FEEDBACK_MS);
+        });
+    }
+    return (_jsxs("div", { className: cn("border-border bg-card overflow-hidden rounded-lg border text-sm", className), children: [(filename ?? language !== "text") && (_jsx("div", { className: "border-border bg-muted/40 flex items-center justify-between border-b px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-2", children: [filename && (_jsx("span", { className: "text-muted-foreground font-mono text-xs", children: filename })), _jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: language })] }) })), _jsxs("div", { className: "group relative", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: handleCopy, "aria-label": copied ? "Copied" : "Copy code", className: "absolute top-2 right-2 size-7 opacity-0 transition-opacity group-hover:opacity-100", children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), html ? (_jsx("div", { className: cn("[&_pre]:overflow-x-auto [&_pre]:p-4", showLineNumbers &&
+                            "[&_code]:[counter-reset:line] [&_.line]:[counter-increment:line] [&_.line]:before:text-muted-foreground [&_.line]:before:mr-4 [&_.line]:before:inline-block [&_.line]:before:w-4 [&_.line]:before:text-right [&_.line]:before:content-[counter(line)]"), 
+                        // Shiki generates static markup from the given `code` string
+                        // server-side-safe (no user input reaches this beyond the
+                        // developer-supplied `code` prop), same trust boundary as
+                        // ChartStyle's dangerouslySetInnerHTML elsewhere in this repo.
+                        // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
+                        dangerouslySetInnerHTML: { __html: html } })) : (_jsx("pre", { className: "overflow-x-auto p-4", children: _jsx("code", { children: code }) }))] })] }));
+}

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,3 @@
+export type { CodeBlockProps } from "./code-block";
+export { CodeBlock } from "./code-block";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/code-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/code-block/index.js

@@ -0,0 +1 @@
+export { CodeBlock } from "./code-block";

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { LucideProps } from "lucide-react";
+import { Collapsible as CollapsiblePrimitive, CollapsibleContent as CollapsibleContentPrimitive, CollapsibleTrigger as CollapsibleTriggerPrimitive } from "@forthtilliath/shadcn-ui/components/collapsible";
+export type CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive>;
+/**
+ * An interactive component which expands/collapses a single panel — the
+ * single-item primitive `Accordion` is built on top of. Reach for
+ * `Accordion` instead when you have several mutually-exclusive sections.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/collapsible
+ * @see https://ktui.io/docs/collapse
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Collapsible(props: CollapsibleProps): React.JSX.Element;
+export type CollapsibleTriggerProps = React.ComponentProps<typeof CollapsibleTriggerPrimitive> & {
+    /** Hides the chevron icon entirely. */
+    hideChevron?: boolean;
+    /** Renders this icon instead of the default chevron. */
+    customChevron?: React.ReactElement<LucideProps>;
+};
+/**
+ * A trigger with a chevron that rotates 180° when the panel is open —
+ * shadcn-ui's own `CollapsibleTrigger` renders no icon at all, matching
+ * `AccordionTrigger`'s `hideChevron`/`customChevron` API for consistency.
+ */
+export declare function CollapsibleTrigger({ className, hideChevron, customChevron, children, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+export type CollapsibleContentProps = React.ComponentProps<typeof CollapsibleContentPrimitive>;
+/**
+ * A height-animated content panel — shadcn-ui's own `CollapsibleContent`
+ * has no animation at all (an instant show/hide via Radix's `data-state`).
+ * Uses the `animate-collapsible-down`/`-up` keyframes `tw-animate-css`
+ * already ships (mirroring `accordion-down`/`-up`, keyed to Radix
+ * Collapsible's own `--radix-collapsible-content-height` variable) but
+ * that nothing in this repo used yet.
+ */
+export declare function CollapsibleContent({ className, ...props }: CollapsibleContentProps): React.JSX.Element;
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EACL,WAAW,IAAI,oBAAoB,EACnC,kBAAkB,IAAI,2BAA2B,EACjD,kBAAkB,IAAI,2BAA2B,EAClD,MAAM,iDAAiD,CAAC;AAGzD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CACjD,OAAO,oBAAoB,CAC5B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAElD;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,2BAA2B,CACnC,GAAG;IACF,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wDAAwD;IACxD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;CACjD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,WAAmB,EACnB,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBA6BzB;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CACxD,OAAO,2BAA2B,CACnC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAUzB"}

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { Collapsible as CollapsiblePrimitive, CollapsibleContent as CollapsibleContentPrimitive, CollapsibleTrigger as CollapsibleTriggerPrimitive, } from "@forthtilliath/shadcn-ui/components/collapsible";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * An interactive component which expands/collapses a single panel — the
+ * single-item primitive `Accordion` is built on top of. Reach for
+ * `Accordion` instead when you have several mutually-exclusive sections.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/collapsible
+ * @see https://ktui.io/docs/collapse
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Collapsible(props) {
+    return _jsx(CollapsiblePrimitive, { "data-slot": "collapsible", ...props });
+}
+/**
+ * A trigger with a chevron that rotates 180° when the panel is open —
+ * shadcn-ui's own `CollapsibleTrigger` renders no icon at all, matching
+ * `AccordionTrigger`'s `hideChevron`/`customChevron` API for consistency.
+ */
+export function CollapsibleTrigger({ className, hideChevron = false, customChevron, children, ...props }) {
+    const chevronProps = {
+        ...customChevron?.props,
+        className: cn("text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200", customChevron?.props.className),
+    };
+    return (_jsxs(CollapsibleTriggerPrimitive, { className: cn("flex flex-1 items-center justify-between gap-4 text-left text-sm font-medium [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, !hideChevron && React.isValidElement(customChevron) ? (
+            // cloneElement is required here (not the `Slot` pattern) so the merged
+            // className goes through `cn()`'s tailwind-merge dedup, and the icon
+            // stays the trigger's direct child for the `>svg` CSS selector above.
+            // eslint-disable-next-line @eslint-react/no-clone-element
+            React.cloneElement(customChevron, chevronProps)) : (_jsx(ChevronDownIcon, { ...chevronProps }))] }));
+}
+/**
+ * A height-animated content panel — shadcn-ui's own `CollapsibleContent`
+ * has no animation at all (an instant show/hide via Radix's `data-state`).
+ * Uses the `animate-collapsible-down`/`-up` keyframes `tw-animate-css`
+ * already ships (mirroring `accordion-down`/`-up`, keyed to Radix
+ * Collapsible's own `--radix-collapsible-content-height` variable) but
+ * that nothing in this repo used yet.
+ */
+export function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsibleContentPrimitive, { className: cn("data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden text-sm", className), ...props }));
+}