@alif-ui-test/core 1.11.0

package/dist/components/Dates/PickerOptions/PickerOptions.js

@@ -0,0 +1,36 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import n from "../Dates.module.css.js";
+import { CONFIRMATION_TEXT as f } from "../InputTimePicker/TimePicker/TimePicker.utils.js";
+import { useLocale as p } from "../../../providers/hooks/useLocale/useLocale.js";
+import { FunctionButton as y } from "../../FunctionButton/FunctionButton.js";
+import { Button as A } from "../../Button/Button.js";
+const j = ({
+  options: c = [],
+  isRange: l,
+  onChange: a,
+  onConfirm: t,
+  disabledOptions: s = []
+}) => {
+  const { locale: m } = p(), o = c.filter(
+    (r) => l ? Array.isArray(r.value) : !Array.isArray(r.value)
+  );
+  if (o.length === 0 && !t) return null;
+  const d = (r) => Array.isArray(r) ? r.some((i) => s.includes(i)) : s.includes(r);
+  return /* @__PURE__ */ u("div", { className: n.confirmationBlock, children: [
+    /* @__PURE__ */ e("div", { className: n.dateOptions, children: o.map(({ text: r, value: i }) => /* @__PURE__ */ e(
+      y,
+      {
+        onClick: () => a(i),
+        disabled: d(i),
+        variant: "accent",
+        size: "m",
+        children: r
+      },
+      r
+    )) }),
+    t && /* @__PURE__ */ e(A, { onClick: t, size: "s", children: f[m] })
+  ] });
+};
+export {
+  j as PickerOptions
+};

package/dist/components/Dates/PickerOptions/PickerOptions.types.js

@@ -0,0 +1 @@
+

package/dist/components/Divider/Divider.js

@@ -0,0 +1,18 @@
+import { jsx as s } from "react/jsx-runtime";
+import t from "./Divider.module.css.js";
+import { getDividerStyles as i } from "./Divider.utils.js";
+import { classNames as e } from "../../utils/class-names.js";
+const y = ({
+  className: r,
+  variant: m = "primary",
+  size: o = "m"
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: e(t.root, r),
+    style: i(m, o)
+  }
+);
+export {
+  y as Divider
+};

package/dist/components/Divider/Divider.module.css.js

@@ -0,0 +1,7 @@
+const o = "_root_1j1l1_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/Divider/Divider.types.js

@@ -0,0 +1 @@
+

package/dist/components/Divider/Divider.utils.js

@@ -0,0 +1,10 @@
+import { getSize as e } from "../../utils/get-size.js";
+const t = (i, d) => ({
+  "--divider-width": "100%",
+  "--divider-height": "fit-content",
+  "--divider-border-width": e(d, "divider-width"),
+  "--divider-color": `var(--divider-color-${i})`
+});
+export {
+  t as getDividerStyles
+};

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,74 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import r from "./Drawer.module.css.js";
+import { capitalize as i, positionToTransitionName as C, getDrawerStyle as S } from "./Drawer.utils.js";
+import { Backdrop as T } from "../Backdrop/Backdrop.js";
+import { Typography as n } from "../Typography/Typography.js";
+import { classNames as d } from "../../utils/class-names.js";
+import { OutlineSystemClose as j } from "../../icons/components/OutlineSystemClose.js";
+const P = ({
+  title: c,
+  subTitle: o,
+  isOpen: l,
+  onClose: a,
+  children: m,
+  isCloseOutside: p = !0,
+  width: y = "30%",
+  height: h = "70%",
+  type: f = "default",
+  position: e = "right",
+  zIndex: w,
+  className: N,
+  ...g
+}) => {
+  const u = d(
+    r.root,
+    f === "rounded" && r.rounded,
+    r[`position${i(e)}`]
+  ), v = d(
+    r.drawer,
+    r[`drawer${i(e)}`],
+    N
+  ), x = S(e, y, h);
+  return /* @__PURE__ */ t(
+    T,
+    {
+      isOpen: l,
+      onClose: a,
+      isCloseOutside: p,
+      className: u,
+      "data-testid": "container",
+      zIndex: w,
+      transitionProps: {
+        transition: C[e]
+      },
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          style: x,
+          "data-testid": "drawer",
+          className: v,
+          ...g,
+          children: [
+            /* @__PURE__ */ s("div", { className: r.title, children: [
+              /* @__PURE__ */ t(n, { proportions: "h4", category: "heading", children: c }),
+              /* @__PURE__ */ t(j, { onClick: a })
+            ] }),
+            o && /* @__PURE__ */ t(
+              n,
+              {
+                proportions: "l",
+                category: "body",
+                className: r.subTitle,
+                children: o
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: r.content, children: m })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  P as Drawer
+};

package/dist/components/Drawer/Drawer.module.css.js

@@ -0,0 +1,33 @@
+const t = "_root_3xmy3_1", o = "_positionRight_3xmy3_22", _ = "_positionLeft_3xmy3_27", r = "_positionTop_3xmy3_32", e = "_positionBottom_3xmy3_37", i = "_rounded_3xmy3_42", n = "_drawer_3xmy3_46", s = "_drawerRight_3xmy3_55", d = "_drawerLeft_3xmy3_55", m = "_drawerTop_3xmy3_59", p = "_drawerBottom_3xmy3_59", c = "_title_3xmy3_68", a = "_subTitle_3xmy3_82", w = "_content_3xmy3_87", x = {
+  root: t,
+  positionRight: o,
+  positionLeft: _,
+  positionTop: r,
+  positionBottom: e,
+  rounded: i,
+  drawer: n,
+  drawerRight: s,
+  drawerLeft: d,
+  drawerTop: m,
+  drawerBottom: p,
+  title: c,
+  subTitle: a,
+  content: w
+};
+export {
+  w as content,
+  x as default,
+  n as drawer,
+  p as drawerBottom,
+  d as drawerLeft,
+  s as drawerRight,
+  m as drawerTop,
+  e as positionBottom,
+  _ as positionLeft,
+  o as positionRight,
+  r as positionTop,
+  t as root,
+  i as rounded,
+  a as subTitle,
+  c as title
+};

package/dist/components/Drawer/Drawer.types.js

@@ -0,0 +1 @@
+

package/dist/components/Drawer/Drawer.utils.js

@@ -0,0 +1,14 @@
+const o = {
+  left: "slide-right",
+  right: "slide-left",
+  top: "slide-down",
+  bottom: "slide-up"
+}, i = (t) => t.charAt(0).toUpperCase() + t.slice(1), r = (t, e, l) => ({
+  ...t === "left" || t === "right" ? { width: e } : {},
+  ...t === "top" || t === "bottom" ? { height: l } : {}
+});
+export {
+  i as capitalize,
+  r as getDrawerStyle,
+  o as positionToTransitionName
+};

package/dist/components/Field/Field.js

@@ -0,0 +1,69 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as W, useId as q } from "react";
+import { InputBaseWrapper as w } from "./InputBaseWrapper/InputBaseWrapper.js";
+import { InputBase as y } from "./InputBase/InputBase.js";
+const G = ({
+  label: m,
+  placeholder: p,
+  onClear: u,
+  leftSection: f,
+  leftIcon: s,
+  rightIcon: c,
+  hasError: d,
+  id: I,
+  value: r,
+  mask: l,
+  inputRegExp: a,
+  className: x,
+  disabled: t,
+  keepLabel: B,
+  keepLabelFixed: R,
+  style: g,
+  fullWidth: h = !0,
+  bordered: j = !0,
+  proportions: e = "m",
+  onFieldClick: k,
+  ...C
+}) => {
+  const n = W(null), F = q(), o = I || F;
+  return /* @__PURE__ */ i(
+    w,
+    {
+      label: m,
+      onClear: u,
+      leftSection: f,
+      leftIcon: s,
+      rightIcon: c,
+      proportions: e,
+      keepLabel: B,
+      keepLabelFixed: R,
+      bordered: j,
+      inputRef: n,
+      hasError: d,
+      disabled: t,
+      value: r,
+      id: o,
+      fullWidth: h,
+      className: x,
+      style: g,
+      onClick: k,
+      children: /* @__PURE__ */ i(
+        y,
+        {
+          proportions: e,
+          ref: n,
+          placeholder: p,
+          id: o,
+          value: r,
+          mask: l,
+          inputRegExp: a,
+          disabled: t,
+          ...C
+        }
+      )
+    }
+  );
+};
+export {
+  G as Field
+};

package/dist/components/Field/Field.types.js

@@ -0,0 +1 @@
+

package/dist/components/Field/InputBase/InputBase.js

@@ -0,0 +1,52 @@
+import { jsxs as N, jsx as m } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import r from "./InputBase.module.css.js";
+import { getInputBaseStyles as v, applyMask as x } from "./InputBase.utils.js";
+import { classNames as f } from "../../../utils/class-names.js";
+const k = h(
+  ({
+    value: a,
+    mask: t,
+    inputRegExp: e,
+    onChange: o,
+    className: p,
+    style: i,
+    proportions: c = "m",
+    autoComplete: u = "off",
+    ...y
+  }, d) => {
+    const n = typeof e == "string" ? new RegExp(e) : e, l = v(c), g = (s) => {
+      if (!n) {
+        o?.(s);
+        return;
+      }
+      n.test(s.target.value) && o?.(s);
+    };
+    return /* @__PURE__ */ N("div", { className: f(r.root, p), style: i, children: [
+      /* @__PURE__ */ m(
+        "input",
+        {
+          ref: d,
+          value: a ?? "",
+          onChange: g,
+          className: f(t && r.maskedInput),
+          style: l,
+          autoComplete: u,
+          ...y
+        }
+      ),
+      t && /* @__PURE__ */ m(
+        "input",
+        {
+          className: r.mask,
+          value: x(a ?? "", t),
+          style: l,
+          readOnly: !0
+        }
+      )
+    ] });
+  }
+);
+export {
+  k as InputBase
+};

package/dist/components/Field/InputBase/InputBase.module.css.js

@@ -0,0 +1,11 @@
+const s = "_root_1mg4k_1", t = "_maskedInput_1mg4k_34", o = "_mask_1mg4k_34", k = {
+  root: s,
+  maskedInput: t,
+  mask: o
+};
+export {
+  k as default,
+  o as mask,
+  t as maskedInput,
+  s as root
+};

package/dist/components/Field/InputBase/InputBase.utils.js

@@ -0,0 +1,24 @@
+import { resolveTypography as i } from "../../../utils/typography.js";
+const n = (e) => {
+  switch (e) {
+    case "s":
+      return i("description", "l");
+    case "l":
+      return i("body", "m");
+    default:
+      return i("body", "s");
+  }
+}, l = (e) => {
+  const t = n(e);
+  return {
+    "--field-item-font-family": t.fontFamily,
+    "--field-item-font-weight": t.fontWeight,
+    "--field-item-font-size": t.fontSize,
+    "--field-item-line-height": t.lineHeight,
+    "--field-item-letter-spacing": t.letterSpacing
+  };
+}, o = (e, t) => e.length >= t.length ? e : e + t?.slice(e.length);
+export {
+  o as applyMask,
+  l as getInputBaseStyles
+};

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.js

@@ -0,0 +1,86 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import e from "./InputBaseWrapper.module.css.js";
+import { inputBaseWrapperProportionsResolver as L } from "./InputBaseWrapper.utils.js";
+import { OutlineSystemClose as O } from "../../../icons/components/OutlineSystemClose.js";
+import { classNames as r } from "../../../utils/class-names.js";
+const E = ({
+  id: m,
+  value: a,
+  label: t,
+  onClear: i,
+  leftSection: h,
+  leftIcon: u,
+  rightIcon: p,
+  children: f,
+  inputRef: N,
+  hasError: C,
+  disabled: v,
+  onClick: b,
+  className: D,
+  style: W,
+  fullWidth: w = !0,
+  bordered: y = !0,
+  keepLabel: c = !0,
+  keepLabelFixed: I = !1,
+  proportions: s = "m"
+}) => {
+  const S = r(
+    e.root,
+    !y && e.borderNone,
+    C && e.error,
+    v && e.disabled,
+    w && e.fullWidth,
+    D
+  ), x = r(
+    e.label,
+    (a || I) && e.labelActive,
+    (s === "s" || !c) && e.hideLabel,
+    (s === "s" || !c) && a && e.hideLabelActive
+  ), A = r(
+    e.children,
+    (s === "s" || !t || !c) && e.childrenWithoutLabel
+  ), B = r(
+    e.clearIcon,
+    !a && e.hideClearIcon
+  ), M = {
+    ...W,
+    ...L(s)
+  }, d = () => {
+    N?.current?.focus();
+  }, j = () => {
+    d(), i?.();
+  }, F = (l) => {
+    const { className: g } = l.target;
+    g === e.middleSection && l.preventDefault();
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      onClick: b,
+      className: S,
+      style: M,
+      children: [
+        h,
+        /* @__PURE__ */ o("div", { className: e.main, onClick: d, children: [
+          u,
+          /* @__PURE__ */ o("div", { className: e.middleSection, onMouseDown: F, children: [
+            t && /* @__PURE__ */ n("label", { htmlFor: m, className: x, children: t }),
+            /* @__PURE__ */ n("div", { className: A, children: f })
+          ] }),
+          i && /* @__PURE__ */ n(
+            O,
+            {
+              onMouseDown: (l) => l.preventDefault(),
+              className: B,
+              onClick: j
+            }
+          ),
+          p
+        ] })
+      ]
+    }
+  );
+};
+export {
+  E as InputBaseWrapper
+};

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.module.css.js

@@ -0,0 +1,35 @@
+const e = "_root_1wbig_1", i = "_label_1wbig_70", l = "_error_1wbig_74", _ = "_disabled_1wbig_74", o = "_main_1wbig_133", c = "_middleSection_1wbig_143", t = "_labelActive_1wbig_168", n = "_children_1wbig_178", b = "_childrenWithoutLabel_1wbig_184", d = "_hideLabel_1wbig_190", r = "_hideLabelActive_1wbig_191", a = "_clearIcon_1wbig_195", s = "_hideClearIcon_1wbig_201", h = "_borderNone_1wbig_205", g = "_fullWidth_1wbig_209", w = {
+  root: e,
+  label: i,
+  error: l,
+  disabled: _,
+  main: o,
+  middleSection: c,
+  labelActive: t,
+  children: n,
+  childrenWithoutLabel: b,
+  hideLabel: d,
+  hideLabelActive: r,
+  clearIcon: a,
+  hideClearIcon: s,
+  borderNone: h,
+  fullWidth: g
+};
+export {
+  h as borderNone,
+  n as children,
+  b as childrenWithoutLabel,
+  a as clearIcon,
+  w as default,
+  _ as disabled,
+  l as error,
+  g as fullWidth,
+  s as hideClearIcon,
+  d as hideLabel,
+  r as hideLabelActive,
+  i as label,
+  t as labelActive,
+  o as main,
+  c as middleSection,
+  e as root
+};

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.utils.js

@@ -0,0 +1,65 @@
+import { getSize as i } from "../../../utils/get-size.js";
+import { resolveTypography as a } from "../../../utils/typography.js";
+const n = (e) => ({
+  "--field-item-border-radius": i(
+    e,
+    "field-item-border-radius"
+  ),
+  "--field-item-border-width": i(
+    e,
+    "field-item-border-width"
+  ),
+  "--field-item-height": i(e, "field-item-height"),
+  "--field-item-spacing-between": i(
+    e,
+    "field-item-spacing-between"
+  ),
+  "--field-item-spacing-horizontal": i(
+    e,
+    "field-item-spacing-horizontal"
+  ),
+  "--field-item-spacing-vertical": i(
+    e,
+    "field-item-spacing-vertical"
+  ),
+  "--field-item-icon-width": i(e, "field-item-icon-width"),
+  "--field-item-icon-height": i(e, "field-item-icon-height"),
+  "--field-item-spacing-input-container-vertical-active": i(
+    e,
+    "field-item-spacing-input-container-vertical-active"
+  )
+}), c = (e) => {
+  switch (e) {
+    case "l":
+      return a("body", "m");
+    case "m":
+      return a("body", "s");
+    case "s":
+      return a("description", "l");
+  }
+}, f = (e) => {
+  switch (e) {
+    case "m":
+      return a("description", "m");
+    case "l":
+      return a("description", "l");
+  }
+}, r = (e) => {
+  const t = c(e), l = f(e);
+  return {
+    ...n(e),
+    "--field-item-label-font-family": t.fontFamily,
+    "--field-item-label-font-weight": t.fontWeight,
+    "--field-item-label-font-size": t.fontSize,
+    "--field-item-label-line-height": t.lineHeight,
+    "--field-item-label-letter-spacing": t.letterSpacing,
+    "--field-item-label-font-family-active": l?.fontFamily,
+    "--field-item-label-font-weight-active": l?.fontWeight,
+    "--field-item-label-font-size-active": l?.fontSize,
+    "--field-item-label-line-height-active": l?.lineHeight,
+    "--field-item-label-letter-spacing-active": l?.letterSpacing
+  };
+};
+export {
+  r as inputBaseWrapperProportionsResolver
+};

package/dist/components/FileUploader/FileUploader.js

@@ -0,0 +1,131 @@
+import { jsx as n, jsxs as p, Fragment as q } from "react/jsx-runtime";
+import { useState as N, useRef as G } from "react";
+import t from "./FileUploader.module.css.js";
+import { isValidFileCount as H, ERROR_TEXT as d, isValidFileSize as J, isValidFileType as K } from "./FileUploader.utils.js";
+import { useLocale as Q } from "../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemUploadCloud as W } from "../../icons/components/OutlineSystemUploadCloud.js";
+import { Typography as V } from "../Typography/Typography.js";
+import { Button as Y } from "../Button/Button.js";
+import { classNames as u } from "../../utils/class-names.js";
+const le = ({
+  onFilesChange: O,
+  files: g,
+  width: R,
+  hasError: S,
+  title: b,
+  description: k,
+  buttonText: E,
+  errorText: z,
+  isMultiple: h,
+  allowedExtensions: L,
+  allowedMimeTypes: j,
+  maxFileSize: y = 20,
+  maxCount: v = 5,
+  className: A,
+  disabled: o = !1,
+  variant: I = "desktop"
+}) => {
+  const { locale: c } = Q(), [U, f] = N(!1), [m, s] = N(""), x = G(null), a = I === "mobile", D = z || m || k, w = u(
+    t.uploader,
+    U && !o && t.dragOver,
+    (S || m) && t.error,
+    o && t.disabled
+  ), B = (e) => {
+    const r = Array.from(e), l = h ? [...g, ...r] : r;
+    O(l), s("");
+  }, M = (e) => {
+    if (e.preventDefault(), e.stopPropagation(), o) return;
+    f(!1);
+    const r = e.dataTransfer.files;
+    r && T(r);
+  }, P = (e) => {
+    e.preventDefault(), f(!0);
+  }, X = () => {
+    f(!1);
+  }, _ = (e) => {
+    if (o) return;
+    const r = e.target.files;
+    r && (T(r), e.target.value = "");
+  }, T = (e) => {
+    const r = g.length + e.length;
+    if (!H(r, v)) {
+      s(d.maxCountText[c](v));
+      return;
+    }
+    const l = Array.from(e).filter((i) => {
+      const F = J(i, y), C = K(
+        i,
+        L,
+        j
+      );
+      return F || s(
+        d.maxFileSizeText[c](i.name, y)
+      ), C || s(d.extText[c](i.name)), F && C;
+    });
+    l.length && B(l);
+  };
+  return /* @__PURE__ */ n("div", { className: u(t.root, A), style: { width: R }, children: /* @__PURE__ */ p(
+    "div",
+    {
+      className: a ? "" : w,
+      onDrop: M,
+      onDragOver: P,
+      onDragLeave: X,
+      onClick: () => x.current?.click(),
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            type: "file",
+            "data-testid": "file-input",
+            ref: x,
+            multiple: h,
+            onChange: _,
+            hidden: !0,
+            disabled: o
+          }
+        ),
+        /* @__PURE__ */ p("div", { className: t.text, children: [
+          !a && /* @__PURE__ */ p(q, { children: [
+            /* @__PURE__ */ n(W, {}),
+            /* @__PURE__ */ n(
+              V,
+              {
+                category: "body",
+                proportions: "lStrong",
+                className: t.labelText,
+                children: b
+              }
+            )
+          ] }),
+          D && /* @__PURE__ */ n(
+            V,
+            {
+              category: "body",
+              proportions: "m",
+              className: u(
+                t.labelDescription,
+                m && t.error,
+                o && t.disabled
+              ),
+              children: D
+            }
+          ),
+          /* @__PURE__ */ n(
+            Y,
+            {
+              size: a ? "m" : "s",
+              variant: "outline",
+              className: a ? t.btnMobile : "",
+              disabled: o,
+              children: E
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  le as FileUploader
+};