@web-my-money/primitives 1.0.0

package/dist/select/index.mjs

@@ -0,0 +1,26 @@
+"use client";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+} from "../chunk-K4UYYX45.mjs";
+import "../chunk-PJO7WJ4G.mjs";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};

package/dist/separator/index.d.mts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+
+declare function Separator({ className, orientation, ...props }: Separator$1.Props): React.JSX.Element;
+
+export { Separator };

package/dist/separator/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+
+declare function Separator({ className, orientation, ...props }: Separator$1.Props): React.JSX.Element;
+
+export { Separator };

package/dist/separator/index.js

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/separator/index.tsx
+var separator_exports = {};
+__export(separator_exports, {
+  Separator: () => Separator
+});
+module.exports = __toCommonJS(separator_exports);
+var import_separator = require("@base-ui/react/separator");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/separator/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_separator.Separator,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Separator
+});

package/dist/separator/index.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Separator
+} from "../chunk-YNOS3JA2.mjs";
+import "../chunk-PJO7WJ4G.mjs";
+export {
+  Separator
+};

package/dist/sheet/index.d.mts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+
+/**
+ * Sheet — a panel that slides in from an edge of the screen. `side="bottom"`
+ * (default) is the mobile bottom-sheet pattern (rounded top corners, drag
+ * handle, safe-area-aware padding); `left`/`right`/`top` give a desktop side
+ * panel. Same Base UI Dialog foundation as <Dialog> — swap between them freely
+ * (e.g. Sheet on mobile, Dialog on desktop) via `useBreakpoint` from
+ * @web-my-money/tokens/react.
+ *
+ *   <Sheet>
+ *     <SheetTrigger render={<Button>Filters</Button>} />
+ *     <SheetContent side="bottom">
+ *       <SheetHeader><SheetTitle>Filters</SheetTitle></SheetHeader>
+ *       ...
+ *     </SheetContent>
+ *   </Sheet>
+ */
+declare function Sheet({ ...props }: Dialog.Root.Props): React.JSX.Element;
+declare function SheetTrigger({ ...props }: Dialog.Trigger.Props): React.JSX.Element;
+declare function SheetPortal({ ...props }: Dialog.Portal.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: Dialog.Close.Props): React.JSX.Element;
+declare function SheetOverlay({ className, ...props }: Dialog.Backdrop.Props): React.JSX.Element;
+type SheetSide = "bottom" | "top" | "left" | "right";
+interface SheetContentProps extends Dialog.Popup.Props {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+    /** Show the drag-handle bar (bottom sheets only). Default true for side="bottom". */
+    showHandle?: boolean;
+}
+declare function SheetContent({ className, children, side, showCloseButton, showHandle, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
+
+export { Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, type SheetSide, SheetTitle, SheetTrigger };

package/dist/sheet/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+
+/**
+ * Sheet — a panel that slides in from an edge of the screen. `side="bottom"`
+ * (default) is the mobile bottom-sheet pattern (rounded top corners, drag
+ * handle, safe-area-aware padding); `left`/`right`/`top` give a desktop side
+ * panel. Same Base UI Dialog foundation as <Dialog> — swap between them freely
+ * (e.g. Sheet on mobile, Dialog on desktop) via `useBreakpoint` from
+ * @web-my-money/tokens/react.
+ *
+ *   <Sheet>
+ *     <SheetTrigger render={<Button>Filters</Button>} />
+ *     <SheetContent side="bottom">
+ *       <SheetHeader><SheetTitle>Filters</SheetTitle></SheetHeader>
+ *       ...
+ *     </SheetContent>
+ *   </Sheet>
+ */
+declare function Sheet({ ...props }: Dialog.Root.Props): React.JSX.Element;
+declare function SheetTrigger({ ...props }: Dialog.Trigger.Props): React.JSX.Element;
+declare function SheetPortal({ ...props }: Dialog.Portal.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: Dialog.Close.Props): React.JSX.Element;
+declare function SheetOverlay({ className, ...props }: Dialog.Backdrop.Props): React.JSX.Element;
+type SheetSide = "bottom" | "top" | "left" | "right";
+interface SheetContentProps extends Dialog.Popup.Props {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+    /** Show the drag-handle bar (bottom sheets only). Default true for side="bottom". */
+    showHandle?: boolean;
+}
+declare function SheetContent({ className, children, side, showCloseButton, showHandle, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
+
+export { Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, type SheetSide, SheetTitle, SheetTrigger };

package/dist/sheet/index.js

@@ -0,0 +1,212 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/sheet/index.tsx
+var sheet_exports = {};
+__export(sheet_exports, {
+  Sheet: () => Sheet,
+  SheetClose: () => SheetClose,
+  SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
+  SheetFooter: () => SheetFooter,
+  SheetHeader: () => SheetHeader,
+  SheetOverlay: () => SheetOverlay,
+  SheetPortal: () => SheetPortal,
+  SheetTitle: () => SheetTitle,
+  SheetTrigger: () => SheetTrigger
+});
+module.exports = __toCommonJS(sheet_exports);
+var import_dialog = require("@base-ui/react/dialog");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/button/index.tsx
+var import_button = require("@base-ui/react/button");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px 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 text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background 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-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-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",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/sheet/index.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn("fixed inset-0 z-50 bg-black/40", className),
+      ...props
+    }
+  );
+}
+var SIDE_STYLES = {
+  bottom: "inset-x-0 bottom-0 max-h-[85vh] rounded-t-2xl border-t",
+  top: "inset-x-0 top-0 max-h-[85vh] rounded-b-2xl border-b",
+  right: "inset-y-0 right-0 h-full w-full max-w-sm border-l",
+  left: "inset-y-0 left-0 h-full w-full max-w-sm border-r"
+};
+function SheetContent({
+  className,
+  children,
+  side = "bottom",
+  showCloseButton = true,
+  showHandle,
+  ...props
+}) {
+  const handle = showHandle ?? side === "bottom";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_dialog.Dialog.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+          side === "bottom" && "pb-[calc(1rem+env(safe-area-inset-bottom))]",
+          SIDE_STYLES[side],
+          className
+        ),
+        ...props,
+        children: [
+          handle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-hidden": true, className: "mx-auto -mt-1 h-1.5 w-9 shrink-0 rounded-full bg-border" }),
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_dialog.Dialog.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5", className), ...props });
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_dialog.Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-heading text-base leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_dialog.Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+});

package/dist/sheet/index.mjs

@@ -0,0 +1,27 @@
+"use client";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+} from "../chunk-5LYTCNI6.mjs";
+import "../chunk-YPTARV3T.mjs";
+import "../chunk-PJO7WJ4G.mjs";
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+};

package/dist/skeleton/index.d.mts

@@ -0,0 +1,17 @@
+import * as React$1 from 'react';
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Convenience shape shorthand */
+    shape?: "line" | "circle" | "rect";
+    width?: string | number;
+    height?: string | number;
+}
+declare function Skeleton({ className, shape, width, height, style, ...props }: SkeletonProps): React$1.JSX.Element;
+declare function SkeletonCard({ className }: {
+    className?: string;
+}): React$1.JSX.Element;
+declare function SkeletonRow({ className }: {
+    className?: string;
+}): React$1.JSX.Element;
+
+export { Skeleton, SkeletonCard, type SkeletonProps, SkeletonRow };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,17 @@
+import * as React$1 from 'react';
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Convenience shape shorthand */
+    shape?: "line" | "circle" | "rect";
+    width?: string | number;
+    height?: string | number;
+}
+declare function Skeleton({ className, shape, width, height, style, ...props }: SkeletonProps): React$1.JSX.Element;
+declare function SkeletonCard({ className }: {
+    className?: string;
+}): React$1.JSX.Element;
+declare function SkeletonRow({ className }: {
+    className?: string;
+}): React$1.JSX.Element;
+
+export { Skeleton, SkeletonCard, type SkeletonProps, SkeletonRow };

package/dist/skeleton/index.js

@@ -0,0 +1,80 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/skeleton/index.tsx
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCard: () => SkeletonCard,
+  SkeletonRow: () => SkeletonRow
+});
+module.exports = __toCommonJS(skeleton_exports);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/skeleton/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Skeleton({ className, shape, width, height, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "animate-pulse rounded-md bg-muted/60",
+        shape === "circle" && "rounded-full",
+        shape === "line" && "h-4",
+        className
+      ),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function SkeletonCard({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("space-y-3 rounded-xl border border-border bg-card p-5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-2/5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-8 w-3/5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-3 w-4/5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-3 w-1/2" })
+  ] });
+}
+function SkeletonRow({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { shape: "circle", className: "size-9 shrink-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-3 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-3 w-1/3" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  SkeletonCard,
+  SkeletonRow
+});

package/dist/skeleton/index.mjs

@@ -0,0 +1,11 @@
+import {
+  Skeleton,
+  SkeletonCard,
+  SkeletonRow
+} from "../chunk-WYBX5VJ4.mjs";
+import "../chunk-PJO7WJ4G.mjs";
+export {
+  Skeleton,
+  SkeletonCard,
+  SkeletonRow
+};

package/dist/slide-over/index.d.mts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+
+interface UseRecordNavOptions {
+    /** CSS selector matching navigable record elements, e.g. '[data-record-id]'. */
+    selector: string;
+    /** Attribute to read each record's id from. Default 'data-record-id'. */
+    idAttribute?: string;
+    /** Currently open record id — next/prev is computed relative to this. */
+    currentId?: string | null;
+    /** Called with the next/previous record's id. */
+    onNavigate: (id: string) => void;
+    /** Enable the listener (e.g. only while a SlideOver is open). Default true. */
+    enabled?: boolean;
+    /** Key bindings. Default { next: "j", prev: "k" }. */
+    keys?: {
+        next?: string;
+        prev?: string;
+    };
+}
+/**
+ * Keyboard record-to-record navigation over whatever's currently rendered in
+ * the DOM (generalizes wmm-tasks' j/k board navigation) — no separate fetched
+ * list, no ordering logic: it walks `document.querySelectorAll(selector)` in
+ * DOM order, so navigation always matches what the user sees on screen.
+ * Ignored while focus is in a form control, or with any modifier key held.
+ *
+ *   useRecordNav({
+ *     selector: "[data-task-id]",
+ *     currentId: openTaskId,
+ *     onNavigate: (id) => openTask(id),
+ *     enabled: !!openTaskId,
+ *   });
+ */
+declare function useRecordNav({ selector, idAttribute, currentId, onNavigate, enabled, keys, }: UseRecordNavOptions): void;
+
+/**
+ * SlideOver — a large detail/record view over the current screen (task detail,
+ * client profile, order detail): bigger than Dialog, not edge-anchored like
+ * Sheet. Modeled on the wmm-tasks task-detail panel, rebuilt on Base UI Dialog
+ * (real focus trap + a11y instead of a hand-rolled one) with size variants
+ * instead of one fixed width, and an optional multi-column body for
+ * properties-rail / main-content / discussion-rail layouts.
+ *
+ * Three complementary "show detail over the current view" options exist —
+ * pick by content, not habit:
+ *   - Dialog     — small, single decision (confirm, short form)
+ *   - Sheet      — edge-anchored panel (filters, mobile actions), side= any edge
+ *   - SlideOver  — large record/detail view, optionally multi-column, often
+ *                  paired with a URL param so the underlying list stays intact
+ *                  (see @web-my-money/blocks/next's useUrlPanelParam)
+ */
+declare function SlideOver({ ...props }: Dialog.Root.Props): React.JSX.Element;
+declare function SlideOverTrigger({ ...props }: Dialog.Trigger.Props): React.JSX.Element;
+declare function SlideOverPortal({ ...props }: Dialog.Portal.Props): React.JSX.Element;
+declare function SlideOverClose({ ...props }: Dialog.Close.Props): React.JSX.Element;
+declare function SlideOverOverlay({ className, ...props }: Dialog.Backdrop.Props): React.JSX.Element;
+type SlideOverSize = "md" | "lg" | "xl" | "full";
+interface SlideOverContentProps extends Dialog.Popup.Props {
+    size?: SlideOverSize;
+    showCloseButton?: boolean;
+}
+declare function SlideOverContent({ className, children, size, showCloseButton, ...props }: SlideOverContentProps): React.JSX.Element;
+declare function SlideOverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Footer strip — pairs well with a keyboard-shortcut legend (see `shortcuts`). */
+declare function SlideOverFooter({ className, shortcuts, children, ...props }: React.ComponentProps<"div"> & {
+    shortcuts?: React.ReactNode;
+}): React.JSX.Element;
+declare function SlideOverTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
+declare function SlideOverDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
+interface SlideOverColumn {
+    key: string;
+    content: React.ReactNode;
+    /** Tailwind width classes for the column at `lg:` and up. Default: flexes to fill. */
+    width?: string;
+    /** Order at `lg:` and up (mobile always stacks in array order). */
+    order?: number;
+    className?: string;
+}
+/**
+ * The wmm-tasks 3-column body convention: named columns that stack vertically
+ * on mobile (one shared scroll context) and sit side-by-side with independent
+ * scroll on `lg:` and up. Pass 1-3 columns; a single column just fills the
+ * body. `order`/`width` let the visual arrangement differ from array order
+ * (e.g. render [rail, main, discussion] but display main first on mobile).
+ */
+declare function SlideOverColumns({ columns, className, }: {
+    columns: SlideOverColumn[];
+    className?: string;
+}): React.JSX.Element;
+
+export { SlideOver, SlideOverClose, type SlideOverColumn, SlideOverColumns, SlideOverContent, type SlideOverContentProps, SlideOverDescription, SlideOverFooter, SlideOverHeader, SlideOverOverlay, SlideOverPortal, type SlideOverSize, SlideOverTitle, SlideOverTrigger, type UseRecordNavOptions, useRecordNav };