@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/atoms/avatar/avatar.tsx

@@ -1,8 +1,55 @@
 "use client";
 
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type ComponentPropsWithRef, useEffect, useState } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
+type ImageStatus = "idle" | "loading" | "loaded" | "error";
+
+/** Preloads `src` off-DOM; effects only, so server rendering never touches `window`. */
+function useImageStatus(src: string | undefined): ImageStatus {
+  const [status, setStatus] = useState<ImageStatus>("idle");
+
+  useEffect(() => {
+    if (!src) {
+      setStatus("error");
+      return;
+    }
+    const image = new window.Image();
+    const settle = () =>
+      setStatus(image.complete ? (image.naturalWidth > 0 ? "loaded" : "error") : "loading");
+    const onError = () => setStatus("error");
+    image.addEventListener("load", settle);
+    image.addEventListener("error", onError);
+    image.src = src;
+    settle();
+    return () => {
+      image.removeEventListener("load", settle);
+      image.removeEventListener("error", onError);
+      setStatus("idle");
+    };
+  }, [src]);
+
+  return status;
+}
+
+/** Holds the fallback back for `delayMs` so a fast image never flashes initials. */
+function useDelayElapsed(delayMs: number | undefined): boolean {
+  const [elapsed, setElapsed] = useState(delayMs === undefined);
+
+  useEffect(() => {
+    if (delayMs === undefined) {
+      setElapsed(true);
+      return;
+    }
+    setElapsed(false);
+    const timer = window.setTimeout(() => setElapsed(true), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [delayMs]);
+
+  return elapsed;
+}
+
 function initials(name: string): string {
   const words = name.trim().split(/\s+/).filter(Boolean);
   if (words.length === 1) {
@@ -16,36 +63,54 @@ function initials(name: string): string {
 export type AvatarSize = "md" | "lg";
 
 const sizeClasses: Record<AvatarSize, string> = {
-  md: "size-[26px] text-[10px]",
-  lg: "size-8 text-[11px]",
+  md: "size-6.5 text-fs-100",
+  lg: "size-8 text-fs-110",
 };
 
-export interface AvatarProps {
+export type AvatarPart = "root" | "image" | "fallback";
+
+export interface AvatarProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
   /** Full name: used for the initials fallback and as the accessible name. */
   name: string;
   src?: string;
   size?: AvatarSize;
   /** Fills the avatar with the accent color (e.g. the current user). */
   highlighted?: boolean;
-  className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<AvatarPart>;
 }
 
-export function Avatar({ name, src, size = "md", highlighted, className }: AvatarProps) {
+export function Avatar({
+  name,
+  src,
+  size = "md",
+  highlighted,
+  className,
+  classNames,
+  ...props
+}: AvatarProps) {
+  const status = useImageStatus(src);
+  const delayElapsed = useDelayElapsed(src ? 400 : undefined);
+
   return (
-    <AvatarPrimitive.Root
+    <span
       role="img"
       aria-label={name}
+      {...props}
       className={cn(
         "inline-grid shrink-0 place-items-center overflow-hidden rounded-avatar font-bold tracking-[.02em]",
         highlighted ? "bg-accent text-on-accent" : "bg-sunken text-ink-2",
         sizeClasses[size],
+        classNames?.root,
         className,
       )}
     >
-      {src ? <AvatarPrimitive.Image src={src} alt="" /> : null}
-      <AvatarPrimitive.Fallback aria-hidden="true" delayMs={src ? 400 : undefined}>
-        {initials(name)}
-      </AvatarPrimitive.Fallback>
-    </AvatarPrimitive.Root>
+      {src && status === "loaded" ? <img src={src} alt="" className={classNames?.image} /> : null}
+      {delayElapsed && status !== "loaded" ? (
+        <span aria-hidden="true" className={classNames?.fallback}>
+          {initials(name)}
+        </span>
+      ) : null}
+    </span>
   );
 }

package/src/atoms/avatar/index.ts

@@ -1 +1 @@
-export { Avatar, type AvatarProps, type AvatarSize } from "./avatar.js";
+export { Avatar, type AvatarPart, type AvatarProps, type AvatarSize } from "./avatar.js";

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

@@ -1,16 +1,14 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { cn } from "../../utils/cn.js";
 
-export interface AvatarGroupProps {
-  children?: ReactNode;
-  className?: string;
-}
+export type AvatarGroupProps = ComponentPropsWithRef<"div">;
 
 /** Stacked, overlapping avatars separated by a surface-colored ring. */
-export function AvatarGroup({ children, className }: AvatarGroupProps) {
+export function AvatarGroup({ className, ...props }: AvatarGroupProps) {
   return (
-    <div className={cn("flex [&>*+*]:-ml-1.5 [&>*]:shadow-[0_0_0_2px_var(--surface)]", className)}>
-      {children}
-    </div>
+    <div
+      {...props}
+      className={cn("flex [&>*+*]:-ml-1.5 [&>*]:shadow-[0_0_0_2px_var(--surface)]", className)}
+    />
   );
 }

package/src/atoms/big-date/big-date.tsx

@@ -4,8 +4,8 @@ import { cn } from "../../utils/cn.js";
 export type BigDateSize = "normal" | "compact";
 
 const sizeClasses: Record<BigDateSize, string> = {
-  normal: "text-[30px]",
-  compact: "text-[22px]",
+  normal: "text-fs-300",
+  compact: "text-fs-220",
 };
 
 export interface BigDateProps extends ComponentPropsWithoutRef<"div"> {

package/src/atoms/button/button.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Slot } from "@radix-ui/react-slot";
 import {
   Children,
   type ComponentPropsWithRef,
@@ -9,23 +8,58 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "../../utils/cn.js";
+import { Slot } from "../../utils/slot.js";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
 
-const variantClasses: Record<ButtonVariant, string> = {
+/**
+ * Class map behind each `variant`. Exported so apps can read, extend or reuse it, e.g.
+ * `cn(buttonVariantClasses.primary, "bg-brand")` on a link, or `{ ...buttonVariantClasses, brand: "..." }`.
+ */
+export const buttonVariantClasses: Readonly<Record<ButtonVariant, string>> = {
   primary: "bg-accent text-on-accent font-bold hover:bg-accent-ink",
   secondary: "bg-surface-control text-ink shadow-control hover:bg-surface-2",
   ghost: "bg-transparent text-ink-2 hover:bg-surface-2 hover:text-ink",
   danger: "bg-danger-soft text-danger hover:bg-danger-soft/70",
 };
 
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: "h-control-sm px-3 text-[12.5px] [&_svg]:size-3.5",
-  md: "h-control px-control-x text-[13px]",
-  lg: "h-control-lg px-control-x text-[14px]",
+/** Class map behind each `size`; exported like {@link buttonVariantClasses}. */
+export const buttonSizeClasses: Readonly<Record<ButtonSize, string>> = {
+  sm: "h-control-sm px-3 text-fs-125 [&_svg]:size-3.5",
+  md: "h-control px-control-x text-fs-130",
+  lg: "h-control-lg px-control-x text-fs-140",
 };
 
+const baseClasses =
+  "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0";
+
+export interface ButtonClassOptions {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  block?: boolean;
+  className?: string;
+}
+
+/**
+ * The exact classes `<Button>` renders, merged with `cn` so `className` wins. Use it to give any
+ * element (a router link, a menu item) the kit's button look without wrapping it in `<Button>`.
+ */
+export function buttonClasses({
+  variant = "secondary",
+  size = "md",
+  block,
+  className,
+}: ButtonClassOptions = {}): string {
+  return cn(
+    baseClasses,
+    buttonVariantClasses[variant],
+    buttonSizeClasses[size],
+    block && "flex w-full",
+    className,
+  );
+}
+
 export interface ButtonProps extends ComponentPropsWithRef<"button"> {
   variant?: ButtonVariant;
   size?: ButtonSize;
@@ -34,7 +68,7 @@ export interface ButtonProps extends ComponentPropsWithRef<"button"> {
   loadingLabel?: string;
   /** Stretch to the full width of the container. */
   block?: boolean;
-  /** Render the child element (via Radix Slot) instead of a `<button>`, e.g. a link. */
+  /** Render the child element (via Slot) instead of a `<button>`, e.g. a link. */
   asChild?: boolean;
 }
 
@@ -64,13 +98,7 @@ export function Button({
       {...(asChild ? {} : { type: "button" })}
       aria-busy={loading ? "true" : undefined}
       disabled={disabled || loading}
-      className={cn(
-        "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0",
-        variantClasses[variant],
-        sizeClasses[size],
-        block && "flex w-full",
-        className,
-      )}
+      className={buttonClasses({ variant, size, block, className })}
       {...props}
     >
       {content}

package/src/atoms/button/index.ts

@@ -1,6 +1,10 @@
 export {
   Button,
+  type ButtonClassOptions,
   type ButtonProps,
   type ButtonSize,
   type ButtonVariant,
+  buttonClasses,
+  buttonSizeClasses,
+  buttonVariantClasses,
 } from "./button.js";

package/src/atoms/checkbox/checkbox.tsx

@@ -1,26 +1,127 @@
 "use client";
 
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import type { ComponentPropsWithoutRef } from "react";
+import { type ComponentProps, useRef } from "react";
+import { Check } from "../../icons/index.js";
+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 CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
+export type CheckedState = boolean | "indeterminate";
+
+export type CheckboxPart = "root" | "box" | "indicator" | "icon";
+
+export interface CheckboxProps
+  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<CheckboxPart>;
+  checked?: CheckedState;
+  defaultChecked?: CheckedState;
+  onCheckedChange?: (checked: CheckedState) => void;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  /** Id of the `<form>` the checkbox belongs to when it is rendered outside it. */
+  form?: string;
+}
+
+function getState(checked: CheckedState) {
+  return checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+
+export function Checkbox({
+  className,
+  classNames,
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  required,
+  disabled,
+  name,
+  value = "on",
+  form,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}: CheckboxProps) {
+  const [checked, setChecked] = useControllableState<CheckedState>({
+    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 = getState(checked);
+  const disabledAttr = disabled ? "" : undefined;
 
-export function Checkbox({ className, ...props }: CheckboxProps) {
   return (
-    <CheckboxPrimitive.Root
-      className={cn(
-        "inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
-        className,
-      )}
-      {...props}
-    >
-      <span className="grid size-[18px] place-items-center rounded-pill border-[1.5px] border-line-strong data-[state=checked]:border-success data-[state=checked]:bg-success">
-        <CheckboxPrimitive.Indicator>
-          <Check aria-hidden="true" className="size-[11px] stroke-[3] text-on-accent" />
-        </CheckboxPrimitive.Indicator>
-      </span>
-    </CheckboxPrimitive.Root>
+    <>
+      {/* biome-ignore lint/a11y/useSemanticElements: custom control; the hidden input carries the native form value */}
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={checked === "indeterminate" ? "mixed" : 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,
+        )}
+        onKeyDown={composeHandlers(onKeyDown, (event) => {
+          // WAI-ARIA: checkboxes toggle with Space only; Enter must not submit or toggle.
+          if (event.key === "Enter") event.preventDefault();
+        })}
+        onClick={composeHandlers(onClick, (event) => {
+          setChecked((prev) => (prev === "indeterminate" ? true : !prev));
+          bubble.onControlClick(event);
+        })}
+      >
+        <span
+          className={cn(
+            "grid size-4.5 place-items-center rounded-pill border-[1.5px] border-line-strong group-data-[state=checked]:border-success group-data-[state=checked]:bg-success group-data-[state=indeterminate]:border-success group-data-[state=indeterminate]:bg-success",
+            classNames?.box,
+          )}
+        >
+          {checked === false ? null : (
+            <span
+              data-state={state}
+              data-disabled={disabledAttr}
+              style={{ pointerEvents: "none" }}
+              className={classNames?.indicator}
+            >
+              <Check
+                aria-hidden="true"
+                className={cn("size-2.75 stroke-[3] text-on-accent", classNames?.icon)}
+              />
+            </span>
+          )}
+        </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/checkbox/index.ts

@@ -1 +1 @@
-export { Checkbox, type CheckboxProps } from "./checkbox.js";
+export { Checkbox, type CheckboxPart, type CheckboxProps, type CheckedState } from "./checkbox.js";

package/src/atoms/chip/chip.tsx

@@ -12,7 +12,8 @@ export type ChipTone =
   | "solid"
   | "outline";
 
-const toneClasses: Record<ChipTone, string> = {
+/** Class map behind each `tone`; exported so apps can extend or reuse it. */
+export const chipToneClasses: Readonly<Record<ChipTone, string>> = {
   neutral: "bg-surface-2 text-ink-2",
   danger: "bg-danger-soft text-danger",
   warning: "bg-warning-soft text-warning",
@@ -51,9 +52,9 @@ export function Chip({
   return (
     <span
       className={cn(
-        "inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 font-[650] text-[12px] leading-none [&_svg]:size-3",
+        "inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 font-[650] text-fs-120 leading-none [&_svg]:size-3",
         square ? "rounded-chip" : "rounded-badge",
-        toneClasses[tone],
+        chipToneClasses[tone],
         interactive && "in-data-[density=touch]:min-h-11",
         className,
       )}

package/src/atoms/chip/index.ts

@@ -1 +1 @@
-export { Chip, type ChipProps, type ChipTone } from "./chip.js";
+export { Chip, type ChipProps, type ChipTone, chipToneClasses } from "./chip.js";

package/src/atoms/icon/icon-map.ts

@@ -19,11 +19,11 @@ import {
   ExternalLink,
   FileText,
   Folder,
+  type IconComponent,
   LayoutGrid,
   List,
   ListChecks,
   Lock,
-  type LucideIcon,
   Menu,
   MessageSquare,
   PenLine,
@@ -37,9 +37,9 @@ import {
   Users,
   Video,
   X,
-} from "lucide-react";
+} from "../../icons/index.js";
 
-/** Optional name registry for `<Icon name>`. Pass any lucide component via `icon` to bypass it. */
+/** Optional name registry for `<Icon name>`. Pass any icon component via `icon` to bypass it. */
 export const icons = {
   grid: LayoutGrid,
   calendar: Calendar,
@@ -78,6 +78,6 @@ export const icons = {
   book: BookOpen,
   external: ExternalLink,
   video: Video,
-} satisfies Record<string, LucideIcon>;
+} satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof icons;

package/src/atoms/icon/icon.tsx

@@ -1,23 +1,22 @@
-import type { LucideIcon } from "lucide-react";
+import type { IconComponent, IconProps as SvgIconProps } from "../../icons/index.js";
 import { type IconName, icons } from "./icon-map.js";
 
-export interface IconProps {
+export interface IconProps extends Omit<SvgIconProps, "children"> {
   /** Registry name; ignored when `icon` is provided. */
   name?: IconName;
-  /** Any lucide icon component. */
-  icon?: LucideIcon;
+  /** Any icon component (see `@jcsoftdev/ui/icons`). */
+  icon?: IconComponent;
   /** Accessible label. Without it the icon is decorative (aria-hidden). */
   label?: string;
-  className?: string;
 }
 
-export function Icon({ name, icon, label, className }: IconProps) {
+export function Icon({ name, icon, label, ...props }: IconProps) {
   const Component = icon ?? (name ? icons[name] : undefined);
   if (!Component) return null;
 
   if (label) {
-    return <Component className={className} role="img" aria-label={label} strokeWidth={1.8} />;
+    return <Component strokeWidth={1.8} {...props} role="img" aria-label={label} />;
   }
 
-  return <Component className={className} aria-hidden="true" strokeWidth={1.8} />;
+  return <Component strokeWidth={1.8} {...props} aria-hidden="true" />;
 }

package/src/atoms/internal/status-icons.tsx

@@ -1,5 +1,5 @@
-import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
 import type { ReactNode } from "react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "../../icons/index.js";
 
 export type StatusTone = "info" | "success" | "warning" | "danger";
 

package/src/atoms/led/index.ts

@@ -1 +1 @@
-export { Led, type LedProps, type LedStatus } from "./led.js";
+export { Led, type LedPart, type LedProps, type LedStatus } from "./led.js";

package/src/atoms/led/led.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 LedStatus = "success" | "warning" | "danger" | "idle";
@@ -9,22 +11,35 @@ const statusClasses: Record<LedStatus, string> = {
   idle: "bg-ink-3",
 };
 
-export interface LedProps {
+export type LedPart = "root" | "dot" | "label";
+
+export interface LedProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
   status?: LedStatus;
   /** Text describing the status: color is never the only signal. */
   label: string;
   showLabel?: boolean;
-  className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<LedPart>;
 }
 
-export function Led({ status = "success", label, showLabel, className }: LedProps) {
+export function Led({
+  status = "success",
+  label,
+  showLabel,
+  className,
+  classNames,
+  ...props
+}: LedProps) {
   return (
-    <span className={cn("inline-flex items-center gap-1.5", className)}>
+    <span
+      {...props}
+      className={cn("inline-flex items-center gap-1.5", classNames?.root, className)}
+    >
       <span
         aria-hidden="true"
-        className={cn("size-[7px] shrink-0 rounded-pill", statusClasses[status])}
+        className={cn("size-1.75 shrink-0 rounded-pill", statusClasses[status], classNames?.dot)}
       />
-      <span className={showLabel ? undefined : "sr-only"}>{label}</span>
+      <span className={cn(showLabel ? undefined : "sr-only", classNames?.label)}>{label}</span>
     </span>
   );
 }

package/src/atoms/progress/index.ts

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

package/src/atoms/progress/progress.tsx

@@ -1,32 +1,71 @@
 "use client";
 
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 import type { ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
-export interface ProgressProps
-  extends Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, "value"> {
+const DEFAULT_MAX = 100;
+
+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 function Progress({ value, max = 100, className, ...props }: ProgressProps) {
+function isValidMax(max: unknown): max is number {
+  return typeof max === "number" && !Number.isNaN(max) && max > 0;
+}
+
+function isValidValue(value: unknown, max: number): value is number {
+  return typeof value === "number" && !Number.isNaN(value) && value >= 0 && value <= max;
+}
+
+function defaultGetValueLabel(value: number, max: number): string {
+  return `${Math.round((value / max) * 100)}%`;
+}
+
+export function Progress({
+  value,
+  max: maxProp = DEFAULT_MAX,
+  getValueLabel = defaultGetValueLabel,
+  className,
+  classNames,
+  ...props
+}: ProgressProps) {
+  const max = isValidMax(maxProp) ? maxProp : DEFAULT_MAX;
+  const current = isValidValue(value, max) ? value : null;
+  const state = current === null ? "indeterminate" : current === max ? "complete" : "loading";
+
   return (
-    <ProgressPrimitive.Root
-      value={value}
-      max={max}
-      className={cn("h-1.5 overflow-hidden rounded-pill bg-track", className)}
+    <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={current ?? undefined}
+      aria-valuetext={current === null ? undefined : getValueLabel(current, max)}
+      data-state={state}
+      data-value={current ?? undefined}
+      data-max={max}
+      className={cn("h-1.5 overflow-hidden rounded-pill bg-track", classNames?.root, className)}
       {...props}
     >
-      <ProgressPrimitive.Indicator
-        className="block h-full bg-accent transition-transform"
-        style={{ transform: `translateX(-${100 - (value / max) * 100}%)` }}
+      <div
+        data-state={state}
+        data-value={current ?? undefined}
+        data-max={max}
+        className={cn("block h-full bg-accent transition-transform", classNames?.indicator)}
+        style={{ transform: `translateX(-${100 - ((current ?? 0) / max) * 100}%)` }}
       />
-    </ProgressPrimitive.Root>
+    </div>
   );
 }
 
 /** Thinner progress bar. */
 export function Meter({ className, ...props }: ProgressProps) {
-  return <Progress className={cn("h-[5px]", className)} {...props} />;
+  return <Progress className={cn("h-1.25", className)} {...props} />;
 }