@forthtilliath/forth-ui 0.3.0 → 0.4.1

package/dist/components/snippet/snippet.js

@@ -5,6 +5,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import { Button } from "@forthtilliath/shadcn-ui/components/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@forthtilliath/shadcn-ui/components/tabs";
 import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { useUiMessages } from "../../locale/locale.js";
 const COPY_FEEDBACK_MS = 2000;
 /**
  * Displays and copies code in a tabbed interface — the "npm install /
@@ -17,7 +18,8 @@ const COPY_FEEDBACK_MS = 2000;
  * @author Forth
  * @copyright 2026 Forth
  */
-export function Snippet({ items, defaultValue, className }) {
+export function Snippet({ items, defaultValue, className, locale, }) {
+    const messages = useUiMessages(locale);
     const [copiedValue, setCopiedValue] = React.useState(null);
     function handleCopy(item) {
         void navigator.clipboard.writeText(item.code).then(() => {
@@ -29,5 +31,7 @@ export function Snippet({ items, defaultValue, className }) {
     }
     return (_jsxs(Tabs, { defaultValue: defaultValue ?? items[0]?.value, className: cn("border-border overflow-hidden rounded-lg border", className), children: [_jsx(TabsList, { className: "bg-muted/40 h-auto w-full justify-start rounded-none border-b p-0", children: items.map((item) => (_jsx(TabsTrigger, { value: item.value, className: "data-[state=active]:bg-background rounded-none font-mono text-xs", children: item.label }, item.value))) }), items.map((item) => (_jsxs(TabsContent, { value: item.value, className: "relative m-0", children: [_jsx("pre", { className: "overflow-x-auto p-4 pr-12 font-mono text-sm", children: _jsx("code", { children: item.code }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
                             handleCopy(item);
-                        }, "aria-label": copiedValue === item.value ? "Copied" : "Copy", className: "absolute top-2 right-2 size-7", children: copiedValue === item.value ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) })] }, item.value)))] }));
+                        }, "aria-label": copiedValue === item.value
+                            ? messages.snippet.copied
+                            : messages.snippet.copy, className: "absolute top-2 right-2 size-7", children: copiedValue === item.value ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) })] }, item.value)))] }));
 }

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

@@ -1,3 +1,3 @@
-export type { SortableProps } from "./sortable";
-export { Sortable } from "./sortable";
+export type { SortableProps } from "./sortable.js";
+export { Sortable } from "./sortable.js";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/sortable/index.js

@@ -1 +1 @@
-export { Sortable } from "./sortable";
+export { Sortable } from "./sortable.js";

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

@@ -1,3 +1,3 @@
-export type { SpacerProps } from "./spacer";
-export { Spacer } from "./spacer";
+export type { SpacerProps } from "./spacer.js";
+export { Spacer } from "./spacer.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spacer/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spacer/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/spacer/index.js

@@ -1 +1 @@
-export { Spacer } from "./spacer";
+export { Spacer } from "./spacer.js";

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

@@ -1,4 +1,4 @@
-export type { SpinnerProps, SpinnerVariant } from "./spinner";
-export { Spinner } from "./spinner";
-export type { SpinnerSizeVariants } from "./variants";
+export type { SpinnerProps, SpinnerVariant } from "./spinner.js";
+export { Spinner } from "./spinner.js";
+export type { SpinnerSizeVariants } from "./variants.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/spinner/index.js

@@ -1 +1 @@
-export { Spinner } from "./spinner";
+export { Spinner } from "./spinner.js";

package/dist/components/spinner/spinner.d.ts

@@ -1,11 +1,17 @@
 import type React from "react";
-import type { SpinnerSizeVariants } from "./variants";
+import { type UiLocale } from "../../locale/locale.js";
+import type { SpinnerSizeVariants } from "./variants.js";
 export type SpinnerVariant = "default" | "ring" | "bars" | "ellipsis";
 export type SpinnerProps = React.ComponentProps<"span"> & SpinnerSizeVariants & {
     /**
      * @default "default"
      */
     variant?: SpinnerVariant;
+    /**
+     * Language of the default `aria-label` — French by default, or the
+     * nearest `UiLocaleProvider`'s. An `aria-label` prop still wins.
+     */
+    locale?: UiLocale;
 };
 /**
  * An accessible loading indicator, in one of a few visual styles.
@@ -18,5 +24,5 @@ export type SpinnerProps = React.ComponentProps<"span"> & SpinnerSizeVariants &
  * @author Forth
  * @copyright 2026 Forth
  */
-export declare function Spinner({ variant, size, className, ...props }: SpinnerProps): React.JSX.Element;
+export declare function Spinner({ variant, size, className, locale, ...props }: SpinnerProps): React.JSX.Element;
 //# sourceMappingURL=spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACrD,mBAAmB,GAAG;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,qBAyCd"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,wBAAwB,CAAC;AAEtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACrD,mBAAmB,GAAG;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACT,EAAE,YAAY,qBA0Cd"}

package/dist/components/spinner/spinner.js

@@ -1,7 +1,9 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader2Icon } from "lucide-react";
 import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
-import { spinnerSizeVariants } from "./variants";
+import { useUiMessages } from "../../locale/locale.js";
+import { spinnerSizeVariants } from "./variants.js";
 /**
  * An accessible loading indicator, in one of a few visual styles.
  *
@@ -13,7 +15,8 @@ import { spinnerSizeVariants } from "./variants";
  * @author Forth
  * @copyright 2026 Forth
  */
-export function Spinner({ variant = "default", size, className, ...props }) {
+export function Spinner({ variant = "default", size, className, locale, ...props }) {
+    const messages = useUiMessages(locale);
     const sizeClass = spinnerSizeVariants({ size });
-    return (_jsxs("span", { role: "status", "aria-label": "Loading", ...props, children: [variant === "ring" && (_jsx("span", { className: cn(sizeClass, "block animate-spin rounded-full border-2 border-current border-t-transparent", className) })), variant === "bars" && (_jsx("span", { className: cn(sizeClass, "flex items-center gap-0.5", className), children: [0, 150, 300].map((delay) => (_jsx("span", { className: "h-full w-1 animate-pulse rounded-full bg-current", style: { animationDelay: `${delay.toString()}ms` } }, delay))) })), variant === "ellipsis" && (_jsx("span", { className: cn(sizeClass, "flex items-center gap-1", className), children: [0, 150, 300].map((delay) => (_jsx("span", { className: "size-1/4 animate-bounce rounded-full bg-current", style: { animationDelay: `${delay.toString()}ms` } }, delay))) })), variant === "default" && (_jsx(Loader2Icon, { className: cn(sizeClass, "animate-spin", className) }))] }));
+    return (_jsxs("span", { role: "status", "aria-label": messages.spinner.loading, ...props, children: [variant === "ring" && (_jsx("span", { className: cn(sizeClass, "block animate-spin rounded-full border-2 border-current border-t-transparent", className) })), variant === "bars" && (_jsx("span", { className: cn(sizeClass, "flex items-center gap-0.5", className), children: [0, 150, 300].map((delay) => (_jsx("span", { className: "h-full w-1 animate-pulse rounded-full bg-current", style: { animationDelay: `${delay.toString()}ms` } }, delay))) })), variant === "ellipsis" && (_jsx("span", { className: cn(sizeClass, "flex items-center gap-1", className), children: [0, 150, 300].map((delay) => (_jsx("span", { className: "size-1/4 animate-bounce rounded-full bg-current", style: { animationDelay: `${delay.toString()}ms` } }, delay))) })), variant === "default" && (_jsx(Loader2Icon, { className: cn(sizeClass, "animate-spin", className) }))] }));
 }

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

@@ -1,3 +1,3 @@
-export type { StepperProps, StepperStep } from "./stepper";
-export { Stepper } from "./stepper";
+export type { StepperProps, StepperStep } from "./stepper.js";
+export { Stepper } from "./stepper.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/stepper/index.js

@@ -1 +1 @@
-export { Stepper } from "./stepper";
+export { Stepper } from "./stepper.js";

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

@@ -1,3 +1,3 @@
-export type { SubmitButtonProps } from "./submit-button";
-export { SubmitButton } from "./submit-button";
+export type { SubmitButtonProps } from "./submit-button.js";
+export { SubmitButton } from "./submit-button.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/submit-button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/submit-button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/submit-button/index.js

@@ -1 +1 @@
-export { SubmitButton } from "./submit-button";
+export { SubmitButton } from "./submit-button.js";

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "../button";
+import type { ButtonProps } from "../button/index.js";
 export type SubmitButtonProps = Omit<ButtonProps, "type" | "loading">;
 /**
  * A submit `Button` that shows its own loading state automatically while

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

@@ -1 +1 @@
-{"version":3,"file":"submit-button.d.ts","sourceRoot":"","sources":["../../../src/components/submit-button/submit-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAGpD"}
+{"version":3,"file":"submit-button.d.ts","sourceRoot":"","sources":["../../../src/components/submit-button/submit-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAGpD"}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormStatus } from "react-dom";
-import { Button } from "../button";
+import { Button } from "../button/index.js";
 /**
  * A submit `Button` that shows its own loading state automatically while
  * its parent `<form>` is submitting — via React's `useFormStatus`, so no

package/dist/components/tags-input/index.d.ts

@@ -1,3 +1,3 @@
-export type { TagsInputProps } from "./tags-input";
-export { TagsInput } from "./tags-input";
+export type { TagsInputProps } from "./tags-input.js";
+export { TagsInput } from "./tags-input.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tags-input/index.d.ts.map

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

package/dist/components/tags-input/index.js

@@ -1 +1 @@
-export { TagsInput } from "./tags-input";
+export { TagsInput } from "./tags-input.js";

package/dist/components/tags-input/tags-input.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type UiLocale } from "../../locale/locale.js";
 export interface TagsInputProps {
     value?: string[];
     defaultValue?: string[];
@@ -8,6 +9,18 @@ export interface TagsInputProps {
     /** Maximum number of tags allowed. */
     max?: number;
     className?: string;
+    /** `id` of the text input, e.g. for a `<label htmlFor>`. */
+    id?: string;
+    /**
+     * Accessible name of the text input — needed once tags hide the
+     * placeholder, unless a `<label>` targets `id`. @default "Ajouter un tag"
+     */
+    ariaLabel?: string;
+    /**
+     * Language of the built-in labels — French by default, or the nearest
+     * `UiLocaleProvider`'s. Explicit text props still win.
+     */
+    locale?: UiLocale;
 }
 /**
  * A flexible input for adding/removing multiple tags — `Enter`/`,` commits
@@ -22,5 +35,5 @@ export interface TagsInputProps {
  * @author Forth
  * @copyright 2026 Forth
  */
-export declare function TagsInput({ value, defaultValue, onValueChange, placeholder, disabled, max, className, }: TagsInputProps): React.JSX.Element;
+export declare function TagsInput({ value, defaultValue, onValueChange, placeholder, disabled, max, className, id, ariaLabel, locale, }: TagsInputProps): React.JSX.Element;
 //# sourceMappingURL=tags-input.d.ts.map

package/dist/components/tags-input/tags-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../../src/components/tags-input/tags-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,cAAc;IAC7B,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAwB,EACxB,QAAgB,EAChB,GAAG,EACH,SAAS,GACV,EAAE,cAAc,qBA+EhB"}
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../../src/components/tags-input/tags-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,wBAAwB,CAAC;AAGtE,MAAM,WAAW,cAAc;IAC7B,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,QAAgB,EAChB,GAAG,EACH,SAAS,EACT,EAAE,EACF,SAAS,EACT,MAAM,GACP,EAAE,cAAc,qBAqFhB"}

package/dist/components/tags-input/tags-input.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
-import { Badge } from "../badge";
+import { useUiMessages } from "../../locale/locale.js";
+import { Badge } from "../badge/index.js";
 /**
  * A flexible input for adding/removing multiple tags — `Enter`/`,` commits
  * the current text as a tag, `Backspace` on an empty input removes the
@@ -16,7 +17,9 @@ import { Badge } from "../badge";
  * @author Forth
  * @copyright 2026 Forth
  */
-export function TagsInput({ value, defaultValue, onValueChange, placeholder = "Add tag…", disabled = false, max, className, }) {
+export function TagsInput({ value, defaultValue, onValueChange, placeholder, disabled = false, max, className, id, ariaLabel, locale, }) {
+    const messages = useUiMessages(locale);
+    const placeholderText = placeholder ?? messages.tagsInput.placeholder;
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
     const [inputValue, setInputValue] = React.useState("");
     const tags = value ?? uncontrolledValue;
@@ -53,9 +56,9 @@ export function TagsInput({ value, defaultValue, onValueChange, placeholder = "A
     }
     return (_jsxs("div", { "data-slot": "tags-input", className: cn("border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-transparent px-3 py-1.5 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]", disabled && "pointer-events-none cursor-not-allowed opacity-50", className), children: [tags.map((tag) => (_jsx(Badge, { variant: "secondary", dismissible: true, open: true, onOpenChange: () => {
                     removeTag(tag);
-                }, children: tag }, tag))), _jsx("input", { value: inputValue, onChange: (e) => {
+                }, children: tag }, tag))), _jsx("input", { id: id, "aria-label": id === undefined ? (ariaLabel ?? messages.tagsInput.label) : ariaLabel, value: inputValue, onChange: (e) => {
                     setInputValue(e.target.value);
                 }, onKeyDown: handleKeyDown, onBlur: () => {
                     addTag(inputValue);
-                }, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, className: "placeholder:text-muted-foreground min-w-24 flex-1 bg-transparent text-sm outline-none disabled:cursor-not-allowed" })] }));
+                }, placeholder: tags.length === 0 ? placeholderText : undefined, disabled: disabled, className: "placeholder:text-muted-foreground min-w-24 flex-1 bg-transparent text-sm outline-none disabled:cursor-not-allowed" })] }));
 }

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

@@ -0,0 +1,3 @@
+export type { ThemeImageProps } from "./theme-image.js";
+export { ThemeImage } from "./theme-image.js";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1 @@
+export { ThemeImage } from "./theme-image.js";

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

@@ -1,4 +1,4 @@
-export type { ToggleSwitchProps } from "./toggle-switch";
-export { ToggleSwitch } from "./toggle-switch";
-export type { ToggleSwitchSizeVariants } from "./variants";
+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

@@ -1 +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"}
+{"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

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

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

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ToggleSwitchSizeVariants } from "./variants";
+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;

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

@@ -1 +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"}
+{"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

@@ -1,7 +1,7 @@
 "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";
+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

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