@sproutsocial/seeds-react-grid 0.2.12 → 0.2.13

package/dist/esm/index.js

@@ -1,5 +1,11 @@
 // src/Grid.tsx
 import "react";
+
+// src/GridHybrid.tsx
+import "react";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+
+// src/styles.ts
 import styled from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
 
@@ -44,12 +50,58 @@ var getResponsiveStyles = (columns = 1) => {
   `;
 };
 
-// src/Grid.tsx
-import { jsx } from "react/jsx-runtime";
+// src/styles.ts
 var Container = styled(Box)`
   ${(props) => getResponsiveStyles(props.$columns)}
 `;
-var Grid = ({
+var styles_default = Container;
+
+// src/GridTailwind.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+var SPACE_SCALE = {
+  0: 0,
+  100: 2,
+  200: 4,
+  300: 8,
+  350: 12,
+  400: 16,
+  450: 24,
+  500: 32,
+  600: 40
+};
+var toGap = (value) => typeof value === "number" ? `${SPACE_SCALE[value] ?? 0}px` : value;
+var isResponsive = (value) => typeof value === "object" && value !== null;
+var applyResponsiveColumns = (style, columns) => {
+  const { sm, md, lg, xl } = columns;
+  style["--sg-cols"] = "repeat(1, 1fr)";
+  style["--sg-cols-sm"] = `repeat(${sm ?? 1}, 1fr)`;
+  style["--sg-cols-md"] = `repeat(${md ?? sm ?? 1}, 1fr)`;
+  style["--sg-cols-lg"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;
+  style["--sg-cols-xl"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;
+};
+var applyGap = (style, axis, value) => {
+  const prefix = axis === "row" ? "--sg-row-gap" : "--sg-col-gap";
+  if (isResponsive(value)) {
+    const { sm, md, lg, xl } = value;
+    style[prefix] = "0";
+    if (sm !== void 0) style[`${prefix}-sm`] = toGap(sm);
+    const mdVal = md ?? sm;
+    if (mdVal !== void 0) style[`${prefix}-md`] = toGap(mdVal);
+    const lgVal = lg ?? md ?? sm;
+    if (lgVal !== void 0) style[`${prefix}-lg`] = toGap(lgVal);
+    const xlVal = xl ?? lg ?? md ?? sm;
+    if (xlVal !== void 0) style[`${prefix}-xl`] = toGap(xlVal);
+    return;
+  }
+  const resolved = toGap(value);
+  if (axis === "row") {
+    style.rowGap = resolved;
+  } else {
+    style.columnGap = resolved;
+  }
+};
+var GridTailwind = ({
   columns = 1,
   gap = 400,
   rowGap,
@@ -57,18 +109,45 @@ var Grid = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx(
-    Container,
-    {
-      display: "grid",
-      rowGap: toResponsiveGapObject(rowGap ?? gap),
-      columnGap: toResponsiveGapObject(columnGap ?? gap),
-      $columns: columns,
-      className,
-      children
-    }
-  );
+  const style = { display: "grid" };
+  if (isResponsive(columns)) {
+    applyResponsiveColumns(style, columns);
+  } else {
+    style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+  }
+  applyGap(style, "row", rowGap ?? gap);
+  applyGap(style, "column", columnGap ?? gap);
+  const classes = ["seeds-grid", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, style, children });
 };
+GridTailwind.displayName = "GridTailwind";
+
+// src/GridHybrid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var GridHybrid = (props) => {
+  const { columns = 1, gap = 400, rowGap, columnGap, children, className } = props;
+  if (needsStyledComponents(props)) {
+    return /* @__PURE__ */ jsx2(
+      styles_default,
+      {
+        display: "grid",
+        rowGap: toResponsiveGapObject(rowGap ?? gap),
+        columnGap: toResponsiveGapObject(columnGap ?? gap),
+        $columns: columns,
+        className,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(GridTailwind, { ...props });
+};
+GridHybrid.displayName = "Grid";
+var GridHybrid_default = GridHybrid;
+
+// src/Grid.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Grid = (props) => /* @__PURE__ */ jsx3(GridHybrid_default, { ...props });
+Grid.displayName = "Grid";
 var Grid_default = Grid;
 
 // src/GridTypes.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid.tsx","../../src/utils.ts","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles, toResponsiveGapObject } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  return (\n    <Container\n      display=\"grid\"\n      rowGap={toResponsiveGapObject(rowGap ?? gap)}\n      columnGap={toResponsiveGapObject(columnGap ?? gap)}\n      $columns={columns}\n      className={className}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Grid;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n"],"mappings":";AAAA,OAAkB;AAClB,OAAO,YAAY;AACnB,OAAO,SAAS;;;ACGhB,SAAS,WAAW;AACpB,SAAS,aAAa;AAEtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,wBAAwB,CACnC,UAGoE;AACpE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAEO,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA;AAAA;AAAA,yBAGgB,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADhCI;AAbJ,IAAM,YAAY,OAAO,GAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,MAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,MACjD,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Grid.tsx","../../src/GridHybrid.tsx","../../src/styles.ts","../../src/utils.ts","../../src/GridTailwind.tsx","../../src/GridTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { GridProps } from \"./GridTypes\";\nimport GridHybrid from \"./GridHybrid\";\n\n/**\n * Grid component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using a\n * styled() extension or styled-system props).\n */\nconst Grid: React.FC<GridProps> = (props) => <GridHybrid {...props} />;\n\nGrid.displayName = \"Grid\";\nexport default Grid;\n","/**\n * Hybrid Grid component.\n * Automatically chooses between the Tailwind implementation (preferred) and the\n * styled-components implementation. Grid never exposed styled-system props on its\n * public API, so the realistic styled-components trigger is a styled(Grid)\n * extension — routing on needsStyledComponents preserves that backward\n * compatibility (and any accidental styled-system prop spread).\n */\n\nimport React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\"; // Styled-components version\nimport { GridTailwind } from \"./GridTailwind\"; // Tailwind version\nimport { toResponsiveGapObject } from \"./utils\";\nimport type { GridProps } from \"./GridTypes\";\n\nconst GridHybrid: React.FC<GridProps> = (props) => {\n  const { columns = 1, gap = 400, rowGap, columnGap, children, className } =\n    props;\n\n  if (needsStyledComponents(props)) {\n    return (\n      <Container\n        display=\"grid\"\n        rowGap={toResponsiveGapObject(rowGap ?? gap)}\n        columnGap={toResponsiveGapObject(columnGap ?? gap)}\n        $columns={columns}\n        className={className}\n      >\n        {children}\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <GridTailwind {...props} />;\n};\n\nGridHybrid.displayName = \"Grid\";\nexport default GridHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nexport default Container;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","/**\n * Tailwind/CSS implementation of the Grid component.\n *\n * Dependency-free: renders a plain <div class=\"seeds-grid\"> and drives layout\n * with a mix of inline styles and CSS custom properties consumed by grid.css.\n *\n * jsdom-safe rule (mirrors Icon/Avatar/Skeleton):\n * - Scalar values (a number of columns, or a scalar gap) are written as literal\n *   resolved inline styles (e.g. row-gap: 24px) so window.getComputedStyle sees\n *   them in tests. Do NOT use var(--space-N) here — jsdom cannot resolve it.\n * - Responsive values (an object) are emitted as inline CSS custom properties;\n *   the concrete property is set only by the media queries in grid.css so the\n *   overrides are not blocked by inline specificity.\n */\n\nimport React from \"react\";\nimport type { GapValue, GridProps } from \"./GridTypes\";\n\n// Space scale → px, matching seeds-design-tokens/seeds-space/tokens.json and the\n// mapping Box's styled-system applies on the styled-components path.\nconst SPACE_SCALE: Record<number, number> = {\n  0: 0,\n  100: 2,\n  200: 4,\n  300: 8,\n  350: 12,\n  400: 16,\n  450: 24,\n  500: 32,\n  600: 40,\n};\n\n// Loose bag of CSS declarations + custom properties. Cast to React.CSSProperties\n// at the JSX site (same approach as IconTailwind), since custom properties are\n// not part of the CSSProperties type.\ntype GridStyle = Record<string, string>;\n\ntype ResponsiveGapObject = {\n  sm?: GapValue;\n  md?: GapValue;\n  lg?: GapValue;\n  xl?: GapValue;\n};\n\ntype ResponsiveColumnsObject = {\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Resolve a scalar gap value to a concrete CSS length. Space-scale keys map to\n// px; pixel/arbitrary strings (\"20px\", \"1em\") pass through unchanged.\nconst toGap = (value: GapValue): string =>\n  typeof value === \"number\" ? `${SPACE_SCALE[value] ?? 0}px` : value;\n\nconst isResponsive = (value: unknown): boolean =>\n  typeof value === \"object\" && value !== null;\n\n// Set the responsive column custom properties, resolving the breakpoint cascade\n// in JS (md falls back to sm, lg to md/sm, xl to lg/md/sm) exactly like\n// getResponsiveStyles on the styled-components path.\nconst applyResponsiveColumns = (\n  style: GridStyle,\n  columns: ResponsiveColumnsObject\n): void => {\n  const { sm, md, lg, xl } = columns;\n  style[\"--sg-cols\"] = \"repeat(1, 1fr)\";\n  style[\"--sg-cols-sm\"] = `repeat(${sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-md\"] = `repeat(${md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-lg\"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-xl\"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;\n};\n\n// Apply a single gap axis. Scalar → concrete inline property (jsdom-safe).\n// Responsive → custom properties only, driven by grid.css media queries.\nconst applyGap = (\n  style: GridStyle,\n  axis: \"row\" | \"column\",\n  value: GapValue | ResponsiveGapObject\n): void => {\n  const prefix = axis === \"row\" ? \"--sg-row-gap\" : \"--sg-col-gap\";\n\n  if (isResponsive(value)) {\n    const { sm, md, lg, xl } = value as ResponsiveGapObject;\n    style[prefix] = \"0\";\n    if (sm !== undefined) style[`${prefix}-sm`] = toGap(sm);\n    const mdVal = md ?? sm;\n    if (mdVal !== undefined) style[`${prefix}-md`] = toGap(mdVal);\n    const lgVal = lg ?? md ?? sm;\n    if (lgVal !== undefined) style[`${prefix}-lg`] = toGap(lgVal);\n    const xlVal = xl ?? lg ?? md ?? sm;\n    if (xlVal !== undefined) style[`${prefix}-xl`] = toGap(xlVal);\n    return;\n  }\n\n  const resolved = toGap(value as GapValue);\n  if (axis === \"row\") {\n    style.rowGap = resolved;\n  } else {\n    style.columnGap = resolved;\n  }\n};\n\nexport const GridTailwind: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  const style: GridStyle = { display: \"grid\" };\n\n  if (isResponsive(columns)) {\n    applyResponsiveColumns(style, columns as ResponsiveColumnsObject);\n  } else {\n    style.gridTemplateColumns = `repeat(${columns as number}, 1fr)`;\n  }\n\n  applyGap(style, \"row\", rowGap ?? gap);\n  applyGap(style, \"column\", columnGap ?? gap);\n\n  const classes = [\"seeds-grid\", className].filter(Boolean).join(\" \");\n\n  return (\n    <div className={classes} style={style as React.CSSProperties}>\n      {children}\n    </div>\n  );\n};\n\nGridTailwind.displayName = \"GridTailwind\";\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n","import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n"],"mappings":"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","names":["jsx","jsx"]}

package/dist/grid.css

@@ -0,0 +1,87 @@
+/**
+ * Seeds Grid component classes.
+ *
+ * Scalar column/gap values are applied inline by GridTailwind (jsdom-safe and
+ * they win over these rules). These rules provide sane defaults and drive the
+ * responsive cases: GridTailwind sets --sg-* custom properties per breakpoint
+ * and the media queries below promote them, resolving the sm -> md -> lg -> xl
+ * cascade. Breakpoints match @sproutsocial/seeds-react-theme
+ * (sm 640 / md 768 / lg 1024 / xl 1280).
+ *
+ * All rules are wrapped in `@layer components` so consumer Tailwind utilities
+ * (unlayered) win the cascade, matching button.css.
+ */
+
+@layer components {
+  .seeds-grid {
+    display: grid;
+    grid-template-columns: var(--sg-cols, repeat(1, 1fr));
+    row-gap: var(--sg-row-gap, 0);
+    column-gap: var(--sg-col-gap, 0);
+  }
+
+  @media (min-width: 640px) {
+    .seeds-grid {
+      grid-template-columns: var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)));
+      row-gap: var(--sg-row-gap-sm, var(--sg-row-gap, 0));
+      column-gap: var(--sg-col-gap-sm, var(--sg-col-gap, 0));
+    }
+  }
+
+  @media (min-width: 768px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-md,
+        var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)))
+      );
+      row-gap: var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)));
+      column-gap: var(
+        --sg-col-gap-md,
+        var(--sg-col-gap-sm, var(--sg-col-gap, 0))
+      );
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-lg,
+        var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
+      );
+      row-gap: var(
+        --sg-row-gap-lg,
+        var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
+      );
+      column-gap: var(
+        --sg-col-gap-lg,
+        var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
+      );
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-xl,
+        var(
+          --sg-cols-lg,
+          var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
+        )
+      );
+      row-gap: var(
+        --sg-row-gap-xl,
+        var(
+          --sg-row-gap-lg,
+          var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
+        )
+      );
+      column-gap: var(
+        --sg-col-gap-xl,
+        var(
+          --sg-col-gap-lg,
+          var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
+        )
+      );
+    }
+  }
+}

package/dist/index.d.mts

@@ -43,6 +43,11 @@ interface GridProps {
     className?: string;
 }
 
+/**
+ * Grid component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using a
+ * styled() extension or styled-system props).
+ */
 declare const Grid: React__default.FC<GridProps>;
 
 export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveGapValue, type ResponsiveValue, Grid as default };

package/dist/index.d.ts

@@ -43,6 +43,11 @@ interface GridProps {
     className?: string;
 }
 
+/**
+ * Grid component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using a
+ * styled() extension or styled-system props).
+ */
 declare const Grid: React__default.FC<GridProps>;
 
 export { type ContainerProps, type GapValue, Grid, type GridProps, type ResponsiveGapValue, type ResponsiveValue, Grid as default };

package/dist/index.js

@@ -36,7 +36,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Grid.tsx
-var import_react = require("react");
+var import_react3 = require("react");
+
+// src/GridHybrid.tsx
+var import_react2 = require("react");
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+
+// src/styles.ts
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 
@@ -81,12 +87,58 @@ var getResponsiveStyles = (columns = 1) => {
   `;
 };
 
-// src/Grid.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+// src/styles.ts
 var Container = (0, import_styled_components2.default)(import_seeds_react_box.default)`
   ${(props) => getResponsiveStyles(props.$columns)}
 `;
-var Grid = ({
+var styles_default = Container;
+
+// src/GridTailwind.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SPACE_SCALE = {
+  0: 0,
+  100: 2,
+  200: 4,
+  300: 8,
+  350: 12,
+  400: 16,
+  450: 24,
+  500: 32,
+  600: 40
+};
+var toGap = (value) => typeof value === "number" ? `${SPACE_SCALE[value] ?? 0}px` : value;
+var isResponsive = (value) => typeof value === "object" && value !== null;
+var applyResponsiveColumns = (style, columns) => {
+  const { sm, md, lg, xl } = columns;
+  style["--sg-cols"] = "repeat(1, 1fr)";
+  style["--sg-cols-sm"] = `repeat(${sm ?? 1}, 1fr)`;
+  style["--sg-cols-md"] = `repeat(${md ?? sm ?? 1}, 1fr)`;
+  style["--sg-cols-lg"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;
+  style["--sg-cols-xl"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;
+};
+var applyGap = (style, axis, value) => {
+  const prefix = axis === "row" ? "--sg-row-gap" : "--sg-col-gap";
+  if (isResponsive(value)) {
+    const { sm, md, lg, xl } = value;
+    style[prefix] = "0";
+    if (sm !== void 0) style[`${prefix}-sm`] = toGap(sm);
+    const mdVal = md ?? sm;
+    if (mdVal !== void 0) style[`${prefix}-md`] = toGap(mdVal);
+    const lgVal = lg ?? md ?? sm;
+    if (lgVal !== void 0) style[`${prefix}-lg`] = toGap(lgVal);
+    const xlVal = xl ?? lg ?? md ?? sm;
+    if (xlVal !== void 0) style[`${prefix}-xl`] = toGap(xlVal);
+    return;
+  }
+  const resolved = toGap(value);
+  if (axis === "row") {
+    style.rowGap = resolved;
+  } else {
+    style.columnGap = resolved;
+  }
+};
+var GridTailwind = ({
   columns = 1,
   gap = 400,
   rowGap,
@@ -94,22 +146,49 @@ var Grid = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Container,
-    {
-      display: "grid",
-      rowGap: toResponsiveGapObject(rowGap ?? gap),
-      columnGap: toResponsiveGapObject(columnGap ?? gap),
-      $columns: columns,
-      className,
-      children
-    }
-  );
+  const style = { display: "grid" };
+  if (isResponsive(columns)) {
+    applyResponsiveColumns(style, columns);
+  } else {
+    style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+  }
+  applyGap(style, "row", rowGap ?? gap);
+  applyGap(style, "column", columnGap ?? gap);
+  const classes = ["seeds-grid", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classes, style, children });
 };
+GridTailwind.displayName = "GridTailwind";
+
+// src/GridHybrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var GridHybrid = (props) => {
+  const { columns = 1, gap = 400, rowGap, columnGap, children, className } = props;
+  if ((0, import_seeds_react_system_props.needsStyledComponents)(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      styles_default,
+      {
+        display: "grid",
+        rowGap: toResponsiveGapObject(rowGap ?? gap),
+        columnGap: toResponsiveGapObject(columnGap ?? gap),
+        $columns: columns,
+        className,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GridTailwind, { ...props });
+};
+GridHybrid.displayName = "Grid";
+var GridHybrid_default = GridHybrid;
+
+// src/Grid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Grid = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GridHybrid_default, { ...props });
+Grid.displayName = "Grid";
 var Grid_default = Grid;
 
 // src/GridTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = Grid_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/utils.ts","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps, GridProps } from \"./GridTypes\";\nimport { getResponsiveStyles, toResponsiveGapObject } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nconst Grid: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  return (\n    <Container\n      display=\"grid\"\n      rowGap={toResponsiveGapObject(rowGap ?? gap)}\n      columnGap={toResponsiveGapObject(columnGap ?? gap)}\n      $columns={columns}\n      className={className}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Grid;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,4BAAmB;AACnB,6BAAgB;;;ACGhB,+BAAoB;AACpB,+BAAsB;AAEtB,IAAM,EAAE,YAAY,IAAI;AAEjB,IAAM,wBAAwB,CACnC,UAGoE;AACpE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO;AACT;AAEO,IAAM,sBAAsB,CAAC,UAA2B,MAAM;AACnE,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO;AAAA,sCAC2B,OAAO;AAAA;AAAA,EAE3C;AAEA,SAAO;AAAA;AAAA;AAAA,yBAGgB,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG5B,YAAY,EAAE;AAAA,sCACD,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA,yBAG1C,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5B,YAAY,EAAE;AAAA;AAAA,UAE7B,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKnE;;;ADhCI;AAbJ,IAAM,gBAAY,0BAAAC,SAAO,uBAAAC,OAAG;AAAA,IACxB,CAAC,UAAU,oBAAoB,MAAM,QAAQ,CAAC;AAAA;AAGlD,IAAM,OAA4B,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,QAAQ,sBAAsB,UAAU,GAAG;AAAA,MAC3C,WAAW,sBAAsB,aAAa,GAAG;AAAA,MACjD,UAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;;;AE9Bf,IAAAC,SAAuB;;;AHCvB,IAAO,gBAAQ;","names":["import_styled_components","styled","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Grid.tsx","../src/GridHybrid.tsx","../src/styles.ts","../src/utils.ts","../src/GridTailwind.tsx","../src/GridTypes.ts"],"sourcesContent":["import Grid from \"./Grid\";\n\nexport default Grid;\nexport { Grid };\nexport * from \"./GridTypes\";\n","import React from \"react\";\nimport type { GridProps } from \"./GridTypes\";\nimport GridHybrid from \"./GridHybrid\";\n\n/**\n * Grid component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using a\n * styled() extension or styled-system props).\n */\nconst Grid: React.FC<GridProps> = (props) => <GridHybrid {...props} />;\n\nGrid.displayName = \"Grid\";\nexport default Grid;\n","/**\n * Hybrid Grid component.\n * Automatically chooses between the Tailwind implementation (preferred) and the\n * styled-components implementation. Grid never exposed styled-system props on its\n * public API, so the realistic styled-components trigger is a styled(Grid)\n * extension — routing on needsStyledComponents preserves that backward\n * compatibility (and any accidental styled-system prop spread).\n */\n\nimport React from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\"; // Styled-components version\nimport { GridTailwind } from \"./GridTailwind\"; // Tailwind version\nimport { toResponsiveGapObject } from \"./utils\";\nimport type { GridProps } from \"./GridTypes\";\n\nconst GridHybrid: React.FC<GridProps> = (props) => {\n  const { columns = 1, gap = 400, rowGap, columnGap, children, className } =\n    props;\n\n  if (needsStyledComponents(props)) {\n    return (\n      <Container\n        display=\"grid\"\n        rowGap={toResponsiveGapObject(rowGap ?? gap)}\n        columnGap={toResponsiveGapObject(columnGap ?? gap)}\n        $columns={columns}\n        className={className}\n      >\n        {children}\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <GridTailwind {...props} />;\n};\n\nGridHybrid.displayName = \"Grid\";\nexport default GridHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { ContainerProps } from \"./GridTypes\";\nimport { getResponsiveStyles } from \"./utils\";\n\nconst Container = styled(Box)<ContainerProps>`\n  ${(props) => getResponsiveStyles(props.$columns)}\n`;\n\nexport default Container;\n","import type {\n  GapValue,\n  ResponsiveGapValue,\n  ResponsiveValue,\n} from \"./GridTypes\";\nimport { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nconst { breakpoints } = theme;\n\nexport const toResponsiveGapObject = (\n  value: ResponsiveGapValue\n):\n  | GapValue\n  | { sm?: GapValue; md?: GapValue; lg?: GapValue; xl?: GapValue } => {\n  if (typeof value !== \"object\") return value;\n  return value;\n};\n\nexport const getResponsiveStyles = (columns: ResponsiveValue = 1) => {\n  if (typeof columns === \"number\") {\n    return css`\n      grid-template-columns: repeat(${columns}, 1fr);\n    `;\n  }\n\n  return css`\n    grid-template-columns: repeat(1, 1fr);\n\n    @media (min-width: ${breakpoints.sm}) {\n      grid-template-columns: repeat(${columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n      grid-template-columns: repeat(${columns.md || columns.sm || 1}, 1fr);\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n      grid-template-columns: repeat(\n        ${columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n\n    @media (min-width: ${breakpoints.xl}) {\n      grid-template-columns: repeat(\n        ${columns.xl || columns.lg || columns.md || columns.sm || 1},\n        1fr\n      );\n    }\n  `;\n};\n","/**\n * Tailwind/CSS implementation of the Grid component.\n *\n * Dependency-free: renders a plain <div class=\"seeds-grid\"> and drives layout\n * with a mix of inline styles and CSS custom properties consumed by grid.css.\n *\n * jsdom-safe rule (mirrors Icon/Avatar/Skeleton):\n * - Scalar values (a number of columns, or a scalar gap) are written as literal\n *   resolved inline styles (e.g. row-gap: 24px) so window.getComputedStyle sees\n *   them in tests. Do NOT use var(--space-N) here — jsdom cannot resolve it.\n * - Responsive values (an object) are emitted as inline CSS custom properties;\n *   the concrete property is set only by the media queries in grid.css so the\n *   overrides are not blocked by inline specificity.\n */\n\nimport React from \"react\";\nimport type { GapValue, GridProps } from \"./GridTypes\";\n\n// Space scale → px, matching seeds-design-tokens/seeds-space/tokens.json and the\n// mapping Box's styled-system applies on the styled-components path.\nconst SPACE_SCALE: Record<number, number> = {\n  0: 0,\n  100: 2,\n  200: 4,\n  300: 8,\n  350: 12,\n  400: 16,\n  450: 24,\n  500: 32,\n  600: 40,\n};\n\n// Loose bag of CSS declarations + custom properties. Cast to React.CSSProperties\n// at the JSX site (same approach as IconTailwind), since custom properties are\n// not part of the CSSProperties type.\ntype GridStyle = Record<string, string>;\n\ntype ResponsiveGapObject = {\n  sm?: GapValue;\n  md?: GapValue;\n  lg?: GapValue;\n  xl?: GapValue;\n};\n\ntype ResponsiveColumnsObject = {\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\n// Resolve a scalar gap value to a concrete CSS length. Space-scale keys map to\n// px; pixel/arbitrary strings (\"20px\", \"1em\") pass through unchanged.\nconst toGap = (value: GapValue): string =>\n  typeof value === \"number\" ? `${SPACE_SCALE[value] ?? 0}px` : value;\n\nconst isResponsive = (value: unknown): boolean =>\n  typeof value === \"object\" && value !== null;\n\n// Set the responsive column custom properties, resolving the breakpoint cascade\n// in JS (md falls back to sm, lg to md/sm, xl to lg/md/sm) exactly like\n// getResponsiveStyles on the styled-components path.\nconst applyResponsiveColumns = (\n  style: GridStyle,\n  columns: ResponsiveColumnsObject\n): void => {\n  const { sm, md, lg, xl } = columns;\n  style[\"--sg-cols\"] = \"repeat(1, 1fr)\";\n  style[\"--sg-cols-sm\"] = `repeat(${sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-md\"] = `repeat(${md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-lg\"] = `repeat(${lg ?? md ?? sm ?? 1}, 1fr)`;\n  style[\"--sg-cols-xl\"] = `repeat(${xl ?? lg ?? md ?? sm ?? 1}, 1fr)`;\n};\n\n// Apply a single gap axis. Scalar → concrete inline property (jsdom-safe).\n// Responsive → custom properties only, driven by grid.css media queries.\nconst applyGap = (\n  style: GridStyle,\n  axis: \"row\" | \"column\",\n  value: GapValue | ResponsiveGapObject\n): void => {\n  const prefix = axis === \"row\" ? \"--sg-row-gap\" : \"--sg-col-gap\";\n\n  if (isResponsive(value)) {\n    const { sm, md, lg, xl } = value as ResponsiveGapObject;\n    style[prefix] = \"0\";\n    if (sm !== undefined) style[`${prefix}-sm`] = toGap(sm);\n    const mdVal = md ?? sm;\n    if (mdVal !== undefined) style[`${prefix}-md`] = toGap(mdVal);\n    const lgVal = lg ?? md ?? sm;\n    if (lgVal !== undefined) style[`${prefix}-lg`] = toGap(lgVal);\n    const xlVal = xl ?? lg ?? md ?? sm;\n    if (xlVal !== undefined) style[`${prefix}-xl`] = toGap(xlVal);\n    return;\n  }\n\n  const resolved = toGap(value as GapValue);\n  if (axis === \"row\") {\n    style.rowGap = resolved;\n  } else {\n    style.columnGap = resolved;\n  }\n};\n\nexport const GridTailwind: React.FC<GridProps> = ({\n  columns = 1,\n  gap = 400,\n  rowGap,\n  columnGap,\n  children,\n  className,\n}) => {\n  const style: GridStyle = { display: \"grid\" };\n\n  if (isResponsive(columns)) {\n    applyResponsiveColumns(style, columns as ResponsiveColumnsObject);\n  } else {\n    style.gridTemplateColumns = `repeat(${columns as number}, 1fr)`;\n  }\n\n  applyGap(style, \"row\", rowGap ?? gap);\n  applyGap(style, \"column\", columnGap ?? gap);\n\n  const classes = [\"seeds-grid\", className].filter(Boolean).join(\" \");\n\n  return (\n    <div className={classes} style={style as React.CSSProperties}>\n      {children}\n    </div>\n  );\n};\n\nGridTailwind.displayName = \"GridTailwind\";\n","import type { TypeSpace } from \"@sproutsocial/seeds-react-theme\";\nimport * as React from \"react\";\n\nexport type ResponsiveValue =\n  | number\n  | {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n\n/**\n * Gap value that can be either:\n * - A space scale value from the theme (0, 100, 200, 300, 350, 400, 450, 500, 600)\n * - A pixel string value (e.g., \"16px\", \"20px\")\n */\nexport type GapValue = keyof TypeSpace | (string & {});\n\n/**\n * Responsive gap value that can be either:\n * - A single GapValue applied at all breakpoints\n * - An object with optional breakpoint keys (sm, md, lg, xl) for responsive values\n */\nexport type ResponsiveGapValue =\n  | GapValue\n  | {\n      sm?: GapValue;\n      md?: GapValue;\n      lg?: GapValue;\n      xl?: GapValue;\n    };\n\nexport interface ContainerProps {\n  $columns?: ResponsiveValue;\n}\n\nexport interface GridProps {\n  /** Number of columns (can be responsive) */\n  columns?: ResponsiveValue;\n  /** Gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  gap?: ResponsiveGapValue;\n  /** Row gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  rowGap?: ResponsiveGapValue;\n  /** Column gap between grid items. Use theme.space scale (0, 100, 200, 300, 350, 400, 450, 500, 600), pixel string (e.g., \"16px\"), or responsive object (e.g., { sm: 400, md: 500 }) */\n  columnGap?: ResponsiveGapValue;\n  /** Children elements to display in the grid */\n  children?: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n"],"mappings":"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","names":["import_react","import_react","import_styled_components","styled","Box","import_jsx_runtime","import_jsx_runtime","React"]}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-grid",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Seeds React Grid",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/grid.css": "./dist/grid.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/grid.css dist/grid.css",
+    "build:debug": "tsup --dts --metafile && cp src/grid.css dist/grid.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",

package/.eslintignore

@@ -1,6 +0,0 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-coverage/

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["eslint-config-seeds/racine"],
-};

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-yarn run v1.22.22
-$ tsup --dts
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-grid/tsup.config.ts
-CLI Target: es2022
-CLI Cleaning output folder
-CJS Build start
-ESM Build start
-CJS dist/index.js     3.71 KB
-CJS dist/index.js.map 5.23 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     1.84 KB
-ESM dist/esm/index.js.map 5.11 KB
-ESM ⚡️ Build success in 14ms
-DTS Build start
-DTS ⚡️ Build success in 4418ms
-DTS dist/index.d.ts  1.86 KB
-DTS dist/index.d.mts 1.86 KB
-Done in 6.09s.