@basiln/utils 0.1.13 → 0.1.14

package/dist/Grid/index.js

@@ -0,0 +1,214 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/index.ts
+var Grid_exports = {};
+__export(Grid_exports, {
+  Grid: () => Grid
+});
+module.exports = __toCommonJS(Grid_exports);
+
+// src/Grid/Grid.tsx
+var import_react3 = require("react");
+
+// 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;
+};
+
+// 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"]`
+};
+
+// src/Grid/styles.ts
+var import_react = require("@emotion/react");
+
+// src/getVar.ts
+function getVar(variable, defaultValue) {
+  if (defaultValue) {
+    return `var(${variable}, ${defaultValue})`;
+  }
+  return `var(${variable})`;
+}
+
+// src/Grid/styles.ts
+var gridCss = (0, import_react.css)({
+  gap: getVar(gridGapVar),
+  gridTemplateColumns: getVar(gridColumnsVar),
+  gridTemplateRows: getVar(gridRowsVar),
+  gridTemplateAreas: getVar(gridAreasVar),
+  gridAutoFlow: getVar(gridFlowVar),
+  alignItems: getVar(gridAlignVar),
+  justifyContent: getVar(gridJustifyVar)
+});
+var gridItemCss = (0, import_react.css)({
+  [`&${gridAreasAttribute.hasAreasSelector}`]: {
+    [`&${gridAreaAttribute.hasAreaSelector}`]: {
+      gridArea: getVar(gridItemAreaVar)
+    }
+  },
+  [`&${gridAreaAttribute.noAreaSelector}`]: {
+    gridColumnStart: getVar(gridItemColumnStartVar),
+    gridColumnEnd: getVar(gridItemColumnEndVar),
+    gridRowStart: getVar(gridItemRowStartVar),
+    gridRowEnd: getVar(gridItemRowEndVar)
+  }
+});
+
+// src/coerceCssPixelValue.ts
+function coerceCssPixelValue(value) {
+  return typeof value === "string" ? value : `${value}px`;
+}
+
+// src/createContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+function createContext(rootComponentName, defaultContext) {
+  const Context = (0, import_react2.createContext)(defaultContext);
+  function Provider(props) {
+    const { children, ...contextValues } = props;
+    const value = (0, import_react2.useMemo)(() => contextValues, [contextValues]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
+  }
+  function useContext(consumerName) {
+    const context = (0, import_react2.useContext)(Context);
+    if (context == null) {
+      throw new Error(`${consumerName}\uC740 ${rootComponentName}\uD558\uC704\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.`);
+    }
+    return context;
+  }
+  Provider.displayName = `${rootComponentName}Provider`;
+  return [Provider, useContext];
+}
+
+// src/Grid/context.ts
+var [GridProvider, useGridContext] = createContext("Grid");
+
+// src/Grid/Grid.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+var GridImpl = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsx)(GridProvider, { areas, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, style: gridStyles, css: gridCss, ...restProps, children }) });
+});
+var GridItem = (0, import_react3.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__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      ref,
+      css: gridItemCss,
+      style: gridItemStyles,
+      ...gridAreasAttribute.set(areas),
+      ...gridAreaAttribute.set(gridArea),
+      ...restProps,
+      children
+    }
+  );
+});
+var Grid = Object.assign(GridImpl, {
+  Item: GridItem
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Grid
+});
+//# sourceMappingURL=index.js.map

package/dist/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/index.ts","../../src/Grid/Grid.tsx","../../src/Grid/utils.ts","../../src/Grid/constants.ts","../../src/Grid/styles.ts","../../src/getVar.ts","../../src/coerceCssPixelValue.ts","../../src/createContext.tsx","../../src/Grid/context.ts"],"sourcesContent":["export * from './Grid';\nexport * from './types';\n","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","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","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","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","export type VariableType = `--${string}`;\n\nexport function getVar(variable: VariableType, defaultValue?: string) {\n  if (defaultValue) {\n    return `var(${variable}, ${defaultValue})`;\n  }\n\n  return `var(${variable})`;\n}\n","export type CSSPixelValue = string | number;\n\nexport function coerceCssPixelValue(value: CSSPixelValue): string {\n  return typeof value === 'string' ? value : `${value}px`;\n}\n","import {\n  useMemo,\n  createContext as createContextRaw,\n  useContext as useContextRaw,\n  type PropsWithChildren,\n} from 'react';\n\nexport function createContext<ContextValueType extends object | null>(\n  rootComponentName: string,\n  defaultContext?: ContextValueType\n) {\n  const Context = createContextRaw<ContextValueType | undefined>(defaultContext);\n\n  function Provider(props: PropsWithChildren<ContextValueType>) {\n    const { children, ...contextValues } = props;\n\n    const value = useMemo(() => contextValues, [contextValues]) as ContextValueType;\n\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  }\n\n  function useContext(consumerName: string) {\n    const context = useContextRaw(Context);\n    if (context == null) {\n      throw new Error(`${consumerName}은 ${rootComponentName}하위에서 사용해야 합니다.`);\n    }\n\n    return context;\n  }\n\n  Provider.displayName = `${rootComponentName}Provider`;\n  return [Provider, useContext] as const;\n}\n","import { createContext } from '../createContext';\n\nexport type GridContext = {\n  areas?: string;\n};\n\nexport const [GridProvider, useGridContext] = createContext<GridContext>('Grid');\n"],"mappings":"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","names":["import_react","import_react","createContextRaw","useContextRaw","import_jsx_runtime"]}

package/dist/Grid/index.mjs

@@ -0,0 +1,16 @@
+import "../chunk-63N6GZOJ.mjs";
+import "../chunk-2VPHYP7Y.mjs";
+import {
+  Grid
+} from "../chunk-IA3Y652S.mjs";
+import "../chunk-ODQE5YIS.mjs";
+import "../chunk-6ZISNSYZ.mjs";
+import "../chunk-KIWMNTMS.mjs";
+import "../chunk-P3MUNLIM.mjs";
+import "../chunk-6S7STXJR.mjs";
+import "../chunk-Z4UXDD2C.mjs";
+import "../chunk-OQ3L65JI.mjs";
+export {
+  Grid
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Grid/index.mjs.map

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

package/dist/Grid/styles.js

@@ -0,0 +1,105 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/styles.ts
+var styles_exports = {};
+__export(styles_exports, {
+  gridCss: () => gridCss,
+  gridItemCss: () => gridItemCss
+});
+module.exports = __toCommonJS(styles_exports);
+var import_react = require("@emotion/react");
+
+// src/Grid/utils.ts
+var packageName = "--utils";
+var createCssVar = (key, value) => {
+  const suffix = value ? `-${value}` : "";
+  return `${packageName}-${key}${suffix}`;
+};
+
+// 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"]`
+};
+
+// src/getVar.ts
+function getVar(variable, defaultValue) {
+  if (defaultValue) {
+    return `var(${variable}, ${defaultValue})`;
+  }
+  return `var(${variable})`;
+}
+
+// src/Grid/styles.ts
+var gridCss = (0, import_react.css)({
+  gap: getVar(gridGapVar),
+  gridTemplateColumns: getVar(gridColumnsVar),
+  gridTemplateRows: getVar(gridRowsVar),
+  gridTemplateAreas: getVar(gridAreasVar),
+  gridAutoFlow: getVar(gridFlowVar),
+  alignItems: getVar(gridAlignVar),
+  justifyContent: getVar(gridJustifyVar)
+});
+var gridItemCss = (0, import_react.css)({
+  [`&${gridAreasAttribute.hasAreasSelector}`]: {
+    [`&${gridAreaAttribute.hasAreaSelector}`]: {
+      gridArea: getVar(gridItemAreaVar)
+    }
+  },
+  [`&${gridAreaAttribute.noAreaSelector}`]: {
+    gridColumnStart: getVar(gridItemColumnStartVar),
+    gridColumnEnd: getVar(gridItemColumnEndVar),
+    gridRowStart: getVar(gridItemRowStartVar),
+    gridRowEnd: getVar(gridItemRowEndVar)
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  gridCss,
+  gridItemCss
+});
+//# sourceMappingURL=styles.js.map

package/dist/Grid/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/styles.ts","../../src/Grid/utils.ts","../../src/Grid/constants.ts","../../src/getVar.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","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","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","export type VariableType = `--${string}`;\n\nexport function getVar(variable: VariableType, defaultValue?: string) {\n  if (defaultValue) {\n    return `var(${variable}, ${defaultValue})`;\n  }\n\n  return `var(${variable})`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoB;;;ACApB,IAAM,cAAc;AAMb,IAAM,eAAe,CAC1B,KACA,UACiB;AACjB,QAAM,SAAS,QAAQ,IAAI,KAAK,KAAK;AACrC,SAAO,GAAG,WAAW,IAAI,GAAG,GAAG,MAAM;AACvC;;;ACVA,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;;;ACtCO,SAAS,OAAO,UAAwB,cAAuB;AACpE,MAAI,cAAc;AAChB,WAAO,OAAO,QAAQ,KAAK,YAAY;AAAA,EACzC;AAEA,SAAO,OAAO,QAAQ;AACxB;;;AHYO,IAAM,cAAU,kBAAI;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,kBAAc,kBAAI;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/Grid/styles.mjs

@@ -0,0 +1,12 @@
+import {
+  gridCss,
+  gridItemCss
+} from "../chunk-6ZISNSYZ.mjs";
+import "../chunk-KIWMNTMS.mjs";
+import "../chunk-P3MUNLIM.mjs";
+import "../chunk-Z4UXDD2C.mjs";
+export {
+  gridCss,
+  gridItemCss
+};
+//# sourceMappingURL=styles.mjs.map

package/dist/Grid/styles.mjs.map

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

package/dist/Grid/types.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/dist/Grid/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/types.ts"],"sourcesContent":["import type { ElementType, CSSProperties, HTMLAttributes } from 'react';\n\nimport type { CSSPixelValue } from '../coerceCssPixelValue';\n\nexport type GridProps = HTMLAttributes<HTMLDivElement> & {\n  as?: ElementType;\n  inline?: boolean;\n  gap?: CSSPixelValue;\n  columns?: string | string[];\n  rows?: string | string[];\n  areas?: string;\n  flow?: 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';\n  align?: CSSProperties['alignItems'];\n  justify?: CSSProperties['justifyContent'];\n};\n\nexport type GridItemProps = HTMLAttributes<HTMLDivElement> & {\n  as?: ElementType;\n  gridArea?: string;\n  gridColumn?: string | [string, string];\n  gridColumnStart?: string;\n  gridColumnEnd?: string;\n  gridRow?: string | [string, string];\n  gridRowStart?: string;\n  gridRowEnd?: string;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/Grid/types.mjs

@@ -0,0 +1,2 @@
+import "../chunk-2VPHYP7Y.mjs";
+//# sourceMappingURL=types.mjs.map

package/dist/Grid/types.mjs.map

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

package/dist/Grid/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Grid/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  createCssVar: () => createCssVar,
+  formatGridFlow: () => formatGridFlow
+});
+module.exports = __toCommonJS(utils_exports);
+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;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCssVar,
+  formatGridFlow
+});
+//# sourceMappingURL=utils.js.map

package/dist/Grid/utils.js.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;AAAA;AAAA;AAAA;AAAA;AAAA;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/Grid/utils.mjs

@@ -0,0 +1,9 @@
+import {
+  createCssVar,
+  formatGridFlow
+} from "../chunk-P3MUNLIM.mjs";
+export {
+  createCssVar,
+  formatGridFlow
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/Grid/utils.mjs.map

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

package/dist/If.js

@@ -23,7 +23,7 @@ __export(If_exports, {
   If: () => If
 });
 module.exports = __toCommonJS(If_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 function If(props) {
   const { condition, children } = props;
   return condition ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }) : null;

package/dist/If.mjs

@@ -1,6 +1,6 @@
 import {
   If
-} from "./chunk-UFRXNT2I.mjs";
+} from "./chunk-YGI66TDT.mjs";
 export {
   If
 };

package/dist/SafeArea.js

@@ -45,7 +45,7 @@ function coerceCssPixelValue(value) {
 }
 
 // src/Spacing.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 var Spacing = (0, import_react.memo)(function Spacing2(props) {
   const { direction = "vertical", size, ...restProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpacingContainer, { $direction: direction, $size: size, ...restProps });
@@ -71,7 +71,7 @@ var useSafeArea = ({
 };
 
 // src/SafeArea.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 var SafeArea = ({
   as,
   children,

package/dist/SafeArea.mjs

@@ -1,8 +1,8 @@
 import {
   SafeArea
-} from "./chunk-75ILZSEA.mjs";
+} from "./chunk-A4GYF5EN.mjs";
 import "./chunk-ANMBV2U3.mjs";
-import "./chunk-YQMA54XQ.mjs";
+import "./chunk-OOKIDH3F.mjs";
 import "./chunk-OQ3L65JI.mjs";
 export {
   SafeArea

package/dist/Spacing.js

@@ -42,7 +42,7 @@ function coerceCssPixelValue(value) {
 }
 
 // src/Spacing.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 var Spacing = (0, import_react.memo)(function Spacing2(props) {
   const { direction = "vertical", size, ...restProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpacingContainer, { $direction: direction, $size: size, ...restProps });

package/dist/Spacing.mjs

@@ -1,6 +1,6 @@
 import {
   Spacing
-} from "./chunk-YQMA54XQ.mjs";
+} from "./chunk-OOKIDH3F.mjs";
 import "./chunk-OQ3L65JI.mjs";
 export {
   Spacing

package/dist/chunk-2VPHYP7Y.mjs

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

package/dist/chunk-2VPHYP7Y.mjs.map

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

package/dist/{chunk-KFMJD3YK.mjs → chunk-5X4P77VE.mjs}

@@ -1,6 +1,6 @@
 // src/Choose.tsx
 import { isValidElement, Children } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "@emotion/react/jsx-runtime";
 function Choose({ children }) {
   const validChildren = Children.toArray(children);
   const matchingChild = validChildren.find(
@@ -23,4 +23,4 @@ Choose.Otherwise = ChooseOtherwise;
 export {
   Choose
 };
-//# sourceMappingURL=chunk-KFMJD3YK.mjs.map
+//# sourceMappingURL=chunk-5X4P77VE.mjs.map

package/dist/chunk-63N6GZOJ.mjs

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

package/dist/chunk-63N6GZOJ.mjs.map

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

package/dist/{chunk-FEPXSL77.mjs → chunk-6S7STXJR.mjs}

@@ -4,7 +4,7 @@ import {
   createContext as createContextRaw,
   useContext as useContextRaw
 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx } from "@emotion/react/jsx-runtime";
 function createContext(rootComponentName, defaultContext) {
   const Context = createContextRaw(defaultContext);
   function Provider(props) {
@@ -26,4 +26,4 @@ function createContext(rootComponentName, defaultContext) {
 export {
   createContext
 };
-//# sourceMappingURL=chunk-FEPXSL77.mjs.map
+//# sourceMappingURL=chunk-6S7STXJR.mjs.map

package/dist/chunk-6ZISNSYZ.mjs

@@ -0,0 +1,50 @@
+import {
+  gridAlignVar,
+  gridAreaAttribute,
+  gridAreasAttribute,
+  gridAreasVar,
+  gridColumnsVar,
+  gridFlowVar,
+  gridGapVar,
+  gridItemAreaVar,
+  gridItemColumnEndVar,
+  gridItemColumnStartVar,
+  gridItemRowEndVar,
+  gridItemRowStartVar,
+  gridJustifyVar,
+  gridRowsVar
+} from "./chunk-KIWMNTMS.mjs";
+import {
+  getVar
+} from "./chunk-Z4UXDD2C.mjs";
+
+// src/Grid/styles.ts
+import { css } from "@emotion/react";
+var gridCss = css({
+  gap: getVar(gridGapVar),
+  gridTemplateColumns: getVar(gridColumnsVar),
+  gridTemplateRows: getVar(gridRowsVar),
+  gridTemplateAreas: getVar(gridAreasVar),
+  gridAutoFlow: getVar(gridFlowVar),
+  alignItems: getVar(gridAlignVar),
+  justifyContent: getVar(gridJustifyVar)
+});
+var gridItemCss = css({
+  [`&${gridAreasAttribute.hasAreasSelector}`]: {
+    [`&${gridAreaAttribute.hasAreaSelector}`]: {
+      gridArea: getVar(gridItemAreaVar)
+    }
+  },
+  [`&${gridAreaAttribute.noAreaSelector}`]: {
+    gridColumnStart: getVar(gridItemColumnStartVar),
+    gridColumnEnd: getVar(gridItemColumnEndVar),
+    gridRowStart: getVar(gridItemRowStartVar),
+    gridRowEnd: getVar(gridItemRowEndVar)
+  }
+});
+
+export {
+  gridCss,
+  gridItemCss
+};
+//# sourceMappingURL=chunk-6ZISNSYZ.mjs.map