@usefragments/ui 1.5.4 → 1.7.0

package/dist/components/Form/Form.module.scss.cjs

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_qkhxq_1";
+const root = "_root_feksg_1";
+const actions = "_actions_feksg_7";
 const styles = {
-  root
+  root,
+  actions
 };
+exports.actions = actions;
 exports.default = styles;
 exports.root = root;

package/dist/components/Form/Form.module.scss.js

@@ -1,8 +1,11 @@
-const root = "_root_qkhxq_1";
+const root = "_root_feksg_1";
+const actions = "_actions_feksg_7";
 const styles = {
-  root
+  root,
+  actions
 };
 export {
+  actions,
   styles as default,
   root
 };

package/dist/components/Form/index.cjs

@@ -28,7 +28,12 @@ function FormRoot({
     }
   );
 }
+function FormActions({ children, className, ...htmlProps }) {
+  const classes = [Form_module.default.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
+}
 const Form = Object.assign(FormRoot, {
-  Root: FormRoot
+  Root: FormRoot,
+  Actions: FormActions
 });
 exports.Form = Form;

package/dist/components/Form/index.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+import * as React from "react";
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
     children: React.ReactNode;
     errors?: Record<string, string | string[]>;
     /** Standard form submit handler */
@@ -7,11 +7,16 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
     /** @deprecated Use onSubmit */
     onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
     onClearErrors?: (name: string) => void;
-    validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+    validationMode?: "onSubmit" | "onBlur" | "onChange";
+}
+export interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
 }
 declare function FormRoot({ children, errors, onSubmit, onFormSubmit, onClearErrors: _onClearErrors, validationMode, className, ...htmlProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+declare function FormActions({ children, className, ...htmlProps }: FormActionsProps): import("react/jsx-runtime").JSX.Element;
 export declare const Form: typeof FormRoot & {
     Root: typeof FormRoot;
+    Actions: typeof FormActions;
 };
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC3C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,+BAA+B;IAC/B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;CACrD;AAMD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,aAAa,EAAE,cAAc,EAC7B,cAAc,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAeX;AAED,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC3C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,+BAA+B;IAC/B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;CACrD;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,aAAa,EAAE,cAAc,EAC7B,cAAc,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAeX;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,2CAQ3E;AAED,eAAO,MAAM,IAAI;;;CAGf,CAAC"}

package/dist/components/Form/index.js

@@ -26,8 +26,13 @@ function FormRoot({
     }
   );
 }
+function FormActions({ children, className, ...htmlProps }) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
 const Form = Object.assign(FormRoot, {
-  Root: FormRoot
+  Root: FormRoot,
+  Actions: FormActions
 });
 export {
   Form

package/dist/components/Grid/Grid.module.scss.cjs

@@ -1,65 +1,59 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const grid = "_grid_5ohx1_1";
-const columns1 = "_columns1_5ohx1_6";
-const columns2 = "_columns2_5ohx1_10";
-const columns3 = "_columns3_5ohx1_14";
-const columns4 = "_columns4_5ohx1_18";
-const columns5 = "_columns5_5ohx1_22";
-const columns6 = "_columns6_5ohx1_26";
-const columns7 = "_columns7_5ohx1_30";
-const columns8 = "_columns8_5ohx1_34";
-const columns9 = "_columns9_5ohx1_38";
-const columns10 = "_columns10_5ohx1_42";
-const columns11 = "_columns11_5ohx1_46";
-const columns12 = "_columns12_5ohx1_50";
-const columnsAuto = "_columnsAuto_5ohx1_54";
-const columnsResponsive = "_columnsResponsive_5ohx1_58";
-const gapNone = "_gapNone_5ohx1_83";
-const gapXs = "_gapXs_5ohx1_87";
-const gapSm = "_gapSm_5ohx1_91";
-const gapMd = "_gapMd_5ohx1_95";
-const gapLg = "_gapLg_5ohx1_99";
-const gapXl = "_gapXl_5ohx1_103";
-const paddingNone = "_paddingNone_5ohx1_107";
-const paddingSm = "_paddingSm_5ohx1_111";
-const paddingMd = "_paddingMd_5ohx1_115";
-const paddingLg = "_paddingLg_5ohx1_119";
-const alignStart = "_alignStart_5ohx1_123";
-const alignCenter = "_alignCenter_5ohx1_127";
-const alignEnd = "_alignEnd_5ohx1_131";
-const alignStretch = "_alignStretch_5ohx1_135";
-const justifyStart = "_justifyStart_5ohx1_139";
-const justifyCenter = "_justifyCenter_5ohx1_143";
-const justifyEnd = "_justifyEnd_5ohx1_147";
-const justifyStretch = "_justifyStretch_5ohx1_151";
-const item = "_item_5ohx1_155";
-const colSpan1 = "_colSpan1_5ohx1_159";
-const colSpan2 = "_colSpan2_5ohx1_163";
-const colSpan3 = "_colSpan3_5ohx1_167";
-const colSpan4 = "_colSpan4_5ohx1_171";
-const colSpan5 = "_colSpan5_5ohx1_175";
-const colSpan6 = "_colSpan6_5ohx1_179";
-const colSpan7 = "_colSpan7_5ohx1_183";
-const colSpan8 = "_colSpan8_5ohx1_187";
-const colSpan9 = "_colSpan9_5ohx1_191";
-const colSpan10 = "_colSpan10_5ohx1_195";
-const colSpan11 = "_colSpan11_5ohx1_199";
-const colSpan12 = "_colSpan12_5ohx1_203";
-const colSpanFull = "_colSpanFull_5ohx1_207";
-const rowSpan1 = "_rowSpan1_5ohx1_211";
-const rowSpan2 = "_rowSpan2_5ohx1_215";
-const rowSpan3 = "_rowSpan3_5ohx1_219";
-const rowSpan4 = "_rowSpan4_5ohx1_223";
-const rowSpan5 = "_rowSpan5_5ohx1_227";
-const rowSpan6 = "_rowSpan6_5ohx1_231";
-const selfAlignStart = "_selfAlignStart_5ohx1_235";
-const selfAlignCenter = "_selfAlignCenter_5ohx1_239";
-const selfAlignEnd = "_selfAlignEnd_5ohx1_243";
-const selfAlignStretch = "_selfAlignStretch_5ohx1_247";
-const subgridRows = "_subgridRows_5ohx1_251";
-const subgridColumns = "_subgridColumns_5ohx1_256";
-const subgridBoth = "_subgridBoth_5ohx1_261";
+const grid = "_grid_1xtpg_1";
+const columns1 = "_columns1_1xtpg_7";
+const columns2 = "_columns2_1xtpg_11";
+const columns3 = "_columns3_1xtpg_15";
+const columns4 = "_columns4_1xtpg_19";
+const columns5 = "_columns5_1xtpg_23";
+const columns6 = "_columns6_1xtpg_27";
+const columns7 = "_columns7_1xtpg_31";
+const columns8 = "_columns8_1xtpg_35";
+const columns9 = "_columns9_1xtpg_39";
+const columns10 = "_columns10_1xtpg_43";
+const columns11 = "_columns11_1xtpg_47";
+const columns12 = "_columns12_1xtpg_51";
+const columnsAuto = "_columnsAuto_1xtpg_55";
+const columnsResponsive = "_columnsResponsive_1xtpg_59";
+const paddingNone = "_paddingNone_1xtpg_93";
+const paddingSm = "_paddingSm_1xtpg_97";
+const paddingMd = "_paddingMd_1xtpg_101";
+const paddingLg = "_paddingLg_1xtpg_105";
+const alignStart = "_alignStart_1xtpg_109";
+const alignCenter = "_alignCenter_1xtpg_113";
+const alignEnd = "_alignEnd_1xtpg_117";
+const alignStretch = "_alignStretch_1xtpg_121";
+const justifyStart = "_justifyStart_1xtpg_125";
+const justifyCenter = "_justifyCenter_1xtpg_129";
+const justifyEnd = "_justifyEnd_1xtpg_133";
+const justifyStretch = "_justifyStretch_1xtpg_137";
+const item = "_item_1xtpg_141";
+const colSpan1 = "_colSpan1_1xtpg_145";
+const colSpan2 = "_colSpan2_1xtpg_149";
+const colSpan3 = "_colSpan3_1xtpg_153";
+const colSpan4 = "_colSpan4_1xtpg_157";
+const colSpan5 = "_colSpan5_1xtpg_161";
+const colSpan6 = "_colSpan6_1xtpg_165";
+const colSpan7 = "_colSpan7_1xtpg_169";
+const colSpan8 = "_colSpan8_1xtpg_173";
+const colSpan9 = "_colSpan9_1xtpg_177";
+const colSpan10 = "_colSpan10_1xtpg_181";
+const colSpan11 = "_colSpan11_1xtpg_185";
+const colSpan12 = "_colSpan12_1xtpg_189";
+const colSpanFull = "_colSpanFull_1xtpg_193";
+const rowSpan1 = "_rowSpan1_1xtpg_197";
+const rowSpan2 = "_rowSpan2_1xtpg_201";
+const rowSpan3 = "_rowSpan3_1xtpg_205";
+const rowSpan4 = "_rowSpan4_1xtpg_209";
+const rowSpan5 = "_rowSpan5_1xtpg_213";
+const rowSpan6 = "_rowSpan6_1xtpg_217";
+const selfAlignStart = "_selfAlignStart_1xtpg_221";
+const selfAlignCenter = "_selfAlignCenter_1xtpg_225";
+const selfAlignEnd = "_selfAlignEnd_1xtpg_229";
+const selfAlignStretch = "_selfAlignStretch_1xtpg_233";
+const subgridRows = "_subgridRows_1xtpg_237";
+const subgridColumns = "_subgridColumns_1xtpg_242";
+const subgridBoth = "_subgridBoth_1xtpg_247";
 const styles = {
   grid,
   columns1,
@@ -76,12 +70,6 @@ const styles = {
   columns12,
   columnsAuto,
   columnsResponsive,
-  gapNone,
-  gapXs,
-  gapSm,
-  gapMd,
-  gapLg,
-  gapXl,
   paddingNone,
   paddingSm,
   paddingMd,
@@ -154,12 +142,6 @@ exports.columns9 = columns9;
 exports.columnsAuto = columnsAuto;
 exports.columnsResponsive = columnsResponsive;
 exports.default = styles;
-exports.gapLg = gapLg;
-exports.gapMd = gapMd;
-exports.gapNone = gapNone;
-exports.gapSm = gapSm;
-exports.gapXl = gapXl;
-exports.gapXs = gapXs;
 exports.grid = grid;
 exports.item = item;
 exports.justifyCenter = justifyCenter;

package/dist/components/Grid/Grid.module.scss.js

@@ -1,63 +1,57 @@
-const grid = "_grid_5ohx1_1";
-const columns1 = "_columns1_5ohx1_6";
-const columns2 = "_columns2_5ohx1_10";
-const columns3 = "_columns3_5ohx1_14";
-const columns4 = "_columns4_5ohx1_18";
-const columns5 = "_columns5_5ohx1_22";
-const columns6 = "_columns6_5ohx1_26";
-const columns7 = "_columns7_5ohx1_30";
-const columns8 = "_columns8_5ohx1_34";
-const columns9 = "_columns9_5ohx1_38";
-const columns10 = "_columns10_5ohx1_42";
-const columns11 = "_columns11_5ohx1_46";
-const columns12 = "_columns12_5ohx1_50";
-const columnsAuto = "_columnsAuto_5ohx1_54";
-const columnsResponsive = "_columnsResponsive_5ohx1_58";
-const gapNone = "_gapNone_5ohx1_83";
-const gapXs = "_gapXs_5ohx1_87";
-const gapSm = "_gapSm_5ohx1_91";
-const gapMd = "_gapMd_5ohx1_95";
-const gapLg = "_gapLg_5ohx1_99";
-const gapXl = "_gapXl_5ohx1_103";
-const paddingNone = "_paddingNone_5ohx1_107";
-const paddingSm = "_paddingSm_5ohx1_111";
-const paddingMd = "_paddingMd_5ohx1_115";
-const paddingLg = "_paddingLg_5ohx1_119";
-const alignStart = "_alignStart_5ohx1_123";
-const alignCenter = "_alignCenter_5ohx1_127";
-const alignEnd = "_alignEnd_5ohx1_131";
-const alignStretch = "_alignStretch_5ohx1_135";
-const justifyStart = "_justifyStart_5ohx1_139";
-const justifyCenter = "_justifyCenter_5ohx1_143";
-const justifyEnd = "_justifyEnd_5ohx1_147";
-const justifyStretch = "_justifyStretch_5ohx1_151";
-const item = "_item_5ohx1_155";
-const colSpan1 = "_colSpan1_5ohx1_159";
-const colSpan2 = "_colSpan2_5ohx1_163";
-const colSpan3 = "_colSpan3_5ohx1_167";
-const colSpan4 = "_colSpan4_5ohx1_171";
-const colSpan5 = "_colSpan5_5ohx1_175";
-const colSpan6 = "_colSpan6_5ohx1_179";
-const colSpan7 = "_colSpan7_5ohx1_183";
-const colSpan8 = "_colSpan8_5ohx1_187";
-const colSpan9 = "_colSpan9_5ohx1_191";
-const colSpan10 = "_colSpan10_5ohx1_195";
-const colSpan11 = "_colSpan11_5ohx1_199";
-const colSpan12 = "_colSpan12_5ohx1_203";
-const colSpanFull = "_colSpanFull_5ohx1_207";
-const rowSpan1 = "_rowSpan1_5ohx1_211";
-const rowSpan2 = "_rowSpan2_5ohx1_215";
-const rowSpan3 = "_rowSpan3_5ohx1_219";
-const rowSpan4 = "_rowSpan4_5ohx1_223";
-const rowSpan5 = "_rowSpan5_5ohx1_227";
-const rowSpan6 = "_rowSpan6_5ohx1_231";
-const selfAlignStart = "_selfAlignStart_5ohx1_235";
-const selfAlignCenter = "_selfAlignCenter_5ohx1_239";
-const selfAlignEnd = "_selfAlignEnd_5ohx1_243";
-const selfAlignStretch = "_selfAlignStretch_5ohx1_247";
-const subgridRows = "_subgridRows_5ohx1_251";
-const subgridColumns = "_subgridColumns_5ohx1_256";
-const subgridBoth = "_subgridBoth_5ohx1_261";
+const grid = "_grid_1xtpg_1";
+const columns1 = "_columns1_1xtpg_7";
+const columns2 = "_columns2_1xtpg_11";
+const columns3 = "_columns3_1xtpg_15";
+const columns4 = "_columns4_1xtpg_19";
+const columns5 = "_columns5_1xtpg_23";
+const columns6 = "_columns6_1xtpg_27";
+const columns7 = "_columns7_1xtpg_31";
+const columns8 = "_columns8_1xtpg_35";
+const columns9 = "_columns9_1xtpg_39";
+const columns10 = "_columns10_1xtpg_43";
+const columns11 = "_columns11_1xtpg_47";
+const columns12 = "_columns12_1xtpg_51";
+const columnsAuto = "_columnsAuto_1xtpg_55";
+const columnsResponsive = "_columnsResponsive_1xtpg_59";
+const paddingNone = "_paddingNone_1xtpg_93";
+const paddingSm = "_paddingSm_1xtpg_97";
+const paddingMd = "_paddingMd_1xtpg_101";
+const paddingLg = "_paddingLg_1xtpg_105";
+const alignStart = "_alignStart_1xtpg_109";
+const alignCenter = "_alignCenter_1xtpg_113";
+const alignEnd = "_alignEnd_1xtpg_117";
+const alignStretch = "_alignStretch_1xtpg_121";
+const justifyStart = "_justifyStart_1xtpg_125";
+const justifyCenter = "_justifyCenter_1xtpg_129";
+const justifyEnd = "_justifyEnd_1xtpg_133";
+const justifyStretch = "_justifyStretch_1xtpg_137";
+const item = "_item_1xtpg_141";
+const colSpan1 = "_colSpan1_1xtpg_145";
+const colSpan2 = "_colSpan2_1xtpg_149";
+const colSpan3 = "_colSpan3_1xtpg_153";
+const colSpan4 = "_colSpan4_1xtpg_157";
+const colSpan5 = "_colSpan5_1xtpg_161";
+const colSpan6 = "_colSpan6_1xtpg_165";
+const colSpan7 = "_colSpan7_1xtpg_169";
+const colSpan8 = "_colSpan8_1xtpg_173";
+const colSpan9 = "_colSpan9_1xtpg_177";
+const colSpan10 = "_colSpan10_1xtpg_181";
+const colSpan11 = "_colSpan11_1xtpg_185";
+const colSpan12 = "_colSpan12_1xtpg_189";
+const colSpanFull = "_colSpanFull_1xtpg_193";
+const rowSpan1 = "_rowSpan1_1xtpg_197";
+const rowSpan2 = "_rowSpan2_1xtpg_201";
+const rowSpan3 = "_rowSpan3_1xtpg_205";
+const rowSpan4 = "_rowSpan4_1xtpg_209";
+const rowSpan5 = "_rowSpan5_1xtpg_213";
+const rowSpan6 = "_rowSpan6_1xtpg_217";
+const selfAlignStart = "_selfAlignStart_1xtpg_221";
+const selfAlignCenter = "_selfAlignCenter_1xtpg_225";
+const selfAlignEnd = "_selfAlignEnd_1xtpg_229";
+const selfAlignStretch = "_selfAlignStretch_1xtpg_233";
+const subgridRows = "_subgridRows_1xtpg_237";
+const subgridColumns = "_subgridColumns_1xtpg_242";
+const subgridBoth = "_subgridBoth_1xtpg_247";
 const styles = {
   grid,
   columns1,
@@ -74,12 +68,6 @@ const styles = {
   columns12,
   columnsAuto,
   columnsResponsive,
-  gapNone,
-  gapXs,
-  gapSm,
-  gapMd,
-  gapLg,
-  gapXl,
   paddingNone,
   paddingSm,
   paddingMd,
@@ -153,12 +141,6 @@ export {
   columnsAuto,
   columnsResponsive,
   styles as default,
-  gapLg,
-  gapMd,
-  gapNone,
-  gapSm,
-  gapXl,
-  gapXs,
   grid,
   item,
   justifyCenter,

package/dist/components/Grid/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const layoutSpacing = require("../../utils/layout-spacing.cjs");
 const Grid_module = require("./Grid.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -23,96 +24,75 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 function isResponsiveColumns(columns) {
   return typeof columns === "object" && columns !== null;
 }
-const gapClasses = {
-  none: Grid_module.default.gapNone,
-  xs: Grid_module.default.gapXs,
-  sm: Grid_module.default.gapSm,
-  md: Grid_module.default.gapMd,
-  lg: Grid_module.default.gapLg,
-  xl: Grid_module.default.gapXl
-};
 const paddingClasses = {
   none: Grid_module.default.paddingNone,
   sm: Grid_module.default.paddingSm,
   md: Grid_module.default.paddingMd,
   lg: Grid_module.default.paddingLg
 };
-const Grid = React__namespace.forwardRef(
-  function Grid2({
-    children,
-    columns = 1,
-    minChildWidth,
-    gap = "md",
-    alignItems,
-    justifyItems,
-    padding = "none",
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    let columnsClass;
-    let inlineStyle;
-    if (columns === "auto") {
-      columnsClass = Grid_module.default.columnsAuto;
-      if (minChildWidth) {
-        inlineStyle = { "--fui-grid-min-child-width": minChildWidth };
-      }
-    } else if (isResponsiveColumns(columns)) {
-      columnsClass = Grid_module.default.columnsResponsive;
-      const vars = {};
-      if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
-      if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
-      if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
-      if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
-      if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
-      inlineStyle = vars;
-    } else {
-      columnsClass = Grid_module.default[`columns${columns}`];
+const Grid = React__namespace.forwardRef(function Grid2({
+  children,
+  columns = 1,
+  minChildWidth,
+  gap = "md",
+  alignItems,
+  justifyItems,
+  padding = "none",
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  let columnsClass;
+  let inlineStyle;
+  if (columns === "auto") {
+    columnsClass = Grid_module.default.columnsAuto;
+    if (minChildWidth) {
+      inlineStyle = { "--fui-grid-min-child-width": minChildWidth };
     }
-    if (typeof gap === "number") {
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` };
-    }
-    const classes = [
-      Grid_module.default.grid,
-      columnsClass,
-      typeof gap === "number" ? void 0 : gapClasses[gap],
-      paddingClasses[padding],
-      alignItems && Grid_module.default[`align${cap(alignItems)}`],
-      justifyItems && Grid_module.default[`justify${cap(justifyItems)}`],
-      className
-    ].filter(Boolean).join(" ");
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style: mergedStyle, children });
+  } else if (isResponsiveColumns(columns)) {
+    columnsClass = Grid_module.default.columnsResponsive;
+    const vars = {};
+    if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
+    if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
+    if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
+    if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
+    if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
+    inlineStyle = vars;
+  } else {
+    columnsClass = Grid_module.default[`columns${columns}`] ?? "";
   }
-);
+  inlineStyle = {
+    ...inlineStyle,
+    "--_fui-grid-gap": layoutSpacing.resolveLayoutGap(gap)
+  };
+  const classes = [
+    Grid_module.default.grid,
+    columnsClass,
+    paddingClasses[padding],
+    alignItems && Grid_module.default[`align${cap(alignItems)}`],
+    justifyItems && Grid_module.default[`justify${cap(justifyItems)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style: mergedStyle, children });
+});
 const subgridClasses = {
   rows: Grid_module.default.subgridRows,
   columns: Grid_module.default.subgridColumns,
   both: Grid_module.default.subgridBoth
 };
-const GridItem = React__namespace.forwardRef(
-  function GridItem2({
-    children,
-    colSpan,
-    rowSpan,
-    alignSelf,
-    subgrid,
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
-    const classes = [
-      Grid_module.default.item,
-      colSpan && (colSpan === "full" ? Grid_module.default.colSpanFull : Grid_module.default[`colSpan${colSpan}`]),
-      rowSpan && Grid_module.default[`rowSpan${rowSpan}`],
-      alignSelf && Grid_module.default[`selfAlign${cap(alignSelf)}`],
-      subgridClass,
-      className
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style, children });
-  }
-);
+const GridItem = React__namespace.forwardRef(function GridItem2({ children, colSpan, rowSpan, alignSelf, subgrid, className, style, ...htmlProps }, ref) {
+  const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+  const classes = [
+    Grid_module.default.item,
+    colSpan && (colSpan === "full" ? Grid_module.default.colSpanFull : Grid_module.default[`colSpan${colSpan}`]),
+    rowSpan && Grid_module.default[`rowSpan${rowSpan}`],
+    alignSelf && Grid_module.default[`selfAlign${cap(alignSelf)}`],
+    subgridClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style, children });
+});
 function cap(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }

package/dist/components/Grid/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 type ColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 /** Responsive value — either a single value or per-breakpoint overrides */
@@ -18,7 +18,7 @@ export interface ResponsiveColumns {
  * CSS Grid layout component with responsive columns.
  * @see https://usefragments.com/components/grid
  */
-export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'> {
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "style" | "className"> {
     children?: React.ReactNode;
     /**
      * Number of columns.
@@ -26,30 +26,30 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
      * - An object for responsive columns: `{ base: 1, md: 2, lg: 3 }`
      * - `"auto"` for responsive auto-fill based on minChildWidth
      */
-    columns?: ColumnCount | ResponsiveColumns | 'auto';
+    columns?: ColumnCount | ResponsiveColumns | "auto";
     /** Minimum width for auto-fill columns (only used with columns="auto") */
     minChildWidth?: string;
     /** Gap between grid items. Accepts string tokens or numbers (1-8) mapping to the spacing scale */
-    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | GapScale;
+    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | GapScale;
     /** Vertical alignment of items within their cells */
-    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    alignItems?: "start" | "center" | "end" | "stretch";
     /** Horizontal alignment of items within their cells */
-    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    justifyItems?: "start" | "center" | "end" | "stretch";
     /** Padding inside the grid container */
-    padding?: 'none' | 'sm' | 'md' | 'lg';
+    padding?: "none" | "sm" | "md" | "lg";
     /** Additional class name */
     className?: string;
     /** Inline styles */
     style?: React.CSSProperties;
 }
-export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
     children?: React.ReactNode;
     /** Number of columns this item spans */
-    colSpan?: ColumnCount | 'full';
+    colSpan?: ColumnCount | "full";
     /** Number of rows this item spans */
     rowSpan?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Override alignment for this item */
-    alignSelf?: 'start' | 'center' | 'end' | 'stretch';
+    alignSelf?: "start" | "center" | "end" | "stretch";
     /**
      * Enable CSS subgrid so children align to parent grid tracks.
      * - `true` or `"rows"` — children align to parent row tracks
@@ -57,7 +57,7 @@ export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * - `"both"` — children align to both row and column tracks
      * Requires the item to span multiple rows/columns for visible effect.
      */
-    subgrid?: boolean | 'rows' | 'columns' | 'both';
+    subgrid?: boolean | "rows" | "columns" | "both";
     /** Additional class name */
     className?: string;
     style?: React.CSSProperties;

package/dist/components/Grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9C,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC/G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,MAAM,CAAC;IACnD,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kGAAkG;IAClG,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC;IAC3D,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACtD,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACzG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC/B,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACnD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgCD,eAAO,MAAM,IAAI,EA+DZ,aAAa,CAAC;AAYnB,QAAA,MAAM,QAAQ,sFAmCb,CAAC;AAcF,UAAU,aACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACxF,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9C,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,OAAO,GAAG,WAAW,CACnC;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,MAAM,CAAC;IACnD,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kGAAkG;IAClG,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC;IAC3D,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACtD,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,WAAW,CACzB;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC/B,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACnD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAqBD,eAAO,MAAM,IAAI,EA4DX,aAAa,CAAC;AAYpB,QAAA,MAAM,QAAQ,sFAsBZ,CAAC;AAcH,UAAU,aAAc,SAAQ,KAAK,CAAC,yBAAyB,CAC7D,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAChD;IACC,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB"}