@zedtech/zedkit-ui 0.1.1 → 0.3.0

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,78 @@
       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;
+  }
+}
+
+/*
+ * Motion tokens: every overlay animation references these durations
+ * and easings — apps never hardcode transition styles.
+ */
+:root {
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --motion-slow: 250ms;
+  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+}
+
+@keyframes zk-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes zk-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zk-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes zk-zoom-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/*
+ * Vaul (drawer) ships its own slide keyframes at 500ms with no
+ * reduced-motion guard: retune to the kit tokens, disable fully
+ * when motion is reduced. `!important` beats vaul's injected
+ * high-specificity state selectors — deliberately, in one place.
+ */
+html [data-vaul-drawer] {
+  animation-duration: var(--motion-slow);
+  transition-duration: var(--motion-slow);
+}
+
+html [data-vaul-overlay] {
+  animation-duration: var(--motion-base);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html [data-vaul-drawer],
+  html [data-vaul-overlay] {
+    animation: none !important;
+    transition: none !important;
+  }
+}

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/updated-ago.tsx

@@ -0,0 +1,38 @@
+import { cn } from "./utils.js";
+
+export interface UpdatedAgoProps {
+  /** What the timestamp counts from (anything future reads as now). */
+  date: Date | number;
+  prefix?: string;
+  className?: string;
+}
+
+const SECOND = 1_000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+const formatter = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+function relativeFrom(now: number, then: number): string {
+  const elapsed = Math.max(now - then, 0);
+  if (elapsed < 5 * SECOND) return "just now";
+  if (elapsed < MINUTE) return formatter.format(-Math.floor(elapsed / SECOND), "second");
+  if (elapsed < HOUR) return formatter.format(-Math.floor(elapsed / MINUTE), "minute");
+  if (elapsed < DAY) return formatter.format(-Math.floor(elapsed / HOUR), "hour");
+  return formatter.format(-Math.floor(elapsed / DAY), "day");
+}
+
+/**
+ * Stale-while-revalidate stamp ("Updated 3 minutes ago"): keep showing
+ * the old content and let this say how old it is. Static snapshot —
+ * re-render when the data refreshes.
+ */
+export function UpdatedAgo({ date, prefix = "Updated", className }: UpdatedAgoProps) {
+  const then = date instanceof Date ? date.getTime() : date;
+  return (
+    <span className={cn("text-xs text-muted-foreground", className)}>
+      {prefix} {relativeFrom(Date.now(), then)}
+    </span>
+  );
+}

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";