@zedtech/zedkit-ui 0.1.0 → 0.2.0

package/dist/use-validated-form.d.ts

@@ -0,0 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { type FieldValues, type UseFormProps, type UseFormReturn } from "react-hook-form";
+/**
+ * Validated form in one call: the zod schema is the single source of
+ * truth (in a real app it lives in the shared contracts package next
+ * to the API validators) and the resolver wiring stays inside the
+ * kit, so consumers never import the resolver library directly.
+ */
+export declare function useValidatedForm<TFieldValues extends FieldValues>(schema: Parameters<typeof zodResolver>[0], options?: Omit<UseFormProps<TFieldValues, any>, "resolver">): UseFormReturn<TFieldValues, any, TFieldValues>;
+//# sourceMappingURL=use-validated-form.d.ts.map

package/dist/use-validated-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-validated-form.d.ts","sourceRoot":"","sources":["../src/use-validated-form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AAEzB;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,SAAS,WAAW,EAC/D,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,EAEzC,OAAO,GAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,UAAU,CAAM,GAE9D,aAAa,CAAC,YAAY,EAAE,GAAG,EAAE,YAAY,CAAC,CAOhD"}

package/dist/use-validated-form.js

@@ -0,0 +1,20 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, } from "react-hook-form";
+/**
+ * Validated form in one call: the zod schema is the single source of
+ * truth (in a real app it lives in the shared contracts package next
+ * to the API validators) and the resolver wiring stays inside the
+ * kit, so consumers never import the resolver library directly.
+ */
+export function useValidatedForm(schema, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors useForm's own context type (any)
+options = {}) {
+    // The resolver is exact for this schema, but react-hook-form's
+    // Resolver is invariant in its options type, so a schema-typed
+    // resolver cannot flow through the generic untouched (same
+    // upstream-invariance situation as the data-table columns).
+    const resolver = zodResolver(schema);
+    return useForm({ ...options, resolver });
+}
+//# sourceMappingURL=use-validated-form.js.map

package/dist/use-validated-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-validated-form.js","sourceRoot":"","sources":["../src/use-validated-form.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EACL,OAAO,GAKR,MAAM,iBAAiB,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAAyC;AACzC,0GAA0G;AAC1G,UAA6D,EAAE;IAG/D,+DAA+D;IAC/D,+DAA+D;IAC/D,2DAA2D;IAC3D,4DAA4D;IAC5D,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAA2B,CAAC;IAC/D,OAAO,OAAO,CAAe,EAAE,GAAG,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;AACzD,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+import { type ClassValue } from "clsx";
+/**
+ * Merges class names, with tailwind-merge resolving conflicting
+ * Tailwind utilities (last one wins). Every component takes an
+ * optional className that flows through here.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/utils.js

@@ -0,0 +1,12 @@
+// Derived from shadcn/ui (utils (cn)) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Merges class names, with tailwind-merge resolving conflicting
+ * Tailwind utilities (last one wins). Every component takes an
+ * optional className that flows through here.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,gKAAgK;AAChK,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC;;;;GAIG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC/B,CAAC"}

package/dist/wizard-steps.d.ts

@@ -0,0 +1,8 @@
+export interface WizardStepsProps {
+    steps: string[];
+    /** 0-based index of the current step. */
+    current: number;
+    className?: string;
+}
+export declare function WizardSteps({ steps, current, className }: WizardStepsProps): import("react").JSX.Element;
+//# sourceMappingURL=wizard-steps.d.ts.map

package/dist/wizard-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-steps.d.ts","sourceRoot":"","sources":["../src/wizard-steps.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA4B1E"}

package/dist/wizard-steps.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { cn } from "./utils.js";
+export function WizardSteps({ steps, current, className }) {
+    return (_jsx("ol", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), "aria-label": "Progress", children: steps.map((step, index) => (_jsxs("li", { "aria-current": index === current ? "step" : undefined, className: "flex items-center gap-2 text-sm", children: [_jsx("span", { "aria-hidden": true, className: cn("flex size-6 items-center justify-center rounded-full border text-xs font-medium", index < current && "border-primary bg-primary text-primary-foreground", index === current && "border-primary text-primary", index > current && "text-muted-foreground"), children: index < current ? _jsx(CheckIcon, { className: "size-3.5" }) : index + 1 }), _jsx("span", { className: cn(index === current ? "font-medium" : "text-muted-foreground"), children: step }), index < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "ml-1 h-px w-6 bg-border" })) : null] }, step))) }));
+}
+//# sourceMappingURL=wizard-steps.js.map

package/dist/wizard-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard-steps.js","sourceRoot":"","sources":["../src/wizard-steps.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAShC,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAoB;IACzE,OAAO,CACL,aAAI,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,gBAAa,UAAU,YAC/F,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,8BAEgB,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACpD,SAAS,EAAC,iCAAiC,aAE3C,oCAEE,SAAS,EAAE,EAAE,CACX,iFAAiF,EACjF,KAAK,GAAG,OAAO,IAAI,mDAAmD,EACtE,KAAK,KAAK,OAAO,IAAI,6BAA6B,EAClD,KAAK,GAAG,OAAO,IAAI,uBAAuB,CAC3C,YAEA,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,GAC5D,EACP,eAAM,SAAS,EAAE,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,uBAAuB,CAAC,YAAG,IAAI,GAAQ,EAC9F,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,oCAAkB,SAAS,EAAC,yBAAyB,GAAG,CACzD,CAAC,CAAC,CAAC,IAAI,KAlBH,IAAI,CAmBN,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,11 +1,30 @@
 {
   "name": "@zedtech/zedkit-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "description": "Admin UI kit: design tokens, dark/light theme, shadcn/ui-based components (MIT, see THIRD_PARTY_NOTICES.md).",
+  "description": "Ship a calm admin UI fast: dark/light design tokens plus accessible building blocks (data tables, forms, dialogs, toasts).",
+  "keywords": [
+    "react",
+    "react-components",
+    "ui-kit",
+    "design-system",
+    "admin",
+    "dashboard",
+    "tailwindcss",
+    "tailwind-v4",
+    "radix-ui",
+    "shadcn",
+    "dark-mode",
+    "accessible",
+    "nextjs"
+  ],
+  "homepage": "https://github.com/zedtech-fr/zedkit/tree/main/packages/ui",
+  "bugs": {
+    "url": "https://github.com/zedtech-fr/zedkit/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -58,6 +77,7 @@
     "react-hook-form": "7.91.0",
     "sonner": "2.0.8",
     "tailwind-merge": "3.7.0",
+    "vaul": "1.1.2",
     "zod": "4.6.7"
   },
   "devDependencies": {
@@ -72,7 +92,7 @@
     "typescript": "5.9.3",
     "vitest": "2.1.9",
     "vitest-axe": "0.1.0",
-    "@zedtech/zedkit-core": "0.0.0"
+    "@zedtech/zedkit-core": "0.1.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/alert.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (alert) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 

package/src/badge.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (badge) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "./utils.js";

package/src/button.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (button) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/card.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (card) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import * as React from "react";
 
 import { cn } from "./utils.js";

package/src/checkbox.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (checkbox) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/checkmark.tsx

@@ -0,0 +1,34 @@
+import { cn } from "./utils.js";
+
+export interface CheckmarkProps {
+  /** Accessible name; omitted means decorative (pair with visible text). */
+  label?: string;
+  className?: string;
+}
+
+/**
+ * Success check that draws itself once (static full check under
+ * reduced motion — see `zk-check-draw` in styles.css).
+ */
+export function Checkmark({ label, className }: CheckmarkProps) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      {...(label === undefined
+        ? { "aria-hidden": true as const }
+        : { role: "img" as const, "aria-label": label })}
+      className={cn("size-4 text-success", className)}
+    >
+      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M5.5 8.2 7.2 9.9 10.6 6.3"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="[stroke-dasharray:8] motion-safe:animate-[zk-check-draw_0.45s_ease-out_forwards]"
+      />
+    </svg>
+  );
+}

package/src/dialog.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (dialog) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/drawer.tsx

@@ -0,0 +1,140 @@
+// Derived from shadcn/ui (drawer) — see Provenance in packages/ui/README.md. Adapted: direction-aware
+// positioning via data variants (vaul sets data-vaul-drawer-direction on the content), drag handle and
+// close left to the consumer to compose, ref-as-prop (React 19). Vaul injects its own base CSS
+// (drag transitions, open/close keyframes) at import; the kit adds no drawer CSS.
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "./utils.js";
+
+const Drawer = DrawerPrimitive.Root;
+const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerClose = DrawerPrimitive.Close;
+const DrawerPortal = DrawerPrimitive.Portal;
+
+function DrawerOverlay({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  return (
+    <DrawerPrimitive.Overlay
+      ref={ref}
+      className={cn("fixed inset-0 z-50 bg-overlay/80", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ref,
+  modal = true,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Mirror of the `Drawer` root `modal` prop: `false` renders no
+   * overlay so the background stays interactive. Defaults to `true`.
+   */
+  modal?: boolean;
+}) {
+  return (
+    <DrawerPortal>
+      {modal ? <DrawerOverlay /> : null}
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed z-50 flex flex-col border bg-background",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:max-h-[96dvh] data-[vaul-drawer-direction=bottom]:rounded-t-xl",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:max-h-[96dvh] data-[vaul-drawer-direction=top]:rounded-b-xl",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:sm:max-w-md",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-full data-[vaul-drawer-direction=left]:sm:max-w-md",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHandle({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Handle> & {
+  ref?: React.Ref<HTMLDivElement>;
+}) {
+  return (
+    <DrawerPrimitive.Handle
+      ref={ref}
+      className={cn("mx-auto mt-4 h-1.5 w-12 shrink-0 rounded-full bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col gap-1.5 p-4 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+
+function DrawerTitle({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}) {
+  return (
+    <DrawerPrimitive.Title
+      ref={ref}
+      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}) {
+  return (
+    <DrawerPrimitive.Description
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};

package/src/field.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (field) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import type * as React from "react";

package/src/form.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (form) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/index.ts

@@ -24,6 +24,19 @@ export {
   DialogTrigger,
 } from "./dialog.js";
 export { DetailPanel, type DetailItem, type DetailPanelProps } from "./detail-panel.js";
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer.js";
 export {
   Field,
   FieldContent,
@@ -52,6 +65,9 @@ export { Input } from "./input.js";
 export { Label } from "./label.js";
 export { Section, Stack, stackVariants, type SectionProps, type StackProps } from "./layout.js";
 export { LivePulse, type LivePulseProps } from "./live-pulse.js";
+export { StatusDot, type StatusDotProps, type StatusDotTone } from "./status-dot.js";
+export { ProgressBar, type ProgressBarProps } from "./progress-bar.js";
+export { Checkmark, type CheckmarkProps } from "./checkmark.js";
 export { OptionCards, type OptionCard, type OptionCardsProps } from "./option-cards.js";
 export { PageHeader, type PageHeaderProps } from "./page-header.js";
 export { SecretField, type SecretFieldProps } from "./secret-field.js";

package/src/input.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (input) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import * as React from "react";
 import { cn } from "./utils.js";
 

package/src/label.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (label) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/live-pulse.tsx

@@ -1,3 +1,4 @@
+import { StatusDot } from "./status-dot.js";
 import { cn } from "./utils.js";
 
 export interface LivePulseProps {
@@ -13,14 +14,7 @@ export function LivePulse({ active = true, label = "Live", className }: LivePuls
       aria-label={active ? label : "Idle"}
       className={cn("inline-flex items-center gap-1.5 text-xs text-muted-foreground", className)}
     >
-      <span className="relative flex size-2">
-        {active ? (
-          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-60" />
-        ) : null}
-        <span
-          className={cn("relative inline-flex size-2 rounded-full", active ? "bg-success" : "bg-muted-foreground/40")}
-        />
-      </span>
+      <StatusDot tone={active ? "success" : "idle"} pulse={active} />
       {active ? label : "Idle"}
     </span>
   );

package/src/progress-bar.tsx

@@ -0,0 +1,45 @@
+import { cn } from "./utils.js";
+
+export interface ProgressBarProps {
+  /** Current value, clamped to 0..max (`NaN` reads as empty). */
+  value: number;
+  max?: number;
+  /** Accessible name (kept screen-only — pair with visible text). */
+  label: string;
+  className?: string;
+}
+
+const SEGMENTS = 10;
+
+/**
+ * Determinate progress as filled segments (exact value stays in
+ * `aria-valuenow`). No animation, so nothing to disable for reduced
+ * motion. Announce the operation with visible text (e.g. StatusLabel)
+ * next to it — the label here stays screen-only.
+ */
+export function ProgressBar({ value, max = 100, label, className }: ProgressBarProps) {
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const safeValue = Number.isFinite(value) ? Math.min(Math.max(value, 0), safeMax) : 0;
+  const filled = Math.round((safeValue / safeMax) * SEGMENTS);
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={safeMax}
+      aria-valuenow={Math.round(safeValue)}
+      className={cn("flex w-full gap-0.5", className)}
+    >
+      {Array.from({ length: SEGMENTS }, (_, index) => (
+        <span
+          key={index}
+          aria-hidden
+          className={cn(
+            "h-1.5 flex-1 rounded-full motion-safe:transition-colors",
+            index < filled ? "bg-primary" : "bg-muted",
+          )}
+        />
+      ))}
+    </div>
+  );
+}

package/src/select.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (select) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/separator.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (separator) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/skeleton.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (skeleton) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import { cn } from "./utils.js";
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {

package/src/sonner.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (sonner) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import { Toaster as Sonner, type ToasterProps } from "sonner";

package/src/status-dot.tsx

@@ -0,0 +1,42 @@
+import { cn } from "./utils.js";
+
+export type StatusDotTone = "active" | "idle" | "success" | "warning" | "danger";
+
+export interface StatusDotProps {
+  tone?: StatusDotTone;
+  /** Override the default ping (ongoing tones ping, others stay static). */
+  pulse?: boolean;
+  className?: string;
+}
+
+const TONE_COLOR: Record<StatusDotTone, string> = {
+  active: "bg-primary",
+  idle: "bg-muted-foreground/40",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+};
+
+const PING_TONES: ReadonlySet<StatusDotTone> = new Set(["active", "warning", "danger"]);
+
+/**
+ * Decorative status dot: pings for ongoing tones (motion-safe), static
+ * otherwise. Pair with visible text (e.g. StatusLabel) — never alone.
+ */
+export function StatusDot({ tone = "active", pulse, className }: StatusDotProps) {
+  const color = TONE_COLOR[tone];
+  const ping = pulse ?? PING_TONES.has(tone);
+  return (
+    <span aria-hidden className={cn("relative flex size-2", className)}>
+      {ping ? (
+        <span
+          className={cn(
+            "absolute inline-flex h-full w-full rounded-full opacity-60 motion-safe:animate-ping",
+            color,
+          )}
+        />
+      ) : null}
+      <span className={cn("relative inline-flex size-2 rounded-full", color)} />
+    </span>
+  );
+}

package/src/styles.css

@@ -1,3 +1,4 @@
+/* Derived from shadcn/ui (theme) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it. */
 @import "tailwindcss";
 
 /*
@@ -115,3 +116,17 @@
       ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   }
 }
+
+/*
+ * Kit-authored motion (not shadcn): one draw-on keyframe for the
+ * Checkmark state icon. The path carries the animation only under
+ * `motion-safe:`, so reduced motion shows the static full check.
+ */
+@keyframes zk-check-draw {
+  from {
+    stroke-dashoffset: 8;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}

package/src/switch.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (switch) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/table.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (table) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import * as React from "react";
 
 import { cn } from "./utils.js";

package/src/tabs.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (tabs) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 "use client";
 
 import * as React from "react";

package/src/textarea.tsx

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (textarea) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import * as React from "react";
 
 import { cn } from "./utils.js";

package/src/utils.ts

@@ -1,3 +1,4 @@
+// Derived from shadcn/ui (utils (cn)) — see Provenance in packages/ui/README.md. Tolerated exception: migrated to custom code only when customization needs it.
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";