@exxatdesignux/ui 0.2.19 → 0.3.0

package/src/components/data-views/os-folder-glyph.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+/**
+ * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.
+ * Static asset: `public/folders/icons8-folder-windows-11.svg`
+ */
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+/**
+ * Color palette tones shared across folder hubs. Domain-specific palette
+ * names (e.g. `QuestionBankFolderColorKey`) are structurally identical to
+ * this union and pass through without conversion.
+ */
+export type FolderGlyphColorKey =
+  | "brand"
+  | "success"
+  | "warning"
+  | "destructive"
+  | "muted"
+  | "chart1"
+  | "chart2"
+  | "chart3"
+
+/** Default asset path (override via `OsFolderGlyph` `src` prop if you ship a different file). */
+export const OS_FOLDER_GLYPH_SRC = "/folders/icons8-folder-windows-11.svg"
+
+/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */
+const COLOR_TINT_FILTER: Record<FolderGlyphColorKey, string> = {
+  brand: "hue-rotate(-42deg) saturate(1.25) brightness(0.97)",
+  success: "hue-rotate(82deg) saturate(1.2) brightness(0.95)",
+  warning: "hue-rotate(-5deg) saturate(1.35) brightness(1.02)",
+  destructive: "hue-rotate(300deg) saturate(1.15) brightness(0.92)",
+  muted: "saturate(0.15) brightness(1.08)",
+  chart1: "hue-rotate(200deg) saturate(1.2) brightness(0.96)",
+  chart2: "hue-rotate(95deg) saturate(1.15) brightness(0.96)",
+  chart3: "hue-rotate(265deg) saturate(1.2) brightness(0.96)",
+}
+
+const SIZE_MAP = {
+  /** Compact — folder inspector / column headers (matches ~36px row height). */
+  xs: "h-9 w-[2.6rem]",
+  sm: "h-[3.35rem] w-[3.85rem]",
+  md: "h-[4.6rem] w-[5.25rem]",
+  lg: "h-[6.5rem] w-[7.25rem]",
+}
+
+const ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {
+  xs: "text-[13px] leading-none",
+  sm: "text-lg",
+  md: "text-2xl",
+  lg: "text-4xl",
+}
+
+/** Darker version of each folder color for punched icon appearance. */
+const ICON_COLOR: Record<FolderGlyphColorKey, string> = {
+  brand: "text-orange-800 dark:text-orange-600",
+  success: "text-emerald-800 dark:text-emerald-600",
+  warning: "text-amber-800 dark:text-amber-600",
+  destructive: "text-red-800 dark:text-red-600",
+  muted: "text-slate-600 dark:text-slate-400",
+  chart1: "text-blue-800 dark:text-blue-600",
+  chart2: "text-lime-800 dark:text-lime-600",
+  chart3: "text-purple-800 dark:text-purple-600",
+}
+
+export interface OsFolderGlyphProps {
+  colorKey: FolderGlyphColorKey
+  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */
+  icon: string
+  size?: keyof typeof SIZE_MAP
+  className?: string
+  variant?: "solid" | "outline"
+  /**
+   * When false, exposes `role="img"` + `aria-label` (use with a short label, e.g. sheet preview).
+   * When true (default), hides the glyph from AT — parent control should name the action.
+   */
+  decorative?: boolean
+  /** Required when `decorative={false}` */
+  label?: string
+}
+
+export function OsFolderGlyph({
+  colorKey,
+  icon,
+  size = "md",
+  className,
+  variant = "solid",
+  decorative = true,
+  label,
+}: OsFolderGlyphProps) {
+  const outline = variant === "outline"
+  const tint = COLOR_TINT_FILTER[colorKey]
+
+  return (
+    <div
+      className={cn(
+        "group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out",
+        "hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100",
+        SIZE_MAP[size],
+        className,
+      )}
+      role={!decorative && label ? "img" : undefined}
+      aria-label={!decorative ? label : undefined}
+      aria-hidden={decorative ? true : undefined}
+    >
+      {/* Static SVG — design-system ships an HTML `<img>` so non-Next consumers
+          (Vite, Remix, plain CRA) can use it without `next/image`. Folder
+          grids render many of these at once; lazy-loading lets the browser
+          skip off-screen glyphs until they scroll near the viewport. */}
+      <img
+        src={OS_FOLDER_GLYPH_SRC}
+        alt=""
+        width={240}
+        height={240}
+        draggable={false}
+        loading="lazy"
+        decoding="async"
+        className={cn(
+          "h-full w-full object-contain",
+          "transition-[filter] duration-200",
+          outline && "opacity-75 saturate-[0.65]",
+        )}
+        style={outline ? undefined : { filter: tint }}
+      />
+      <span
+        className={cn(
+          "pointer-events-none absolute inset-0 flex items-center justify-center",
+          size === "xs" ? "translate-y-[0.18rem]" : "translate-y-[0.35rem]",
+          ICON_TEXT[size],
+          outline
+            ? "text-muted-foreground"
+            : cn(ICON_COLOR[colorKey], "opacity-100"),
+        )}
+      >
+        <i className={cn("fa-solid", icon)} aria-hidden="true" />
+      </span>
+    </div>
+  )
+}

package/src/components/data-views/outline-tree-menu.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+/**
+ * Central outline-tree chrome — mirrors shadcn/ui **Sidebar** file-tree structure
+ * (`SidebarMenu` → `SidebarMenuItem` + `Collapsible` → `SidebarMenuSub` → rows) without
+ * coupling to `useSidebar`.
+ *
+ * - **`guideLayout="inset"`** — same rhythm as `SidebarMenuSub` (`mx-3.5` + `translate-x-px`).
+ * - **`guideLayout="chevronRail"`** — use with **`OutlineTreeCollapsibleContentRail`**: a **`w-6`**
+ *   spacer lines up the vertical guide with the **horizontal center** of a **`size-8`** chevron
+ *   when the folder row uses **`px-2`** (8px padding + 16px half of 32px chevron hit target).
+ *
+ * @see packages/ui/src/components/ui/sidebar.tsx — `SidebarMenuSub`, `SidebarMenuSubItem`
+ */
+
+import * as React from "react"
+import { CollapsibleContent } from "../ui/collapsible"
+import { cn } from "../../lib/utils"
+
+export type OutlineTreeSurface = "sidebar" | "panel"
+
+export type OutlineTreeGuideLayout = "inset" | "chevronRail"
+
+const outlineTreeSubInsetClass: Record<OutlineTreeSurface, string> = {
+  sidebar:
+    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 rtl:-translate-x-px",
+  panel:
+    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-border/60 px-2.5 py-0.5 rtl:-translate-x-px",
+}
+
+const outlineTreeSubChevronRailClass: Record<OutlineTreeSurface, string> = {
+  sidebar:
+    "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-sidebar-border py-0.5 ps-2.5",
+  panel: "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-border/60 py-0.5 ps-2.5",
+}
+
+/** Pull row content onto the guide line — matches `SidebarMenuSubButton` horizontal nudge (inset layout only). */
+export const OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = "-translate-x-px rtl:translate-x-px"
+
+/** `CollapsibleContent` row: spacer width = `px-2` (8px) + half of `size-8` chevron (16px) → guide under chevron center. */
+export const OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = "flex min-w-0 w-full"
+
+/** Spacer column — keep in sync with folder row `px-2` + `size-8` chevron. */
+export const OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = "w-6 shrink-0"
+
+/** Wrap `OutlineTreeSub` with `guideLayout="chevronRail"` so the vertical border meets the chevron center. */
+export function OutlineTreeCollapsibleContentRail({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      className={cn(OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, className)}
+      {...props}
+    >
+      <div className={OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS} aria-hidden />
+      {children}
+    </CollapsibleContent>
+  )
+}
+
+/** Nested list under a folder — vertical guide + indent. */
+export function OutlineTreeSub({
+  surface = "panel",
+  guideLayout = "inset",
+  className,
+  ...props
+}: React.ComponentProps<"ul"> & {
+  surface?: OutlineTreeSurface
+  guideLayout?: OutlineTreeGuideLayout
+}) {
+  return (
+    <ul
+      data-slot="outline-tree-sub"
+      data-guide-layout={guideLayout}
+      className={cn(
+        guideLayout === "inset" && outlineTreeSubInsetClass[surface],
+        guideLayout === "chevronRail" && outlineTreeSubChevronRailClass[surface],
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Root or nested branch list — matches `SidebarMenu` spacing. */
+export function OutlineTreeMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="outline-tree-menu"
+      className={cn("flex w-full min-w-0 list-none flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Expandable folder row wrapper — matches `SidebarMenuItem`. */
+export function OutlineTreeMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="outline-tree-menu-item"
+      className={cn("group/menu-item relative min-w-0 w-full list-none", className)}
+      {...props}
+    />
+  )
+}
+
+/** Leaf / nested row inside `OutlineTreeSub` — matches `SidebarMenuSubItem`. */
+export function OutlineTreeSubItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="outline-tree-sub-item"
+      className={cn("group/menu-sub-item relative min-w-0 w-full list-none", className)}
+      {...props}
+    />
+  )
+}
+
+export interface OutlineTreeLeafButtonProps extends React.ComponentProps<"button"> {
+  surface?: OutlineTreeSurface
+  isActive?: boolean
+  /** Inset `OutlineTreeSub` only — nudge like `SidebarMenuSubButton`. Ignored when parent uses `chevronRail`. */
+  subGuideAlign?: boolean
+}
+
+/** Selectable leaf row (file / terminal row) — `SidebarMenuSubButton`–aligned rhythm. */
+export function OutlineTreeLeafButton({
+  surface = "panel",
+  isActive = false,
+  subGuideAlign = false,
+  className,
+  ...props
+}: OutlineTreeLeafButtonProps) {
+  return (
+    <button
+      type="button"
+      data-active={isActive || undefined}
+      className={cn(
+        "flex min-h-8 w-full min-w-0 cursor-pointer select-none items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm outline-none ring-ring focus-visible:ring-2 focus-visible:ring-inset [&>svg]:size-4 [&>svg]:shrink-0",
+        subGuideAlign && OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,
+        surface === "panel" &&
+          cn(
+            "text-foreground hover:bg-muted/50",
+            isActive && "bg-accent font-medium text-accent-foreground",
+          ),
+        surface === "sidebar" &&
+          cn(
+            "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+          ),
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/table-properties/column-row.tsx

@@ -0,0 +1,90 @@
+"use client"
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Tip } from "../ui/tip"
+import { DragHandleGripIcon } from "../ui/drag-handle-grip"
+import { ToggleSwitch } from "../ui/toggle-switch"
+
+export interface ColumnRowProps {
+  label: string
+  isFirst: boolean
+  isLast: boolean
+  visible: boolean
+  onToggleVisible: () => void
+  onMoveUp: () => void
+  onMoveDown: () => void
+  // drag-and-drop props spread from useDraggableList
+  draggable: true
+  onDragStart: React.DragEventHandler
+  onDragOver: React.DragEventHandler
+  onDrop: React.DragEventHandler
+  onDragEnd: React.DragEventHandler
+  isDragging: boolean
+  isOver: boolean
+}
+
+export function ColumnRow({
+  label,
+  isFirst,
+  isLast,
+  visible,
+  onToggleVisible,
+  onMoveUp,
+  onMoveDown,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDragging,
+  isOver,
+}: ColumnRowProps) {
+  return (
+    <div
+      role="listitem"
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className={cn(
+        "flex items-center gap-2 px-2 py-2 rounded-lg group hover:bg-interactive-hover-subtle transition-colors cursor-grab active:cursor-grabbing",
+        isDragging && "opacity-40",
+        isOver && "ring-2 ring-ring bg-accent/30",
+      )}
+    >
+      <DragHandleGripIcon className="text-[13px] text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" />
+      <span className="flex-1 text-sm text-foreground">{label}</span>
+      {/* Up / Down priority buttons */}
+      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Tip label={`Move ${label} up`} side="top">
+          <button
+            type="button"
+            aria-label={`Move ${label} up`}
+            disabled={isFirst}
+            onClick={onMoveUp}
+            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <i className="fa-light fa-chevron-up text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+        <Tip label={`Move ${label} down`} side="top">
+          <button
+            type="button"
+            aria-label={`Move ${label} down`}
+            disabled={isLast}
+            onClick={onMoveDown}
+            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+      </div>
+      {/* Visibility toggle */}
+      <ToggleSwitch
+        checked={visible}
+        onChange={onToggleVisible}
+      />
+    </div>
+  )
+}

package/src/components/table-properties/draggable-list.ts

@@ -0,0 +1,54 @@
+/**
+ * useDraggableList — pointer-driven reorder hook used by drawer sort cards,
+ * column rows, and conditional-rule lists. Generic over item shape via
+ * `getId(item) => string | number`.
+ */
+import * as React from "react"
+
+export interface DraggableListHandle {
+  dragId: string | null
+  overId: string | null
+  getItemProps: (id: string) => {
+    draggable: true
+    onDragStart: (e: React.DragEvent) => void
+    onDragOver: (e: React.DragEvent) => void
+    onDrop: (e: React.DragEvent) => void
+    onDragEnd: () => void
+    "data-dragging": boolean
+    "data-over": boolean
+  }
+}
+
+export function useDraggableList<T>(
+  items: T[],
+  getId: (item: T) => string,
+  onReorder: (newItems: T[]) => void,
+): DraggableListHandle {
+  const [dragId, setDragId] = React.useState<string | null>(null)
+  const [overId, setOverId] = React.useState<string | null>(null)
+
+  function getItemProps(id: string) {
+    return {
+      draggable: true as const,
+      onDragStart: (e: React.DragEvent) => { e.dataTransfer.effectAllowed = "move"; setDragId(id) },
+      onDragOver: (e: React.DragEvent) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOverId(id) },
+      onDrop: (e: React.DragEvent) => {
+        e.preventDefault()
+        if (!dragId || dragId === id) { setDragId(null); setOverId(null); return }
+        const from = items.findIndex(i => getId(i) === dragId)
+        const to   = items.findIndex(i => getId(i) === id)
+        if (from === -1 || to === -1) { setDragId(null); setOverId(null); return }
+        const next = [...items]
+        const [moved] = next.splice(from, 1)
+        next.splice(to, 0, moved)
+        onReorder(next)
+        setDragId(null); setOverId(null)
+      },
+      onDragEnd: () => { setDragId(null); setOverId(null) },
+      "data-dragging": dragId === id,
+      "data-over": overId === id && dragId !== id,
+    }
+  }
+
+  return { dragId, overId, getItemProps }
+}