@usefragments/ui 1.6.0 → 2.0.0

package/dist/components/Select/index.cjs

@@ -68,7 +68,7 @@ const SelectContext = React__namespace.createContext({
   unregisterItem: () => {
   },
   size: "md",
-  variant: "field",
+  variant: "outline",
   optionItems: null
 });
 function renderOptionLabel(option) {
@@ -113,7 +113,7 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
   helperText,
   error,
   size: sizeProp,
-  variant = "field",
+  variant = "outline",
   className
 }, ref) {
   const size = index.useResolvedControlSize(sizeProp);
@@ -173,6 +173,11 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
     items.forEach((content, itemValue) => merged.set(itemValue, content));
     return merged;
   }, [declaredItems, items]);
+  const { helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("select", {
+    label,
+    helperText,
+    error
+  });
   const contextValue = React__namespace.useMemo(
     () => ({
       placeholder,
@@ -182,7 +187,8 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      invalid: hasError
     }),
     [
       placeholder,
@@ -192,21 +198,13 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      hasError
     ]
   );
-  const { helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("select", {
-    label,
-    helperText,
-    error
-  });
-  const wrapperClasses = [
-    Select_module.default.wrapper,
-    variant === "ghost" && Select_module.default.wrapperGhost,
-    className
-  ].filter(Boolean).join(" ");
+  const wrapperClasses = [Select_module.default.wrapper, variant === "ghost" && Select_module.default.wrapperGhost, className].filter(Boolean).join(" ");
   const helperClasses = [Select_module.default.helper, hasError && Select_module.default.helperError].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, "data-invalid": hasError || void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       select.Select.Root,
       {
@@ -255,11 +253,19 @@ function SelectTrigger({
   ].filter(Boolean).join(" ");
   const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.placeholder, children: placeholderText }) : null);
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.triggerIcon, children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
-    /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: Select_module.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Trigger,
+    {
+      ...htmlProps,
+      className: classes,
+      "aria-invalid": context.invalid || void 0,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.triggerIcon, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: Select_module.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+      ] })
+    }
+  );
 }
 function SelectContent({
   children,

package/dist/components/Select/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type FormFieldProps } from "../../utils/aria";
 export type SelectValue = string;
-export type SelectVariant = "field" | "ghost";
+export type SelectVariant = "outline" | "ghost";
 export interface SelectOption {
     value: SelectValue;
     label: string;
@@ -50,10 +50,10 @@ export interface SelectProps extends FormFieldProps {
     /** Size variant.
      * @default "md" */
     size?: "sm" | "md" | "lg";
-    /** Visual treatment. `ghost` drops the field shell for a compact, borderless
-     * control — for toolbars and dense rows, where a bordered field reads as a
-     * form. Pair with `size="sm"`.
-     * @default "field" */
+    /** Chrome. `outline` is the bordered field shell; `ghost` drops it for a
+     * compact, borderless control — for toolbars and dense rows, where a bordered
+     * field reads as a form. Pair with `size="sm"`.
+     * @default "outline" */
     variant?: SelectVariant;
     /** Wrapper class name */
     className?: string;

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAiC,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWtF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd;;+EAE2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gCAAgC;IAChC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;0BAGsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8BAE0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,mHAAmH;IACnH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwGD,QAAA,MAAM,UAAU,oFAsLd,CAAC;AAEH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAsCpB;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,UAA4B,EAC5B,KAAe,EACf,eAAe,EACf,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAqBpB;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAoB1F;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,2CAO3E;AAED,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,qBAAqB,2CAOrF;AAMD,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAiC,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQtF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd;;+EAE2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gCAAgC;IAChC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iGAAiG;IACjG,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;4BAGwB;IACxB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8BAE0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,mHAAmH;IACnH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA2GD,QAAA,MAAM,UAAU,oFAoLd,CAAC;AAEH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,2CA0CpB;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,UAA4B,EAC5B,KAAe,EACf,eAAe,EACf,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAqBpB;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAoB1F;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,2CAO3E;AAED,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,qBAAqB,2CAOrF;AAMD,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/Select/index.js

@@ -49,7 +49,7 @@ const SelectContext = React.createContext({
   unregisterItem: () => {
   },
   size: "md",
-  variant: "field",
+  variant: "outline",
   optionItems: null
 });
 function renderOptionLabel(option) {
@@ -94,7 +94,7 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
   helperText,
   error,
   size: sizeProp,
-  variant = "field",
+  variant = "outline",
   className
 }, ref) {
   const size = useResolvedControlSize(sizeProp);
@@ -154,6 +154,11 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
     items.forEach((content, itemValue) => merged.set(itemValue, content));
     return merged;
   }, [declaredItems, items]);
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
+    label,
+    helperText,
+    error
+  });
   const contextValue = React.useMemo(
     () => ({
       placeholder,
@@ -163,7 +168,8 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      invalid: hasError
     }),
     [
       placeholder,
@@ -173,21 +179,13 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      hasError
     ]
   );
-  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
-    label,
-    helperText,
-    error
-  });
-  const wrapperClasses = [
-    styles.wrapper,
-    variant === "ghost" && styles.wrapperGhost,
-    className
-  ].filter(Boolean).join(" ");
+  const wrapperClasses = [styles.wrapper, variant === "ghost" && styles.wrapperGhost, className].filter(Boolean).join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, "data-invalid": hasError || void 0, children: [
     /* @__PURE__ */ jsxs(
       Select$1.Root,
       {
@@ -236,11 +234,19 @@ function SelectTrigger({
   ].filter(Boolean).join(" ");
   const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsx("span", { className: styles.placeholder, children: placeholderText }) : null);
-  return /* @__PURE__ */ jsx(Select$1.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: icon }),
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
-    /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.icon, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Select$1.Trigger,
+    {
+      ...htmlProps,
+      className: classes,
+      "aria-invalid": context.invalid || void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
+        /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.icon, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      ] })
+    }
+  );
 }
 function SelectContent({
   children,

package/dist/components/Separator/Separator.module.scss.cjs

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const separator = "_separator_1g93x_1";
-const horizontal = "_horizontal_1g93x_6";
-const line = "_line_1g93x_9";
-const vertical = "_vertical_1g93x_16";
-const withLabel = "_withLabel_1g93x_27";
-const label = "_label_1g93x_40";
-const spacingNone = "_spacingNone_1g93x_51";
-const spacingSm = "_spacingSm_1g93x_55";
-const spacingMd = "_spacingMd_1g93x_62";
-const spacingLg = "_spacingLg_1g93x_69";
-const soft = "_soft_1g93x_76";
+const separator = "_separator_10yvl_1";
+const horizontal = "_horizontal_10yvl_6";
+const line = "_line_10yvl_9";
+const vertical = "_vertical_10yvl_16";
+const withLabel = "_withLabel_10yvl_27";
+const label = "_label_10yvl_40";
+const gapNone = "_gapNone_10yvl_50";
+const gapXs = "_gapXs_10yvl_54";
+const gapSm = "_gapSm_10yvl_61";
+const gapMd = "_gapMd_10yvl_68";
+const gapLg = "_gapLg_10yvl_75";
+const gapXl = "_gapXl_10yvl_82";
+const soft = "_soft_10yvl_89";
 const styles = {
   separator,
   horizontal,
@@ -18,21 +20,25 @@ const styles = {
   vertical,
   withLabel,
   label,
-  spacingNone,
-  spacingSm,
-  spacingMd,
-  spacingLg,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
   soft
 };
 exports.default = styles;
+exports.gapLg = gapLg;
+exports.gapMd = gapMd;
+exports.gapNone = gapNone;
+exports.gapSm = gapSm;
+exports.gapXl = gapXl;
+exports.gapXs = gapXs;
 exports.horizontal = horizontal;
 exports.label = label;
 exports.line = line;
 exports.separator = separator;
 exports.soft = soft;
-exports.spacingLg = spacingLg;
-exports.spacingMd = spacingMd;
-exports.spacingNone = spacingNone;
-exports.spacingSm = spacingSm;
 exports.vertical = vertical;
 exports.withLabel = withLabel;

package/dist/components/Separator/Separator.module.scss.js

@@ -1,14 +1,16 @@
-const separator = "_separator_1g93x_1";
-const horizontal = "_horizontal_1g93x_6";
-const line = "_line_1g93x_9";
-const vertical = "_vertical_1g93x_16";
-const withLabel = "_withLabel_1g93x_27";
-const label = "_label_1g93x_40";
-const spacingNone = "_spacingNone_1g93x_51";
-const spacingSm = "_spacingSm_1g93x_55";
-const spacingMd = "_spacingMd_1g93x_62";
-const spacingLg = "_spacingLg_1g93x_69";
-const soft = "_soft_1g93x_76";
+const separator = "_separator_10yvl_1";
+const horizontal = "_horizontal_10yvl_6";
+const line = "_line_10yvl_9";
+const vertical = "_vertical_10yvl_16";
+const withLabel = "_withLabel_10yvl_27";
+const label = "_label_10yvl_40";
+const gapNone = "_gapNone_10yvl_50";
+const gapXs = "_gapXs_10yvl_54";
+const gapSm = "_gapSm_10yvl_61";
+const gapMd = "_gapMd_10yvl_68";
+const gapLg = "_gapLg_10yvl_75";
+const gapXl = "_gapXl_10yvl_82";
+const soft = "_soft_10yvl_89";
 const styles = {
   separator,
   horizontal,
@@ -16,23 +18,27 @@ const styles = {
   vertical,
   withLabel,
   label,
-  spacingNone,
-  spacingSm,
-  spacingMd,
-  spacingLg,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
   soft
 };
 export {
   styles as default,
+  gapLg,
+  gapMd,
+  gapNone,
+  gapSm,
+  gapXl,
+  gapXs,
   horizontal,
   label,
   line,
   separator,
   soft,
-  spacingLg,
-  spacingMd,
-  spacingNone,
-  spacingSm,
   vertical,
   withLabel
 };

package/dist/components/Separator/index.cjs

@@ -22,15 +22,17 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const spacingClasses = {
-  none: Separator_module.default.spacingNone,
-  sm: Separator_module.default.spacingSm,
-  md: Separator_module.default.spacingMd,
-  lg: Separator_module.default.spacingLg
+const GAP_CLASS = {
+  none: Separator_module.default.gapNone,
+  xs: Separator_module.default.gapXs,
+  sm: Separator_module.default.gapSm,
+  md: Separator_module.default.gapMd,
+  lg: Separator_module.default.gapLg,
+  xl: Separator_module.default.gapXl
 };
 const SeparatorRoot = React__namespace.forwardRef(function Separator2({
   orientation = "horizontal",
-  spacing = "none",
+  gap = "none",
   soft = false,
   label,
   className,
@@ -41,7 +43,7 @@ const SeparatorRoot = React__namespace.forwardRef(function Separator2({
     const classes2 = [
       Separator_module.default.separator,
       Separator_module.default.withLabel,
-      spacingClasses[spacing],
+      GAP_CLASS[gap],
       soft && Separator_module.default.soft,
       className
     ].filter(Boolean).join(" ");
@@ -61,7 +63,7 @@ const SeparatorRoot = React__namespace.forwardRef(function Separator2({
   const classes = [
     Separator_module.default.separator,
     orientation === "horizontal" ? Separator_module.default.horizontal : Separator_module.default.vertical,
-    spacingClasses[spacing],
+    GAP_CLASS[gap],
     soft && Separator_module.default.soft,
     className
   ].filter(Boolean).join(" ");

package/dist/components/Separator/index.d.ts

@@ -1,9 +1,11 @@
 import * as React from "react";
+export type SeparatorGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /** Orientation of the separator */
     orientation?: "horizontal" | "vertical";
-    /** Spacing around the separator */
-    spacing?: "none" | "sm" | "md" | "lg";
+    /** Breathing room around the rule
+     * @default "none" */
+    gap?: SeparatorGap;
     /** Softer visual appearance */
     soft?: boolean;
     /** Optional label text (creates a labeled divider) */

package/dist/components/Separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+ED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;yBACqB;IACrB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFD,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/dist/components/Separator/index.js

@@ -3,15 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 import styles from "./Separator.module.scss.js";
-const spacingClasses = {
-  none: styles.spacingNone,
-  sm: styles.spacingSm,
-  md: styles.spacingMd,
-  lg: styles.spacingLg
+const GAP_CLASS = {
+  none: styles.gapNone,
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl
 };
 const SeparatorRoot = React.forwardRef(function Separator2({
   orientation = "horizontal",
-  spacing = "none",
+  gap = "none",
   soft = false,
   label,
   className,
@@ -22,7 +24,7 @@ const SeparatorRoot = React.forwardRef(function Separator2({
     const classes2 = [
       styles.separator,
       styles.withLabel,
-      spacingClasses[spacing],
+      GAP_CLASS[gap],
       soft && styles.soft,
       className
     ].filter(Boolean).join(" ");
@@ -42,7 +44,7 @@ const SeparatorRoot = React.forwardRef(function Separator2({
   const classes = [
     styles.separator,
     orientation === "horizontal" ? styles.horizontal : styles.vertical,
-    spacingClasses[spacing],
+    GAP_CLASS[gap],
     soft && styles.soft,
     className
   ].filter(Boolean).join(" ");

package/dist/components/Sidebar/Sidebar.module.scss.cjs

@@ -1,48 +1,48 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1cdtb_1";
-const mobile = "_mobile_1cdtb_52";
-const positionRight = "_positionRight_1cdtb_58";
-const collapsed = "_collapsed_1cdtb_63";
-const header = "_header_1cdtb_66";
-const nav = "_nav_1cdtb_67";
-const footer = "_footer_1cdtb_68";
-const sectionLabel = "_sectionLabel_1cdtb_75";
-const itemLabel = "_itemLabel_1cdtb_86";
-const itemBadge = "_itemBadge_1cdtb_87";
-const itemChevron = "_itemChevron_1cdtb_88";
-const item = "_item_1cdtb_86";
-const itemIcon = "_itemIcon_1cdtb_96";
-const collapseToggle = "_collapseToggle_1cdtb_99";
-const collapsedNoIcons = "_collapsedNoIcons_1cdtb_103";
-const offcanvasCollapsed = "_offcanvasCollapsed_1cdtb_106";
-const collapseToggleFloating = "_collapseToggleFloating_1cdtb_112";
-const rail = "_rail_1cdtb_126";
-const navScrollArea = "_navScrollArea_1cdtb_167";
-const section = "_section_1cdtb_75";
-const sectionHeader = "_sectionHeader_1cdtb_176";
-const sectionTrigger = "_sectionTrigger_1cdtb_206";
-const sectionActionWrapper = "_sectionActionWrapper_1cdtb_217";
-const sectionAction = "_sectionAction_1cdtb_217";
-const sectionList = "_sectionList_1cdtb_299";
-const submenu = "_submenu_1cdtb_300";
-const sectionCollapsible = "_sectionCollapsible_1cdtb_309";
-const itemWrapper = "_itemWrapper_1cdtb_357";
-const subItemWrapper = "_subItemWrapper_1cdtb_358";
-const submenuWrapper = "_submenuWrapper_1cdtb_359";
-const itemDisabled = "_itemDisabled_1cdtb_428";
-const itemActive = "_itemActive_1cdtb_437";
-const subItemDisabled = "_subItemDisabled_1cdtb_522";
-const itemMultiline = "_itemMultiline_1cdtb_578";
-const itemExpanded = "_itemExpanded_1cdtb_605";
-const subItem = "_subItem_1cdtb_358";
-const subItemActive = "_subItemActive_1cdtb_702";
-const trigger = "_trigger_1cdtb_720";
-const overlay = "_overlay_1cdtb_785";
-const railCollapsed = "_railCollapsed_1cdtb_929";
-const menuSkeleton = "_menuSkeleton_1cdtb_933";
-const skeletonItem = "_skeletonItem_1cdtb_940";
-const skeletonLabel = "_skeletonLabel_1cdtb_969";
+const root = "_root_12q6f_1";
+const mobile = "_mobile_12q6f_37";
+const positionRight = "_positionRight_12q6f_43";
+const collapsed = "_collapsed_12q6f_48";
+const header = "_header_12q6f_51";
+const nav = "_nav_12q6f_52";
+const footer = "_footer_12q6f_53";
+const sectionLabel = "_sectionLabel_12q6f_60";
+const itemLabel = "_itemLabel_12q6f_71";
+const itemBadge = "_itemBadge_12q6f_72";
+const itemChevron = "_itemChevron_12q6f_73";
+const item = "_item_12q6f_71";
+const itemIcon = "_itemIcon_12q6f_81";
+const collapseToggle = "_collapseToggle_12q6f_84";
+const collapsedNoIcons = "_collapsedNoIcons_12q6f_88";
+const offcanvasCollapsed = "_offcanvasCollapsed_12q6f_91";
+const collapseToggleFloating = "_collapseToggleFloating_12q6f_97";
+const rail = "_rail_12q6f_111";
+const navScrollArea = "_navScrollArea_12q6f_151";
+const section = "_section_12q6f_60";
+const sectionHeader = "_sectionHeader_12q6f_160";
+const sectionTrigger = "_sectionTrigger_12q6f_185";
+const sectionActionWrapper = "_sectionActionWrapper_12q6f_200";
+const sectionAction = "_sectionAction_12q6f_200";
+const sectionList = "_sectionList_12q6f_284";
+const submenu = "_submenu_12q6f_285";
+const sectionCollapsible = "_sectionCollapsible_12q6f_294";
+const itemWrapper = "_itemWrapper_12q6f_336";
+const subItemWrapper = "_subItemWrapper_12q6f_337";
+const submenuWrapper = "_submenuWrapper_12q6f_338";
+const itemDisabled = "_itemDisabled_12q6f_404";
+const itemActive = "_itemActive_12q6f_413";
+const subItemDisabled = "_subItemDisabled_12q6f_486";
+const itemMultiline = "_itemMultiline_12q6f_536";
+const itemExpanded = "_itemExpanded_12q6f_563";
+const subItem = "_subItem_12q6f_337";
+const subItemActive = "_subItemActive_12q6f_657";
+const trigger = "_trigger_12q6f_675";
+const overlay = "_overlay_12q6f_743";
+const railCollapsed = "_railCollapsed_12q6f_892";
+const menuSkeleton = "_menuSkeleton_12q6f_896";
+const skeletonItem = "_skeletonItem_12q6f_903";
+const skeletonLabel = "_skeletonLabel_12q6f_926";
 const styles = {
   root,
   mobile,

package/dist/components/Sidebar/Sidebar.module.scss.js

@@ -1,46 +1,46 @@
-const root = "_root_1cdtb_1";
-const mobile = "_mobile_1cdtb_52";
-const positionRight = "_positionRight_1cdtb_58";
-const collapsed = "_collapsed_1cdtb_63";
-const header = "_header_1cdtb_66";
-const nav = "_nav_1cdtb_67";
-const footer = "_footer_1cdtb_68";
-const sectionLabel = "_sectionLabel_1cdtb_75";
-const itemLabel = "_itemLabel_1cdtb_86";
-const itemBadge = "_itemBadge_1cdtb_87";
-const itemChevron = "_itemChevron_1cdtb_88";
-const item = "_item_1cdtb_86";
-const itemIcon = "_itemIcon_1cdtb_96";
-const collapseToggle = "_collapseToggle_1cdtb_99";
-const collapsedNoIcons = "_collapsedNoIcons_1cdtb_103";
-const offcanvasCollapsed = "_offcanvasCollapsed_1cdtb_106";
-const collapseToggleFloating = "_collapseToggleFloating_1cdtb_112";
-const rail = "_rail_1cdtb_126";
-const navScrollArea = "_navScrollArea_1cdtb_167";
-const section = "_section_1cdtb_75";
-const sectionHeader = "_sectionHeader_1cdtb_176";
-const sectionTrigger = "_sectionTrigger_1cdtb_206";
-const sectionActionWrapper = "_sectionActionWrapper_1cdtb_217";
-const sectionAction = "_sectionAction_1cdtb_217";
-const sectionList = "_sectionList_1cdtb_299";
-const submenu = "_submenu_1cdtb_300";
-const sectionCollapsible = "_sectionCollapsible_1cdtb_309";
-const itemWrapper = "_itemWrapper_1cdtb_357";
-const subItemWrapper = "_subItemWrapper_1cdtb_358";
-const submenuWrapper = "_submenuWrapper_1cdtb_359";
-const itemDisabled = "_itemDisabled_1cdtb_428";
-const itemActive = "_itemActive_1cdtb_437";
-const subItemDisabled = "_subItemDisabled_1cdtb_522";
-const itemMultiline = "_itemMultiline_1cdtb_578";
-const itemExpanded = "_itemExpanded_1cdtb_605";
-const subItem = "_subItem_1cdtb_358";
-const subItemActive = "_subItemActive_1cdtb_702";
-const trigger = "_trigger_1cdtb_720";
-const overlay = "_overlay_1cdtb_785";
-const railCollapsed = "_railCollapsed_1cdtb_929";
-const menuSkeleton = "_menuSkeleton_1cdtb_933";
-const skeletonItem = "_skeletonItem_1cdtb_940";
-const skeletonLabel = "_skeletonLabel_1cdtb_969";
+const root = "_root_12q6f_1";
+const mobile = "_mobile_12q6f_37";
+const positionRight = "_positionRight_12q6f_43";
+const collapsed = "_collapsed_12q6f_48";
+const header = "_header_12q6f_51";
+const nav = "_nav_12q6f_52";
+const footer = "_footer_12q6f_53";
+const sectionLabel = "_sectionLabel_12q6f_60";
+const itemLabel = "_itemLabel_12q6f_71";
+const itemBadge = "_itemBadge_12q6f_72";
+const itemChevron = "_itemChevron_12q6f_73";
+const item = "_item_12q6f_71";
+const itemIcon = "_itemIcon_12q6f_81";
+const collapseToggle = "_collapseToggle_12q6f_84";
+const collapsedNoIcons = "_collapsedNoIcons_12q6f_88";
+const offcanvasCollapsed = "_offcanvasCollapsed_12q6f_91";
+const collapseToggleFloating = "_collapseToggleFloating_12q6f_97";
+const rail = "_rail_12q6f_111";
+const navScrollArea = "_navScrollArea_12q6f_151";
+const section = "_section_12q6f_60";
+const sectionHeader = "_sectionHeader_12q6f_160";
+const sectionTrigger = "_sectionTrigger_12q6f_185";
+const sectionActionWrapper = "_sectionActionWrapper_12q6f_200";
+const sectionAction = "_sectionAction_12q6f_200";
+const sectionList = "_sectionList_12q6f_284";
+const submenu = "_submenu_12q6f_285";
+const sectionCollapsible = "_sectionCollapsible_12q6f_294";
+const itemWrapper = "_itemWrapper_12q6f_336";
+const subItemWrapper = "_subItemWrapper_12q6f_337";
+const submenuWrapper = "_submenuWrapper_12q6f_338";
+const itemDisabled = "_itemDisabled_12q6f_404";
+const itemActive = "_itemActive_12q6f_413";
+const subItemDisabled = "_subItemDisabled_12q6f_486";
+const itemMultiline = "_itemMultiline_12q6f_536";
+const itemExpanded = "_itemExpanded_12q6f_563";
+const subItem = "_subItem_12q6f_337";
+const subItemActive = "_subItemActive_12q6f_657";
+const trigger = "_trigger_12q6f_675";
+const overlay = "_overlay_12q6f_743";
+const railCollapsed = "_railCollapsed_12q6f_892";
+const menuSkeleton = "_menuSkeleton_12q6f_896";
+const skeletonItem = "_skeletonItem_12q6f_903";
+const skeletonLabel = "_skeletonLabel_12q6f_926";
 const styles = {
   root,
   mobile,