@forthtilliath/forth-ui 0.2.3 → 0.2.5

package/dist/components/color-picker/color-picker.d.ts

@@ -5,6 +5,8 @@ export interface ColorPickerProps {
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     className?: string;
+    /** Accessible name for the color swatch, which otherwise has no visible text. */
+    ariaLabel?: string;
 }
 /**
  * A color swatch + hex text input, kept in sync — built on the browser's
@@ -20,5 +22,5 @@ export interface ColorPickerProps {
  * @author Forth
  * @copyright 2026 Forth
  */
-export declare function ColorPicker({ value, defaultValue, onValueChange, disabled, className, }: ColorPickerProps): React.JSX.Element;
+export declare function ColorPicker({ value, defaultValue, onValueChange, disabled, className, ariaLabel, }: ColorPickerProps): React.JSX.Element;
 //# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAwB,EACxB,aAAa,EACb,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,qBAmDlB"}
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAwB,EACxB,aAAa,EACb,QAAgB,EAChB,SAAS,EACT,SAA0B,GAC3B,EAAE,gBAAgB,qBAoDlB"}

package/dist/components/color-picker/color-picker.js

@@ -18,7 +18,7 @@ const HEX_PATTERN = /^#[0-9a-f]{6}$/i;
  * @author Forth
  * @copyright 2026 Forth
  */
-export function ColorPicker({ value, defaultValue = "#000000", onValueChange, disabled = false, className, }) {
+export function ColorPicker({ value, defaultValue = "#000000", onValueChange, disabled = false, className, ariaLabel = "Choose color", }) {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const [textValue, setTextValue] = React.useState(defaultValue);
     const color = value ?? uncontrolledValue;
@@ -27,7 +27,7 @@ export function ColorPicker({ value, defaultValue = "#000000", onValueChange, di
         setTextValue(next);
         onValueChange?.(next);
     }
-    return (_jsxs("div", { "data-slot": "color-picker", className: cn("flex items-center gap-2", className), children: [_jsx("label", { className: cn("border-input size-9 shrink-0 overflow-hidden rounded-md border shadow-xs", disabled && "pointer-events-none opacity-50"), style: { backgroundColor: color }, children: _jsx("input", { type: "color", value: color, disabled: disabled, onChange: (e) => {
+    return (_jsxs("div", { "data-slot": "color-picker", className: cn("flex items-center gap-2", className), children: [_jsx("label", { "aria-label": ariaLabel, className: cn("border-input size-9 shrink-0 overflow-hidden rounded-md border shadow-xs", disabled && "pointer-events-none opacity-50"), style: { backgroundColor: color }, children: _jsx("input", { type: "color", value: color, disabled: disabled, onChange: (e) => {
                         commit(e.target.value);
                     }, className: "size-full cursor-pointer opacity-0" }) }), _jsx(Input, { value: textValue, disabled: disabled, onChange: (e) => {
                     setTextValue(e.target.value);

package/dist/components/combobox/multi-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAuB,EACvB,YAAkC,EAClC,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,qBA+GlB"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAuB,EACvB,YAAkC,EAClC,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,qBAoHlB"}

package/dist/components/combobox/multi-select.js

@@ -23,6 +23,7 @@ import { Badge } from "../badge";
  * @copyright 2026 Forth
  */
 export function MultiSelect({ options, value, defaultValue, onValueChange, placeholder = "Select…", emptyMessage = "No results found.", disabled = false, className, }) {
+    const listboxId = React.useId();
     const [open, setOpen] = React.useState(false);
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
     const selected = value ?? uncontrolledValue;
@@ -36,7 +37,7 @@ export function MultiSelect({ options, value, defaultValue, onValueChange, place
             : [...selected, optionValue]);
     }
     const selectedOptions = options.filter((option) => selected.includes(option.value));
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { role: "combobox", tabIndex: disabled ? -1 : 0, "aria-expanded": open, "aria-disabled": disabled, "data-disabled": disabled, onKeyDown: (e) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { role: "combobox", tabIndex: disabled ? -1 : 0, "aria-expanded": open, "aria-controls": listboxId, "aria-disabled": disabled, "data-disabled": disabled, onKeyDown: (e) => {
                         if (!disabled && (e.key === "Enter" || e.key === " ")) {
                             e.preventDefault();
                             setOpen((prev) => !prev);
@@ -45,7 +46,7 @@ export function MultiSelect({ options, value, defaultValue, onValueChange, place
                                     e.stopPropagation();
                                 }, onOpenChange: () => {
                                     toggle(option.value);
-                                }, children: option.label }, option.value)))) : (_jsx("span", { className: "text-muted-foreground font-normal", children: placeholder })) }), _jsx(ChevronsUpDownIcon, { className: "shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.label, disabled: option.disabled, onSelect: () => {
+                                }, children: option.label }, option.value)))) : (_jsx("span", { className: "text-muted-foreground font-normal", children: placeholder })) }), _jsx(ChevronsUpDownIcon, { className: "shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { id: listboxId, className: "w-(--radix-popover-trigger-width) p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.label, disabled: option.disabled, onSelect: () => {
                                             toggle(option.value);
                                         }, children: [_jsx(CheckIcon, { className: cn("size-4", selected.includes(option.value)
                                                     ? "opacity-100"

package/dist/components/command-palette/command-palette.js

@@ -35,7 +35,7 @@ export function CommandPalette({ groups, open, onOpenChange, placeholder = "Type
         return () => {
             document.removeEventListener("keydown", onKeyDown);
         };
-        // eslint-disable-next-line @eslint-react/exhaustive-deps, react-hooks/exhaustive-deps -- `setOpen` is a plain function redefined every render; including it would re-register this listener every render instead of only when `isOpen`/`shortcutKey` actually change, which is what its own re-closure over `isOpen` depends on
+        // eslint-disable-next-line @eslint-react/exhaustive-deps -- `setOpen` is a plain function redefined every render; including it would re-register this listener every render instead of only when `isOpen`/`shortcutKey` actually change, which is what its own re-closure over `isOpen` depends on
     }, [isOpen, shortcutKey]);
     return (_jsxs(CommandDialog, { open: isOpen, onOpenChange: setOpen, title: "Command Palette", description: placeholder, children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), groups.map((group, index) => (
                     // eslint-disable-next-line @eslint-react/no-array-index-key -- `heading` is optional and not guaranteed unique

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

@@ -18,7 +18,7 @@ export function ImageInput({ value, onFileChange, disabled = false, className, a
     const inputRef = React.useRef(null);
     React.useEffect(() => {
         if (file === null) {
-            // eslint-disable-next-line @eslint-react/set-state-in-effect, react-hooks/set-state-in-effect -- syncs the object URL lifecycle (create/revoke) with the selected File, an external browser resource that can't be derived during render
+            // eslint-disable-next-line @eslint-react/set-state-in-effect -- syncs the object URL lifecycle (create/revoke) with the selected File, an external browser resource that can't be derived during render
             setObjectUrl(null);
             return;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/rating/rating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,GAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,IAAgB,EAChB,SAAS,GACV,EAAE,WAAW,qBA0Db"}
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/rating/rating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,GAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,IAAgB,EAChB,SAAS,GACV,EAAE,WAAW,qBA+Db"}

package/dist/components/rating/rating.js

@@ -27,7 +27,12 @@ export function Rating({ value, defaultValue = 0, onValueChange, max = 5, disabl
         setUncontrolledValue(next);
         onValueChange?.(next);
     }
-    return (_jsx("div", { role: "radiogroup", "aria-disabled": disabled, "data-slot": "rating", className: cn("inline-flex items-center gap-0.5", (disabled || readOnly) && "pointer-events-none", className), onMouseLeave: () => {
+    return (_jsx("div", { role: "radiogroup", 
+        // Not a Tab stop itself — focus lives on the roving `role="radio"`
+        // children below — but jsx-a11y wants an interactive-role element with
+        // a mouse handler (onMouseLeave, used only to clear the hover preview)
+        // to declare an explicit tabIndex.
+        tabIndex: -1, "aria-disabled": disabled, "data-slot": "rating", className: cn("inline-flex items-center gap-0.5", (disabled || readOnly) && "pointer-events-none", className), onMouseLeave: () => {
             setHoverValue(null);
         }, children: Array.from({ length: max }, (_, i) => i + 1).map((starValue) => (_jsx("button", { type: "button", role: "radio", "aria-checked": current === starValue, "aria-label": `${starValue.toString()} star${starValue > 1 ? "s" : ""}`, disabled: disabled, tabIndex: readOnly ? -1 : 0, onMouseEnter: () => {
                 setHoverValue(starValue);

package/dist/components/relative-time/relative-time.js

@@ -39,7 +39,7 @@ export function RelativeTime({ date, timeZone, label, formatOptions, className,
         // ones — there's no way to read "now" during render without
         // reintroducing the hydration mismatch this state is starting
         // `undefined` to avoid.
-        // eslint-disable-next-line @eslint-react/set-state-in-effect, react-hooks/set-state-in-effect
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
         setLiveNow(new Date());
         const interval = setInterval(() => {
             setLiveNow(new Date());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/forth-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -24,10 +24,11 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "shiki": "^4.4.3",
-    "@forthtilliath/react-kit": "0.2.1",
+    "@forthtilliath/react-kit": "0.4.0",
     "@forthtilliath/shadcn-ui": "0.2.0"
   },
   "devDependencies": {
+    "@size-limit/file": "^11.2.0",
     "@tailwindcss/postcss": "4.1.12",
     "@turbo/gen": "^2.10.9",
     "@types/node": "^26.2.0",
@@ -36,11 +37,12 @@
     "@types/react-dom": "^19.2.4",
     "concurrently": "^10.0.4",
     "eslint": "10.7.0",
+    "size-limit": "^11.2.0",
     "tailwindcss": "4.1.12",
     "typescript": "^5.9.3",
-    "@forthtilliath/eslint-config": "0.1.0",
-    "@forthtilliath/typescript-config": "0.0.0",
-    "@forthtilliath/ts-types": "0.1.0"
+    "@forthtilliath/eslint-config": "0.7.0",
+    "@forthtilliath/ts-types": "0.2.0",
+    "@forthtilliath/typescript-config": "0.1.1"
   },
   "files": [
     "dist"
@@ -49,6 +51,18 @@
     "./components/*": "./dist/components/*/index.js",
     "./styles/globals.css": "./dist/globals.css"
   },
+  "size-limit": [
+    {
+      "name": "components (all, brotli)",
+      "path": "dist/**/*.js",
+      "limit": "70 KB"
+    },
+    {
+      "name": "globals.css (brotli)",
+      "path": "dist/globals.css",
+      "limit": "20 KB"
+    }
+  ],
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "check-types": "tsc --noEmit",
@@ -58,6 +72,7 @@
     "dev:tw": "pnpm run build:tw --watch",
     "build": "pnpm run clean && pnpm run build:ts && pnpm run build:tw",
     "build:ts": "tsc",
-    "build:tw": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/globals.css"
+    "build:tw": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/globals.css",
+    "size": "size-limit"
   }
 }