@vikram-hegde/skeletal 0.0.1

package/dist/input-CQ_ean8e.css

@@ -0,0 +1,129 @@
+@layer skeletal {
+  .gy8nOG_input {
+    box-sizing: border-box;
+    border: 1px solid var(--_input-border, var(--sk-input));
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-background);
+    min-block-size: 2.5rem;
+    inline-size: 15rem;
+    color: var(--sk-foreground);
+    align-items: center;
+    padding-block: 0;
+    padding-inline: .875rem;
+    font-family: inherit;
+    font-size: .875rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
+    display: inline-flex;
+
+    &::placeholder {
+      color: var(--sk-muted-foreground);
+    }
+
+    @media (any-pointer: coarse) {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+
+    &:hover:not([data-disabled]):not([data-invalid]) {
+      border-color: var(--_input-hover-border, var(--sk-ring));
+    }
+
+    &[data-focused]:not([data-invalid]) {
+      border-color: var(--sk-ring);
+      box-shadow: 0 0 0 1px var(--sk-ring);
+      outline: none;
+    }
+
+    &[data-invalid] {
+      border-color: var(--sk-destructive);
+      box-shadow: 0 0 0 1px var(--sk-destructive);
+    }
+
+    &[data-disabled], &:disabled {
+      opacity: .55;
+      background-color: var(--sk-muted);
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sk-ring);
+      outline-offset: 1px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .gy8nOG_input--sm {
+    min-block-size: 2rem;
+    padding-block: 0;
+    padding-inline: .625rem;
+    font-size: .8125rem;
+    line-height: 1.125rem;
+  }
+
+  .gy8nOG_input--lg {
+    min-block-size: 3rem;
+    padding-block: 0;
+    padding-inline: 1.125rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .gy8nOG_input--full {
+    inline-size: 100%;
+  }
+}
+@layer skeletal {
+  .LOiBNG_field__root {
+    flex-direction: column;
+    gap: .375rem;
+    display: flex;
+  }
+
+  .LOiBNG_field__label {
+    color: var(--sk-foreground);
+    font-size: .875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+
+    &[data-disabled] {
+      opacity: .55;
+    }
+  }
+
+  .LOiBNG_field__description {
+    color: var(--sk-muted-foreground);
+    margin: 0;
+    font-size: .8125rem;
+    line-height: 1.25rem;
+  }
+
+  .LOiBNG_field__error {
+    color: var(--sk-destructive);
+    font-size: .8125rem;
+    line-height: 1.25rem;
+    animation: .15s ease-out LOiBNG_skeletal-field-error-in;
+  }
+
+  @keyframes LOiBNG_skeletal-field-error-in {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .LOiBNG_field__error {
+      animation: none;
+    }
+  }
+}

package/dist/input-CQ_ean8e.js

@@ -0,0 +1,65 @@
+import './input-CQ_ean8e.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+import { Field } from "@base-ui/react/field";
+//#region src/input/input.module.css
+var input_module_default = {
+	"input": "gy8nOG_input",
+	"input--full": "gy8nOG_input--full",
+	"input--lg": "gy8nOG_input--lg",
+	"input--sm": "gy8nOG_input--sm"
+};
+//#endregion
+//#region src/input/input.tsx
+const SIZE_CLASS = {
+	sm: input_module_default["input--sm"],
+	md: void 0,
+	lg: input_module_default["input--lg"]
+};
+function Input$1({ className, size = "md", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		className: mergeClassName(clsx(input_module_default.input, SIZE_CLASS[size], fullWidth && input_module_default["input--full"]), className),
+		...props
+	});
+}
+//#endregion
+//#region src/input/field.module.css
+var field_module_default = {
+	"field__description": "LOiBNG_field__description",
+	"field__error": "LOiBNG_field__error",
+	"field__label": "LOiBNG_field__label",
+	"field__root": "LOiBNG_field__root",
+	"skeletal-field-error-in": "LOiBNG_skeletal-field-error-in"
+};
+//#endregion
+//#region src/input/field.tsx
+const Field$1 = {
+	Root: function FieldRoot({ className, ...props }) {
+		return /* @__PURE__ */ jsx(Field.Root, {
+			className: mergeClassName(field_module_default["field__root"], className),
+			...props
+		});
+	},
+	Label: function FieldLabel({ className, ...props }) {
+		return /* @__PURE__ */ jsx(Field.Label, {
+			className: mergeClassName(field_module_default["field__label"], className),
+			...props
+		});
+	},
+	Description: function FieldDescription({ className, ...props }) {
+		return /* @__PURE__ */ jsx(Field.Description, {
+			className: mergeClassName(field_module_default["field__description"], className),
+			...props
+		});
+	},
+	Error: function FieldError({ className, ...props }) {
+		return /* @__PURE__ */ jsx(Field.Error, {
+			className: mergeClassName(field_module_default["field__error"], className),
+			...props
+		});
+	}
+};
+//#endregion
+export { Input$1 as n, Field$1 as t };

package/dist/layout/index.d.ts

@@ -0,0 +1,2 @@
+import { C as Box, S as CenterProps, T as LayoutPrimitiveProps, _ as Container, a as Sidebar, b as ClusterProps, c as ReelProps, d as Grid, f as GridProps, g as CoverProps, h as Cover, i as StackProps, l as Imposter, m as FrameProps, n as SwitcherProps, o as SidebarProps, p as Frame, r as Stack, s as Reel, t as Switcher, u as ImposterProps, v as ContainerProps, w as BoxProps, x as Center, y as Cluster } from "../index-CyTcR6iv.js";
+export { Box, type BoxProps, Center, type CenterProps, Cluster, type ClusterProps, Container, type ContainerProps, Cover, type CoverProps, Frame, type FrameProps, Grid, type GridProps, Imposter, type ImposterProps, type LayoutPrimitiveProps, Reel, type ReelProps, Sidebar, type SidebarProps, Stack, type StackProps, Switcher, type SwitcherProps };

package/dist/layout/index.js

@@ -0,0 +1,4 @@
+import { t as Stack } from "../stack-BzFVrsmT.js";
+import { t as Cluster } from "../cluster-BJ4m5uGN.js";
+import { a as Grid, c as Container, i as Imposter, l as Center, n as Sidebar, o as Frame, r as Reel, s as Cover, t as Switcher, u as Box } from "../layout-qoyutnKU.js";
+export { Box, Center, Cluster, Container, Cover, Frame, Grid, Imposter, Reel, Sidebar, Stack, Switcher };

package/dist/layout-qoyutnKU.css

@@ -0,0 +1,181 @@
+@layer skeletal {
+  .zM3DFG_box {
+    --_box-padding: 1.5rem;
+    --_box-border: 0;
+    --_box-bg: transparent;
+    --_box-color: inherit;
+    padding: var(--_box-padding);
+    border: var(--_box-border);
+    background-color: var(--_box-bg);
+    color: var(--_box-color);
+  }
+
+  .zM3DFG_box[data-invert] {
+    --_box-bg: var(--sk-foreground);
+    --_box-color: var(--sk-background);
+    --_box-padding: 1.25rem;
+    background-color: var(--_box-bg);
+    color: var(--_box-color);
+    padding: var(--_box-padding);
+  }
+}
+@layer skeletal {
+  ._0T0Ycq_center {
+    box-sizing: content-box;
+    max-inline-size: var(--_center-max, 60ch);
+    padding-inline: var(--_center-gutters, 1rem);
+    flex-direction: column;
+    align-items: center;
+    margin-inline: auto;
+    display: flex;
+  }
+
+  ._0T0Ycq_center[data-intrinsic] {
+    place-items: center;
+    display: grid;
+  }
+
+  ._0T0Ycq_center[data-center-text] {
+    text-align: center;
+  }
+}
+@layer skeletal {
+  .o71MEG_container {
+    max-inline-size: var(--_container-max, 60rem);
+    padding-inline: var(--_container-padding, 1rem);
+    margin-inline: auto;
+  }
+}
+@layer skeletal {
+  .UQV2Ma_cover {
+    min-block-size: var(--_cover-min, 100svh);
+    padding: var(--_cover-space, 1rem);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .UQV2Ma_cover > * {
+    margin-block: var(--_cover-space, 1rem);
+  }
+
+  .UQV2Ma_cover > [data-cover-center] {
+    margin-block: auto;
+  }
+
+  .UQV2Ma_cover > :first-child:not([data-cover-center]) {
+    margin-block-start: 0;
+  }
+
+  .UQV2Ma_cover > :last-child:not([data-cover-center]) {
+    margin-block-end: 0;
+  }
+}
+@layer skeletal {
+  .YVj83G_frame {
+    aspect-ratio: var(--_frame-ratio, 16 / 9);
+    place-items: center;
+    display: grid;
+    overflow: hidden;
+  }
+
+  .YVj83G_frame > img, .YVj83G_frame > video, .YVj83G_frame > iframe {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .YVj83G_frame > * {
+    max-block-size: 100%;
+    max-inline-size: 100%;
+    overflow: auto;
+  }
+}
+@layer skeletal {
+  .hiMTFq_grid {
+    grid-template-columns: repeat(auto-fit, minmax(var(--_grid-min, 16rem), 1fr));
+    gap: var(--_grid-gap, 1rem);
+    display: grid;
+  }
+}
+@layer skeletal {
+  .lsmRnq_imposter {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .lsmRnq_imposter[data-fixed] {
+    position: fixed;
+  }
+
+  .lsmRnq_imposter[data-margin] {
+    margin: var(--_imposter-margin, 1rem);
+  }
+
+  .lsmRnq_imposter[data-breakout] {
+    inline-size: calc(100% + (var(--_imposter-breakout, 1rem) * 2));
+  }
+}
+@layer skeletal {
+  .kHlgAq_reel {
+    scroll-snap-type: x mandatory;
+    gap: var(--_reel-space, 1rem);
+    padding-block-end: var(--_reel-bar-space, .75rem);
+    display: flex;
+    overflow: auto hidden;
+  }
+
+  .kHlgAq_reel > * {
+    scroll-snap-align: start;
+    flex: none;
+  }
+
+  .kHlgAq_reel[data-no-bar] {
+    scrollbar-width: none;
+  }
+
+  .kHlgAq_reel[data-no-bar]::-webkit-scrollbar {
+    display: none;
+  }
+}
+@layer skeletal {
+  .BGIVVW_sidebar {
+    gap: var(--_sidebar-space, 1rem);
+    align-items: var(--_sidebar-align, stretch);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .BGIVVW_sidebar > :first-child {
+    flex-basis: var(--_sidebar-width, auto);
+    flex-grow: 1;
+  }
+
+  .BGIVVW_sidebar > :last-child, .BGIVVW_sidebar[data-side="right"] > :first-child {
+    min-inline-size: var(--_sidebar-content-min, 50%);
+    flex-grow: 999;
+    flex-basis: 0;
+  }
+
+  .BGIVVW_sidebar[data-side="right"] > :last-child {
+    flex-basis: var(--_sidebar-width, auto);
+    flex-grow: 1;
+  }
+
+  .BGIVVW_sidebar[data-no-stretch] {
+    align-items: flex-start;
+  }
+}
+@layer skeletal {
+  .yrdyta_switcher {
+    gap: var(--_switcher-space, 1rem);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .yrdyta_switcher > * {
+    flex-grow: 1;
+    flex-basis: calc((var(--_switcher-threshold, 30rem) - 100%) * 999);
+  }
+}

package/dist/layout-qoyutnKU.js

@@ -0,0 +1,169 @@
+import './layout-qoyutnKU.css';
+import { t as styleVars } from "./style-vars-ZSrCUzKx.js";
+import { n as transformChildren } from "./stack-BzFVrsmT.js";
+import { clsx } from "clsx";
+import { Children, cloneElement, createElement } from "react";
+//#region src/layout/box.module.css
+var box_module_default = { "box": "zM3DFG_box" };
+//#endregion
+//#region src/layout/box.tsx
+function Box({ as, padding, border, background, color, invert = false, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(box_module_default.box, className),
+		style: styleVars({
+			"--_box-padding": padding,
+			"--_box-border": border,
+			"--_box-bg": background,
+			"--_box-color": color
+		}, style),
+		...invert ? { "data-invert": true } : {},
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/center.module.css
+var center_module_default = { "center": "_0T0Ycq_center" };
+//#endregion
+//#region src/layout/center.tsx
+function Center({ as, max, gutters, intrinsic = false, centerText = false, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(center_module_default.center, className),
+		style: styleVars({
+			"--_center-max": max,
+			"--_center-gutters": gutters
+		}, style),
+		...intrinsic ? { "data-intrinsic": true } : {},
+		...centerText ? { "data-center-text": true } : {},
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/container.module.css
+var container_module_default = { "container": "o71MEG_container" };
+//#endregion
+//#region src/layout/container.tsx
+function Container({ as, max, padding, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(container_module_default.container, className),
+		style: styleVars({
+			"--_container-max": max,
+			"--_container-padding": padding
+		}, style),
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/cover.module.css
+var cover_module_default = { "cover": "UQV2Ma_cover" };
+//#endregion
+//#region src/layout/cover.tsx
+function Cover({ as, minHeight, space, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(cover_module_default.cover, className),
+		style: styleVars({
+			"--_cover-min": minHeight,
+			"--_cover-space": space
+		}, style),
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/frame.module.css
+var frame_module_default = { "frame": "YVj83G_frame" };
+//#endregion
+//#region src/layout/frame.tsx
+function Frame({ as, ratio, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(frame_module_default.frame, className),
+		style: styleVars({ "--_frame-ratio": ratio }, style),
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/grid.module.css
+var grid_module_default = { "grid": "hiMTFq_grid" };
+//#endregion
+//#region src/layout/grid.tsx
+function Grid({ as, min, gap, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(grid_module_default.grid, className),
+		style: styleVars({
+			"--_grid-min": min,
+			"--_grid-gap": gap
+		}, style),
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/imposter.module.css
+var imposter_module_default = { "imposter": "lsmRnq_imposter" };
+//#endregion
+//#region src/layout/imposter.tsx
+function Imposter({ as, fixed = false, margin = false, breakout, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(imposter_module_default.imposter, className),
+		style: styleVars({ "--_imposter-breakout": breakout }, style),
+		...fixed ? { "data-fixed": true } : {},
+		...margin ? { "data-margin": true } : {},
+		...breakout !== void 0 ? { "data-breakout": true } : {},
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/reel.module.css
+var reel_module_default = { "reel": "kHlgAq_reel" };
+//#endregion
+//#region src/layout/reel.tsx
+function Reel({ as, space, noBar = false, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(reel_module_default.reel, className),
+		style: styleVars({ "--_reel-space": space }, style),
+		...noBar ? { "data-no-bar": true } : {},
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/sidebar.module.css
+var sidebar_module_default = { "sidebar": "BGIVVW_sidebar" };
+//#endregion
+//#region src/layout/sidebar.tsx
+function Sidebar({ as, side = "left", sideWidth, contentMin, space, noStretch = false, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(sidebar_module_default.sidebar, className),
+		style: styleVars({
+			"--_sidebar-width": sideWidth,
+			"--_sidebar-content-min": contentMin,
+			"--_sidebar-space": space
+		}, style),
+		...side !== "left" ? { "data-side": "right" } : {},
+		...noStretch ? { "data-no-stretch": true } : {},
+		...props
+	}, children);
+}
+//#endregion
+//#region src/layout/switcher.module.css
+var switcher_module_default = { "switcher": "yrdyta_switcher" };
+//#endregion
+//#region src/layout/switcher.tsx
+function Switcher({ as, threshold, space, limit = 4, className, style, children, ...props }) {
+	const Comp = as ?? "div";
+	const count = Children.count(children);
+	const content = limit !== void 0 && count > limit ? transformChildren(children, (element) => cloneElement(element, { style: withStyle(element, { flexBasis: "100%" }) })) : children;
+	return createElement(Comp, {
+		className: clsx(switcher_module_default.switcher, className),
+		style: styleVars({
+			"--_switcher-threshold": threshold,
+			"--_switcher-space": space
+		}, style),
+		...props
+	}, content);
+}
+function withStyle(element, added) {
+	const { style } = element.props;
+	return {
+		...style,
+		...added
+	};
+}
+//#endregion
+export { Grid as a, Container as c, Imposter as i, Center as l, Sidebar as n, Frame as o, Reel as r, Cover as s, Switcher as t, Box as u };

package/dist/menu/index.d.ts

@@ -0,0 +1,2 @@
+import { _ as MenuGroupProps, a as MenuSubmenuRootProps, b as MenuBackdropProps, c as MenuRadioItemIndicatorProps, d as MenuPositionerProps, f as MenuPortalProps, g as MenuGroupLabelProps, h as MenuItemProps, i as MenuSubmenuTriggerProps, l as MenuRadioItemProps, m as MenuLinkItemProps, n as MenuViewportProps, o as MenuSeparatorProps, p as MenuPopupProps, r as MenuTriggerProps, s as MenuProps, t as Menu, u as MenuRadioGroupProps, v as MenuCheckboxItemIndicatorProps, x as MenuArrowProps, y as MenuCheckboxItemProps } from "../index-D-6gOciw.js";
+export { Menu, type MenuArrowProps, type MenuBackdropProps, type MenuCheckboxItemIndicatorProps, type MenuCheckboxItemProps, type MenuGroupLabelProps, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuPortalProps, type MenuPositionerProps, type MenuProps, type MenuRadioGroupProps, type MenuRadioItemIndicatorProps, type MenuRadioItemProps, type MenuSeparatorProps, type MenuSubmenuRootProps, type MenuSubmenuTriggerProps, type MenuTriggerProps, type MenuViewportProps };

package/dist/menu/index.js

@@ -0,0 +1,2 @@
+import { t as Menu } from "../menu-DRdGMI_-.js";
+export { Menu };