chop-logic-components 3.7.3 → 4.0.1

package/dist/components/molecules/text-input/TextInputButtons.js

@@ -0,0 +1,37 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import n from "../../atoms/button/Button.js";
+import { IconName as o } from "../../../enums/icon-name.js";
+import { ButtonView as r } from "../../../enums/button-view.js";
+const I = ({
+  clearable: i,
+  isPasswordButtonVisible: l,
+  handleClear: m,
+  togglePassword: p,
+  passwordShown: s,
+  label: f,
+  disabled: e
+}) => /* @__PURE__ */ a("span", { children: [
+  i && /* @__PURE__ */ t(
+    n,
+    {
+      view: r.Inner,
+      onClick: m,
+      label: `Clear input for ${f}`,
+      icon: o.Delete,
+      disabled: e
+    }
+  ),
+  l && /* @__PURE__ */ t(
+    n,
+    {
+      onClick: p,
+      view: r.Inner,
+      label: "Toggle password visibility",
+      icon: s ? o.EyeOff : o.Eye,
+      disabled: e
+    }
+  )
+] });
+export {
+  I as default
+};

package/dist/components/molecules/text-input/TextInputStateful.js

@@ -0,0 +1,92 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { getClassName as M } from "../../../utils/get-class-name.js";
+import { useTextInputController as V } from "./TextInput.controller.js";
+import './TextInput.css';/* empty css              */
+import k from "./TextInputButtons.js";
+import { useElementIds as z } from "../../../hooks/use-element-ids/use-element-ids.js";
+import A from "../../atoms/label/Label.js";
+import D from "../../atoms/input/Input.js";
+import F from "../../atoms/error-message/ErrorMessage.js";
+const Y = ({
+  name: r,
+  label: s,
+  errorMessage: u,
+  defaultValue: d,
+  onChange: c,
+  onBlur: x,
+  onFocus: g,
+  onClear: h,
+  validator: I,
+  maxLength: C,
+  id: v,
+  tabIndex: w,
+  placeholder: T = "Type here...",
+  disabled: o = !1,
+  required: t = !1,
+  clearable: N = !0,
+  readOnly: a = !1,
+  autoComplete: j = "off",
+  type: n = "text",
+  className: B,
+  style: E
+}) => {
+  const { value: P, valid: i, handleChange: S, handleClear: _, passwordShown: l, togglePassword: b } = V({
+    defaultValue: d,
+    name: r,
+    onChange: c,
+    onClear: h,
+    required: t,
+    validator: I
+  }), { elementId: m, errorId: p } = z(v), y = n === "password", L = M(["cl-text-input", B]);
+  return /* @__PURE__ */ f("div", { style: E, className: L, children: [
+    /* @__PURE__ */ e(A, { label: s, required: t, inputId: m }),
+    /* @__PURE__ */ f(
+      D,
+      {
+        id: m,
+        name: r,
+        type: l ? "text" : n,
+        disabled: o,
+        placeholder: T,
+        required: t,
+        readOnly: a,
+        autoComplete: j,
+        "aria-invalid": !i,
+        "aria-errormessage": p,
+        "aria-readonly": a,
+        value: P,
+        onChange: S,
+        maxLength: C,
+        onBlur: x,
+        onFocus: g,
+        tabIndex: w,
+        children: [
+          /* @__PURE__ */ e(
+            k,
+            {
+              clearable: N,
+              isPasswordButtonVisible: y,
+              handleClear: _,
+              togglePassword: b,
+              passwordShown: l,
+              label: s,
+              disabled: o
+            }
+          ),
+          /* @__PURE__ */ e(
+            F,
+            {
+              errorId: p,
+              message: u,
+              visible: !i,
+              className: "cl-text-input__error-message"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Y as default
+};

package/dist/components/molecules/text-input/TextInputStateless.js

@@ -0,0 +1,89 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { getClassName as $ } from "../../../utils/get-class-name.js";
+import { useState as b } from "react";
+import './TextInput.css';/* empty css              */
+import y from "./TextInputButtons.js";
+import E from "../../atoms/label/Label.js";
+import L from "../../atoms/input/Input.js";
+import V from "../../atoms/error-message/ErrorMessage.js";
+const R = ({
+  name: t,
+  label: a,
+  errorMessage: s,
+  value: c,
+  onChange: e,
+  onBlur: d,
+  onFocus: x,
+  onClear: w,
+  maxLength: g,
+  id: I,
+  tabIndex: h,
+  placeholder: v = "Type here...",
+  disabled: i = !1,
+  required: l = !1,
+  clearable: P = !0,
+  readOnly: n = !1,
+  autoComplete: S = "off",
+  type: m = "text",
+  className: N,
+  style: T,
+  defaultValue: j
+}) => {
+  const p = I ?? `text-input-${t}`, f = `${t}-error`, [r, B] = b(!1), C = m === "password", _ = $(["cl-text-input", N]);
+  return /* @__PURE__ */ u("div", { style: T, className: _, children: [
+    /* @__PURE__ */ o(E, { label: a, required: l, inputId: p }),
+    /* @__PURE__ */ u(
+      L,
+      {
+        id: p,
+        name: t,
+        type: r ? "text" : m,
+        disabled: i,
+        placeholder: v,
+        required: l,
+        readOnly: n,
+        defaultValue: j,
+        autoComplete: S,
+        "aria-invalid": !!s,
+        "aria-errormessage": f,
+        "aria-readonly": n,
+        value: c ?? "",
+        onChange: e,
+        maxLength: g,
+        onBlur: d,
+        onFocus: x,
+        tabIndex: h,
+        children: [
+          /* @__PURE__ */ o(
+            y,
+            {
+              clearable: P,
+              isPasswordButtonVisible: C,
+              handleClear: () => {
+                e && e({ target: { value: "" } }), w?.();
+              },
+              togglePassword: () => {
+                B(!r);
+              },
+              passwordShown: r,
+              label: a,
+              disabled: i
+            }
+          ),
+          /* @__PURE__ */ o(
+            V,
+            {
+              errorId: f,
+              message: s,
+              visible: !!s,
+              className: "cl-text-input__error-message"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  R as default
+};

package/dist/components/molecules/text-input/index.js

@@ -0,0 +1,3 @@
+export { default } from './TextInput.js';
+export * from './TextInput.js';
+import './TextInput.css';

package/dist/components/organisms/dialog/Dialog.css

@@ -0,0 +1 @@
+.cl-dialog{animation:cl-fade-in ease .4s;position:fixed;top:0;left:0;width:100%;height:100%;z-index:inherit;display:flex;justify-content:center;align-items:center;background-color:#0000004d}.cl-dialog__layout{z-index:var(--cl-z-index-modal);background-color:var(--cl-base-background-color);box-shadow:var(--cl-box-shadow);color:var(--cl-base-font-color);padding:var(--cl-l-gap);height:90%;position:absolute;bottom:0;left:0;border-top-left-radius:var(--cl-border-radius);border-top-right-radius:var(--cl-border-radius);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-dialog__button{position:absolute;right:var(--cl-s-gap);top:var(--cl-s-gap)}@media(min-width:640px){.cl-dialog__layout{font-size:var(--cl-typography-base-tablet)}.cl-dialog__button{right:var(--cl-m-gap);top:var(--cl-m-gap)}}@media(min-width:1024px){.cl-dialog__layout{font-size:var(--cl-typography-base-desktop);padding:var(--cl-xl-gap)}.cl-dialog__button{right:var(--cl-l-gap);top:var(--cl-l-gap)}}@media screen and (min-width:640px){.cl-dialog__layout{width:fit-content;height:fit-content;position:relative;min-width:40%;max-width:90%;max-height:90%;border-bottom-left-radius:var(--cl-border-radius);border-bottom-right-radius:var(--cl-border-radius)}}.cl-dialog_closing{animation:cl-fade-out ease .4s}

package/dist/components/organisms/dialog/Dialog.js

@@ -0,0 +1,32 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { getClassName as d } from "../../../utils/get-class-name.js";
+import { useRef as f } from "react";
+import './Dialog.css';/* empty css           */
+import { useIsMounted as u } from "../../../hooks/use-is-mounted/use-is-mounted.js";
+import { useModalFocusTrap as p } from "../../../hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import { useKeyPress as g } from "../../../hooks/use-key-press/use-key-press.js";
+import h from "../../atoms/portal/Portal.js";
+import N from "../../atoms/button/Button.js";
+import { ButtonView as _ } from "../../../enums/button-view.js";
+import { IconName as v } from "../../../enums/icon-name.js";
+import w from "../../atoms/header/Header.js";
+const D = ({ isOpened: r, onClose: l, title: t, children: a, icon: m, ...s }) => {
+  const i = u(r), c = i && !r, e = f(null);
+  return p({ modalRef: e, isOpened: r }), g({ keyCode: "Escape", ref: e, onKeyPress: l }), i ? /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o("div", { className: d(["cl-dialog", { "cl-dialog_closing": c }]), children: /* @__PURE__ */ n("div", { ref: e, role: "dialog", "aria-modal": "true", ...s, className: "cl-dialog__layout", children: [
+    /* @__PURE__ */ o(
+      N,
+      {
+        icon: v.X,
+        view: _.Icon,
+        label: "Close modal window",
+        onClick: l,
+        className: "cl-dialog__button"
+      }
+    ),
+    /* @__PURE__ */ o("header", { children: /* @__PURE__ */ o(w, { as: "h3", icon: m, children: t }) }),
+    /* @__PURE__ */ o("div", { children: a })
+  ] }) }) }) : null;
+};
+export {
+  D as default
+};

package/dist/components/organisms/dialog/index.js

@@ -0,0 +1,3 @@
+export { default } from './Dialog.js';
+export * from './Dialog.js';
+import './Dialog.css';

package/dist/components/organisms/form/Form.controller.js

@@ -0,0 +1,29 @@
+import { useState as e } from "react";
+import { getInitialValidationState as S, isFormDataValid as h, updateValidationState as f } from "./Form.helpers.js";
+function I({
+  initialValues: a,
+  onReset: d,
+  onSubmit: i,
+  onClickSubmit: c
+}) {
+  const [n, o] = e(a), [l, u] = e(S(a)), [r, m] = e(0);
+  return {
+    handleInputChange: (t) => {
+      const s = { ...n, [t.name]: t.value };
+      o(s), u(f(l, t));
+    },
+    handleSubmit: (t) => {
+      t.preventDefault();
+      const D = { ...Object.fromEntries(new FormData(t.target)), ...n };
+      i?.(t), c?.(D);
+    },
+    handleReset: (t) => {
+      d?.(t), o(a), m(r + 1);
+    },
+    resetSignal: r,
+    valid: h(l)
+  };
+}
+export {
+  I as useFormController
+};

package/dist/components/organisms/form/Form.css

@@ -0,0 +1 @@
+.cl-form{display:grid;align-items:end;gap:var(--cl-l-gap);grid-template-columns:auto;grid-template-rows:auto}@media screen and (min-width:640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{display:flex;align-items:center;justify-content:space-between;padding-top:var(--cl-l-gap);grid-column:1 / -1}

package/dist/components/organisms/form/Form.helpers.js

@@ -0,0 +1,14 @@
+function e(t) {
+  return t ? Object.keys(t).map((n) => [n, !0]) : [];
+}
+function i(t, n) {
+  return n?.valid === void 0 ? t : t.map((r) => r[0] !== n.name ? r : [r[0], !!n?.valid]);
+}
+function u(t) {
+  return t.every((n) => n[1]);
+}
+export {
+  e as getInitialValidationState,
+  u as isFormDataValid,
+  i as updateValidationState
+};

package/dist/components/organisms/form/Form.js

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { getClassName as g } from "../../../utils/get-class-name.js";
+import { useMemo as v } from "react";
+import { useFormController as S } from "./Form.controller.js";
+import './Form.css';/* empty css         */
+import { FormContext as F } from "../../contexts/form/FormContext.js";
+import s from "../../atoms/button/Button.js";
+import { ButtonView as N } from "../../../enums/button-view.js";
+import { IconName as i } from "../../../enums/icon-name.js";
+const M = ({
+  children: l,
+  initialValues: o,
+  onReset: a,
+  onSubmit: c,
+  onClickSubmit: d,
+  hasReset: t = !0,
+  className: p,
+  ...u
+}) => {
+  const { handleInputChange: r, handleSubmit: f, handleReset: h, resetSignal: m, valid: x } = S({
+    initialValues: o,
+    onReset: a,
+    onSubmit: c,
+    onClickSubmit: d
+  }), b = g(["cl-form", p]), C = v(
+    () => ({ onChangeFormInput: r, initialValues: o, resetSignal: m }),
+    [r, o, m]
+  );
+  return /* @__PURE__ */ e("form", { onSubmit: f, onReset: h, ...u, className: b, children: /* @__PURE__ */ n(F.Provider, { value: C, children: [
+    l,
+    /* @__PURE__ */ n("div", { className: "cl-form__buttons", children: [
+      t && /* @__PURE__ */ e(s, { type: "reset", text: "Reset", icon: i.Delete, view: N.Secondary }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          type: "submit",
+          text: "Submit",
+          icon: i.ArrowRight,
+          extended: !t,
+          disabled: !x
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  M as default
+};

package/dist/components/organisms/form/index.js

@@ -0,0 +1,3 @@
+export { default } from './Form.js';
+export * from './Form.js';
+import './Form.css';

package/dist/components/organisms/grid/Grid.controller.js

@@ -0,0 +1,34 @@
+import { useState as m } from "react";
+import { useElementIds as S } from "../../../hooks/use-element-ids/use-element-ids.js";
+const B = ({
+  data: n,
+  id: d,
+  onSelect: o
+}) => {
+  const { elementId: a } = S(d), [l, h] = m([]), c = n.map((e) => e.id), r = c.length === l.length, I = n.some((e) => e?.disabled), t = (e) => {
+    h(e), o?.(e);
+  };
+  return {
+    elementId: a,
+    isAllSelected: r,
+    isAllCheckboxDisabled: I,
+    selectedIds: l,
+    handleSelectAll: () => {
+      t(c);
+    },
+    handleDeselectAll: () => {
+      t([]);
+    },
+    handleSelectRowById: (e) => {
+      const s = [...l, e];
+      t(s);
+    },
+    handleDeselectRowById: (e) => {
+      const s = l.filter((i) => i !== e);
+      t(s);
+    }
+  };
+};
+export {
+  B as useGridController
+};

package/dist/components/organisms/grid/Grid.css

@@ -0,0 +1 @@
+.cl-grid{border-collapse:collapse}.cl-grid__caption{color:var(--cl-base-font-color);padding:var(--cl-m-gap);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-grid__caption{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-grid__caption{font-size:var(--cl-typography-base-desktop)}}.cl-grid__wrapper{overflow-x:auto}

package/dist/components/organisms/grid/Grid.helpers.js

@@ -0,0 +1,15 @@
+function u({
+  item: e,
+  columns: s,
+  renderDataItem: o
+}) {
+  const i = [];
+  for (const l of s) {
+    let f;
+    o && e[l.field] ? f = o(e, l.field) : e[l.field] ? f = e[l.field].toString() : f = "", i.push({ field: l.field, value: f });
+  }
+  return i;
+}
+export {
+  u as getGridRowValues
+};

package/dist/components/organisms/grid/Grid.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { getClassName as w } from "../../../utils/get-class-name.js";
+import './Grid.css';/* empty css         */
+import { GridBody as y } from "./body/GridBody.js";
+import { GridColumnGroup as B } from "./column-group/GridColumnGroup.js";
+import { useGridController as x } from "./Grid.controller.js";
+import { GridHead as C } from "./head/GridHead.js";
+const b = ({
+  columns: l,
+  data: d,
+  id: i,
+  onSelect: t,
+  renderDataItem: s,
+  caption: o,
+  selectable: r = !1,
+  className: c,
+  ...m
+}) => {
+  const {
+    elementId: a,
+    handleSelectAll: n,
+    handleDeselectAll: p,
+    isAllCheckboxDisabled: f,
+    isAllSelected: h,
+    handleDeselectRowById: I,
+    handleSelectRowById: A,
+    selectedIds: G
+  } = x({ id: i, data: d, onSelect: t });
+  return /* @__PURE__ */ e("div", { className: "cl-grid__wrapper", children: /* @__PURE__ */ g("table", { ...m, className: w(["cl-grid", c]), children: [
+    o && /* @__PURE__ */ e("caption", { className: "cl-grid__caption", children: o }),
+    /* @__PURE__ */ e(B, { columns: l, selectable: r }),
+    /* @__PURE__ */ e(
+      C,
+      {
+        gridId: a,
+        columns: l,
+        selectable: r,
+        selectAll: n,
+        deselectAll: p,
+        isAllSelected: h,
+        isAllCheckboxDisabled: f
+      }
+    ),
+    /* @__PURE__ */ e(
+      y,
+      {
+        columns: l,
+        data: d,
+        selectable: r,
+        selectRowById: A,
+        deselectRowById: I,
+        selectedIds: G,
+        renderDataItem: s
+      }
+    )
+  ] }) });
+};
+export {
+  b as default
+};

package/dist/components/organisms/grid/body/GridBody.css

@@ -0,0 +1 @@
+.cl-grid-body{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-grid-body td{padding:var(--cl-xs-gap)}@media(min-width:640px){.cl-grid-body{font-size:var(--cl-typography-base-tablet)}.cl-grid-body td{padding:var(--cl-s-gap)}}@media(min-width:1024px){.cl-grid-body{font-size:var(--cl-typography-base-desktop)}.cl-grid-body td{padding:var(--cl-m-gap)}}

package/dist/components/organisms/grid/body/GridBody.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import { getGridRowValues as p } from "../Grid.helpers.js";
+import { GridRow as c } from "../grid-row/GridRow.js";
+import './GridBody.css';/* empty css             */
+const f = ({
+  selectRowById: d,
+  deselectRowById: i,
+  renderDataItem: s,
+  selectedIds: a,
+  selectable: e,
+  data: l,
+  columns: t
+}) => /* @__PURE__ */ o("tbody", { className: "cl-grid-body", children: l.map((r) => {
+  const m = p({ item: r, columns: t, renderDataItem: s });
+  return /* @__PURE__ */ o(
+    c,
+    {
+      rowId: r.id,
+      disabled: r?.disabled,
+      selectRowById: d,
+      deselectRowById: i,
+      selectable: e,
+      values: m,
+      selectedIds: a
+    },
+    r.id
+  );
+}) });
+export {
+  f as GridBody
+};

package/dist/components/organisms/grid/checkbox/GridCheckbox.css

@@ -0,0 +1 @@
+.cl-grid-checkbox{display:flex;gap:var(--cl-s-gap);padding:var(--cl-s-gap);position:relative;overflow:hidden;background-position:center}.cl-grid-checkbox label{cursor:pointer;gap:var(--cl-s-gap);font-size:var(--cl-typography-small-mobile)}.cl-grid-checkbox label:hover,.cl-grid-checkbox label:active{text-shadow:var(--cl-text-shadow)}.cl-grid-checkbox__input{position:absolute;z-index:-1;opacity:0;top:4px;left:0;margin:0}.cl-grid-checkbox__input:focus-visible+label{outline:var(--cl-outline-border);outline-offset:var(--cl-xs-gap)}.cl-grid-checkbox_disabled{pointer-events:none;opacity:.5}

package/dist/components/organisms/grid/checkbox/GridCheckbox.js

@@ -0,0 +1,52 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { getClassName as p } from "../../../../utils/get-class-name.js";
+import './GridCheckbox.css';/* empty css                 */
+import { useElementIds as x } from "../../../../hooks/use-element-ids/use-element-ids.js";
+import b from "../../../atoms/label/Label.js";
+import { IconName as r } from "../../../../enums/icon-name.js";
+const I = ({
+  name: s,
+  label: m,
+  disabled: o,
+  required: c = !1,
+  onChange: l,
+  checked: e = !1,
+  ...n
+}) => {
+  const { elementId: i } = x(n?.id), a = p([
+    "cl-grid-checkbox",
+    {
+      "cl-grid-checkbox_disabled": !!o,
+      "cl-grid-checkbox_checked": !!e
+    }
+  ]);
+  return /* @__PURE__ */ d("div", { className: a, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        id: i,
+        name: s,
+        type: "checkbox",
+        disabled: o,
+        required: c,
+        checked: e,
+        onChange: l,
+        className: "cl-grid-checkbox__input"
+      }
+    ),
+    /* @__PURE__ */ t(
+      b,
+      {
+        label: m,
+        required: c,
+        inputId: i,
+        isTextHidden: !0,
+        iconPosition: "left",
+        icon: e ? r.CheckSquare : r.Square
+      }
+    )
+  ] });
+};
+export {
+  I as GridCheckbox
+};

package/dist/components/organisms/grid/column-group/GridColumnGroup.css

@@ -0,0 +1 @@
+.cl-grid-column{border-right:var(--cl-light-border)}.cl-grid-column_first{border-left:var(--cl-light-border)}.cl-grid-column_highlighted{background-color:var(--cl-surface-tonal-a0)}

package/dist/components/organisms/grid/column-group/GridColumnGroup.js

@@ -0,0 +1,26 @@
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { getClassName as s } from "../../../../utils/get-class-name.js";
+import './GridColumnGroup.css';/* empty css                    */
+const e = ({
+  columns: i,
+  selectable: r
+}) => /* @__PURE__ */ m("colgroup", { children: [
+  r && /* @__PURE__ */ c("col", { className: "cl-grid-column cl-grid-column_first cl-grid-column_check" }),
+  i.map((l, o) => /* @__PURE__ */ c(
+    "col",
+    {
+      className: s([
+        "cl-grid-column",
+        l?.className,
+        {
+          "cl-grid-column_first": o === 0 && !r,
+          "cl-grid-column_highlighted": !!l?.highlighted
+        }
+      ])
+    },
+    l?.title
+  ))
+] });
+export {
+  e as GridColumnGroup
+};

package/dist/components/organisms/grid/data-cell/GridDataCell.js

@@ -0,0 +1,5 @@
+import { jsx as t } from "react/jsx-runtime";
+const o = ({ value: r }) => /* @__PURE__ */ t("td", { children: r });
+export {
+  o as GridDataCell
+};

package/dist/components/organisms/grid/grid-row/GridRow.css

@@ -0,0 +1 @@
+.cl-grid-row{border-bottom:var(--cl-light-border);background-color:var(--cl-base-background-color)}.cl-grid-row_selected{background-color:var(--cl-surface-tonal-a0)}

package/dist/components/organisms/grid/grid-row/GridRow.js

@@ -0,0 +1,35 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { getClassName as p } from "../../../../utils/get-class-name.js";
+import { GridDataCell as f } from "../data-cell/GridDataCell.js";
+import { SelectGridRowCell as u } from "../select-grid-row-cell/SelectGridRowCell.js";
+import './GridRow.css';/* empty css            */
+const R = ({
+  rowId: e,
+  selectRowById: o,
+  deselectRowById: i,
+  selectable: s,
+  values: c,
+  selectedIds: m,
+  disabled: a
+}) => {
+  const r = m.includes(e);
+  return /* @__PURE__ */ n("tr", { className: p(["cl-grid-row", { "cl-grid-row_selected": r }]), children: [
+    s && /* @__PURE__ */ t(
+      u,
+      {
+        rowId: e,
+        selectRowById: o,
+        deselectRowById: i,
+        isRowSelected: r,
+        disabled: a
+      }
+    ),
+    c.map((l) => {
+      const d = `cell-${e}-${l.field}`;
+      return /* @__PURE__ */ t(f, { value: l.value }, d);
+    })
+  ] });
+};
+export {
+  R as GridRow
+};

package/dist/components/organisms/grid/grid-row/index.js

@@ -0,0 +1,3 @@
+export { default } from './GridRow.js';
+export * from './GridRow.js';
+import './GridRow.css';

package/dist/components/organisms/grid/head/GridHead.css

@@ -0,0 +1 @@
+.cl-grid-head{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-grid-head th{padding:var(--cl-xs-gap)}@media(min-width:640px){.cl-grid-head{font-size:var(--cl-typography-base-tablet)}.cl-grid-head th{padding:var(--cl-s-gap)}}@media(min-width:1024px){.cl-grid-head{font-size:var(--cl-typography-base-desktop)}.cl-grid-head th{padding:var(--cl-m-gap)}}.cl-grid-head__row{border-top:var(--cl-light-border);border-bottom:var(--cl-light-border);background-color:var(--cl-accent-background)}