@dirstack/ui 1.0.0

package/dist/components/dialog.d.ts

@@ -0,0 +1,173 @@
+import { VariantProps } from "../lib/variants.js";
+import { Button } from "./button.js";
+import { SectionHeader } from "./section-header.js";
+import { ComponentProps, ReactNode } from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.d.ts
+declare const Dialog: typeof Dialog$1.Root;
+declare const DialogTrigger: Dialog$1.Trigger;
+declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const dialogContentVariants: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: "max-w-xs";
+    sm: "max-w-sm";
+    md: "max-w-md";
+    lg: "max-w-lg";
+    xl: "max-w-xl";
+    "2xl": "max-w-2xl";
+    "3xl": "max-w-3xl";
+    "4xl": "max-w-4xl";
+    "5xl": "max-w-5xl";
+  };
+  /**
+   * Pin the dialog near the top of the viewport instead of centering it, so its height can
+   * change without the whole thing jumping. A dialog stacked on top of another one
+   * (`[[role=dialog]~&]`) sits a little lower still, so both remain visible.
+   */
+  fixed: {
+    true: "top-[10vh] max-h-[calc(90vh-2rem)] [[role=dialog]~&]:top-[15vh] [[role=dialog]~&]:max-h-[calc(85vh-2rem)]";
+    false: "top-1/2 -translate-y-1/2 max-h-[calc(100vh-2rem)]";
+  };
+  /**
+   * Drop the dialog's own padding and gap so sections can run edge to edge and draw their
+   * own borders, e.g. a bordered header over a scrolling body over a bordered footer.
+   */
+  flush: {
+    true: "gap-0 p-0";
+    false: "gap-6 p-6";
+  };
+}, undefined, string[], {
+  size: {
+    xs: "max-w-xs";
+    sm: "max-w-sm";
+    md: "max-w-md";
+    lg: "max-w-lg";
+    xl: "max-w-xl";
+    "2xl": "max-w-2xl";
+    "3xl": "max-w-3xl";
+    "4xl": "max-w-4xl";
+    "5xl": "max-w-5xl";
+  };
+  /**
+   * Pin the dialog near the top of the viewport instead of centering it, so its height can
+   * change without the whole thing jumping. A dialog stacked on top of another one
+   * (`[[role=dialog]~&]`) sits a little lower still, so both remain visible.
+   */
+  fixed: {
+    true: "top-[10vh] max-h-[calc(90vh-2rem)] [[role=dialog]~&]:top-[15vh] [[role=dialog]~&]:max-h-[calc(85vh-2rem)]";
+    false: "top-1/2 -translate-y-1/2 max-h-[calc(100vh-2rem)]";
+  };
+  /**
+   * Drop the dialog's own padding and gap so sections can run edge to edge and draw their
+   * own borders, e.g. a bordered header over a scrolling body over a bordered footer.
+   */
+  flush: {
+    true: "gap-0 p-0";
+    false: "gap-6 p-6";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    xs: "max-w-xs";
+    sm: "max-w-sm";
+    md: "max-w-md";
+    lg: "max-w-lg";
+    xl: "max-w-xl";
+    "2xl": "max-w-2xl";
+    "3xl": "max-w-3xl";
+    "4xl": "max-w-4xl";
+    "5xl": "max-w-5xl";
+  };
+  /**
+   * Pin the dialog near the top of the viewport instead of centering it, so its height can
+   * change without the whole thing jumping. A dialog stacked on top of another one
+   * (`[[role=dialog]~&]`) sits a little lower still, so both remain visible.
+   */
+  fixed: {
+    true: "top-[10vh] max-h-[calc(90vh-2rem)] [[role=dialog]~&]:top-[15vh] [[role=dialog]~&]:max-h-[calc(85vh-2rem)]";
+    false: "top-1/2 -translate-y-1/2 max-h-[calc(100vh-2rem)]";
+  };
+  /**
+   * Drop the dialog's own padding and gap so sections can run edge to edge and draw their
+   * own borders, e.g. a bordered header over a scrolling body over a bordered footer.
+   */
+  flush: {
+    true: "gap-0 p-0";
+    false: "gap-6 p-6";
+  };
+}, undefined>>;
+type DialogContentProps = Omit<Dialog$1.Popup.Props, "className"> & VariantProps<typeof dialogContentVariants> & {
+  className?: string;
+  /**
+   * Hide the close button in the top right corner, for a dialog that must be dismissed
+   * through one of its own actions.
+   */
+  hideClose?: boolean;
+};
+declare function DialogContent({ className, children, size, fixed, flush, hideClose, ...props }: DialogContentProps): import("react").JSX.Element;
+declare const dialogHeaderVariants: import("tailwind-variants").TVReturnType<{
+  /**
+   * Give the header its own hairline and padding, for a `flush` dialog whose body scrolls
+   * under it. The extra right padding clears the dialog's close button.
+   */
+  bordered: {
+    true: "border-b px-6 py-5 pr-14";
+  };
+}, undefined, undefined, {
+  /**
+   * Give the header its own hairline and padding, for a `flush` dialog whose body scrolls
+   * under it. The extra right padding clears the dialog's close button.
+   */
+  bordered: {
+    true: "border-b px-6 py-5 pr-14";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  /**
+   * Give the header its own hairline and padding, for a `flush` dialog whose body scrolls
+   * under it. The extra right padding clears the dialog's close button.
+   */
+  bordered: {
+    true: "border-b px-6 py-5 pr-14";
+  };
+}, undefined>>;
+type DialogHeaderProps = Omit<ComponentProps<typeof SectionHeader>, "title" | "description"> & VariantProps<typeof dialogHeaderVariants> & {
+  title: ReactNode;
+  description?: ReactNode;
+};
+/**
+ * The standard dialog heading: a card-scale `SectionHeader` whose title and description are wired to
+ * Base UI's `DialogTitle` / `DialogDescription` for accessibility. Extra children render after
+ * them.
+ */
+declare function DialogHeader({ title, description, bordered, className, children, ...props }: DialogHeaderProps): import("react").JSX.Element;
+declare const dialogFooterVariants: import("tailwind-variants").TVReturnType<{
+  /**
+   * Give the footer its own hairline and padding, for a `flush` dialog where the body
+   * scrolls behind it.
+   */
+  bordered: {
+    true: "border-t px-6 py-4";
+  };
+}, undefined, "flex flex-col-reverse flex-wrap gap-x-2 gap-y-4 sm:flex-row sm:justify-end", {
+  /**
+   * Give the footer its own hairline and padding, for a `flush` dialog where the body
+   * scrolls behind it.
+   */
+  bordered: {
+    true: "border-t px-6 py-4";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  /**
+   * Give the footer its own hairline and padding, for a `flush` dialog where the body
+   * scrolls behind it.
+   */
+  bordered: {
+    true: "border-t px-6 py-4";
+  };
+}, undefined>>;
+type DialogFooterProps = ComponentProps<"div"> & VariantProps<typeof dialogFooterVariants>;
+declare function DialogFooter({ className, bordered, ...props }: DialogFooterProps): import("react").JSX.Element;
+declare function DialogClose({ ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/components/dialog.tsx"],"mappings":";;;;;;cAcM,eAAM,SAAA;cACN,eAAa,SAAA;cACb,6BAAW,0BAAA,8BAAA,gDAAA,cAAA;cACX,mCAAiB,0BAAA,8BAAA,sDAAA,cAAA;cAiBjB,mDAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDtB,qBAAqB,KAAK,SAAgB,MAAM,sBACnD,oBAAoB;EAClB;;;;;EAMA;;iBAGK,gBACP,WACA,UACA,MACA,OACA,OACA,cACG,SACF,qCAAkB,IAAA;cAsBf,kDAAoB;;;;;;;;;;;;;;;;;;;;;;;;;KAYrB,oBAAoB,KAAK,sBAAsB,2CAClD,oBAAoB;EAClB,OAAO;EACP,cAAc;;;;;;;iBAQT,eACP,OACA,aACA,UACA,WACA,aACG,SACF,oCAAiB,IAAA;cAgBd,kDAAoB;;;;;;;;;;;;;;;;;;;;;;;;;KAcrB,oBAAoB,wBAAwB,oBAAoB;iBAE5D,eAAe,WAAW,aAAa,SAAS,oCAAiB,IAAA;iBAIjE,iBAAiB,SAAS,sBAAsB,0BAAO,IAAA"}

package/dist/components/dialog.js

@@ -0,0 +1,139 @@
+"use client";
+import { cn, variants } from "../lib/variants.js";
+import { XIcon } from "../lib/icons.js";
+import { Button } from "./button.js";
+import { SectionHeader, SectionHeaderBody, SectionHeaderDescription, SectionHeaderTitle } from "./section-header.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.tsx
+const Dialog = Dialog$1.Root;
+const DialogTrigger = Dialog$1.Trigger;
+const DialogTitle = Dialog$1.Title;
+const DialogDescription = Dialog$1.Description;
+/** The dashed, blurred backdrop behind the dialog. Rendered by `DialogContent`. */
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		className: cn("fixed inset-0 z-50 bg-dashed backdrop-blur-xs", "data-open:animate-in data-closed:animate-out", "data-open:fade-in-0 data-closed:fade-out-0", className),
+		...props
+	});
+}
+const dialogContentVariants = variants({
+	base: [
+		"fixed left-1/2 z-50 grid w-[calc(100vw-2rem)] -translate-x-1/2 overflow-y-auto",
+		"border bg-card shadow-sm rounded-xl",
+		"data-open:animate-in data-closed:animate-out",
+		"data-open:fade-in-0 data-closed:fade-out-0",
+		"data-open:slide-in-from-bottom-4 data-closed:slide-out-to-bottom-4"
+	],
+	variants: {
+		size: {
+			xs: "max-w-xs",
+			sm: "max-w-sm",
+			md: "max-w-md",
+			lg: "max-w-lg",
+			xl: "max-w-xl",
+			"2xl": "max-w-2xl",
+			"3xl": "max-w-3xl",
+			"4xl": "max-w-4xl",
+			"5xl": "max-w-5xl"
+		},
+		/**
+		* Pin the dialog near the top of the viewport instead of centering it, so its height can
+		* change without the whole thing jumping. A dialog stacked on top of another one
+		* (`[[role=dialog]~&]`) sits a little lower still, so both remain visible.
+		*/
+		fixed: {
+			true: "top-[10vh] max-h-[calc(90vh-2rem)] [[role=dialog]~&]:top-[15vh] [[role=dialog]~&]:max-h-[calc(85vh-2rem)]",
+			false: "top-1/2 -translate-y-1/2 max-h-[calc(100vh-2rem)]"
+		},
+		/**
+		* Drop the dialog's own padding and gap so sections can run edge to edge and draw their
+		* own borders, e.g. a bordered header over a scrolling body over a bordered footer.
+		*/
+		flush: {
+			true: "gap-0 p-0",
+			false: "gap-6 p-6"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		fixed: true,
+		flush: false
+	}
+});
+function DialogContent({ className, children, size, fixed, flush, hideClose, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		className: dialogContentVariants({
+			size,
+			fixed,
+			flush,
+			className
+		}),
+		...props,
+		children: [children, !hideClose && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				"aria-label": "Close",
+				prefix: /* @__PURE__ */ jsx(XIcon, {})
+			}),
+			className: "absolute top-3 right-3"
+		})]
+	})] });
+}
+const dialogHeaderVariants = variants({ variants: { 
+/**
+* Give the header its own hairline and padding, for a `flush` dialog whose body scrolls
+* under it. The extra right padding clears the dialog's close button.
+*/
+bordered: { true: "border-b px-6 py-5 pr-14" } } });
+/**
+* The standard dialog heading: a card-scale `SectionHeader` whose title and description are wired to
+* Base UI's `DialogTitle` / `DialogDescription` for accessibility. Extra children render after
+* them.
+*/
+function DialogHeader({ title, description, bordered, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SectionHeader, {
+		size: "card",
+		className: dialogHeaderVariants({
+			bordered,
+			className
+		}),
+		...props,
+		children: [/* @__PURE__ */ jsxs(SectionHeaderBody, { children: [/* @__PURE__ */ jsx(DialogTitle, {
+			render: /* @__PURE__ */ jsx(SectionHeaderTitle, {}),
+			children: title
+		}), description && /* @__PURE__ */ jsx(DialogDescription, {
+			render: /* @__PURE__ */ jsx(SectionHeaderDescription, {}),
+			children: description
+		})] }), children]
+	});
+}
+const dialogFooterVariants = variants({
+	base: "flex flex-col-reverse flex-wrap gap-x-2 gap-y-4 sm:flex-row sm:justify-end",
+	variants: { 
+	/**
+	* Give the footer its own hairline and padding, for a `flush` dialog where the body
+	* scrolls behind it.
+	*/
+bordered: { true: "border-t px-6 py-4" } }
+});
+function DialogFooter({ className, bordered, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: dialogFooterVariants({
+			bordered,
+			className
+		}),
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "secondary",
+		...props
+	}) });
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\nimport type { ComponentProps, ReactNode } from \"react\"\nimport { Button } from \"~/components/button\"\nimport {\n  SectionHeader,\n  SectionHeaderBody,\n  SectionHeaderDescription,\n  SectionHeaderTitle,\n} from \"~/components/section-header\"\nimport { XIcon } from \"~/lib/icons\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\nconst DialogTitle = DialogPrimitive.Title\nconst DialogDescription = DialogPrimitive.Description\n\n/** The dashed, blurred backdrop behind the dialog. Rendered by `DialogContent`. */\nfunction DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-dashed backdrop-blur-xs\",\n        \"data-open:animate-in data-closed:animate-out\",\n        \"data-open:fade-in-0 data-closed:fade-out-0\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst dialogContentVariants = variants({\n  base: [\n    \"fixed left-1/2 z-50 grid w-[calc(100vw-2rem)] -translate-x-1/2 overflow-y-auto\",\n    \"border bg-card shadow-sm rounded-xl\",\n    \"data-open:animate-in data-closed:animate-out\",\n    \"data-open:fade-in-0 data-closed:fade-out-0\",\n    \"data-open:slide-in-from-bottom-4 data-closed:slide-out-to-bottom-4\",\n  ],\n\n  variants: {\n    size: {\n      xs: \"max-w-xs\",\n      sm: \"max-w-sm\",\n      md: \"max-w-md\",\n      lg: \"max-w-lg\",\n      xl: \"max-w-xl\",\n      \"2xl\": \"max-w-2xl\",\n      \"3xl\": \"max-w-3xl\",\n      \"4xl\": \"max-w-4xl\",\n      \"5xl\": \"max-w-5xl\",\n    },\n\n    /**\n     * Pin the dialog near the top of the viewport instead of centering it, so its height can\n     * change without the whole thing jumping. A dialog stacked on top of another one\n     * (`[[role=dialog]~&]`) sits a little lower still, so both remain visible.\n     */\n    fixed: {\n      true: \"top-[10vh] max-h-[calc(90vh-2rem)] [[role=dialog]~&]:top-[15vh] [[role=dialog]~&]:max-h-[calc(85vh-2rem)]\",\n      false: \"top-1/2 -translate-y-1/2 max-h-[calc(100vh-2rem)]\",\n    },\n\n    /**\n     * Drop the dialog's own padding and gap so sections can run edge to edge and draw their\n     * own borders, e.g. a bordered header over a scrolling body over a bordered footer.\n     */\n    flush: {\n      true: \"gap-0 p-0\",\n      false: \"gap-6 p-6\",\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    fixed: true,\n    flush: false,\n  },\n})\n\ntype DialogContentProps = Omit<DialogPrimitive.Popup.Props, \"className\"> &\n  VariantProps<typeof dialogContentVariants> & {\n    className?: string\n\n    /**\n     * Hide the close button in the top right corner, for a dialog that must be dismissed\n     * through one of its own actions.\n     */\n    hideClose?: boolean\n  }\n\nfunction DialogContent({\n  className,\n  children,\n  size,\n  fixed,\n  flush,\n  hideClose,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogOverlay />\n\n      <DialogPrimitive.Popup\n        className={dialogContentVariants({ size, fixed, flush, className })}\n        {...props}\n      >\n        {children}\n\n        {!hideClose && (\n          <DialogPrimitive.Close\n            render={<Button variant=\"ghost\" size=\"sm\" aria-label=\"Close\" prefix={<XIcon />} />}\n            className=\"absolute top-3 right-3\"\n          />\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPrimitive.Portal>\n  )\n}\n\nconst dialogHeaderVariants = variants({\n  variants: {\n    /**\n     * Give the header its own hairline and padding, for a `flush` dialog whose body scrolls\n     * under it. The extra right padding clears the dialog's close button.\n     */\n    bordered: {\n      true: \"border-b px-6 py-5 pr-14\",\n    },\n  },\n})\n\ntype DialogHeaderProps = Omit<ComponentProps<typeof SectionHeader>, \"title\" | \"description\"> &\n  VariantProps<typeof dialogHeaderVariants> & {\n    title: ReactNode\n    description?: ReactNode\n  }\n\n/**\n * The standard dialog heading: a card-scale `SectionHeader` whose title and description are wired to\n * Base UI's `DialogTitle` / `DialogDescription` for accessibility. Extra children render after\n * them.\n */\nfunction DialogHeader({\n  title,\n  description,\n  bordered,\n  className,\n  children,\n  ...props\n}: DialogHeaderProps) {\n  return (\n    <SectionHeader size=\"card\" className={dialogHeaderVariants({ bordered, className })} {...props}>\n      <SectionHeaderBody>\n        <DialogTitle render={<SectionHeaderTitle />}>{title}</DialogTitle>\n\n        {description && (\n          <DialogDescription render={<SectionHeaderDescription />}>{description}</DialogDescription>\n        )}\n      </SectionHeaderBody>\n\n      {children}\n    </SectionHeader>\n  )\n}\n\nconst dialogFooterVariants = variants({\n  base: \"flex flex-col-reverse flex-wrap gap-x-2 gap-y-4 sm:flex-row sm:justify-end\",\n\n  variants: {\n    /**\n     * Give the footer its own hairline and padding, for a `flush` dialog where the body\n     * scrolls behind it.\n     */\n    bordered: {\n      true: \"border-t px-6 py-4\",\n    },\n  },\n})\n\ntype DialogFooterProps = ComponentProps<\"div\"> & VariantProps<typeof dialogFooterVariants>\n\nfunction DialogFooter({ className, bordered, ...props }: DialogFooterProps) {\n  return <div className={dialogFooterVariants({ bordered, className })} {...props} />\n}\n\nfunction DialogClose({ ...props }: ComponentProps<typeof Button>) {\n  return <DialogPrimitive.Close render={<Button variant=\"secondary\" {...props} />} />\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAcA,MAAM,SAASA,SAAgB;AAC/B,MAAM,gBAAgBA,SAAgB;AACtC,MAAM,cAAcA,SAAgB;AACpC,MAAM,oBAAoBA,SAAgB;;AAG1C,SAAS,cAAc,EAAE,WAAW,GAAG,SAAyC;CAC9E,OACE,oBAACA,SAAgB,UAAjB;EACE,WAAW,GACT,iDACA,gDACA,8CACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,wBAAwB,SAAS;CACrC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CAEA,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;EACT;;;;;;EAOA,OAAO;GACL,MAAM;GACN,OAAO;EACT;;;;;EAMA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CAEA,iBAAiB;EACf,MAAM;EACN,OAAO;EACP,OAAO;CACT;AACF,CAAC;AAaD,SAAS,cAAc,EACrB,WACA,UACA,MACA,OACA,OACA,WACA,GAAG,SACkB;CACrB,OACE,qBAACA,SAAgB,QAAjB,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAEhB,qBAACA,SAAgB,OAAjB;EACE,WAAW,sBAAsB;GAAE;GAAM;GAAO;GAAO;EAAU,CAAC;EAClE,GAAI;EAFN,UAAA,CAIG,UAEA,CAAC,aACA,oBAACA,SAAgB,OAAjB;GACE,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,MAAK;IAAK,cAAW;IAAQ,QAAQ,oBAAC,OAAD,CAAQ,CAAA;GAAI,CAAA;GACjF,WAAU;EACX,CAAA,CAEkB;CACD,CAAA,CAAA,EAAA,CAAA;AAE5B;AAEA,MAAM,uBAAuB,SAAS,EACpC,UAAU;;;;;AAKR,UAAU,EACR,MAAM,2BACR,EACF,EACF,CAAC;;;;;;AAaD,SAAS,aAAa,EACpB,OACA,aACA,UACA,WACA,UACA,GAAG,SACiB;CACpB,OACE,qBAAC,eAAD;EAAe,MAAK;EAAO,WAAW,qBAAqB;GAAE;GAAU;EAAU,CAAC;EAAG,GAAI;EAAzF,UAAA,CACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,aAAD;GAAa,QAAQ,oBAAC,oBAAD,CAAqB,CAAA;GAAI,UAAA;EAAmB,CAAA,GAEhE,eACC,oBAAC,mBAAD;GAAmB,QAAQ,oBAAC,0BAAD,CAA2B,CAAA;GAAI,UAAA;EAA+B,CAAA,CAE1E,EAAA,CAAA,GAElB,QACY;;AAEnB;AAEA,MAAM,uBAAuB,SAAS;CACpC,MAAM;CAEN,UAAU;;;;;AAKR,UAAU,EACR,MAAM,qBACR,EACF;AACF,CAAC;AAID,SAAS,aAAa,EAAE,WAAW,UAAU,GAAG,SAA4B;CAC1E,OAAO,oBAAC,OAAD;EAAK,WAAW,qBAAqB;GAAE;GAAU;EAAU,CAAC;EAAG,GAAI;CAAQ,CAAA;AACpF;AAEA,SAAS,YAAY,EAAE,GAAG,SAAwC;CAChE,OAAO,oBAACA,SAAgB,OAAjB,EAAuB,QAAQ,oBAAC,QAAD;EAAQ,SAAQ;EAAY,GAAI;CAAQ,CAAA,EAAI,CAAA;AACpF"}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,96 @@
+import { VariantProps } from "../lib/variants.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/empty-state.d.ts
+declare const emptyStateVariants: import("tailwind-variants").TVReturnType<{
+  variant: {
+    block: {
+      root: string;
+      title: string;
+      description: string;
+      action: string;
+    };
+    inline: {
+      root: string;
+      title: string;
+      action: string;
+    };
+    dashed: {
+      root: string;
+      title: string;
+      action: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  action: string;
+}, undefined, {
+  variant: {
+    block: {
+      root: string;
+      title: string;
+      description: string;
+      action: string;
+    };
+    inline: {
+      root: string;
+      title: string;
+      action: string;
+    };
+    dashed: {
+      root: string;
+      title: string;
+      action: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  action: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    block: {
+      root: string;
+      title: string;
+      description: string;
+      action: string;
+    };
+    inline: {
+      root: string;
+      title: string;
+      action: string;
+    };
+    dashed: {
+      root: string;
+      title: string;
+      action: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  action: string;
+}>>;
+type EmptyStateProps = Omit<ComponentProps<"div">, "title"> & VariantProps<typeof emptyStateVariants> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+};
+/**
+ * The one empty state. `block` fills a card or list with a centered icon, title and
+ * description; `inline` is a single muted line inside a form section; `dashed` is a
+ * short dashed panel that stands in for a missing chart.
+ */
+export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","names":[],"sources":["../../src/components/empty-state.tsx"],"mappings":";;;cAIM,gDAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCnB,kBAAkB,KAAK,kCAC1B,oBAAoB;EAClB,OAAO;EACP,OAAO;EACP,cAAc;EACd,SAAS;;;;;;;wBAQG,aACd,MACA,OACA,aACA,QACA,SACA,cACG,SACF,kCAAe,IAAA"}

package/dist/components/empty-state.js

@@ -0,0 +1,69 @@
+import { cn, variants } from "../lib/variants.js";
+import { descriptionClasses } from "../lib/classes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty-state.tsx
+const emptyStateVariants = variants({
+	slots: {
+		root: "",
+		icon: "flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+		content: "space-y-1",
+		title: "",
+		description: descriptionClasses,
+		action: ""
+	},
+	variants: { variant: {
+		block: {
+			root: "flex flex-col items-center gap-3 px-6 py-12 text-center",
+			title: "font-medium text-sm",
+			description: "mx-auto max-w-sm",
+			action: "mt-1"
+		},
+		inline: {
+			root: "py-5",
+			title: "text-muted-foreground text-sm",
+			action: "mt-2"
+		},
+		dashed: {
+			root: "bg-dashed flex h-32 items-center justify-center rounded-lg border",
+			title: "rounded-md bg-background px-3 py-1.5 text-muted-foreground text-sm",
+			action: "mt-2"
+		}
+	} },
+	defaultVariants: { variant: "block" }
+});
+/**
+* The one empty state. `block` fills a card or list with a centered icon, title and
+* description; `inline` is a single muted line inside a form section; `dashed` is a
+* short dashed panel that stands in for a missing chart.
+*/
+function EmptyState({ icon, title, description, action, variant, className, ...props }) {
+	const styles = emptyStateVariants({ variant });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(styles.root(), className),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: styles.icon(),
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.content(),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: styles.title(),
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: styles.description(),
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: styles.action(),
+				children: action
+			})
+		]
+	});
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\"\nimport { descriptionClasses } from \"~/lib/classes\"\nimport { cn, variants, type VariantProps } from \"~/lib/variants\"\n\nconst emptyStateVariants = variants({\n  slots: {\n    root: \"\",\n    icon: \"flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5\",\n    content: \"space-y-1\",\n    title: \"\",\n    description: descriptionClasses,\n    action: \"\",\n  },\n\n  variants: {\n    variant: {\n      block: {\n        root: \"flex flex-col items-center gap-3 px-6 py-12 text-center\",\n        title: \"font-medium text-sm\",\n        description: \"mx-auto max-w-sm\",\n        action: \"mt-1\",\n      },\n      inline: {\n        root: \"py-5\",\n        title: \"text-muted-foreground text-sm\",\n        action: \"mt-2\",\n      },\n      dashed: {\n        root: \"bg-dashed flex h-32 items-center justify-center rounded-lg border\",\n        title: \"rounded-md bg-background px-3 py-1.5 text-muted-foreground text-sm\",\n        action: \"mt-2\",\n      },\n    },\n  },\n\n  defaultVariants: {\n    variant: \"block\",\n  },\n})\n\ntype EmptyStateProps = Omit<ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof emptyStateVariants> & {\n    icon?: ReactNode\n    title: ReactNode\n    description?: ReactNode\n    action?: ReactNode\n  }\n\n/**\n * The one empty state. `block` fills a card or list with a centered icon, title and\n * description; `inline` is a single muted line inside a form section; `dashed` is a\n * short dashed panel that stands in for a missing chart.\n */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  variant,\n  className,\n  ...props\n}: EmptyStateProps) {\n  const styles = emptyStateVariants({ variant })\n\n  return (\n    <div className={cn(styles.root(), className)} {...props}>\n      {icon && <div className={styles.icon()}>{icon}</div>}\n\n      <div className={styles.content()}>\n        <p className={styles.title()}>{title}</p>\n        {description && <p className={styles.description()}>{description}</p>}\n      </div>\n\n      {action && <div className={styles.action()}>{action}</div>}\n    </div>\n  )\n}\n"],"mappings":";;;;AAIA,MAAM,qBAAqB,SAAS;CAClC,OAAO;EACL,MAAM;EACN,MAAM;EACN,SAAS;EACT,OAAO;EACP,aAAa;EACb,QAAQ;CACV;CAEA,UAAU,EACR,SAAS;EACP,OAAO;GACL,MAAM;GACN,OAAO;GACP,aAAa;GACb,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,OAAO;GACP,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,OAAO;GACP,QAAQ;EACV;CACF,EACF;CAEA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC;;;;;;AAeD,SAAgB,WAAW,EACzB,MACA,OACA,aACA,QACA,SACA,WACA,GAAG,SACe;CAClB,MAAM,SAAS,mBAAmB,EAAE,QAAQ,CAAC;CAE7C,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,KAAK,GAAG,SAAS;EAAG,GAAI;EAAlD,UAAA;GACG,QAAQ,oBAAC,OAAD;IAAK,WAAW,OAAO,KAAK;IAAI,UAAA;GAAU,CAAA;GAEnD,qBAAC,OAAD;IAAK,WAAW,OAAO,QAAQ;IAA/B,UAAA,CACE,oBAAC,KAAD;KAAG,WAAW,OAAO,MAAM;KAAI,UAAA;IAAS,CAAA,GACvC,eAAe,oBAAC,KAAD;KAAG,WAAW,OAAO,YAAY;KAAI,UAAA;IAAe,CAAA,CACjE;;GAEJ,UAAU,oBAAC,OAAD;IAAK,WAAW,OAAO,OAAO;IAAI,UAAA;GAAY,CAAA;EACtD;;AAET"}

package/dist/components/entity-avatar.d.ts

@@ -0,0 +1,77 @@
+import { Avatar } from "./avatar.js";
+import { VariantProps } from "../lib/variants.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/entity-avatar.d.ts
+declare const entityAvatar: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      image: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      image: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+      image: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+}>>;
+type EntityAvatarProps = Omit<ComponentProps<typeof Avatar>, "className"> & VariantProps<typeof entityAvatar> & {
+  className?: string;
+  /**
+   * The image source (e.g. a favicon URL). When absent, only the fallback renders.
+   */
+  src?: string | null;
+  /**
+   * The entity's display name; its initials are the default fallback.
+   */
+  name: string;
+  /**
+   * Overrides the initials derived from `name`.
+   */
+  fallback?: ReactNode;
+};
+export declare function EntityAvatar({ src, name, fallback, size, className, ...props }: EntityAvatarProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=entity-avatar.d.ts.map

package/dist/components/entity-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-avatar.d.ts","names":[],"sources":["../../src/components/entity-avatar.tsx"],"mappings":";;;;cAyBM,0CAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuBb,oBAAoB,KAAK,sBAAsB,wBAClD,oBAAoB;EAClB;;;;EAKA;;;;EAKA;;;;EAKA,WAAW;;wBAGC,eACd,KACA,MACA,UACA,MACA,cACG,SACF,oCAAiB,IAAA"}

package/dist/components/entity-avatar.js

@@ -0,0 +1,48 @@
+import { variants } from "../lib/variants.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/entity-avatar.tsx
+/**
+* The initials standing in for a missing image: a name of two characters or less as it is,
+* otherwise the first letter of each word, capped at `max` (uncapped when `max` is 0).
+*/
+function getInitials(name, max = 0) {
+	const value = name.trim();
+	if (value.length <= 2) return value.toUpperCase();
+	const initials = value.split(" ").filter(Boolean).map((word) => word.charAt(0).toUpperCase()).join("");
+	return max > 0 ? initials.slice(0, max) : initials;
+}
+const entityAvatar = variants({
+	slots: {
+		root: "rounded-md border",
+		image: "p-[7.5%]",
+		fallback: ""
+	},
+	variants: { size: {
+		sm: {
+			root: "size-5 rounded-sm border-0",
+			image: "p-0",
+			fallback: "text-[0.625rem]"
+		},
+		md: { root: "size-9" },
+		lg: { root: "size-14" }
+	} }
+});
+function EntityAvatar({ src, name, fallback, size, className, ...props }) {
+	const styles = entityAvatar({ size });
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: styles.root({ className }),
+		...props,
+		children: [src && /* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			className: styles.image()
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			className: styles.fallback(),
+			children: fallback ?? getInitials(name, size === "sm" ? 2 : 3)
+		})]
+	});
+}
+//#endregion
+export { EntityAvatar };
+
+//# sourceMappingURL=entity-avatar.js.map

package/dist/components/entity-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-avatar.js","names":[],"sources":["../../src/components/entity-avatar.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"~/components/avatar\"\nimport { variants, type VariantProps } from \"~/lib/variants\"\n\n/**\n * The initials standing in for a missing image: a name of two characters or less as it is,\n * otherwise the first letter of each word, capped at `max` (uncapped when `max` is 0).\n */\nfunction getInitials(name: string, max = 0) {\n  const value = name.trim()\n\n  if (value.length <= 2) {\n    return value.toUpperCase()\n  }\n\n  const initials = value\n    .split(\" \")\n    .filter(Boolean)\n    .map(word => word.charAt(0).toUpperCase())\n    .join(\"\")\n\n  return max > 0 ? initials.slice(0, max) : initials\n}\n\n// Radius lives on the root, which clips its children.\nconst entityAvatar = variants({\n  slots: {\n    root: \"rounded-md border\",\n    image: \"p-[7.5%]\",\n    fallback: \"\",\n  },\n\n  variants: {\n    size: {\n      // 20px: the identity mark of a nav row or menu item — borderless, flush, two initials.\n      sm: {\n        root: \"size-5 rounded-sm border-0\",\n        image: \"p-0\",\n        fallback: \"text-[0.625rem]\",\n      },\n      // 36px: list rows and cards.\n      md: { root: \"size-9\" },\n      // 56px: the logo field.\n      lg: { root: \"size-14\" },\n    },\n  },\n})\n\ntype EntityAvatarProps = Omit<ComponentProps<typeof Avatar>, \"className\"> &\n  VariantProps<typeof entityAvatar> & {\n    className?: string\n\n    /**\n     * The image source (e.g. a favicon URL). When absent, only the fallback renders.\n     */\n    src?: string | null\n\n    /**\n     * The entity's display name; its initials are the default fallback.\n     */\n    name: string\n\n    /**\n     * Overrides the initials derived from `name`.\n     */\n    fallback?: ReactNode\n  }\n\nexport function EntityAvatar({\n  src,\n  name,\n  fallback,\n  size,\n  className,\n  ...props\n}: EntityAvatarProps) {\n  const styles = entityAvatar({ size })\n\n  return (\n    <Avatar className={styles.root({ className })} {...props}>\n      {src && <AvatarImage src={src} className={styles.image()} />}\n\n      <AvatarFallback className={styles.fallback()}>\n        {fallback ?? getInitials(name, size === \"sm\" ? 2 : 3)}\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,SAAS,YAAY,MAAc,MAAM,GAAG;CAC1C,MAAM,QAAQ,KAAK,KAAK;CAExB,IAAI,MAAM,UAAU,GAClB,OAAO,MAAM,YAAY;CAG3B,MAAM,WAAW,MACd,MAAM,GAAG,CAAC,CACV,OAAO,OAAO,CAAC,CACf,KAAI,SAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CACzC,KAAK,EAAE;CAEV,OAAO,MAAM,IAAI,SAAS,MAAM,GAAG,GAAG,IAAI;AAC5C;AAGA,MAAM,eAAe,SAAS;CAC5B,OAAO;EACL,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CAEA,UAAU,EACR,MAAM;EAEJ,IAAI;GACF,MAAM;GACN,OAAO;GACP,UAAU;EACZ;EAEA,IAAI,EAAE,MAAM,SAAS;EAErB,IAAI,EAAE,MAAM,UAAU;CACxB,EACF;AACF,CAAC;AAsBD,SAAgB,aAAa,EAC3B,KACA,MACA,UACA,MACA,WACA,GAAG,SACiB;CACpB,MAAM,SAAS,aAAa,EAAE,KAAK,CAAC;CAEpC,OACE,qBAAC,QAAD;EAAQ,WAAW,OAAO,KAAK,EAAE,UAAU,CAAC;EAAG,GAAI;EAAnD,UAAA,CACG,OAAO,oBAAC,aAAD;GAAkB;GAAK,WAAW,OAAO,MAAM;EAAI,CAAA,GAE3D,oBAAC,gBAAD;GAAgB,WAAW,OAAO,SAAS;GACxC,UAAA,YAAY,YAAY,MAAM,SAAS,OAAO,IAAI,CAAC;EACtC,CAAA,CACV;;AAEZ"}