@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/tokens-themes-section.tsx

@@ -0,0 +1,386 @@
+"use client"
+
+/**
+ * Tokens & themes — visualizer primitives + token index.
+ *
+ * This module exports the building blocks consumed by `tokens-themes-client.tsx`
+ * (which wires them into `PrimaryPageTemplate` + `ListPageTemplate`). It does
+ * NOT render the page shell.
+ *
+ * Each category gets a representation that matches the token's nature:
+ *
+ *   | Tab          | Renders tokens as…                                            |
+ *   |--------------|---------------------------------------------------------------|
+ *   | Colors       | 56-px swatch (`background: var(--name)`)                      |
+ *   | Gradients    | 96×40 fill swatch (paint-based, value usually multi-line)     |
+ *   | Radius       | 64×64 muted box with `border-radius: var(--name)`             |
+ *   | Size         | bar with `height: var(--name)` (scaled visually)              |
+ *   | Shadow       | floating mini-card with `box-shadow: var(--name)`             |
+ *   | Typography   | "Aa Sample" in `font-family: var(--name)`                     |
+ *   | Motion       | a dot that translates on hover using `transition: var(--name)`|
+ *   | Aliases      | `name → var(--target)` row (resolves the indirection)         |
+ *   | Other        | raw text value                                                |
+ *
+ * All tiles share click-to-copy on the `var(--name)` reference. The token
+ * index is the single source of truth: `packages/ui/tokens/hooks-index.json`.
+ */
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+import tokensIndex from "@exxatdesignux/ui/tokens/hooks-index.json"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Tip } from "@/components/ui/tip"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { cn } from "@/lib/utils"
+
+/* ── Token index types ────────────────────────────────────────────────── */
+
+export type TokenCategory =
+  | "color"
+  | "gradient"
+  | "radius"
+  | "size"
+  | "shadow"
+  | "typography"
+  | "transition"
+  | "alias"
+  | "other"
+
+export type TokenRecord = {
+  namespace: string
+  category: TokenCategory | string
+  values: Record<string, string>
+  tailwindUtilities?: string[]
+  deprecated?: boolean
+  deprecatedMessage?: string | null
+}
+
+type TokensIndex = {
+  version: string
+  tokenCount: number
+  namespaces: string[]
+  themeKeys: string[]
+  tokens: Record<string, TokenRecord>
+}
+
+export const TOKENS_INDEX = tokensIndex as unknown as TokensIndex
+
+/** First available theme value — used for the "raw value" text under each tile. */
+export function primaryValueText(t: TokenRecord): string {
+  return t.values.light ?? Object.values(t.values)[0] ?? ""
+}
+
+/* ── Category tab catalogue ────────────────────────────────────────────── */
+
+export interface CategoryTabDef {
+  id: TokenCategory
+  label: string
+  icon: string
+  matches: (cat: string) => boolean
+}
+
+export const CATEGORY_TABS: CategoryTabDef[] = [
+  { id: "color",      label: "Colors",     icon: "fa-palette",                matches: (c) => c === "color" },
+  { id: "gradient",   label: "Gradients",  icon: "fa-circle-half-stroke",     matches: (c) => c === "gradient" },
+  { id: "radius",     label: "Radius",     icon: "fa-rectangle-vertical",     matches: (c) => c === "radius" },
+  { id: "size",       label: "Size",       icon: "fa-ruler-horizontal",       matches: (c) => c === "size" },
+  { id: "shadow",     label: "Shadow",     icon: "fa-clone",                  matches: (c) => c === "shadow" },
+  { id: "typography", label: "Typography", icon: "fa-text-size",              matches: (c) => c === "typography" },
+  { id: "transition", label: "Motion",     icon: "fa-wave-sine",              matches: (c) => c === "transition" },
+  { id: "alias",      label: "Aliases",    icon: "fa-link",                   matches: (c) => c === "alias" },
+  { id: "other",      label: "Other",      icon: "fa-hashtag",                matches: (c) => c === "other" },
+]
+
+/** Pre-compute counts per category — same shape `getTabCount(filterId)` expects. */
+export const CATEGORY_COUNTS: Record<TokenCategory, number> = CATEGORY_TABS.reduce(
+  (acc, tab) => { acc[tab.id] = 0; return acc },
+  {} as Record<TokenCategory, number>,
+)
+export const DEPRECATED_COUNT = (() => {
+  let n = 0
+  for (const t of Object.values(TOKENS_INDEX.tokens)) {
+    if (t.deprecated) n += 1
+    for (const tab of CATEGORY_TABS) {
+      if (tab.matches(t.category)) {
+        CATEGORY_COUNTS[tab.id] += 1
+        break
+      }
+    }
+  }
+  return n
+})()
+
+/* ── Theme switcher ────────────────────────────────────────────────────── */
+
+export function TokensThemeSwitcher({ className }: { className?: string }) {
+  const { theme = "system", setTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => setMounted(true), [])
+  const value = mounted ? theme : "system"
+  return (
+    <RadioGroup
+      value={value}
+      onValueChange={setTheme}
+      className={cn("inline-flex items-center gap-1 rounded-md border border-border bg-card p-1", className)}
+      aria-label="Theme preview"
+    >
+      {(["light", "dark", "system"] as const).map((t) => (
+        <label
+          key={t}
+          htmlFor={`theme-${t}`}
+          className={cn(
+            "flex cursor-pointer items-center gap-1.5 rounded px-2.5 py-1 text-xs transition-colors",
+            "hover:bg-foreground/[0.04]",
+            value === t && "bg-foreground/[0.06] text-foreground",
+          )}
+        >
+          <RadioGroupItem value={t} id={`theme-${t}`} className="sr-only" />
+          <i
+            className={cn(
+              "fa-light text-xs",
+              t === "light" && "fa-sun",
+              t === "dark" && "fa-moon",
+              t === "system" && "fa-desktop",
+            )}
+            aria-hidden="true"
+          />
+          <span className="capitalize">{t}</span>
+        </label>
+      ))}
+    </RadioGroup>
+  )
+}
+
+/* ── Clipboard hook ────────────────────────────────────────────────────── */
+
+export function useTokenClipboard() {
+  const [copied, setCopied] = React.useState<string | null>(null)
+  const copy = React.useCallback((text: string) => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(text)
+      window.setTimeout(() => setCopied((c) => (c === text ? null : c)), 1200)
+    }).catch(() => {})
+  }, [])
+  return { copied, copy }
+}
+
+/* ── Tile shell ────────────────────────────────────────────────────────── */
+
+interface TokenTileProps {
+  name: string
+  record: TokenRecord
+  onCopy: (text: string) => void
+  preview: React.ReactNode
+  valueText?: string
+  density?: "tight" | "wide"
+}
+
+function TokenTile({ name, record, onCopy, preview, valueText, density = "wide" }: TokenTileProps) {
+  const cssRef = `var(${name})`
+  const raw = valueText ?? primaryValueText(record)
+  return (
+    <div
+      className={cn(
+        "group flex items-stretch gap-3 rounded-md border border-border bg-card p-3 transition-colors",
+        "hover:border-brand/40 hover:bg-interactive-hover-soft",
+      )}
+    >
+      <div className={cn("shrink-0", density === "tight" ? "w-14" : "w-20")}>{preview}</div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2 min-w-0">
+          <code className="font-mono text-xs text-foreground truncate tabular-nums">{name}</code>
+          {record.deprecated && (
+            <Badge variant="destructive" className="text-[10px] h-4 px-1.5 shrink-0">
+              deprecated
+            </Badge>
+          )}
+        </div>
+        <div className="mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <span className="rounded-sm bg-muted/60 px-1.5 py-0.5">{record.namespace}</span>
+        </div>
+        <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground" title={raw}>
+          {raw || "—"}
+        </div>
+      </div>
+      <Tip side="left" label={`Copy ${cssRef}`}>
+        <Button
+          type="button"
+          size="icon"
+          variant="ghost"
+          className="size-7 shrink-0 self-center opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+          onClick={() => onCopy(cssRef)}
+          aria-label={`Copy ${cssRef}`}
+        >
+          <i className="fa-light fa-copy text-sm" aria-hidden="true" />
+        </Button>
+      </Tip>
+    </div>
+  )
+}
+
+/* ── Category-specific previews ───────────────────────────────────────── */
+
+function ColorPreview({ name }: { name: string }) {
+  return (
+    <div
+      className="h-14 w-14 rounded-md border border-border"
+      style={{ backgroundColor: `var(${name})` }}
+      aria-hidden="true"
+    />
+  )
+}
+function GradientPreview({ name }: { name: string }) {
+  return (
+    <div
+      className="h-14 w-20 rounded-md border border-border"
+      style={{ background: `var(${name})` }}
+      aria-hidden="true"
+    />
+  )
+}
+function RadiusPreview({ name }: { name: string }) {
+  return (
+    <div
+      className="h-14 w-14 border border-border bg-muted/50"
+      style={{ borderRadius: `var(${name})` }}
+      aria-hidden="true"
+    />
+  )
+}
+function SizePreview({ name, record }: { name: string; record: TokenRecord }) {
+  const raw = primaryValueText(record)
+  return (
+    <div className="flex h-14 w-20 items-center justify-center" aria-hidden="true">
+      <div
+        className="w-full bg-brand rounded-sm"
+        style={{ height: `min(56px, var(${name}))` }}
+        title={raw}
+      />
+    </div>
+  )
+}
+function ShadowPreview({ name }: { name: string }) {
+  return (
+    <div
+      className="m-1 h-12 w-12 rounded-md bg-card"
+      style={{ boxShadow: `var(${name})` }}
+      aria-hidden="true"
+    />
+  )
+}
+function TypographyPreview({ name }: { name: string }) {
+  return (
+    <div
+      className="flex h-14 w-20 items-center justify-center rounded-md border border-border bg-muted/30"
+      style={{ fontFamily: `var(${name})` }}
+      aria-hidden="true"
+    >
+      <span className="text-2xl text-foreground">Aa</span>
+    </div>
+  )
+}
+function MotionPreview({ name }: { name: string }) {
+  return (
+    <div className="relative h-14 w-20 overflow-hidden rounded-md border border-border bg-muted/30" aria-hidden="true">
+      <div
+        className="absolute left-2 top-1/2 size-3 -translate-y-1/2 rounded-full bg-brand group-hover:translate-x-12"
+        style={{ transition: `var(${name})` }}
+      />
+    </div>
+  )
+}
+function AliasPreview({ record }: { record: TokenRecord }) {
+  const v = primaryValueText(record)
+  const targetMatch = v.match(/var\((--[a-z0-9-]+)\)/i)
+  const target = targetMatch?.[1]
+  return (
+    <div className="flex h-14 w-20 flex-col items-center justify-center rounded-md border border-border bg-muted/30 text-center" aria-hidden="true">
+      <i className="fa-light fa-link text-base text-muted-foreground" />
+      {target && (
+        <code className="mt-0.5 truncate max-w-full px-1 font-mono text-[9px] text-muted-foreground">{target}</code>
+      )}
+    </div>
+  )
+}
+function OtherPreview() {
+  return (
+    <div className="flex h-14 w-20 items-center justify-center rounded-md border border-dashed border-border text-muted-foreground" aria-hidden="true">
+      <i className="fa-light fa-hashtag text-base" />
+    </div>
+  )
+}
+
+/**
+ * Pick the right visualizer for a token. Used both by the legacy `TokensCategoryGrid`
+ * and by the DataTable Preview cell in `tokens-themes-client.tsx`.
+ */
+export function categoryPreview(name: string, record: TokenRecord): React.ReactNode {
+  switch (record.category) {
+    case "color":      return <ColorPreview name={name} />
+    case "gradient":   return <GradientPreview name={name} />
+    case "radius":     return <RadiusPreview name={name} />
+    case "size":       return <SizePreview name={name} record={record} />
+    case "shadow":     return <ShadowPreview name={name} />
+    case "typography": return <TypographyPreview name={name} />
+    case "transition": return <MotionPreview name={name} />
+    case "alias":      return <AliasPreview record={record} />
+    default:           return <OtherPreview />
+  }
+}
+
+/* ── Category grid (the page body for one view tab) ───────────────────── */
+
+export interface TokensCategoryGridProps {
+  query: string
+  showDeprecated: boolean
+  category: CategoryTabDef
+  onCopy: (text: string) => void
+}
+
+export function TokensCategoryGrid({ query, showDeprecated, category, onCopy }: TokensCategoryGridProps) {
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase()
+    const out: Array<[string, TokenRecord]> = []
+    for (const [name, record] of Object.entries(TOKENS_INDEX.tokens)) {
+      if (!category.matches(record.category)) continue
+      if (!showDeprecated && record.deprecated) continue
+      if (q && !(name.toLowerCase().includes(q) || record.namespace.toLowerCase().includes(q))) continue
+      out.push([name, record])
+    }
+    return out.sort(([a], [b]) => a.localeCompare(b))
+  }, [query, showDeprecated, category])
+
+  if (filtered.length === 0) {
+    return (
+      <div className="rounded-md border border-dashed border-border bg-muted/20 p-8 text-center text-sm text-muted-foreground">
+        No {category.label.toLowerCase()} tokens match your filter.
+      </div>
+    )
+  }
+
+  /** Colors are dense (100+ tokens) → 3-column on wide. Other categories 1–2 col. */
+  const isDense = category.id === "color"
+  return (
+    <div
+      className={cn(
+        "grid gap-2",
+        isDense
+          ? "grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
+          : "grid-cols-1 md:grid-cols-2",
+      )}
+    >
+      {filtered.map(([name, record]) => (
+        <TokenTile
+          key={name}
+          name={name}
+          record={record}
+          onCopy={onCopy}
+          density={isDense ? "tight" : "wide"}
+          preview={categoryPreview(name, record)}
+        />
+      ))}
+    </div>
+  )
+}

package/template/components/ui/accordion.tsx

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/accordion"

package/template/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/alert-dialog"

package/template/components/ui/context-menu.tsx

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/context-menu"

package/template/components/ui/dot-pattern.tsx

@@ -1,183 +1 @@
-"use client"
-
-/**
- * DotPattern — dot grid revealed by a soft drifting "cloud" mask.
- *
- * Inspiration: Google/Apple AI loading states — a diffuse dot field that
- * softly fades in, drifts diagonally across the surface, then fades out.
- * No bright glow cores, no particles — just one or two large soft halos
- * sliding across the grid so the dots appear as an ambient cloud.
- */
-
-import * as React from "react"
-import { motion } from "motion/react"
-import { cn } from "@/lib/utils"
-
-interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
-  width?: number
-  height?: number
-  x?: number
-  y?: number
-  cx?: number
-  cy?: number
-  cr?: number
-  className?: string
-  glow?: boolean
-  /** Number of drifting soft clouds (keep small: 1–2). */
-  glowCount?: number
-  /** Cloud radius — large values produce a wide, diffuse reveal. */
-  glowRadius?: number
-}
-
-type Cloud = {
-  key: number
-  xs: string[]
-  ys: string[]
-  duration: number
-  delay: number
-}
-
-/**
- * Tiny deterministic PRNG (mulberry32). We use a seeded RNG instead of
- * `Math.random()` so the SVG attributes emitted on the server match the
- * client's first paint — otherwise React reports a hydration mismatch and
- * has to re-paint every drifting `<motion.circle>` on mount, which is both
- * a perf cost and a visible jump.
- */
-function mulberry32(seed: number): () => number {
-  let s = seed >>> 0
-  return () => {
-    s = (s + 0x6d2b79f5) >>> 0
-    let t = s
-    t = Math.imul(t ^ (t >>> 15), t | 1)
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-function hashString(str: string): number {
-  // Cheap FNV-1a-style hash. Stable across SSR + CSR for the same input.
-  let h = 2166136261
-  for (let i = 0; i < str.length; i++) {
-    h ^= str.charCodeAt(i)
-    h = Math.imul(h, 16777619)
-  }
-  return h >>> 0
-}
-
-export function DotPattern({
-  width = 14,
-  height = 14,
-  x = 0,
-  y = 0,
-  cx = 1,
-  cy = 1,
-  cr = 0.8,
-  className,
-  glow = false,
-  glowCount = 2,
-  glowRadius = 240,
-  ...props
-}: DotPatternProps) {
-  const id = React.useId()
-  const maskId = `${id}-mask`
-  const gradId = `${id}-grad`
-
-  const clouds = React.useMemo<Cloud[]>(() => {
-    const rng = mulberry32(hashString(`${id}|${glowCount}`))
-    const rand = (min: number, max: number) => min + rng() * (max - min)
-    return Array.from({ length: glowCount }).map((_, i) => {
-      // Drift diagonally: bottom-right → top-left. Start/end partly off-canvas
-      // so the cloud enters and exits softly without a visible edge.
-      const startX = rand(85, 120)
-      const endX = rand(-20, 15)
-      const midX = (startX + endX) / 2 + rand(-6, 6)
-
-      const startY = rand(85, 115)
-      const endY = rand(-15, 10)
-      const midY = (startY + endY) / 2 + rand(-4, 4)
-
-      const duration = rand(8, 12)
-      // Offset clouds by half a cycle so one is arriving as the other leaves.
-      const delay = -(i / glowCount) * duration
-
-      return {
-        key: i,
-        xs: [`${startX}%`, `${midX}%`, `${endX}%`],
-        ys: [`${startY}%`, `${midY}%`, `${endY}%`],
-        duration,
-        delay,
-      }
-    })
-  }, [glowCount, id])
-
-  return (
-    <svg
-      aria-hidden="true"
-      className={cn(
-        "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",
-        className,
-      )}
-      {...props}
-    >
-      <defs>
-        <pattern
-          id={id}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          patternContentUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <circle cx={cx} cy={cy} r={cr} />
-        </pattern>
-
-        {glow ? (
-          <>
-            {/* Very soft falloff — no visible ring edge, dots dissolve gradually. */}
-            <radialGradient id={gradId}>
-              <stop offset="0%"   stopColor="white" stopOpacity="0.9" />
-              <stop offset="40%"  stopColor="white" stopOpacity="0.55" />
-              <stop offset="75%"  stopColor="white" stopOpacity="0.18" />
-              <stop offset="100%" stopColor="white" stopOpacity="0" />
-            </radialGradient>
-
-            <mask id={maskId}>
-              {clouds.map((c) => (
-                <motion.circle
-                  key={`cloud-${c.key}`}
-                  r={glowRadius}
-                  fill={`url(#${gradId})`}
-                  initial={{ cx: c.xs[0], cy: c.ys[0], opacity: 0 }}
-                  animate={{
-                    cx: c.xs,
-                    cy: c.ys,
-                    // Long hold with soft fade at both ends.
-                    opacity: [0, 1, 1, 0],
-                  }}
-                  transition={{
-                    duration: c.duration,
-                    delay: c.delay,
-                    repeat: Infinity,
-                    ease: "linear",
-                    times: [0, 0.3, 0.7, 1],
-                  }}
-                />
-              ))}
-            </mask>
-          </>
-        ) : null}
-      </defs>
-
-      {/* Dot grid — only visible inside the drifting soft clouds when glow is on. */}
-      <rect
-        width="100%"
-        height="100%"
-        strokeWidth={0}
-        fill={`url(#${id})`}
-        mask={glow ? `url(#${maskId})` : undefined}
-      />
-    </svg>
-  )
-}
+export * from "@exxatdesignux/ui/components/dot-pattern"

package/template/components/ui/hover-card.tsx

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/hover-card"

package/template/components/ui/resizable.tsx

@@ -1,68 +1 @@
-"use client"
-
-import * as React from "react"
-import { GripVertical } from "lucide-react"
-import { Group, Panel, Separator } from "react-resizable-panels"
-import type { GroupProps, PanelProps, SeparatorProps } from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-// ─── ResizablePanelGroup ──────────────────────────────────────────────────────
-
-export type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
-  direction?: "horizontal" | "vertical"
-}
-
-export function ResizablePanelGroup({
-  direction = "horizontal",
-  className,
-  ...props
-}: ResizablePanelGroupProps) {
-  return (
-    <Group
-      orientation={direction}
-      className={cn(
-        "flex h-full w-full",
-        direction === "vertical" && "flex-col",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-// ─── ResizablePanel ───────────────────────────────────────────────────────────
-
-export type ResizablePanelProps = PanelProps
-
-export const ResizablePanel = Panel
-
-// ─── ResizableHandle ──────────────────────────────────────────────────────────
-
-export type ResizableHandleProps = Omit<SeparatorProps, "children"> & {
-  /** Render a visible grip icon on the handle. */
-  withHandle?: boolean
-}
-
-export function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {
-  return (
-    <Separator
-      className={cn(
-        // Base — horizontal handle (between side-by-side panels)
-        "relative flex w-1 shrink-0 cursor-col-resize items-center justify-center bg-border/60",
-        "transition-colors hover:bg-border active:bg-primary/30",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-        // Vertical handle (between stacked panels)
-        "data-[orientation=vertical]:h-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:flex-row",
-        className,
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm">
-          <GripVertical className="h-3 w-3 text-muted-foreground" />
-        </div>
-      )}
-    </Separator>
-  )
-}
+export * from "@exxatdesignux/ui/components/resizable"

package/template/components/ui/scroll-area.tsx

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/scroll-area"

package/template/components/ui/slider.tsx

@@ -0,0 +1 @@
+export * from "@exxatdesignux/ui/components/slider"