@divayth/brick-ui 0.1.5 → 0.1.6

package/dist/lib/getResponsiveSize.d.ts

@@ -2,5 +2,5 @@ export type ResponsiveSize<T> = T | {
     mobile: T;
     desktop: T;
 };
-export declare const getResponsiveSize: <T extends string>(size: ResponsiveSize<T>, isMobile: boolean) => T;
+export declare const getResponsiveSize: <T extends string | number>(size: ResponsiveSize<T>, isMobile: boolean) => T;
 //# sourceMappingURL=getResponsiveSize.d.ts.map

package/dist/lib/getResponsiveSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getResponsiveSize.d.ts","sourceRoot":"","sources":["../../src/lib/getResponsiveSize.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,EAAE,CAAC,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9D,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAChD,MAAM,cAAc,CAAC,CAAC,CAAC,EACvB,UAAU,OAAO,KAChB,CACsE,CAAC"}
+{"version":3,"file":"getResponsiveSize.d.ts","sourceRoot":"","sources":["../../src/lib/getResponsiveSize.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,EAAE,CAAC,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9D,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,EACzD,MAAM,cAAc,CAAC,CAAC,CAAC,EACvB,UAAU,OAAO,KAChB,CACsE,CAAC"}

package/dist/ui/Grid/Grid.types.d.ts

@@ -1,9 +1,10 @@
 import type { ComponentProps } from "react";
 import type { AlignItemsType, JustifayContentType } from "../Flex/constants.js";
 import type { Size } from "../../lib/sizes.js";
+import type { ResponsiveSize } from "../../lib/getResponsiveSize.js";
 export type GridGap = Size | "none";
 export type ResponsiveValue<T> = T | Partial<Record<Size, T>>;
-export type GridItemSize = ResponsiveValue<number> | "fit" | "grow";
+export type GridItemSize = ResponsiveSize<number> | "fit" | "grow";
 export interface GridRootProps extends ComponentProps<"div"> {
     columns?: number;
     gap?: ResponsiveValue<GridGap>;

package/dist/ui/Grid/Grid.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC,cAAc,GAAG,MAAM,CAAC,CAAC;CAClD"}
+{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC,cAAc,GAAG,MAAM,CAAC,CAAC;CAClD"}

package/dist/ui/Grid/GridItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/GridItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAarD,eAAO,MAAM,QAAQ,GAAI,sEAStB,aAAa,gCAyBf,CAAC"}
+{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/GridItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAarD,eAAO,MAAM,QAAQ,GAAI,sEAStB,aAAa,gCA2Bf,CAAC"}

package/dist/ui/Grid/GridItem.js

@@ -1,48 +1,51 @@
-import { jsx as g } from "react/jsx-runtime";
-import p from "clsx";
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import v from "clsx";
+import { useProvider as x } from "../../app/Provider.js";
+import { getResponsiveSize as z } from "../../lib/getResponsiveSize.js";
 import { getResponsiveCssVariables as e } from "./utils.js";
 import o from "./Grid.module.css.js";
-const u = {
+const S = {
   auto: "auto",
   stretch: "stretch",
   center: "center",
   start: "flex-start",
   end: "flex-end"
-}, G = ({
-  size: r = "grow",
-  offset: s = 0,
-  order: m = 0,
-  align: a = "auto",
-  className: c,
-  style: d,
-  children: f,
-  ...n
+}, N = ({
+  size: s = "grow",
+  offset: m = 0,
+  order: n = 0,
+  align: c = "auto",
+  className: f,
+  style: a,
+  children: d,
+  ...l
 }) => {
-  const i = r === "fit", l = i ? 1 : r;
-  return /* @__PURE__ */ g(
+  const { isMobile: p } = x(), i = z(s, p), r = i === "fit", g = r ? 1 : i;
+  return /* @__PURE__ */ u(
     "div",
     {
-      ...n,
-      className: p(o.item, i && o.fit, c),
+      ...l,
+      className: v(o.item, r && o.fit, f),
       style: {
-        ...e("grid-item-size", l),
+        ...e("grid-item-size", g),
         ...e(
           "grid-item-offset",
-          s,
+          m,
           (t) => t === 0 ? "auto" : t + 1
         ),
-        ...e("grid-item-order", m),
+        ...e("grid-item-order", n),
         ...e(
           "grid-item-align",
-          a,
-          (t) => u[t]
+          c,
+          (t) => S[t]
         ),
-        ...d
+        ...a
       },
-      children: f
+      children: d
     }
   );
 };
 export {
-  G as GridItem
+  N as GridItem
 };

package/dist/ui/Grid/GridRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridRoot.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/GridRoot.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,iBAAiB,CAAC;AAgFzB,eAAO,MAAM,QAAQ,GAAI,2FAWtB,aAAa,gCA+Bf,CAAC"}
+{"version":3,"file":"GridRoot.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/GridRoot.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAgFpE,eAAO,MAAM,QAAQ,GAAI,2FAWtB,aAAa,gCA+Bf,CAAC"}

package/dist/ui/Grid/GridRoot.js

@@ -1,7 +1,7 @@
 import { jsx as h } from "react/jsx-runtime";
 import { Children as w, isValidElement as C, cloneElement as S } from "react";
 import b from "clsx";
-import { getResponsiveCssVariables as p, GRID_GAP_VALUES as d } from "./utils.js";
+import { getResponsiveCssVariables as f, GRID_GAP_VALUES as d } from "./utils.js";
 import { GridItem as z } from "./GridItem.js";
 import I from "./Grid.module.css.js";
 const v = {
@@ -14,7 +14,7 @@ const v = {
   center: "center",
   end: "flex-end",
   between: "space-between"
-}, g = (t) => t === "grow" || t === "fit" ? 0 : typeof t == "number" ? t : t?.md ?? 1, G = (t, a) => {
+}, g = (t) => t === "grow" || t === "fit" ? 0 : typeof t == "number" ? t : t?.desktop ?? 1, G = (t, a) => {
   const m = w.toArray(t), n = m.filter(
     (e) => C(e) && e.type === z
   );
@@ -23,7 +23,7 @@ const v = {
   const s = n.filter(
     ({ props: e }) => e.size === "grow"
   ).length, u = n.reduce(
-    (e, { props: f }) => e + g(f.size),
+    (e, { props: p }) => e + g(p.size),
     0
   ), o = Math.max(s, a - u), c = s > 0 ? o / s : 0, r = [], l = m.map((e) => !C(e) || e.type !== z ? e : (e.props.size === "fit" ? r.push("max-content") : e.props.size === "grow" ? r.push(`minmax(0, ${c}fr)`) : r.push(`minmax(0, ${g(e.props.size)}fr)`), S(e, { size: 1 })));
   return s === 0 && o > 0 && r.push(`minmax(0, ${o}fr)`), {
@@ -42,29 +42,29 @@ const v = {
   children: c,
   ...r
 }) => {
-  const l = Math.max(1, t), e = G(c, l), f = {
+  const l = Math.max(1, t), e = G(c, l), p = {
     "--grid-columns": l,
     "--grid-align": v[x],
     "--grid-justify": y[s],
     gridTemplateColumns: e.templateColumns,
-    ...p(
+    ...f(
       "grid-gap",
       a,
       (i) => d[i]
     ),
-    ...p(
+    ...f(
       "grid-row-gap",
       m,
       (i) => d[i]
     ),
-    ...p(
+    ...f(
       "grid-column-gap",
       n,
       (i) => d[i]
     ),
     ...o
   };
-  return /* @__PURE__ */ h("div", { ...r, className: b(I.root, u), style: f, children: e.children });
+  return /* @__PURE__ */ h("div", { ...r, className: b(I.root, u), style: p, children: e.children });
 };
 export {
   j as GridRoot

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divayth/brick-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React components for Brick UI",
   "type": "module",
   "files": [