@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

package/dist/components/form/Slider/Slider.cjs

@@ -1,12 +1,14 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks_useControlledValue_useControlledValue_cjs = require("../../../hooks/useControlledValue/useControlledValue.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_utils_math_cjs = require("../../../lib/utils/math.cjs");
-const components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
-const components_form_Slider_usePointerProgress_cjs = require("./usePointerProgress.cjs");
+const useControlledValue = require("../../../hooks/useControlledValue/useControlledValue.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const math = require("../../../lib/utils/math.cjs");
+const slider_css = require("./slider.css.cjs");
+const usePointerProgress = require("./usePointerProgress.cjs");
 const usableKeys = /* @__PURE__ */ new Set([
   "ArrowLeft",
   "ArrowRight",
@@ -34,25 +36,25 @@ const Slider = ({
   precision = 2,
   ...restProps
 }) => {
-  const baseClass = lib_theme_store_theme_cjs.getComponentStyles("slider", {
+  const baseClass = theme.getComponentStyles("slider", {
     base: true,
     variants: { size, colorScheme, disabled }
   });
-  const trackClass = lib_theme_store_theme_cjs.getComponentStyles("slider", { track: true }, false);
-  const filledTrackClass = lib_theme_store_theme_cjs.getComponentStyles(
+  const trackClass = theme.getComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = theme.getComponentStyles(
     "slider",
     { filledTrack: true },
     false
   );
-  const thumbClass = lib_theme_store_theme_cjs.getComponentStyles("slider", { thumb: true }, false);
+  const thumbClass = theme.getComponentStyles("slider", { thumb: true }, false);
   const containerRef = react.useRef(null);
-  const [currentValue, setValue] = hooks_useControlledValue_useControlledValue_cjs.useControlledValue({
+  const [currentValue, setValue] = useControlledValue.useControlledValue({
     defaultValue,
     value,
     onChange,
-    transformValue: (value2) => lib_utils_math_cjs.roundToPrecision(lib_utils_math_cjs.getBoundValue(value2, min, max, step), precision)
+    transformValue: (value2) => math.roundToPrecision(math.getBoundValue(value2, min, max, step), precision)
   });
-  components_form_Slider_usePointerProgress_cjs.usePointerProgress({
+  usePointerProgress.usePointerProgress({
     container: containerRef,
     orientation,
     onChange(progress) {
@@ -91,16 +93,16 @@ const Slider = ({
     "div",
     {
       ref: containerRef,
-      className: lib_utils_classnames_cjs.classnames(
-        components_form_Slider_slider_css_cjs.container,
-        orientation === "vertical" ? components_form_Slider_slider_css_cjs.containerVertical : "",
+      className: classnames.classnames(
+        slider_css.container,
+        orientation === "vertical" ? slider_css.containerVertical : "",
         baseClass
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib_utils_classnames_cjs.classnames(components_form_Slider_slider_css_cjs.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames.classnames(slider_css.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: lib_utils_classnames_cjs.classnames(components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
+            className: classnames.classnames(slider_css.filledTrack, filledTrackClass),
             style: {
               inlineSize: `${currentValue / max * 100}%`
             }
@@ -110,7 +112,7 @@ const Slider = ({
           "button",
           {
             type: "button",
-            className: lib_utils_classnames_cjs.classnames(components_form_Slider_slider_css_cjs.thumb, thumbClass),
+            className: classnames.classnames(slider_css.thumb, thumbClass),
             role: "slider",
             "aria-valuemin": min,
             "aria-valuemax": max,

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SliderTheme } from '../../../lib/theme/componentThemes';
+export type SliderProps = {
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    'aria-label'?: string;
+    size: SliderTheme['variants']['size'];
+    colorScheme: SliderTheme['variants']['colorScheme'];
+    disabled?: boolean;
+    precision?: number;
+};
+export declare const Slider: React.FC<SliderProps>;

package/dist/components/form/Slider/{Slider.mjs → Slider.js}

@@ -1,13 +1,12 @@
-'use client';
-
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useCallback } from "react";
-import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { roundToPrecision, getBoundValue } from "../../../lib/utils/math.mjs";
-import { filledTrack, track, thumb, containerVertical, container } from "./slider.css.mjs";
-import { usePointerProgress } from "./usePointerProgress.mjs";
+import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { roundToPrecision, getBoundValue } from "../../../lib/utils/math.js";
+import { filledTrack, track, thumb, containerVertical, container } from "./slider.css.js";
+import { usePointerProgress } from "./usePointerProgress.js";
 const usableKeys = /* @__PURE__ */ new Set([
   "ArrowLeft",
   "ArrowRight",

package/dist/components/form/Slider/Slider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form/Slider/Slider.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Slider, SliderProps } from './Slider';
+declare const _default: Meta<typeof Slider>;
+export default _default;
+export declare const Default: StoryObj<SliderProps>;
+export declare const WithState: StoryObj<SliderProps>;

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

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from './Slider';

package/dist/components/form/Slider/slider.css.cjs

@@ -1,26 +1,27 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "relative",
       writingMode: "horizontal-tb"
     }
   }
-}, "container");
+});
 const containerVertical = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       writingMode: "vertical-lr"
     }
   }
-}, "containerVertical");
+});
 const track = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       cursor: "pointer",
       position: "absolute",
       inlineSize: "100%",
@@ -33,10 +34,10 @@ const track = css.style({
       }
     }
   }
-}, "track");
+});
 const filledTrack = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "absolute",
       blockSize: "100%",
       borderRadius: "inherit",
@@ -47,10 +48,10 @@ const filledTrack = css.style({
       }
     }
   }
-}, "filledTrack");
+});
 const thumb = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       cursor: "pointer",
       position: "absolute",
       blockSize: "100%",
@@ -65,7 +66,7 @@ const thumb = css.style({
       }
     }
   }
-}, "thumb");
+});
 fileScope.endFileScope();
 exports.container = container;
 exports.containerVertical = containerVertical;

package/dist/components/form/Slider/slider.css.d.ts

@@ -0,0 +1,5 @@
+export declare const container: string;
+export declare const containerVertical: string;
+export declare const track: string;
+export declare const filledTrack: string;
+export declare const thumb: string;

package/dist/components/form/Slider/{slider.css.mjs → slider.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
@@ -9,14 +9,14 @@ const container = style({
       writingMode: "horizontal-tb"
     }
   }
-}, "container");
+});
 const containerVertical = style({
   "@layer": {
     [blocksLayer]: {
       writingMode: "vertical-lr"
     }
   }
-}, "containerVertical");
+});
 const track = style({
   "@layer": {
     [blocksLayer]: {
@@ -32,7 +32,7 @@ const track = style({
       }
     }
   }
-}, "track");
+});
 const filledTrack = style({
   "@layer": {
     [blocksLayer]: {
@@ -46,7 +46,7 @@ const filledTrack = style({
       }
     }
   }
-}, "filledTrack");
+});
 const thumb = style({
   "@layer": {
     [blocksLayer]: {
@@ -64,7 +64,7 @@ const thumb = style({
       }
     }
   }
-}, "thumb");
+});
 endFileScope();
 export {
   container,

package/dist/components/form/Slider/usePointerProgress.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 function getProgress(event, rect) {
   const { clientX, clientY } = event;
@@ -41,4 +43,5 @@ function usePointerProgress({ container, orientation, onChange }) {
     };
   }, [container, onChange, orientation]);
 }
+exports.getProgress = getProgress;
 exports.usePointerProgress = usePointerProgress;

package/dist/components/form/Slider/usePointerProgress.d.ts

@@ -0,0 +1,11 @@
+type PointerProgressOptions<T extends React.RefObject<HTMLElement | null>> = {
+    container: T;
+    orientation: 'horizontal' | 'vertical';
+    onChange(progress: number): void;
+};
+export declare function getProgress(event: PointerEvent, rect: DOMRect): [x: number, y: number];
+/**
+ * Utility hook to track pointer events and calculate progress based on the pointer position.
+ */
+export declare function usePointerProgress<T extends React.RefObject<HTMLElement | null>>({ container, orientation, onChange }: PointerProgressOptions<T>): void;
+export {};

package/dist/components/form/Slider/{usePointerProgress.mjs → usePointerProgress.js}

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 function getProgress(event, rect) {
   const { clientX, clientY } = event;
@@ -41,5 +42,6 @@ function usePointerProgress({ container, orientation, onChange }) {
   }, [container, onChange, orientation]);
 }
 export {
+  getProgress,
   usePointerProgress
 };

package/dist/components/form/Switch/Switch.cjs

@@ -1,9 +1,11 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Switch_switch_css_cjs = require("./switch.css.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const switch_css = require("./switch.css.cjs");
 const Switch = ({
   checked,
   className,
@@ -15,8 +17,8 @@ const Switch = ({
   const [isChecked, setIsChecked] = react.useState(
     defaultChecked || checked || false
   );
-  const baseClassName = lib_theme_store_theme_cjs.getComponentStyles("switch", { base: true });
-  const sliderClassName = lib_theme_store_theme_cjs.getComponentStyles("switch", { slider: true }, false);
+  const baseClassName = theme.getComponentStyles("switch", { base: true });
+  const sliderClassName = theme.getComponentStyles("switch", { slider: true }, false);
   react.useEffect(() => {
     if (checked !== void 0) {
       setIsChecked(checked);
@@ -43,7 +45,7 @@ const Switch = ({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: lib_utils_classnames_cjs.classnames(className, components_form_Switch_switch_css_cjs.container, baseClassName),
+      className: classnames.classnames(className, switch_css.container, baseClassName),
       "data-checked": isChecked,
       onClick: (event) => {
         if (event.target.tagName === "INPUT") {
@@ -57,7 +59,7 @@ const Switch = ({
           {
             ref,
             type: "checkbox",
-            className: components_form_Switch_switch_css_cjs.input,
+            className: switch_css.input,
             checked: isChecked,
             onChange: onChangeHandler,
             ...restProps

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

@@ -0,0 +1,6 @@
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type SwitchProps = {
+    onChange?: (value: boolean) => void;
+    ref?: React.Ref<HTMLInputElement>;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/form/Switch/{Switch.mjs → Switch.js}

@@ -1,10 +1,9 @@
-'use client';
-
+"use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { input, container } from "./switch.css.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { input, container } from "./switch.css.js";
 const Switch = ({
   checked,
   className,

package/dist/components/form/Switch/Switch.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SwitchProps } from './Switch';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<SwitchProps>;

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

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './Switch';

package/dist/components/form/Switch/switch.css.cjs

@@ -1,26 +1,27 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       cursor: "pointer",
       userSelect: "none",
       position: "relative"
     }
   }
-}, "container");
+});
 const input = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       opacity: 0,
       maxBlockSize: 0,
       maxInlineSize: 0
     }
   }
-}, "input");
+});
 fileScope.endFileScope();
 exports.container = container;
 exports.input = input;

package/dist/components/form/Switch/switch.css.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+export declare const input: string;

package/dist/components/form/Switch/{switch.css.mjs → switch.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
@@ -10,7 +10,7 @@ const container = style({
       position: "relative"
     }
   }
-}, "container");
+});
 const input = style({
   "@layer": {
     [blocksLayer]: {
@@ -19,7 +19,7 @@ const input = style({
       maxInlineSize: 0
     }
   }
-}, "input");
+});
 endFileScope();
 export {
   container,

package/dist/components/layout/Box/Box.cjs

@@ -1,10 +1,11 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_asChildRenderer_createAsChildTemplate_cjs = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
-const lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const { Template, Slot } = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate("div");
+const createAsChildTemplate = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
+const atomProps = require("../../../lib/utils/atom-props.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const { Template, Slot } = createAsChildTemplate.createAsChildTemplate("div");
 const Box = ({
   asChild,
   className,
@@ -12,13 +13,13 @@ const Box = ({
   ref,
   ...restProps
 }) => {
-  const [atomsProps, otherProps] = lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
+  const [atomsProps, otherProps] = atomProps.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Template,
     {
       ref,
       asChild,
-      className: lib_utils_classnames_cjs.classnames(className, lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
+      className: classnames.classnames(className, sprinkles_css.atoms(atomsProps)),
       ...otherProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }

package/dist/components/layout/Box/Box.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Atoms } from '../../../lib/css/atoms/atomTypes';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type BoxProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
+    style?: React.CSSProperties;
+} & Atoms & HTMLElementProps<HTMLDivElement>;
+export declare const Box: React.FC<BoxProps>;

package/dist/components/layout/Box/{Box.mjs → Box.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.mjs";
-import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.js";
+import { getAtomsAndProps } from "../../../lib/utils/atom-props.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 const { Template, Slot } = createAsChildTemplate("div");
 const Box = ({
   asChild,

package/dist/components/layout/Box/Box.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/layout/Box/Box.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BoxProps } from './Box';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<BoxProps>;
+export declare const AsChild: StoryObj<BoxProps>;

package/dist/components/layout/Box/index.d.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from './Box';

package/dist/components/layout/Inline/Inline.cjs

@@ -1,7 +1,8 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_css_flexbox_flexbox_cjs = require("../../../lib/css/flexbox/flexbox.cjs");
-const components_layout_Box_Box_cjs = require("../Box/Box.cjs");
+const flexbox = require("../../../lib/css/flexbox/flexbox.cjs");
+const Box = require("../Box/Box.cjs");
 const Inline = ({
   alignX,
   alignY,
@@ -12,14 +13,14 @@ const Inline = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+    Box.Box,
     {
       asChild: true,
       display,
       gap: spacing,
       flexDirection: "row",
-      justifyContent: alignX ? lib_css_flexbox_flexbox_cjs.justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? lib_css_flexbox_flexbox_cjs.alignItemsMap[alignY] : void 0,
+      justifyContent: alignX ? flexbox.justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? flexbox.alignItemsMap[alignY] : void 0,
       flexWrap: "wrap",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })

package/dist/components/layout/Inline/Inline.d.ts

@@ -0,0 +1,13 @@
+import { Atoms, MarginAtoms, PaddingAtoms, ResponsiveDisplayFlex } from '../../../lib/css/atoms';
+import { AlignItemsMap, JustifyContentMap } from '../../../lib/css/flexbox/flexbox';
+export type InlineProps = {
+    alignX?: keyof JustifyContentMap;
+    alignY?: keyof AlignItemsMap;
+    tag?: 'div' | 'ul' | 'ol' | 'nav';
+    children: React.ReactNode;
+    className?: string;
+    display?: ResponsiveDisplayFlex;
+    spacing: Atoms['gap'];
+    style?: React.CSSProperties;
+} & MarginAtoms & PaddingAtoms;
+export declare const Inline: React.FC<InlineProps>;

package/dist/components/layout/Inline/{Inline.mjs → Inline.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { alignItemsMap, justifyContentMap } from "../../../lib/css/flexbox/flexbox.mjs";
-import { Box } from "../Box/Box.mjs";
+import { alignItemsMap, justifyContentMap } from "../../../lib/css/flexbox/flexbox.js";
+import { Box } from "../Box/Box.js";
 const Inline = ({
   alignX,
   alignY,

package/dist/components/layout/Inline/Inline.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Inline, InlineProps } from './Inline';
+declare const _default: Meta<typeof Inline>;
+export default _default;
+export declare const Default: StoryObj<InlineProps>;
+export declare const List: StoryObj<InlineProps>;

package/dist/components/layout/Inline/index.d.ts

@@ -0,0 +1 @@
+export { Inline, type InlineProps } from './Inline';

package/dist/components/layout/Stack/Stack.cjs

@@ -1,7 +1,8 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_css_flexbox_flexbox_cjs = require("../../../lib/css/flexbox/flexbox.cjs");
-const components_layout_Box_Box_cjs = require("../Box/Box.cjs");
+const flexbox = require("../../../lib/css/flexbox/flexbox.cjs");
+const Box = require("../Box/Box.cjs");
 const Stack = ({
   tag: Tag = "div",
   display = "flex",
@@ -14,13 +15,13 @@ const Stack = ({
     console.warn('Stack: "start" prop is only valid with tag="ol"');
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+    Box.Box,
     {
       asChild: true,
       display,
       gap: spacing,
       flexDirection: "column",
-      alignItems: alignX ? lib_css_flexbox_flexbox_cjs.alignItemsMap[alignX] : void 0,
+      alignItems: alignX ? flexbox.alignItemsMap[alignX] : void 0,
       ...restProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
     }

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

@@ -0,0 +1,17 @@
+import { Atoms, MarginAtoms, PaddingAtoms, ResponsiveDisplayFlex } from '../../../lib/css/atoms';
+import { AlignItemsMap } from '../../../lib/css/flexbox/flexbox';
+export type StackProps = {
+    alignX?: keyof AlignItemsMap;
+    tag?: 'div' | 'section' | 'ul' | 'ol';
+    children: React.ReactNode;
+    className?: string;
+    display?: ResponsiveDisplayFlex;
+    spacing: Atoms['gap'];
+    style?: React.CSSProperties;
+    role?: React.AriaRole;
+    /**
+     * Start prop is only valid when tag="ol"
+     */
+    start?: number;
+} & MarginAtoms & PaddingAtoms;
+export declare const Stack: React.FC<StackProps>;