@usefragments/ui 1.5.4 → 1.7.0

package/dist/components/Skeleton/index.js

@@ -1,47 +1,46 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./Skeleton.module.scss.js";
-const SkeletonBase = React.forwardRef(
-  function SkeletonBase2({
-    variant = "rect",
-    size = "md",
-    width,
-    height,
-    fill = false,
-    radius,
-    static: isStatic = false,
-    className,
-    ...htmlProps
-  }, ref) {
-    const classes = [
-      styles.skeleton,
-      styles[variant],
-      variant === "avatar" && styles[`avatar-${size}`],
-      variant === "button" && styles[`button-${size}`],
-      fill && styles.fill,
-      radius && styles[`radius-${radius}`],
-      isStatic && styles.static,
-      className
-    ].filter(Boolean).join(" ");
-    const style = {};
-    if (width !== void 0) {
-      style.width = typeof width === "number" ? `${width}px` : width;
-    }
-    if (height !== void 0) {
-      style.height = typeof height === "number" ? `${height}px` : height;
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...htmlProps,
-        className: classes,
-        style: Object.keys(style).length > 0 ? style : void 0,
-        "aria-hidden": "true"
-      }
-    );
+const SkeletonBase = React.forwardRef(function SkeletonBase2({
+  variant = "rect",
+  size = "md",
+  width,
+  height,
+  fill = false,
+  radius,
+  static: isStatic = false,
+  className,
+  ...htmlProps
+}, ref) {
+  const classes = [
+    styles.skeleton,
+    styles[variant],
+    variant === "avatar" && styles[`avatar-${size}`],
+    variant === "button" && styles[`button-${size}`],
+    variant === "input" && styles[`input-${size}`],
+    fill && styles.fill,
+    radius && styles[`radius-${radius}`],
+    isStatic && styles.static,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {};
+  if (width !== void 0) {
+    style.width = typeof width === "number" ? `${width}px` : width;
+  }
+  if (height !== void 0) {
+    style.height = typeof height === "number" ? `${height}px` : height;
   }
-);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...htmlProps,
+      className: classes,
+      style: Object.keys(style).length > 0 ? style : void 0,
+      "aria-hidden": "true"
+    }
+  );
+});
 function SkeletonText({
   lines = 3,
   lastLineWidth = 80,
@@ -49,11 +48,7 @@ function SkeletonText({
   className,
   ...htmlProps
 }) {
-  const containerClasses = [
-    styles.textContainer,
-    styles[`gap-${gap}`],
-    className
-  ].filter(Boolean).join(" ");
+  const containerClasses = [styles.textContainer, styles[`gap-${gap}`], className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { ...htmlProps, className: containerClasses, "aria-hidden": "true", children: Array.from({ length: lines }, (_, lineIdx) => {
     const isLast = lineIdx === lines - 1;
     return /* @__PURE__ */ jsx(
@@ -71,16 +66,7 @@ function SkeletonCircle({
   className
 }) {
   if (typeof size === "number") {
-    return /* @__PURE__ */ jsx(
-      SkeletonBase,
-      {
-        variant: "rect",
-        width: size,
-        height: size,
-        radius: "full",
-        className
-      }
-    );
+    return /* @__PURE__ */ jsx(SkeletonBase, { variant: "rect", width: size, height: size, radius: "full", className });
   }
   return /* @__PURE__ */ jsx(SkeletonBase, { variant: "avatar", size, className });
 }

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_1wpsc_1";
-const header = "_header_1wpsc_6";
-const label = "_label_1wpsc_13";
-const value = "_value_1wpsc_20";
-const root = "_root_1wpsc_28";
-const control = "_control_1wpsc_32";
-const track = "_track_1wpsc_38";
-const indicator = "_indicator_1wpsc_52";
-const thumb = "_thumb_1wpsc_59";
-const helper = "_helper_1wpsc_88";
-const helperError = "_helperError_1wpsc_95";
-const dragValueBubble = "_dragValueBubble_1wpsc_99";
+const wrapper = "_wrapper_1isbc_1";
+const header = "_header_1isbc_8";
+const label = "_label_1isbc_15";
+const value = "_value_1isbc_23";
+const root = "_root_1isbc_35";
+const control = "_control_1isbc_39";
+const track = "_track_1isbc_45";
+const indicator = "_indicator_1isbc_59";
+const thumb = "_thumb_1isbc_66";
+const helper = "_helper_1isbc_112";
+const helperError = "_helperError_1isbc_122";
+const dragValueBubble = "_dragValueBubble_1isbc_126";
 const styles = {
   wrapper,
   header,

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

@@ -1,15 +1,15 @@
-const wrapper = "_wrapper_1wpsc_1";
-const header = "_header_1wpsc_6";
-const label = "_label_1wpsc_13";
-const value = "_value_1wpsc_20";
-const root = "_root_1wpsc_28";
-const control = "_control_1wpsc_32";
-const track = "_track_1wpsc_38";
-const indicator = "_indicator_1wpsc_52";
-const thumb = "_thumb_1wpsc_59";
-const helper = "_helper_1wpsc_88";
-const helperError = "_helperError_1wpsc_95";
-const dragValueBubble = "_dragValueBubble_1wpsc_99";
+const wrapper = "_wrapper_1isbc_1";
+const header = "_header_1isbc_8";
+const label = "_label_1isbc_15";
+const value = "_value_1isbc_23";
+const root = "_root_1isbc_35";
+const control = "_control_1isbc_39";
+const track = "_track_1isbc_45";
+const indicator = "_indicator_1isbc_59";
+const thumb = "_thumb_1isbc_66";
+const helper = "_helper_1isbc_112";
+const helperError = "_helperError_1isbc_122";
+const dragValueBubble = "_dragValueBubble_1isbc_126";
 const styles = {
   wrapper,
   header,

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

@@ -1,59 +1,44 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const stack = "_stack_1otmq_1";
-const row = "_row_1otmq_5";
-const column = "_column_1otmq_9";
-const directionResponsive = "_directionResponsive_1otmq_13";
-const gapXs = "_gap-xs_1otmq_37";
-const gapSm = "_gap-sm_1otmq_41";
-const gapMd = "_gap-md_1otmq_45";
-const gapLg = "_gap-lg_1otmq_49";
-const gapXl = "_gap-xl_1otmq_53";
-const gapResponsive = "_gapResponsive_1otmq_57";
-const alignStart = "_align-start_1otmq_81";
-const alignCenter = "_align-center_1otmq_85";
-const alignEnd = "_align-end_1otmq_89";
-const alignStretch = "_align-stretch_1otmq_93";
-const alignBaseline = "_align-baseline_1otmq_97";
-const justifyStart = "_justify-start_1otmq_101";
-const justifyCenter = "_justify-center_1otmq_105";
-const justifyEnd = "_justify-end_1otmq_109";
-const justifyBetween = "_justify-between_1otmq_113";
-const wrap = "_wrap_1otmq_117";
-const separator = "_separator_1otmq_121";
+const stack = "_stack_4n27t_1";
+const row = "_row_4n27t_6";
+const column = "_column_4n27t_10";
+const directionResponsive = "_directionResponsive_4n27t_14";
+const gapResponsive = "_gapResponsive_4n27t_38";
+const alignStart = "_align-start_4n27t_62";
+const alignCenter = "_align-center_4n27t_66";
+const alignEnd = "_align-end_4n27t_70";
+const alignStretch = "_align-stretch_4n27t_74";
+const alignBaseline = "_align-baseline_4n27t_78";
+const justifyStart = "_justify-start_4n27t_82";
+const justifyCenter = "_justify-center_4n27t_86";
+const justifyEnd = "_justify-end_4n27t_90";
+const justifyBetween = "_justify-between_4n27t_94";
+const wrap = "_wrap_4n27t_98";
+const separator = "_separator_4n27t_102";
 const styles = {
   stack,
   row,
   column,
   directionResponsive,
-  "gap-xs": "_gap-xs_1otmq_37",
-  gapXs,
-  "gap-sm": "_gap-sm_1otmq_41",
-  gapSm,
-  "gap-md": "_gap-md_1otmq_45",
-  gapMd,
-  "gap-lg": "_gap-lg_1otmq_49",
-  gapLg,
-  "gap-xl": "_gap-xl_1otmq_53",
-  gapXl,
   gapResponsive,
-  "align-start": "_align-start_1otmq_81",
+  "align-start": "_align-start_4n27t_62",
   alignStart,
-  "align-center": "_align-center_1otmq_85",
+  "align-center": "_align-center_4n27t_66",
   alignCenter,
-  "align-end": "_align-end_1otmq_89",
+  "align-end": "_align-end_4n27t_70",
   alignEnd,
-  "align-stretch": "_align-stretch_1otmq_93",
+  "align-stretch": "_align-stretch_4n27t_74",
   alignStretch,
-  "align-baseline": "_align-baseline_1otmq_97",
+  "align-baseline": "_align-baseline_4n27t_78",
   alignBaseline,
-  "justify-start": "_justify-start_1otmq_101",
+  "justify-start": "_justify-start_4n27t_82",
   justifyStart,
-  "justify-center": "_justify-center_1otmq_105",
+  "justify-center": "_justify-center_4n27t_86",
   justifyCenter,
-  "justify-end": "_justify-end_1otmq_109",
+  "justify-end": "_justify-end_4n27t_90",
   justifyEnd,
-  "justify-between": "_justify-between_1otmq_113",
+  "justify-between": "_justify-between_4n27t_94",
   justifyBetween,
   wrap,
   separator
@@ -66,12 +51,7 @@ exports.alignStretch = alignStretch;
 exports.column = column;
 exports.default = styles;
 exports.directionResponsive = directionResponsive;
-exports.gapLg = gapLg;
-exports.gapMd = gapMd;
 exports.gapResponsive = gapResponsive;
-exports.gapSm = gapSm;
-exports.gapXl = gapXl;
-exports.gapXs = gapXs;
 exports.justifyBetween = justifyBetween;
 exports.justifyCenter = justifyCenter;
 exports.justifyEnd = justifyEnd;

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

@@ -1,57 +1,42 @@
-const stack = "_stack_1otmq_1";
-const row = "_row_1otmq_5";
-const column = "_column_1otmq_9";
-const directionResponsive = "_directionResponsive_1otmq_13";
-const gapXs = "_gap-xs_1otmq_37";
-const gapSm = "_gap-sm_1otmq_41";
-const gapMd = "_gap-md_1otmq_45";
-const gapLg = "_gap-lg_1otmq_49";
-const gapXl = "_gap-xl_1otmq_53";
-const gapResponsive = "_gapResponsive_1otmq_57";
-const alignStart = "_align-start_1otmq_81";
-const alignCenter = "_align-center_1otmq_85";
-const alignEnd = "_align-end_1otmq_89";
-const alignStretch = "_align-stretch_1otmq_93";
-const alignBaseline = "_align-baseline_1otmq_97";
-const justifyStart = "_justify-start_1otmq_101";
-const justifyCenter = "_justify-center_1otmq_105";
-const justifyEnd = "_justify-end_1otmq_109";
-const justifyBetween = "_justify-between_1otmq_113";
-const wrap = "_wrap_1otmq_117";
-const separator = "_separator_1otmq_121";
+const stack = "_stack_4n27t_1";
+const row = "_row_4n27t_6";
+const column = "_column_4n27t_10";
+const directionResponsive = "_directionResponsive_4n27t_14";
+const gapResponsive = "_gapResponsive_4n27t_38";
+const alignStart = "_align-start_4n27t_62";
+const alignCenter = "_align-center_4n27t_66";
+const alignEnd = "_align-end_4n27t_70";
+const alignStretch = "_align-stretch_4n27t_74";
+const alignBaseline = "_align-baseline_4n27t_78";
+const justifyStart = "_justify-start_4n27t_82";
+const justifyCenter = "_justify-center_4n27t_86";
+const justifyEnd = "_justify-end_4n27t_90";
+const justifyBetween = "_justify-between_4n27t_94";
+const wrap = "_wrap_4n27t_98";
+const separator = "_separator_4n27t_102";
 const styles = {
   stack,
   row,
   column,
   directionResponsive,
-  "gap-xs": "_gap-xs_1otmq_37",
-  gapXs,
-  "gap-sm": "_gap-sm_1otmq_41",
-  gapSm,
-  "gap-md": "_gap-md_1otmq_45",
-  gapMd,
-  "gap-lg": "_gap-lg_1otmq_49",
-  gapLg,
-  "gap-xl": "_gap-xl_1otmq_53",
-  gapXl,
   gapResponsive,
-  "align-start": "_align-start_1otmq_81",
+  "align-start": "_align-start_4n27t_62",
   alignStart,
-  "align-center": "_align-center_1otmq_85",
+  "align-center": "_align-center_4n27t_66",
   alignCenter,
-  "align-end": "_align-end_1otmq_89",
+  "align-end": "_align-end_4n27t_70",
   alignEnd,
-  "align-stretch": "_align-stretch_1otmq_93",
+  "align-stretch": "_align-stretch_4n27t_74",
   alignStretch,
-  "align-baseline": "_align-baseline_1otmq_97",
+  "align-baseline": "_align-baseline_4n27t_78",
   alignBaseline,
-  "justify-start": "_justify-start_1otmq_101",
+  "justify-start": "_justify-start_4n27t_82",
   justifyStart,
-  "justify-center": "_justify-center_1otmq_105",
+  "justify-center": "_justify-center_4n27t_86",
   justifyCenter,
-  "justify-end": "_justify-end_1otmq_109",
+  "justify-end": "_justify-end_4n27t_90",
   justifyEnd,
-  "justify-between": "_justify-between_1otmq_113",
+  "justify-between": "_justify-between_4n27t_94",
   justifyBetween,
   wrap,
   separator
@@ -65,12 +50,7 @@ export {
   column,
   styles as default,
   directionResponsive,
-  gapLg,
-  gapMd,
   gapResponsive,
-  gapSm,
-  gapXl,
-  gapXs,
   justifyBetween,
   justifyCenter,
   justifyEnd,

package/dist/components/Stack/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const layoutSpacing = require("../../utils/layout-spacing.cjs");
 const Stack_module = require("./Stack.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -29,109 +30,113 @@ function isResponsiveGap(gap) {
 function isNumericGap(gap) {
   return typeof gap === "number";
 }
-const StackRoot = React__namespace.forwardRef(
-  function Stack2({
-    children,
-    direction = "column",
-    gap = "md",
-    align,
-    justify,
-    wrap = false,
-    separator,
-    as: Component = "div",
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    let directionClass;
-    let gapClass;
-    let inlineStyle;
-    if (isResponsiveDirection(direction)) {
-      directionClass = Stack_module.default.directionResponsive;
-      const vars = {};
-      if (direction.base) vars["--fui-stack-direction"] = direction.base;
-      if (direction.sm) vars["--fui-stack-direction-sm"] = direction.sm;
-      if (direction.md) vars["--fui-stack-direction-md"] = direction.md;
-      if (direction.lg) vars["--fui-stack-direction-lg"] = direction.lg;
-      if (direction.xl) vars["--fui-stack-direction-xl"] = direction.xl;
-      inlineStyle = vars;
-    } else {
-      directionClass = Stack_module.default[direction];
-    }
-    if (isResponsiveGap(gap)) {
-      gapClass = Stack_module.default.gapResponsive;
-      const gapVars = {};
-      if (gap.base && gap.base !== "none") gapVars["--fui-stack-gap"] = `var(--fui-space-${gapToSpace(gap.base)})`;
-      if (gap.sm && gap.sm !== "none") gapVars["--fui-stack-gap-sm"] = `var(--fui-space-${gapToSpace(gap.sm)})`;
-      if (gap.md && gap.md !== "none") gapVars["--fui-stack-gap-md"] = `var(--fui-space-${gapToSpace(gap.md)})`;
-      if (gap.lg && gap.lg !== "none") gapVars["--fui-stack-gap-lg"] = `var(--fui-space-${gapToSpace(gap.lg)})`;
-      if (gap.xl && gap.xl !== "none") gapVars["--fui-stack-gap-xl"] = `var(--fui-space-${gapToSpace(gap.xl)})`;
-      inlineStyle = { ...inlineStyle, ...gapVars };
-    } else if (isNumericGap(gap)) {
-      gapClass = false;
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` };
-    } else {
-      gapClass = gap !== "none" && Stack_module.default[`gap-${gap}`];
-    }
-    const classes = [
-      Stack_module.default.stack,
-      directionClass,
-      gapClass,
-      align && Stack_module.default[`align-${align}`],
-      justify && Stack_module.default[`justify-${justify}`],
-      wrap && Stack_module.default.wrap,
-      className
-    ].filter(Boolean).join(" ");
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-    let content = children;
-    if (separator) {
-      const validChildren = React__namespace.Children.toArray(children).filter(Boolean);
-      if (validChildren.length > 1) {
-        const resolvedDir = isResponsiveDirection(direction) ? direction.base ?? "column" : direction;
-        const separatorEl = separator === true ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: Stack_module.default.separator,
-            "data-orientation": resolvedDir === "row" ? "vertical" : "horizontal",
-            role: "separator"
-          }
-        ) : separator;
-        const items = [];
-        validChildren.forEach((child, idx) => {
-          items.push(child);
-          if (idx < validChildren.length - 1) {
-            const childKey = React__namespace.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
-            items.push(
-              /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: separatorEl }, `sep-${childKey}`)
-            );
-          }
-        });
-        content = items;
-      }
+const StackRoot = React__namespace.forwardRef(function Stack2({
+  children,
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  separator,
+  as: Component = "div",
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  let directionClass;
+  let gapClass;
+  let inlineStyle;
+  if (isResponsiveDirection(direction)) {
+    directionClass = Stack_module.default.directionResponsive;
+    const vars = {};
+    const baseDirection = direction.base ?? "column";
+    const smDirection = direction.sm ?? baseDirection;
+    const mdDirection = direction.md ?? smDirection;
+    const lgDirection = direction.lg ?? mdDirection;
+    const xlDirection = direction.xl ?? lgDirection;
+    vars["--fui-stack-direction"] = baseDirection;
+    vars["--fui-stack-direction-sm"] = smDirection;
+    vars["--fui-stack-direction-md"] = mdDirection;
+    vars["--fui-stack-direction-lg"] = lgDirection;
+    vars["--fui-stack-direction-xl"] = xlDirection;
+    inlineStyle = vars;
+  } else {
+    directionClass = Stack_module.default[direction] ?? "";
+  }
+  if (isResponsiveGap(gap)) {
+    gapClass = Stack_module.default.gapResponsive;
+    const gapVars = {};
+    if (gap.base) gapVars["--fui-stack-gap"] = layoutSpacing.resolveLayoutGap(gap.base);
+    if (gap.sm) gapVars["--fui-stack-gap-sm"] = layoutSpacing.resolveLayoutGap(gap.sm);
+    if (gap.md) gapVars["--fui-stack-gap-md"] = layoutSpacing.resolveLayoutGap(gap.md);
+    if (gap.lg) gapVars["--fui-stack-gap-lg"] = layoutSpacing.resolveLayoutGap(gap.lg);
+    if (gap.xl) gapVars["--fui-stack-gap-xl"] = layoutSpacing.resolveLayoutGap(gap.xl);
+    inlineStyle = { ...inlineStyle, ...gapVars };
+  } else if (isNumericGap(gap)) {
+    gapClass = false;
+    inlineStyle = {
+      ...inlineStyle,
+      "--fui-stack-gap": layoutSpacing.resolveLayoutGap(gap)
+    };
+  } else {
+    gapClass = false;
+    inlineStyle = {
+      ...inlineStyle,
+      "--fui-stack-gap": layoutSpacing.resolveLayoutGap(gap)
+    };
+  }
+  const classes = [
+    Stack_module.default.stack,
+    directionClass,
+    gapClass,
+    align && Stack_module.default[`align-${align}`],
+    justify && Stack_module.default[`justify-${justify}`],
+    wrap && Stack_module.default.wrap,
+    className
+  ].filter(Boolean).join(" ");
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+  let content = children;
+  if (separator) {
+    const validChildren = React__namespace.Children.toArray(children).filter(Boolean);
+    if (validChildren.length > 1) {
+      const responsiveDirection = isResponsiveDirection(direction);
+      const resolvedDir = responsiveDirection ? direction.base ?? "column" : direction;
+      const separatorEl = separator === true ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: Stack_module.default.separator,
+          "data-orientation": resolvedDir === "row" ? "vertical" : "horizontal",
+          role: responsiveDirection ? void 0 : "separator",
+          "aria-hidden": responsiveDirection ? true : void 0
+        }
+      ) : separator;
+      const items = [];
+      validChildren.forEach((child, idx) => {
+        items.push(child);
+        if (idx < validChildren.length - 1) {
+          const childKey = React__namespace.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
+          items.push(/* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: separatorEl }, `sep-${childKey}`));
+        }
+      });
+      content = items;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ...htmlProps,
-        ref,
-        className: classes,
-        style: mergedStyle,
-        children: content
-      }
-    );
   }
-);
-function gapToSpace(gap) {
-  const map = {
-    none: "0",
-    xs: "1",
-    sm: "2",
-    md: "3",
-    lg: "4",
-    xl: "6"
-  };
-  return map[gap];
-}
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...htmlProps,
+      ref,
+      className: classes,
+      style: mergedStyle,
+      "data-direction-base": isResponsiveDirection(direction) ? direction.base ?? "column" : direction,
+      "data-direction-sm": isResponsiveDirection(direction) ? direction.sm ?? direction.base ?? "column" : direction,
+      "data-direction-md": isResponsiveDirection(direction) ? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
+      "data-direction-lg": isResponsiveDirection(direction) ? direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
+      "data-direction-xl": isResponsiveDirection(direction) ? direction.xl ?? direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column" : direction,
+      children: content
+    }
+  );
+});
 const Stack = Object.assign(StackRoot, {
   Root: StackRoot
 });

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
-type Direction = 'row' | 'column';
-type GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import * as React from "react";
+type Direction = "row" | "column";
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 /** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */
 type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type Gap = GapToken | GapScale;
@@ -34,7 +34,7 @@ export interface ResponsiveGap {
  * Flexbox layout component for vertical or horizontal stacking with consistent spacing.
  * @see https://usefragments.com/components/stack
  */
-export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'style' | 'className'> {
+export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "style" | "className"> {
     children: React.ReactNode;
     /**
      * Stack direction.
@@ -48,8 +48,8 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'chi
      * - An object for responsive gap: `{ base: "sm", md: "lg" }`
      */
     gap?: Gap | ResponsiveGap;
-    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-    justify?: 'start' | 'center' | 'end' | 'between';
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    justify?: "start" | "center" | "end" | "between";
     wrap?: boolean;
     /**
      * Render a separator between each child.
@@ -57,7 +57,7 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'chi
      * - A ReactNode renders custom content between children
      */
     separator?: boolean | React.ReactNode;
-    as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';
+    as?: "div" | "section" | "nav" | "article" | "aside" | "header" | "footer" | "main" | "ul" | "ol";
     className?: string;
     style?: React.CSSProperties;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,8EAA8E;AAC9E,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9C,KAAK,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE/B,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC7G,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAyID,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClC,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,8EAA8E;AAC9E,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9C,KAAK,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE/B,2EAA2E;AAC3E,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,2BAA2B;AAC3B,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,aAAa;IACb,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,cAAc;IACd,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,GAAG,OAAO,GAAG,WAAW,CACnC;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAmKD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}