@forthtilliath/forth-ui 0.2.5 → 0.4.0

package/dist/components/theme-image/theme-image.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+export type ThemeImageProps<C extends React.ElementType = "img"> = {
+    /** Image component to render, e.g. Next.js' `Image`. @default "img" */
+    as?: C;
+    /** Shown in light mode. */
+    srcLight: string;
+    /** Shown in dark mode (the `dark` variant, e.g. a `.dark` root class). */
+    srcDark: string;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<C>, "as" | "src" | "className">;
+/**
+ * An image with a light and a dark version, switched by Tailwind's `dark`
+ * variant — both are rendered, one is hidden, so it works without any
+ * JavaScript (and without a flash on load).
+ *
+ * @example
+ * <ThemeImage as={Image} srcLight="/logo.svg" srcDark="/logo-dark.svg"
+ *   alt="Logo" width={180} height={38} />
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ThemeImage<C extends React.ElementType = "img">({ as, srcLight, srcDark, className, ...props }: ThemeImageProps<C>): React.JSX.Element;
+//# sourceMappingURL=theme-image.d.ts.map

package/dist/components/theme-image/theme-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-image.d.ts","sourceRoot":"","sources":["../../../src/components/theme-image/theme-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IACjE,uEAAuE;IACvE,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,WAAW,CAAC,CAAC;AAExE;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,EAC9D,EAAE,EACF,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,qBAiBpB"}

package/dist/components/theme-image/theme-image.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * An image with a light and a dark version, switched by Tailwind's `dark`
+ * variant — both are rendered, one is hidden, so it works without any
+ * JavaScript (and without a flash on load).
+ *
+ * @example
+ * <ThemeImage as={Image} srcLight="/logo.svg" srcDark="/logo-dark.svg"
+ *   alt="Logo" width={180} height={38} />
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ThemeImage({ as, srcLight, srcDark, className, ...props }) {
+    const Component = as ?? "img";
+    return (_jsxs(_Fragment, { children: [_jsx(Component, { ...props, src: srcLight, className: cn(className, "dark:hidden") }), _jsx(Component, { ...props, src: srcDark, className: cn(className, "hidden dark:block") })] }));
+}

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

@@ -1,3 +1,3 @@
-export type { TimelineItemData, TimelineProps } from "./timeline";
-export { Timeline } from "./timeline";
+export type { TimelineItemData, TimelineProps } from "./timeline.js";
+export { Timeline } from "./timeline.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/timeline/index.js

@@ -1 +1 @@
-export { Timeline } from "./timeline";
+export { Timeline } from "./timeline.js";

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

@@ -0,0 +1,4 @@
+export type { ToggleSwitchProps } from "./toggle-switch.js";
+export { ToggleSwitch } from "./toggle-switch.js";
+export type { ToggleSwitchSizeVariants } from "./variants.js";
+//# 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,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC"}

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

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

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

@@ -0,0 +1,37 @@
+import type React from "react";
+import type { ToggleSwitchSizeVariants } from "./variants.js";
+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,eAAe,CAAC;AAM9D,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.js";
+/**
+ * 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/components/tree/index.d.ts

@@ -1,3 +1,3 @@
-export type { TreeNode, TreeProps } from "./tree";
-export { Tree } from "./tree";
+export type { TreeNode, TreeProps } from "./tree.js";
+export { Tree } from "./tree.js";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/tree/index.js

@@ -1 +1 @@
-export { Tree } from "./tree";
+export { Tree } from "./tree.js";

package/dist/components/tree/tree.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react";
 import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../collapsible";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../collapsible/index.js";
 /**
  * A hierarchical, expandable/collapsible list of nodes (file explorer,
  * nested categories) — built on forth-ui's own `Collapsible` for each