@vikram-hegde/skeletal 0.0.1

package/dist/drawer-DQmz_uCP.css

@@ -0,0 +1,214 @@
+@layer skeletal {
+  .KbSp5q_drawer__backdrop {
+    z-index: 40;
+    opacity: calc(1 - var(--drawer-swipe-progress));
+    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;
+    }
+
+    &[data-swiping] {
+      transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .KbSp5q_drawer__viewport {
+    z-index: 50;
+    display: flex;
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+
+    &:has([data-swipe-direction="left"]) {
+      justify-content: flex-start;
+    }
+
+    &:has([data-swipe-direction="right"]) {
+      justify-content: flex-end;
+    }
+
+    &:has([data-swipe-direction="down"]) {
+      justify-content: center;
+      align-items: flex-end;
+    }
+
+    &:has([data-swipe-direction="up"]) {
+      justify-content: center;
+      align-items: flex-start;
+    }
+  }
+
+  .KbSp5q_drawer__popup {
+    --_drawer-size: 24rem;
+    background-color: var(--sk-popover);
+    color: var(--sk-popover-foreground);
+    box-shadow: var(--sk-shadow-md);
+    touch-action: auto;
+    will-change: transform;
+    outline: none;
+    flex-direction: column;
+    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &[data-ending-style] {
+      transition-duration: calc(var(--drawer-swipe-strength) * .3s);
+    }
+
+    &[data-swiping] {
+      transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .KbSp5q_drawer__popup[data-swipe-direction="left"], .KbSp5q_drawer__popup[data-swipe-direction="right"] {
+    block-size: 100%;
+    inline-size: min(var(--_drawer-size), 100%);
+    max-inline-size: 100vi;
+  }
+
+  .KbSp5q_drawer__popup[data-swipe-direction="right"] {
+    border-inline-start: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius) 0 0 var(--sk-radius);
+    transform: translateX(var(--drawer-swipe-movement-x));
+
+    &[data-starting-style], &[data-ending-style] {
+      transform: translateX(calc(100% + 1px));
+    }
+  }
+
+  .KbSp5q_drawer__popup[data-swipe-direction="left"] {
+    border-inline-end: 1px solid var(--sk-border);
+    border-radius: 0 var(--sk-radius) var(--sk-radius) 0;
+    transform: translateX(var(--drawer-swipe-movement-x));
+
+    &[data-starting-style], &[data-ending-style] {
+      transform: translateX(calc(-100% - 1px));
+    }
+  }
+
+  .KbSp5q_drawer__popup[data-swipe-direction="down"], .KbSp5q_drawer__popup[data-swipe-direction="up"] {
+    inline-size: 100%;
+    max-block-size: min(var(--_drawer-size), 85dvb);
+  }
+
+  .KbSp5q_drawer__popup[data-swipe-direction="down"] {
+    border-block-start: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius) var(--sk-radius) 0 0;
+    transform: translateY(var(--drawer-swipe-movement-y));
+
+    &[data-starting-style], &[data-ending-style] {
+      transform: translateY(calc(100% + 1px));
+    }
+  }
+
+  .KbSp5q_drawer__popup[data-swipe-direction="up"] {
+    border-block-end: 1px solid var(--sk-border);
+    border-radius: 0 0 var(--sk-radius) var(--sk-radius);
+    transform: translateY(var(--drawer-swipe-movement-y));
+
+    &[data-starting-style], &[data-ending-style] {
+      transform: translateY(calc(-100% - 1px));
+    }
+  }
+
+  .KbSp5q_drawer__popup--sm {
+    --_drawer-size: 20rem;
+  }
+
+  .KbSp5q_drawer__popup--lg {
+    --_drawer-size: 32rem;
+  }
+
+  .KbSp5q_drawer__content {
+    overflow-block: auto;
+    overscroll-behavior: contain;
+    flex: auto;
+    min-block-size: 0;
+    padding: 1.5rem;
+
+    [data-swipe-direction="down"] & {
+      padding-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
+    }
+  }
+
+  .KbSp5q_drawer__header {
+    background-color: var(--sk-popover);
+    border-block-end: 1px solid var(--sk-border);
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    justify-content: space-between;
+    align-items: center;
+    gap: .5rem;
+    padding-block: .75rem;
+    padding-inline: 1.5rem;
+    display: flex;
+
+    [data-swipe-direction="up"] & {
+      padding-block-start: calc(.75rem + env(safe-area-inset-top, 0px));
+    }
+  }
+
+  .KbSp5q_drawer__footer {
+    background-color: var(--sk-muted);
+    border-block-start: 1px solid var(--sk-border);
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    align-items: center;
+    gap: .5rem;
+    padding-block: .75rem;
+    padding-inline: 1.5rem;
+    display: flex;
+
+    [data-swipe-direction="down"] & {
+      padding-block-end: calc(.75rem + env(safe-area-inset-bottom, 0px));
+    }
+  }
+
+  .KbSp5q_drawer__swipe-area {
+    z-index: 20;
+    touch-action: pan-y;
+    position: fixed;
+
+    &[data-swipe-direction="left"] {
+      inline-size: 1.5rem;
+      inset-block: 0;
+      inset-inline-end: 0;
+    }
+
+    &[data-swipe-direction="right"] {
+      inline-size: 1.5rem;
+      inset-block: 0;
+      inset-inline-start: 0;
+    }
+
+    &[data-swipe-direction="up"] {
+      block-size: 1.5rem;
+      inset-block-end: 0;
+      inset-inline: 0;
+    }
+
+    &[data-swipe-direction="down"] {
+      block-size: 1.5rem;
+      inset-block-start: 0;
+      inset-inline: 0;
+    }
+  }
+}

package/dist/drawer-DQmz_uCP.js

@@ -0,0 +1,180 @@
+import './drawer-DQmz_uCP.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { t as DialogPortal } from "./dialog-portal-B21WFYkQ.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 { t as Stack } from "./stack-BzFVrsmT.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/drawer/drawer.module.css
+var drawer_module_default = {
+	"drawer__backdrop": "KbSp5q_drawer__backdrop",
+	"drawer__content": "KbSp5q_drawer__content",
+	"drawer__footer": "KbSp5q_drawer__footer",
+	"drawer__header": "KbSp5q_drawer__header",
+	"drawer__popup": "KbSp5q_drawer__popup",
+	"drawer__popup--lg": "KbSp5q_drawer__popup--lg",
+	"drawer__popup--sm": "KbSp5q_drawer__popup--sm",
+	"drawer__swipe-area": "KbSp5q_drawer__swipe-area",
+	"drawer__viewport": "KbSp5q_drawer__viewport"
+};
+//#endregion
+//#region src/drawer/drawer-backdrop.tsx
+function DrawerBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		className: mergeClassName(drawer_module_default.drawer__backdrop, className),
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/drawer-content.tsx
+function DrawerContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Content, {
+		className: mergeClassName(drawer_module_default.drawer__content, className),
+		...props,
+		children: /* @__PURE__ */ jsx(Stack, {
+			space: "1.25rem",
+			children
+		})
+	});
+}
+//#endregion
+//#region src/drawer/drawer-footer.tsx
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(drawer_module_default.drawer__footer, className),
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/drawer-header.tsx
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(drawer_module_default.drawer__header, className),
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/drawer-popup.tsx
+function DrawerPopup({ className, size = "md", children, ...props }) {
+	const sizeClass = size !== "md" ? drawer_module_default[`drawer__popup--${size}`] : void 0;
+	return /* @__PURE__ */ jsx(Drawer.Popup, {
+		className: mergeClassName(clsx(drawer_module_default.drawer__popup, sizeClass), className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/drawer/drawer-root.tsx
+/**
+* Maps a `side` to the Base UI swipe direction that dismisses the drawer.
+* Positioning in the CSS keys off the `data-swipe-direction` attribute Base UI
+* sets on the popup, so a single `side` prop drives both gesture and layout.
+*/
+const SIDE_TO_SWIPE_DIRECTION = {
+	left: "left",
+	right: "right",
+	top: "up",
+	bottom: "down"
+};
+function DrawerRoot({ side = "right", swipeDirection, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		swipeDirection: swipeDirection ?? SIDE_TO_SWIPE_DIRECTION[side],
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/drawer-swipe-area.tsx
+function DrawerSwipeArea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.SwipeArea, {
+		className: mergeClassName(drawer_module_default["drawer__swipe-area"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/drawer-trigger.tsx
+function DrawerTrigger({ className, variant = "primary", size = "md", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/drawer-viewport.tsx
+function DrawerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Viewport, {
+		className: mergeClassName(drawer_module_default.drawer__viewport, className),
+		...props
+	});
+}
+//#endregion
+//#region src/drawer/index.ts
+/**
+* Compound component for drawers.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Drawer } from '@vikram-hegde/skeletal'
+*
+* <Drawer.Root side="right">
+*   <Drawer.Trigger>Open</Drawer.Trigger>
+*   <Drawer.Portal>
+*     <Drawer.Backdrop />
+*     <Drawer.Viewport>
+*       <Drawer.Popup>
+*         <Drawer.Header>
+*           <Drawer.Title>Title</Drawer.Title>
+*           <Drawer.Close size="sm" variant="ghost">✕</Drawer.Close>
+*         </Drawer.Header>
+*         <Drawer.Content>
+*           <Drawer.Description>Description</Drawer.Description>
+*         </Drawer.Content>
+*         <Drawer.Footer>
+*           <Drawer.Close>Cancel</Drawer.Close>
+*           <Drawer.Close variant="primary">Confirm</Drawer.Close>
+*         </Drawer.Footer>
+*       </Drawer.Popup>
+*     </Drawer.Viewport>
+*   </Drawer.Portal>
+* </Drawer.Root>
+* ```
+*
+* Composition follows the Base UI anatomy — `Drawer.Viewport` is the
+* full-screen positioning/scroll container that pins `Drawer.Popup` to the
+* edge set by the root's `side` prop.
+*
+* All parts are thin styled wrappers over Base UI's `Drawer`, so every Base UI
+* prop, `render` override, and ref behaves the same. The drawer adds swipe-to-
+* dismiss gestures on top of a Dialog, so `Backdrop`, `Viewport`, `Popup`,
+* `Content`, and `SwipeArea` are drawer-specific; `Portal`, `Title`,
+* `Description`, and `Close` are the same styled parts as `Dialog`'s (their
+* prop types live under `Dialog*Props`). `Header` and `Footer` are plain
+* sticky bars that stay pinned while `Content` scrolls.
+*
+* Position the drawer with the `side` prop on `Root`. Use `SwipeArea` to let
+* users swipe open a closed drawer from the screen edge.
+*/
+const Drawer$1 = {
+	Root: DrawerRoot,
+	Trigger: DrawerTrigger,
+	Portal: DialogPortal,
+	Backdrop: DrawerBackdrop,
+	Viewport: DrawerViewport,
+	Popup: DrawerPopup,
+	Header: DrawerHeader,
+	Content: DrawerContent,
+	Footer: DrawerFooter,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose,
+	SwipeArea: DrawerSwipeArea
+};
+//#endregion
+export { Drawer$1 as t };

package/dist/icon/index.d.ts

@@ -0,0 +1,2 @@
+import { n as IconProps, t as Icon } from "../index-kpw3_4q_.js";
+export { Icon, type IconProps };

package/dist/icon/index.js

@@ -0,0 +1,2 @@
+import { t as Icon } from "../icon-DBOdxNvH.js";
+export { Icon };

package/dist/icon-DBOdxNvH.css

@@ -0,0 +1,6 @@
+@layer skeletal {
+  .caZ9ea_icon {
+    flex-shrink: 0;
+    display: block;
+  }
+}

package/dist/icon-DBOdxNvH.js

@@ -0,0 +1,20 @@
+import './icon-DBOdxNvH.css';
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/icon/icon.module.css
+var icon_module_default = { "icon": "caZ9ea_icon" };
+//#endregion
+//#region src/icon/icon.tsx
+function Icon({ name: IconComponent, size = 20, weight = "regular", alt, className, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }) {
+	const ariaProps = ariaLabel === void 0 && ariaHidden === void 0 && alt === void 0 ? { "aria-hidden": true } : ariaHidden !== void 0 ? { "aria-hidden": ariaHidden } : {};
+	return /* @__PURE__ */ jsx(IconComponent, {
+		size,
+		weight,
+		...alt !== void 0 && { alt },
+		...ariaProps,
+		className: clsx(icon_module_default.icon, className),
+		...props
+	});
+}
+//#endregion
+export { Icon as t };

package/dist/index-A2QmU5r9.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from "react";
+//#region src/badge/badge.d.ts
+/**
+ * The visual emphasis of the badge. Choose based on how much attention the
+ * label should draw:
+ * - `secondary`: muted neutral fill — the default for tags, labels, and
+ *   metadata chips that shouldn't compete with content.
+ * - `primary`: accent fill — draws the eye; use sparingly for a single
+ *   highlight (e.g. the active filter in a set).
+ * - `outline`: transparent with a border — the lightest emphasis; good when
+ *   many badges sit together (filter rows) and a filled chip would be loud.
+ * - `destructive`: red fill — irreversible or error states (blocked, failed,
+ *   removed). Pair with surrounding copy that explains the state.
+ *
+ * @default variant = 'secondary'
+ */
+type BadgeVariant = "primary" | "secondary" | "outline" | "destructive";
+/**
+ * A small pill that labels, categorizes, or marks status. Renders a `<span>`.
+ *
+ * Pure presentational — no state, no Base UI, so it's safe to use anywhere a
+ * tag is needed. Pick a `variant` for emphasis, and pass `dot` to lead with a
+ * status dot (tinted with the badge's foreground color) for live indicators
+ * such as "Online" or "Failed".
+ *
+ * The badge keeps itself to one line and truncates nothing — keep labels
+ * short. Long text would stretch the pill awkwardly.
+ */
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Visual emphasis of the badge. @default 'secondary' */
+  variant?: BadgeVariant;
+  /** Whether the badge leads with a status dot tinted with the foreground color. @default false */
+  dot?: boolean;
+}
+declare function Badge({ variant, dot, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion
+export { BadgeProps as n, BadgeVariant as r, Badge as t };