@vikram-hegde/skeletal 0.0.1

package/dist/cluster-BJ4m5uGN.js

@@ -0,0 +1,21 @@
+import './cluster-BJ4m5uGN.css';
+import { t as styleVars } from "./style-vars-ZSrCUzKx.js";
+import { clsx } from "clsx";
+import { createElement } from "react";
+//#region src/layout/cluster.module.css
+var cluster_module_default = { "cluster": "G-TPbq_cluster" };
+//#endregion
+//#region src/layout/cluster.tsx
+function Cluster({ as, space, justify, align, className, style, children, ...props }) {
+	return createElement(as ?? "div", {
+		className: clsx(cluster_module_default.cluster, className),
+		style: styleVars({
+			"--_cluster-gap": space,
+			"--_cluster-justify": justify ?? "flex-start",
+			"--_cluster-align": align ?? "center"
+		}, style),
+		...props
+	}, children);
+}
+//#endregion
+export { Cluster as t };

package/dist/combobox/index.d.ts

@@ -0,0 +1,2 @@
+import { C as ComboboxChipRemoveProps, E as ComboboxArrowProps, S as ComboboxChipsProps, T as ComboboxBackdropProps, _ as ComboboxGroupLabelProps, a as ComboboxSeparatorProps, b as ComboboxCollectionProps, c as ComboboxPositionerProps, d as ComboboxListProps, f as ComboboxLabelProps, g as ComboboxInputProps, h as ComboboxInputGroupProps, i as ComboboxStatusProps, l as ComboboxPortalProps, m as ComboboxItemProps, n as ComboboxValueProps, o as ComboboxRowProps, p as ComboboxItemIndicatorProps, r as ComboboxTriggerProps, s as ComboboxProps, t as Combobox, u as ComboboxPopupProps, v as ComboboxGroupProps, w as ComboboxChipProps, x as ComboboxClearProps, y as ComboboxEmptyProps } from "../index-Br2NrBW_.js";
+export { Combobox, type ComboboxArrowProps, type ComboboxBackdropProps, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxChipsProps, type ComboboxClearProps, type ComboboxCollectionProps, type ComboboxEmptyProps, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemIndicatorProps, type ComboboxItemProps, type ComboboxLabelProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxPortalProps, type ComboboxPositionerProps, type ComboboxProps, type ComboboxRowProps, type ComboboxSeparatorProps, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValueProps };

package/dist/combobox/index.js

@@ -0,0 +1,2 @@
+import { t as Combobox } from "../combobox-DWH7uSsx.js";
+export { Combobox };

package/dist/combobox-DWH7uSsx.css

@@ -0,0 +1,389 @@
+@layer skeletal {
+  .--7Iuq_combobox__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);
+    }
+  }
+
+  .--7Iuq_combobox__trigger {
+    text-align: start;
+    justify-content: space-between;
+    padding-inline: .75rem;
+    font-weight: 400;
+
+    &[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);
+    }
+  }
+
+  .--7Iuq_combobox__input-group {
+    border: 1px solid var(--sk-input);
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-background);
+    min-block-size: 2.5rem;
+    inline-size: 100%;
+    color: var(--sk-foreground);
+    cursor: text;
+    align-items: center;
+    gap: .25rem;
+    padding-block: 0;
+    padding-inline: .75rem .25rem;
+    transition: border-color .15s ease-out, box-shadow .15s ease-out;
+    display: flex;
+
+    &:has(:focus-visible) {
+      border-color: var(--sk-ring);
+      box-shadow: 0 0 0 3px oklch(from var(--sk-ring) l c h / 30%);
+    }
+
+    &[data-disabled] {
+      opacity: .5;
+      cursor: default;
+    }
+
+    &[data-invalid] {
+      border-color: var(--sk-destructive);
+      box-shadow: 0 0 0 1px var(--sk-destructive);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    & .--7Iuq_combobox__trigger, & .--7Iuq_combobox__clear {
+      border-radius: var(--sk-radius);
+      flex-shrink: 0;
+      justify-content: center;
+      min-block-size: 1.75rem;
+      inline-size: 1.75rem;
+      padding: 0;
+    }
+
+    & .--7Iuq_combobox__trigger[data-invalid], & .--7Iuq_combobox__clear[data-invalid] {
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+    & .--7Iuq_combobox__trigger[data-invalid]:focus-visible, & .--7Iuq_combobox__clear[data-invalid]:focus-visible {
+      outline-color: var(--sk-ring);
+    }
+
+    & .--7Iuq_combobox__input {
+      border-block-end: none;
+      inline-size: auto;
+      margin: 0;
+      padding-block: .5rem;
+      padding-inline: 0 .375rem;
+    }
+  }
+
+  .--7Iuq_combobox__input {
+    border: none;
+    border-block-end: 1px solid var(--sk-border);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sk-foreground);
+    background: none;
+    outline: none;
+    flex: auto;
+    margin-block: -.25rem 0;
+    margin-inline: -.25rem;
+    padding-block: .5rem;
+    padding-inline: .625rem;
+    font-family: inherit;
+    font-size: .875rem;
+    line-height: 1.25;
+
+    &::placeholder {
+      color: var(--sk-muted-foreground);
+    }
+
+    @media (any-pointer: coarse) {
+      font-size: 1rem;
+    }
+  }
+
+  .--7Iuq_combobox__icon {
+    color: var(--sk-muted-foreground);
+    justify-content: center;
+    align-items: center;
+    transition: transform .15s ease-out;
+    display: inline-flex;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .--7Iuq_combobox__trigger[data-popup-open] .--7Iuq_combobox__icon {
+    transform: rotate(180deg);
+  }
+
+  .--7Iuq_combobox__chips {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .25rem;
+    inline-size: 100%;
+    display: flex;
+  }
+
+  .--7Iuq_combobox__chip {
+    border-radius: var(--sk-radius);
+    background-color: var(--sk-secondary);
+    color: var(--sk-secondary-foreground);
+    cursor: default;
+    user-select: none;
+    outline: none;
+    align-items: center;
+    gap: .25rem;
+    padding-block: .125rem;
+    padding-inline: .5rem .25rem;
+    font-size: .8125rem;
+    line-height: 1.25;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: .5;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--sk-ring);
+      outline-offset: -2px;
+    }
+  }
+
+  .--7Iuq_combobox__chip-remove {
+    border-radius: var(--sk-radius);
+    block-size: 1.125rem;
+    inline-size: 1.125rem;
+    color: inherit;
+    cursor: pointer;
+    opacity: .7;
+    background: none;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    transition: opacity .1s ease-out;
+    display: inline-flex;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .--7Iuq_combobox__portal {
+    display: contents;
+  }
+
+  .--7Iuq_combobox__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;
+    }
+  }
+
+  .--7Iuq_combobox__positioner {
+    z-index: 50;
+    outline: none;
+  }
+
+  .--7Iuq_combobox__popup {
+    z-index: 50;
+    min-inline-size: var(--anchor-width);
+    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;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .--7Iuq_combobox__list {
+    max-block-size: var(--available-height);
+    overflow-block: auto;
+    overscroll-behavior: contain;
+    outline: 0;
+    grid-template-columns: 1.25rem 1fr;
+    scroll-padding-block: .25rem;
+    display: grid;
+    position: relative;
+  }
+
+  .--7Iuq_combobox__item {
+    border-radius: var(--sk-radius);
+    min-block-size: 2.25rem;
+    color: var(--sk-foreground);
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: none;
+    outline: none;
+    grid-column: 1 / -1;
+    grid-template-columns: 1.25rem 1fr;
+    align-items: center;
+    column-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;
+    }
+
+    &:before {
+      content: "";
+      grid-area: 1 / 1;
+    }
+  }
+
+  .--7Iuq_combobox__item-indicator {
+    grid-area: 1 / 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;
+    }
+  }
+
+  .--7Iuq_combobox__status, .--7Iuq_combobox__empty {
+    color: var(--sk-muted-foreground);
+    grid-column: 1 / -1;
+    padding-block: .75rem;
+    padding-inline: .625rem;
+    font-size: .875rem;
+    line-height: 1.25;
+  }
+
+  .--7Iuq_combobox__empty:empty {
+    padding: 0;
+  }
+
+  .--7Iuq_combobox__group, .--7Iuq_combobox__row {
+    display: contents;
+  }
+
+  .--7Iuq_combobox__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;
+  }
+
+  .--7Iuq_combobox__separator {
+    background-color: var(--sk-border);
+    grid-column: 1 / -1;
+    block-size: 1px;
+    margin-block: .375rem;
+    margin-inline: -.25rem;
+  }
+
+  .--7Iuq_combobox__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);
+    }
+  }
+}