@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/table-properties/filter-card.tsx

@@ -1,251 +1 @@
-"use client"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Tip } from "@/components/ui/tip"
-import { FilterDateCalendar } from "@/components/data-table/filter-date-calendar"
-import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
-import {
-  type ActiveFilter,
-  type ConditionalRule,
-  type FilterFieldDef,
-  type FilterOperator,
-  OPERATOR_LABELS,
-  RULE_COLORS,
-} from "./types"
-
-type DrawerFilterCardBaseProps = {
-  fieldDef: FilterFieldDef
-  expanded: boolean
-  onToggleExpand: () => void
-  onRemove: (id: string) => void
-  renderOptionLabel?: (value: string) => React.ReactNode
-}
-
-export type DrawerFilterCardProps =
-  | (DrawerFilterCardBaseProps & {
-      variant?: "filter"
-      filter: ActiveFilter
-      onUpdate: (id: string, patch: Partial<ActiveFilter>) => void
-    })
-  | (DrawerFilterCardBaseProps & {
-      variant: "conditional"
-      filter: ConditionalRule
-      onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
-    })
-
-/** Inline filter card used inside the Table Properties drawer (filter or conditional rule). */
-export function DrawerFilterCard(props: DrawerFilterCardProps) {
-  const {
-    fieldDef,
-    expanded,
-    onToggleExpand,
-    onRemove,
-    renderOptionLabel,
-  } = props
-
-  const isCond = props.variant === "conditional"
-  const filter = props.filter
-  const filterId = filter.id
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const onUpdate = props.onUpdate as (id: string, patch: any) => void
-
-  const [optSearch, setOptSearch] = React.useState("")
-  const options = fieldDef.options ?? []
-  const showSearch = options.length > 8
-  const filteredOpts = optSearch
-    ? options.filter(o => o.label.toLowerCase().includes(optSearch.toLowerCase()))
-    : options
-
-  const values = filter.values
-
-  React.useEffect(() => {
-    if (fieldDef.type !== "select" && fieldDef.type !== "date") return
-    if (filter.operator !== "is" && filter.operator !== "is_not") {
-      onUpdate(filterId, { operator: "is" })
-    }
-  }, [filter.operator, filter.id, fieldDef.type, filterId, onUpdate])
-
-  function toggleValue(val: string) {
-    const next = values.includes(val) ? values.filter(v => v !== val) : [...values, val]
-    onUpdate(filterId, { values: next })
-  }
-
-  function cycleOperator() {
-    const ops = fieldDef.operators
-    const idx = ops.indexOf(filter.operator as FilterOperator)
-    const i = idx === -1 ? 0 : idx
-    onUpdate(filterId, { operator: ops[(i + 1) % ops.length] })
-  }
-
-  const removeLabel = isCond ? "rule" : "filter"
-  const rule = isCond ? (props.filter as ConditionalRule) : null
-
-  return (
-    <div className="rounded-lg border border-border overflow-hidden">
-      <div>
-      {/* Card header */}
-      <div
-        className="flex items-start justify-between px-3 pt-2.5 pb-2 gap-2 cursor-pointer"
-        role="button"
-        tabIndex={0}
-        aria-label={expanded ? `Collapse ${fieldDef.label}` : `Expand ${fieldDef.label}`}
-        onClick={onToggleExpand}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault()
-            onToggleExpand()
-          }
-        }}
-      >
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-semibold text-foreground">{fieldDef.label}</p>
-          <Button
-            type="button"
-            variant="ghost"
-            size="xs"
-            aria-label={`Operator: ${OPERATOR_LABELS[filter.operator as FilterOperator]} — click to cycle`}
-            onClick={e => {
-              e.stopPropagation()
-              cycleOperator()
-            }}
-            className="h-auto py-0 px-1 -ms-1 text-xs text-muted-foreground font-normal"
-          >
-            {OPERATOR_LABELS[filter.operator as FilterOperator]}
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </Button>
-        </div>
-        <div className="flex items-center gap-0.5 shrink-0 self-start">
-          <Tip label={`Remove ${fieldDef.label} ${removeLabel}`} side="top">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              aria-label={`Remove ${fieldDef.label} ${removeLabel}`}
-              className="text-muted-foreground hover:text-destructive"
-              onClick={e => {
-                e.stopPropagation()
-                onRemove(filterId)
-              }}
-            >
-              <i className="fa-light fa-trash text-xs" aria-hidden="true" />
-            </Button>
-          </Tip>
-          <i
-            className={`fa-light ${expanded ? "fa-chevron-up" : "fa-chevron-down"} text-xs text-muted-foreground mt-2`}
-            aria-hidden="true"
-          />
-        </div>
-      </div>
-
-      {/* Expanded body */}
-      {expanded && (
-        <div className="border-t border-border">
-          {fieldDef.type === "select" ? (
-            <>
-              {showSearch && (
-                <div className="px-3 pt-2 pb-1">
-                  <Input placeholder="Search…" value={optSearch} onChange={e => setOptSearch(e.target.value)} className="h-7 text-xs" />
-                </div>
-              )}
-              <div role="listbox" aria-multiselectable="true" aria-label={`${fieldDef.label} options`} className="py-1 max-h-52 overflow-y-auto">
-                {filteredOpts.map(opt => {
-                  const checked = values.includes(opt.value)
-                  return (
-                    <div
-                      key={opt.value}
-                      role="option"
-                      aria-selected={checked}
-                      tabIndex={0}
-                      onClick={() => toggleValue(opt.value)}
-                      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleValue(opt.value) } }}
-                      className="flex items-center gap-2.5 px-3 py-2 text-sm hover:bg-interactive-hover cursor-pointer select-none focus-visible:outline-none focus-visible:bg-interactive-hover"
-                    >
-                      <span aria-hidden="true" data-slot="checkbox" data-state={checked ? "checked" : "unchecked"} className={cn(
-                        "inline-flex items-center justify-center size-3.5 shrink-0 rounded-[3px] border transition-colors",
-                        checked ? "bg-primary border-primary text-primary-foreground" : "border-input bg-background"
-                      )}>
-                        {checked && <i className="fa-solid fa-check text-current" style={{ fontSize: "7px" }} />}
-                      </span>
-                      {renderOptionLabel
-                        ? renderOptionLabel(opt.value)
-                        : <span className="text-foreground">{opt.label}</span>
-                      }
-                    </div>
-                  )
-                })}
-                {filteredOpts.length === 0 && (
-                  <p className="px-3 py-2 text-xs text-muted-foreground">No options found</p>
-                )}
-              </div>
-            </>
-          ) : fieldDef.type === "date" ? (
-            <div className="p-2">
-              <FilterDateCalendar
-                label={`${fieldDef.label} — choose date`}
-                valueYmd={filter.values[0]}
-                onChangeYmd={(ymd) =>
-                  onUpdate(filterId, { values: ymd ? [ymd] : [] })
-                }
-              />
-            </div>
-          ) : fieldDef.type === "text" ? (
-            <div className="p-3">
-              <FilterTextValueInput
-                mask={fieldDef.textMask}
-                aria-label={`${fieldDef.label} value`}
-                placeholder={`Enter ${fieldDef.label.toLowerCase()}…`}
-                value={values[0] ?? ""}
-                onValueChange={next => onUpdate(filterId, { values: [next] })}
-                className="text-sm"
-                autoFocus
-              />
-            </div>
-          ) : null}
-          {values.length > 0 ? (
-            <div className="sticky bottom-0 border-t border-border bg-card p-2">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={() => onUpdate(filterId, { values: [] })}
-                className="w-full justify-center gap-1.5 text-xs text-muted-foreground"
-              >
-                <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
-                Clear selection
-              </Button>
-            </div>
-          ) : null}
-        </div>
-      )}
-
-      {/* Highlight color — conditional rules only */}
-      {isCond && rule && (
-        <div className="border-t border-border px-3 py-2.5">
-          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-            Highlight color
-          </p>
-          <div className="flex flex-wrap gap-1.5">
-            {RULE_COLORS.map(c => (
-              <Button
-                key={c.name}
-                type="button"
-                size="icon-xs"
-                variant="outline"
-                aria-label={c.name}
-                className={cn(
-                  "rounded-md border-2 p-0 transition-all",
-                  rule.bgColor === c.bg ? "border-foreground scale-110" : "border-transparent hover:scale-105",
-                )}
-                style={{ background: c.bg }}
-                onClick={() => onUpdate(filterId, { bgColor: c.bg })}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/filter-card"

package/template/components/table-properties/sort-card.tsx

@@ -1,59 +1 @@
-"use client"
-import * as React from "react"
-import { Tip } from "@/components/ui/tip"
-import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
-import { type SortRule, COLUMNS } from "./types"
-
-/** Sort rule card inside the Sort drawer panel */
-export type DrawerSortCardProps = {
-  rule: SortRule
-  /** When the active table uses dynamic columns (e.g. placements), pass the resolved label. */
-  fieldLabel?: string
-  isPrimary: boolean
-  onRemove: () => void
-  onToggleDir: () => void
-}
-
-export function DrawerSortCard(props: DrawerSortCardProps) {
-  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props
-  const col = COLUMNS.find(c => c.key === rule.fieldKey)
-  const label = fieldLabel ?? col?.label ?? rule.fieldKey
-  if (!label) return null
-  return (
-    <div className="rounded-lg border border-border bg-background overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2.5">
-        <DragHandleGripIcon className="text-[13px] text-muted-foreground/40" />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-1.5">
-            {isPrimary && (
-              <span className="text-xs font-bold text-accent-foreground bg-accent rounded px-1 py-0.5 leading-none uppercase tracking-wide shrink-0">
-                Primary
-              </span>
-            )}
-            <p className="text-sm font-medium text-foreground truncate">{label}</p>
-          </div>
-          <button
-            type="button"
-            aria-label={`Direction: ${rule.direction === "asc" ? "Ascending" : "Descending"} — click to toggle`}
-            onClick={onToggleDir}
-            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors mt-0.5"
-          >
-            <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-a-z" : "fa-arrow-down-a-z"} text-xs`} aria-hidden="true" />
-            {rule.direction === "asc" ? "Ascending" : "Descending"}
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </button>
-        </div>
-        <Tip label={`Remove ${label} sort`} side="top">
-          <button
-            type="button"
-            aria-label={`Remove ${label} sort`}
-            onClick={onRemove}
-            className="inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:text-destructive hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
-          >
-            <i className="fa-light fa-trash text-xs" aria-hidden="true" />
-          </button>
-        </Tip>
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/sort-card"

package/template/components/table-properties/types.ts

@@ -1,42 +1,33 @@
-"use client"
+/**
+ * Table Properties types + Placements seed data.
+ *
+ * Generic filter / sort / conditional-rule types live in
+ * `@exxatdesignux/ui/lib/table-properties-types` so other apps consuming
+ * the design system can build their own filter / sort drawers without
+ * inheriting Placements-specific column lists.
+ *
+ * `FILTER_FIELDS` and `COLUMNS` below are **product data**, not
+ * design-system primitives — they encode the columns + filter operators
+ * of the Placements hub. Other hubs (Team, Compliance, Library)
+ * compose their own arrays and pass them into the drawer.
+ */
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Shared types for table-properties components
-// ─────────────────────────────────────────────────────────────────────────────
+export {
+  OPERATOR_LABELS,
+  RULE_COLORS,
+  type ActiveFilter,
+  type ColDef,
+  type ConditionalRule,
+  type FilterFieldDef,
+  type FilterOperator,
+  type FilterTextMask,
+  type SortRule,
+} from "@exxatdesignux/ui/lib/table-properties-types"
 
-export type FilterOperator = "is" | "is_not" | "contains" | "not_contains"
-
-/** Input mask for `type: "text"` filters — [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask). */
-export type FilterTextMask = "phone" | "zip" | "dateMDY"
-
-export interface FilterFieldDef {
-  key: string
-  label: string
-  icon: string
-  type: "select" | "text" | "date"
-  operators: FilterOperator[]
-  /** Select options, or for `date` fields used by conditional rules (exact row strings). */
-  options?: { value: string; label: string }[]
-  /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */
-  textMask?: FilterTextMask
-}
-
-export interface ActiveFilter {
-  id: string
-  fieldKey: string
-  operator: FilterOperator
-  values: string[]
-}
-
-export interface SortRule {
-  id: string
-  fieldKey: string
-  direction: "asc" | "desc"
-}
-
-export const OPERATOR_LABELS: Record<FilterOperator, string> = {
-  is: "is", is_not: "is not", contains: "contains", not_contains: "does not contain",
-}
+import type {
+  ColDef,
+  FilterFieldDef,
+} from "@exxatdesignux/ui/lib/table-properties-types"
 
 /** Default filter field list (placement table uses column-derived defs via `filterFields` prop). */
 export const FILTER_FIELDS: FilterFieldDef[] = [
@@ -77,40 +68,6 @@ export const FILTER_FIELDS: FilterFieldDef[] = [
   { key: "supervisor", label: "Supervisor", icon: "fa-user-tie",  type: "text", operators: ["contains", "not_contains"] },
 ]
 
-// Column definitions — shared with drawer
-export interface ColDef {
-  key: string
-  label: string
-  sortable: boolean
-  sortKey?: string
-  minWidth: number
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Conditional formatting rules
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ConditionalRule {
-  id: string
-  /** Column key to evaluate */
-  fieldKey: string
-  operator: FilterOperator
-  /** Selected option values (select) or text (single entry) when operator needs values */
-  values: string[]
-  /** Resolved CSS background color string */
-  bgColor: string
-}
-
-/** Predefined palette for conditional rule backgrounds */
-export const RULE_COLORS: { name: string; bg: string }[] = [
-  { name: "Green",  bg: "var(--conditional-rule-green)" },
-  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
-  { name: "Blue",   bg: "var(--conditional-rule-blue)" },
-  { name: "Red",    bg: "var(--conditional-rule-red)" },
-  { name: "Purple", bg: "var(--conditional-rule-purple)" },
-  { name: "Orange", bg: "var(--conditional-rule-orange)" },
-]
-
 export const COLUMNS: ColDef[] = [
   { key: "select",     label: "",            sortable: false, minWidth: 40  },
   { key: "student",    label: "Student",     sortable: true,  minWidth: 180, sortKey: "student"  },

package/template/components/templates/dedicated-search-landing-template.tsx

@@ -1,124 +1 @@
-"use client"
-
-import * as React from "react"
-
-import { ListPageViewFrame } from "@/components/data-views"
-import { DotPattern } from "@/components/ui/dot-pattern"
-import { cn } from "@/lib/utils"
-
-export interface DedicatedSearchLandingTemplateProps {
-  /** Page title — string or rich node (e.g. styled heading). */
-  title: React.ReactNode
-  /** Primary search control (typically {@link DedicatedSearchUrlComposer}). */
-  composer: React.ReactNode
-  /** Optional block below composer (e.g. {@link DedicatedSearchRecents}). */
-  trailing?: React.ReactNode
-  /** Forwarded to {@link ListPageViewFrame}. */
-  maxWidthClassName?: string
-  frameClassName?: string
-  gutterClassName?: string
-}
-
-const DEFAULT_GUTTER =
-  "mx-auto flex min-h-[min(72vh,36rem)] w-full min-w-0 flex-col justify-center gap-0 px-6 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12 lg:px-16"
-
-/** Feather into page white / header so the hero never reads as a hard horizontal slab. */
-const HERO_BACKDROP_MASK =
-  "[mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)]"
-
-/**
- * Soft blurred blobs using only Ask Leo surface tints (`--leo-surface-tint-a|b` in `globals.css`).
- */
-function DedicatedSearchLandingBackdrop() {
-  return (
-    <div
-      aria-hidden
-      className={cn(
-        "pointer-events-none absolute inset-0 -z-10 select-none overflow-hidden",
-        HERO_BACKDROP_MASK,
-      )}
-    >
-      <div
-        className="absolute -left-[20%] -top-[30%] h-[min(54vmin,27rem)] w-[min(54vmin,27rem)] rounded-full blur-[76px]"
-        style={{
-          background: "radial-gradient(circle at 42% 36%, var(--leo-surface-tint-b) 0%, transparent 68%)",
-        }}
-      />
-      <div
-        className="absolute -right-[12%] top-[2%] h-[min(46vmin,23rem)] w-[min(46vmin,23rem)] rounded-full blur-[68px]"
-        style={{
-          background: "radial-gradient(circle at 48% 48%, var(--leo-surface-tint-a) 0%, transparent 66%)",
-        }}
-      />
-      <div
-        className="absolute bottom-[-16%] left-[14%] h-[min(50vmin,25rem)] w-[min(50vmin,25rem)] rounded-full blur-[84px]"
-        style={{
-          background: "radial-gradient(circle at 44% 40%, var(--leo-surface-tint-b) 0%, transparent 70%)",
-        }}
-      />
-      <div
-        className="absolute bottom-[4%] right-[6%] h-[min(40vmin,20rem)] w-[min(40vmin,20rem)] rounded-full blur-[60px]"
-        style={{
-          background: "radial-gradient(circle at 52% 44%, var(--leo-surface-tint-a) 0%, transparent 72%)",
-        }}
-      />
-      <div
-        className="absolute left-[36%] top-[32%] h-[min(38vmin,19rem)] w-[min(38vmin,19rem)] -translate-x-1/2 rounded-full blur-[74px]"
-        style={{
-          background: "radial-gradient(circle at 50% 50%, var(--leo-surface-tint-b) 0%, transparent 68%)",
-        }}
-      />
-
-      {/* Static dot field — same primitive as `AiThinkingOverlay` (no motion here). */}
-      <DotPattern
-        width={15}
-        height={15}
-        cr={0.65}
-        className={cn(
-          "absolute inset-0 opacity-[0.34] mix-blend-multiply dark:opacity-[0.22] dark:mix-blend-soft-light",
-          "fill-[color-mix(in_oklch,var(--brand-color)_14%,var(--background))]",
-        )}
-      />
-    </div>
-  )
-}
-
-/**
- * Centered dedicated-search landing — empty `?q=` shell (hero title + composer + optional trailing).
- */
-export function DedicatedSearchLandingTemplate({
-  title,
-  composer,
-  trailing,
-  maxWidthClassName = "max-w-5xl",
-  frameClassName = "min-w-0",
-  gutterClassName = DEFAULT_GUTTER,
-}: DedicatedSearchLandingTemplateProps) {
-  return (
-    <div className="relative isolate min-w-0 w-full overflow-hidden">
-      <DedicatedSearchLandingBackdrop />
-      <ListPageViewFrame
-        maxWidthClassName={maxWidthClassName}
-        className={cn("relative z-10", frameClassName)}
-        gutterClassName={gutterClassName}
-      >
-        <header className="min-w-0">
-          {typeof title === "string" ? (
-            <h1
-              className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
-              style={{ fontFamily: "var(--font-heading)" }}
-            >
-              {title}
-            </h1>
-          ) : (
-            title
-          )}
-        </header>
-
-        <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>
-
-        {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
-      </ListPageViewFrame>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/templates/dedicated-search-landing-template"

package/template/components/templates/dedicated-search-results-template.tsx

@@ -1,19 +1 @@
-import type { ReactNode } from "react"
-
-import { cn } from "@/lib/utils"
-
-/** Apply to the hub content wrapper when showing results (list surface under composer). */
-export const DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME =
-  "border-t border-border/40 bg-gradient-to-b from-muted/25 via-background to-background"
-
-export interface DedicatedSearchResultsHeaderChromeProps {
-  children: ReactNode
-  className?: string
-}
-
-/**
- * Muted strip wrapping page chrome + composer on the results branch (below site header).
- */
-export function DedicatedSearchResultsHeaderChrome({ children, className }: DedicatedSearchResultsHeaderChromeProps) {
-  return <div className={cn("border-b border-border/50 bg-muted/15", className)}>{children}</div>
-}
+export * from "@exxatdesignux/ui/components/templates/dedicated-search-results-template"

package/template/components/templates/discovery-hub-template.tsx

@@ -78,7 +78,7 @@ const DiscoveryHubSearchRow = React.memo(function DiscoveryHubSearchRow({
 
 /**
  * Discovery hub — centered command-style natural language search, create CTA, and Ask Leo promo.
- * Hubs can pass `groups` from a domain module (e.g. Ask Leo prompt suggestions from `lib/question-bank-hub-search.ts`).
+ * Hubs can pass `groups` from a domain module (e.g. Ask Leo prompt suggestions from `lib/library-hub-search.ts`).
  */
 export function DiscoveryHubTemplate({
   title,