@exxatdesignux/ui 0.2.19 → 0.4.0

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

@@ -0,0 +1,291 @@
+"use client"
+
+/**
+ * ContextMenu — right-click + long-press menu surface backed by Radix
+ * `ContextMenu`. Visual surface mirrors `DropdownMenu` so the two read as
+ * a consistent menu family across the product (same item heights, same
+ * tints, same separator + label rhythm).
+ *
+ * Use for **secondary, contextual actions** on a specific row, card, or
+ * editable region — duplicate, rename, archive, copy link. The primary
+ * action SHOULD still be reachable by click / keyboard via a visible
+ * trigger; the context menu is an accelerator, not a replacement.
+ *
+ * Accessibility:
+ *  - Radix handles the right-click trigger, long-press on touch, the
+ *    `aria-haspopup` / `aria-expanded` wiring, and arrow-key navigation
+ *    between items.
+ *  - Items announce as `role="menuitem"`; `CheckboxItem` and `RadioItem`
+ *    expose checked / selected state correctly.
+ *  - Pair with a visible alternative (a `…` overflow `DropdownMenu`) so
+ *    keyboard-only users can reach the same actions without a pointer.
+ */
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+import { ChevronRight } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { DROPDOWN_MENU_CONTENT_SURFACE_CLASS } from "../../lib/dropdown-menu-surface"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-inset:ps-7 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ms-auto size-4 text-muted-foreground" aria-hidden="true" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        data-slot="context-menu-checkbox-item-indicator"
+      >
+        <ContextMenuPrimitive.ItemIndicator>
+          <i className="fa-light fa-check" aria-hidden="true" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        data-slot="context-menu-radio-item-indicator"
+      >
+        <ContextMenuPrimitive.ItemIndicator>
+          <i className="fa-light fa-check" aria-hidden="true" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+}

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

@@ -56,12 +56,12 @@ export function DatePickerField({
           variant="outline"
           disabled={disabled}
           className={cn(
-            "w-full justify-start text-left font-normal",
+            "w-full justify-start text-start font-normal",
             triggerClassName,
           )}
           aria-label={value ? formatDateFromDate(value) : "Pick a date"}
         >
-          <i className={cn(DATE_PICKER_ICON_CLASS, "mr-2 shrink-0 text-muted-foreground")} aria-hidden="true" />
+          <i className={cn(DATE_PICKER_ICON_CLASS, "me-2 shrink-0 text-muted-foreground")} aria-hidden="true" />
           <span className={cn(!value && "text-muted-foreground")}>
             {value ? formatDateFromDate(value) : "MM/DD/YYYY"}
           </span>

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

@@ -0,0 +1,183 @@
+"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>
+  )
+}