@alif-ui-test/core 1.11.0

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,85 @@
+import { jsxs as S, jsx as o } from "react/jsx-runtime";
+import { useId as g, useRef as k } from "react";
+import s from "./TextArea.module.css.js";
+import { getTextAreaStyles as B } from "./TextArea.utils.js";
+import { Hinter as E } from "../Hinter/Hinter.js";
+import { classNames as c } from "../../utils/class-names.js";
+import { OutlineSystemClose as F } from "../../icons/components/OutlineSystemClose.js";
+const K = ({
+  className: d,
+  label: p,
+  value: e,
+  maxLength: l,
+  onClear: r,
+  hintText: A,
+  isFilled: N,
+  filledLength: u,
+  style: x,
+  fullWidth: h = !0,
+  size: t = "m",
+  hasError: m = !1,
+  disabled: a = !1,
+  showCorrectHintIcon: y = !1,
+  isHintAlwaysShown: C = !1,
+  showLengthHint: T = !!l,
+  rows: b = 3,
+  ...n
+}) => {
+  const f = g(), D = k(null), I = c(
+    s.root,
+    h && s.fullWidth,
+    a && s.disabled,
+    m && s.error,
+    d
+  ), j = c(r && e && s.spaceClearIcon), w = c(
+    t !== "s" && e && s.filled,
+    t === "s" && !e && s.hideLabel,
+    t === "s" && e && s.hideLabelActive
+  ), M = (i) => {
+    const { tagName: R } = i.target;
+    R !== "TEXTAREA" && i.preventDefault();
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: I,
+      style: B(t, x),
+      onMouseDown: M,
+      children: [
+        /* @__PURE__ */ o("label", { className: w, htmlFor: f, children: p }),
+        /* @__PURE__ */ o(
+          "textarea",
+          {
+            className: j,
+            id: f,
+            value: e,
+            maxLength: l,
+            disabled: a,
+            rows: b,
+            cols: n.cols,
+            ref: D,
+            ...n
+          }
+        ),
+        r && e && /* @__PURE__ */ o(F, { onClick: r, className: s.clearIcon }),
+        /* @__PURE__ */ o(
+          E,
+          {
+            disabled: a,
+            filledLength: u,
+            hasError: m,
+            hintText: A,
+            isFilled: N,
+            isHintAlwaysShown: C,
+            maxLength: l,
+            showCorrectHintIcon: y,
+            showLengthHint: T
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  K as TextArea
+};

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

@@ -0,0 +1,21 @@
+const e = "_root_35o5r_1", o = "_fullWidth_35o5r_61", l = "_error_35o5r_78", r = "_disabled_35o5r_82", _ = "_filled_35o5r_91", t = "_hideLabel_35o5r_102", d = "_hideLabelActive_35o5r_103", c = "_clearIcon_35o5r_164", i = {
+  root: e,
+  fullWidth: o,
+  error: l,
+  disabled: r,
+  filled: _,
+  hideLabel: t,
+  hideLabelActive: d,
+  clearIcon: c
+};
+export {
+  c as clearIcon,
+  i as default,
+  r as disabled,
+  l as error,
+  _ as filled,
+  o as fullWidth,
+  t as hideLabel,
+  d as hideLabelActive,
+  e as root
+};

package/dist/components/TextArea/TextArea.types.js

@@ -0,0 +1 @@
+

package/dist/components/TextArea/TextArea.utils.js

@@ -0,0 +1,55 @@
+import { getSize as t } from "../../utils/get-size.js";
+import { resolveTypography as i } from "../../utils/typography.js";
+const n = (e) => {
+  switch (e) {
+    case "l":
+      return i("body", "m");
+    case "m":
+      return i("body", "s");
+    case "s":
+      return i("description", "l");
+  }
+}, o = (e) => {
+  switch (e) {
+    case "l":
+      return i("description", "l");
+    case "m":
+    case "s":
+      return i("description", "m");
+  }
+}, x = (e, l) => {
+  const a = n(e), r = o(e);
+  return {
+    ...l,
+    "--text-area-border-radius": t(e, "text-area-border-radius"),
+    "--text-area-border-width": t(e, "text-area-border-width"),
+    "--text-area-spacing-horizontal": t(
+      e,
+      "text-area-spacing-horizontal"
+    ),
+    "--text-area-spacing-vertical-default": t(
+      e,
+      "text-area-spacing-vertical-default"
+    ),
+    "--text-area-padding-top": `var(--text-area-spacing-vertical-text-${e})`,
+    "--text-area-spacing-vertical-filled": t(
+      e,
+      "text-area-spacing-vertical-filled"
+    ),
+    "--text-area-label-font-family": a.fontFamily,
+    "--text-area-label-font-size": a.fontSize,
+    "--text-area-label-font-weight": a.fontWeight,
+    "--text-area-label-line-height": a.lineHeight,
+    "--text-area-label-letter-spacing": a.letterSpacing,
+    "--text-area-label-active-font-family": r.fontFamily,
+    "--text-area-label-active-font-size": r.fontSize,
+    "--text-area-label-active-font-weight": r.fontWeight,
+    "--text-area-label-active-line-height": r.lineHeight,
+    "--text-area-label-active-letter-spacing": r.letterSpacing,
+    "--text-area-icon-height": t(e, "text-area-icon-height"),
+    "--text-area-icon-width": t(e, "text-area-icon-width")
+  };
+};
+export {
+  x as getTextAreaStyles
+};

package/dist/components/Timeline/Timeline.context.js

@@ -0,0 +1,8 @@
+import { createSafeContext as e } from "../../utils/create-safe-context/create-safe-context.js";
+const [n, o] = e(
+  "Timeline component was not found in the tree"
+);
+export {
+  n as TimelineContextProvider,
+  o as useTimelineContext
+};

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,43 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Children as n, cloneElement as C, isValidElement as d } from "react";
+import r from "./Timeline.module.css.js";
+import { TimelineContextProvider as c } from "./Timeline.context.js";
+import { TimelineItem as T } from "./TimelineItem/TimelineItem.js";
+import { TimelineOppositeContent as u } from "./TimelineOppositeContent/TimelineOppositeContent.js";
+import { TimelineContent as x } from "./TimelineContent/TimelineContent.js";
+import { classNames as I } from "../../utils/class-names.js";
+const e = ({
+  horizontal: o = !1,
+  active: l = 0,
+  children: i,
+  contentRatio: s = { opposite: 1, main: 1 }
+}) => {
+  const p = I(
+    r.root,
+    o && r.horizontal
+  ), a = n.map(
+    i,
+    (t, f) => d(t) ? C(t, {
+      tabIndex: f
+    }) : t
+  );
+  return /* @__PURE__ */ m(
+    c,
+    {
+      value: {
+        active: l,
+        horizontal: o,
+        countChildren: n.count(i),
+        contentRatio: s
+      },
+      children: /* @__PURE__ */ m("ul", { className: p, children: a })
+    }
+  );
+};
+e.displayName = "Timeline";
+e.Item = T;
+e.OppositeContent = u;
+e.Content = x;
+export {
+  e as Timeline
+};

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

@@ -0,0 +1,9 @@
+const o = "_root_18cyb_1", t = "_horizontal_18cyb_36", r = {
+  root: o,
+  horizontal: t
+};
+export {
+  r as default,
+  t as horizontal,
+  o as root
+};

package/dist/components/Timeline/Timeline.types.js

@@ -0,0 +1 @@
+

package/dist/components/Timeline/Timeline.utils.js

@@ -0,0 +1,5 @@
+const e = (t, r) => r === t ? "active" : r < t ? "completed" : "inactive", u = (t, r = 0) => t === 0 ? "first" : t === r - 1 ? "last" : "middle";
+export {
+  u as getOrder,
+  e as getStatus
+};

package/dist/components/Timeline/TimelineBullet/TimelineBullet.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import s from "../TimelineItem/TimelineItem.module.css.js";
+import { classNames as m } from "../../../utils/class-names.js";
+const i = ({ bullet: t, status: l }) => {
+  const e = m(
+    t ? s.customBullet : s.defaultBullet
+  );
+  return /* @__PURE__ */ o("span", { "data-dot": l, className: e, children: t });
+};
+export {
+  i as TimelineBullet
+};

package/dist/components/Timeline/TimelineContent/TimelineContent.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+import t from "./TimelineContent.module.css.js";
+import { useTimelineContext as s } from "../Timeline.context.js";
+import { classNames as r } from "../../../utils/class-names.js";
+const p = ({ children: o }) => {
+  const { horizontal: e, contentRatio: n } = s(), i = r(
+    e && t.horizontal,
+    t.content
+  );
+  return /* @__PURE__ */ m("div", { style: { flex: n?.main }, className: i, children: o });
+};
+export {
+  p as TimelineContent
+};

package/dist/components/Timeline/TimelineContent/TimelineContent.module.css.js

@@ -0,0 +1,9 @@
+const t = "_content_27ali_1", o = "_horizontal_27ali_5", n = {
+  content: t,
+  horizontal: o
+};
+export {
+  t as content,
+  n as default,
+  o as horizontal
+};

package/dist/components/Timeline/TimelineItem/TimelineItem.js

@@ -0,0 +1,54 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { Children as v } from "react";
+import t from "./TimelineItem.module.css.js";
+import { findChildByType as c, getTimelineItemStyles as N } from "./TimelineItem.utils.js";
+import { useTimelineContext as x } from "../Timeline.context.js";
+import { TimelineBullet as g } from "../TimelineBullet/TimelineBullet.js";
+import { getStatus as j, getOrder as z } from "../Timeline.utils.js";
+import { TimelineOppositeContent as A } from "../TimelineOppositeContent/TimelineOppositeContent.js";
+import { TimelineContent as B } from "../TimelineContent/TimelineContent.js";
+import { classNames as o } from "../../../utils/class-names.js";
+const F = ({
+  children: p,
+  bullet: d,
+  tabIndex: n = 0
+}) => {
+  const { horizontal: s, active: f, countChildren: r } = x(), h = Math.max(0, f), C = o(
+    t.root,
+    s && t.horizontal
+  ), m = v.toArray(p), y = c(
+    m,
+    A
+  ), T = c(m, B), e = j(h, n), l = z(n, r), u = l === "last" || r === 1;
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      style: N(s, l),
+      className: C,
+      children: [
+        y,
+        /* @__PURE__ */ a("div", { className: t.lineContainer, children: [
+          /* @__PURE__ */ i(
+            "span",
+            {
+              "data-line": e === "inactive" ? "inactive" : "completed",
+              className: o(t.line1)
+            }
+          ),
+          /* @__PURE__ */ i(g, { bullet: d, status: e }),
+          !u && /* @__PURE__ */ i(
+            "span",
+            {
+              "data-line": e === "completed" ? "completed" : "inactive",
+              className: o(t.line)
+            }
+          )
+        ] }),
+        T
+      ]
+    }
+  );
+};
+export {
+  F as TimelineItem
+};

package/dist/components/Timeline/TimelineItem/TimelineItem.module.css.js

@@ -0,0 +1,19 @@
+const t = "_root_1xvfj_1", l = "_horizontal_1xvfj_6", o = "_lineContainer_1xvfj_16", n = "_line1_1xvfj_33", e = "_line_1xvfj_16", _ = "_defaultBullet_1xvfj_66", i = "_customBullet_1xvfj_97", s = {
+  root: t,
+  horizontal: l,
+  lineContainer: o,
+  line1: n,
+  line: e,
+  defaultBullet: _,
+  customBullet: i
+};
+export {
+  i as customBullet,
+  s as default,
+  _ as defaultBullet,
+  l as horizontal,
+  e as line,
+  n as line1,
+  o as lineContainer,
+  t as root
+};

package/dist/components/Timeline/TimelineItem/TimelineItem.utils.js

@@ -0,0 +1,21 @@
+import { isValidElement as a } from "react";
+const m = (i, e) => i.find((t) => a(t) && t.type === e), r = (i, e, t) => {
+  const l = {
+    first: 0,
+    last: i ? "0 0 0 var(--time-line-spacing-horizontal-slot)" : "var(--time-line-spacing-vertical-slot) 0 0 0",
+    middle: i ? "0 var(--time-line-spacing-horizontal-slot)" : "var(--time-line-spacing-vertical-slot) 0"
+  }, n = {
+    first: "var(--time-line-line-height-start)",
+    last: "var(--time-line-line-height-default)",
+    middle: "var(--time-line-line-height-default)"
+  };
+  return {
+    ...t,
+    "--time-line-item-spacing": l[e],
+    "--time-line-line-height": n[e]
+  };
+};
+export {
+  m as findChildByType,
+  r as getTimelineItemStyles
+};

package/dist/components/Timeline/TimelineOppositeContent/TimelineOppositeContent.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "react/jsx-runtime";
+import o from "./TimelineOppositeContent.module.css.js";
+import { useTimelineContext as p } from "../Timeline.context.js";
+import { classNames as r } from "../../../utils/class-names.js";
+const f = ({
+  children: t
+}) => {
+  const { horizontal: e, contentRatio: s } = p(), n = r(
+    e && o.horizontal,
+    o.oppositeContent
+  );
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: { flex: s?.opposite },
+      className: n,
+      children: t
+    }
+  );
+};
+export {
+  f as TimelineOppositeContent
+};

package/dist/components/Timeline/TimelineOppositeContent/TimelineOppositeContent.module.css.js

@@ -0,0 +1,9 @@
+const o = "_oppositeContent_oxls0_1", t = "_horizontal_oxls0_6", n = {
+  oppositeContent: o,
+  horizontal: t
+};
+export {
+  n as default,
+  t as horizontal,
+  o as oppositeContent
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,57 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as u } from "react";
+import e from "./Tooltip.module.css.js";
+import { Popover as s } from "../Popover/Popover.js";
+import { Typography as b } from "../Typography/Typography.js";
+import { classNames as v } from "../../utils/class-names.js";
+const V = ({
+  label: n,
+  icon: l,
+  className: p,
+  isOpen: r,
+  children: a,
+  withArrow: m = !0,
+  position: c = "top",
+  offset: f = 2,
+  ...d
+}) => {
+  const [y, t] = u(!1), g = () => {
+    typeof r != "boolean" && t(!0);
+  }, h = () => {
+    typeof r != "boolean" && t(!1);
+  };
+  return /* @__PURE__ */ i(
+    s,
+    {
+      isOpen: r ?? y,
+      withArrow: m,
+      position: c,
+      offset: f,
+      ...d,
+      children: [
+        /* @__PURE__ */ o(s.Trigger, { children: /* @__PURE__ */ o(
+          "div",
+          {
+            className: e.trigger,
+            onMouseEnter: g,
+            onMouseLeave: h,
+            children: a
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          s.Dropdown,
+          {
+            className: v(e.root, e.fadeIn, p),
+            children: /* @__PURE__ */ i("div", { children: [
+              l,
+              /* @__PURE__ */ o(b, { category: "body", proportions: "s", children: n })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as Tooltip
+};

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

@@ -0,0 +1,11 @@
+const t = "_root_8ctuk_1", o = "_trigger_8ctuk_19", r = "_fadeIn_8ctuk_36", e = {
+  root: t,
+  trigger: o,
+  fadeIn: r
+};
+export {
+  e as default,
+  r as fadeIn,
+  t as root,
+  o as trigger
+};

package/dist/components/Tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+

package/dist/components/Transition/Transition.constants.js

@@ -0,0 +1,23 @@
+const t = [
+  "fade",
+  "fade-up",
+  "fade-down",
+  "fade-left",
+  "fade-right",
+  "scale",
+  "scale-x",
+  "scale-y",
+  "skew-up",
+  "skew-down",
+  "rotate-left",
+  "rotate-right",
+  "pop",
+  "pop-top-left",
+  "pop-top-right",
+  "pop-bottom-left",
+  "pop-bottom-right",
+  "collapser"
+];
+export {
+  t as TRANSITIONS
+};

package/dist/components/Transition/Transition.hook.js

@@ -0,0 +1,64 @@
+import { useState as p, useRef as s, useCallback as q, useEffect as y } from "react";
+import { flushSync as j } from "react-dom";
+function B({
+  mounted: r,
+  duration: u,
+  exitDuration: g,
+  onEnter: c,
+  onEntered: a,
+  onExit: o,
+  onExited: f,
+  enterDelay: S,
+  exitDelay: w
+}) {
+  const [k, n] = p(
+    r ? "entered" : "exited"
+  ), [x, C] = p(u), [h, A] = p(r), F = s(!0), i = s(null), l = s(null), m = s(null), b = () => {
+    l.current !== null && clearTimeout(l.current), m.current !== null && clearTimeout(m.current), i.current !== null && cancelAnimationFrame(i.current);
+  }, T = q(
+    (t) => {
+      const e = t, R = e ? u : g;
+      if (C(R), R === 0) {
+        e ? c?.() : o?.(), e ? a?.() : f?.(), n(e ? "entered" : "exited");
+        return;
+      }
+      i.current = requestAnimationFrame(() => {
+        j(() => {
+          n(e ? "pre-entering" : "pre-exiting");
+        }), i.current = requestAnimationFrame(() => {
+          e ? c?.() : o?.(), n(e ? "entering" : "exiting"), l.current = window.setTimeout(() => {
+            e ? a?.() : f?.(), n(e ? "entered" : "exited"), t || A(!1);
+          }, R);
+        });
+      });
+    },
+    [u, g, c, a, o, f]
+  ), d = q(
+    (t) => {
+      b();
+      const e = t ? S : w;
+      if (typeof e != "number" || e <= 0) {
+        T(t);
+        return;
+      }
+      m.current = window.setTimeout(() => {
+        T(t);
+      }, e);
+    },
+    [S, w, T]
+  );
+  return y(() => {
+    if (F.current) {
+      F.current = !1;
+      return;
+    }
+    r && A(!0), d(r);
+  }, [d, r]), y(() => b, []), {
+    transitionStatus: k,
+    transitionDuration: x,
+    shouldRender: h
+  };
+}
+export {
+  B as useTransition
+};

package/dist/components/Transition/Transition.js

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useTransition as T } from "./Transition.hook.js";
+import { getTransitionStyles as x } from "./Transition.utils.js";
+const w = ({
+  children: i,
+  mounted: s,
+  duration: e = 300,
+  enterDelay: l,
+  exitDelay: a,
+  exitDuration: d = 300,
+  onEnter: u,
+  onEntered: c,
+  onExit: f,
+  onExited: m,
+  timingFunction: p,
+  transition: t = "fade"
+}) => {
+  const { transitionDuration: h, transitionStatus: y, shouldRender: v } = T({
+    mounted: s,
+    exitDuration: d,
+    duration: e,
+    enterDelay: l,
+    exitDelay: a,
+    onEnter: u,
+    onEntered: c,
+    onExit: f,
+    onExited: m
+  });
+  if (!v) return null;
+  const n = x({
+    transition: t,
+    duration: h,
+    status: y,
+    timingFunction: p
+  }), r = i(n);
+  return t === "collapser" ? /* @__PURE__ */ o("div", { style: n, children: /* @__PURE__ */ o("div", { style: { overflow: "hidden" }, children: r }) }) : r;
+};
+export {
+  w as Transition
+};

package/dist/components/Transition/Transition.types.js

@@ -0,0 +1 @@
+