canopy-ui 0.2.0 → 0.3.0

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "canopy-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jjackson/canopy-web.git",
+    "directory": "frontend/packages/canopy-ui"
+  },
   "exports": {
     ".": "./src/index.ts",
     "./lib": "./src/lib/index.ts",
@@ -19,9 +24,22 @@
     "@base-ui/react": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0"
   },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "sonner": "^2.0.7"
+  },
   "files": ["src"]
 }

package/src/ui/AutoResizeTextarea.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+/**
+ * Textarea that auto-sizes to fit its content ONCE — when the content first
+ * loads — then behaves as a normal drag-resizable textarea.
+ *
+ * So the editor opens with every box sized to show all its text (no internal
+ * scrollbars), and after that the user owns each box's size by dragging the
+ * `resize-y` handle. Typing after the initial fit does NOT re-grow/shrink the
+ * box (it scrolls like a normal textarea) — per the desired behavior:
+ * auto-size on open, manual thereafter.
+ *
+ * The fit runs once, keyed on the arrival of content (the value is empty on the
+ * first paint while the template loads, then populated). It re-fits on remount,
+ * so keying the editor by template id sizes a freshly-opened template's boxes.
+ * Tailwind sets `box-sizing: border-box`, so `scrollHeight` includes padding.
+ */
+export const AutoResizeTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentPropsWithoutRef<"textarea">
+>(({ className, rows = 2, ...props }, forwardedRef) => {
+  const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const fitted = React.useRef(false);
+
+  // Merge forwardedRef + innerRef so callers can still access the element.
+  const ref = React.useCallback(
+    (el: HTMLTextAreaElement | null) => {
+      innerRef.current = el;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(el);
+      } else if (forwardedRef) {
+        (forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = el;
+      }
+    },
+    [forwardedRef],
+  );
+
+  // Fit exactly once, when content first arrives. `height: auto` collapses the
+  // box so scrollHeight reflects content, then we pin that height. After this
+  // the box is purely manual (resize-y); we never auto-resize again.
+  React.useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el || fitted.current) return;
+    if (!el.value) return; // wait until the loaded content populates the value
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+    fitted.current = true;
+  }, [props.value]);
+
+  return (
+    <textarea
+      ref={ref}
+      rows={rows}
+      className={cn("resize-y", className?.replace(/\bresize-none\b/g, ""))}
+      {...props}
+    />
+  );
+});
+
+AutoResizeTextarea.displayName = "AutoResizeTextarea";

package/src/ui/dialog.tsx

@@ -0,0 +1,131 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { X } from "lucide-react"
+
+import { cn } from "../lib/cn"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogPortal = ({ children }: { children: React.ReactNode }) => (
+  <DialogPrimitive.Portal>{children}</DialogPrimitive.Portal>
+)
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80 transition-all data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Popup>) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 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}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  )
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        "flex flex-col gap-1.5 text-center sm:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

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 };