@exxatdesignux/ui 0.2.18 → 0.3.0

package/src/components/ui/accordion.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+/**
+ * Accordion — Radix-backed expandable section list.
+ *
+ * Use for **collapsible groups of secondary content** that would otherwise
+ * make the page too long (FAQ, settings categories, glossary, audit
+ * timeline grouped by day). Each `AccordionItem` toggles independently
+ * when `type="multiple"`, or as a single-open group when `type="single"`.
+ *
+ * When to choose `Accordion` vs `Collapsible` vs `Tabs`:
+ *  - **`Accordion`** — multiple siblings, each independently expandable,
+ *    visible chevron + label that wraps cleanly.
+ *  - **`Collapsible`** — a single show / hide region with no sibling
+ *    grouping (used inside lists, inspector panels).
+ *  - **`Tabs`** — only one panel visible at a time, vertical or
+ *    horizontal nav, fixed set of named sections.
+ *
+ * Accessibility:
+ *  - Each `AccordionTrigger` renders as a `<button>` inside an `<h3>` so
+ *    screen readers expose the headings + expanded state (WCAG 1.3.1).
+ *  - Arrow-up / Arrow-down navigate between triggers; Home / End jump to
+ *    the first / last.
+ */
+
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-sm font-medium text-foreground outline-none transition-all hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>i.accordion-chevron]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown
+          className="accordion-chevron pointer-events-none mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+          aria-hidden="true"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm text-muted-foreground"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+/**
+ * AlertDialog — blocking confirm dialog backed by Radix `AlertDialog`.
+ *
+ * Use for **short, blocking** confirms where the user MUST acknowledge before
+ * the surface behind can be interacted with again — destructive deletes,
+ * irreversible status changes, legal acknowledgements, etc. (See
+ * `.cursor/rules/exxat-drawer-vs-dialog.mdc` for the drawer-vs-dialog rule.)
+ *
+ * Differences from the regular `Dialog` primitive:
+ *  - Radix sets `role="alertdialog"` automatically — screen readers
+ *    announce the title + description immediately.
+ *  - Cannot be dismissed by overlay click or `Esc` (only the explicit
+ *    `AlertDialogCancel` / `AlertDialogAction` buttons close it).
+ *  - Ships an `Action` (primary destructive / commit) + `Cancel`
+ *    (secondary dismiss) pair that map to `Button` variants without
+ *    additional wiring.
+ *
+ * Accessibility:
+ *  - WCAG 4.1.2 — `AlertDialogTitle` is REQUIRED. Hide it visually with
+ *    `sr-only` if the design omits the heading, but never omit the element.
+ *  - WCAG 2.1.2 — focus is trapped inside the dialog while open (Radix).
+ *  - WCAG 3.3.4 — pair destructive actions with explicit, named verbs
+ *    ("Delete site" rather than "OK").
+ */
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { Button, buttonVariants } from "./button"
+import { cn } from "../../lib/utils"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/15 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  overlayClassName,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  /** Merged onto `AlertDialogOverlay` (e.g. `bg-transparent` for an undimmed backdrop). */
+  overlayClassName?: string
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay className={overlayClassName ?? undefined} />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md 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",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Primary commit button. Defaults to `Button` `default` variant; pass
+ * `variant="destructive"` when the action is irreversible (delete, archive
+ * with cascade, etc.).
+ *
+ * Radix marks this as the **submit** button — pressing `Enter` while the
+ * dialog has focus invokes it.
+ */
+function AlertDialogAction({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  React.ComponentProps<typeof Button>) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button
+        data-slot="alert-dialog-action"
+        variant={variant}
+        className={className}
+        {...props}
+      />
+    </AlertDialogPrimitive.Action>
+  )
+}
+
+/**
+ * Secondary dismiss button — closes the dialog without committing the
+ * action. Defaults to `Button` `outline` variant for a quieter visual
+ * weight next to `AlertDialogAction`.
+ */
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  React.ComponentProps<typeof Button>) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button
+        data-slot="alert-dialog-cancel"
+        variant={variant}
+        className={className}
+        {...props}
+      />
+    </AlertDialogPrimitive.Cancel>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  // Re-export the button class-variance helper so consumers building
+  // ad-hoc footers can match the alert-dialog action styling without
+  // importing the Button primitive separately.
+  buttonVariants,
+}

package/src/components/ui/avatar.tsx

@@ -150,12 +150,23 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
   )
 }
 
+/**
+ * A row of avatars with an overflow counter — **never overlapping**.
+ *
+ * Overlapping face piles (Slack / GitHub style) have known UX problems in
+ * dense product chrome: ring-on-background contrast is fragile in dark mode,
+ * click targets stack, and screen readers announce ambiguous groupings.
+ * `AvatarGroup` therefore renders children side-by-side with a small inline
+ * gap. See `.cursor/rules/exxat-person-identity-display.mdc` (MUST NOT —
+ * overlapping avatars) and the `PageHeader` collaboration variant which
+ * uses the same gapped row.
+ */
 function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="avatar-group"
       className={cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        "group/avatar-group flex items-center gap-1.5",
         className
       )}
       {...props}
@@ -171,7 +182,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       )}
       {...props}

package/src/components/ui/banner.tsx

@@ -166,7 +166,7 @@ export function SystemBanner({
         className="h-auto shrink-0 px-0 text-xs font-semibold underline underline-offset-2 hover:no-underline"
       >
         {action.label}
-        <i className="fa-light fa-arrow-right text-xs ml-0.5" aria-hidden="true" />
+        <i className="fa-light fa-arrow-right text-xs ms-0.5" aria-hidden="true" />
       </Button>
     )
   )
@@ -212,7 +212,7 @@ export function SystemBanner({
       {actionPosition === "inline" ? (
         <>
           <div className="relative z-[1] min-w-0 flex-1">
-            {title && <span className="font-semibold mr-1.5">{title}</span>}
+            {title && <span className="font-semibold me-1.5">{title}</span>}
             <span className="opacity-90">{children}</span>
           </div>
           {actionEl ? <span className="relative z-[1] inline-flex shrink-0">{actionEl}</span> : null}

package/src/components/ui/calendar.tsx

@@ -85,7 +85,7 @@ function Calendar({
           "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+            : "flex h-8 items-center gap-1 rounded-md pe-1 ps-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",

package/src/components/ui/coach-mark.tsx

@@ -285,7 +285,7 @@ export function CoachMark({
                 <button
                   type="button"
                   onClick={skip}
-                  className="shrink-0 -mt-0.5 -mr-1 flex h-6 w-6 items-center justify-center rounded-md text-white/60 hover:bg-white/15 hover:text-white transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!bg-foreground/10"
+                  className="shrink-0 -mt-0.5 -me-1 flex h-6 w-6 items-center justify-center rounded-md text-white/60 hover:bg-white/15 hover:text-white transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!bg-foreground/10"
                   aria-label="Dismiss"
                 >
                   <i className="fa-light fa-xmark text-xs" aria-hidden="true" />

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>