@hoardodile/ui 0.0.0

package/LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2026 Wooloo <ayan0312000@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @hoardodile/ui
+
+The design-system component library for hoardodile — the host app and
+plugin iframes alike. Import components per-path so bundles stay small;
+hooks live under `@hoardodile/ui/hooks/*` and shared CSS variables in
+`@hoardodile/ui/theme.css`.
+
+## Install
+
+```bash
+pnpm add @hoardodile/ui
+```
+
+### CSS toolchain
+
+The theme stylesheet (`@hoardodile/ui/theme.css`) is Tailwind v4 CSS with
+`@import` statements left for your build to resolve. Consuming it requires
+the Tailwind toolchain in your own project:
+
+```bash
+pnpm add -D tailwindcss tw-animate-css shadcn
+```
+
+`tailwindcss` (plus your Tailwind plugin, e.g. `@tailwindcss/vite`),
+`tw-animate-css` and `shadcn` are declared as optional peer dependencies so
+package managers surface them; install them alongside `@hoardodile/ui` and
+import the theme from your entry stylesheet:
+
+```css
+@import "@hoardodile/ui/theme.css";
+```
+
+The theme stylesheet carries a `@source` glob that points at the package's
+compiled component outputs, so your Tailwind picks up the component classes
+automatically — no `@source` configuration on your side. (This contract is
+enforced by the `scan-contract` test in the package.)
+
+## Import paths
+
+| Entry | Contents |
+| ----- | -------- |
+| `@hoardodile/ui/components/*` | Components, one module each (`button`, `dialog`, `dropdown-menu`, `popover`, `app-dialog`, `dropdown-select`, `icon`, `surface`, `form`, …) |
+| `@hoardodile/ui/icons/*` | The icon domain: `registry` (every Solar glyph, wrapped), `marks` (✓/×/+), `actions` (action-to-glyph vocabulary), `icon-style` |
+| `@hoardodile/ui/hooks/*` | Hooks (`use-mobile`, `useMobileBackToClose`, `use-form-field`, `use-dialog-footer-actions`, …) |
+| `@hoardodile/ui/lib/*` | Utilities (`cn`, …) |
+| `@hoardodile/ui/theme.css` | Theme CSS: `.light` / `.dark` variables and per-palette `.theme-<id>` blocks |
+| `@hoardodile/ui/viewport` | Shared mobile viewport constants (`MOBILE_BREAKPOINT_PX`, `MOBILE_QUERY`, …) |
+| `@hoardodile/ui` | App-owned root pieces: `AppDialog`, `cn`, navigation resolver |
+
+## Example
+
+```tsx
+import { Button } from "@hoardodile/ui/components/button"
+import { AppDialog } from "@hoardodile/ui"
+
+export function Picker({ open, onClose }) {
+	return (
+		<AppDialog open={open} onOpenChange={onClose} title="Pick">
+			<Button onClick={onClose}>Done</Button>
+		</AppDialog>
+	)
+}
+```
+
+## Theming
+
+`@hoardodile/ui/theme.css` defines the design tokens both the host app
+and plugin iframes consume. The plugin iframe applies the host theme via
+`applyTheme` from `@hoardodile/sdk-web` — palette classes like
+`theme-parchment` are defined here.

package/dist/components/alert.d.ts

@@ -0,0 +1,13 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/alert.js

@@ -0,0 +1,97 @@
+import 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/alert.tsx
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var 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
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "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
+}) {
+  return /* @__PURE__ */ jsx(
+    "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 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("absolute top-2.5 right-3", className),
+      ...props
+    }
+  );
+}
+
+export { Alert, AlertAction, AlertDescription, AlertTitle };
+//# sourceMappingURL=alert.js.map
+//# sourceMappingURL=alert.js.map

package/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/alert.tsx"],"names":[],"mappings":";;;;;;;AAQO,IAAM,UAAA,GAAa;AAAA,EACzB,MAAM,CAAC,MAAA,EAAQ,MAAM,KAAA,EAAO,WAAA,EAAa,eAAe,OAAO,CAAA;AAAA,EAC/D,SAAS,CAAC,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,EACtD,QAAA,EAAU,CAAC,OAAO,CAAA;AAAA,EAClB,MAAA,EAAQ,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,EACzB,SAAA,EAAW,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,EAC1C,IAAA,EAAM,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,EACvB,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,OAAA,EAAS,CAAC,MAAA,EAAQ,KAAK;AACxB,CAAA;AAEO,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAC1C,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA;AAClB,CAAC,CAAA;;;AClBM,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACAA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,2TAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,8BAAA;AAAA,QACT,WAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEA,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqE;AACnE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACL,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qHAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgC;AAC9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,4JAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,0BAAA,EAA4B,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"alert.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@hoardodile/ui/lib/utils\"\n\nconst alertVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"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\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n"]}

package/dist/components/app-dialog.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+export { useDialogFooterActions } from '../hooks/use-dialog-footer-actions.js';
+
+/** 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. */
+type AppDialogSize = "sm" | "md" | "lg" | "xl" | "2xl";
+
+/**
+ * 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.
+ */
+declare function DialogFooterActions({ children }: {
+    children: ReactNode;
+}): null;
+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.
+ */
+declare function AppDialog(props: AppDialogProps): React.JSX.Element;
+
+export { AppDialog, type AppDialogProps, type AppDialogSize, DialogFooterActions };