@postenbring/hedwig-react 0.0.67 → 0.0.69

package/dist/index.mjs

@@ -54,15 +54,22 @@ import {
   NavbarLogoAndServiceText,
   NavbarNavigation
 } from "./chunk-625SVQEP.mjs";
-import "./chunk-L4GQJETB.mjs";
+import "./chunk-BVG5VSZK.mjs";
 import {
-  Container
-} from "./chunk-I6GDRDYD.mjs";
+  GridComponent
+} from "./chunk-JDXYRFLJ.mjs";
+import "./chunk-ZQHLYAJU.mjs";
 import {
   HStack,
   Stack,
   VStack
-} from "./chunk-QGZU7Z2W.mjs";
+} from "./chunk-VVPJOVFP.mjs";
+import {
+  Container
+} from "./chunk-I6GDRDYD.mjs";
+import {
+  GridItem
+} from "./chunk-25R7DBK6.mjs";
 import "./chunk-XLLYMQLW.mjs";
 import {
   Link
@@ -149,16 +156,19 @@ import {
 import {
   AccordionComponent
 } from "./chunk-XYIY6FHW.mjs";
+import "./chunk-K6PP3ACJ.mjs";
 import {
-  AccordionContent
-} from "./chunk-GUB3UCXO.mjs";
+  Badge,
+  DarkBadge,
+  WarningBadge,
+  WhiteBadge
+} from "./chunk-W3D4VR4Y.mjs";
 import {
-  AccordionHeader
-} from "./chunk-YXHXRUFX.mjs";
+  BoxComponent
+} from "./chunk-NMMFIRLZ.mjs";
 import {
-  AccordionItem
-} from "./chunk-62F4I3MQ.mjs";
-import "./chunk-VRIY65P5.mjs";
+  BoxCloseButton
+} from "./chunk-EGXM575K.mjs";
 import "./chunk-ZOCMUEOX.mjs";
 import {
   Breadcrumbs
@@ -169,19 +179,16 @@ import {
 } from "./chunk-OUHO4LGN.mjs";
 import "./chunk-KQITCS3U.mjs";
 import "./chunk-DZNH5JHY.mjs";
-import "./chunk-K6PP3ACJ.mjs";
 import {
-  Badge,
-  DarkBadge,
-  WarningBadge,
-  WhiteBadge
-} from "./chunk-W3D4VR4Y.mjs";
+  AccordionContent
+} from "./chunk-GUB3UCXO.mjs";
 import {
-  BoxComponent
-} from "./chunk-NMMFIRLZ.mjs";
+  AccordionHeader
+} from "./chunk-YXHXRUFX.mjs";
 import {
-  BoxCloseButton
-} from "./chunk-EGXM575K.mjs";
+  AccordionItem
+} from "./chunk-62F4I3MQ.mjs";
+import "./chunk-VRIY65P5.mjs";
 import "./chunk-ZL56N4UK.mjs";
 import "./chunk-V3PAFMK5.mjs";
 import "./chunk-F4STR6SD.mjs";
@@ -237,6 +244,8 @@ export {
   FooterLinkSection,
   FooterLinkSections,
   FooterLogo,
+  GridComponent as Grid,
+  GridItem,
   HStack,
   Input,
   Link,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * Import the hedwig css file, so the consumers don't have to. Plug and play.\n *\n * NOTE: Importing the full path, not just the package name.\n * For some reason vite did not include the css during development when this file only imported the package name.\n *\n * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.\n */\nimport \"@postenbring/hedwig-css/dist/index.css\";\n\nexport * from \"./index-no-css\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,OAAO;","names":[]}
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * Import the hedwig css file, so the consumers don't have to. Plug and play.\n *\n * NOTE: Importing the full path, not just the package name.\n * For some reason vite did not include the css during development when this file only imported the package name.\n *\n * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.\n */\nimport \"@postenbring/hedwig-css/dist/index.css\";\n\nexport * from \"./index-no-css\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,OAAO;","names":[]}

package/dist/layout/grid/grid.d.mts

@@ -0,0 +1,4 @@
+export { GridProps_alias_3 as GridProps } from '../../_tsup-dts-rollup';
+export { Grid_alias_3 as Grid } from '../../_tsup-dts-rollup';
+export { GridItemProps_alias_3 as GridItemProps } from '../../_tsup-dts-rollup';
+export { GridItem_alias_3 as GridItem } from '../../_tsup-dts-rollup';

package/dist/layout/grid/grid.d.ts

@@ -0,0 +1,4 @@
+export { GridProps_alias_3 as GridProps } from '../../_tsup-dts-rollup';
+export { Grid_alias_3 as Grid } from '../../_tsup-dts-rollup';
+export { GridItemProps_alias_3 as GridItemProps } from '../../_tsup-dts-rollup';
+export { GridItem_alias_3 as GridItem } from '../../_tsup-dts-rollup';

package/dist/layout/grid/grid.js

@@ -0,0 +1,122 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layout/grid/grid.tsx
+var grid_exports = {};
+__export(grid_exports, {
+  Grid: () => Grid,
+  GridItem: () => GridItem
+});
+module.exports = __toCommonJS(grid_exports);
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react = require("react");
+
+// src/layout/responsive.ts
+function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
+  if (!inputValues)
+    return {};
+  if (typeof inputValues !== "object") {
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(inputValues)) {
+    result[`${variable}-${key}`] = valueTransformer(value);
+  }
+  return result;
+}
+
+// src/layout/spacing.ts
+function getSpacingVariable(size) {
+  return `var(--hds-spacing-${size})`;
+}
+
+// src/layout/grid/grid.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Grid = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname.clsx)("hds-grid", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname.clsx)("hds-grid__item", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "Grid.Item";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Grid,
+  GridItem
+});
+//# sourceMappingURL=grid.js.map

package/dist/layout/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/grid/grid.tsx","../../../src/layout/responsive.ts","../../../src/layout/spacing.ts"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\nimport { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from \"../spacing\";\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between grid 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 grid items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Column span for the grid items\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center grid items horizontally\n   *\n   * Offsets the start position of the grid items relative to their span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 A simple opionated abstraction over CSS Grid.\n *\n * The grid is always a 12 column grid.\n *\n * example\n * ```tsx\n * <Grid gap=\"12-16\" span={{ small: 6 }}>\n *   <div>6/12</div>\n *   <div>6/12</div>\n *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>\n *   <div>6/12</div>\n *   <div>6/12</div>\n * </Grid>\n * ```\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    { children, asChild, className, span, center, style: _style, gap, gapX, gapY, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-y\", gapY, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-span\", span),\n      ...getResponsiveProps(\"--hds-grid-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGrid.displayName = \"Grid\";\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Column span for the grid item\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center the grid item horizontally\n   *\n   * Offsets the start position of the grid item relative to it's span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 Grid.Item\n *\n * Use as the direct child of a `Grid` to override `span` and `center` for individual items.\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-item-span\", span),\n      ...getResponsiveProps(\"--hds-grid-item-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid__item\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGridItem.displayName = \"Grid.Item\";\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","// 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,wBAAqB;AACrB,mBAA2B;;;ACMpB,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;;;ACSO,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AFmDM;AAfC,IAAM,WAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAQ,KAAK,MAAM,KA1E5E,IA0EI,IAAiF,iBAAjF,IAAiF,CAA/E,YAAU,WAAS,aAAW,QAAM,UAAQ,SAAe,OAAK,QAAM;AAGxE,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,8FAC9B,SACA,mBAAmB,kBAAkB,KAAK,kBAAkB,IAC5D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,mBAAmB,IAAI,IAC1C,mBAAmB,qBAAqB,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAEnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAoCZ,IAAM,eAAW;AAAA,EACtB,CAAC,IAAwE,QAAQ;AAAhF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,OAvIxD,IAuIG,IAAgE,iBAAhE,IAAgE,CAA9D,YAAU,WAAS,aAAW,QAAM,UAAQ;AAC7C,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,iDAC9B,SACA,mBAAmB,wBAAwB,IAAI,IAC/C,mBAAmB,0BAA0B,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAExF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/layout/grid/grid.mjs

@@ -0,0 +1,12 @@
+import {
+  Grid,
+  GridItem
+} from "../../chunk-25R7DBK6.mjs";
+import "../../chunk-F4STR6SD.mjs";
+import "../../chunk-NE6W2PCD.mjs";
+import "../../chunk-R4SQKVDQ.mjs";
+export {
+  Grid,
+  GridItem
+};
+//# sourceMappingURL=grid.mjs.map

package/dist/layout/grid/grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/layout/grid/index.d.mts

@@ -0,0 +1,4 @@
+export { Grid_alias_4 as Grid } from '../../_tsup-dts-rollup';
+export { GridItem_alias_4 as GridItem } from '../../_tsup-dts-rollup';
+export { GridProps_alias_4 as GridProps } from '../../_tsup-dts-rollup';
+export { GridItemProps_alias_4 as GridItemProps } from '../../_tsup-dts-rollup';

package/dist/layout/grid/index.d.ts

@@ -0,0 +1,4 @@
+export { Grid_alias_4 as Grid } from '../../_tsup-dts-rollup';
+export { GridItem_alias_4 as GridItem } from '../../_tsup-dts-rollup';
+export { GridProps_alias_4 as GridProps } from '../../_tsup-dts-rollup';
+export { GridItemProps_alias_4 as GridItemProps } from '../../_tsup-dts-rollup';

package/dist/layout/grid/index.js

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layout/grid/index.tsx
+var grid_exports = {};
+__export(grid_exports, {
+  Grid: () => GridComponent,
+  GridItem: () => GridItem
+});
+module.exports = __toCommonJS(grid_exports);
+
+// src/layout/grid/grid.tsx
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react = require("react");
+
+// src/layout/responsive.ts
+function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
+  if (!inputValues)
+    return {};
+  if (typeof inputValues !== "object") {
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(inputValues)) {
+    result[`${variable}-${key}`] = valueTransformer(value);
+  }
+  return result;
+}
+
+// src/layout/spacing.ts
+function getSpacingVariable(size) {
+  return `var(--hds-spacing-${size})`;
+}
+
+// src/layout/grid/grid.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Grid = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname.clsx)("hds-grid", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname.clsx)("hds-grid__item", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "Grid.Item";
+
+// src/layout/grid/index.tsx
+var GridComponent = Grid;
+GridComponent.Item = GridItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Grid,
+  GridItem
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/grid/index.tsx","../../../src/layout/grid/grid.tsx","../../../src/layout/responsive.ts","../../../src/layout/spacing.ts"],"sourcesContent":["import { Grid, GridItem } from \"./grid\";\n\nconst GridComponent = Grid as typeof Grid & {\n  Item: typeof GridItem;\n};\n\nGridComponent.Item = GridItem;\n\nexport { GridComponent as Grid, GridItem };\n\nexport type * from \"./grid\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\nimport { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from \"../spacing\";\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between grid 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 grid items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Column span for the grid items\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center grid items horizontally\n   *\n   * Offsets the start position of the grid items relative to their span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 A simple opionated abstraction over CSS Grid.\n *\n * The grid is always a 12 column grid.\n *\n * example\n * ```tsx\n * <Grid gap=\"12-16\" span={{ small: 6 }}>\n *   <div>6/12</div>\n *   <div>6/12</div>\n *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>\n *   <div>6/12</div>\n *   <div>6/12</div>\n * </Grid>\n * ```\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    { children, asChild, className, span, center, style: _style, gap, gapX, gapY, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-y\", gapY, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-span\", span),\n      ...getResponsiveProps(\"--hds-grid-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGrid.displayName = \"Grid\";\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Column span for the grid item\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center the grid item horizontally\n   *\n   * Offsets the start position of the grid item relative to it's span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 Grid.Item\n *\n * Use as the direct child of a `Grid` to override `span` and `center` for individual items.\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-item-span\", span),\n      ...getResponsiveProps(\"--hds-grid-item-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid__item\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGridItem.displayName = \"Grid.Item\";\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","// 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AACrB,wBAAqB;AACrB,mBAA2B;;;ACMpB,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;;;ACSO,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AFmDM;AAfC,IAAM,WAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAQ,KAAK,MAAM,KA1E5E,IA0EI,IAAiF,iBAAjF,IAAiF,CAA/E,YAAU,WAAS,aAAW,QAAM,UAAQ,SAAe,OAAK,QAAM;AAGxE,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,8FAC9B,SACA,mBAAmB,kBAAkB,KAAK,kBAAkB,IAC5D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,mBAAmB,IAAI,IAC1C,mBAAmB,qBAAqB,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAEnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAoCZ,IAAM,eAAW;AAAA,EACtB,CAAC,IAAwE,QAAQ;AAAhF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,OAvIxD,IAuIG,IAAgE,iBAAhE,IAAgE,CAA9D,YAAU,WAAS,aAAW,QAAM,UAAQ;AAC7C,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,iDAC9B,SACA,mBAAmB,wBAAwB,IAAI,IAC/C,mBAAmB,0BAA0B,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAExF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;;;ADxJvB,IAAM,gBAAgB;AAItB,cAAc,OAAO;","names":[]}

package/dist/layout/grid/index.mjs

@@ -0,0 +1,14 @@
+import {
+  GridComponent
+} from "../../chunk-JDXYRFLJ.mjs";
+import {
+  GridItem
+} from "../../chunk-25R7DBK6.mjs";
+import "../../chunk-F4STR6SD.mjs";
+import "../../chunk-NE6W2PCD.mjs";
+import "../../chunk-R4SQKVDQ.mjs";
+export {
+  GridComponent as Grid,
+  GridItem
+};
+//# sourceMappingURL=index.mjs.map

package/dist/layout/grid/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/layout/index.d.mts

@@ -1,6 +1,10 @@
 export { ContainerProps_alias_2 as ContainerProps } from '../_tsup-dts-rollup';
 export { Container_alias_2 as Container } from '../_tsup-dts-rollup';
-export { StackProps_alias_2 as StackProps } from '../_tsup-dts-rollup';
+export { Grid_alias_2 as Grid } from '../_tsup-dts-rollup';
+export { GridItem_alias_2 as GridItem } from '../_tsup-dts-rollup';
+export { GridProps_alias_2 as GridProps } from '../_tsup-dts-rollup';
+export { GridItemProps_alias_2 as GridItemProps } from '../_tsup-dts-rollup';
 export { Stack_alias_2 as Stack } from '../_tsup-dts-rollup';
 export { HStack_alias_2 as HStack } from '../_tsup-dts-rollup';
 export { VStack_alias_2 as VStack } from '../_tsup-dts-rollup';
+export { StackProps_alias_2 as StackProps } from '../_tsup-dts-rollup';

package/dist/layout/index.d.ts

@@ -1,6 +1,10 @@
 export { ContainerProps_alias_2 as ContainerProps } from '../_tsup-dts-rollup';
 export { Container_alias_2 as Container } from '../_tsup-dts-rollup';
-export { StackProps_alias_2 as StackProps } from '../_tsup-dts-rollup';
+export { Grid_alias_2 as Grid } from '../_tsup-dts-rollup';
+export { GridItem_alias_2 as GridItem } from '../_tsup-dts-rollup';
+export { GridProps_alias_2 as GridProps } from '../_tsup-dts-rollup';
+export { GridItemProps_alias_2 as GridItemProps } from '../_tsup-dts-rollup';
 export { Stack_alias_2 as Stack } from '../_tsup-dts-rollup';
 export { HStack_alias_2 as HStack } from '../_tsup-dts-rollup';
 export { VStack_alias_2 as VStack } from '../_tsup-dts-rollup';
+export { StackProps_alias_2 as StackProps } from '../_tsup-dts-rollup';

package/dist/layout/index.js

@@ -50,6 +50,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var layout_exports = {};
 __export(layout_exports, {
   Container: () => Container,
+  Grid: () => GridComponent,
+  GridItem: () => GridItem,
   HStack: () => HStack,
   Stack: () => Stack,
   VStack: () => VStack
@@ -79,16 +81,10 @@ var Container = (0, import_react.forwardRef)(
 );
 Container.displayName = "Container";
 
-// src/layout/stack/stack.tsx
-var React = require("react");
+// src/layout/grid/grid.tsx
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
-var import_react2 = require("react");
 var import_react_slot = require("@radix-ui/react-slot");
-
-// src/layout/spacing.ts
-function getSpacingVariable(size) {
-  return `var(--hds-spacing-${size})`;
-}
+var import_react2 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
@@ -104,18 +100,94 @@ function getResponsiveProps(variable, inputValues, valueTransformer = (value) =>
   return result;
 }
 
-// src/layout/stack/stack.tsx
+// src/layout/spacing.ts
+function getSpacingVariable(size) {
+  return `var(--hds-spacing-${size})`;
+}
+
+// src/layout/grid/grid.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Stack = (0, import_react2.forwardRef)(
+var Grid = (0, import_react2.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
     const Component = asChild ? import_react_slot.Slot : "div";
-    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname2.clsx)("hds-stack", className),
+        className: (0, import_typed_classname2.clsx)("hds-grid", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname2.clsx)("hds-grid__item", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "Grid.Item";
+
+// src/layout/grid/index.tsx
+var GridComponent = Grid;
+GridComponent.Item = GridItem;
+
+// src/layout/stack/stack.tsx
+var React = require("react");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
+var import_react3 = require("react");
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Stack = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      asChild,
+      className,
+      style: _style,
+      gap,
+      gapX,
+      gapY,
+      direction,
+      wrap,
+      align,
+      justify
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "asChild",
+      "className",
+      "style",
+      "gap",
+      "gapX",
+      "gapY",
+      "direction",
+      "wrap",
+      "align",
+      "justify"
+    ]);
+    const Component = asChild ? import_react_slot2.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-stack-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname3.clsx)("hds-stack", className),
         ref
       }, rest), {
         children
@@ -124,17 +196,19 @@ var Stack = (0, import_react2.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react2.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+var HStack = (0, import_react3.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react2.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+var VStack = (0, import_react3.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Container,
+  Grid,
+  GridItem,
   HStack,
   Stack,
   VStack