@exxatdesignux/ui 0.2.18 → 0.3.0

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

@@ -0,0 +1,251 @@
+"use client"
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+import { Tip } from "../ui/tip"
+import { FilterDateCalendar } from "../data-table/filter-date-calendar"
+import { FilterTextValueInput } from "../data-table/filter-text-value-input"
+import {
+  type ActiveFilter,
+  type ConditionalRule,
+  type FilterFieldDef,
+  type FilterOperator,
+  OPERATOR_LABELS,
+  RULE_COLORS,
+} from "../../lib/table-properties-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>
+  )
+}

package/src/components/table-properties/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Table / data properties drawer — configure filters, sort, columns, display,
+ * conditional formatting, and view type for a `DataTable` family.
+ *
+ * Generic over row shape; consumers pass `filterFields` + `fieldDefinitions`
+ * derived from their own column defs (`columnsToFilterFields` /
+ * `columnsToFieldDefinitions` in `data-views/hub-table.tsx`), plus an
+ * optional `resolveColumnLabel`.
+ *
+ * Routing: `ListPageTemplate`'s "View → Edit" calls into this drawer via
+ * `createListPageEditViewHandler` + `OpenTablePropertiesHandle` (see
+ * `@exxatdesignux/ui/lib/list-page-table-properties`).
+ */
+
+export { TablePropertiesDrawer } from "./drawer"
+export type { TablePropertiesDrawerProps } from "./drawer"
+export { TablePropertiesDrawerButton } from "./drawer-button"
+export type {
+  TablePropertiesDrawerButtonProps,
+  TablePropertiesDrawerButtonState,
+} from "./drawer-button"
+export { DrawerFilterCard } from "./filter-card"
+export { DrawerSortCard } from "./sort-card"
+export type { DrawerSortCardProps } from "./sort-card"
+export { ColumnRow } from "./column-row"
+export { useDraggableList } from "./draggable-list"
+
+export {
+  createListPageEditViewHandler,
+  isDataListSurfaceViewType,
+  type OpenTablePropertiesHandle,
+} from "../../lib/list-page-table-properties"
+
+// Generic type re-exports (FilterOperator, ConditionalRule, ColDef, etc.)
+// live in `@exxatdesignux/ui/lib/table-properties-types`. Import there for
+// authoring custom drawer hosts.

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

@@ -0,0 +1,63 @@
+"use client"
+import * as React from "react"
+import { Tip } from "../ui/tip"
+import { DragHandleGripIcon } from "../ui/drag-handle-grip"
+import { type SortRule } from "../../lib/table-properties-types"
+
+/** Sort rule card inside the Sort drawer panel */
+export type DrawerSortCardProps = {
+  rule: SortRule
+  /**
+   * Resolved column label for the sort rule's `fieldKey`. Required — every
+   * consumer derives labels from its column defs (the drawer passes
+   * `resolveColumnLabel(rule.fieldKey)`), so the card never falls back to a
+   * product-specific column list.
+   */
+  fieldLabel: string
+  isPrimary: boolean
+  onRemove: () => void
+  onToggleDir: () => void
+}
+
+export function DrawerSortCard(props: DrawerSortCardProps) {
+  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props
+  const label = fieldLabel || 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>
+  )
+}

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

@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+
+import { ListPageViewFrame } from "../ui/list-page-view-frame"
+import { DotPattern } from "../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>
+  )
+}

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

@@ -0,0 +1,19 @@
+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>
+}

package/src/components/templates/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Templates — page-scale compositions of design-system primitives.
+ *
+ *  - `ListPageTemplate` — the hub list page (header + metrics + view tabs + table chrome + export drawer).
+ *  - `NestedSecondaryPanelShell` — sidebar + secondary panel inside a primary route.
+ *  - `DedicatedSearchLandingTemplate` — empty `?q=` landing surface (dot-pattern + lens + suggestions slot).
+ *  - `DedicatedSearchResultsTemplate` — populated `?q=` shell pairing chrome + results body.
+ *
+ * Composition-aware templates (`PrimaryPageTemplate`, `SecondaryPanelHubTemplate`,
+ * `DiscoveryHubTemplate`, `NewFocusTemplate`) remain product-side because they
+ * wrap app-specific shells (`SiteHeader`, `useAskLeo`, route mock data).
+ */
+
+export { ListPageTemplate } from "./list-page"
+export type {
+  ListPageTemplateProps,
+  ViewTab,
+  ViewType,
+  FilterOption,
+} from "./list-page"
+export { VIEW_TYPES } from "./list-page"
+
+export { NestedSecondaryPanelShell } from "./nested-secondary-panel-shell"
+export type { NestedSecondaryPanelShellProps } from "./nested-secondary-panel-shell"
+
+export { DedicatedSearchLandingTemplate } from "./dedicated-search-landing-template"
+export type { DedicatedSearchLandingTemplateProps } from "./dedicated-search-landing-template"
+
+export {
+  DedicatedSearchResultsHeaderChrome,
+  DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME,
+} from "./dedicated-search-results-template"
+export type { DedicatedSearchResultsHeaderChromeProps } from "./dedicated-search-results-template"