@vikram-hegde/skeletal 0.0.1

package/README.md

@@ -0,0 +1,35 @@
+# Skeletal
+
+My design system.
+
+## Development
+
+- Install dependencies:
+
+```bash
+pnpm install
+```
+
+- Run the playground:
+
+```bash
+pnpm run play
+```
+
+- Run the unit tests:
+
+```bash
+pnpm run test
+```
+
+- Build the library:
+
+```bash
+pnpm run build
+```
+
+## Package
+
+- Name: `@vikram-hegde/skeletal`
+- Internal alias: `@skeletal` → `src/*` (tsconfig, tsdown, vite)
+- Consumers: `import { Button } from "@vikram-hegde/skeletal"` + `import "@vikram-hegde/skeletal/index.css"`

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { n as AlertDialogTriggerProps, r as AlertDialogProps, t as AlertDialog } from "../index-CbMW32E9.js";
+export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps };

package/dist/alert-dialog/index.js

@@ -0,0 +1,2 @@
+import { t as AlertDialog } from "../alert-dialog-1hxVC_5N.js";
+export { AlertDialog };

package/dist/alert-dialog-1hxVC_5N.js

@@ -0,0 +1,71 @@
+import { t as DialogPortal } from "./dialog-portal-B21WFYkQ.js";
+import { n as DialogBackdrop, t as DialogViewport } from "./dialog-viewport-vpbsq7Ib.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 { n as DialogContent, t as DialogFooter } from "./dialog-footer-Br9KZP4v.js";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/alert-dialog/alert-dialog-root.tsx
+function AlertDialogRoot(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, { ...props });
+}
+//#endregion
+//#region src/alert-dialog/alert-dialog-trigger.tsx
+function AlertDialogTrigger({ className, variant = "primary", size = "md", fullWidth = false, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size,
+			fullWidth,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/alert-dialog/index.ts
+/**
+* Compound component for alert dialogs.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { AlertDialog } from '@vikram-hegde/skeletal'
+*
+* <AlertDialog.Root>
+*   <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
+*   <AlertDialog.Portal>
+*     <AlertDialog.Backdrop />
+*     <AlertDialog.Viewport>
+*       <AlertDialog.Content size="sm">
+*         <AlertDialog.Title>Delete project?</AlertDialog.Title>
+*         <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
+*         <AlertDialog.Footer>
+*           <AlertDialog.Close>Cancel</AlertDialog.Close>
+*           <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
+*         </AlertDialog.Footer>
+*       </AlertDialog.Content>
+*     </AlertDialog.Viewport>
+*   </AlertDialog.Portal>
+* </AlertDialog.Root>
+* ```
+*
+* An alert dialog is a dialog at heart, so `Portal`, `Backdrop`, `Content`,
+* `Title`, `Description`, `Footer`, `Close`, and `Viewport` are the same styled
+* parts as `Dialog`'s (their prop types live under `Dialog*Props`). Only `Root`
+* and `Trigger` are alert-dialog specific.
+*/
+const AlertDialog$1 = {
+	Root: AlertDialogRoot,
+	Trigger: AlertDialogTrigger,
+	Portal: DialogPortal,
+	Backdrop: DialogBackdrop,
+	Content: DialogContent,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Footer: DialogFooter,
+	Close: DialogClose,
+	Viewport: DialogViewport
+};
+//#endregion
+export { AlertDialog$1 as t };

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { n as BadgeProps, r as BadgeVariant, t as Badge } from "../index-A2QmU5r9.js";
+export { Badge, type BadgeProps, type BadgeVariant };

package/dist/badge/index.js

@@ -0,0 +1,2 @@
+import { t as Badge } from "../badge-C3p1L0E7.js";
+export { Badge };

package/dist/badge-C3p1L0E7.css

@@ -0,0 +1,53 @@
+@layer skeletal {
+  .VYNV2G_badge {
+    border: 1px solid var(--_badge-border, transparent);
+    border-radius: var(--sk-radius);
+    background-color: var(--_badge-bg);
+    min-block-size: 1.375rem;
+    color: var(--_badge-fg);
+    white-space: nowrap;
+    user-select: none;
+    align-items: center;
+    gap: .375rem;
+    padding-block: .125rem;
+    padding-inline: .625rem;
+    font-family: inherit;
+    font-size: .75rem;
+    font-weight: 500;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .VYNV2G_badge__dot {
+    opacity: .75;
+    background-color: currentColor;
+    border-radius: 999px;
+    flex-shrink: 0;
+    block-size: .4375rem;
+    inline-size: .4375rem;
+  }
+
+  .VYNV2G_badge--primary {
+    --_badge-bg: var(--sk-primary);
+    --_badge-fg: var(--sk-primary-foreground);
+    --_badge-border: transparent;
+  }
+
+  .VYNV2G_badge--secondary {
+    --_badge-bg: var(--sk-secondary);
+    --_badge-fg: var(--sk-secondary-foreground);
+    --_badge-border: transparent;
+  }
+
+  .VYNV2G_badge--outline {
+    --_badge-bg: transparent;
+    --_badge-fg: var(--sk-foreground);
+    --_badge-border: var(--sk-border);
+  }
+
+  .VYNV2G_badge--destructive {
+    --_badge-bg: var(--sk-destructive);
+    --_badge-fg: var(--sk-destructive-foreground);
+    --_badge-border: transparent;
+  }
+}

package/dist/badge-C3p1L0E7.js

@@ -0,0 +1,32 @@
+import './badge-C3p1L0E7.css';
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/badge.module.css
+var badge_module_default = {
+	"badge": "VYNV2G_badge",
+	"badge__dot": "VYNV2G_badge__dot",
+	"badge--destructive": "VYNV2G_badge--destructive",
+	"badge--outline": "VYNV2G_badge--outline",
+	"badge--primary": "VYNV2G_badge--primary",
+	"badge--secondary": "VYNV2G_badge--secondary"
+};
+//#endregion
+//#region src/badge/badge.tsx
+const VARIANT_CLASS = {
+	primary: badge_module_default["badge--primary"],
+	secondary: badge_module_default["badge--secondary"],
+	outline: badge_module_default["badge--outline"],
+	destructive: badge_module_default["badge--destructive"]
+};
+function Badge({ variant = "secondary", dot = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx(badge_module_default.badge, VARIANT_CLASS[variant], className),
+		...props,
+		children: [dot ? /* @__PURE__ */ jsx("span", {
+			className: badge_module_default.badge__dot,
+			"aria-hidden": "true"
+		}) : null, children]
+	});
+}
+//#endregion
+export { Badge as t };

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { i as ButtonVariant, n as ButtonProps, r as ButtonSize, t as Button } from "../button-Dvd4n2U4.js";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/button/index.js

@@ -0,0 +1,2 @@
+import { t as Button } from "../button-B48UNbaC.js";
+export { Button };

package/dist/button-B48UNbaC.css

@@ -0,0 +1,152 @@
+@layer skeletal {
+  ._7xeUeq_button {
+    border: 1px solid var(--_button-border, transparent);
+    border-radius: var(--sk-radius);
+    background-color: var(--_button-bg);
+    min-block-size: 2.5rem;
+    color: var(--_button-fg);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+    gap: .5rem;
+    padding-block: 0;
+    padding-inline: 1.25rem;
+    font-family: inherit;
+    font-size: .875rem;
+    font-weight: 500;
+    line-height: 1;
+    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover:not([data-disabled]) {
+        background-color: var(--_button-hover-bg);
+      }
+    }
+
+    &:active:not([data-disabled]) {
+      transform: translateY(.5px);
+    }
+
+    &[data-disabled], &:disabled {
+      opacity: .5;
+      pointer-events: none;
+    }
+
+    &._7xeUeq_button--loading {
+      cursor: progress;
+      opacity: .65;
+      pointer-events: auto;
+      position: relative;
+      overflow: hidden;
+    }
+
+    &._7xeUeq_button--loading:before {
+      content: "";
+      background-color: var(--_button-fg);
+      opacity: .15;
+      block-size: .1875rem;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+    }
+
+    &._7xeUeq_button--loading:after {
+      content: "";
+      background-image: repeating-linear-gradient(90deg,
+        transparent 0%,
+        transparent 55%,
+        var(--_button-fg) 75%,
+        var(--_button-fg) 80%,
+        transparent 80%,
+        transparent 100%);
+      block-size: .1875rem;
+      inline-size: 200%;
+      animation: _7xeUeq_skeletal-button-progress var(--_button-progress-duration, 1.4s) linear infinite;
+      background-size: 50% 100%;
+      position: absolute;
+      inset-block-end: 0;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sk-ring);
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  @keyframes _7xeUeq_skeletal-button-progress {
+    from {
+      transform: translateX(-50%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ._7xeUeq_button._7xeUeq_button--loading:after {
+      opacity: .4;
+      animation: none;
+    }
+  }
+
+  ._7xeUeq_button--primary {
+    --_button-bg: var(--sk-primary);
+    --_button-fg: var(--sk-primary-foreground);
+    --_button-border: transparent;
+    --_button-hover-bg: light-dark(oklch(from var(--sk-primary) calc(l - .08) c h), oklch(from var(--sk-primary) calc(l + .08) c h));
+  }
+
+  ._7xeUeq_button--secondary {
+    --_button-bg: var(--sk-secondary);
+    --_button-fg: var(--sk-secondary-foreground);
+    --_button-border: transparent;
+    --_button-hover-bg: light-dark(oklch(from var(--sk-secondary) calc(l - .08) c h), oklch(from var(--sk-secondary) calc(l + .08) c h));
+  }
+
+  ._7xeUeq_button--outline {
+    --_button-bg: transparent;
+    --_button-fg: var(--sk-foreground);
+    --_button-border: var(--sk-border);
+    --_button-hover-bg: var(--sk-muted);
+  }
+
+  ._7xeUeq_button--ghost {
+    --_button-bg: transparent;
+    --_button-fg: var(--sk-foreground);
+    --_button-border: transparent;
+    --_button-hover-bg: var(--sk-muted);
+  }
+
+  ._7xeUeq_button--destructive {
+    --_button-bg: var(--sk-destructive);
+    --_button-fg: var(--sk-destructive-foreground);
+    --_button-border: transparent;
+    --_button-hover-bg: light-dark(oklch(from var(--sk-destructive) calc(l - .08) c h), oklch(from var(--sk-destructive) calc(l + .08) c h));
+  }
+
+  ._7xeUeq_button--sm {
+    min-block-size: 2rem;
+    padding-block: 0;
+    padding-inline: .75rem;
+    font-size: .8125rem;
+  }
+
+  ._7xeUeq_button--lg {
+    min-block-size: 3rem;
+    padding-block: 0;
+    padding-inline: 1.5rem;
+    font-size: 1rem;
+  }
+
+  ._7xeUeq_button--full {
+    inline-size: 100%;
+  }
+}

package/dist/button-B48UNbaC.js

@@ -0,0 +1,46 @@
+import './button-B48UNbaC.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/button/button.module.css
+var button_module_default = {
+	"button": "_7xeUeq_button",
+	"button--destructive": "_7xeUeq_button--destructive",
+	"button--full": "_7xeUeq_button--full",
+	"button--ghost": "_7xeUeq_button--ghost",
+	"button--lg": "_7xeUeq_button--lg",
+	"button--loading": "_7xeUeq_button--loading",
+	"button--outline": "_7xeUeq_button--outline",
+	"button--primary": "_7xeUeq_button--primary",
+	"button--secondary": "_7xeUeq_button--secondary",
+	"button--sm": "_7xeUeq_button--sm",
+	"skeletal-button-progress": "_7xeUeq_skeletal-button-progress"
+};
+//#endregion
+//#region src/button/button.tsx
+const VARIANT_CLASS = {
+	primary: button_module_default["button--primary"],
+	secondary: button_module_default["button--secondary"],
+	outline: button_module_default["button--outline"],
+	ghost: button_module_default["button--ghost"],
+	destructive: button_module_default["button--destructive"]
+};
+const SIZE_CLASS = {
+	sm: button_module_default["button--sm"],
+	md: void 0,
+	lg: button_module_default["button--lg"]
+};
+function Button$1({ className, variant = "primary", size = "md", fullWidth = false, loading = false, disabled, focusableWhenDisabled, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: mergeClassName(clsx(button_module_default.button, VARIANT_CLASS[variant], SIZE_CLASS[size], fullWidth && button_module_default["button--full"], loading && button_module_default["button--loading"]), className),
+		disabled: loading ? true : disabled,
+		focusableWhenDisabled: loading ? true : focusableWhenDisabled,
+		"aria-busy": loading ? true : void 0,
+		"data-loading": loading ? true : void 0,
+		...props,
+		children
+	});
+}
+//#endregion
+export { Button$1 as t };

package/dist/button-Dvd4n2U4.d.ts

@@ -0,0 +1,56 @@
+import { ButtonProps } from "@base-ui/react/button";
+//#region src/button/button.d.ts
+/**
+ * The visual emphasis of the button. Choose based on the action's importance:
+ * - `primary`: solid accent fill — the main action on a screen. Use sparingly.
+ * - `secondary`: muted fill — an alternative to primary in grouped actions.
+ * - `outline`: transparent with a border — pairs with primary/secondary, or for
+ *   actions that should feel lighter.
+ * - `ghost`: no border or fill — inline/secondary actions that shouldn't draw
+ *   attention; gains a subtle hover fill.
+ * - `destructive`: red fill — irreversible actions (delete, remove). Always
+ *   pair with a confirmation step (e.g. an Alert Dialog).
+ *
+ * @default variant = 'primary'
+ */
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
+/**
+ * The button size:
+ * - `sm`: 2rem tall — dense toolbars and inline actions.
+ * - `md`: 2.5rem tall — default; most buttons.
+ * - `lg`: 3rem tall — hero or primary form submissions.
+ *
+ * @default size = 'md'
+ */
+type ButtonSize = "sm" | "md" | "lg";
+/**
+ * A styled button that triggers an action. Renders a `<button>` element.
+ *
+ * Wraps Base UI's `Button`, so every Base UI prop works: `render` to swap the
+ * element (set `nativeButton={false}` when rendering a non-`<button>` tag),
+ * `className`, `disabled`, etc.
+ *
+ * For loading states, pass `loading`: the button disables itself (preventing
+ * double-submits) while keeping focus (Base UI's `focusableWhenDisabled`), and
+ * sets `aria-busy` so assistive tech announces the pending state. The label
+ * and any icons stay fully visible — a progress bar sweeps along the bottom
+ * edge of the button to indicate the pending state, and the button is dimmed
+ * (but not as much as fully disabled) so it reads as non-interactive. The
+ * button also sets `data-loading` if you want to style the pending state
+ * yourself.
+ *
+ * All props are optional except children.
+ */
+interface ButtonProps$1 extends ButtonProps {
+  /** Visual emphasis of the button. @default 'primary' */
+  variant?: ButtonVariant;
+  /** Size of the button. @default 'md' */
+  size?: ButtonSize;
+  /** Whether the button stretches to fill its parent width. @default false */
+  fullWidth?: boolean;
+  /** Whether the button shows a pending state. @default false */
+  loading?: boolean;
+}
+declare function Button$1({ className, variant, size, fullWidth, loading, disabled, focusableWhenDisabled, children, ...props }: ButtonProps$1): import("react").JSX.Element;
+//#endregion
+export { ButtonVariant as i, ButtonProps$1 as n, ButtonSize as r, Button$1 as t };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { i as CheckboxGroupProps, n as CheckboxProps, r as CheckboxIndicatorProps, t as Checkbox } from "../index-CUy-9csi.js";
+export { Checkbox, type CheckboxGroupProps, type CheckboxIndicatorProps, type CheckboxProps };

package/dist/checkbox/index.js

@@ -0,0 +1,2 @@
+import { t as Checkbox } from "../checkbox-wh2BoiSj.js";
+export { Checkbox };

package/dist/checkbox-wh2BoiSj.css

@@ -0,0 +1,76 @@
+@layer skeletal {
+  .PFVgGG_checkbox__group {
+    color: var(--sk-foreground);
+    flex-direction: column;
+    align-items: start;
+    gap: .375rem;
+    display: flex;
+
+    &[data-disabled] {
+      color: var(--sk-muted-foreground);
+    }
+  }
+
+  .PFVgGG_checkbox__root {
+    border: 1px solid var(--sk-border);
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-background);
+    block-size: 1rem;
+    inline-size: 1rem;
+    color: var(--sk-primary-foreground);
+    cursor: pointer;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    transition: background-color .1s ease-out, border-color .1s ease-out;
+    display: inline-flex;
+    position: relative;
+
+    &[data-unchecked]:hover:not([data-disabled]) {
+      border-color: var(--sk-ring);
+    }
+
+    &[data-checked], &[data-indeterminate] {
+      border-color: var(--sk-primary);
+      background-color: var(--sk-primary);
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: .5;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sk-ring);
+      outline-offset: 2px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .PFVgGG_checkbox__indicator {
+    place-items: center;
+    transition: scale .16s cubic-bezier(.2, .7, .3, 1), opacity .14s ease-out;
+    display: grid;
+    position: absolute;
+    inset: 0;
+
+    & > svg {
+      display: block;
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      scale: .72;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+}

package/dist/checkbox-wh2BoiSj.js

@@ -0,0 +1,112 @@
+import './checkbox-wh2BoiSj.css';
+import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/checkbox/checkbox.module.css
+var checkbox_module_default = {
+	"checkbox__group": "PFVgGG_checkbox__group",
+	"checkbox__indicator": "PFVgGG_checkbox__indicator",
+	"checkbox__root": "PFVgGG_checkbox__root"
+};
+//#endregion
+//#region src/checkbox/checkbox-group.tsx
+function CheckboxGroup$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		className: mergeClassName(checkbox_module_default.checkbox__group, className),
+		...props
+	});
+}
+//#endregion
+//#region src/checkbox/checkbox-indicator.tsx
+function CheckboxIndicator({ className, render, children, ...props }) {
+	const merged = mergeClassName(checkbox_module_default.checkbox__indicator, className);
+	if (render === void 0 && children === void 0) return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		className: merged,
+		render: (defaultProps, state) => /* @__PURE__ */ jsx("span", {
+			...defaultProps,
+			children: state.indeterminate ? /* @__PURE__ */ jsx(DashIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+		}),
+		...props
+	});
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		className: merged,
+		...props,
+		render,
+		children
+	});
+}
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m2.5 8.5 4 4 7-9",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function DashIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M3 8h10",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})
+	});
+}
+//#endregion
+//#region src/checkbox/checkbox-root.tsx
+function CheckboxRoot({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		className: mergeClassName(checkbox_module_default.checkbox__root, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckboxIndicator, {})
+	});
+}
+//#endregion
+//#region src/checkbox/index.ts
+/**
+* Compound component for ticking one or many independent options.
+*
+* Assemble the parts as properties of the object:
+*
+* ```tsx
+* import { Checkbox } from '@vikram-hegde/skeletal'
+*
+* <label>
+*   <Checkbox.Root defaultChecked name="terms" required />
+*   Accept terms and conditions
+* </label>
+* ```
+*
+* Wrap several checkboxes in `Checkbox.Group` to manage them as one
+* array-valued field (see the Group docs for react-hook-form / TanStack Form
+* wiring), and add a parent checkbox with the `parent` prop + `allValues` on
+* the group for "select all" behavior.
+*
+* All parts are thin styled wrappers over Base UI's `Checkbox`, so every Base
+* UI prop, `render` override, and ref behaves the same. The hidden native
+* input keeps native form submission and library integrations working. Part
+* prop types are exported separately (`CheckboxProps`,
+* `CheckboxGroupProps`, ...).
+*/
+const Checkbox$1 = {
+	Root: CheckboxRoot,
+	Group: CheckboxGroup$1,
+	Indicator: CheckboxIndicator
+};
+//#endregion
+export { Checkbox$1 as t };

package/dist/cluster-BJ4m5uGN.css

@@ -0,0 +1,9 @@
+@layer skeletal {
+  .G-TPbq_cluster {
+    justify-content: var(--_cluster-justify, flex-start);
+    align-items: var(--_cluster-align, center);
+    gap: var(--_cluster-gap, 1rem);
+    flex-wrap: wrap;
+    display: flex;
+  }
+}