@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/atoms/radio-group/index.ts

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

package/src/atoms/radio-group/radio-group-primitive.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { BubbleInput, useFormBubble, useFormReset } from "../../utils/form-bubble.js";
+import {
+  type RovingDirection,
+  type RovingOrientation,
+  useRovingFocus,
+} from "../../utils/roving-focus.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+
+// Internal building blocks shared by RadioGroup and AccentPicker; not public API.
+
+interface RadioGroupContextValue {
+  value: string | null;
+  onValueChange: (value: string) => void;
+  name: string | undefined;
+  form: string | undefined;
+  required: boolean;
+  disabled: boolean;
+  getItemProps: ReturnType<typeof useRovingFocus>["getItemProps"];
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (!context) throw new Error("RadioGroupItem must be rendered inside a RadioGroupRoot.");
+  return context;
+}
+
+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 function RadioGroupRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  name,
+  form,
+  required = false,
+  disabled = false,
+  orientation,
+  dir,
+  loop = true,
+  ref,
+  ...props
+}: RadioGroupRootProps) {
+  const [value, setValue] = useControllableState<string | null>({
+    prop: valueProp,
+    defaultProp: defaultValue ?? null,
+    onChange: onValueChange as ((value: string | null) => void) | undefined,
+  });
+  const roving = useRovingFocus({ orientation, dir, loop, activeId: value });
+  const { ref: rovingRef, ...rovingRootProps } = roving.rootProps;
+  const [control, setControl] = useState<HTMLElement | null>(null);
+  const composedRef = useComposedRefs<HTMLDivElement>(ref, rovingRef, setControl);
+  const initialRef = useRef(value);
+  useFormReset(control, form, () => setValue(initialRef.current));
+
+  return (
+    <RadioGroupContext
+      value={{
+        value,
+        onValueChange: setValue,
+        name,
+        form,
+        required,
+        disabled,
+        getItemProps: roving.getItemProps,
+      }}
+    >
+      <div
+        role="radiogroup"
+        aria-required={required}
+        aria-orientation={orientation}
+        data-disabled={disabled ? "" : undefined}
+        dir={dir}
+        {...rovingRootProps}
+        {...props}
+        onFocus={composeHandlers(props.onFocus, rovingRootProps.onFocus)}
+        ref={composedRef}
+      />
+    </RadioGroupContext>
+  );
+}
+
+const ItemContext = createContext<{ checked: boolean; disabled: boolean } | null>(null);
+
+export interface RadioGroupItemProps
+  extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "checked" | "defaultChecked"> {
+  value: string;
+}
+
+const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+
+export function RadioGroupItem({
+  value,
+  disabled,
+  children,
+  onClick,
+  onKeyDown,
+  onFocus,
+  ref,
+  ...props
+}: RadioGroupItemProps) {
+  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 (
+    <ItemContext value={{ checked, disabled: isDisabled }}>
+      {/* biome-ignore lint/a11y/useSemanticElements: custom control; the hidden input carries the native form value */}
+      <button
+        type="button"
+        role="radio"
+        aria-checked={checked}
+        data-state={checked ? "checked" : "unchecked"}
+        data-disabled={isDisabled ? "" : undefined}
+        disabled={isDisabled}
+        value={value}
+        {...props}
+        {...roving}
+        ref={composedRef}
+        onClick={composeHandlers(onClick, (event) => {
+          if (!checked) group.onValueChange(value);
+          bubble.onControlClick(event, !checked);
+        })}
+      >
+        {children}
+      </button>
+      {bubble.isFormControl ? (
+        <BubbleInput
+          type="radio"
+          checked={checked}
+          bubble={bubble}
+          name={group.name}
+          value={value}
+          required={group.required}
+          disabled={isDisabled}
+          form={group.form}
+        />
+      ) : null}
+    </ItemContext>
+  );
+}
+
+export interface RadioGroupIndicatorProps extends ComponentProps<"span"> {
+  forceMount?: boolean;
+  children?: ReactNode;
+}
+
+export function RadioGroupIndicator({ forceMount, ...props }: RadioGroupIndicatorProps) {
+  const item = useContext(ItemContext);
+  if (!item) throw new Error("RadioGroupIndicator must be rendered inside a RadioGroupItem.");
+  if (!forceMount && !item.checked) return null;
+  return (
+    <span
+      data-state={item.checked ? "checked" : "unchecked"}
+      data-disabled={item.disabled ? "" : undefined}
+      {...props}
+    />
+  );
+}

package/src/atoms/radio-group/radio-group.tsx

@@ -1,26 +1,45 @@
 "use client";
 
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { type ComponentPropsWithoutRef, useId } from "react";
+import { useId } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot,
+  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 function RadioGroup({ options, className, ...props }: RadioGroupProps) {
+export function RadioGroup({ options, className, classNames, ...props }: RadioGroupProps) {
   const baseId = useId();
 
   return (
-    <RadioGroupPrimitive.Root
+    <RadioGroupRoot
       className={cn(
         "grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))]",
+        classNames?.root,
         className,
       )}
       {...props}
@@ -31,22 +50,37 @@ export function RadioGroup({ options, className, ...props }: RadioGroupProps) {
           <label
             key={option.value}
             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,
+            )}
           >
-            <RadioGroupPrimitive.Item
+            <RadioGroupItem
               id={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"
+              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,
+              )}
+            >
+              <RadioGroupIndicator
+                className={cn("size-2 rounded-pill bg-accent", classNames?.indicator)}
+              />
+            </RadioGroupItem>
+            <span
+              className={cn("flex min-w-0 flex-col [overflow-wrap:anywhere]", classNames?.text)}
             >
-              <RadioGroupPrimitive.Indicator className="size-2 rounded-pill bg-accent" />
-            </RadioGroupPrimitive.Item>
-            <span className="flex min-w-0 flex-col [overflow-wrap:anywhere]">
-              <b className="font-semibold text-[13px]">{option.label}</b>
-              {option.description ? <span className="text-ink-3">{option.description}</span> : null}
+              <b className={cn("font-semibold text-fs-130", classNames?.label)}>{option.label}</b>
+              {option.description ? (
+                <span className={cn("text-ink-3", classNames?.description)}>
+                  {option.description}
+                </span>
+              ) : null}
             </span>
           </label>
         );
       })}
-    </RadioGroupPrimitive.Root>
+    </RadioGroupRoot>
   );
 }

package/src/atoms/status-dot/index.ts

@@ -1,5 +1,6 @@
 export {
   StatusDot,
+  type StatusDotPart,
   type StatusDotProps,
   type StatusDotShape,
   type StatusDotTone,

package/src/atoms/status-dot/status-dot.tsx

@@ -1,3 +1,5 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export type StatusDotTone = "danger" | "warning" | "success" | "accent" | "neutral";
@@ -14,10 +16,14 @@ export type StatusDotShape = "dot" | "square";
 
 const shapeClasses: Record<StatusDotShape, string> = {
   dot: "size-1.5 rounded-pill",
-  square: "size-[9px] rounded-xs",
+  square: "size-2.25 rounded-xs",
 };
 
-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;
@@ -25,7 +31,6 @@ export interface StatusDotProps {
   shape?: StatusDotShape;
   /** Hollow variant: transparent fill with an accent inner ring. */
   hollow?: boolean;
-  className?: string;
 }
 
 export function StatusDot({
@@ -35,18 +40,26 @@ export function StatusDot({
   shape = "dot",
   hollow,
   className,
+  classNames,
+  ...props
 }: StatusDotProps) {
   return (
-    <span className={cn("inline-flex max-w-full items-center gap-1.5", className)}>
+    <span
+      {...props}
+      className={cn("inline-flex max-w-full items-center gap-1.5", classNames?.root, className)}
+    >
       <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,
         )}
       />
-      <span className={showLabel ? "min-w-0 truncate" : "sr-only"}>{label}</span>
+      <span className={cn(showLabel ? "min-w-0 truncate" : "sr-only", classNames?.label)}>
+        {label}
+      </span>
     </span>
   );
 }

package/src/atoms/status-pill/index.ts

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

package/src/atoms/status-pill/status-pill.tsx

@@ -1,30 +1,45 @@
 "use client";
 
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { Led, 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 function StatusPill({ status, label, onSelect, className }: StatusPillProps) {
+export function StatusPill({
+  status,
+  label,
+  onSelect,
+  className,
+  classNames,
+  ...props
+}: StatusPillProps) {
   return (
     <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,
       )}
     >
-      <Led status={status} label={label} />
-      <span aria-hidden="true" className="@max-[700px]:hidden">
+      <Led status={status} label={label} classNames={{ dot: classNames?.dot }} />
+      <span aria-hidden="true" className={cn("@max-[700px]:hidden", classNames?.label)}>
         {label}
       </span>
     </button>

package/src/atoms/switch/index.ts

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

package/src/atoms/switch/switch.tsx

@@ -1,23 +1,110 @@
 "use client";
 
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import type { ComponentPropsWithoutRef } from "react";
+import { type ComponentProps, useRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { BubbleInput, useFormBubble, useFormReset } from "../../utils/form-bubble.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
 
-export interface SwitchProps extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {}
+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 function Switch({
+  className,
+  classNames,
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  required,
+  disabled,
+  name,
+  value = "on",
+  form,
+  onClick,
+  ref,
+  ...props
+}: SwitchProps) {
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+  });
+  const bubble = useFormBubble(form);
+  const initialRef = useRef(checked);
+  useFormReset(bubble.control, form, () => setChecked(initialRef.current));
+  const composedRef = useComposedRefs(ref, bubble.setControl);
+  const state = checked ? "checked" : "unchecked";
+  const disabledAttr = disabled ? "" : undefined;
 
-export function Switch({ className, ...props }: SwitchProps) {
   return (
-    <SwitchPrimitive.Root
-      className={cn(
-        "inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
-        className,
-      )}
-      {...props}
-    >
-      <span className="relative block h-5 w-[34px] rounded-pill bg-line-strong transition-colors data-[state=checked]:bg-accent">
-        <SwitchPrimitive.Thumb className="absolute top-[3px] left-[3px] block size-3.5 rounded-pill bg-surface transition-transform data-[state=checked]:translate-x-3.5" />
-      </span>
-    </SwitchPrimitive.Root>
+    <>
+      {/* biome-ignore lint/a11y/useSemanticElements: custom control; the hidden input carries the native form value */}
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-required={required}
+        data-state={state}
+        data-disabled={disabledAttr}
+        disabled={disabled}
+        value={value}
+        {...props}
+        ref={composedRef}
+        className={cn(
+          "group inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
+          classNames?.root,
+          className,
+        )}
+        onClick={composeHandlers(onClick, (event) => {
+          setChecked((prev) => !prev);
+          bubble.onControlClick(event);
+        })}
+      >
+        <span
+          className={cn(
+            "relative block h-5 w-8.5 rounded-pill bg-line-strong transition-colors group-data-[state=checked]:bg-accent",
+            classNames?.track,
+          )}
+        >
+          <span
+            data-state={state}
+            data-disabled={disabledAttr}
+            className={cn(
+              "absolute top-0.75 left-0.75 block size-3.5 rounded-pill bg-surface transition-transform data-[state=checked]:translate-x-3.5",
+              classNames?.thumb,
+            )}
+          />
+        </span>
+      </button>
+      {bubble.isFormControl ? (
+        <BubbleInput
+          type="checkbox"
+          checked={checked}
+          bubble={bubble}
+          name={name}
+          value={value}
+          required={required}
+          disabled={disabled}
+          form={form}
+        />
+      ) : null}
+    </>
   );
 }

package/src/atoms/trend-chip/index.ts

@@ -5,4 +5,4 @@ export {
   trendDirection,
   trendTone,
 } from "./trend.js";
-export { TrendChip, type TrendChipProps } from "./trend-chip.js";
+export { TrendChip, type TrendChipPart, type TrendChipProps } from "./trend-chip.js";

package/src/atoms/trend-chip/trend-chip.tsx

@@ -1,5 +1,6 @@
-import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
+import { ArrowDownRight, ArrowRight, ArrowUpRight } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   formatTrend,
@@ -29,6 +30,8 @@ const directionWords: Record<TrendDirection, string> = {
 
 const directionIcons = { up: ArrowUpRight, down: ArrowDownRight, flat: ArrowRight };
 
+export type TrendChipPart = "root" | "arrow" | "value" | "label";
+
 export interface TrendChipProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
   /** Change in percent, e.g. 12.5 for +12.5%. */
   value: number;
@@ -39,6 +42,8 @@ export interface TrendChipProps extends Omit<ComponentPropsWithoutRef<"span">, "
   /** Text after the number, e.g. "vs. semana pasada". */
   label?: string;
   locale?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<TrendChipPart>;
 }
 
 /** Compact change indicator: arrow, signed percent and a good/bad tone, never color alone. */
@@ -49,6 +54,7 @@ export function TrendChip({
   label,
   locale,
   className,
+  classNames,
   ...props
 }: TrendChipProps) {
   const direction = trendDirection(value, epsilon);
@@ -60,14 +66,21 @@ export function TrendChip({
       className={cn(
         "inline-flex h-6 max-w-full items-center gap-1 whitespace-nowrap rounded-badge px-2 font-[650] text-chip-text tabular-nums",
         toneClasses[tone],
+        classNames?.root,
         className,
       )}
       {...props}
     >
-      <Arrow className="size-3 shrink-0" aria-hidden="true" strokeWidth={2.2} />
+      <Arrow
+        className={cn("size-3 shrink-0", classNames?.arrow)}
+        aria-hidden="true"
+        strokeWidth={2.2}
+      />
       <span className="sr-only">{`${directionWords[direction]}, ${toneWords[tone]}: `}</span>
-      <span>{text}</span>
-      {label ? <span className="min-w-0 truncate font-normal opacity-80">{label}</span> : null}
+      <span className={classNames?.value}>{text}</span>
+      {label ? (
+        <span className={cn("min-w-0 truncate font-normal", classNames?.label)}>{label}</span>
+      ) : null}
     </span>
   );
 }

package/src/brand/logo-forge.tsx

@@ -153,7 +153,7 @@ function Field({
 }
 
 const choiceBase =
-  "inline-flex h-control-sm cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-chip px-3 font-semibold text-[12.5px] pressable focus-visible:focus-ring";
+  "inline-flex h-control-sm cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-chip px-3 font-semibold text-fs-125 pressable focus-visible:focus-ring";
 
 function choiceClass(on: boolean) {
   return cn(