@basiln/utils 0.1.13 → 0.1.14

package/dist/chunk-6ZISNSYZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/styles.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport {\n  gridAlignVar,\n  gridGapVar,\n  gridColumnsVar,\n  gridRowsVar,\n  gridAreasVar,\n  gridFlowVar,\n  gridItemAreaVar,\n  gridItemColumnEndVar,\n  gridItemColumnStartVar,\n  gridItemRowEndVar,\n  gridItemRowStartVar,\n  gridAreaAttribute,\n  gridAreasAttribute,\n  gridJustifyVar,\n} from './constants';\nimport { getVar } from '../getVar';\n\nexport const gridCss = css({\n  gap: getVar(gridGapVar),\n  gridTemplateColumns: getVar(gridColumnsVar),\n  gridTemplateRows: getVar(gridRowsVar),\n  gridTemplateAreas: getVar(gridAreasVar),\n  gridAutoFlow: getVar(gridFlowVar),\n  alignItems: getVar(gridAlignVar),\n  justifyContent: getVar(gridJustifyVar),\n});\n\nexport const gridItemCss = css({\n  [`&${gridAreasAttribute.hasAreasSelector}`]: {\n    [`&${gridAreaAttribute.hasAreaSelector}`]: {\n      gridArea: getVar(gridItemAreaVar),\n    },\n  },\n\n  [`&${gridAreaAttribute.noAreaSelector}`]: {\n    gridColumnStart: getVar(gridItemColumnStartVar),\n    gridColumnEnd: getVar(gridItemColumnEndVar),\n    gridRowStart: getVar(gridItemRowStartVar),\n    gridRowEnd: getVar(gridItemRowEndVar),\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,WAAW;AAoBb,IAAM,UAAU,IAAI;AAAA,EACzB,KAAK,OAAO,UAAU;AAAA,EACtB,qBAAqB,OAAO,cAAc;AAAA,EAC1C,kBAAkB,OAAO,WAAW;AAAA,EACpC,mBAAmB,OAAO,YAAY;AAAA,EACtC,cAAc,OAAO,WAAW;AAAA,EAChC,YAAY,OAAO,YAAY;AAAA,EAC/B,gBAAgB,OAAO,cAAc;AACvC,CAAC;AAEM,IAAM,cAAc,IAAI;AAAA,EAC7B,CAAC,IAAI,mBAAmB,gBAAgB,EAAE,GAAG;AAAA,IAC3C,CAAC,IAAI,kBAAkB,eAAe,EAAE,GAAG;AAAA,MACzC,UAAU,OAAO,eAAe;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,CAAC,IAAI,kBAAkB,cAAc,EAAE,GAAG;AAAA,IACxC,iBAAiB,OAAO,sBAAsB;AAAA,IAC9C,eAAe,OAAO,oBAAoB;AAAA,IAC1C,cAAc,OAAO,mBAAmB;AAAA,IACxC,YAAY,OAAO,iBAAiB;AAAA,EACtC;AACF,CAAC;","names":[]}

package/dist/{chunk-75ILZSEA.mjs → chunk-A4GYF5EN.mjs}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-ANMBV2U3.mjs";
 import {
   Spacing
-} from "./chunk-YQMA54XQ.mjs";
+} from "./chunk-OOKIDH3F.mjs";
 
 // src/SafeArea.tsx
 import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 var SafeArea = ({
   as,
   children,
@@ -34,4 +34,4 @@ SafeArea.Bottom = SafeAreaBottom;
 export {
   SafeArea
 };
-//# sourceMappingURL=chunk-75ILZSEA.mjs.map
+//# sourceMappingURL=chunk-A4GYF5EN.mjs.map

package/dist/chunk-IA3Y652S.mjs

@@ -0,0 +1,108 @@
+import {
+  GridProvider,
+  useGridContext
+} from "./chunk-ODQE5YIS.mjs";
+import {
+  gridCss,
+  gridItemCss
+} from "./chunk-6ZISNSYZ.mjs";
+import {
+  gridAlignVar,
+  gridAreaAttribute,
+  gridAreasAttribute,
+  gridAreasVar,
+  gridColumnsVar,
+  gridFlowVar,
+  gridGapVar,
+  gridItemAreaVar,
+  gridItemColumnEndVar,
+  gridItemColumnStartVar,
+  gridItemRowEndVar,
+  gridItemRowStartVar,
+  gridJustifyVar,
+  gridRowsVar
+} from "./chunk-KIWMNTMS.mjs";
+import {
+  formatGridFlow
+} from "./chunk-P3MUNLIM.mjs";
+import {
+  coerceCssPixelValue
+} from "./chunk-OQ3L65JI.mjs";
+
+// src/Grid/Grid.tsx
+import { forwardRef } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var GridImpl = forwardRef((props, ref) => {
+  const {
+    as: Component = "div",
+    inline = false,
+    gap = 0,
+    columns = "auto",
+    rows = "auto",
+    align = "stretch",
+    justify = "normal",
+    areas,
+    flow,
+    style: styleFromProps,
+    children,
+    ...restProps
+  } = props;
+  const gridStyles = {
+    display: inline ? "inline-grid" : "grid",
+    [gridGapVar]: coerceCssPixelValue(gap),
+    [gridColumnsVar]: Array.isArray(columns) ? columns.join(" ") : columns,
+    [gridRowsVar]: Array.isArray(rows) ? rows.join(" ") : rows,
+    [gridAlignVar]: align,
+    [gridFlowVar]: formatGridFlow(flow),
+    [gridAreasVar]: areas,
+    [gridJustifyVar]: justify,
+    ...styleFromProps
+  };
+  return /* @__PURE__ */ jsx(GridProvider, { areas, children: /* @__PURE__ */ jsx(Component, { ref, style: gridStyles, css: gridCss, ...restProps, children }) });
+});
+var GridItem = forwardRef((props, ref) => {
+  const {
+    as: Component = "div",
+    gridArea,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRow,
+    gridRowStart,
+    gridRowEnd,
+    style: styleFromProps,
+    children,
+    ...restProps
+  } = props;
+  const { areas } = useGridContext("Grid.Item");
+  const [columnStart, columnEnd] = Array.isArray(gridColumn) ? gridColumn : gridColumn?.split("/")?.map((str) => str.trim()) ?? [];
+  const [rowStart, rowEnd] = Array.isArray(gridRow) ? gridRow : gridRow?.split("/")?.map((str) => str.trim()) ?? [];
+  const gridItemStyles = {
+    [gridItemAreaVar]: gridArea,
+    [gridItemColumnStartVar]: columnStart ?? gridColumnStart,
+    [gridItemColumnEndVar]: columnEnd ?? gridColumnEnd,
+    [gridItemRowStartVar]: rowStart ?? gridRowStart,
+    [gridItemRowEndVar]: rowEnd ?? gridRowEnd,
+    ...styleFromProps
+  };
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      css: gridItemCss,
+      style: gridItemStyles,
+      ...gridAreasAttribute.set(areas),
+      ...gridAreaAttribute.set(gridArea),
+      ...restProps,
+      children
+    }
+  );
+});
+var Grid = Object.assign(GridImpl, {
+  Item: GridItem
+});
+
+export {
+  Grid
+};
+//# sourceMappingURL=chunk-IA3Y652S.mjs.map

package/dist/chunk-IA3Y652S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  gridAlignVar,\n  gridGapVar,\n  gridColumnsVar,\n  gridRowsVar,\n  gridFlowVar,\n  gridItemAreaVar,\n  gridItemColumnEndVar,\n  gridItemColumnStartVar,\n  gridItemRowEndVar,\n  gridItemRowStartVar,\n  gridAreasVar,\n  gridAreaAttribute,\n  gridAreasAttribute,\n  gridJustifyVar,\n} from './constants';\nimport { gridCss, gridItemCss } from './styles';\nimport type { GridItemProps, GridProps } from './types';\nimport { coerceCssPixelValue } from '../coerceCssPixelValue';\nimport { GridProvider, useGridContext } from './context';\nimport { formatGridFlow } from './utils';\n\nconst GridImpl = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const {\n    as: Component = 'div',\n    inline = false,\n    gap = 0,\n    columns = 'auto',\n    rows = 'auto',\n    align = 'stretch',\n    justify = 'normal',\n    areas,\n    flow,\n    style: styleFromProps,\n    children,\n    ...restProps\n  } = props;\n\n  const gridStyles = {\n    display: inline ? 'inline-grid' : 'grid',\n    [gridGapVar]: coerceCssPixelValue(gap),\n    [gridColumnsVar]: Array.isArray(columns) ? columns.join(' ') : columns,\n    [gridRowsVar]: Array.isArray(rows) ? rows.join(' ') : rows,\n    [gridAlignVar]: align,\n    [gridFlowVar]: formatGridFlow(flow),\n    [gridAreasVar]: areas,\n    [gridJustifyVar]: justify,\n    ...styleFromProps,\n  };\n\n  return (\n    <GridProvider areas={areas}>\n      <Component ref={ref} style={gridStyles} css={gridCss} {...restProps}>\n        {children}\n      </Component>\n    </GridProvider>\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const {\n    as: Component = 'div',\n    gridArea,\n    gridColumn,\n    gridColumnStart,\n    gridColumnEnd,\n    gridRow,\n    gridRowStart,\n    gridRowEnd,\n    style: styleFromProps,\n    children,\n    ...restProps\n  } = props;\n\n  const { areas } = useGridContext('Grid.Item');\n\n  const [columnStart, columnEnd] = Array.isArray(gridColumn)\n    ? gridColumn\n    : gridColumn?.split('/')?.map((str) => str.trim()) ?? [];\n\n  const [rowStart, rowEnd] = Array.isArray(gridRow)\n    ? gridRow\n    : gridRow?.split('/')?.map((str) => str.trim()) ?? [];\n\n  const gridItemStyles = {\n    [gridItemAreaVar]: gridArea,\n    [gridItemColumnStartVar]: columnStart ?? gridColumnStart,\n    [gridItemColumnEndVar]: columnEnd ?? gridColumnEnd,\n    [gridItemRowStartVar]: rowStart ?? gridRowStart,\n    [gridItemRowEndVar]: rowEnd ?? gridRowEnd,\n    ...styleFromProps,\n  };\n\n  return (\n    <Component\n      ref={ref}\n      css={gridItemCss}\n      style={gridItemStyles}\n      {...gridAreasAttribute.set(areas)}\n      {...gridAreaAttribute.set(gridArea)}\n      {...restProps}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport const Grid = Object.assign(GridImpl, {\n  Item: GridItem,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAAkB;AAsDrB;AA9BN,IAAM,WAAW,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAM;AAAA,IACJ,IAAI,YAAY;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa;AAAA,IACjB,SAAS,SAAS,gBAAgB;AAAA,IAClC,CAAC,UAAU,GAAG,oBAAoB,GAAG;AAAA,IACrC,CAAC,cAAc,GAAG,MAAM,QAAQ,OAAO,IAAI,QAAQ,KAAK,GAAG,IAAI;AAAA,IAC/D,CAAC,WAAW,GAAG,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK,GAAG,IAAI;AAAA,IACtD,CAAC,YAAY,GAAG;AAAA,IAChB,CAAC,WAAW,GAAG,eAAe,IAAI;AAAA,IAClC,CAAC,YAAY,GAAG;AAAA,IAChB,CAAC,cAAc,GAAG;AAAA,IAClB,GAAG;AAAA,EACL;AAEA,SACE,oBAAC,gBAAa,OACZ,8BAAC,aAAU,KAAU,OAAO,YAAY,KAAK,SAAU,GAAG,WACvD,UACH,GACF;AAEJ,CAAC;AAED,IAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AACzE,QAAM;AAAA,IACJ,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,MAAM,IAAI,eAAe,WAAW;AAE5C,QAAM,CAAC,aAAa,SAAS,IAAI,MAAM,QAAQ,UAAU,IACrD,aACA,YAAY,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC;AAEzD,QAAM,CAAC,UAAU,MAAM,IAAI,MAAM,QAAQ,OAAO,IAC5C,UACA,SAAS,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC;AAEtD,QAAM,iBAAiB;AAAA,IACrB,CAAC,eAAe,GAAG;AAAA,IACnB,CAAC,sBAAsB,GAAG,eAAe;AAAA,IACzC,CAAC,oBAAoB,GAAG,aAAa;AAAA,IACrC,CAAC,mBAAmB,GAAG,YAAY;AAAA,IACnC,CAAC,iBAAiB,GAAG,UAAU;AAAA,IAC/B,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,OAAO;AAAA,MACN,GAAG,mBAAmB,IAAI,KAAK;AAAA,MAC/B,GAAG,kBAAkB,IAAI,QAAQ;AAAA,MACjC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,IAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;","names":[]}

package/dist/chunk-KIWMNTMS.mjs

@@ -0,0 +1,54 @@
+import {
+  createCssVar
+} from "./chunk-P3MUNLIM.mjs";
+
+// src/Grid/constants.ts
+var GRID = "grid";
+var GRID_ITEM = "grid-item";
+var gridAlignVar = createCssVar(GRID, "align");
+var gridGapVar = createCssVar(GRID, "gap");
+var gridColumnsVar = createCssVar(GRID, "columns");
+var gridRowsVar = createCssVar(GRID, "rows");
+var gridAreasVar = createCssVar(GRID, "areas");
+var gridFlowVar = createCssVar(GRID, "flow");
+var gridJustifyVar = createCssVar(GRID, "justify");
+var gridItemAreaVar = createCssVar(GRID_ITEM, "area");
+var gridItemColumnStartVar = createCssVar(GRID_ITEM, "column-start");
+var gridItemColumnEndVar = createCssVar(GRID_ITEM, "column-end");
+var gridItemRowStartVar = createCssVar(GRID_ITEM, "row-start");
+var gridItemRowEndVar = createCssVar(GRID_ITEM, "row-end");
+var hasGridAreasAttributeKey = "data-grid-has-areas";
+var gridAreasAttribute = {
+  key: hasGridAreasAttributeKey,
+  set: (areas) => ({
+    [hasGridAreasAttributeKey]: areas != null ? "true" : "false"
+  }),
+  hasAreasSelector: `[${hasGridAreasAttributeKey}="true"]`
+};
+var hasGridAreaAttributeKey = "data-grid-item-has-grid-area";
+var gridAreaAttribute = {
+  key: hasGridAreaAttributeKey,
+  set: (area) => ({
+    [hasGridAreaAttributeKey]: area != null ? "true" : "false"
+  }),
+  hasAreaSelector: `[${hasGridAreaAttributeKey}="true"]`,
+  noAreaSelector: `[${hasGridAreaAttributeKey}="false"]`
+};
+
+export {
+  gridAlignVar,
+  gridGapVar,
+  gridColumnsVar,
+  gridRowsVar,
+  gridAreasVar,
+  gridFlowVar,
+  gridJustifyVar,
+  gridItemAreaVar,
+  gridItemColumnStartVar,
+  gridItemColumnEndVar,
+  gridItemRowStartVar,
+  gridItemRowEndVar,
+  gridAreasAttribute,
+  gridAreaAttribute
+};
+//# sourceMappingURL=chunk-KIWMNTMS.mjs.map

package/dist/chunk-KIWMNTMS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/constants.ts"],"sourcesContent":["import { createCssVar } from './utils';\n\nconst GRID = 'grid';\nconst GRID_ITEM = 'grid-item';\n\nexport const gridAlignVar = createCssVar(GRID, 'align');\nexport const gridGapVar = createCssVar(GRID, 'gap');\nexport const gridColumnsVar = createCssVar(GRID, 'columns');\nexport const gridRowsVar = createCssVar(GRID, 'rows');\nexport const gridAreasVar = createCssVar(GRID, 'areas');\nexport const gridFlowVar = createCssVar(GRID, 'flow');\nexport const gridJustifyVar = createCssVar(GRID, 'justify');\n\nexport const gridItemAreaVar = createCssVar(GRID_ITEM, 'area');\nexport const gridItemColumnStartVar = createCssVar(GRID_ITEM, 'column-start');\nexport const gridItemColumnEndVar = createCssVar(GRID_ITEM, 'column-end');\nexport const gridItemRowStartVar = createCssVar(GRID_ITEM, 'row-start');\nexport const gridItemRowEndVar = createCssVar(GRID_ITEM, 'row-end');\n\nconst hasGridAreasAttributeKey = 'data-grid-has-areas';\nexport const gridAreasAttribute = {\n  key: hasGridAreasAttributeKey,\n\n  set: (areas?: string) => ({\n    [hasGridAreasAttributeKey]: areas != null ? 'true' : 'false',\n  }),\n\n  hasAreasSelector: `[${hasGridAreasAttributeKey}=\"true\"]`,\n};\n\nconst hasGridAreaAttributeKey = 'data-grid-item-has-grid-area';\nexport const gridAreaAttribute = {\n  key: hasGridAreaAttributeKey,\n\n  set: (area?: string) => ({\n    [hasGridAreaAttributeKey]: area != null ? 'true' : 'false',\n  }),\n\n  hasAreaSelector: `[${hasGridAreaAttributeKey}=\"true\"]`,\n  noAreaSelector: `[${hasGridAreaAttributeKey}=\"false\"]`,\n};\n"],"mappings":";;;;;AAEA,IAAM,OAAO;AACb,IAAM,YAAY;AAEX,IAAM,eAAe,aAAa,MAAM,OAAO;AAC/C,IAAM,aAAa,aAAa,MAAM,KAAK;AAC3C,IAAM,iBAAiB,aAAa,MAAM,SAAS;AACnD,IAAM,cAAc,aAAa,MAAM,MAAM;AAC7C,IAAM,eAAe,aAAa,MAAM,OAAO;AAC/C,IAAM,cAAc,aAAa,MAAM,MAAM;AAC7C,IAAM,iBAAiB,aAAa,MAAM,SAAS;AAEnD,IAAM,kBAAkB,aAAa,WAAW,MAAM;AACtD,IAAM,yBAAyB,aAAa,WAAW,cAAc;AACrE,IAAM,uBAAuB,aAAa,WAAW,YAAY;AACjE,IAAM,sBAAsB,aAAa,WAAW,WAAW;AAC/D,IAAM,oBAAoB,aAAa,WAAW,SAAS;AAElE,IAAM,2BAA2B;AAC1B,IAAM,qBAAqB;AAAA,EAChC,KAAK;AAAA,EAEL,KAAK,CAAC,WAAoB;AAAA,IACxB,CAAC,wBAAwB,GAAG,SAAS,OAAO,SAAS;AAAA,EACvD;AAAA,EAEA,kBAAkB,IAAI,wBAAwB;AAChD;AAEA,IAAM,0BAA0B;AACzB,IAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EAEL,KAAK,CAAC,UAAmB;AAAA,IACvB,CAAC,uBAAuB,GAAG,QAAQ,OAAO,SAAS;AAAA,EACrD;AAAA,EAEA,iBAAiB,IAAI,uBAAuB;AAAA,EAC5C,gBAAgB,IAAI,uBAAuB;AAC7C;","names":[]}

package/dist/{chunk-QKAXJVK7.mjs → chunk-KQN75INR.mjs}

@@ -5,7 +5,7 @@ import {
 // src/Flex.tsx
 import { memo } from "react";
 import styled from "@emotion/styled";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@emotion/react/jsx-runtime";
 var Flex = memo(function Flex2(props) {
   const {
     gap = 0,
@@ -29,4 +29,4 @@ export {
   Flex,
   Container
 };
-//# sourceMappingURL=chunk-QKAXJVK7.mjs.map
+//# sourceMappingURL=chunk-KQN75INR.mjs.map

package/dist/chunk-ODQE5YIS.mjs

@@ -0,0 +1,12 @@
+import {
+  createContext
+} from "./chunk-6S7STXJR.mjs";
+
+// src/Grid/context.ts
+var [GridProvider, useGridContext] = createContext("Grid");
+
+export {
+  GridProvider,
+  useGridContext
+};
+//# sourceMappingURL=chunk-ODQE5YIS.mjs.map

package/dist/chunk-ODQE5YIS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/context.ts"],"sourcesContent":["import { createContext } from '../createContext';\n\nexport type GridContext = {\n  areas?: string;\n};\n\nexport const [GridProvider, useGridContext] = createContext<GridContext>('Grid');\n"],"mappings":";;;;;AAMO,IAAM,CAAC,cAAc,cAAc,IAAI,cAA2B,MAAM;","names":[]}

package/dist/{chunk-YQMA54XQ.mjs → chunk-OOKIDH3F.mjs}

@@ -5,7 +5,7 @@ import {
 // src/Spacing.tsx
 import { memo } from "react";
 import styled from "@emotion/styled";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@emotion/react/jsx-runtime";
 var Spacing = memo(function Spacing2(props) {
   const { direction = "vertical", size, ...restProps } = props;
   return /* @__PURE__ */ jsx(SpacingContainer, { $direction: direction, $size: size, ...restProps });
@@ -19,4 +19,4 @@ var SpacingContainer = styled.div`
 export {
   Spacing
 };
-//# sourceMappingURL=chunk-YQMA54XQ.mjs.map
+//# sourceMappingURL=chunk-OOKIDH3F.mjs.map

package/dist/chunk-P3MUNLIM.mjs

@@ -0,0 +1,17 @@
+// src/Grid/utils.ts
+var packageName = "--utils";
+var createCssVar = (key, value) => {
+  const suffix = value ? `-${value}` : "";
+  return `${packageName}-${key}${suffix}`;
+};
+var formatGridFlow = (flow) => {
+  if (!flow) return void 0;
+  const flowParts = flow.split("-");
+  return flowParts.length > 1 ? flowParts.join(" ") : flow;
+};
+
+export {
+  createCssVar,
+  formatGridFlow
+};
+//# sourceMappingURL=chunk-P3MUNLIM.mjs.map

package/dist/chunk-P3MUNLIM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Grid/utils.ts"],"sourcesContent":["const packageName = '--utils';\n\ntype CssVar<T extends string, U extends string | undefined = undefined> = U extends undefined\n  ? `${typeof packageName}-${T}`\n  : `${typeof packageName}-${T}-${U}`;\n\nexport const createCssVar = <T extends string, U extends string | undefined = undefined>(\n  key: T,\n  value?: U\n): CssVar<T, U> => {\n  const suffix = value ? `-${value}` : '';\n  return `${packageName}-${key}${suffix}` as CssVar<T, U>;\n};\nexport const formatGridFlow = (flow: string | undefined) => {\n  if (!flow) return undefined;\n  const flowParts = flow.split('-');\n\n  return flowParts.length > 1 ? flowParts.join(' ') : flow;\n};\n"],"mappings":";AAAA,IAAM,cAAc;AAMb,IAAM,eAAe,CAC1B,KACA,UACiB;AACjB,QAAM,SAAS,QAAQ,IAAI,KAAK,KAAK;AACrC,SAAO,GAAG,WAAW,IAAI,GAAG,GAAG,MAAM;AACvC;AACO,IAAM,iBAAiB,CAAC,SAA6B;AAC1D,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,YAAY,KAAK,MAAM,GAAG;AAEhC,SAAO,UAAU,SAAS,IAAI,UAAU,KAAK,GAAG,IAAI;AACtD;","names":[]}

package/dist/{chunk-UFRXNT2I.mjs → chunk-YGI66TDT.mjs}

@@ -1,5 +1,5 @@
 // src/If.tsx
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "@emotion/react/jsx-runtime";
 function If(props) {
   const { condition, children } = props;
   return condition ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
@@ -8,4 +8,4 @@ function If(props) {
 export {
   If
 };
-//# sourceMappingURL=chunk-UFRXNT2I.mjs.map
+//# sourceMappingURL=chunk-YGI66TDT.mjs.map

package/dist/createContext.js

@@ -24,7 +24,7 @@ __export(createContext_exports, {
 });
 module.exports = __toCommonJS(createContext_exports);
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 function createContext(rootComponentName, defaultContext) {
   const Context = (0, import_react.createContext)(defaultContext);
   function Provider(props) {

package/dist/createContext.mjs

@@ -1,6 +1,6 @@
 import {
   createContext
-} from "./chunk-FEPXSL77.mjs";
+} from "./chunk-6S7STXJR.mjs";
 export {
   createContext
 };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default, { ReactNode, FC, PropsWithChildren, HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, Ref } from 'react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as react from 'react';
+import react__default, { ReactNode, FC, PropsWithChildren, HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, Ref, ElementType } from 'react';
 import * as _emotion_react from '@emotion/react';
 
 type ChooseWhenProps = {
@@ -13,7 +13,7 @@ type ChooseProps = {
 type ChooseOtherwiseProps = {
     children: ReactNode;
 };
-declare function Choose({ children }: ChooseProps): string | number | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
+declare function Choose({ children }: ChooseProps): string | number | Iterable<ReactNode> | _emotion_react_jsx_runtime.JSX.Element;
 declare namespace Choose {
     var When: FC<ChooseWhenProps>;
     var Otherwise: FC<ChooseOtherwiseProps>;
@@ -24,7 +24,7 @@ declare function composeEventHandlers<E>(originalEventHandler?: (event: E) => vo
 }): (event: E) => void;
 
 declare function createContext<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType): readonly [{
-    (props: PropsWithChildren<ContextValueType>): react_jsx_runtime.JSX.Element;
+    (props: PropsWithChildren<ContextValueType>): _emotion_react_jsx_runtime.JSX.Element;
     displayName: string;
 }, (consumerName: string) => NonNullable<ContextValueType>];
 
@@ -35,7 +35,7 @@ type IfProps = {
     condition: boolean;
     children: ReactNode;
 };
-declare function If(props: IfProps): react_jsx_runtime.JSX.Element | null;
+declare function If(props: IfProps): _emotion_react_jsx_runtime.JSX.Element | null;
 
 type CSSPixelValue = string | number;
 
@@ -48,7 +48,7 @@ type FlexProps = HTMLAttributes<HTMLDivElement> & {
     align?: Align;
     direction?: Direction;
 };
-declare const Flex: React.NamedExoticComponent<FlexProps>;
+declare const Flex: react.NamedExoticComponent<FlexProps>;
 
 type MultiLineEllipsisProps = {
     line: number;
@@ -98,7 +98,7 @@ type SpacingProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     direction?: AxisDirection;
     size: CSSPixelValue;
 };
-declare const Spacing: React.NamedExoticComponent<SpacingProps>;
+declare const Spacing: react.NamedExoticComponent<SpacingProps>;
 
 type SafeAreaCssValueProps = {
     top?: CSSPixelValue;
@@ -113,17 +113,17 @@ declare const useSafeArea: ({ top: T, bottom: B, left: L, right: R, }?: SafeArea
     right: string;
 };
 
-type SafeAreaProps<T extends React__default.ElementType = 'div'> = {
+type SafeAreaProps<T extends react__default.ElementType = 'div'> = {
     as?: T;
     children: ReactNode;
 } & ComponentPropsWithoutRef<T>;
 declare const SafeArea: {
-    <T extends React__default.ElementType = "div">({ as, children, ...props }: SafeAreaProps<T>): react_jsx_runtime.JSX.Element;
-    Top: React__default.NamedExoticComponent<Omit<Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> & {
+    <T extends react__default.ElementType = "div">({ as, children, ...props }: SafeAreaProps<T>): _emotion_react_jsx_runtime.JSX.Element;
+    Top: react__default.NamedExoticComponent<Omit<Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> & {
         direction?: "vertical" | "horizontal";
         size: CSSPixelValue;
     }, "size">>;
-    Bottom: React__default.NamedExoticComponent<Omit<Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> & {
+    Bottom: react__default.NamedExoticComponent<Omit<Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> & {
         direction?: "vertical" | "horizontal";
         size: CSSPixelValue;
     }, "size">>;
@@ -263,6 +263,51 @@ type UseControllableStateParams<T> = {
  * @description
  * Radix UI's useControllableState
  */
-declare const useControllableState: <T>({ prop, defaultProp, onChange, }: UseControllableStateParams<T>) => readonly [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
+declare const useControllableState: <T>({ prop, defaultProp, onChange, }: UseControllableStateParams<T>) => readonly [T | undefined, react.Dispatch<react.SetStateAction<T | undefined>>];
 
-export { type AirLevel, Choose, type ChooseOtherwiseProps, type ChooseProps, type ChooseWhenProps, type DebouncedFunction, DomainFormat, Flex, type FlexProps, Format, type HexToRgbaProps, If, type IfProps, type JosaProps, type Mode, type MultiLineEllipsisProps, SafeArea, type SafeAreaCssValueProps, type SafeAreaProps, Spacing, type SpacingProps, type UseControllableStateParams, type UserLevel, Validate, type VariableType, type Wind, composeEventHandlers, createContext, debounce, ellipsis, getVar, hexToRgba, josa, multiLineEllipsis, queryString, useCombinedRefs, useControllableState, useSafeArea };
+declare const Grid: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
+    as?: react.ElementType;
+    inline?: boolean;
+    gap?: CSSPixelValue;
+    columns?: string | string[];
+    rows?: string | string[];
+    areas?: string;
+    flow?: "row" | "column" | "dense" | "row-dense" | "column-dense";
+    align?: react.CSSProperties["alignItems"];
+    justify?: react.CSSProperties["justifyContent"];
+} & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
+        as?: react.ElementType;
+        gridArea?: string;
+        gridColumn?: string | [string, string];
+        gridColumnStart?: string;
+        gridColumnEnd?: string;
+        gridRow?: string | [string, string];
+        gridRowStart?: string;
+        gridRowEnd?: string;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type GridProps = HTMLAttributes<HTMLDivElement> & {
+    as?: ElementType;
+    inline?: boolean;
+    gap?: CSSPixelValue;
+    columns?: string | string[];
+    rows?: string | string[];
+    areas?: string;
+    flow?: 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+};
+type GridItemProps = HTMLAttributes<HTMLDivElement> & {
+    as?: ElementType;
+    gridArea?: string;
+    gridColumn?: string | [string, string];
+    gridColumnStart?: string;
+    gridColumnEnd?: string;
+    gridRow?: string | [string, string];
+    gridRowStart?: string;
+    gridRowEnd?: string;
+};
+
+export { type AirLevel, Choose, type ChooseOtherwiseProps, type ChooseProps, type ChooseWhenProps, type DebouncedFunction, DomainFormat, Flex, type FlexProps, Format, Grid, type GridItemProps, type GridProps, type HexToRgbaProps, If, type IfProps, type JosaProps, type Mode, type MultiLineEllipsisProps, SafeArea, type SafeAreaCssValueProps, type SafeAreaProps, Spacing, type SpacingProps, type UseControllableStateParams, type UserLevel, Validate, type VariableType, type Wind, composeEventHandlers, createContext, debounce, ellipsis, getVar, hexToRgba, josa, multiLineEllipsis, queryString, useCombinedRefs, useControllableState, useSafeArea };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default, { ReactNode, FC, PropsWithChildren, HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, Ref } from 'react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as react from 'react';
+import react__default, { ReactNode, FC, PropsWithChildren, HTMLAttributes, CSSProperties, ComponentPropsWithoutRef, Ref, ElementType } from 'react';
 import * as _emotion_react from '@emotion/react';
 
 type ChooseWhenProps = {
@@ -13,7 +13,7 @@ type ChooseProps = {
 type ChooseOtherwiseProps = {
     children: ReactNode;
 };
-declare function Choose({ children }: ChooseProps): string | number | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
+declare function Choose({ children }: ChooseProps): string | number | Iterable<ReactNode> | _emotion_react_jsx_runtime.JSX.Element;
 declare namespace Choose {
     var When: FC<ChooseWhenProps>;
     var Otherwise: FC<ChooseOtherwiseProps>;
@@ -24,7 +24,7 @@ declare function composeEventHandlers<E>(originalEventHandler?: (event: E) => vo
 }): (event: E) => void;
 
 declare function createContext<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType): readonly [{
-    (props: PropsWithChildren<ContextValueType>): react_jsx_runtime.JSX.Element;
+    (props: PropsWithChildren<ContextValueType>): _emotion_react_jsx_runtime.JSX.Element;
     displayName: string;
 }, (consumerName: string) => NonNullable<ContextValueType>];
 
@@ -35,7 +35,7 @@ type IfProps = {
     condition: boolean;
     children: ReactNode;
 };
-declare function If(props: IfProps): react_jsx_runtime.JSX.Element | null;
+declare function If(props: IfProps): _emotion_react_jsx_runtime.JSX.Element | null;
 
 type CSSPixelValue = string | number;
 
@@ -48,7 +48,7 @@ type FlexProps = HTMLAttributes<HTMLDivElement> & {
     align?: Align;
     direction?: Direction;
 };
-declare const Flex: React.NamedExoticComponent<FlexProps>;
+declare const Flex: react.NamedExoticComponent<FlexProps>;
 
 type MultiLineEllipsisProps = {
     line: number;
@@ -98,7 +98,7 @@ type SpacingProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     direction?: AxisDirection;
     size: CSSPixelValue;
 };
-declare const Spacing: React.NamedExoticComponent<SpacingProps>;
+declare const Spacing: react.NamedExoticComponent<SpacingProps>;
 
 type SafeAreaCssValueProps = {
     top?: CSSPixelValue;
@@ -113,17 +113,17 @@ declare const useSafeArea: ({ top: T, bottom: B, left: L, right: R, }?: SafeArea
     right: string;
 };
 
-type SafeAreaProps<T extends React__default.ElementType = 'div'> = {
+type SafeAreaProps<T extends react__default.ElementType = 'div'> = {
     as?: T;
     children: ReactNode;
 } & ComponentPropsWithoutRef<T>;
 declare const SafeArea: {
-    <T extends React__default.ElementType = "div">({ as, children, ...props }: SafeAreaProps<T>): react_jsx_runtime.JSX.Element;
-    Top: React__default.NamedExoticComponent<Omit<Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> & {
+    <T extends react__default.ElementType = "div">({ as, children, ...props }: SafeAreaProps<T>): _emotion_react_jsx_runtime.JSX.Element;
+    Top: react__default.NamedExoticComponent<Omit<Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> & {
         direction?: "vertical" | "horizontal";
         size: CSSPixelValue;
     }, "size">>;
-    Bottom: React__default.NamedExoticComponent<Omit<Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> & {
+    Bottom: react__default.NamedExoticComponent<Omit<Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> & {
         direction?: "vertical" | "horizontal";
         size: CSSPixelValue;
     }, "size">>;
@@ -263,6 +263,51 @@ type UseControllableStateParams<T> = {
  * @description
  * Radix UI's useControllableState
  */
-declare const useControllableState: <T>({ prop, defaultProp, onChange, }: UseControllableStateParams<T>) => readonly [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
+declare const useControllableState: <T>({ prop, defaultProp, onChange, }: UseControllableStateParams<T>) => readonly [T | undefined, react.Dispatch<react.SetStateAction<T | undefined>>];
 
-export { type AirLevel, Choose, type ChooseOtherwiseProps, type ChooseProps, type ChooseWhenProps, type DebouncedFunction, DomainFormat, Flex, type FlexProps, Format, type HexToRgbaProps, If, type IfProps, type JosaProps, type Mode, type MultiLineEllipsisProps, SafeArea, type SafeAreaCssValueProps, type SafeAreaProps, Spacing, type SpacingProps, type UseControllableStateParams, type UserLevel, Validate, type VariableType, type Wind, composeEventHandlers, createContext, debounce, ellipsis, getVar, hexToRgba, josa, multiLineEllipsis, queryString, useCombinedRefs, useControllableState, useSafeArea };
+declare const Grid: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
+    as?: react.ElementType;
+    inline?: boolean;
+    gap?: CSSPixelValue;
+    columns?: string | string[];
+    rows?: string | string[];
+    areas?: string;
+    flow?: "row" | "column" | "dense" | "row-dense" | "column-dense";
+    align?: react.CSSProperties["alignItems"];
+    justify?: react.CSSProperties["justifyContent"];
+} & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & {
+        as?: react.ElementType;
+        gridArea?: string;
+        gridColumn?: string | [string, string];
+        gridColumnStart?: string;
+        gridColumnEnd?: string;
+        gridRow?: string | [string, string];
+        gridRowStart?: string;
+        gridRowEnd?: string;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type GridProps = HTMLAttributes<HTMLDivElement> & {
+    as?: ElementType;
+    inline?: boolean;
+    gap?: CSSPixelValue;
+    columns?: string | string[];
+    rows?: string | string[];
+    areas?: string;
+    flow?: 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+};
+type GridItemProps = HTMLAttributes<HTMLDivElement> & {
+    as?: ElementType;
+    gridArea?: string;
+    gridColumn?: string | [string, string];
+    gridColumnStart?: string;
+    gridColumnEnd?: string;
+    gridRow?: string | [string, string];
+    gridRowStart?: string;
+    gridRowEnd?: string;
+};
+
+export { type AirLevel, Choose, type ChooseOtherwiseProps, type ChooseProps, type ChooseWhenProps, type DebouncedFunction, DomainFormat, Flex, type FlexProps, Format, Grid, type GridItemProps, type GridProps, type HexToRgbaProps, If, type IfProps, type JosaProps, type Mode, type MultiLineEllipsisProps, SafeArea, type SafeAreaCssValueProps, type SafeAreaProps, Spacing, type SpacingProps, type UseControllableStateParams, type UserLevel, Validate, type VariableType, type Wind, composeEventHandlers, createContext, debounce, ellipsis, getVar, hexToRgba, josa, multiLineEllipsis, queryString, useCombinedRefs, useControllableState, useSafeArea };