alif-ui 1.5.1 → 1.7.0

package/README.md

@@ -23,6 +23,8 @@ yarn add alif-ui
 - `brand`: This prop sets the brand for your application and should be one of the following options: `'alif'`, `'alifshop'`, or `'aliftech'`.
 - `initialMode`: This prop sets the initial theme mode for your application and can be either `'light'` or `'dark'`.
   **Note**: You can easily change the mode with `useMode` hook provided by this library
+- `initialLocale`: This prop sets the initial locale for your application and can be any valid locale string. Currently, it supports `en`, `ru`, and `tj`.
+  **Note**: You can easily change the locale with `useLocale` hook provided by this library.
 
 To use the `alif-ui` components in your project, follow these steps:
 

package/dist/Accordion-DUwW34ke.js

@@ -0,0 +1,90 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { createContext as f, useContext as v } from "react";
+import { classNames as c } from "./utils/class-names.js";
+import { getAccordionStyles as u } from "./components/Accordion/Accordion.utils.js";
+import { Collapse as g } from "./components/Collapse/Collapse.js";
+import { Divider as C } from "./components/Divider/Divider.js";
+import { OutlineNavigationChevronDownSmall as k } from "./icons/components/OutlineNavigationChevronDownSmall.js";
+import { Typography as d } from "./components/Typography/Typography.js";
+const A = "_root_1fkge_1", N = "_header_1fkge_21", y = "_headerOpen_1fkge_37", O = "_titleWrapper_1fkge_41", x = "_title_1fkge_41", b = "_subTitle_1fkge_55", D = "_iconActive_1fkge_60", S = "_collapseContent_1fkge_64", e = {
+  root: A,
+  header: N,
+  headerOpen: y,
+  titleWrapper: O,
+  title: x,
+  subTitle: b,
+  iconActive: D,
+  collapseContent: S
+}, W = ({
+  title: r,
+  subTitle: o,
+  icon: a,
+  onToggle: s,
+  children: n
+}) => {
+  const { isOpen: i } = _(), h = a || /* @__PURE__ */ t(
+    k,
+    {
+      "data-testid": "accordion-icon",
+      className: c(i && e.iconActive)
+    }
+  );
+  return n ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: c(e.header, i && e.headerOpen),
+      onClick: s,
+      children: n
+    }
+  ) : /* @__PURE__ */ l(
+    "div",
+    {
+      className: c(e.header, i && e.headerOpen),
+      onClick: s,
+      children: [
+        /* @__PURE__ */ l("div", { className: e.titleWrapper, children: [
+          /* @__PURE__ */ t(
+            d,
+            {
+              proportions: "h3",
+              category: "heading",
+              className: e.title,
+              children: r
+            }
+          ),
+          h
+        ] }),
+        o && /* @__PURE__ */ t(d, { proportions: "m", category: "body", className: e.subTitle, children: o })
+      ]
+    }
+  );
+}, T = ({ children: r }) => {
+  const { isOpen: o } = _();
+  return /* @__PURE__ */ t(g, { isOpen: o, children: /* @__PURE__ */ t("div", { className: e.collapseContent, children: r }) });
+}, p = f({ isOpen: !1 }), m = ({
+  children: r,
+  className: o,
+  variant: a = "desktop",
+  size: s = "s",
+  type: n = "default",
+  isOpen: i
+}) => /* @__PURE__ */ t(p.Provider, { value: { isOpen: i }, children: /* @__PURE__ */ l(
+  "div",
+  {
+    className: c(e.root, o),
+    style: u(a, s),
+    children: [
+      r,
+      n === "withDivider" && /* @__PURE__ */ t("div", { role: "separator", className: e.divider, children: /* @__PURE__ */ t(C, {}) })
+    ]
+  }
+) });
+m.Summary = W;
+m.Details = T;
+const _ = () => v(p);
+export {
+  m as A,
+  W as a,
+  T as b,
+  _ as u
+};