@hoardodile/ui 0.0.0

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@hoardodile/ui",
+  "version": "0.0.0",
+  "license": "MIT",
+  "description": "shadcn/ui component library for hoardodile plugin iframes.",
+  "keywords": [
+    "hoardodile",
+    "plugin",
+    "ui",
+    "shadcn",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hoardodile/hoardodile.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": {
+      "development": "./src/styles/theme.css",
+      "default": "./dist/styles/theme.css"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "development": "./src/lib/*",
+      "default": "./dist/lib/*.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "development": "./src/components/*",
+      "default": "./dist/components/*.js"
+    },
+    "./icons/*": {
+      "types": "./dist/icons/*.d.ts",
+      "development": "./src/icons/*",
+      "default": "./dist/icons/*.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "development": "./src/hooks/*",
+      "default": "./dist/hooks/*.js"
+    },
+    "./viewport": {
+      "types": "./dist/viewport.d.ts",
+      "development": "./src/viewport.ts",
+      "default": "./dist/viewport.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@solar-icons/react": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react-hook-form": "^7.86.0",
+    "react-image-crop": "^11.1.2",
+    "react-use": "^17.6.1",
+    "tailwind-merge": "^3.6.0",
+    "@hoardodile/i18n": "0.0.0"
+  },
+  "peerDependencies": {
+    "i18next": "^26.4.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-i18next": "^17.0.12",
+    "shadcn": "^4.16.1",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependenciesMeta": {
+    "shadcn": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "tw-animate-css": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tailwindcss/node": "^4.3.3",
+    "@tailwindcss/oxide": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "shadcn": "^4.19.0",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.5.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/components/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/components/app-dialog.tsx

@@ -0,0 +1,187 @@
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "./dialog"
+import {
+	DialogFooterActionsContext,
+	useDialogFooterActions,
+} from "@hoardodile/ui/hooks/use-dialog-footer-actions"
+import { cn } from "@hoardodile/ui/lib/utils"
+import {
+	type ReactNode,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react"
+
+/** Dialog width tiers: the 320–480 narrow slot plus
+    the wide working tiers — edit hubs, pickers and selectors get
+    real estate; confirmations never leave the narrow slot. */
+export type AppDialogSize = "sm" | "md" | "lg" | "xl" | "2xl"
+
+const sizeClasses: Record<AppDialogSize, string> = {
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-2xl",
+	xl: "sm:max-w-3xl",
+	"2xl": "sm:max-w-4xl",
+}
+
+export { useDialogFooterActions }
+
+/**
+ * Declarative footer action: renders nothing in the body and contributes
+ * the node to the surrounding dialog's footer (appended after the
+ * dialog's own `footer` prop). Panels embed their primary action this way
+ * so action buttons live in the footer, never in the body. Outside a
+ * dialog (sheets, pickers) it renders nothing — callers keep their inline
+ * action bar as the fallback.
+ */
+export function DialogFooterActions({ children }: { children: ReactNode }) {
+	const slot = useDialogFooterActions()
+	useEffect(() => {
+		if (slot === null) return
+		slot.setFooterActions(children)
+		return () => slot.setFooterActions(null)
+	}, [slot, children])
+	return null
+}
+
+export type AppDialogProps = Readonly<{
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	title: ReactNode
+	/** Uppercase section marker above the title (feature dialogs). */
+	eyebrow?: ReactNode
+	/** Leading icon tile in the title row (feature dialogs). */
+	icon?: ReactNode
+	/** Danger register — the title ink takes the destructive hue; the
+	    danger itself stays in copy and the confirm button. */
+	danger?: boolean
+	/** Width tier; defaults to `md` (the narrow form slot). */
+	size?: AppDialogSize
+	/**
+	 * Drops the body padding for workspace bodies that own their layout
+	 * edge to edge (the two-pane editors); the header keeps its padding
+	 * and the footer becomes a plain bottom bar.
+	 */
+	flush?: boolean
+	description?: ReactNode
+	children: ReactNode
+	/** Leading footer actions; body panels may append theirs via
+	    {@link DialogFooterActions}. */
+	footer?: ReactNode
+	contentClassName?: string
+	/** Passed to dialog overlay (e.g. disable backdrop blur over WebGL). */
+	overlayClassName?: string
+	/** Fade-only motion — lighter than default slide/zoom when over heavy surfaces. */
+	contentMotion?: "default" | "minimal"
+	/** Defaults to true. Set to false to honour native auto-focus (rare). */
+	suppressAutoFocus?: boolean
+	contentTestId?: string
+}>
+
+/**
+ * Standard dialog shell. Wires up `Dialog`/`DialogContent`/`DialogHeader`/
+ * `DialogTitle` and an optional eyebrow, icon, description and footer so
+ * callers stop re-stating the boilerplate. Use {@link ConfirmDialog} for
+ * the common "cancel + primary action" pattern.
+ */
+export function AppDialog(props: AppDialogProps) {
+	const {
+		open,
+		onOpenChange,
+		title,
+		eyebrow,
+		icon,
+		danger,
+		size,
+		flush,
+		description,
+		children,
+		footer,
+		contentClassName,
+		overlayClassName,
+		contentMotion,
+		suppressAutoFocus = true,
+		contentTestId,
+	} = props
+	// Focusing the first focusable element on open would steal the caret
+	// from the page underneath, jump scroll position, and on iOS
+	// occasionally pop the soft keyboard before the user even reaches an
+	// input. Routing focus to the dialog container itself keeps the
+	// dialog accessible without those side effects.
+	const contentRef = useRef<HTMLDivElement | null>(null)
+
+	// Footer actions contributed by body panels (DialogFooterActions):
+	// appended after the dialog's own footer, reset when the dialog closes.
+	const [footerActions, setFooterActions] = useState<ReactNode>(null)
+	const actionsValue = useMemo(
+		() => ({ setFooterActions }),
+		[setFooterActions],
+	)
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent
+				ref={contentRef}
+				className={cn(
+					size !== undefined && sizeClasses[size],
+					flush && "p-0",
+					contentClassName,
+				)}
+				overlayClassName={overlayClassName}
+				contentMotion={contentMotion}
+				initialFocus={suppressAutoFocus ? contentRef : undefined}
+				data-testid={contentTestId}
+			>
+				<DialogHeader className={flush ? "gap-4" : undefined}>
+					{eyebrow !== undefined ? (
+						<span
+							className={cn(
+								"text-tiny font-semibold tracking-label uppercase",
+								danger ? "text-destructive" : "text-muted-foreground",
+							)}
+						>
+							{eyebrow}
+						</span>
+					) : null}
+					<div className="flex min-w-0 items-center gap-3 pr-6">
+						{icon}
+						<DialogTitle
+							className={cn("truncate", danger && "text-destructive")}
+						>
+							{title}
+						</DialogTitle>
+					</div>
+					{description !== undefined ? (
+						<DialogDescription>{description}</DialogDescription>
+					) : null}
+				</DialogHeader>
+				{/* The header, body and footer must stay direct children of
+				    DialogContent — its arrangement logic recognises them by
+				    type, and a wrapper in between would re-wrap the body in a
+				    second DialogBody. The footer-actions context therefore
+				    wraps only the body's own content. */}
+				<DialogBody className={flush ? "p-0" : undefined}>
+					<DialogFooterActionsContext.Provider value={actionsValue}>
+						{children}
+					</DialogFooterActionsContext.Provider>
+				</DialogBody>
+				{(footer !== undefined && footer !== null) ||
+				footerActions !== null ? (
+					<DialogFooter flush={flush}>
+						{footer}
+						{footerActions}
+					</DialogFooter>
+				) : null}
+			</DialogContent>
+		</Dialog>
+	)
+}

package/src/components/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/components/breadcrumb.tsx

@@ -0,0 +1,129 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { useTranslation } from "react-i18next"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+import { AltArrowRight } from "@hoardodile/ui/icons/registry"
+import { MenuDots } from "@hoardodile/ui/icons/registry"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <nav
+      aria-label={t("aria.breadcrumb")}
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <AltArrowRight />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  const { t } = useTranslation("ui", { useSuspense: false })
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MenuDots
+      />
+      <span className="sr-only">{t("aria.more")}</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/button.tsx

@@ -0,0 +1,70 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg text-ui font-medium whitespace-nowrap outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary px-4! text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        danger:
+          "bg-[color-mix(in_oklab,var(--destructive),black_12%)] text-white hover:bg-[color-mix(in_oklab,var(--destructive),black_4%)] focus-visible:border-destructive/40 focus-visible:ring-destructive/20 disabled:bg-destructive/10 disabled:text-muted-foreground dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-control gap-2 px-3 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-2 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-chip gap-2 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-2 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-9",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  active,
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props &
+  VariantProps<typeof buttonVariants> & {
+    /** Latched toggle state: accent fill, hover pinned so an active
+        button never shifts. Callers keep choosing the matching aria
+        attribute (`aria-pressed` / `aria-expanded`). */
+    active?: boolean
+  }) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(
+        buttonVariants({ variant, size, className }),
+        active && "bg-accent text-accent-foreground hover:bg-accent"
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }