@vikram-hegde/skeletal 0.0.1

package/dist/select-BaqBHUac.css

@@ -0,0 +1,273 @@
+@layer skeletal {
+  ._4-DZzW_select__label {
+    color: var(--sk-foreground);
+    user-select: none;
+    margin-block-end: .5rem;
+    padding-block: .125rem;
+    padding-inline: 0;
+    font-size: .8125rem;
+    font-weight: 500;
+    line-height: 1.25;
+
+    &[data-disabled] {
+      color: var(--sk-muted-foreground);
+    }
+  }
+
+  ._4-DZzW_select__trigger {
+    text-align: start;
+    justify-content: space-between;
+    padding-inline: .75rem;
+    font-weight: 400;
+
+    &[data-pressed] {
+      transform: none;
+    }
+
+    &[data-invalid] {
+      border-color: var(--sk-destructive);
+      box-shadow: 0 0 0 1px var(--sk-destructive);
+    }
+
+    &[data-invalid]:focus-visible {
+      outline-color: var(--sk-destructive);
+    }
+  }
+
+  ._4-DZzW_select__value {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.4;
+    overflow: hidden;
+
+    &[data-placeholder] {
+      color: var(--sk-muted-foreground);
+    }
+  }
+
+  ._4-DZzW_select__icon {
+    color: var(--sk-muted-foreground);
+    flex-shrink: 0;
+    transition: transform .15s ease-out;
+    display: inline-flex;
+
+    &[data-popup-open] {
+      transform: rotate(180deg);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  ._4-DZzW_select__portal {
+    display: contents;
+  }
+
+  ._4-DZzW_select__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;
+    }
+  }
+
+  ._4-DZzW_select__positioner {
+    z-index: 50;
+    outline: none;
+  }
+
+  ._4-DZzW_select__popup {
+    z-index: 50;
+    min-inline-size: max(var(--anchor-width), 13rem);
+    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);
+    padding: .25rem;
+    transition: scale .15s ease-out, opacity .15s ease-out;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .98;
+    }
+
+    &[data-side="none"] {
+      opacity: 1;
+      min-inline-size: max(calc(var(--anchor-width) + 1.75rem), 13rem);
+      transition: none;
+      scale: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  ._4-DZzW_select__list {
+    max-block-size: var(--available-height);
+    overflow-block: auto;
+    scroll-padding-block: 1.5rem;
+    position: relative;
+  }
+
+  ._4-DZzW_select__item {
+    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-template-columns: 1.25rem 1fr;
+    align-items: center;
+    gap: .5rem;
+    padding-block: .375rem;
+    padding-inline: .625rem;
+    font-family: inherit;
+    font-size: .875rem;
+    line-height: 1.25;
+    display: grid;
+
+    &[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;
+    }
+  }
+
+  ._4-DZzW_select__item-indicator {
+    grid-column: 1;
+    justify-content: center;
+    align-items: center;
+    transition: scale .1s ease-out, opacity .1s ease-out;
+    display: inline-flex;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .5;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  ._4-DZzW_select__item-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    grid-column: 2;
+    overflow: hidden;
+  }
+
+  ._4-DZzW_select__group {
+    display: contents;
+  }
+
+  ._4-DZzW_select__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;
+  }
+
+  ._4-DZzW_select__separator {
+    background-color: var(--sk-border);
+    grid-column: 1 / -1;
+    block-size: 1px;
+    margin-block: .375rem;
+    margin-inline: -.25rem;
+  }
+
+  ._4-DZzW_select__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);
+    }
+  }
+
+  ._4-DZzW_select__scroll-arrow {
+    z-index: 1;
+    block-size: 1.25rem;
+    inline-size: 100%;
+    color: var(--sk-muted-foreground);
+    background-color: var(--sk-popover);
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset-inline-start: 0;
+
+    &[data-direction="up"] {
+      inset-block-start: 0;
+    }
+
+    &[data-direction="down"] {
+      inset-block-end: 0;
+    }
+  }
+}

package/dist/select-BaqBHUac.js

@@ -0,0 +1,254 @@
+import './select-BaqBHUac.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { t as Button } from "./button-B48UNbaC.js";
+import { t as Icon$1 } from "./icon-DBOdxNvH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDown } from "@phosphor-icons/react";
+import { Select } from "@base-ui/react/select";
+//#region src/select/select.module.css
+var select_module_default = {
+	"select__arrow": "_4-DZzW_select__arrow",
+	"select__backdrop": "_4-DZzW_select__backdrop",
+	"select__group": "_4-DZzW_select__group",
+	"select__group-label": "_4-DZzW_select__group-label",
+	"select__icon": "_4-DZzW_select__icon",
+	"select__item": "_4-DZzW_select__item",
+	"select__item-indicator": "_4-DZzW_select__item-indicator",
+	"select__item-text": "_4-DZzW_select__item-text",
+	"select__label": "_4-DZzW_select__label",
+	"select__list": "_4-DZzW_select__list",
+	"select__popup": "_4-DZzW_select__popup",
+	"select__portal": "_4-DZzW_select__portal",
+	"select__positioner": "_4-DZzW_select__positioner",
+	"select__scroll-arrow": "_4-DZzW_select__scroll-arrow",
+	"select__separator": "_4-DZzW_select__separator",
+	"select__trigger": "_4-DZzW_select__trigger",
+	"select__value": "_4-DZzW_select__value"
+};
+//#endregion
+//#region src/select/select-arrow.tsx
+function SelectArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Arrow, {
+		className: mergeClassName(select_module_default.select__arrow, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-backdrop.tsx
+function SelectBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Backdrop, {
+		className: mergeClassName(select_module_default.select__backdrop, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-group.tsx
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		className: mergeClassName(select_module_default.select__group, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-group-label.tsx
+function SelectGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		className: mergeClassName(select_module_default["select__group-label"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-item.tsx
+function SelectItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Item, {
+		className: mergeClassName(select_module_default.select__item, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-item-indicator.tsx
+function SelectItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ItemIndicator, {
+		className: mergeClassName(select_module_default["select__item-indicator"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-item-text.tsx
+function SelectItemText({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ItemText, {
+		className: mergeClassName(select_module_default["select__item-text"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-label.tsx
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Label, {
+		className: mergeClassName(select_module_default.select__label, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-list.tsx
+function SelectList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.List, {
+		className: mergeClassName(select_module_default.select__list, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-popup.tsx
+function SelectPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Popup, {
+		className: mergeClassName(select_module_default.select__popup, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-portal.tsx
+function SelectPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, {
+		className: mergeClassName(select_module_default.select__portal, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-positioner.tsx
+function SelectPositioner({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Positioner, {
+		className: mergeClassName(select_module_default.select__positioner, className),
+		sideOffset,
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-root.tsx
+function SelectRoot(props) {
+	return /* @__PURE__ */ jsx(Select.Root, { ...props });
+}
+//#endregion
+//#region src/select/select-scroll-down-arrow.tsx
+function SelectScrollDownArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		className: mergeClassName(select_module_default["select__scroll-arrow"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-scroll-up-arrow.tsx
+function SelectScrollUpArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		className: mergeClassName(select_module_default["select__scroll-arrow"], className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-separator.tsx
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: mergeClassName(select_module_default.select__separator, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/select-trigger.tsx
+function SelectTrigger({ className, variant = "outline", size = "md", fullWidth = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className: mergeClassName(select_module_default.select__trigger, className)
+		}),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			className: select_module_default.select__icon,
+			children: /* @__PURE__ */ jsx(Icon$1, {
+				name: CaretDown,
+				size: 16
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/select/select-value.tsx
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		className: mergeClassName(select_module_default.select__value, className),
+		...props
+	});
+}
+//#endregion
+//#region src/select/index.ts
+/**
+* Compound component for choosing a predefined value from a dropdown.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Select } from '@vikram-hegde/skeletal'
+*
+* const items = [
+*   { value: 'system', label: 'System default' },
+*   { value: 'light', label: 'Light' },
+*   { value: 'dark', label: 'Dark' },
+* ]
+*
+* <Select.Root items={items} defaultValue="system">
+*   <Select.Label>Theme</Select.Label>
+*   <Select.Trigger>
+*     <Select.Value placeholder="Select theme" />
+*   </Select.Trigger>
+*   <Select.Portal>
+*     <Select.Positioner>
+*       <Select.Popup>
+*         <Select.List>
+*           {items.map((item) => (
+*             <Select.Item key={item.value} value={item.value}>
+*               <Select.ItemIndicator>
+*                 <Icon name={Check} size={14} />
+*               </Select.ItemIndicator>
+*               <Select.ItemText>{item.label}</Select.ItemText>
+*             </Select.Item>
+*           ))}
+*         </Select.List>
+*       </Select.Popup>
+*     </Select.Positioner>
+*   </Select.Portal>
+* </Select.Root>
+* ```
+*
+* Composition follows the Base UI anatomy — `Select.Positioner` floats the
+* popup against the trigger and handles collision avoidance; by default it
+* overlaps the trigger so the selected item aligns with the trigger's value
+* text (`alignItemWithTrigger`). `Select.Portal` moves the popup to `<body>`.
+* `Select.ScrollUpArrow` / `Select.ScrollDownArrow` give edge scrolling on long
+* lists. The trigger owns its `CaretDown` chevron — no `Select.Icon` is needed.
+*
+* All parts are thin styled wrappers over Base UI's `Select`, so every Base UI
+* prop, `render` override, and ref behaves the same. Part prop types are
+* exported separately (`SelectProps`, `SelectItemProps`, etc.).
+*/
+const Select$1 = {
+	Root: SelectRoot,
+	Label: SelectLabel,
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Portal: SelectPortal,
+	Backdrop: SelectBackdrop,
+	Positioner: SelectPositioner,
+	Popup: SelectPopup,
+	List: SelectList,
+	Item: SelectItem,
+	ItemIndicator: SelectItemIndicator,
+	ItemText: SelectItemText,
+	Arrow: SelectArrow,
+	ScrollUpArrow: SelectScrollUpArrow,
+	ScrollDownArrow: SelectScrollDownArrow,
+	Group: SelectGroup,
+	GroupLabel: SelectGroupLabel,
+	Separator: SelectSeparator
+};
+//#endregion
+export { Select$1 as t };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { n as SkeletonProps, t as Skeleton } from "../index-BLFVnve3.js";
+export { Skeleton, type SkeletonProps };

package/dist/skeleton/index.js

@@ -0,0 +1,2 @@
+import { t as Skeleton } from "../skeleton-W6fwO5pf.js";
+export { Skeleton };

package/dist/skeleton-W6fwO5pf.css

@@ -0,0 +1,88 @@
+@layer skeletal {
+  .bfarVq_skeleton {
+    --_skeleton-base: light-dark(oklch(91% 0 0), oklch(25% 0 0));
+    --_skeleton-highlight: light-dark(oklch(96% 0 0), oklch(32% 0 0));
+    --_skeleton-duration: 2s;
+    --_skeleton-transition-duration: .2s;
+    display: contents;
+  }
+
+  .bfarVq_skeleton__stage {
+    grid-template-columns: 1fr;
+    display: grid;
+  }
+
+  .bfarVq_skeleton__real, .bfarVq_skeleton__shimmer {
+    min-inline-size: 0;
+    transition: opacity var(--_skeleton-transition-duration) ease-out,
+      visibility var(--_skeleton-transition-duration) allow-discrete;
+    grid-area: 1 / 1;
+  }
+
+  .bfarVq_skeleton__shimmer, .bfarVq_skeleton[data-loading="true"] .bfarVq_skeleton__real {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .bfarVq_skeleton[data-loading="true"] .bfarVq_skeleton__shimmer {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .bfarVq_skeleton__shimmer * {
+    visibility: hidden;
+  }
+
+  .bfarVq_skeleton__shimmer .bfarVq_skeleton__text, .bfarVq_skeleton__shimmer .bfarVq_skeleton__media {
+    visibility: visible;
+  }
+
+  .bfarVq_skeleton__text {
+    color: #0000;
+    -webkit-text-fill-color: transparent;
+    caret-color: #0000;
+    border-radius: var(--_skeleton-text-radius, 0);
+    background-color: var(--_skeleton-base);
+    background-image: linear-gradient(90deg,
+      var(--_skeleton-base) 33%,
+      var(--_skeleton-highlight) 50%,
+      var(--_skeleton-base) 66%);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    text-shadow: none;
+    user-select: none;
+    background-repeat: no-repeat;
+    background-size: 300% 100%;
+  }
+
+  .bfarVq_skeleton__text::placeholder {
+    color: #0000;
+  }
+
+  .bfarVq_skeleton__media {
+    vertical-align: middle;
+    border-radius: var(--_skeleton-radius, var(--sk-radius));
+    background-color: var(--_skeleton-base);
+    background-image: linear-gradient(90deg,
+      var(--_skeleton-base) 33%,
+      var(--_skeleton-highlight) 50%,
+      var(--_skeleton-base) 66%);
+    background-repeat: no-repeat;
+    background-size: 300% 100%;
+    inline-size: max-content;
+    line-height: 0;
+    display: inline-block;
+  }
+
+  .bfarVq_skeleton__media-raw {
+    opacity: 0;
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bfarVq_skeleton__real, .bfarVq_skeleton__shimmer {
+      transition: none;
+    }
+  }
+}