@postenbring/hedwig-react 0.0.85 → 0.0.87

package/dist/layout/stack/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layout/stack/index.tsx","../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["export { Stack, HStack, VStack } from \"./stack\";\nexport type * from \"./stack\";\n","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  /**\n   * Space between items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\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   * @default false\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    {\n      children,\n      asChild,\n      className,\n      style: _style,\n      gap,\n      gapX,\n      gapY,\n      direction,\n      wrap,\n      align,\n      justify,\n      ...rest\n    },\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-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-gap-y\", gapY, 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","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AFiEM;AA9BC,IAAM,YAAQ;AAAA,EACnB,CACE,IAcA,QACG;AAfH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzEN,IA8DI,IAYK,iBAZL,IAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,4HAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,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,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/layout/stack/index.tsx","../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["export { Stack, HStack, VStack } from \"./stack\";\nexport type * from \"./stack\";\n","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  /**\n   * Space between items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\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   * @default false\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    {\n      children,\n      asChild,\n      className,\n      style: _style,\n      gap,\n      gapX,\n      gapY,\n      direction,\n      wrap,\n      align,\n      justify,\n      ...rest\n    },\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-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-gap-y\", gapY, 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","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC,YAAa,QAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AFiEM;AA9BC,IAAM,YAAQ;AAAA,EACnB,CACE,IAcA,QACG;AAfH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzEN,IA8DI,IAYK,iBAZL,IAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,4HAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,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,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/layout/stack/index.mjs

@@ -3,10 +3,10 @@ import {
   HStack,
   Stack,
   VStack
-} from "../../chunk-AXKJB47E.mjs";
-import "../../chunk-F4STR6SD.mjs";
+} from "../../chunk-FUIKSOJF.mjs";
+import "../../chunk-7ROE6ADK.mjs";
 import "../../chunk-NE6W2PCD.mjs";
-import "../../chunk-R4SQKVDQ.mjs";
+import "../../chunk-YOSPWY5K.mjs";
 export {
   HStack,
   Stack,

package/dist/layout/stack/stack.js

@@ -66,8 +66,7 @@ function getSpacingVariable(size) {
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
-  if (!inputValues)
-    return {};
+  if (!inputValues) return {};
   if (typeof inputValues !== "object") {
     return { [`${variable}-initial`]: valueTransformer(inputValues) };
   }

package/dist/layout/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"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  /**\n   * Space between items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\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   * @default false\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    {\n      children,\n      asChild,\n      className,\n      style: _style,\n      gap,\n      gapX,\n      gapY,\n      direction,\n      wrap,\n      align,\n      justify,\n      ...rest\n    },\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-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-gap-y\", gapY, 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","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AFiEM;AA9BC,IAAM,YAAQ;AAAA,EACnB,CACE,IAcA,QACG;AAfH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzEN,IA8DI,IAYK,iBAZL,IAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,4HAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,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,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"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  /**\n   * Space between items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\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   * @default false\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    {\n      children,\n      asChild,\n      className,\n      style: _style,\n      gap,\n      gapX,\n      gapY,\n      direction,\n      wrap,\n      align,\n      justify,\n      ...rest\n    },\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-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-gap-y\", gapY, 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","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC,YAAa,QAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AFiEM;AA9BC,IAAM,YAAQ;AAAA,EACnB,CACE,IAcA,QACG;AAfH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAzEN,IA8DI,IAYK,iBAZL,IAYK;AAAA,MAXH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,4HAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,mBAAmB,qBAAqB,MAAM,kBAAkB,IAChE,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,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/layout/stack/stack.mjs

@@ -2,10 +2,10 @@ import {
   HStack,
   Stack,
   VStack
-} from "../../chunk-AXKJB47E.mjs";
-import "../../chunk-F4STR6SD.mjs";
+} from "../../chunk-FUIKSOJF.mjs";
+import "../../chunk-7ROE6ADK.mjs";
 import "../../chunk-NE6W2PCD.mjs";
-import "../../chunk-R4SQKVDQ.mjs";
+import "../../chunk-YOSPWY5K.mjs";
 export {
   HStack,
   Stack,

package/dist/link/index.mjs

@@ -1,8 +1,8 @@
 import "../chunk-XLLYMQLW.mjs";
 import {
   Link
-} from "../chunk-MJ2DZH3N.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-VYS2QNTL.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   Link
 };

package/dist/link/link.mjs

@@ -1,7 +1,7 @@
 import {
   Link
-} from "../chunk-MJ2DZH3N.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-VYS2QNTL.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   Link
 };

package/dist/list/index.mjs

@@ -1,12 +1,12 @@
 import "../chunk-6QV3OV66.mjs";
 import {
   LinkList
-} from "../chunk-COEZA7WA.mjs";
+} from "../chunk-Z2ZCM4BE.mjs";
 import {
   OrderedList,
   UnorderedList
-} from "../chunk-WHMIHTPC.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-LGEGXOPU.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   LinkList,
   OrderedList,

package/dist/list/link-list.mjs

@@ -1,8 +1,8 @@
 import {
   LinkList
-} from "../chunk-COEZA7WA.mjs";
-import "../chunk-WHMIHTPC.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-Z2ZCM4BE.mjs";
+import "../chunk-LGEGXOPU.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   LinkList
 };

package/dist/list/list.mjs

@@ -1,8 +1,8 @@
 import {
   OrderedList,
   UnorderedList
-} from "../chunk-WHMIHTPC.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-LGEGXOPU.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   OrderedList,
   UnorderedList

package/dist/message/index.mjs

@@ -3,9 +3,9 @@ import {
   Message,
   MessageDescription,
   MessageTitle
-} from "../chunk-SQ63E7KM.mjs";
-import "../chunk-AJWSQEDP.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-BHQ46L2O.mjs";
+import "../chunk-3OGHJOJF.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   Message,
   MessageDescription,

package/dist/message/message.mjs

@@ -2,9 +2,9 @@ import {
   Message,
   MessageDescription,
   MessageTitle
-} from "../chunk-SQ63E7KM.mjs";
-import "../chunk-AJWSQEDP.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-BHQ46L2O.mjs";
+import "../chunk-3OGHJOJF.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   Message,
   MessageDescription,

package/dist/modal/index.js

@@ -256,16 +256,12 @@ Modal.Content = ModalContent;
 Modal.Footer = ModalFooter;
 function useScrollLock(modalRef, bodyClass) {
   (0, import_react3.useEffect)(() => {
-    if (!modalRef.current)
-      return;
-    if (modalRef.current.open)
-      document.body.classList.add(bodyClass);
+    if (!modalRef.current) return;
+    if (modalRef.current.open) document.body.classList.add(bodyClass);
     const observer = new MutationObserver(() => {
       var _a;
-      if ((_a = modalRef.current) == null ? void 0 : _a.open)
-        document.body.classList.add(bodyClass);
-      else
-        document.body.classList.remove(bodyClass);
+      if ((_a = modalRef.current) == null ? void 0 : _a.open) document.body.classList.add(bodyClass);
+      else document.body.classList.remove(bodyClass);
     });
     observer.observe(modalRef.current, {
       attributes: true,

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils/utils.ts"],"sourcesContent":["export { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"h1\";\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\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\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\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\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 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 * ```tsx\n *   const modalRef = useRef<HTMLDialogElement>(null);\n *   const onClose = () => modalRef.current?.close();\n *\n *   return (\n *     <>\n *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\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 *             <Button onClick={onMainAction}>Main action</Button>\n *             <Button variant=\"primary-outline\" onClick={onClose}>\n *               Cancel\n *             </Button>\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        asChild\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        variant=\"white\"\n      >\n        <dialog ref={mergedRef} {...rest}>\n          {children}\n        </dialog>\n      </Box>\n    );\n  },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction 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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils/utils.ts"],"sourcesContent":["export { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"h1\";\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\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\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\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\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 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 * ```tsx\n *   const modalRef = useRef<HTMLDialogElement>(null);\n *   const onClose = () => modalRef.current?.close();\n *\n *   return (\n *     <>\n *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\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 *             <Button onClick={onMainAction}>Main action</Button>\n *             <Button variant=\"primary-outline\" onClick={onClose}>\n *               Cancel\n *             </Button>\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        asChild\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        variant=\"white\"\n      >\n        <dialog ref={mergedRef} {...rest}>\n          {children}\n        </dialog>\n      </Box>\n    );\n  },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction 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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA8C;AAC9C,IAAAC,0BAAqB;AACrB,IAAAC,qBAAqB;;;ACFrB,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAM1B;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YANL,IAMG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAmDtB,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA9EN,IAsEI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAElB,IAAI,cAAc;;;ACrHlB,YAAuB;AACvB,IAAAC,gBAAiD;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;;;AFRM,IAAAC,sBAAA;AAJC,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAfd,IAeG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAUnB,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UArCd,IAqCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UA3Dd,IA2DG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAkDnB,IAAM,YAAQ;AAAA,EACnB,CAAC,IAAuE,QAAQ;AAA/E,iBAAE,YAAU,WAAW,MAAM,sBAAsB,QAzHtD,IAyHG,IAA+D,iBAA/D,IAA+D,CAA7D,YAAU,aAAW,QAAM,wBAAsB;AAClD,UAAM,eAAW,sBAA0B,IAAI;AAC/C,UAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAG9C,aAAS,qBAAqB;AA9HlC,UAAAC;AA+HM,OAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAClB,aAAO;AAAA,IACT;AAGA,kBAAc,UAAU,uBAAuB;AAG/C,iCAAU,MAAM;AACd,UAAI,SAAS,WAAW,SAAS,QAAW;AAC1C,YAAI,QAAQ,CAAC,SAAS,QAAQ,MAAM;AAClC,mBAAS,QAAQ,UAAU;AAAA,QAC7B,WAAW,CAAC,QAAQ,SAAS,QAAQ,MAAM;AACzC,mBAAS,QAAQ,MAAM;AAAA,QACzB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,aAAS,cAAc,GAAkC;AACvD,UAAI,wBAAwB,EAAE,WAAW,SAAS,SAAS;AACzD,iBAAS,QAAQ,MAAM;AAAA,MACzB;AACA,yCAAU;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAO;AAAA,QACP,eAAW,8BAAK,aAAa,SAAsB;AAAA,QACnD,WAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,uDAAC,yCAAO,KAAK,aAAe,OAA3B,EACE,WACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAQpB,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,SAAS;AAEf,SAAS,cAAc,UAA8C,WAAmB;AACtF,+BAAU,MAAM;AACd,QAAI,CAAC,SAAS,QAAS;AACvB,QAAI,SAAS,QAAQ,KAAM,UAAS,KAAK,UAAU,IAAI,SAAS;AAEhE,UAAM,WAAW,IAAI,iBAAiB,MAAM;AAzLhD;AA0LM,WAAI,cAAS,YAAT,mBAAkB,KAAM,UAAS,KAAK,UAAU,IAAI,SAAS;AAAA,UAC5D,UAAS,KAAK,UAAU,OAAO,SAAS;AAAA,IAC/C,CAAC;AACD,aAAS,QAAQ,SAAS,SAAS;AAAA,MACjC,YAAY;AAAA,MACZ,iBAAiB,CAAC,MAAM;AAAA,IAC1B,CAAC;AACD,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,eAAS,KAAK,UAAU,OAAO,SAAS;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,QAAQ,CAAC;AAC1B;","names":["import_react","import_typed_classname","import_react_slot","import_react","import_jsx_runtime","_a"]}

package/dist/modal/index.mjs

@@ -4,10 +4,10 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader
-} from "../chunk-IHZ2MRF6.mjs";
-import "../chunk-TDXU2IC6.mjs";
-import "../chunk-AJWSQEDP.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-6VKQ6IRG.mjs";
+import "../chunk-ILFK3VKS.mjs";
+import "../chunk-3OGHJOJF.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   Modal,
   ModalContent,

package/dist/modal/modal.js

@@ -254,16 +254,12 @@ Modal.Content = ModalContent;
 Modal.Footer = ModalFooter;
 function useScrollLock(modalRef, bodyClass) {
   (0, import_react3.useEffect)(() => {
-    if (!modalRef.current)
-      return;
-    if (modalRef.current.open)
-      document.body.classList.add(bodyClass);
+    if (!modalRef.current) return;
+    if (modalRef.current.open) document.body.classList.add(bodyClass);
     const observer = new MutationObserver(() => {
       var _a;
-      if ((_a = modalRef.current) == null ? void 0 : _a.open)
-        document.body.classList.add(bodyClass);
-      else
-        document.body.classList.remove(bodyClass);
+      if ((_a = modalRef.current) == null ? void 0 : _a.open) document.body.classList.add(bodyClass);
+      else document.body.classList.remove(bodyClass);
     });
     observer.observe(modalRef.current, {
       attributes: true,

package/dist/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"h1\";\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\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\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\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\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 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 * ```tsx\n *   const modalRef = useRef<HTMLDialogElement>(null);\n *   const onClose = () => modalRef.current?.close();\n *\n *   return (\n *     <>\n *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\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 *             <Button onClick={onMainAction}>Main action</Button>\n *             <Button variant=\"primary-outline\" onClick={onClose}>\n *               Cancel\n *             </Button>\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        asChild\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        variant=\"white\"\n      >\n        <dialog ref={mergedRef} {...rest}>\n          {children}\n        </dialog>\n      </Box>\n    );\n  },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction 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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"h1\";\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\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\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\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\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 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 * ```tsx\n *   const modalRef = useRef<HTMLDialogElement>(null);\n *   const onClose = () => modalRef.current?.close();\n *\n *   return (\n *     <>\n *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\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 *             <Button onClick={onMainAction}>Main action</Button>\n *             <Button variant=\"primary-outline\" onClick={onClose}>\n *               Cancel\n *             </Button>\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        asChild\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        variant=\"white\"\n      >\n        <dialog ref={mergedRef} {...rest}>\n          {children}\n        </dialog>\n      </Box>\n    );\n  },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction 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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_jsx_runtime","_a"]}

package/dist/modal/modal.mjs

@@ -3,10 +3,10 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader
-} from "../chunk-IHZ2MRF6.mjs";
-import "../chunk-TDXU2IC6.mjs";
-import "../chunk-AJWSQEDP.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+} from "../chunk-6VKQ6IRG.mjs";
+import "../chunk-ILFK3VKS.mjs";
+import "../chunk-3OGHJOJF.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   Modal,
   ModalContent,

package/dist/navbar/icons.mjs

@@ -2,7 +2,7 @@ import {
   CloseIcon,
   MenuIcon
 } from "../chunk-MOU6WBT2.mjs";
-import "../chunk-R4SQKVDQ.mjs";
+import "../chunk-YOSPWY5K.mjs";
 export {
   CloseIcon,
   MenuIcon

package/dist/navbar/index.js

@@ -88,20 +88,15 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 function focusTrap(element) {
   var _a, _b;
-  if (element === document.body)
-    return () => {
-    };
+  if (element === document.body) return () => {
+  };
   let inertElements = [];
   for (let el = element; el; el = el.parentElement) {
-    if (el === document.body)
-      break;
+    if (el === document.body) break;
     for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
-      if (sibling === el)
-        continue;
-      if (!(sibling instanceof HTMLElement))
-        continue;
-      if (sibling.hasAttribute("inert"))
-        continue;
+      if (sibling === el) continue;
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.hasAttribute("inert")) continue;
       sibling.setAttribute("inert", "true");
       inertElements.push(sibling);
     }