@jcsoftdev/ui 0.1.7 → 0.2.0

package/dist/atoms/led/led.js

@@ -6,17 +6,31 @@ const statusClasses = {
   danger: "bg-danger",
   idle: "bg-ink-3"
 };
-function Led({ status = "success", label, showLabel, className }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: cn("size-[7px] shrink-0 rounded-pill", statusClasses[status])
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: showLabel ? void 0 : "sr-only", children: label })
-  ] });
+function Led({
+  status = "success",
+  label,
+  showLabel,
+  className,
+  classNames,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      className: cn("inline-flex items-center gap-1.5", classNames?.root, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-1.75 shrink-0 rounded-pill", statusClasses[status], classNames?.dot)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn(showLabel ? void 0 : "sr-only", classNames?.label), children: label })
+      ]
+    }
+  );
 }
 export {
   Led

package/dist/atoms/progress/index.d.ts

@@ -1 +1 @@
-export { Meter, Progress, type ProgressProps } from "./progress.js";
+export { Meter, Progress, type ProgressPart, type ProgressProps } from "./progress.js";

package/dist/atoms/progress/progress.d.ts

@@ -1,9 +1,14 @@
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 import type { ComponentPropsWithoutRef } from "react";
-export interface ProgressProps extends Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, "value"> {
+import type { ClassNames } from "../../utils/class-names.js";
+export type ProgressPart = "root" | "indicator";
+export interface ProgressProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     value: number;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ProgressPart>;
     max?: number;
+    /** Text announced as `aria-valuetext`; defaults to the rounded percentage. */
+    getValueLabel?: (value: number, max: number) => string;
 }
-export declare function Progress({ value, max, className, ...props }: ProgressProps): import("react").JSX.Element;
+export declare function Progress({ value, max: maxProp, getValueLabel, className, classNames, ...props }: ProgressProps): import("react").JSX.Element;
 /** Thinner progress bar. */
 export declare function Meter({ className, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/atoms/progress/progress.js

@@ -1,27 +1,55 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../../utils/cn.js";
-function Progress({ value, max = 100, className, ...props }) {
+const DEFAULT_MAX = 100;
+function isValidMax(max) {
+  return typeof max === "number" && !Number.isNaN(max) && max > 0;
+}
+function isValidValue(value, max) {
+  return typeof value === "number" && !Number.isNaN(value) && value >= 0 && value <= max;
+}
+function defaultGetValueLabel(value, max) {
+  return `${Math.round(value / max * 100)}%`;
+}
+function Progress({
+  value,
+  max: maxProp = DEFAULT_MAX,
+  getValueLabel = defaultGetValueLabel,
+  className,
+  classNames,
+  ...props
+}) {
+  const max = isValidMax(maxProp) ? maxProp : DEFAULT_MAX;
+  const current = isValidValue(value, max) ? value : null;
+  const state = current === null ? "indeterminate" : current === max ? "complete" : "loading";
   return /* @__PURE__ */ jsx(
-    ProgressPrimitive.Root,
+    "div",
     {
-      value,
-      max,
-      className: cn("h-1.5 overflow-hidden rounded-pill bg-track", className),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": current ?? void 0,
+      "aria-valuetext": current === null ? void 0 : getValueLabel(current, max),
+      "data-state": state,
+      "data-value": current ?? void 0,
+      "data-max": max,
+      className: cn("h-1.5 overflow-hidden rounded-pill bg-track", classNames?.root, className),
       ...props,
       children: /* @__PURE__ */ jsx(
-        ProgressPrimitive.Indicator,
+        "div",
         {
-          className: "block h-full bg-accent transition-transform",
-          style: { transform: `translateX(-${100 - value / max * 100}%)` }
+          "data-state": state,
+          "data-value": current ?? void 0,
+          "data-max": max,
+          className: cn("block h-full bg-accent transition-transform", classNames?.indicator),
+          style: { transform: `translateX(-${100 - (current ?? 0) / max * 100}%)` }
         }
       )
     }
   );
 }
 function Meter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Progress, { className: cn("h-[5px]", className), ...props });
+  return /* @__PURE__ */ jsx(Progress, { className: cn("h-1.25", className), ...props });
 }
 export {
   Meter,

package/dist/atoms/radio-group/index.d.ts

@@ -1 +1 @@
-export { RadioGroup, type RadioGroupProps, type RadioOption, } from "./radio-group.js";
+export { RadioGroup, type RadioGroupPart, type RadioGroupProps, type RadioOption, } from "./radio-group.js";

package/dist/atoms/radio-group/radio-group-primitive.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type RovingDirection, type RovingOrientation } from "../../utils/roving-focus.js";
+export interface RadioGroupRootProps extends Omit<ComponentProps<"div">, "defaultValue" | "dir" | "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    orientation?: RovingOrientation;
+    dir?: RovingDirection;
+    loop?: boolean;
+}
+export declare function RadioGroupRoot({ value: valueProp, defaultValue, onValueChange, name, form, required, disabled, orientation, dir, loop, ref, ...props }: RadioGroupRootProps): import("react").JSX.Element;
+export interface RadioGroupItemProps extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "checked" | "defaultChecked"> {
+    value: string;
+}
+export declare function RadioGroupItem({ value, disabled, children, onClick, onKeyDown, onFocus, ref, ...props }: RadioGroupItemProps): import("react").JSX.Element;
+export interface RadioGroupIndicatorProps extends ComponentProps<"span"> {
+    forceMount?: boolean;
+    children?: ReactNode;
+}
+export declare function RadioGroupIndicator({ forceMount, ...props }: RadioGroupIndicatorProps): import("react").JSX.Element | null;

package/dist/atoms/radio-group/radio-group-primitive.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState
+} from "react";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { BubbleInput, useFormBubble, useFormReset } from "../../utils/form-bubble.js";
+import {
+  useRovingFocus
+} from "../../utils/roving-focus.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (!context) throw new Error("RadioGroupItem must be rendered inside a RadioGroupRoot.");
+  return context;
+}
+function RadioGroupRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  name,
+  form,
+  required = false,
+  disabled = false,
+  orientation,
+  dir,
+  loop = true,
+  ref,
+  ...props
+}) {
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? null,
+    onChange: onValueChange
+  });
+  const roving = useRovingFocus({ orientation, dir, loop, activeId: value });
+  const { ref: rovingRef, ...rovingRootProps } = roving.rootProps;
+  const [control, setControl] = useState(null);
+  const composedRef = useComposedRefs(ref, rovingRef, setControl);
+  const initialRef = useRef(value);
+  useFormReset(control, form, () => setValue(initialRef.current));
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext,
+    {
+      value: {
+        value,
+        onValueChange: setValue,
+        name,
+        form,
+        required,
+        disabled,
+        getItemProps: roving.getItemProps
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-required": required,
+          "aria-orientation": orientation,
+          "data-disabled": disabled ? "" : void 0,
+          dir,
+          ...rovingRootProps,
+          ...props,
+          onFocus: composeHandlers(props.onFocus, rovingRootProps.onFocus),
+          ref: composedRef
+        }
+      )
+    }
+  );
+}
+const ItemContext = createContext(null);
+const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+function RadioGroupItem({
+  value,
+  disabled,
+  children,
+  onClick,
+  onKeyDown,
+  onFocus,
+  ref,
+  ...props
+}) {
+  const group = useRadioGroupContext();
+  const bubble = useFormBubble(group.form);
+  const composedRef = useComposedRefs(ref, bubble.setControl);
+  const isDisabled = group.disabled || !!disabled;
+  const checked = group.value === value;
+  const roving = group.getItemProps(value, {
+    disabled: isDisabled,
+    onKeyDown: composeHandlers(onKeyDown, (event) => {
+      if (event.key === "Enter") event.preventDefault();
+    }),
+    onFocus,
+    // Arrow keys check the radio they land on; Home/End only move focus.
+    onNavigate: (target, key) => {
+      if (ARROW_KEYS.includes(key)) target.click();
+    }
+  });
+  return /* @__PURE__ */ jsxs(ItemContext, { value: { checked, disabled: isDisabled }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": checked,
+        "data-state": checked ? "checked" : "unchecked",
+        "data-disabled": isDisabled ? "" : void 0,
+        disabled: isDisabled,
+        value,
+        ...props,
+        ...roving,
+        ref: composedRef,
+        onClick: composeHandlers(onClick, (event) => {
+          if (!checked) group.onValueChange(value);
+          bubble.onControlClick(event, !checked);
+        }),
+        children
+      }
+    ),
+    bubble.isFormControl ? /* @__PURE__ */ jsx(
+      BubbleInput,
+      {
+        type: "radio",
+        checked,
+        bubble,
+        name: group.name,
+        value,
+        required: group.required,
+        disabled: isDisabled,
+        form: group.form
+      }
+    ) : null
+  ] });
+}
+function RadioGroupIndicator({ forceMount, ...props }) {
+  const item = useContext(ItemContext);
+  if (!item) throw new Error("RadioGroupIndicator must be rendered inside a RadioGroupItem.");
+  if (!forceMount && !item.checked) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-state": item.checked ? "checked" : "unchecked",
+      "data-disabled": item.disabled ? "" : void 0,
+      ...props
+    }
+  );
+}
+export {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot
+};

package/dist/atoms/radio-group/radio-group.d.ts

@@ -1,11 +1,15 @@
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { type ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+import { type RadioGroupRootProps } from "./radio-group-primitive.js";
 export interface RadioOption {
     value: string;
     label: string;
     description?: string;
+    disabled?: boolean;
 }
-export interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+export type RadioGroupPart = "root" | "option" | "radio" | "indicator" | "text" | "label" | "description";
+export interface RadioGroupProps extends RadioGroupRootProps {
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<RadioGroupPart>;
     options: RadioOption[];
 }
-export declare function RadioGroup({ options, className, ...props }: RadioGroupProps): import("react").JSX.Element;
+export declare function RadioGroup({ options, className, classNames, ...props }: RadioGroupProps): import("react").JSX.Element;

package/dist/atoms/radio-group/radio-group.js

@@ -1,15 +1,20 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { useId } from "react";
 import { cn } from "../../utils/cn.js";
-function RadioGroup({ options, className, ...props }) {
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot
+} from "./radio-group-primitive.js";
+function RadioGroup({ options, className, classNames, ...props }) {
   const baseId = useId();
   return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
+    RadioGroupRoot,
     {
       className: cn(
         "grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))]",
+        classNames?.root,
         className
       ),
       ...props,
@@ -19,21 +24,39 @@ function RadioGroup({ options, className, ...props }) {
           "label",
           {
             htmlFor: id,
-            className: "flex cursor-pointer items-start gap-2 rounded-control border-divider p-2.5 text-body in-data-[density=touch]:min-h-11 has-[[data-state=checked]]:border-accent has-[[data-state=checked]]:shadow-[inset_0_0_0_1px_var(--accent)]",
+            className: cn(
+              "flex cursor-pointer items-start gap-2 rounded-control border-divider p-2.5 text-body in-data-[density=touch]:min-h-11 has-[[data-state=checked]]:border-accent has-[[data-state=checked]]:shadow-[inset_0_0_0_1px_var(--accent)]",
+              classNames?.option
+            ),
             children: [
               /* @__PURE__ */ jsx(
-                RadioGroupPrimitive.Item,
+                RadioGroupItem,
                 {
                   id,
                   value: option.value,
-                  className: "mt-0.5 grid size-4 shrink-0 place-items-center rounded-pill border-[1.5px] border-line-strong data-[state=checked]:border-accent",
-                  children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "size-2 rounded-pill bg-accent" })
+                  disabled: option.disabled,
+                  className: cn(
+                    "mt-0.5 grid size-4 shrink-0 place-items-center rounded-pill border-[1.5px] border-line-strong data-[state=checked]:border-accent",
+                    classNames?.radio
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    RadioGroupIndicator,
+                    {
+                      className: cn("size-2 rounded-pill bg-accent", classNames?.indicator)
+                    }
+                  )
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col [overflow-wrap:anywhere]", children: [
-                /* @__PURE__ */ jsx("b", { className: "font-semibold text-[13px]", children: option.label }),
-                option.description ? /* @__PURE__ */ jsx("span", { className: "text-ink-3", children: option.description }) : null
-              ] })
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn("flex min-w-0 flex-col [overflow-wrap:anywhere]", classNames?.text),
+                  children: [
+                    /* @__PURE__ */ jsx("b", { className: cn("font-semibold text-fs-130", classNames?.label), children: option.label }),
+                    option.description ? /* @__PURE__ */ jsx("span", { className: cn("text-ink-3", classNames?.description), children: option.description }) : null
+                  ]
+                }
+              )
             ]
           },
           option.value

package/dist/atoms/status-dot/index.d.ts

@@ -1 +1 @@
-export { StatusDot, type StatusDotProps, type StatusDotShape, type StatusDotTone, } from "./status-dot.js";
+export { StatusDot, type StatusDotPart, type StatusDotProps, type StatusDotShape, type StatusDotTone, } from "./status-dot.js";

package/dist/atoms/status-dot/status-dot.d.ts

@@ -1,6 +1,11 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type StatusDotTone = "danger" | "warning" | "success" | "accent" | "neutral";
 export type StatusDotShape = "dot" | "square";
-export interface StatusDotProps {
+export type StatusDotPart = "root" | "dot" | "label";
+export interface StatusDotProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<StatusDotPart>;
     tone: StatusDotTone;
     /** Text describing the status: color is never the only signal. */
     label: string;
@@ -8,6 +13,5 @@ export interface StatusDotProps {
     shape?: StatusDotShape;
     /** Hollow variant: transparent fill with an accent inner ring. */
     hollow?: boolean;
-    className?: string;
 }
-export declare function StatusDot({ tone, label, showLabel, shape, hollow, className, }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ tone, label, showLabel, shape, hollow, className, classNames, ...props }: StatusDotProps): import("react").JSX.Element;

package/dist/atoms/status-dot/status-dot.js

@@ -9,7 +9,7 @@ const toneClasses = {
 };
 const shapeClasses = {
   dot: "size-1.5 rounded-pill",
-  square: "size-[9px] rounded-xs"
+  square: "size-2.25 rounded-xs"
 };
 function StatusDot({
   tone,
@@ -17,22 +17,32 @@ function StatusDot({
   showLabel,
   shape = "dot",
   hollow,
-  className
+  className,
+  classNames,
+  ...props
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex max-w-full items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: cn(
-          "shrink-0",
-          shapeClasses[shape],
-          hollow ? "bg-transparent shadow-[inset_0_0_0_2px_var(--accent)]" : toneClasses[tone]
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: showLabel ? "min-w-0 truncate" : "sr-only", children: label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      className: cn("inline-flex max-w-full items-center gap-1.5", classNames?.root, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "shrink-0",
+              shapeClasses[shape],
+              hollow ? "bg-transparent shadow-[inset_0_0_0_2px_var(--accent)]" : toneClasses[tone],
+              classNames?.dot
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn(showLabel ? "min-w-0 truncate" : "sr-only", classNames?.label), children: label })
+      ]
+    }
+  );
 }
 export {
   StatusDot

package/dist/atoms/status-pill/index.d.ts

@@ -1 +1 @@
-export { StatusPill, type StatusPillProps } from "./status-pill.js";
+export { StatusPill, type StatusPillPart, type StatusPillProps } from "./status-pill.js";

package/dist/atoms/status-pill/status-pill.d.ts

@@ -1,10 +1,14 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { type LedStatus } from "../led/index.js";
-export interface StatusPillProps {
+export type StatusPillPart = "root" | "dot" | "label";
+export interface StatusPillProps extends Omit<ComponentPropsWithRef<"button">, "children" | "onSelect"> {
     status: LedStatus;
     label: string;
     /** Without this the pill is decorative (disabled). */
     onSelect?: () => void;
-    className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<StatusPillPart>;
 }
 /** Pill showing a status LED and its label; the label is hidden when the surrounding container (e.g. the topbar) is narrow. */
-export declare function StatusPill({ status, label, onSelect, className }: StatusPillProps): import("react").JSX.Element;
+export declare function StatusPill({ status, label, onSelect, className, classNames, ...props }: StatusPillProps): import("react").JSX.Element;

package/dist/atoms/status-pill/status-pill.js

@@ -2,20 +2,29 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { Led } from "../led/index.js";
-function StatusPill({ status, label, onSelect, className }) {
+function StatusPill({
+  status,
+  label,
+  onSelect,
+  className,
+  classNames,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick: onSelect,
       disabled: !onSelect,
+      ...props,
       className: cn(
-        "flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-badge border-divider bg-surface-control px-2.5 font-semibold text-[12px] text-ink-2 hover:enabled:border-line-strong disabled:cursor-default",
+        "flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-badge border-divider bg-surface-control px-2.5 font-semibold text-fs-120 text-ink-2 hover:enabled:border-line-strong disabled:cursor-default",
+        classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Led, { status, label }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "@max-[700px]:hidden", children: label })
+        /* @__PURE__ */ jsx(Led, { status, label, classNames: { dot: classNames?.dot } }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("@max-[700px]:hidden", classNames?.label), children: label })
       ]
     }
   );

package/dist/atoms/switch/index.d.ts

@@ -1 +1 @@
-export { Switch, type SwitchProps } from "./switch.js";
+export { Switch, type SwitchPart, type SwitchProps } from "./switch.js";

package/dist/atoms/switch/switch.d.ts

@@ -1,5 +1,16 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import type { ComponentPropsWithoutRef } from "react";
-export interface SwitchProps extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+import { type ComponentProps } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type SwitchPart = "root" | "track" | "thumb";
+export interface SwitchProps extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "checked" | "defaultChecked" | "children"> {
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<SwitchPart>;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    /** Id of the `<form>` the switch belongs to when it is rendered outside it. */
+    form?: string;
 }
-export declare function Switch({ className, ...props }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ className, classNames, checked: checkedProp, defaultChecked, onCheckedChange, required, disabled, name, value, form, onClick, ref, ...props }: SwitchProps): import("react").JSX.Element;