@postenbring/hedwig-react 0.0.65 → 0.0.66

package/dist/_tsup-dts-rollup.d.mts

@@ -315,6 +315,8 @@ export { BreadcrumbsProps as BreadcrumbsProps_alias_1 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_2 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_3 }
 
+declare type Breakpoints = "xsmall" | "small" | "medium" | "large" | "xlarge";
+
 export declare const ButtonAsLink: Story_17;
 
 declare type ButtonProps = ButtonPropsInternal & ({
@@ -583,8 +585,6 @@ export declare const Darkmode: Story_26;
 
 export declare const DarkmodeSmall: Story_26;
 
-export declare const DefaulDisabled: Story_14;
-
 export declare const Default: Story_4;
 
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
@@ -736,18 +736,6 @@ declare interface DimensionsFromWidthAndHeight {
     width?: number | string;
 }
 
-export declare const Disabled: Story_5;
-
-export declare const DisabledInput: Story_11;
-
-export declare const DisabledInputWithError: Story_11;
-
-export declare const DisabledOutline: Story_5;
-
-export declare const DisabledTextarea: Story_15;
-
-export declare const DisabledTextareaWithError: Story_15;
-
 declare function ErrorMessage({ children, id, className }: ErrorMessageProps): JSX_2.Element;
 export { ErrorMessage }
 export { ErrorMessage as ErrorMessage_alias_1 }
@@ -851,9 +839,6 @@ declare interface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement>
  * Responsive sections of links. Will become an accordion on mobile.
  *
  * Use with `Footer.LinkSection` for each section.
- *
- * TODO:
- * - [ ] Decrease number of DOM elements rendered. We should not rely on conditional rendering as that will make server-side rendering harder.
  */
 declare const FooterLinkSections: ForwardRefExoticComponent<FooterLinkSectionsProps & RefAttributes<HTMLDivElement>>;
 export { FooterLinkSections }
@@ -897,6 +882,10 @@ export { FooterProps as FooterProps_alias_3 }
 
 export declare const FormWithErrorsOnSubmit: Story_11;
 
+export declare function getResponsiveProps<T>(variable: `--hds-${string}`, inputValues?: ResponsiveProp<T>, valueTransformer?: (value: T) => string): Record<string, string>;
+
+export declare function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes): string;
+
 declare interface HeadingProps {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
     as: React_3.ElementType;
@@ -910,9 +899,20 @@ export declare const HorizontalLongContent: Story_7;
 
 export declare const HorizontalWithMiddleSelected: Story_27;
 
-export declare const IconDisabled: Story_5;
-
-export declare const IconDisabledOutline: Story_5;
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const HStack: React_2.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React_2.RefAttributes<HTMLDivElement>>;
+export { HStack }
+export { HStack as HStack_alias_1 }
+export { HStack as HStack_alias_2 }
+export { HStack as HStack_alias_3 }
+export { HStack as HStack_alias_4 }
 
 export declare const IconPrimary: Story_5;
 
@@ -1094,10 +1094,13 @@ export declare const MinAndMax: Story_28;
  something about the consequences.
  </p>
  </Modal.Content>
- <Modal.Footer style={{ display: "flex", gap: 16 }}>
+ <Modal.Footer>
+ <HStack gap="16" wrap>
+ <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
  <PrimaryButton fill="outline" onClick={onClose}>
- Close
+ Cancel
  </PrimaryButton>
+ </HStack>
  </Modal.Footer>
  </Modal>
  </>
@@ -1452,6 +1455,29 @@ export declare const ReadonlyTextarea: Story_15;
 
 export declare const ReadonlyTextareaWithError: Story_15;
 
+export declare type ResponsiveProp<T> = T | ResponsiveValues<T>;
+
+export declare type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;
+
+declare const responsiveSpacingSizes: {
+    readonly "4-8": "4-8";
+    readonly "8-12": "8-12";
+    readonly "12-16": "12-16";
+    readonly "16-20": "16-20";
+    readonly "20-24": "20-24";
+    readonly "24-32": "24-32";
+    readonly "32-40": "32-40";
+    readonly "40-48": "40-48";
+    readonly "48-64": "48-64";
+    readonly "64-80": "64-80";
+    readonly "80-120": "80-120";
+    readonly "120-160": "120-160";
+};
+
+declare type ResponsiveValues<T> = {
+    [Breakpoint in Breakpoints]?: T;
+};
+
 export declare const Secondary: Story_5;
 
 declare const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement>;
@@ -1598,6 +1624,56 @@ export declare const Small: Story_26;
 
 export declare const Solid: Story_17;
 
+export declare type SpacingSizes = keyof typeof spacingSizes;
+
+declare const spacingSizes: {
+    readonly "4": "4";
+    readonly "8": "8";
+    readonly "12": "12";
+    readonly "16": "16";
+    readonly "20": "20";
+    readonly "24": "24";
+    readonly "32": "32";
+    readonly "40": "40";
+    readonly "48": "48";
+    readonly "64": "64";
+    readonly "80": "80";
+    readonly "120": "120";
+};
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const Stack: React_2.ForwardRefExoticComponent<StackProps & React_2.RefAttributes<HTMLDivElement>>;
+export { Stack }
+export { Stack as Stack_alias_1 }
+export { Stack as Stack_alias_2 }
+export { Stack as Stack_alias_3 }
+export { Stack as Stack_alias_4 }
+
+declare interface StackProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    children: React_2.ReactNode;
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    direction?: ResponsiveProp<React_2.CSSProperties["flexDirection"]>;
+    wrap?: ResponsiveProp<boolean>;
+    align?: ResponsiveProp<React_2.CSSProperties["alignItems"]>;
+    justify?: ResponsiveProp<React_2.CSSProperties["justifyContent"]>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { StackProps }
+export { StackProps as StackProps_alias_1 }
+export { StackProps as StackProps_alias_2 }
+export { StackProps as StackProps_alias_3 }
+export { StackProps as StackProps_alias_4 }
+
 /**
  * Indicate a step in a process.
  *
@@ -1722,12 +1798,6 @@ export { StyledHtmlProps as StyledHtmlProps_alias_3 }
 
 export declare const Success: Story_20;
 
-declare const Tab: OverridableComponent<TabProps, HTMLButtonElement>;
-export { Tab }
-export { Tab as Tab_alias_1 }
-export { Tab as Tab_alias_2 }
-export { Tab as Tab_alias_3 }
-
 declare interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
 }
@@ -1737,7 +1807,7 @@ export { TabContentsProps as TabContentsProps_alias_2 }
 export { TabContentsProps as TabContentsProps_alias_3 }
 
 declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactElement<TabProps> | ReactElement<TabProps>[];
+    children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
     /**
      * Direction of the tabs. Can either be vertical or horizontal.
      * Horizontal breaks on window width with fallback back to vertical
@@ -1749,18 +1819,6 @@ export { TabListProps as TabListProps_alias_1 }
 export { TabListProps as TabListProps_alias_2 }
 export { TabListProps as TabListProps_alias_3 }
 
-declare interface TabProps extends HTMLAttributes<HTMLButtonElement> {
-    children: ReactElement<HTMLElement> | string;
-    /**
-     * Identifier for the tab
-     */
-    tabId: string;
-}
-export { TabProps }
-export { TabProps as TabProps_alias_1 }
-export { TabProps as TabProps_alias_2 }
-export { TabProps as TabProps_alias_3 }
-
 export declare const Tabs_alias_3: OverridableComponent<TabsProps, HTMLDivElement>;
 
 declare const TabsComponent: {
@@ -1770,7 +1828,7 @@ declare const TabsComponent: {
     } & TabsProps & Omit<ComponentPropsWithRef<As>, keyof TabsProps>): ReactNode;
 } & Pick<FC, "displayName"> & {
     List: typeof TabsList;
-    Tab: typeof Tab;
+    Tab: typeof TabsTab;
     Contents: typeof TabsContents;
     Content: typeof TabsContent;
 };
@@ -1835,6 +1893,24 @@ export { TabsProps as TabsProps_alias_1 }
 export { TabsProps as TabsProps_alias_2 }
 export { TabsProps as TabsProps_alias_3 }
 
+declare const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement>;
+export { TabsTab }
+export { TabsTab as TabsTab_alias_1 }
+export { TabsTab as TabsTab_alias_2 }
+export { TabsTab as TabsTab_alias_3 }
+
+declare interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactElement<HTMLElement> | string;
+    /**
+     * Identifier for the tab
+     */
+    tabId: string;
+}
+export { TabsTabProps }
+export { TabsTabProps as TabsTabProps_alias_1 }
+export { TabsTabProps as TabsTabProps_alias_2 }
+export { TabsTabProps as TabsTabProps_alias_3 }
+
 /**
  * Text component
  *
@@ -2134,6 +2210,21 @@ export declare const Vertical: Story_7;
 
 export declare const Vertical_alias_1: Story_27;
 
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const VStack: React_2.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React_2.RefAttributes<HTMLDivElement>>;
+export { VStack }
+export { VStack as VStack_alias_1 }
+export { VStack as VStack_alias_2 }
+export { VStack as VStack_alias_3 }
+export { VStack as VStack_alias_4 }
+
 export declare const Warning: Story_2;
 
 export declare const Warning_alias_1: Story_20;
@@ -2181,16 +2272,6 @@ export { WhiteBadge as WhiteBadge_alias_3 }
 
 export declare const WhiteBox: Story_3;
 
-export declare const WhiteDisabled: Story_14;
-
-export declare const WhiteDisabledInput: Story_11;
-
-export declare const WhiteDisabledInputWithError: Story_11;
-
-export declare const WhiteDisabledTextarea: Story_15;
-
-export declare const WhiteDisabledTextareaWithError: Story_15;
-
 export declare const WhiteInput: Story_11;
 
 export declare const WhiteInputWithError: Story_11;

package/dist/_tsup-dts-rollup.d.ts

@@ -315,6 +315,8 @@ export { BreadcrumbsProps as BreadcrumbsProps_alias_1 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_2 }
 export { BreadcrumbsProps as BreadcrumbsProps_alias_3 }
 
+declare type Breakpoints = "xsmall" | "small" | "medium" | "large" | "xlarge";
+
 export declare const ButtonAsLink: Story_17;
 
 declare type ButtonProps = ButtonPropsInternal & ({
@@ -583,8 +585,6 @@ export declare const Darkmode: Story_26;
 
 export declare const DarkmodeSmall: Story_26;
 
-export declare const DefaulDisabled: Story_14;
-
 export declare const Default: Story_4;
 
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
@@ -736,18 +736,6 @@ declare interface DimensionsFromWidthAndHeight {
     width?: number | string;
 }
 
-export declare const Disabled: Story_5;
-
-export declare const DisabledInput: Story_11;
-
-export declare const DisabledInputWithError: Story_11;
-
-export declare const DisabledOutline: Story_5;
-
-export declare const DisabledTextarea: Story_15;
-
-export declare const DisabledTextareaWithError: Story_15;
-
 declare function ErrorMessage({ children, id, className }: ErrorMessageProps): JSX_2.Element;
 export { ErrorMessage }
 export { ErrorMessage as ErrorMessage_alias_1 }
@@ -851,9 +839,6 @@ declare interface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement>
  * Responsive sections of links. Will become an accordion on mobile.
  *
  * Use with `Footer.LinkSection` for each section.
- *
- * TODO:
- * - [ ] Decrease number of DOM elements rendered. We should not rely on conditional rendering as that will make server-side rendering harder.
  */
 declare const FooterLinkSections: ForwardRefExoticComponent<FooterLinkSectionsProps & RefAttributes<HTMLDivElement>>;
 export { FooterLinkSections }
@@ -897,6 +882,10 @@ export { FooterProps as FooterProps_alias_3 }
 
 export declare const FormWithErrorsOnSubmit: Story_11;
 
+export declare function getResponsiveProps<T>(variable: `--hds-${string}`, inputValues?: ResponsiveProp<T>, valueTransformer?: (value: T) => string): Record<string, string>;
+
+export declare function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes): string;
+
 declare interface HeadingProps {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
     as: React_3.ElementType;
@@ -910,9 +899,20 @@ export declare const HorizontalLongContent: Story_7;
 
 export declare const HorizontalWithMiddleSelected: Story_27;
 
-export declare const IconDisabled: Story_5;
-
-export declare const IconDisabledOutline: Story_5;
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const HStack: React_2.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React_2.RefAttributes<HTMLDivElement>>;
+export { HStack }
+export { HStack as HStack_alias_1 }
+export { HStack as HStack_alias_2 }
+export { HStack as HStack_alias_3 }
+export { HStack as HStack_alias_4 }
 
 export declare const IconPrimary: Story_5;
 
@@ -1094,10 +1094,13 @@ export declare const MinAndMax: Story_28;
  something about the consequences.
  </p>
  </Modal.Content>
- <Modal.Footer style={{ display: "flex", gap: 16 }}>
+ <Modal.Footer>
+ <HStack gap="16" wrap>
+ <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
  <PrimaryButton fill="outline" onClick={onClose}>
- Close
+ Cancel
  </PrimaryButton>
+ </HStack>
  </Modal.Footer>
  </Modal>
  </>
@@ -1452,6 +1455,29 @@ export declare const ReadonlyTextarea: Story_15;
 
 export declare const ReadonlyTextareaWithError: Story_15;
 
+export declare type ResponsiveProp<T> = T | ResponsiveValues<T>;
+
+export declare type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;
+
+declare const responsiveSpacingSizes: {
+    readonly "4-8": "4-8";
+    readonly "8-12": "8-12";
+    readonly "12-16": "12-16";
+    readonly "16-20": "16-20";
+    readonly "20-24": "20-24";
+    readonly "24-32": "24-32";
+    readonly "32-40": "32-40";
+    readonly "40-48": "40-48";
+    readonly "48-64": "48-64";
+    readonly "64-80": "64-80";
+    readonly "80-120": "80-120";
+    readonly "120-160": "120-160";
+};
+
+declare type ResponsiveValues<T> = {
+    [Breakpoint in Breakpoints]?: T;
+};
+
 export declare const Secondary: Story_5;
 
 declare const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement>;
@@ -1598,6 +1624,56 @@ export declare const Small: Story_26;
 
 export declare const Solid: Story_17;
 
+export declare type SpacingSizes = keyof typeof spacingSizes;
+
+declare const spacingSizes: {
+    readonly "4": "4";
+    readonly "8": "8";
+    readonly "12": "12";
+    readonly "16": "16";
+    readonly "20": "20";
+    readonly "24": "24";
+    readonly "32": "32";
+    readonly "40": "40";
+    readonly "48": "48";
+    readonly "64": "64";
+    readonly "80": "80";
+    readonly "120": "120";
+};
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const Stack: React_2.ForwardRefExoticComponent<StackProps & React_2.RefAttributes<HTMLDivElement>>;
+export { Stack }
+export { Stack as Stack_alias_1 }
+export { Stack as Stack_alias_2 }
+export { Stack as Stack_alias_3 }
+export { Stack as Stack_alias_4 }
+
+declare interface StackProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    children: React_2.ReactNode;
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    direction?: ResponsiveProp<React_2.CSSProperties["flexDirection"]>;
+    wrap?: ResponsiveProp<boolean>;
+    align?: ResponsiveProp<React_2.CSSProperties["alignItems"]>;
+    justify?: ResponsiveProp<React_2.CSSProperties["justifyContent"]>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { StackProps }
+export { StackProps as StackProps_alias_1 }
+export { StackProps as StackProps_alias_2 }
+export { StackProps as StackProps_alias_3 }
+export { StackProps as StackProps_alias_4 }
+
 /**
  * Indicate a step in a process.
  *
@@ -1722,12 +1798,6 @@ export { StyledHtmlProps as StyledHtmlProps_alias_3 }
 
 export declare const Success: Story_20;
 
-declare const Tab: OverridableComponent<TabProps, HTMLButtonElement>;
-export { Tab }
-export { Tab as Tab_alias_1 }
-export { Tab as Tab_alias_2 }
-export { Tab as Tab_alias_3 }
-
 declare interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
 }
@@ -1737,7 +1807,7 @@ export { TabContentsProps as TabContentsProps_alias_2 }
 export { TabContentsProps as TabContentsProps_alias_3 }
 
 declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactElement<TabProps> | ReactElement<TabProps>[];
+    children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
     /**
      * Direction of the tabs. Can either be vertical or horizontal.
      * Horizontal breaks on window width with fallback back to vertical
@@ -1749,18 +1819,6 @@ export { TabListProps as TabListProps_alias_1 }
 export { TabListProps as TabListProps_alias_2 }
 export { TabListProps as TabListProps_alias_3 }
 
-declare interface TabProps extends HTMLAttributes<HTMLButtonElement> {
-    children: ReactElement<HTMLElement> | string;
-    /**
-     * Identifier for the tab
-     */
-    tabId: string;
-}
-export { TabProps }
-export { TabProps as TabProps_alias_1 }
-export { TabProps as TabProps_alias_2 }
-export { TabProps as TabProps_alias_3 }
-
 export declare const Tabs_alias_3: OverridableComponent<TabsProps, HTMLDivElement>;
 
 declare const TabsComponent: {
@@ -1770,7 +1828,7 @@ declare const TabsComponent: {
     } & TabsProps & Omit<ComponentPropsWithRef<As>, keyof TabsProps>): ReactNode;
 } & Pick<FC, "displayName"> & {
     List: typeof TabsList;
-    Tab: typeof Tab;
+    Tab: typeof TabsTab;
     Contents: typeof TabsContents;
     Content: typeof TabsContent;
 };
@@ -1835,6 +1893,24 @@ export { TabsProps as TabsProps_alias_1 }
 export { TabsProps as TabsProps_alias_2 }
 export { TabsProps as TabsProps_alias_3 }
 
+declare const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement>;
+export { TabsTab }
+export { TabsTab as TabsTab_alias_1 }
+export { TabsTab as TabsTab_alias_2 }
+export { TabsTab as TabsTab_alias_3 }
+
+declare interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactElement<HTMLElement> | string;
+    /**
+     * Identifier for the tab
+     */
+    tabId: string;
+}
+export { TabsTabProps }
+export { TabsTabProps as TabsTabProps_alias_1 }
+export { TabsTabProps as TabsTabProps_alias_2 }
+export { TabsTabProps as TabsTabProps_alias_3 }
+
 /**
  * Text component
  *
@@ -2134,6 +2210,21 @@ export declare const Vertical: Story_7;
 
 export declare const Vertical_alias_1: Story_27;
 
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+declare const VStack: React_2.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React_2.RefAttributes<HTMLDivElement>>;
+export { VStack }
+export { VStack as VStack_alias_1 }
+export { VStack as VStack_alias_2 }
+export { VStack as VStack_alias_3 }
+export { VStack as VStack_alias_4 }
+
 export declare const Warning: Story_2;
 
 export declare const Warning_alias_1: Story_20;
@@ -2181,16 +2272,6 @@ export { WhiteBadge as WhiteBadge_alias_3 }
 
 export declare const WhiteBox: Story_3;
 
-export declare const WhiteDisabled: Story_14;
-
-export declare const WhiteDisabledInput: Story_11;
-
-export declare const WhiteDisabledInputWithError: Story_11;
-
-export declare const WhiteDisabledTextarea: Story_15;
-
-export declare const WhiteDisabledTextareaWithError: Story_15;
-
 export declare const WhiteInput: Story_11;
 
 export declare const WhiteInputWithError: Story_11;

package/dist/accordion/index.mjs

@@ -1,10 +1,10 @@
 import {
   AccordionComponent
-} from "../chunk-LIQ3FB56.mjs";
-import "../chunk-62F4I3MQ.mjs";
-import "../chunk-VRIY65P5.mjs";
+} from "../chunk-XIHKASNB.mjs";
 import "../chunk-GUB3UCXO.mjs";
 import "../chunk-YXHXRUFX.mjs";
+import "../chunk-62F4I3MQ.mjs";
+import "../chunk-VRIY65P5.mjs";
 import "../chunk-V3PAFMK5.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/chunk-27XJO7E4.mjs

@@ -0,0 +1,51 @@
+import {
+  getResponsiveProps
+} from "./chunk-ZTYEOZLK.mjs";
+import {
+  getSpacingVariable
+} from "./chunk-NE6W2PCD.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/layout/stack/stack.tsx
+import "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Stack = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
+    const Component = asChild ? Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: clsx("hds-stack", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Stack.displayName = "Stack";
+var HStack = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+});
+HStack.displayName = "HStack";
+var VStack = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+});
+VStack.displayName = "VStack";
+
+export {
+  Stack,
+  HStack,
+  VStack
+};
+//# sourceMappingURL=chunk-27XJO7E4.mjs.map

package/dist/chunk-27XJO7E4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/stack/stack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAkDf;AAfC,IAAM,QAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,SAAS,WAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,oBAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,SAAS,WAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,oBAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/{chunk-POJTVNEO.mjs → chunk-2ICZ3Q7N.mjs}

@@ -127,4 +127,4 @@ export {
   ModalFooter,
   useScrollLock
 };
-//# sourceMappingURL=chunk-POJTVNEO.mjs.map
+//# sourceMappingURL=chunk-2ICZ3Q7N.mjs.map

package/dist/chunk-2ICZ3Q7N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal/modal.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer>\n            <HStack gap=\"16\" wrap>\n              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n              <PrimaryButton fill=\"outline\" onClick={onClose}>\n                Cancel\n              </PrimaryButton>\n            </HStack>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n"],"mappings":"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","names":["_a"]}