@vikram-hegde/skeletal 0.0.1

package/dist/menu-DRdGMI_-.css

@@ -0,0 +1,236 @@
+@layer skeletal {
+  .At2ArW_menu__backdrop {
+    z-index: 40;
+    background-color: light-dark(oklch(0% 0 0 / .25), oklch(0% 0 0 / .5));
+    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;
+    }
+  }
+
+  .At2ArW_menu__portal {
+    display: contents;
+  }
+
+  .At2ArW_menu__positioner {
+    z-index: 50;
+    inline-size: var(--positioner-width);
+    block-size: var(--positioner-height);
+    max-inline-size: var(--available-width);
+    max-block-size: var(--available-height);
+    outline: none;
+  }
+
+  .At2ArW_menu__popup {
+    z-index: 50;
+    min-inline-size: 10rem;
+    inline-size: var(--popup-width, auto);
+    block-size: var(--popup-height, auto);
+    border: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-popover);
+    color: var(--sk-popover-foreground);
+    box-shadow: var(--sk-shadow-md);
+    transform-origin: var(--transform-origin);
+    grid-template-columns: 1.25rem 1fr;
+    padding: .25rem;
+    transition: scale .15s ease-out, opacity .15s ease-out;
+    display: grid;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .98;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .At2ArW_menu__item, .At2ArW_menu__link-item, .At2ArW_menu__radio-item, .At2ArW_menu__checkbox-item, .At2ArW_menu__submenu-trigger {
+    border-radius: var(--sk-radius);
+    min-block-size: 2.25rem;
+    inline-size: 100%;
+    color: var(--sk-foreground);
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: none;
+    outline: none;
+    grid-column: 1 / -1;
+    align-items: center;
+    gap: .5rem;
+    padding-block: .375rem;
+    padding-inline: .625rem;
+    font-family: inherit;
+    font-size: .875rem;
+    line-height: 1.25;
+    display: flex;
+
+    &[data-highlighted] {
+      background: var(--sk-accent);
+      color: var(--sk-accent-foreground);
+    }
+
+    &[data-disabled] {
+      color: var(--sk-muted-foreground);
+      cursor: default;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sk-ring);
+      outline-offset: -2px;
+    }
+  }
+
+  .At2ArW_menu__link-item {
+    text-decoration: none;
+  }
+
+  .At2ArW_menu__radio-item, .At2ArW_menu__checkbox-item {
+    grid-template-columns: 1.25rem 1fr;
+    align-items: center;
+    column-gap: .5rem;
+    padding-block: .375rem;
+    padding-inline: .625rem;
+    display: grid;
+  }
+
+  .At2ArW_menu__radio-item:before, .At2ArW_menu__checkbox-item:before {
+    content: "";
+    grid-area: 1 / 1;
+  }
+
+  .At2ArW_menu__item--danger {
+    color: var(--sk-destructive);
+
+    &[data-highlighted] {
+      background: var(--sk-destructive);
+      color: var(--sk-destructive-foreground);
+    }
+  }
+
+  .At2ArW_menu__submenu-trigger {
+    position: relative;
+
+    &:after {
+      content: "";
+      border-block-start: 1.5px solid;
+      border-inline-end: 1.5px solid;
+      block-size: .375rem;
+      inline-size: .375rem;
+      margin-inline-start: auto;
+      transform: rotate(45deg);
+    }
+
+    &[data-popup-open] {
+      background: var(--sk-accent);
+      color: var(--sk-accent-foreground);
+    }
+  }
+
+  .At2ArW_menu__group, .At2ArW_menu__radio-group {
+    display: contents;
+  }
+
+  .At2ArW_menu__separator {
+    background-color: var(--sk-border);
+    grid-column: 1 / -1;
+    block-size: 1px;
+    margin-block: .375rem;
+    margin-inline: -.25rem;
+  }
+
+  .At2ArW_menu__group-label {
+    color: var(--sk-muted-foreground);
+    user-select: none;
+    grid-column: 1 / -1;
+    padding-block: .5rem .25rem;
+    padding-inline: .625rem;
+    font-size: .75rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .At2ArW_menu__radio-item-indicator, .At2ArW_menu__checkbox-item-indicator {
+    color: var(--sk-muted-foreground);
+    grid-area: 1 / 1;
+    justify-content: center;
+    align-items: center;
+    transition: scale .1s ease-out, opacity .1s ease-out;
+    display: inline-flex;
+
+    &[data-checked] {
+      color: var(--sk-foreground);
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .5;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .At2ArW_menu__arrow {
+    block-size: 6px;
+    inline-size: 12px;
+    display: block;
+    position: absolute;
+    overflow: clip;
+
+    &:before {
+      content: "";
+      border: 1px solid var(--sk-border);
+      background-color: var(--sk-popover);
+      block-size: 8.49px;
+      inline-size: 8.49px;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: 50%;
+      transform: translate(-50%, 50%) rotate(45deg);
+    }
+
+    &[data-side="bottom"] {
+      inset-block-start: -6px;
+    }
+
+    &[data-side="left"] {
+      inset-inline-end: -9px;
+      transform: rotate(90deg);
+    }
+
+    &[data-side="right"] {
+      inset-inline-start: -9px;
+      transform: rotate(-90deg);
+    }
+
+    &[data-side="top"] {
+      inset-block-end: -6px;
+      transform: rotate(180deg);
+    }
+  }
+
+  .At2ArW_menu__viewport {
+    grid-column: 1 / -1;
+    block-size: 100%;
+    inline-size: 100%;
+    padding: 0;
+    overflow: clip;
+  }
+}

package/dist/menu-DRdGMI_-.js

@@ -0,0 +1,243 @@
+import './menu-DRdGMI_-.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { t as Button } from "./button-B48UNbaC.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/menu/menu.module.css
+var menu_module_default = {
+	"menu__arrow": "At2ArW_menu__arrow",
+	"menu__backdrop": "At2ArW_menu__backdrop",
+	"menu__checkbox-item": "At2ArW_menu__checkbox-item",
+	"menu__checkbox-item-indicator": "At2ArW_menu__checkbox-item-indicator",
+	"menu__group": "At2ArW_menu__group",
+	"menu__group-label": "At2ArW_menu__group-label",
+	"menu__item": "At2ArW_menu__item",
+	"menu__item--danger": "At2ArW_menu__item--danger",
+	"menu__link-item": "At2ArW_menu__link-item",
+	"menu__popup": "At2ArW_menu__popup",
+	"menu__portal": "At2ArW_menu__portal",
+	"menu__positioner": "At2ArW_menu__positioner",
+	"menu__radio-group": "At2ArW_menu__radio-group",
+	"menu__radio-item": "At2ArW_menu__radio-item",
+	"menu__radio-item-indicator": "At2ArW_menu__radio-item-indicator",
+	"menu__separator": "At2ArW_menu__separator",
+	"menu__submenu-trigger": "At2ArW_menu__submenu-trigger",
+	"menu__viewport": "At2ArW_menu__viewport"
+};
+//#endregion
+//#region src/menu/menu-arrow.tsx
+function MenuArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		className: mergeClassName(menu_module_default.menu__arrow, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-backdrop.tsx
+function MenuBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Backdrop, {
+		className: mergeClassName(menu_module_default.menu__backdrop, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-checkbox-item.tsx
+function MenuCheckboxItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		className: mergeClassName(menu_module_default["menu__checkbox-item"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-checkbox-item-indicator.tsx
+function MenuCheckboxItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		className: mergeClassName(menu_module_default["menu__checkbox-item-indicator"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-group.tsx
+function MenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		className: mergeClassName(menu_module_default.menu__group, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-group-label.tsx
+function MenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: mergeClassName(menu_module_default["menu__group-label"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-item.tsx
+function MenuItem({ className, danger = false, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		className: mergeClassName(clsx(menu_module_default.menu__item, danger && menu_module_default["menu__item--danger"]), className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-link-item.tsx
+function MenuLinkItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.LinkItem, {
+		className: mergeClassName(menu_module_default["menu__link-item"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-popup.tsx
+function MenuPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		className: mergeClassName(menu_module_default.menu__popup, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-portal.tsx
+function MenuPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		className: mergeClassName(menu_module_default.menu__portal, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-positioner.tsx
+function MenuPositioner({ className, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: mergeClassName(menu_module_default.menu__positioner, className),
+		sideOffset,
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-radio-group.tsx
+function MenuRadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		className: mergeClassName(menu_module_default["menu__radio-group"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-radio-item.tsx
+function MenuRadioItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItem, {
+		className: mergeClassName(menu_module_default["menu__radio-item"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-radio-item-indicator.tsx
+function MenuRadioItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		className: mergeClassName(menu_module_default["menu__radio-item-indicator"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-root.tsx
+function MenuRoot(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+//#endregion
+//#region src/menu/menu-separator.tsx
+function MenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		className: mergeClassName(menu_module_default.menu__separator, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-submenu-root.tsx
+function MenuSubmenuRoot(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+//#endregion
+//#region src/menu/menu-submenu-trigger.tsx
+function MenuSubmenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+		className: mergeClassName(menu_module_default["menu__submenu-trigger"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-trigger.tsx
+function MenuTrigger({ className, variant = "outline", size = "md", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/menu-viewport.tsx
+function MenuViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Viewport, {
+		className: mergeClassName(menu_module_default.menu__viewport, className),
+		...props
+	});
+}
+//#endregion
+//#region src/menu/index.ts
+/**
+* Compound component for dropdown menus.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Menu } from '@vikram-hegde/skeletal'
+*
+* <Menu.Root>
+*   <Menu.Trigger>Options</Menu.Trigger>
+*   <Menu.Portal>
+*     <Menu.Positioner sideOffset={8} align="start">
+*       <Menu.Popup>
+*         <Menu.Item onClick={…}>Edit</Menu.Item>
+*         <Menu.Separator />
+*         <Menu.Item danger>Delete</Menu.Item>
+*       </Menu.Popup>
+*     </Menu.Positioner>
+*   </Menu.Portal>
+* </Menu.Root>
+* ```
+*
+* Composition follows the Base UI anatomy — `Menu.Positioner` floats the
+* popup against the trigger and handles collision avoidance; `Menu.Portal`
+* moves it to `<body>`.
+*
+* All parts are thin styled wrappers over Base UI's `Menu`, so every Base UI
+* prop, `render` override, and ref behaves the same. Part prop types are
+* exported separately (`MenuItemProps`, `MenuPopupProps`, etc.).
+*/
+const Menu$1 = {
+	Root: MenuRoot,
+	Trigger: MenuTrigger,
+	Portal: MenuPortal,
+	Backdrop: MenuBackdrop,
+	Positioner: MenuPositioner,
+	Popup: MenuPopup,
+	Item: MenuItem,
+	LinkItem: MenuLinkItem,
+	Separator: MenuSeparator,
+	Group: MenuGroup,
+	GroupLabel: MenuGroupLabel,
+	SubmenuRoot: MenuSubmenuRoot,
+	SubmenuTrigger: MenuSubmenuTrigger,
+	RadioGroup: MenuRadioGroup,
+	RadioItem: MenuRadioItem,
+	RadioItemIndicator: MenuRadioItemIndicator,
+	CheckboxItem: MenuCheckboxItem,
+	CheckboxItemIndicator: MenuCheckboxItemIndicator,
+	Arrow: MenuArrow,
+	Viewport: MenuViewport
+};
+//#endregion
+export { Menu$1 as t };

package/dist/merge-class-name-C4KJJGuK.js

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+//#region src/lib/merge-class-name.ts
+/**
+* Combines a static design-system class with a consumer-supplied `className`.
+*
+* Base UI's `className` prop accepts either a plain string or a function of the
+* component's state. This helper preserves both shapes so styled wrappers can
+* add their own BEM class without dropping the state-driven variant.
+*/
+function mergeClassName(base, className) {
+	if (typeof className === "function") return (state) => clsx(base, className(state));
+	return clsx(base, className);
+}
+//#endregion
+export { mergeClassName as t };

package/dist/popover/index.d.ts

@@ -0,0 +1,2 @@
+import { a as PopoverTitleProps, c as PopoverPositionerProps, d as PopoverCloseProps, f as PopoverBackdropProps, i as PopoverTriggerProps, l as PopoverPortalProps, n as PopoverHandle, o as PopoverProps, p as PopoverArrowProps, r as PopoverViewportProps, s as PopoverPopupProps, t as Popover, u as PopoverDescriptionProps } from "../index-W3ozKcis.js";
+export { Popover, type PopoverArrowProps, type PopoverBackdropProps, type PopoverCloseProps, type PopoverDescriptionProps, PopoverHandle, type PopoverPopupProps, type PopoverPortalProps, type PopoverPositionerProps, type PopoverProps, type PopoverTitleProps, type PopoverTriggerProps, type PopoverViewportProps };

package/dist/popover/index.js

@@ -0,0 +1,2 @@
+import { t as Popover } from "../popover-CenynT0Z.js";
+export { Popover };

package/dist/popover-CenynT0Z.css

@@ -0,0 +1,139 @@
+@layer skeletal {
+  .K9_uLa_popover__portal {
+    display: contents;
+  }
+
+  .K9_uLa_popover__backdrop {
+    z-index: 40;
+    background-color: light-dark(oklch(0% 0 0 / .25), oklch(0% 0 0 / .5));
+    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;
+    }
+  }
+
+  .K9_uLa_popover__positioner {
+    z-index: 50;
+    inline-size: var(--positioner-width);
+    block-size: var(--positioner-height);
+    max-inline-size: var(--available-width);
+    max-block-size: var(--available-height);
+    outline: none;
+  }
+
+  .K9_uLa_popover__popup {
+    z-index: 50;
+    inline-size: var(--popup-width, auto);
+    max-inline-size: min(22rem, 100vi - 2rem);
+    max-block-size: var(--available-height, none);
+    border: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-popover);
+    color: var(--sk-popover-foreground);
+    box-shadow: var(--sk-shadow-md);
+    transform-origin: var(--transform-origin);
+    outline: none;
+    flex-direction: column;
+    gap: .375rem;
+    padding: 1rem;
+    transition: scale .15s ease-out, opacity .15s ease-out;
+    display: flex;
+    position: relative;
+    overflow: visible;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .98;
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .K9_uLa_popover__title {
+    color: var(--sk-foreground);
+    margin: 0;
+    font-size: .875rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .K9_uLa_popover__description {
+    color: var(--sk-muted-foreground);
+    margin: 0;
+    font-size: .875rem;
+    line-height: 1.5;
+  }
+
+  .K9_uLa_popover__arrow {
+    block-size: 6px;
+    inline-size: 12px;
+    display: block;
+    position: absolute;
+    overflow: clip;
+
+    &:before {
+      content: "";
+      border: 1px solid var(--sk-border);
+      background-color: var(--sk-popover);
+      block-size: 8.49px;
+      inline-size: 8.49px;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: 50%;
+      transform: translate(-50%, 50%) rotate(45deg);
+    }
+
+    &[data-side="bottom"] {
+      inset-block-start: -6px;
+    }
+
+    &[data-side="left"] {
+      inset-inline-end: -9px;
+      transform: rotate(90deg);
+    }
+
+    &[data-side="right"] {
+      inset-inline-start: -9px;
+      transform: rotate(-90deg);
+    }
+
+    &[data-side="inline-start"] {
+      inset-inline-end: -9px;
+      transform: rotate(90deg);
+    }
+
+    &[data-side="inline-end"] {
+      inset-inline-start: -9px;
+      transform: rotate(-90deg);
+    }
+
+    &[data-side="top"] {
+      inset-block-end: -6px;
+      transform: rotate(180deg);
+    }
+  }
+
+  .K9_uLa_popover__viewport {
+    block-size: 100%;
+    inline-size: 100%;
+    padding: 0;
+    overflow: clip;
+  }
+}