@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/components/theme-provider.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      {...props}
+    >
+      <ThemeHotkey />
+      {children}
+    </NextThemesProvider>
+  )
+}
+
+function isTypingTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  return (
+    target.isContentEditable ||
+    target.tagName === "INPUT" ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT"
+  )
+}
+
+function ThemeHotkey() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented || event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      if (isTypingTarget(event.target)) {
+        return
+      }
+
+      setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [resolvedTheme, setTheme])
+
+  return null
+}
+
+export { ThemeProvider }

package/template/components/tinted-icon-disc.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+/**
+ * Dashboard / feed — decorative icon on a tinted disc. Colors come from `app/globals.css`
+ * `--icon-disc-*` tokens (WCAG 1.4.11-friendly pairings). Prefer this over ad-hoc `oklch(from …)`.
+ */
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type TintedIconDiscTone = "chart-2" | "chart-4" | "brand" | "destructive"
+
+const TONE_CLASS: Record<TintedIconDiscTone, string> = {
+  "chart-2":
+    "bg-[var(--icon-disc-chart-2-bg)] text-[var(--icon-disc-chart-2-fg)]",
+  "chart-4":
+    "bg-[var(--icon-disc-chart-4-bg)] text-[var(--icon-disc-chart-4-fg)]",
+  brand: "bg-[var(--icon-disc-brand-bg)] text-[var(--icon-disc-brand-fg)]",
+  destructive:
+    "bg-[var(--icon-disc-danger-bg)] text-[var(--icon-disc-danger-fg)]",
+}
+
+export interface TintedIconDiscProps {
+  /** Font Awesome icon class suffix, e.g. `fa-arrow-trend-up` (paired with `fa-light`). */
+  icon: string
+  tone: TintedIconDiscTone
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+export function TintedIconDisc({
+  icon,
+  tone,
+  size = "md",
+  className,
+}: TintedIconDiscProps) {
+  const sizeClass =
+    size === "sm" ? "h-6 w-6 text-xs" : size === "lg" ? "h-12 w-12 text-xl" : "h-7 w-7 text-xs"
+
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full hc:border hc:border-foreground forced-colors:border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
+        sizeClass,
+        TONE_CLASS[tone],
+        className,
+      )}
+      aria-hidden="true"
+    >
+      <i className={cn("fa-light", icon)} />
+    </span>
+  )
+}

package/template/components/ui/ai-thinking-surface.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+/**
+ * AiThinkingOverlay / AiThinkingSurface — ambient "AI is thinking" indicator.
+ *
+ * Drops a soft, drifting dot cloud onto any surface to signal the assistant
+ * is working. Intentionally decorative — pair with a visible text/sr-only
+ * status so screen readers still hear "Leo is thinking" / "Generating…".
+ *
+ * Two ways to use:
+ *
+ * 1) **Overlay** — drop inside an existing `relative` container:
+ *
+ *      <div className="relative rounded-xl border p-6">
+ *        <AiThinkingOverlay active={isPending} />
+ *        <YourContent />
+ *      </div>
+ *
+ * 2) **Surface** — wraps children and handles positioning for you:
+ *
+ *      <AiThinkingSurface active={isPending} className="rounded-xl border p-6">
+ *        <YourContent />
+ *      </AiThinkingSurface>
+ *
+ * Accessibility: the overlay is `aria-hidden` and `pointer-events-none`;
+ * always render a live status element next to it, e.g.
+ *   <span role="status" aria-live="polite" className="sr-only">Generating…</span>
+ */
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { DotPattern } from "@/components/ui/dot-pattern"
+
+export interface AiThinkingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** When false (default), nothing renders. Flip to true while the AI is working. */
+  active?: boolean
+  /** Number of drifting soft clouds. Keep small (1–2) for most surfaces. */
+  cloudCount?: number
+  /** Radius of each cloud in px — scale up for large surfaces. */
+  cloudRadius?: number
+  /** Grid tile size (both width and height of the repeating dot tile). */
+  gridSize?: number
+  /** Per-dot radius. */
+  dotRadius?: number
+  /** Tailwind utility for the dot fill (e.g. `"fill-foreground/35"`). */
+  fillClassName?: string
+}
+
+/**
+ * Absolute overlay. The parent must be `position: relative` and should usually
+ * clip overflow (e.g. `rounded-xl overflow-hidden`) so the drifting clouds
+ * don't paint outside the surface.
+ */
+export function AiThinkingOverlay({
+  active = false,
+  cloudCount = 2,
+  cloudRadius = 260,
+  gridSize = 14,
+  dotRadius = 0.8,
+  fillClassName = "fill-foreground/35 dark:fill-foreground/45",
+  className,
+  ...props
+}: AiThinkingOverlayProps) {
+  if (!active) return null
+  return (
+    <div
+      aria-hidden
+      className={cn("pointer-events-none absolute inset-0 z-0 overflow-hidden", className)}
+      {...props}
+    >
+      <DotPattern
+        glow
+        glowCount={cloudCount}
+        glowRadius={cloudRadius}
+        width={gridSize}
+        height={gridSize}
+        cr={dotRadius}
+        className={cn("absolute inset-0 h-full w-full", fillClassName)}
+      />
+    </div>
+  )
+}
+
+export interface AiThinkingSurfaceProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<AiThinkingOverlayProps, "active" | "cloudCount" | "cloudRadius" | "gridSize" | "dotRadius" | "fillClassName"> {
+  /** Optional className applied to the content wrapper (above the overlay). */
+  contentClassName?: string
+}
+
+/**
+ * Wrapper that adds `relative overflow-hidden`, renders the overlay, and
+ * stacks children above it. Use when you'd otherwise have to manually wire
+ * positioning around `<AiThinkingOverlay>`.
+ */
+export function AiThinkingSurface({
+  active,
+  cloudCount,
+  cloudRadius,
+  gridSize,
+  dotRadius,
+  fillClassName,
+  className,
+  contentClassName,
+  children,
+  ...props
+}: AiThinkingSurfaceProps) {
+  return (
+    <div className={cn("relative overflow-hidden", className)} {...props}>
+      <AiThinkingOverlay
+        active={active}
+        cloudCount={cloudCount}
+        cloudRadius={cloudRadius}
+        gridSize={gridSize}
+        dotRadius={dotRadius}
+        fillClassName={fillClassName}
+      />
+      <div className={cn("relative z-[1]", contentClassName)}>{children}</div>
+    </div>
+  )
+}

package/template/components/ui/avatar.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/avatar"

package/template/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/badge"

package/template/components/ui/banner.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/banner"

package/template/components/ui/breadcrumb.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/breadcrumb"

package/template/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/button"

package/template/components/ui/calendar.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/calendar"

package/template/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/card"

package/template/components/ui/chart.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/chart"

package/template/components/ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/checkbox"

package/template/components/ui/coach-mark.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/coach-mark"

package/template/components/ui/collapsible.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/collapsible"

package/template/components/ui/command.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/command"

package/template/components/ui/date-picker-field.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/date-picker-field"

package/template/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/dialog"

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

@@ -0,0 +1,159 @@
+"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
+}
+
+function rand(min: number, max: number) {
+  return min + Math.random() * (max - min)
+}
+
+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[]>(
+    () =>
+      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],
+  )
+
+  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>
+  )
+}

package/template/components/ui/drag-handle-grip.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/drag-handle-grip"

package/template/components/ui/drawer.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/drawer"

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

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/dropdown-menu"

package/template/components/ui/field.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/field"

package/template/components/ui/form.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/form"

package/template/components/ui/input-group.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/input-group"

package/template/components/ui/input-mask.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/input-mask"

package/template/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/input"

package/template/components/ui/kbd.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/kbd"

package/template/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "../../../../packages/ui/src/components/ui/label"