@arthurzakharov/ui-kit 1.9.4 → 1.9.5

package/dist/assets/form-row-BIcA2L8w.css

@@ -0,0 +1 @@
+._FormRow_qe4e4_1{display:flex;flex-direction:column;align-items:stretch}._XXS_qe4e4_7{gap:var(--rm-ui-padding-xxs)}._XS_qe4e4_11{gap:var(--rm-ui-padding-xs)}._SM_qe4e4_15{gap:var(--rm-ui-padding-sm)}._MD_qe4e4_19{gap:var(--rm-ui-padding-md)}._LG_qe4e4_23,._XL_qe4e4_27{gap:var(--rm-ui-padding-xl)}._XXL_qe4e4_31{gap:var(--rm-ui-padding-xxl)}._XXXL_qe4e4_35{gap:var(--rm-ui-padding-xxxl)}._Child_qe4e4_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_qe4e4_1{flex-direction:row}._Child_qe4e4_39[data-children-quantity="1"]{width:100%}._Child_qe4e4_39[data-children-quantity="2"]{width:50%}._Child_qe4e4_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_qe4e4_39[data-children-quantity="4"]{width:25%}._Child_qe4e4_39[data-width="1"]{width:100%}._Child_qe4e4_39[data-width="1/2"]{width:50%}._Child_qe4e4_39[data-width="1/3"]{width:calc(100% / 3)}._Child_qe4e4_39[data-width="2/3"]{width:calc(200% / 3)}._Child_qe4e4_39[data-width="1/4"]{width:25%}._Child_qe4e4_39[data-width="2/4"]{width:50%}._Child_qe4e4_39[data-width="3/4"]{width:75%}}

package/dist/components/form-row/form-row.component.d.ts

@@ -1,6 +1,23 @@
 import { PropsWithChildren } from 'react';
 import { Base, Size } from '../../utils/types';
+export type FormRowWidth = '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1';
 export interface FormRowProps extends PropsWithChildren<Base> {
     gap: Size;
+    /**
+     * Force the desktop width of each child individually.
+     *
+     * Pass an array of fractions, one per valid child, in order. Supported values
+     * cover every valid fraction of a four-column grid:
+     * `'1/2'`, `'1/3'`, `'2/3'`, `'1/4'`, `'2/4'`, `'3/4'` and `'1'`.
+     *
+     * If the array length does not match the number of valid children, the array
+     * contains an unknown value, or the fractions sum to more than 1, a warning
+     * is logged and the prop is ignored — the row falls back to the default
+     * behaviour where all children share the row width equally.
+     *
+     * On mobile (< 768px) the row stacks vertically as usual; this prop only
+     * affects the desktop layout.
+     */
+    widths?: FormRowWidth[];
 }
-export declare const FormRow: ({ children, gap, ...base }: FormRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormRow: ({ children, gap, widths, ...base }: FormRowProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/form-row/form-row.component.js

@@ -1,35 +1,70 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Children as _, isValidElement as m } from "react";
-import c from "clsx";
-import { baseProps as n } from "../../utils/functions/functions.util.js";
-import '../../assets/form-row-C_CTS-Xj.css';const i = "_FormRow_v16lb_1", L = "_XXS_v16lb_7", d = "_XS_v16lb_11", e = "_SM_v16lb_15", v = "_MD_v16lb_19", x = "_LG_v16lb_23", S = "_XL_v16lb_27", b = "_XXL_v16lb_31", u = "_XXXL_v16lb_35", a = "_Child_v16lb_39", o = {
-  FormRow: i,
-  XXS: L,
-  XS: d,
-  SM: e,
-  MD: v,
+import { jsx as X } from "react/jsx-runtime";
+import { Children as d, isValidElement as u } from "react";
+import f from "clsx";
+import { baseProps as _ } from "../../utils/functions/functions.util.js";
+import '../../assets/form-row-BIcA2L8w.css';const L = "_FormRow_qe4e4_1", w = "_XXS_qe4e4_7", q = "_XS_qe4e4_11", S = "_SM_qe4e4_15", F = "_MD_qe4e4_19", x = "_LG_qe4e4_23", v = "_XL_qe4e4_27", b = "_XXL_qe4e4_31", M = "_XXXL_qe4e4_35", R = "_Child_qe4e4_39", e = {
+  FormRow: L,
+  XXS: w,
+  XS: q,
+  SM: S,
+  MD: F,
   LG: x,
-  XL: S,
+  XL: v,
   XXL: b,
-  XXXL: u,
-  Child: a
-}, C = ({ children: t, gap: X = "sm", ...l }) => _.count(t) === 0 ? null : /* @__PURE__ */ r(
-  "div",
-  {
-    "data-testid": n(l, "data-testid", "form-row"),
-    className: c(o.FormRow, n(l, "className"), {
-      [o.XXS]: X === "xxs",
-      [o.XS]: X === "xs",
-      [o.SM]: X === "sm",
-      [o.MD]: X === "md",
-      [o.LG]: X === "lg",
-      [o.XL]: X === "xl",
-      [o.XXL]: X === "xxl",
-      [o.XXXL]: X === "xxxl"
-    }),
-    children: _.map(t, (s) => m(s) ? /* @__PURE__ */ r("div", { "data-children-quantity": _.count(t), className: o.Child, children: s }) : null)
-  }
-);
+  XXXL: M,
+  Child: R
+}, r = {
+  1: 12,
+  "1/2": 6,
+  "1/3": 4,
+  "2/3": 8,
+  "1/4": 3,
+  "2/4": 6,
+  "3/4": 9
+}, k = r[1], j = ({ children: i, gap: o = "sm", widths: t, ...a }) => {
+  if (d.count(i) === 0) return null;
+  const l = d.toArray(i).filter(u);
+  let c = !1;
+  if (t)
+    if (t.length !== l.length)
+      console.warn(
+        `[FormRow] \`widths\` length (${t.length}) does not match the number of children (${l.length}). Falling back to default equal-width behaviour.`
+      );
+    else {
+      const s = t.find((n) => !(n in r));
+      s !== void 0 ? console.warn(
+        `[FormRow] \`widths\` contains unknown value "${s}". Supported values are: ${Object.keys(r).join(", ")}. Falling back to default equal-width behaviour.`
+      ) : t.reduce((m, h) => m + r[h], 0) > k ? console.warn(
+        `[FormRow] \`widths\` total (${t.join(" + ")}) exceeds 1. Falling back to default equal-width behaviour.`
+      ) : c = !0;
+    }
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      "data-testid": _(a, "data-testid", "form-row"),
+      className: f(e.FormRow, _(a, "className"), {
+        [e.XXS]: o === "xxs",
+        [e.XS]: o === "xs",
+        [e.SM]: o === "sm",
+        [e.MD]: o === "md",
+        [e.LG]: o === "lg",
+        [e.XL]: o === "xl",
+        [e.XXL]: o === "xxl",
+        [e.XXXL]: o === "xxxl"
+      }),
+      children: l.map((s, n) => /* @__PURE__ */ X(
+        "div",
+        {
+          "data-children-quantity": l.length,
+          "data-width": c ? t[n] : void 0,
+          className: e.Child,
+          children: s
+        },
+        n
+      ))
+    }
+  );
+};
 export {
-  C as FormRow
+  j as FormRow
 };

package/dist/main.d.ts

@@ -31,7 +31,7 @@ export { Dialog, type DialogProps, type DialogSize, type DialogPosition } from '
 export { DialogArticle } from './components/dialog-article';
 export { Expenses, type ExpensesProps } from './components/expenses';
 export { Footer, type FooterProps } from './components/footer';
-export { FormRow, type FormRowProps } from './components/form-row/form-row.component';
+export { FormRow, type FormRowProps, type FormRowWidth } from './components/form-row/form-row.component';
 export { Header, type HeaderProps, type HeaderDescription } from './components/header/header.component';
 export { InfoPanel, type InfoPanelProps } from './components/info-panel';
 export { Information } from './components/information';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.9.4",
+  "version": "1.9.5",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/assets/form-row-C_CTS-Xj.css

@@ -1 +0,0 @@
-._FormRow_v16lb_1{display:flex;flex-direction:column;align-items:stretch}._XXS_v16lb_7{gap:var(--rm-ui-padding-xxs)}._XS_v16lb_11{gap:var(--rm-ui-padding-xs)}._SM_v16lb_15{gap:var(--rm-ui-padding-sm)}._MD_v16lb_19{gap:var(--rm-ui-padding-md)}._LG_v16lb_23,._XL_v16lb_27{gap:var(--rm-ui-padding-xl)}._XXL_v16lb_31{gap:var(--rm-ui-padding-xxl)}._XXXL_v16lb_35{gap:var(--rm-ui-padding-xxxl)}._Child_v16lb_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_v16lb_1{flex-direction:row}._Child_v16lb_39[data-children-quantity="1"]{width:100%}._Child_v16lb_39[data-children-quantity="2"]{width:50%}._Child_v16lb_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_v16lb_39[data-children-quantity="4"]{width:25%}}