canopy-ui 0.2.0 → 0.4.0

package/src/ui/dropdown-menu.tsx

@@ -0,0 +1,226 @@
+import * as React from "react"
+import { Menu } from "@base-ui/react/menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../lib/cn"
+
+const DropdownMenu = Menu.Root
+
+const DropdownMenuGroup = Menu.Group
+
+function DropdownMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menu.Trigger>) {
+  return (
+    <Menu.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={cn("outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof Menu.Popup> & { sideOffset?: number; align?: string }) {
+  return (
+    <Menu.Portal>
+      <Menu.Positioner sideOffset={sideOffset}>
+        <Menu.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+            className
+          )}
+          {...props}
+        />
+      </Menu.Positioner>
+    </Menu.Portal>
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof Menu.Item> & { inset?: boolean }) {
+  return (
+    <Menu.Item
+      data-slot="dropdown-menu-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors select-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof Menu.CheckboxItem>) {
+  return (
+    <Menu.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors select-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Menu.CheckboxItemIndicator>
+          <Check className="h-4 w-4" />
+        </Menu.CheckboxItemIndicator>
+      </span>
+      {children}
+    </Menu.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup(props: React.ComponentProps<typeof Menu.RadioGroup>) {
+  return <Menu.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menu.RadioItem>) {
+  return (
+    <Menu.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors select-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Menu.RadioItemIndicator>
+          <Circle className="h-2 w-2 fill-current" />
+        </Menu.RadioItemIndicator>
+      </span>
+      {children}
+    </Menu.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }) {
+  return (
+    <div
+      data-slot="dropdown-menu-label"
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menu.Separator>) {
+  return (
+    <Menu.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+
+// Sub-menu support
+function DropdownMenuSub(props: React.ComponentProps<typeof Menu.Root>) {
+  return <Menu.Root {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof Menu.SubmenuTrigger> & { inset?: boolean }) {
+  return (
+    <Menu.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[highlighted]:bg-accent data-[open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ml-auto" />
+    </Menu.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof Menu.Popup>) {
+  return (
+    <Menu.Portal>
+      <Menu.Positioner>
+        <Menu.Popup
+          data-slot="dropdown-menu-sub-content"
+          className={cn(
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg transition-all data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+            className
+          )}
+          {...props}
+        />
+      </Menu.Positioner>
+    </Menu.Portal>
+  )
+}
+
+const DropdownMenuPortal = Menu.Portal
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/ui/index.ts

@@ -14,3 +14,35 @@ export {
   TableCaption,
 } from './table'
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from './tabs'
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './dialog'
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './dropdown-menu'
+export { Tooltip, TooltipProvider } from './tooltip'
+export { Toaster } from './sonner'
+export { AutoResizeTextarea } from './AutoResizeTextarea'

package/src/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { Toaster as SonnerToaster } from "sonner"
+
+import { cn } from "../lib/cn"
+
+type ToasterProps = React.ComponentProps<typeof SonnerToaster>
+
+export function Toaster({ className, ...props }: ToasterProps) {
+  return (
+    <SonnerToaster
+      className={cn(className)}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast bg-card text-card-foreground border-border shadow-lg",
+          description: "text-muted-foreground",
+          actionButton: "bg-primary text-primary-foreground",
+          cancelButton: "bg-muted text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}

package/src/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "../lib/cn";
+
+/**
+ * Thin wrapper around @base-ui/react's Tooltip primitive that matches
+ * the rest of the shadcn-ish ui/ collection. Use <Tooltip> for any
+ * icon-only button so sighted users get hover feedback that mirrors
+ * the aria-label exposed to AT.
+ *
+ * Usage:
+ *   <Tooltip label="Delete this opp">
+ *     <button aria-label="Delete foo">...</button>
+ *   </Tooltip>
+ *
+ * The child is rendered via base-ui's `render` prop so the existing
+ * button element (with its aria-label, classes, handlers) is preserved.
+ */
+const TooltipProvider = TooltipPrimitive.Provider;
+
+interface TooltipProps {
+  /** Tooltip text. Should mirror the trigger's aria-label. */
+  label: React.ReactNode;
+  /** The interactive element to attach the tooltip to. */
+  children: React.ReactElement;
+  /** Open delay in ms. */
+  delay?: number;
+  /** Side of the trigger to place the popup. */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Offset (px) from the trigger. */
+  sideOffset?: number;
+}
+
+function Tooltip({ label, children, delay = 300, side = "top", sideOffset = 6 }: TooltipProps) {
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger delay={delay} render={children} />
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset}>
+          <TooltipPrimitive.Popup
+            className={cn(
+              "z-50 max-w-xs rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",
+              "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 transition-opacity",
+            )}
+          >
+            {label}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+}
+
+export { Tooltip, TooltipProvider };