@postenbring/hedwig-react 0.0.67 → 0.0.68

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

@@ -930,6 +930,114 @@ export declare function getResponsiveProps<T>(variable: `--hds-${string}`, input
 
 export declare function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes): string;
 
+/**
+ * 🚧 A simple opionated abstraction over CSS Grid.
+ *
+ * The grid is always a 12 column grid.
+ *
+ * example
+ * ```tsx
+ * <Grid gap="12-16" span={{ small: 6 }}>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ * </Grid>
+ * ```
+ */
+export declare const Grid_alias_3: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
+
+declare const GridComponent: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> & {
+    Item: typeof GridItem;
+};
+export { GridComponent as Grid }
+export { GridComponent as Grid_alias_1 }
+export { GridComponent as Grid_alias_2 }
+export { GridComponent as Grid_alias_4 }
+
+/**
+ * 🚧 Grid.Item
+ *
+ * Use as the direct child of a `Grid` to override `span` and `center` for individual items.
+ */
+declare const GridItem: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
+export { GridItem }
+export { GridItem as GridItem_alias_1 }
+export { GridItem as GridItem_alias_2 }
+export { GridItem as GridItem_alias_3 }
+export { GridItem as GridItem_alias_4 }
+
+declare interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Column span for the grid item
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center the grid item horizontally
+     *
+     * Offsets the start position of the grid item relative to it's span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { GridItemProps }
+export { GridItemProps as GridItemProps_alias_1 }
+export { GridItemProps as GridItemProps_alias_2 }
+export { GridItemProps as GridItemProps_alias_3 }
+export { GridItemProps as GridItemProps_alias_4 }
+
+declare interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Space between grid items. Both horizontal and vertical.
+     *
+     * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
+     *
+     * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
+     */
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    /**
+     * Column span for the grid items
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center grid items horizontally
+     *
+     * Offsets the start position of the grid items relative to their span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { GridProps }
+export { GridProps as GridProps_alias_1 }
+export { GridProps as GridProps_alias_2 }
+export { GridProps as GridProps_alias_3 }
+export { GridProps as GridProps_alias_4 }
+
 declare interface HeadingProps {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
     as: React_3.ElementType;

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

@@ -930,6 +930,114 @@ export declare function getResponsiveProps<T>(variable: `--hds-${string}`, input
 
 export declare function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes): string;
 
+/**
+ * 🚧 A simple opionated abstraction over CSS Grid.
+ *
+ * The grid is always a 12 column grid.
+ *
+ * example
+ * ```tsx
+ * <Grid gap="12-16" span={{ small: 6 }}>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ * </Grid>
+ * ```
+ */
+export declare const Grid_alias_3: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
+
+declare const GridComponent: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> & {
+    Item: typeof GridItem;
+};
+export { GridComponent as Grid }
+export { GridComponent as Grid_alias_1 }
+export { GridComponent as Grid_alias_2 }
+export { GridComponent as Grid_alias_4 }
+
+/**
+ * 🚧 Grid.Item
+ *
+ * Use as the direct child of a `Grid` to override `span` and `center` for individual items.
+ */
+declare const GridItem: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
+export { GridItem }
+export { GridItem as GridItem_alias_1 }
+export { GridItem as GridItem_alias_2 }
+export { GridItem as GridItem_alias_3 }
+export { GridItem as GridItem_alias_4 }
+
+declare interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Column span for the grid item
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center the grid item horizontally
+     *
+     * Offsets the start position of the grid item relative to it's span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { GridItemProps }
+export { GridItemProps as GridItemProps_alias_1 }
+export { GridItemProps as GridItemProps_alias_2 }
+export { GridItemProps as GridItemProps_alias_3 }
+export { GridItemProps as GridItemProps_alias_4 }
+
+declare interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Space between grid items. Both horizontal and vertical.
+     *
+     * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
+     *
+     * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
+     */
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    /**
+     * Column span for the grid items
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center grid items horizontally
+     *
+     * Offsets the start position of the grid items relative to their span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export { GridProps }
+export { GridProps as GridProps_alias_1 }
+export { GridProps as GridProps_alias_2 }
+export { GridProps as GridProps_alias_3 }
+export { GridProps as GridProps_alias_4 }
+
 declare interface HeadingProps {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
     as: React_3.ElementType;

package/dist/chunk-BVG5VSZK.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-BVG5VSZK.mjs.map

package/dist/chunk-DIDVODBP.mjs

@@ -0,0 +1,13 @@
+import {
+  Grid,
+  GridItem
+} from "./chunk-XNA5MFJC.mjs";
+
+// src/layout/grid/index.tsx
+var GridComponent = Grid;
+GridComponent.Item = GridItem;
+
+export {
+  GridComponent
+};
+//# sourceMappingURL=chunk-DIDVODBP.mjs.map

package/dist/chunk-DIDVODBP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/grid/index.tsx"],"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"],"mappings":";;;;;;AAEA,IAAM,gBAAgB;AAItB,cAAc,OAAO;","names":[]}

package/dist/chunk-XNA5MFJC.mjs

@@ -0,0 +1,59 @@
+import {
+  getResponsiveProps
+} from "./chunk-F4STR6SD.mjs";
+import {
+  getSpacingVariable
+} from "./chunk-NE6W2PCD.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/layout/grid/grid.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Grid = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap"]);
+    const Component = asChild ? Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: clsx("hds-grid", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = 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 ? 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__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: clsx("hds-grid__item", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "Grid.Item";
+
+export {
+  Grid,
+  GridItem
+};
+//# sourceMappingURL=chunk-XNA5MFJC.mjs.map

package/dist/chunk-XNA5MFJC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/grid/grid.tsx"],"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  gap?: 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  ({ children, asChild, className, span, center, style: _style, gap, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, 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"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAoErB;AAVC,IAAM,OAAO;AAAA,EAClB,CAAC,IAA6E,QAAQ;AAArF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAQ,IA7DhE,IA6DG,IAAqE,iBAArE,IAAqE,CAAnE,YAAU,WAAS,aAAW,QAAM,UAAQ,SAAe;AAC5D,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,QAA6B,gEAC9B,SACA,mBAAmB,kBAAkB,KAAK,kBAAkB,IAC5D,mBAAmB,mBAAmB,IAAI,IAC1C,mBAAmB,qBAAqB,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAEnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAoCZ,IAAM,WAAW;AAAA,EACtB,CAAC,IAAwE,QAAQ;AAAhF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,OAtHxD,IAsHG,IAAgE,iBAAhE,IAAgE,CAA9D,YAAU,WAAS,aAAW,QAAM,UAAQ;AAC7C,UAAM,YAAY,UAAU,OAAO;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,WAAW,KAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/chunk-ZQHLYAJU.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-ZQHLYAJU.mjs.map

package/dist/chunk-ZQHLYAJU.mjs.map

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

package/dist/footer/footer.mjs

@@ -9,11 +9,11 @@ import "../chunk-GJDRW6PA.mjs";
 import "../chunk-PMLDK3VC.mjs";
 import "../chunk-HT2EIJAD.mjs";
 import "../chunk-XYIY6FHW.mjs";
+import "../chunk-OUHO4LGN.mjs";
 import "../chunk-GUB3UCXO.mjs";
 import "../chunk-YXHXRUFX.mjs";
 import "../chunk-62F4I3MQ.mjs";
 import "../chunk-VRIY65P5.mjs";
-import "../chunk-OUHO4LGN.mjs";
 import "../chunk-V3PAFMK5.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/footer/index.mjs

@@ -11,11 +11,11 @@ import "../chunk-GJDRW6PA.mjs";
 import "../chunk-PMLDK3VC.mjs";
 import "../chunk-HT2EIJAD.mjs";
 import "../chunk-XYIY6FHW.mjs";
+import "../chunk-OUHO4LGN.mjs";
 import "../chunk-GUB3UCXO.mjs";
 import "../chunk-YXHXRUFX.mjs";
 import "../chunk-62F4I3MQ.mjs";
 import "../chunk-VRIY65P5.mjs";
-import "../chunk-OUHO4LGN.mjs";
 import "../chunk-V3PAFMK5.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/index-no-css.d.mts

@@ -65,10 +65,14 @@ export { FooterProps } from './_tsup-dts-rollup';
 export { FooterButtonLinkProps } from './_tsup-dts-rollup';
 export { ContainerProps } from './_tsup-dts-rollup';
 export { Container } from './_tsup-dts-rollup';
-export { StackProps } from './_tsup-dts-rollup';
+export { Grid } from './_tsup-dts-rollup';
+export { GridItem } from './_tsup-dts-rollup';
+export { GridProps } from './_tsup-dts-rollup';
+export { GridItemProps } from './_tsup-dts-rollup';
 export { Stack } from './_tsup-dts-rollup';
 export { HStack } from './_tsup-dts-rollup';
 export { VStack } from './_tsup-dts-rollup';
+export { StackProps } from './_tsup-dts-rollup';
 export { Link } from './_tsup-dts-rollup';
 export { LinkProps } from './_tsup-dts-rollup';
 export { UnorderedList } from './_tsup-dts-rollup';

package/dist/index-no-css.d.ts

@@ -65,10 +65,14 @@ export { FooterProps } from './_tsup-dts-rollup';
 export { FooterButtonLinkProps } from './_tsup-dts-rollup';
 export { ContainerProps } from './_tsup-dts-rollup';
 export { Container } from './_tsup-dts-rollup';
-export { StackProps } from './_tsup-dts-rollup';
+export { Grid } from './_tsup-dts-rollup';
+export { GridItem } from './_tsup-dts-rollup';
+export { GridProps } from './_tsup-dts-rollup';
+export { GridItemProps } from './_tsup-dts-rollup';
 export { Stack } from './_tsup-dts-rollup';
 export { HStack } from './_tsup-dts-rollup';
 export { VStack } from './_tsup-dts-rollup';
+export { StackProps } from './_tsup-dts-rollup';
 export { Link } from './_tsup-dts-rollup';
 export { LinkProps } from './_tsup-dts-rollup';
 export { UnorderedList } from './_tsup-dts-rollup';