@vikram-hegde/skeletal 0.0.1

package/dist/dialog-C4yqxII_.js

@@ -0,0 +1,73 @@
+import { t as DialogPortal } from "./dialog-portal-B21WFYkQ.js";
+import { n as DialogBackdrop, t as DialogViewport } from "./dialog-viewport-vpbsq7Ib.js";
+import { t as Button } from "./button-B48UNbaC.js";
+import { n as DialogDescription, r as DialogClose, t as DialogTitle } from "./dialog-title-DRYRIxCp.js";
+import { n as DialogContent, t as DialogFooter } from "./dialog-footer-Br9KZP4v.js";
+import { Dialog } from "@base-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/dialog-root.tsx
+function DialogRoot(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+//#endregion
+//#region src/dialog/dialog-trigger.tsx
+function DialogTrigger({ className, variant = "primary", size = "md", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/dialog/index.ts
+/**
+* Compound component for dialogs.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Dialog } from '@vikram-hegde/skeletal'
+*
+* <Dialog.Root>
+*   <Dialog.Trigger>Open</Dialog.Trigger>
+*   <Dialog.Portal>
+*     <Dialog.Backdrop />
+*     <Dialog.Viewport>
+*       <Dialog.Content>
+*         <Dialog.Title>Title</Dialog.Title>
+*         <Dialog.Description>Description</Dialog.Description>
+*         <Dialog.Footer>
+*           <Dialog.Close>Cancel</Dialog.Close>
+*           <Dialog.Close variant="primary">Confirm</Dialog.Close>
+*         </Dialog.Footer>
+*       </Dialog.Content>
+*     </Dialog.Viewport>
+*   </Dialog.Portal>
+* </Dialog.Root>
+* ```
+*
+* Composition follows the Base UI anatomy — `Dialog.Viewport` is the
+* full-screen positioning/scroll container that centers `Dialog.Content`.
+*
+* All parts are thin styled wrappers over Base UI's `Dialog`, so every Base UI
+* prop, `render` override, and ref behaves the same. Part prop types are
+* exported separately (`DialogContentProps`, etc.).
+*/
+const Dialog$1 = {
+	Root: DialogRoot,
+	Trigger: DialogTrigger,
+	Portal: DialogPortal,
+	Backdrop: DialogBackdrop,
+	Content: DialogContent,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Footer: DialogFooter,
+	Close: DialogClose,
+	Viewport: DialogViewport
+};
+//#endregion
+export { Dialog$1 as t };

package/dist/dialog-footer-Br9KZP4v.js

@@ -0,0 +1,29 @@
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { n as dialog_module_default } from "./dialog-portal-B21WFYkQ.js";
+import { t as Stack } from "./stack-BzFVrsmT.js";
+import { Dialog } from "@base-ui/react/dialog";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/dialog-content.tsx
+function DialogContent({ className, size = "md", children, ...props }) {
+	const sizeClass = size !== "md" ? dialog_module_default[`dialog__content--${size}`] : void 0;
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		className: mergeClassName(clsx(dialog_module_default.dialog__content, sizeClass), className),
+		...props,
+		children: /* @__PURE__ */ jsx(Stack, {
+			space: "1.25rem",
+			fill: true,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/dialog/dialog-footer.tsx
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(dialog_module_default.dialog__footer, className),
+		...props
+	});
+}
+//#endregion
+export { DialogContent as n, DialogFooter as t };

package/dist/dialog-footer-bNVIVPbu.d.ts

@@ -0,0 +1,56 @@
+import { DialogPopupProps } from "@base-ui/react/dialog";
+import { HTMLAttributes } from "react";
+//#region src/dialog/dialog-content.d.ts
+/**
+ * Width of the dialog content.
+ */
+type DialogContentSize = "sm" | "md" | "lg";
+/**
+ * The dialog card itself. Renders a `<div>` element with the popup role.
+ *
+ * Per the Base UI anatomy it is centered by its parent
+ * `<Dialog.Viewport>`, which is responsible for positioning and scrolling.
+ *
+ * Accepts all Base UI popup props, including `initialFocus` and `finalFocus`
+ * for controlling focus when the dialog opens and closes.
+ *
+ * `size` controls the content width:
+ * - `sm`: 24rem — short confirmations and prompts.
+ * - `md`: 32rem — default; most dialogs and simple forms.
+ * - `lg`: 44rem — complex forms, tables, and detail views.
+ *
+ * The children are wrapped in a `Stack` layout primitive for the dialog's
+ * vertical rhythm (`space="1.25rem"`) and stretched to fill the content box
+ * (`fill`) so the footer bleeds to the dialog's bottom edge.
+ *
+ * Responsive: below `48rem` the dialog renders as a bottom sheet — full width,
+ * rounded top corners, pinned to the bottom edge, sliding up on open. The
+ * `size` modifier only constrains width, so it has no effect on the sheet.
+ *
+ * @default size = 'md'
+ */
+interface DialogContentProps extends DialogPopupProps {
+  size?: DialogContentSize;
+}
+declare function DialogContent({ className, size, children, ...props }: DialogContentProps): import("react").JSX.Element;
+//#endregion
+//#region src/dialog/dialog-footer.d.ts
+/**
+ * A footer bar for dialog actions. Renders a `<div>` element.
+ *
+ * Place it as the last child of `Dialog.Content` to group the dialog's action
+ * buttons (e.g. Cancel / Confirm) into a distinct container. It bleeds to the
+ * card's edges with its own muted background and top border, so it reads as a
+ * separate section of the dialog rather than a loose row of buttons.
+ *
+ * Buttons are laid out in a right-aligned, wrapping row with a small gap —
+ * the conventional placement for primary/destructive actions in dialogs.
+ * Override alignment with `className` or `style` (e.g.
+ * `justifyContent: "space-between"`) when needed.
+ *
+ * Use it in an Alert Dialog the same way via `AlertDialog.Footer`.
+ */
+interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {}
+declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
+//#endregion
+export { DialogContentSize as a, DialogContentProps as i, DialogFooterProps as n, DialogContent as r, DialogFooter as t };

package/dist/dialog-portal-B21WFYkQ.css

@@ -0,0 +1,131 @@
+@layer skeletal {
+  ._5SjRyW_dialog__backdrop {
+    z-index: 40;
+    background-color: light-dark(oklch(0% 0 0 / .4), oklch(0% 0 0 / .6));
+    transition: opacity .2s ease-out;
+    position: fixed;
+    inset: 0;
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  ._5SjRyW_dialog__content {
+    overflow-block: auto;
+    border: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-popover);
+    max-block-size: calc(100dvb - 3rem);
+    inline-size: min(32rem, 100%);
+    color: var(--sk-popover-foreground);
+    box-shadow: var(--sk-shadow-md);
+    margin: auto;
+    padding: 1.5rem;
+    transition: scale .2s ease-out, opacity .2s ease-out;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .98;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    @media (width < 48rem) {
+      &, &._5SjRyW_dialog__content--sm, &._5SjRyW_dialog__content--lg {
+        border-radius: calc(var(--sk-radius) + .5rem * (var(--sk-radius) / var(--sk-radius)))
+          calc(var(--sk-radius) + .5rem * (var(--sk-radius) / var(--sk-radius))) 0 0;
+        max-block-size: min(85dvb, 100dvb - 2rem);
+        inline-size: 100%;
+        max-inline-size: none;
+        will-change: transform;
+        margin: 0;
+        padding-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
+        transition: transform .22s ease-out, opacity .22s ease-out;
+        transform: translateY(0);
+
+        &[data-starting-style], &[data-ending-style] {
+          opacity: 1;
+          transform: translateY(100%) scale3d(1, 1, 1);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+    }
+  }
+
+  ._5SjRyW_dialog__content--sm {
+    inline-size: min(24rem, 100%);
+  }
+
+  ._5SjRyW_dialog__content--lg {
+    inline-size: min(44rem, 100%);
+  }
+
+  ._5SjRyW_dialog__title {
+    color: var(--sk-foreground);
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  ._5SjRyW_dialog__description {
+    color: var(--sk-muted-foreground);
+    margin: 0;
+    font-size: .875rem;
+    line-height: 1.5;
+  }
+
+  ._5SjRyW_dialog__footer {
+    background-color: var(--sk-muted);
+    border-block-start: 1px solid var(--sk-border);
+    border-radius: 0 0 var(--sk-radius) var(--sk-radius);
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: .5rem;
+    margin-block-end: -1.5rem;
+    margin-inline: -1.5rem;
+    padding-block: .75rem;
+    padding-inline: 1.5rem;
+    display: flex;
+
+    @media (width < 48rem) {
+      border-radius: 0;
+      margin-block-end: calc(-1.5rem - env(safe-area-inset-bottom, 0px));
+      padding-block-end: calc(.75rem + env(safe-area-inset-bottom, 0px));
+    }
+  }
+
+  ._5SjRyW_dialog__portal {
+    display: contents;
+  }
+
+  ._5SjRyW_dialog__viewport {
+    z-index: 50;
+    overflow-block: auto;
+    padding: 1.5rem;
+    display: flex;
+    position: fixed;
+    inset: 0;
+
+    @media (width < 48rem) {
+      align-items: flex-end;
+      padding: 0;
+    }
+  }
+}

package/dist/dialog-portal-B21WFYkQ.js

@@ -0,0 +1,26 @@
+import './dialog-portal-B21WFYkQ.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { Dialog } from "@base-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/dialog.module.css
+var dialog_module_default = {
+	"dialog__backdrop": "_5SjRyW_dialog__backdrop",
+	"dialog__content": "_5SjRyW_dialog__content",
+	"dialog__content--lg": "_5SjRyW_dialog__content--lg",
+	"dialog__content--sm": "_5SjRyW_dialog__content--sm",
+	"dialog__description": "_5SjRyW_dialog__description",
+	"dialog__footer": "_5SjRyW_dialog__footer",
+	"dialog__portal": "_5SjRyW_dialog__portal",
+	"dialog__title": "_5SjRyW_dialog__title",
+	"dialog__viewport": "_5SjRyW_dialog__viewport"
+};
+//#endregion
+//#region src/dialog/dialog-portal.tsx
+function DialogPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		className: mergeClassName(dialog_module_default.dialog__portal, className),
+		...props
+	});
+}
+//#endregion
+export { dialog_module_default as n, DialogPortal as t };

package/dist/dialog-portal-BF89FBeX.d.ts

@@ -0,0 +1,15 @@
+import { DialogPortalProps } from "@base-ui/react/dialog";
+//#region src/dialog/dialog-portal.d.ts
+/**
+ * Moves the dialog content to a different part of the DOM, appended to
+ * `<body>` by default. Renders a `<div>` element.
+ *
+ * `keepMounted` keeps the portal in the DOM while the dialog is closed
+ * (useful for exit animations). `container` overrides the portal target.
+ *
+ * @default keepMounted = false
+ */
+interface DialogPortalProps$1 extends DialogPortalProps {}
+declare function DialogPortal({ className, ...props }: DialogPortalProps$1): import("react").JSX.Element;
+//#endregion
+export { DialogPortalProps$1 as n, DialogPortal as t };

package/dist/dialog-title-DRYRIxCp.js

@@ -0,0 +1,35 @@
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { n as dialog_module_default } from "./dialog-portal-B21WFYkQ.js";
+import { t as Button } from "./button-B48UNbaC.js";
+import { Dialog } from "@base-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/dialog-close.tsx
+function DialogClose({ className, variant = "secondary", size = "md", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/dialog/dialog-description.tsx
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: mergeClassName(dialog_module_default.dialog__description, className),
+		...props
+	});
+}
+//#endregion
+//#region src/dialog/dialog-title.tsx
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: mergeClassName(dialog_module_default.dialog__title, className),
+		...props
+	});
+}
+//#endregion
+export { DialogDescription as n, DialogClose as r, DialogTitle as t };

package/dist/dialog-title-jyf86Q8C.d.ts

@@ -0,0 +1,36 @@
+import { n as ButtonProps } from "./button-Dvd4n2U4.js";
+import { DialogCloseProps, DialogDescriptionProps, DialogTitleProps } from "@base-ui/react/dialog";
+//#region src/dialog/dialog-close.d.ts
+/**
+ * A button that closes the dialog. Renders a `<button>` element.
+ *
+ * Composed from the `Button` component via Base UI's `render` prop, so it
+ * accepts all `Button` props (`variant`, `size`, `fullWidth`, `disabled`, ...).
+ * Defaults to the `secondary` variant. For destructive confirmations (e.g. the
+ * "Discard" action in an Alert Dialog), pass `variant="destructive"`.
+ */
+interface DialogCloseProps$1 extends ButtonProps, Omit<DialogCloseProps, "className" | "style" | "render" | "nativeButton"> {}
+declare function DialogClose({ className, variant, size, fullWidth, ...props }: DialogCloseProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/dialog/dialog-description.d.ts
+/**
+ * A paragraph with additional information about the dialog. Renders a `<p>`
+ * element.
+ *
+ * Keep the first paragraph specific and concise — it is announced alongside
+ * the title to screen readers.
+ */
+interface DialogDescriptionProps$1 extends DialogDescriptionProps {}
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/dialog/dialog-title.d.ts
+/**
+ * A heading that labels the dialog. Renders an `<h2>` element.
+ *
+ * Required for accessibility — the dialog is announced with this title.
+ * Prefer a short, specific title (e.g. "Delete project?").
+ */
+interface DialogTitleProps$1 extends DialogTitleProps {}
+declare function DialogTitle({ className, ...props }: DialogTitleProps$1): import("react").JSX.Element;
+//#endregion
+export { DialogClose as a, DialogDescriptionProps$1 as i, DialogTitleProps$1 as n, DialogCloseProps$1 as o, DialogDescription as r, DialogTitle as t };

package/dist/dialog-viewport-CaMWJrCJ.d.ts

@@ -0,0 +1,42 @@
+import { DialogBackdropProps, DialogViewportProps } from "@base-ui/react/dialog";
+//#region src/dialog/dialog-backdrop.d.ts
+/**
+ * An overlay displayed beneath the dialog content. Renders a `<div>` element.
+ *
+ * Clicking the backdrop dismisses the dialog (unless
+ * `disablePointerDismissal` is set on the root). It dims the page and can be
+ * customised with `className` or the `render` prop.
+ */
+interface DialogBackdropProps$1 extends DialogBackdropProps {}
+declare function DialogBackdrop({ className, ...props }: DialogBackdropProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/dialog/dialog-viewport.d.ts
+/**
+ * The full-screen positioning and scroll container for the dialog content.
+ * Renders a `<div>` element.
+ *
+ * Per the Base UI anatomy, render `<Dialog.Content>` inside
+ * `<Dialog.Viewport>`:
+ *
+ * ```tsx
+ * <Dialog.Portal>
+ *   <Dialog.Backdrop />
+ *   <Dialog.Viewport>
+ *     <Dialog.Content>...</Dialog.Content>
+ *   </Dialog.Viewport>
+ * </Dialog.Portal>
+ * ```
+ *
+ * The viewport is `position: fixed`, fills the screen, and centers the content
+ * while scrolling when content is taller than the viewport. Styled with the
+ * `dialog__viewport` BEM class; override positioning with `className` if you
+ * need a different layout (e.g. a bottom sheet).
+ *
+ * Responsive: below `48rem` the viewport pins its content to the bottom edge
+ * instead of centering it, so the dialog renders as a bottom sheet. This also
+ * applies to `AlertDialog` and `CommandPalette`, which share this part.
+ */
+interface DialogViewportProps$1 extends DialogViewportProps {}
+declare function DialogViewport({ className, ...props }: DialogViewportProps$1): import("react").JSX.Element;
+//#endregion
+export { DialogBackdropProps$1 as i, DialogViewportProps$1 as n, DialogBackdrop as r, DialogViewport as t };

package/dist/dialog-viewport-vpbsq7Ib.js

@@ -0,0 +1,21 @@
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { n as dialog_module_default } from "./dialog-portal-B21WFYkQ.js";
+import { Dialog } from "@base-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/dialog-backdrop.tsx
+function DialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: mergeClassName(dialog_module_default.dialog__backdrop, className),
+		...props
+	});
+}
+//#endregion
+//#region src/dialog/dialog-viewport.tsx
+function DialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: mergeClassName(dialog_module_default.dialog__viewport, className),
+		...props
+	});
+}
+//#endregion
+export { DialogBackdrop as n, DialogViewport as t };

package/dist/drawer/index.d.ts

@@ -0,0 +1,2 @@
+import { a as DrawerProps, c as DrawerPopupSize, d as DrawerContentProps, f as DrawerBackdropProps, i as DrawerSwipeAreaProps, l as DrawerHeaderProps, n as DrawerViewportProps, o as DrawerSide, r as DrawerTriggerProps, s as DrawerPopupProps, t as Drawer, u as DrawerFooterProps } from "../index-B0uNLS7z.js";
+export { Drawer, type DrawerBackdropProps, type DrawerContentProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerPopupProps, type DrawerPopupSize, type DrawerProps, type DrawerSide, type DrawerSwipeAreaProps, type DrawerTriggerProps, type DrawerViewportProps };

package/dist/drawer/index.js

@@ -0,0 +1,2 @@
+import { t as Drawer } from "../drawer-DQmz_uCP.js";
+export { Drawer };