@usefragments/ui 1.0.0

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+/**
+ * Range slider for selecting a numeric value within a defined range.
+ * @see https://usefragments.com/components/slider
+ */
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Visible label text */
+    label?: string;
+    /** Helper text shown below the slider */
+    helperText?: string;
+    /** Show error styling */
+    error?: boolean;
+    /** Controlled value */
+    value?: number;
+    /** Default value for uncontrolled usage */
+    defaultValue?: number;
+    /** Called when the slider value changes */
+    onChange?: (value: number) => void;
+    /** Alias for onChange (Radix convention) */
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+    /** Show a value bubble above the thumb while dragging */
+    showValueOnDrag?: boolean;
+    valueSuffix?: string;
+    disabled?: boolean;
+    name?: string;
+    /** ID of the form that owns the hidden slider input */
+    form?: string;
+    /** Callback when the user commits a slider value */
+    onValueCommitted?: (value: number) => void;
+    /** Larger step used for Page Up/Page Down and shift-arrow keyboard input */
+    largeStep?: number;
+    /** How the thumb is aligned at the minimum and maximum edges */
+    thumbAlignment?: "center" | "edge" | "edge-client-only";
+    /** Accessible label when visible label is omitted */
+    "aria-label"?: string;
+    /** Accessible labelled-by relationship */
+    "aria-labelledby"?: string;
+    /** Accessible described-by relationship */
+    "aria-describedby"?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,CAC5B;IACC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,kBAAkB,CAAC;IACxD,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAsID,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Slider/index.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "@base-ui/react/field";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+import styles from "./Slider.module.scss.js";
+const SliderRoot = React.forwardRef(function Slider2({
+  label,
+  helperText,
+  error = false,
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  showValueOnDrag = false,
+  valueSuffix = "",
+  disabled = false,
+  className,
+  name,
+  form,
+  onValueCommitted,
+  largeStep,
+  thumbAlignment,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}, ref) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const displayValue = value !== void 0 ? value : internalValue;
+  const resolvedOnChange = onChange ?? onValueChange;
+  const handleChange = (newValue) => {
+    const val = Array.isArray(newValue) ? newValue[0] : newValue;
+    setInternalValue(val);
+    resolvedOnChange == null ? void 0 : resolvedOnChange(val);
+  };
+  const handleValueCommitted = (newValue) => {
+    const val = Array.isArray(newValue) ? newValue[0] : newValue;
+    onValueCommitted == null ? void 0 : onValueCommitted(val);
+  };
+  const handleDragStart = () => {
+    if (!disabled && showValueOnDrag) {
+      setIsDragging(true);
+    }
+  };
+  React.useEffect(() => {
+    if (!isDragging) return;
+    const handlePointerEnd = () => setIsDragging(false);
+    window.addEventListener("pointerup", handlePointerEnd);
+    window.addEventListener("pointercancel", handlePointerEnd);
+    return () => {
+      window.removeEventListener("pointerup", handlePointerEnd);
+      window.removeEventListener("pointercancel", handlePointerEnd);
+    };
+  }, [isDragging]);
+  React.useEffect(() => {
+    if (disabled && isDragging) {
+      setIsDragging(false);
+    }
+  }, [disabled, isDragging]);
+  const helperClasses = [styles.helper, error && styles.helperError].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    Field.Root,
+    {
+      ...htmlProps,
+      disabled,
+      invalid: error,
+      className: [styles.wrapper, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Slider$1.Root,
+          {
+            ref,
+            value: value !== void 0 ? [value] : void 0,
+            defaultValue: defaultValue !== void 0 ? [defaultValue] : void 0,
+            onValueChange: handleChange,
+            min,
+            max,
+            step,
+            disabled,
+            name,
+            form,
+            onValueCommitted: handleValueCommitted,
+            largeStep,
+            thumbAlignment,
+            id,
+            "aria-label": ariaLabel || (label ? void 0 : "Slider"),
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            className: styles.root,
+            onPointerDownCapture: handleDragStart,
+            children: [
+              (label || showValue) && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+                label && /* @__PURE__ */ jsx(Slider$1.Label, { className: styles.label, children: label }),
+                showValue && /* @__PURE__ */ jsxs("span", { className: styles.value, children: [
+                  displayValue,
+                  valueSuffix
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Slider$1.Control, { className: styles.control, children: /* @__PURE__ */ jsxs(Slider$1.Track, { className: styles.track, children: [
+                /* @__PURE__ */ jsx(Slider$1.Indicator, { className: styles.indicator }),
+                /* @__PURE__ */ jsx(Slider$1.Thumb, { className: styles.thumb, children: showValueOnDrag && isDragging && /* @__PURE__ */ jsxs("span", { className: styles.dragValueBubble, "aria-hidden": "true", children: [
+                  displayValue,
+                  valueSuffix
+                ] }) })
+              ] }) })
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(Field.Description, { className: helperClasses, children: helperText })
+      ]
+    }
+  );
+});
+const Slider = Object.assign(SliderRoot, {
+  Root: SliderRoot
+});
+export {
+  Slider
+};

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

@@ -0,0 +1,82 @@
+"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 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",
+  alignStart,
+  "align-center": "_align-center_1otmq_85",
+  alignCenter,
+  "align-end": "_align-end_1otmq_89",
+  alignEnd,
+  "align-stretch": "_align-stretch_1otmq_93",
+  alignStretch,
+  "align-baseline": "_align-baseline_1otmq_97",
+  alignBaseline,
+  "justify-start": "_justify-start_1otmq_101",
+  justifyStart,
+  "justify-center": "_justify-center_1otmq_105",
+  justifyCenter,
+  "justify-end": "_justify-end_1otmq_109",
+  justifyEnd,
+  "justify-between": "_justify-between_1otmq_113",
+  justifyBetween,
+  wrap,
+  separator
+};
+exports.alignBaseline = alignBaseline;
+exports.alignCenter = alignCenter;
+exports.alignEnd = alignEnd;
+exports.alignStart = alignStart;
+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;
+exports.justifyStart = justifyStart;
+exports.row = row;
+exports.separator = separator;
+exports.stack = stack;
+exports.wrap = wrap;

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

@@ -0,0 +1,82 @@
+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 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",
+  alignStart,
+  "align-center": "_align-center_1otmq_85",
+  alignCenter,
+  "align-end": "_align-end_1otmq_89",
+  alignEnd,
+  "align-stretch": "_align-stretch_1otmq_93",
+  alignStretch,
+  "align-baseline": "_align-baseline_1otmq_97",
+  alignBaseline,
+  "justify-start": "_justify-start_1otmq_101",
+  justifyStart,
+  "justify-center": "_justify-center_1otmq_105",
+  justifyCenter,
+  "justify-end": "_justify-end_1otmq_109",
+  justifyEnd,
+  "justify-between": "_justify-between_1otmq_113",
+  justifyBetween,
+  wrap,
+  separator
+};
+export {
+  alignBaseline,
+  alignCenter,
+  alignEnd,
+  alignStart,
+  alignStretch,
+  column,
+  styles as default,
+  directionResponsive,
+  gapLg,
+  gapMd,
+  gapResponsive,
+  gapSm,
+  gapXl,
+  gapXs,
+  justifyBetween,
+  justifyCenter,
+  justifyEnd,
+  justifyStart,
+  row,
+  separator,
+  stack,
+  wrap
+};

package/dist/components/Stack/index.cjs

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Stack_module = require("./Stack.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function isResponsiveDirection(direction) {
+  return typeof direction === "object" && direction !== null;
+}
+function isResponsiveGap(gap) {
+  return typeof gap === "object" && gap !== null;
+}
+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;
+      }
+    }
+    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];
+}
+const Stack = Object.assign(StackRoot, {
+  Root: StackRoot
+});
+exports.Stack = Stack;

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

@@ -0,0 +1,68 @@
+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;
+/** Responsive value — either a single value or per-breakpoint overrides */
+export interface ResponsiveDirection {
+    /** Default (mobile-first) */
+    base?: Direction;
+    /** ≥640px */
+    sm?: Direction;
+    /** ≥768px */
+    md?: Direction;
+    /** ≥1024px */
+    lg?: Direction;
+    /** ≥1280px */
+    xl?: Direction;
+}
+/** Responsive gap value */
+export interface ResponsiveGap {
+    /** Default (mobile-first) */
+    base?: GapToken;
+    /** ≥640px */
+    sm?: GapToken;
+    /** ≥768px */
+    md?: GapToken;
+    /** ≥1024px */
+    lg?: GapToken;
+    /** ≥1280px */
+    xl?: GapToken;
+}
+/**
+ * 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'> {
+    children: React.ReactNode;
+    /**
+     * Stack direction.
+     * - A string for fixed direction: `"row"` or `"column"`
+     * - An object for responsive direction: `{ base: "column", md: "row" }`
+     */
+    direction?: Direction | ResponsiveDirection;
+    /**
+     * Gap between items.
+     * - A string for fixed gap: `"sm"`, `"md"`, etc.
+     * - An object for responsive gap: `{ base: "sm", md: "lg" }`
+     */
+    gap?: Gap | ResponsiveGap;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    /**
+     * Render a separator between each child.
+     * - `true` renders a default 1px border line
+     * - A ReactNode renders custom content between children
+     */
+    separator?: boolean | React.ReactNode;
+    as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>> & {
+    Root: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Stack/index.js

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Stack.module.scss.js";
+function isResponsiveDirection(direction) {
+  return typeof direction === "object" && direction !== null;
+}
+function isResponsiveGap(gap) {
+  return typeof gap === "object" && gap !== null;
+}
+function isNumericGap(gap) {
+  return typeof gap === "number";
+}
+const StackRoot = React.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 = styles.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 = styles[direction];
+    }
+    if (isResponsiveGap(gap)) {
+      gapClass = styles.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" && styles[`gap-${gap}`];
+    }
+    const classes = [
+      styles.stack,
+      directionClass,
+      gapClass,
+      align && styles[`align-${align}`],
+      justify && styles[`justify-${justify}`],
+      wrap && styles.wrap,
+      className
+    ].filter(Boolean).join(" ");
+    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+    let content = children;
+    if (separator) {
+      const validChildren = React.Children.toArray(children).filter(Boolean);
+      if (validChildren.length > 1) {
+        const resolvedDir = isResponsiveDirection(direction) ? direction.base ?? "column" : direction;
+        const separatorEl = separator === true ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.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.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
+            items.push(
+              /* @__PURE__ */ jsx(React.Fragment, { children: separatorEl }, `sep-${childKey}`)
+            );
+          }
+        });
+        content = items;
+      }
+    }
+    return /* @__PURE__ */ 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];
+}
+const Stack = Object.assign(StackRoot, {
+  Root: StackRoot
+});
+export {
+  Stack
+};

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

@@ -0,0 +1,2 @@
+export { Switch, type SwitchProps, Toggle, type ToggleProps } from '../Toggle';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC"}