@vikram-hegde/skeletal 0.0.1

package/dist/skeleton-W6fwO5pf.js

@@ -0,0 +1,97 @@
+import './skeleton-W6fwO5pf.css';
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/skeleton/skeleton.module.css
+var skeleton_module_default = {
+	"skeleton": "bfarVq_skeleton",
+	"skeleton__media": "bfarVq_skeleton__media",
+	"skeleton__media-raw": "bfarVq_skeleton__media-raw",
+	"skeleton__real": "bfarVq_skeleton__real",
+	"skeleton__shimmer": "bfarVq_skeleton__shimmer",
+	"skeleton__stage": "bfarVq_skeleton__stage",
+	"skeleton__text": "bfarVq_skeleton__text"
+};
+//#endregion
+//#region src/skeleton/skeleton.tsx
+const MEDIA_TAGS = /* @__PURE__ */ new Set([
+	"img",
+	"video",
+	"svg",
+	"button"
+]);
+const FIELD_TAGS = /* @__PURE__ */ new Set(["input", "textarea"]);
+/**
+* Starts the shimmer sweep on a shimmer element via the Web Animations API
+* instead of a CSS animation, so every bar on the page shares the same
+* `startTime` and moves in perfect lockstep. Per-element CSS animations drift
+* out of phase as they mount and read as jittery.
+*
+* Runs from a ref callback (no effects), guarded so it starts once per element.
+* Honors `prefers-reduced-motion` and the `--_skeleton-duration` custom
+* property (seconds) when present.
+*/
+function startShimmer(element) {
+	if (element == null || element.dataset["skeletonShimmer"] === "started") return;
+	if (typeof element.animate !== "function") return;
+	if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+	element.dataset["skeletonShimmer"] = "started";
+	const rawDuration = getComputedStyle(element).getPropertyValue("--_skeleton-duration").trim();
+	const duration = Number.parseFloat(rawDuration) * 1e3 || 2e3;
+	element.animate([{ backgroundPosition: "100% 0" }, { backgroundPosition: "0% 0" }], {
+		duration,
+		iterations: Infinity,
+		easing: "ease-in-out"
+	}).startTime = 0;
+}
+function Skeleton({ children, loading = true, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": loading || void 0,
+		"data-loading": loading || void 0,
+		className: clsx(skeleton_module_default.skeleton, className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: skeleton_module_default.skeleton__stage,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: skeleton_module_default.skeleton__real,
+				children
+			}), /* @__PURE__ */ jsx("div", {
+				className: skeleton_module_default.skeleton__shimmer,
+				"aria-hidden": "true",
+				children: skeletonizeChildren(children)
+			})]
+		})
+	});
+}
+/** Recursively replaces text and media nodes with shimmer-wrapped versions. */
+function skeletonizeChildren(children) {
+	return Children.map(children, (child) => skeletonize(child));
+}
+function skeletonize(node) {
+	if (typeof node === "string" || typeof node === "number") {
+		if (typeof node === "string" && node.trim() === "") return node;
+		return /* @__PURE__ */ jsx("span", {
+			ref: startShimmer,
+			className: skeleton_module_default.skeleton__text,
+			children: node
+		});
+	}
+	if (!isValidElement(node)) return node;
+	const element = node;
+	if (typeof element.type === "string") {
+		if (MEDIA_TAGS.has(element.type)) return /* @__PURE__ */ jsx("span", {
+			ref: startShimmer,
+			className: skeleton_module_default.skeleton__media,
+			children: cloneElement(element, { className: clsx(element.props.className, skeleton_module_default["skeleton__media-raw"]) })
+		});
+		if (FIELD_TAGS.has(element.type)) return cloneElement(element, {
+			ref: startShimmer,
+			className: clsx(element.props.className, skeleton_module_default.skeleton__text),
+			disabled: true
+		});
+	}
+	return cloneElement(element, { children: skeletonizeChildren(element.props.children) });
+}
+//#endregion
+export { Skeleton as t };

package/dist/spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { n as SpinnerProps, t as Spinner } from "../index-BngvATZx.js";
+export { Spinner, type SpinnerProps };

package/dist/spinner/index.js

@@ -0,0 +1,2 @@
+import { t as Spinner } from "../spinner-DB6ap8Si.js";
+export { Spinner };

package/dist/spinner-DB6ap8Si.css

@@ -0,0 +1,43 @@
+@layer skeletal {
+  .aLDOfa_spinner {
+    --_spinner-size: 1em;
+    --_spinner-ring: .1875em;
+    inline-size: var(--_spinner-size);
+    block-size: var(--_spinner-size);
+    -webkit-mask: radial-gradient(farthest-side,
+      transparent calc(100% - var(--_spinner-ring)),
+      #000 calc(100% - var(--_spinner-ring)));
+    mask: radial-gradient(farthest-side,
+      transparent calc(100% - var(--_spinner-ring)),
+      #000 calc(100% - var(--_spinner-ring)));
+    background: conic-gradient(from 90deg, #0000 0deg 140deg, currentColor 140deg 360deg);
+    border-radius: 50%;
+    flex-shrink: 0;
+    animation: .7s linear infinite aLDOfa_skeletal-spinner-rotate;
+    display: inline-block;
+  }
+
+  .aLDOfa_spinner__label {
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @keyframes aLDOfa_skeletal-spinner-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .aLDOfa_spinner {
+      animation-duration: 1.5s;
+    }
+  }
+}

package/dist/spinner-DB6ap8Si.js

@@ -0,0 +1,27 @@
+import './spinner-DB6ap8Si.css';
+import { t as styleVars } from "./style-vars-ZSrCUzKx.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/spinner/spinner.module.css
+var spinner_module_default = {
+	"skeletal-spinner-rotate": "aLDOfa_skeletal-spinner-rotate",
+	"spinner": "aLDOfa_spinner",
+	"spinner__label": "aLDOfa_spinner__label"
+};
+//#endregion
+//#region src/spinner/spinner.tsx
+function Spinner({ size, label, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		role: label !== void 0 ? "status" : void 0,
+		"aria-hidden": label !== void 0 ? void 0 : true,
+		className: clsx(spinner_module_default.spinner, className),
+		style: styleVars({ "--_spinner-size": size }, style),
+		...props,
+		children: label !== void 0 ? /* @__PURE__ */ jsx("span", {
+			className: spinner_module_default.spinner__label,
+			children: label
+		}) : null
+	});
+}
+//#endregion
+export { Spinner as t };

package/dist/stack-BzFVrsmT.css

@@ -0,0 +1,12 @@
+@layer skeletal {
+  .-\34 ZNHG_stack {
+    justify-content: flex-start;
+    gap: var(--_stack-space, 1.5rem);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .-\34 ZNHG_stack--fill {
+    block-size: 100%;
+  }
+}

package/dist/stack-BzFVrsmT.js

@@ -0,0 +1,52 @@
+import './stack-BzFVrsmT.css';
+import { t as styleVars } from "./style-vars-ZSrCUzKx.js";
+import { clsx } from "clsx";
+import { Children, cloneElement, createElement, isValidElement } from "react";
+//#region src/lib/transform-children.ts
+/**
+* Clones each direct child element, applying `transform` to the child at
+* `index` (0-based). Non-element children are returned untouched.
+*/
+function transformChildAt(children, index, transform) {
+	return Children.map(children, (child, childIndex) => {
+		if (!isValidElement(child)) return child;
+		return childIndex === index ? transform(child) : child;
+	});
+}
+/**
+* Clones every direct child element, applying `transform` to each. Non-element
+* children are returned untouched.
+*/
+function transformChildren(children, transform) {
+	return Children.map(children, (child) => {
+		if (!isValidElement(child)) return child;
+		return transform(child);
+	});
+}
+//#endregion
+//#region src/layout/stack.module.css
+var stack_module_default = {
+	"stack": "-4ZNHG_stack",
+	"stack--fill": "-4ZNHG_stack--fill"
+};
+//#endregion
+//#region src/layout/stack.tsx
+function Stack({ as, space, recursive = false, splitAfter, fill = false, className, style, children, ...props }) {
+	const Comp = as ?? "div";
+	const content = splitAfter !== void 0 && splitAfter > 1 ? transformChildAt(children, splitAfter - 1, (element) => cloneElement(element, { style: withStyle(element, { marginBlockStart: "auto" }) })) : children;
+	return createElement(Comp, {
+		className: clsx(stack_module_default.stack, fill && stack_module_default["stack--fill"], className),
+		style: styleVars({ "--_stack-space": space ?? "1.5rem" }, style),
+		...recursive ? { "data-recursive": true } : {},
+		...props
+	}, content);
+}
+function withStyle(element, added) {
+	const { style } = element.props;
+	return {
+		...style,
+		...added
+	};
+}
+//#endregion
+export { transformChildren as n, Stack as t };

package/dist/style-vars-ZSrCUzKx.js

@@ -0,0 +1,13 @@
+//#region src/lib/style-vars.ts
+/**
+* Merges a consumer-provided `style` with CSS custom properties, skipping any
+* `undefined` values so that CSS fallbacks inside `var(--x, default)` still
+* apply.
+*/
+function styleVars(vars, style) {
+	const out = { ...style };
+	for (const [key, value] of Object.entries(vars)) if (value !== void 0) out[key] = value;
+	return out;
+}
+//#endregion
+export { styleVars as t };

package/dist/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { n as SwitchThumbProps, r as SwitchProps, t as Switch } from "../index-B63PSP58.js";
+export { Switch, type SwitchProps, type SwitchThumbProps };

package/dist/switch/index.js

@@ -0,0 +1,2 @@
+import { t as Switch } from "../switch-DizP31iF.js";
+export { Switch };

package/dist/switch-DizP31iF.css

@@ -0,0 +1,76 @@
+@layer skeletal {
+  .q1bmaa_switch__root {
+    border: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-background);
+    cursor: pointer;
+    flex-shrink: 0;
+    align-items: center;
+    block-size: 1.25rem;
+    inline-size: 2.25rem;
+    margin: 0;
+    padding: .125rem;
+    transition: background-color .15s ease-out, border-color .15s ease-out;
+    display: inline-flex;
+
+    &[data-checked] {
+      border-color: var(--sk-primary);
+      background-color: var(--sk-primary);
+    }
+
+    &[data-unchecked]:hover:not([data-disabled]) {
+      border-color: var(--sk-ring);
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: .5;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sk-ring);
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .q1bmaa_switch__thumb {
+    background-color: var(--sk-foreground);
+    block-size: .875rem;
+    inline-size: .875rem;
+    transition: translate .2s cubic-bezier(.34, 1.56, .64, 1), background-color .15s ease-out, scale .2s cubic-bezier(.34, 1.56, .64, 1);
+
+    &[data-unchecked] {
+      transform-origin: inline-start center;
+    }
+
+    &[data-checked] {
+      background-color: var(--sk-primary-foreground);
+      transform-origin: inline-end center;
+      translate: 1rem;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .q1bmaa_switch__root:not([data-disabled]):hover .q1bmaa_switch__thumb[data-unchecked], .q1bmaa_switch__root:not([data-disabled]):hover .q1bmaa_switch__thumb[data-checked] {
+      scale: 1.12 1;
+    }
+
+    .q1bmaa_switch__root:not([data-disabled]):active .q1bmaa_switch__thumb[data-unchecked], .q1bmaa_switch__root:not([data-disabled]):active .q1bmaa_switch__thumb[data-checked] {
+      scale: 1.22 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .q1bmaa_switch__thumb {
+      transition: none;
+    }
+  }
+}

package/dist/switch-DizP31iF.js

@@ -0,0 +1,58 @@
+import './switch-DizP31iF.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/switch/switch.module.css
+var switch_module_default = {
+	"switch__root": "q1bmaa_switch__root",
+	"switch__thumb": "q1bmaa_switch__thumb"
+};
+//#endregion
+//#region src/switch/switch-thumb.tsx
+function SwitchThumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		className: mergeClassName(switch_module_default.switch__thumb, className),
+		...props
+	});
+}
+//#endregion
+//#region src/switch/switch-root.tsx
+function SwitchRoot({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		className: mergeClassName(switch_module_default.switch__root, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, {})
+	});
+}
+//#endregion
+//#region src/switch/index.ts
+/**
+* Compound component for an on/off setting.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Switch } from '@vikram-hegde/skeletal'
+*
+* <label>
+*   <Switch.Root defaultChecked name="notifications" />
+*   Notifications
+* </label>
+* ```
+*
+* Use a switch for instant-effect settings that don't wait on form
+* submission ("Dark mode", "Mute"); use `Checkbox` when the value is part of
+* submitted form data or represents membership in a list. See the Root docs
+* for react-hook-form / TanStack Form wiring — the hidden native input keeps
+* those integrations working.
+*
+* All parts are thin styled wrappers over Base UI's `Switch`, so every Base
+* UI prop, `render` override, and ref behaves the same. Part prop types are
+* exported separately (`SwitchProps`, ...).
+*/
+const Switch$1 = {
+	Root: SwitchRoot,
+	Thumb: SwitchThumb
+};
+//#endregion
+export { Switch$1 as t };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { a as TooltipProps, c as TooltipPortalProps, i as TooltipTriggerProps, l as TooltipPopupProps, n as TooltipHandle, o as TooltipProviderProps, r as TooltipViewportProps, s as TooltipPositionerProps, t as Tooltip, u as TooltipArrowProps } from "../index-DdqDyczP.js";
+export { Tooltip, type TooltipArrowProps, TooltipHandle, type TooltipPopupProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipViewportProps };

package/dist/tooltip/index.js

@@ -0,0 +1,2 @@
+import { t as Tooltip } from "../tooltip-CQk2WjUS.js";
+export { Tooltip };

package/dist/tooltip-CQk2WjUS.css

@@ -0,0 +1,92 @@
+@layer skeletal {
+  .acHrlG_tooltip__portal {
+    display: contents;
+  }
+
+  .acHrlG_tooltip__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;
+  }
+
+  .acHrlG_tooltip__popup {
+    z-index: 50;
+    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);
+    max-inline-size: min(var(--available-width, 20rem), 20rem);
+    transform-origin: var(--transform-origin);
+    inline-size: var(--popup-width, auto);
+    block-size: var(--popup-height, auto);
+    padding-block: .375rem;
+    padding-inline: .625rem;
+    font-size: .875rem;
+    line-height: 1.25;
+    transition: scale .1s ease-out, opacity .1s ease-out;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .98;
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .acHrlG_tooltip__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);
+    }
+  }
+
+  .acHrlG_tooltip__viewport {
+    block-size: 100%;
+    inline-size: 100%;
+    padding: 0;
+    overflow: clip;
+  }
+}

package/dist/tooltip-CQk2WjUS.js

@@ -0,0 +1,138 @@
+import './tooltip-CQk2WjUS.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { t as Button } from "./button-B48UNbaC.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/tooltip/tooltip.module.css
+var tooltip_module_default = {
+	"tooltip__arrow": "acHrlG_tooltip__arrow",
+	"tooltip__popup": "acHrlG_tooltip__popup",
+	"tooltip__portal": "acHrlG_tooltip__portal",
+	"tooltip__positioner": "acHrlG_tooltip__positioner",
+	"tooltip__viewport": "acHrlG_tooltip__viewport"
+};
+//#endregion
+//#region src/tooltip/tooltip-arrow.tsx
+function TooltipArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		className: mergeClassName(tooltip_module_default.tooltip__arrow, className),
+		...props
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-popup.tsx
+function TooltipPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Popup, {
+		className: mergeClassName(tooltip_module_default.tooltip__popup, className),
+		...props
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-portal.tsx
+function TooltipPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		className: mergeClassName(tooltip_module_default.tooltip__portal, className),
+		...props
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-positioner.tsx
+function TooltipPositioner({ className, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		className: mergeClassName(tooltip_module_default.tooltip__positioner, className),
+		sideOffset,
+		...props
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-provider.tsx
+function TooltipProvider({ timeout = 300, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		timeout,
+		...props
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-root.tsx
+function TooltipRoot(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+//#endregion
+//#region src/tooltip/tooltip-trigger.tsx
+function TooltipTrigger({ className, style, variant = "ghost", size = "sm", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		...props,
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className,
+			style
+		})
+	});
+}
+//#endregion
+//#region src/tooltip/tooltip-viewport.tsx
+function TooltipViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Viewport, {
+		className: mergeClassName(tooltip_module_default.tooltip__viewport, className),
+		...props
+	});
+}
+//#endregion
+//#region src/tooltip/index.ts
+/**
+* Compound component for tooltips.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Tooltip } from '@vikram-hegde/skeletal'
+*
+* <Tooltip.Provider>
+*   <Tooltip.Root>
+*     <Tooltip.Trigger aria-label="Bold">
+*       <BoldIcon aria-hidden="true" />
+*     </Tooltip.Trigger>
+*     <Tooltip.Portal>
+*       <Tooltip.Positioner sideOffset={8}>
+*         <Tooltip.Popup>
+*           <Tooltip.Arrow />
+*           Bold
+*         </Tooltip.Popup>
+*       </Tooltip.Positioner>
+*     </Tooltip.Portal>
+*   </Tooltip.Root>
+* </Tooltip.Provider>
+* ```
+*
+* Tooltips appear on hover/focus and are visual-only: the trigger must carry
+* an `aria-label` matching the tooltip content. They are disabled on touch
+* devices. Use `Popover` for essential or interactive content.
+*
+* `Tooltip.createHandle()` links a `Root` with triggers rendered outside of it
+* (detached triggers), including multiple triggers sharing one popup:
+*
+* ```tsx
+* const tip = Tooltip.createHandle();
+* <Tooltip.Trigger handle={tip} aria-label="Delete">…</Tooltip.Trigger>
+* <Tooltip.Root handle={tip}>…</Tooltip.Root>
+* ```
+*
+* All parts are thin styled wrappers over Base UI's `Tooltip`, so every Base UI
+* prop, `render` override, and ref behaves the same. Part prop types are
+* exported separately (`TooltipProps`, `TooltipTriggerProps`, ...).
+*/
+const Tooltip$1 = {
+	Provider: TooltipProvider,
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Portal: TooltipPortal,
+	Positioner: TooltipPositioner,
+	Popup: TooltipPopup,
+	Arrow: TooltipArrow,
+	Viewport: TooltipViewport,
+	createHandle: Tooltip.createHandle
+};
+//#endregion
+export { Tooltip$1 as t };