@twoux/ui 0.0.0-stage → 0.1.0

package/src/components/dense-table.tsx

@@ -0,0 +1,207 @@
+/**
+ * TwoUX compositions for the dense Table (size="dense", 28px rows) used for spreadsheet-like data: inventories,
+ * ledgers, imports and mapping. Built on the generated shadcn Table, Button, Input, DropdownMenu and Tooltip.
+ * TableGroupRow: a full-width section row with its label, an optional info tooltip and count, optionally collapsible.
+ * TableRowNumber: the row number with a ⋮ menu of row actions, named "Actions for <row>".
+ * TableFilterRow: one compact search field under each filterable header, named "Filter <column>".
+ * TableCellAction: an in-cell button revealed on row hover and keyboard focus, always shown on touch. Its action is
+ *   always in the row menu too, so it is never the only way.
+ * TableNotApplicable and TableLinkedItems: "n/a" read as "not applicable", and two items joined by an arrow.
+ */
+import { ArrowRight, ChevronRight, EllipsisVertical, Info, Search } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu"
+import { TableCell, TableRow } from "./table"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
+
+/* ---------------------------------------------------------------- group row */
+
+/**
+ * Put each group in its own TableBody with this row first. With onExpandedChange the label becomes a button with
+ * aria-expanded; leave the group's rows out while it is collapsed.
+ */
+export function TableGroupRow({
+  label,
+  info,
+  count,
+  colSpan,
+  expanded,
+  onExpandedChange,
+  controls,
+  children,
+  className,
+}: {
+  label: string
+  /** What belongs in the group, in a tooltip on the info button. */
+  info?: React.ReactNode
+  count?: number
+  /** The number of columns in the table. */
+  colSpan: number
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  /** id of the TableBody the row opens and closes. */
+  controls?: string
+  /** Extra content on the right of the row, such as a group total. */
+  children?: React.ReactNode
+  className?: string
+}) {
+  const collapsible = !!onExpandedChange
+  const open = expanded ?? true
+  const name = (
+    <>
+      {collapsible && <ChevronRight aria-hidden="true" className={cn("size-3.5 shrink-0 text-ink-3 transition-transform duration-(--duration-fast) ease-(--ease-out)", open && "rotate-90")} />}
+      <span className="truncate font-medium text-ink">{label}</span>
+      {count !== undefined && <span className="tabular shrink-0 text-sm font-normal text-ink-3">{count.toLocaleString("en-GB")}<span className="sr-only"> rows</span></span>}
+    </>
+  )
+  return (
+    <TableRow data-slot="table-group-row" className={cn("bg-surface-2 hover:bg-surface-2", className)}>
+      <th scope="rowgroup" colSpan={colSpan} className="h-9 p-0 text-left align-middle text-base font-normal group-data-[size=dense]/table:h-7">
+        <div className="sticky left-0 flex w-fit max-w-full items-center gap-control px-3 group-data-[size=dense]/table:px-2">
+          {collapsible ? (
+            <button
+              type="button"
+              aria-expanded={open}
+              aria-controls={controls}
+              onClick={() => onExpandedChange?.(!open)}
+              className="-ml-1 flex min-w-0 items-center gap-control rounded-xs px-1 outline-none hover:bg-hover focus-visible:ring-2 focus-visible:ring-ring/50"
+            >
+              {name}
+            </button>
+          ) : name}
+          {info && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button type="button" aria-label={`About ${label}`} className="relative grid size-5 shrink-0 place-items-center rounded-xs text-ink-3 outline-none after:absolute after:-inset-0.5 hover:bg-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-ring/50">
+                  <Info className="size-3.5" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-64">{info}</TooltipContent>
+            </Tooltip>
+          )}
+          {children}
+        </div>
+      </th>
+    </TableRow>
+  )
+}
+
+/* ---------------------------------------------------------------- row number + row actions */
+
+/** The first cell of a row: its number, then ⋮ with the row's actions (DropdownMenuItem children). */
+export function TableRowNumber({
+  n,
+  label,
+  children,
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof TableCell>, "children"> & {
+  n: number
+  /** Names the row in the menu button: "Actions for <label>". */
+  label: string
+  /** The row's actions. Include every in-cell action here too. */
+  children: React.ReactNode
+}) {
+  return (
+    <TableCell data-slot="table-row-number" className={cn("w-16 pr-1 text-sm text-ink-3 group-data-[size=dense]/table:pr-0.5", className)} {...props}>
+      <span className="flex items-center justify-between gap-1">
+        <span className="tabular">{n.toLocaleString("en-GB")}</span>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon-xs" aria-label={`Actions for ${label}`} className="size-5 text-ink-3 hover:text-ink data-[state=open]:bg-hover data-[state=open]:text-ink">
+              <EllipsisVertical />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-52">{children}</DropdownMenuContent>
+        </DropdownMenu>
+      </span>
+    </TableCell>
+  )
+}
+
+/* ---------------------------------------------------------------- filter row */
+
+export type TableFilterColumn = { id: string; label: string; align?: "left" | "right" } | null
+
+/** Goes in TableHeader under the header row. Pass null for a column with no filter (selection, row number, actions). */
+export function TableFilterRow({
+  columns,
+  values,
+  onChange,
+  className,
+}: {
+  columns: TableFilterColumn[]
+  values: Record<string, string>
+  onChange: (columnId: string, value: string) => void
+  className?: string
+}) {
+  return (
+    <TableRow data-slot="table-filter-row" className={cn("bg-surface hover:bg-surface", className)}>
+      {columns.map((c, i) => (
+        <TableCell key={c?.id ?? `none-${i}`} className="px-1 group-data-[size=dense]/table:px-1">
+          {c && (
+            <span className="relative block">
+              <Search aria-hidden="true" className="pointer-events-none absolute top-1/2 left-1.5 size-3 -translate-y-1/2 text-ink-3" />
+              <input
+                type="search"
+                value={values[c.id] ?? ""}
+                onChange={(e) => onChange(c.id, e.target.value)}
+                onKeyDown={(e) => { if (e.key === "Escape" && values[c.id]) { e.preventDefault(); e.stopPropagation(); onChange(c.id, "") } }}
+                placeholder="Search"
+                aria-label={`Filter ${c.label}`}
+                className={cn(
+                  "h-7 w-full min-w-0 rounded-xs border border-input bg-background pr-2 pl-5.5 text-sm text-ink outline-none placeholder:text-ink-3 hover:border-input-hover focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 group-data-[size=dense]/table:h-5.5 [&::-webkit-search-cancel-button]:hidden",
+                  c.align === "right" && "text-right",
+                  values[c.id] && "border-primary"
+                )}
+              />
+            </span>
+          )}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+/* ---------------------------------------------------------------- in-cell action */
+
+/**
+ * A quiet button inside a cell, such as Open or Share, revealed while the row is hovered or has keyboard focus and
+ * always shown on touch screens. aria-label names the row ("Open Magnet preparation"). Put the same action in the
+ * row's ⋮ menu: an in-cell button is a shortcut, never the only way.
+ */
+export function TableCellAction({ className, ...props }: React.ComponentProps<typeof Button> & { "aria-label": string }) {
+  return (
+    <Button
+      data-slot="table-cell-action"
+      variant="outline"
+      size="xs"
+      className={cn(
+        "h-5 shrink-0 px-control opacity-0 transition-opacity duration-(--duration-fast) ease-(--ease-out) focus-visible:opacity-100 pointer-coarse:opacity-100 in-[tr:hover]:opacity-100 in-[tr:focus-within]:opacity-100 in-data-[focused=true]:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/* ---------------------------------------------------------------- small cell contents */
+
+/** "n/a" for a value that doesn't apply to this row, read as "not applicable". Not the same as empty (a dash). */
+export function TableNotApplicable({ className }: { className?: string }) {
+  return <span aria-label="not applicable" className={cn("text-sm text-ink-3", className)}>n/a</span>
+}
+
+/** Two linked items, such as a process and what it makes: "Magnet preparation → NdFeB magnet powder". */
+export function TableLinkedItems({ from, to, className }: { from: React.ReactNode; to: React.ReactNode; className?: string }) {
+  return (
+    <span className={cn("flex min-w-0 items-center gap-control", className)}>
+      <span className="min-w-0 truncate">{from}</span>
+      <ArrowRight className="size-3 shrink-0 text-ink-3" aria-hidden="true" />
+      <span className="sr-only">to</span>
+      <span className="min-w-0 truncate text-ink-2">{to}</span>
+    </span>
+  )
+}

package/src/components/dialog.tsx

@@ -0,0 +1,162 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "dialog" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes: shared changes only (imports, role tokens for light and dark, type scale).
+ */
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { Button } from "./button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-scrim data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-md border border-line bg-background p-5 shadow-pop duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-base text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,264 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "dropdown-menu" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Shortcut slot holds keys; no letter-spacing so Kbd groups read cleanly
+ *  - Icons stay smaller than the 13px label and muted
+ *  - Check and radio marks sit at the end of the item, so every label in a menu starts at the same edge
+ *  - Group headings are smaller and muted, so they read as headings, not as items people can choose
+ */
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-(--duration-fast) ease-(--ease-out) focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-base outline-hidden select-none transition-colors duration-(--duration-fast) ease-(--ease-out) focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-base outline-hidden select-none transition-colors duration-(--duration-fast) ease-(--ease-out) focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 pt-2 pb-1 text-sm font-medium text-ink-3 data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto flex items-center gap-0.5 text-sm text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-(--duration-fast) ease-(--ease-out) focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}