@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/export-drawer.tsx

@@ -1,375 +1 @@
-"use client"
-
-/**
- * ExportDrawer — floating right-side drawer with export form.
- *
- * Uses the same Sheet pattern as TablePropertiesDrawer:
- *  - showCloseButton={false}, showOverlay={false}
- *  - Rounded, floating, inset from viewport edges
- *  - Button + Tip from our own component library
- *
- * Form fields (shadcn Form + react-hook-form + zod):
- *   • File format  CSV · Excel · PDF  (SelectionTileGrid radio)
- *   • Date range   From / To          (FilterTextValueInput dateMDY — same as Settings / table filters)
- *   • Columns      All · Visible only (radio)
- *   • Apply active filters            (checkbox)
- *
- * WCAG 2.1 AA:
- *   ✓ All inputs labelled via FormLabel linked to control id (1.3.1)
- *   ✓ Error messages linked via aria-describedby (3.3.1)
- *   ✓ Focus returns to trigger on close (2.4.3)
- */
-
-import * as React from "react"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-
-import { devLog } from "@/lib/dev-log"
-import { Button }   from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Label } from "@/components/ui/label"
-import { Tip }      from "@/components/ui/tip"
-import { Kbd, KbdGroup } from "@/components/ui/kbd"
-import { Shortcut } from "@/components/ui/dropdown-menu"
-import { RadioGroup, RadioGroupItem, RadioGroupLabel } from "@/components/ui/radio-group"
-import { SelectionTileGrid } from "@/components/ui/selection-tile-grid"
-import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
-import type { SelectionTileOption } from "@/components/ui/selection-tile-grid"
-import {
-  Sheet,
-  SheetContent,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-
-/** Parse full MM/DD/YYYY from masked input; partial/invalid → undefined. */
-function parseMdyToDate(raw: string | undefined): Date | undefined {
-  if (!raw?.trim()) return undefined
-  const m = raw.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
-  if (!m) return undefined
-  const month = Number(m[1])
-  const day = Number(m[2])
-  const year = Number(m[3])
-  if (month < 1 || month > 12 || day < 1 || day > 31) return undefined
-  const d = new Date(year, month - 1, day, 12, 0, 0, 0)
-  if (d.getFullYear() !== year || d.getMonth() !== month - 1 || d.getDate() !== day) return undefined
-  return d
-}
-
-// ── Validation schema ─────────────────────────────────────────────────────────
-
-const EXPORT_FORMAT_OPTIONS: SelectionTileOption<"csv" | "excel" | "pdf">[] = [
-  { value: "csv",   label: "CSV",   icon: "fa-file-csv" },
-  { value: "excel", label: "Excel", icon: "fa-file-excel" },
-  { value: "pdf",   label: "PDF",   icon: "fa-file-pdf" },
-]
-
-const exportSchema = z
-  .object({
-    format:         z.enum(["csv", "excel", "pdf"]),
-    columns:        z.enum(["all", "visible"]),
-    dateFrom:       z.string().optional(),
-    dateTo:         z.string().optional(),
-    includeFilters: z.boolean(),
-  })
-  .superRefine((data, ctx) => {
-    const from = parseMdyToDate(data.dateFrom)
-    const to = parseMdyToDate(data.dateTo)
-    if (data.dateFrom?.trim() && !from) {
-      ctx.addIssue({ code: "custom", message: "Enter a valid from date", path: ["dateFrom"] })
-    }
-    if (data.dateTo?.trim() && !to) {
-      ctx.addIssue({ code: "custom", message: "Enter a valid to date", path: ["dateTo"] })
-    }
-    if (from && to && to < from) {
-      ctx.addIssue({ code: "custom", message: "End date must be after start date", path: ["dateTo"] })
-    }
-  })
-
-type ExportForm = z.infer<typeof exportSchema>
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export interface ExportDrawerProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  totalRows?: number
-  visibleColumns?: number
-}
-
-export function ExportDrawer({
-  open,
-  onOpenChange,
-  totalRows = 0,
-  visibleColumns,
-}: ExportDrawerProps) {
-  const form = useForm<ExportForm>({
-    resolver: zodResolver(exportSchema),
-    defaultValues: {
-      format:         "csv",
-      columns:        "visible",
-      dateFrom:       "",
-      dateTo:         "",
-      includeFilters: true,
-    },
-  })
-
-  const [isExporting, setIsExporting] = React.useState(false)
-
-  async function onSubmit(values: ExportForm) {
-    setIsExporting(true)
-    await new Promise(r => setTimeout(r, 1200))
-    devLog("Export:", {
-      ...values,
-      dateFrom: parseMdyToDate(values.dateFrom)?.toISOString(),
-      dateTo:   parseMdyToDate(values.dateTo)?.toISOString(),
-    })
-    setIsExporting(false)
-    onOpenChange(false)
-    form.reset()
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
-        data-slot="export-drawer"
-        side="right"
-        showCloseButton={false}
-        showOverlay={false}
-        className="z-[80] w-80 sm:max-w-80 p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
-        style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-3">
-          <SheetTitle className="text-base font-semibold leading-tight">Export data</SheetTitle>
-          <Tip label="Close" side="bottom">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Close"
-              onClick={() => onOpenChange(false)}
-            >
-              <i className="fa-light fa-xmark text-[13px]" aria-hidden="true" />
-            </Button>
-          </Tip>
-        </div>
-
-        {/* Record count */}
-        <p className="px-4 pb-3 text-sm text-muted-foreground -mt-1">
-          {totalRows} record{totalRows !== 1 ? "s" : ""} available for export.
-        </p>
-
-        {/* Form body */}
-        <Form {...form}>
-          <form
-            id="export-form"
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex-1 overflow-y-auto"
-          >
-            <div className="px-4 pb-4 space-y-5">
-
-              {/* File format */}
-              <FormField
-                control={form.control}
-                name="format"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <SelectionTileGrid
-                        sectionLabel="File format"
-                        options={EXPORT_FORMAT_OPTIONS}
-                        columns={3}
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        interaction="radio"
-                        idPrefix="export-fmt"
-                        itemVariant="outline"
-                        itemMotion="pop"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Date range */}
-              <fieldset className="space-y-2">
-                <legend className="text-sm font-medium leading-none mb-2">
-                  Date range{" "}
-                  <span className="text-muted-foreground font-normal">(optional)</span>
-                </legend>
-                <div className="grid grid-cols-2 gap-3">
-                  <FormField
-                    control={form.control}
-                    name="dateFrom"
-                    render={({ field }) => (
-                      <FormItem className="gap-1">
-                        <FormLabel htmlFor="export-date-from" className="text-xs text-muted-foreground">
-                          From
-                        </FormLabel>
-                        <FormControl>
-                          <FilterTextValueInput
-                            id="export-date-from"
-                            mask="dateMDY"
-                            aria-label="Export from date (optional)"
-                            placeholder="MM/DD/YYYY"
-                            value={field.value ?? ""}
-                            onValueChange={field.onChange}
-                            className="h-8 text-sm"
-                          />
-                        </FormControl>
-                        <FormDescription className="text-[11px]">MM/DD/YYYY</FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="dateTo"
-                    render={({ field }) => (
-                      <FormItem className="gap-1">
-                        <FormLabel htmlFor="export-date-to" className="text-xs text-muted-foreground">
-                          To
-                        </FormLabel>
-                        <FormControl>
-                          <FilterTextValueInput
-                            id="export-date-to"
-                            mask="dateMDY"
-                            aria-label="Export to date (optional)"
-                            placeholder="MM/DD/YYYY"
-                            value={field.value ?? ""}
-                            onValueChange={field.onChange}
-                            className="h-8 text-sm"
-                          />
-                        </FormControl>
-                        <FormDescription className="text-[11px]">MM/DD/YYYY</FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </fieldset>
-
-              {/* Columns */}
-              <FormField
-                control={form.control}
-                name="columns"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-sm font-medium">Columns</FormLabel>
-                    <FormControl>
-                      <RadioGroup
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        className="space-y-1.5 mt-1"
-                        itemVariant="outline"
-                        itemMotion="pop"
-                      >
-                        {([
-                          { value: "all",     label: "All columns",          sub: null },
-                          { value: "visible", label: "Visible columns only", sub: visibleColumns !== undefined ? `${visibleColumns} columns` : null },
-                        ] as const).map(opt => (
-                          <div
-                            key={opt.value}
-                            className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2.5 transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10 cursor-pointer"
-                          >
-                            <RadioGroupItem value={opt.value} id={`col-${opt.value}`} />
-                            <RadioGroupLabel
-                              htmlFor={`col-${opt.value}`}
-                              className="min-h-0 flex-1 cursor-pointer py-0 text-sm font-normal leading-none"
-                            >
-                              {opt.label}
-                              {opt.sub && (
-                                <span className="text-muted-foreground ml-1.5 font-normal">({opt.sub})</span>
-                              )}
-                            </RadioGroupLabel>
-                          </div>
-                        ))}
-                      </RadioGroup>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Include filters */}
-              <FormField
-                control={form.control}
-                name="includeFilters"
-                render={({ field }) => (
-                  <FormItem>
-                    <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-2.5 transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-primary">
-                      <FormControl>
-                        <Checkbox
-                          id="include-filters"
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                          className="mt-0.5 shrink-0"
-                        />
-                      </FormControl>
-                      <div className="min-w-0">
-                        <Label htmlFor="include-filters" className="text-sm cursor-pointer font-medium leading-none">
-                          Apply active filters
-                        </Label>
-                        <p className="text-xs text-muted-foreground mt-1">
-                          Export only rows matching current filters
-                        </p>
-                      </div>
-                    </div>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-            </div>
-          </form>
-        </Form>
-
-        {/* Global bindings — only active while the drawer is open (Sheet unmounts content on close) */}
-        <Shortcut keys="Enter" disabled={isExporting} onInvoke={() => form.handleSubmit(onSubmit)()} />
-
-        {/* Footer */}
-        <div className="flex items-center gap-2 px-4 py-3 border-t border-border">
-          <Button
-            type="button"
-            variant="outline"
-            className="flex-1"
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-            <KbdGroup className="ml-1.5"><Kbd variant="bare">Esc</Kbd></KbdGroup>
-          </Button>
-          <Button
-            type="submit"
-            form="export-form"
-            className="flex-1"
-            disabled={isExporting}
-          >
-            {isExporting ? (
-              <>
-                <i className="fa-light fa-spinner-third fa-spin text-[13px]" aria-hidden="true" />
-                Exporting…
-              </>
-            ) : (
-              <>
-                <i className="fa-light fa-arrow-down-to-line text-[13px]" aria-hidden="true" />
-                Export
-                <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
-              </>
-            )}
-          </Button>
-        </div>
-      </SheetContent>
-    </Sheet>
-  )
-}
+export * from "@exxatdesignux/ui/components/export-drawer"

package/template/components/exxat-product-logo.tsx

@@ -129,23 +129,23 @@ function ExxatLogoBase({
       <g data-exxat-prefix>
         <path
           d="M196 35.7646L235.626 35.811C239.705 35.8108 250.804 36.0941 254.421 35.6509L254.407 50.8756C240.766 50.8038 227.125 50.8041 213.485 50.877L213.495 74.3467C224.554 74.3448 238.413 74.7338 249.193 74.2652L249.203 89.7182C245.211 89.4232 239.525 89.5845 235.431 89.5872L213.496 89.6342L213.484 113.004L256.078 112.926L256.072 128.097C251.917 127.617 239.134 127.901 234.375 127.929C221.693 128.004 208.639 127.754 196 127.94V35.7646Z"
-          className="fill-[#273441] dark:fill-[#A8B2BA]"
+          className="fill-[var(--exxat-color-wordmark-ink-light)] dark:fill-[var(--exxat-color-wordmark-ink-dark)]"
         />
         <path
           d="M311.843 57.1062C314.843 57.097 327.108 56.8601 329.377 57.2135L329.606 57.8503C329.333 60.3776 324.215 67.3436 322.511 69.9223C317.651 77.1875 312.847 84.4905 308.101 91.8305C309.118 93.8473 311.981 98.1472 313.27 100.2L323.962 117.113C325.904 120.182 329.179 124.459 329.551 127.99C323.658 127.748 316.574 127.94 310.593 127.946C307.782 122.799 304.084 117.694 301.099 112.597C299.196 109.347 296.932 105.769 294.706 102.746C293.772 104.889 290.7 109.57 289.357 111.724C285.993 117.165 282.58 122.576 279.12 127.956C276.595 127.908 261.817 128.243 260.671 127.615C260.249 126.007 261.797 123.527 262.702 122.205C269.332 112.519 275.107 101.261 281.979 91.8322C281.555 91.3258 281.153 90.8019 280.774 90.2617C279.987 89.1263 279.24 87.9296 278.486 86.7642C272.548 77.5965 266.263 68.6263 260.479 59.3668C260.192 58.9075 260.442 57.6507 260.539 57.1068C266.332 57.0478 272.125 57.0656 277.917 57.1596C283.454 64.9372 289.73 74.44 294.84 82.5018C296.784 80.011 299.246 76.0686 301.022 73.3917L311.843 57.1062Z"
-          className="fill-[#273441] dark:fill-[#A8B2BA]"
+          className="fill-[var(--exxat-color-wordmark-ink-light)] dark:fill-[var(--exxat-color-wordmark-ink-dark)]"
         />
         <path
           d="M331.798 57.0712C337.592 57.1185 343.354 57.0072 349.156 57.1749C351.068 59.3357 353.387 63.1655 355.063 65.6344C358.847 71.2087 362.432 77.014 366.36 82.4907C370.845 75.0665 378.273 64.1367 383.331 57.1032C385.626 57.0945 399.689 56.8398 400.866 57.3117C401.39 58.6028 399.759 61.1078 399.008 62.1658C392.221 71.7261 386.21 82.4699 379.267 91.8592C383.35 97.6717 387.268 104.526 391.166 110.532C393.16 113.606 400.626 124.783 400.949 127.559C399.879 128.243 384.096 127.95 382.001 127.951C377.115 119.684 371.356 110.895 366.217 102.718C364.993 105.113 362.366 109.016 360.85 111.436C357.401 116.922 353.992 122.433 350.622 127.968C348.242 127.897 332.898 128.279 332.168 127.57C332.118 126.754 332.069 125.826 332.449 125.099C334.495 121.173 337.285 117.058 339.661 113.307L353.193 91.8005C352.418 90.7063 351.628 89.4998 350.898 88.362C344.705 78.7208 337.866 69.3865 332.081 59.5087C331.713 58.8803 331.753 57.7841 331.798 57.0712Z"
-          className="fill-[#273441] dark:fill-[#A8B2BA]"
+          className="fill-[var(--exxat-color-wordmark-ink-light)] dark:fill-[var(--exxat-color-wordmark-ink-dark)]"
         />
         <path
           d="M430.755 55.7344C443.603 55.2553 459.709 58.3988 463.175 73.143C464.166 77.3587 463.884 82.6952 463.877 87.0408L463.845 105.91C463.857 112.149 463.051 112.645 469.328 113.205C469.057 117.66 469.234 123.628 469.242 128.194C461.169 128.149 448.96 129.818 446.764 119.668C444.471 122.422 443.567 123.605 440.357 125.604C433.884 129.636 423.423 129.934 416.178 128.172C410.382 126.762 405.62 123.519 402.512 118.29C400.527 114.233 400.122 109.477 400.649 105.072C402.505 89.5606 418.762 87.5983 431.172 85.928C435.522 85.237 440.828 84.6483 444.472 82.0073C447.548 79.7708 447.168 76.525 444.97 73.7922C440.68 68.4582 429.516 68.0981 424.356 72.2079C421.359 74.5939 420.834 77.8667 420.5 81.4362C414.437 81.3803 408.373 81.3842 402.31 81.4478C402.503 79.5217 402.653 77.3957 403.031 75.5059C405.774 61.7822 418.095 56.4115 430.755 55.7344ZM420.852 112.903C428.033 116.948 440.992 113.872 444.937 106.311C445.852 104.557 447.932 97.6766 446.702 95.9674L446.344 95.9145C442.708 97.4881 435.913 98.8678 431.795 99.3372C425.343 100.072 411.452 104.687 420.852 112.903Z"
-          className="fill-[#273441] dark:fill-[#A8B2BA]"
+          className="fill-[var(--exxat-color-wordmark-ink-light)] dark:fill-[var(--exxat-color-wordmark-ink-dark)]"
         />
         <path
           d="M479.835 35.8541C485.68 35.8897 491.521 35.8895 497.366 35.853C497.152 42.4806 497.332 50.2661 497.324 56.9807L514.284 56.9509L514.292 72.0978C508.643 72.0524 502.993 72.036 497.341 72.0485L497.313 93.563C497.313 97.0693 496.581 108.123 499.41 110.474C502.231 112.82 510.459 112.62 514.295 112.135L514.279 123.529L514.292 127.437C511.116 127.895 507.911 128.146 504.704 128.188C479.71 128.491 479.891 117.266 479.916 96.9484C479.949 88.6621 479.938 80.3759 479.88 72.09C476.431 72.026 471.882 71.9331 468.516 72.1906C468.292 67.7063 468.488 61.552 468.523 56.9865C469.391 56.999 470.258 56.9979 471.126 56.9829C482.417 56.741 480.091 43.7789 479.835 35.8541Z"
-          className="fill-[#273441] dark:fill-[#A8B2BA]"
+          className="fill-[var(--exxat-color-wordmark-ink-light)] dark:fill-[var(--exxat-color-wordmark-ink-dark)]"
         />
       </g>
 

package/template/components/hub-tree-panel-view.tsx

@@ -120,7 +120,7 @@ function TreeItem({
           type="button"
           onClick={() => onSelectItem(folder.id)}
           className={cn(
-            "flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
+            "flex min-w-0 flex-1 items-center gap-2 py-1.5 pe-3 text-left text-sm transition-colors duration-75",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
             !isFolderSelected && "text-foreground",
           )}
@@ -135,7 +135,7 @@ function TreeItem({
           />
           <span className="truncate leading-tight">{folder.name}</span>
           {hasChildren && (
-            <span className="ml-auto shrink-0 text-xs tabular-nums text-muted-foreground">
+            <span className="ms-auto shrink-0 text-xs tabular-nums text-muted-foreground">
               {childFolders.length + childQuestions.length}
             </span>
           )}

package/template/components/invite-collaborators-drawer.tsx

@@ -320,7 +320,7 @@ export function InviteCollaboratorsDrawer({
                   <>
                     <i className="fa-light fa-user-plus" aria-hidden="true" />
                     Send invite
-                    <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
+                    <KbdGroup className="ms-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
                   </>
                 )}
               </Button>
@@ -435,7 +435,7 @@ export function InviteCollaboratorsDrawer({
           <DialogFooter className="gap-2 sm:gap-2">
             <Button type="button" variant="outline" onClick={() => setRemoveTarget(null)}>
               Cancel
-              <KbdGroup className="ml-1.5"><Kbd variant="bare">Esc</Kbd></KbdGroup>
+              <KbdGroup className="ms-1.5"><Kbd variant="bare">Esc</Kbd></KbdGroup>
             </Button>
             <Button
               type="button"
@@ -444,7 +444,7 @@ export function InviteCollaboratorsDrawer({
               disabled={!removeTarget || !canRemoveCollaboratorFromRoster(removeTarget, collaborators)}
             >
               Remove
-              <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
+              <KbdGroup className="ms-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
             </Button>
           </DialogFooter>
         </DialogContent>

package/template/components/key-metrics-ask-leo-bridge.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+/**
+ * KeyMetricsAskLeoBridge — adapter that connects the design-system
+ * `KeyMetrics` injection points (`KeyMetricsProvider`) to this app's
+ * Ask Leo runtime (`useAskLeo` + `AskLeoShortcutKbds`).
+ *
+ * Lives in `apps/web` because the bridge is app-specific: it ties
+ * the design-system primitive to a concrete assistant + keyboard
+ * shortcut. Other consumers of `@exxatdesignux/ui` can ship a
+ * different bridge (Copilot, ChatGPT, no-AI) without touching the
+ * package itself.
+ *
+ * Mount this just inside `<AskLeoProvider>` in `(app)/layout.tsx` so
+ * every `<KeyMetrics />` descendant transparently picks up the
+ * "Ask Leo about these metrics" CTA and the `⌘⌥K` tooltip chord.
+ */
+
+import * as React from "react"
+
+import { AskLeoShortcutKbds, useAskLeo } from "@/components/ask-leo-sidebar"
+import { KeyMetricsProvider } from "@exxatdesignux/ui/components/key-metrics"
+
+export function KeyMetricsAskLeoBridge({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const { toggle } = useAskLeo()
+  const shortcutHint = React.useMemo(() => <AskLeoShortcutKbds />, [])
+  const value = React.useMemo(
+    () => ({
+      defaultInsightAction: toggle,
+      shortcutHint,
+      defaultActionLabel: "Ask Leo",
+    }),
+    [toggle, shortcutHint],
+  )
+  return <KeyMetricsProvider value={value}>{children}</KeyMetricsProvider>
+}