@serendie/ui 3.2.0 → 3.2.1-dev.202604251106

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,17 +1,12 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolMenu as u, SerendieSymbolChevronDown as y } from "@serendie/symbols";
-import { Button as g } from "../Button/Button.js";
-import { IconButton as h } from "../IconButton/IconButton.js";
-import { useAutoPortalContainer as f } from "../../hooks/useAutoPortalContainer.js";
-import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as b } from "../../styled-system/css/sva.js";
-import { MenuRoot as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
-import { MenuTrigger as I } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
-import { MenuPositioner as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
-import { MenuContent as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
-import { MenuItemGroup as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
-import { MenuItem as M } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
-const w = b({
+import { menu_exports as t } from "../../node_modules/@ark-ui/react/dist/components/menu/menu.js";
+import { Portal as u } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { SerendieSymbolMenu as g, SerendieSymbolChevronDown as h } from "@serendie/symbols";
+import { Button as x } from "../Button/Button.js";
+import { IconButton as f } from "../IconButton/IconButton.js";
+import { useAutoPortalContainer as b } from "../../hooks/useAutoPortalContainer.js";
+import { sva as S } from "../../styled-system/css/sva.js";
+const I = S({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
@@ -83,18 +78,18 @@ const w = b({
       transition: "transform 0.2s"
     }
   }
-}), O = ({
-  styleType: d = "default",
-  title: n,
-  items: a,
-  disabled: s,
-  icon: l,
-  portalled: i = !0,
-  ...c
+}), z = ({
+  styleType: a = "default",
+  title: s,
+  items: l,
+  disabled: i,
+  icon: c,
+  portalled: d = !0,
+  ...p
 }) => {
-  const o = w(), { triggerRef: r, portalContainerRef: p } = f(i);
+  const o = I(), { triggerRef: r, portalContainerRef: y } = b(d);
   return /* @__PURE__ */ m(
-    S,
+    t.Root,
     {
       positioning: {
         offset: {
@@ -102,47 +97,47 @@ const w = b({
           crossAxis: 0
         }
       },
-      ...c,
+      ...p,
       children: [
-        /* @__PURE__ */ e(I, { asChild: !0, children: d === "iconButton" ? /* @__PURE__ */ e(
-          h,
+        /* @__PURE__ */ e(t.Trigger, { asChild: !0, children: a === "iconButton" ? /* @__PURE__ */ e(
+          f,
           {
             ref: r,
-            icon: l || /* @__PURE__ */ e(u, { className: o.buttonIcon }),
+            icon: c || /* @__PURE__ */ e(g, { className: o.buttonIcon }),
             shape: "rectangle",
-            disabled: s,
+            disabled: i,
             styleType: "outlined",
-            title: n
+            title: s
           }
         ) : /* @__PURE__ */ e(
-          g,
+          x,
           {
             ref: r,
             styleType: "rectangle",
             size: "medium",
-            disabled: s,
-            rightIcon: /* @__PURE__ */ e(y, { className: o.buttonIcon }),
+            disabled: i,
+            rightIcon: /* @__PURE__ */ e(h, { className: o.buttonIcon }),
             className: o.button,
-            children: n
+            children: s
           }
         ) }),
-        /* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(C, { className: o.content, children: /* @__PURE__ */ e(_, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
-          M,
+        /* @__PURE__ */ e(u, { disabled: !d, container: y, children: /* @__PURE__ */ e(t.Positioner, { children: /* @__PURE__ */ e(t.Content, { className: o.content, children: /* @__PURE__ */ e(t.ItemGroup, { className: o.itemGroup, children: l.map((n) => /* @__PURE__ */ m(
+          t.Item,
           {
-            value: t.value,
+            value: n.value,
             className: o.item,
             children: [
-              t.icon && /* @__PURE__ */ e("div", { className: o.itemIcon, children: t.icon }),
-              t.label
+              n.icon && /* @__PURE__ */ e("div", { className: o.itemIcon, children: n.icon }),
+              n.label
             ]
           },
-          t.value
+          n.value
         )) }) }) }) })
       ]
     }
   );
 };
 export {
-  O as DropdownMenu,
-  w as DropdownMenuStyle
+  z as DropdownMenu,
+  I as DropdownMenuStyle
 };

package/dist/components/IconButton/IconButton.js

@@ -1,8 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
 import c from "react";
-import { cva as a } from "../../styled-system/css/cva.js";
-import { cx as m } from "../../styled-system/css/cx.js";
-const e = a({
+import { cx as a } from "../../styled-system/css/cx.js";
+import { cva as m } from "../../styled-system/css/cva.js";
+const e = m({
   base: {
     position: "relative",
     display: "inline-flex",
@@ -105,7 +105,7 @@ const e = a({
 }), g = c.forwardRef(
   ({ icon: o, className: s, ...r }, n) => {
     const [i, t] = e.splitVariantProps(r), l = e(i);
-    return /* @__PURE__ */ d("button", { ref: n, className: m(l, s), ...t, children: o });
+    return /* @__PURE__ */ d("button", { ref: n, className: a(l, s), ...t, children: o });
   }
 );
 export {

package/dist/components/List/ListItem.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { NotificationBadge as b } from "../NotificationBadge/NotificationBadge.js";
-import { sva as v } from "../../styled-system/css/sva.js";
 import { cx as o } from "../../styled-system/css/cx.js";
 import { css as c } from "../../styled-system/css/css.js";
+import { sva as v } from "../../styled-system/css/sva.js";
 const p = v({
   slots: [
     "root",

package/dist/components/ModalDialog/ModalDialog.js

@@ -1,17 +1,11 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { Button as i } from "../Button/Button.js";
-import { useTranslations as y } from "../../i18n/index.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { dialog_exports as s } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog.js";
 import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as f } from "../../styled-system/css/sva.js";
-import { DialogRoot as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
-import { DialogBackdrop as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
-import { DialogPositioner as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
-import { DialogContent as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
-import { cx as v } from "../../styled-system/css/cx.js";
-import { DialogTitle as I } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
-import { DialogDescription as k } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
-import { DialogCloseTrigger as C } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
-const N = f({
+import { Button as i } from "../Button/Button.js";
+import { useTranslations as h } from "../../i18n/index.js";
+import { cx as u } from "../../styled-system/css/cx.js";
+import { sva as b } from "../../styled-system/css/sva.js";
+const f = b({
   slots: [
     "backdrop",
     "content",
@@ -75,32 +69,32 @@ const N = f({
       }
     }
   }
-}), q = ({
-  isOpen: n,
+}), D = ({
+  isOpen: d,
   title: a,
-  cancelButtonLabel: d,
-  submitButtonLabel: r,
-  onButtonClick: m,
-  submitButtonProps: l,
-  children: p,
-  className: c,
-  ...t
+  cancelButtonLabel: r,
+  submitButtonLabel: m,
+  onButtonClick: l,
+  submitButtonProps: p,
+  children: c,
+  className: g,
+  ...o
 }) => {
-  const g = y(), s = N(t);
-  return /* @__PURE__ */ e(h, { open: n, ...t, children: /* @__PURE__ */ o(x, { children: [
-    /* @__PURE__ */ e(u, { className: s.backdrop }),
-    /* @__PURE__ */ e(b, { children: /* @__PURE__ */ o(D, { className: v(s.content, c), children: [
-      /* @__PURE__ */ o("div", { className: s.contentInner, children: [
-        /* @__PURE__ */ e(I, { className: s.title, children: a }),
-        /* @__PURE__ */ e(k, { className: s.description, children: p })
+  const y = h(), t = f(o);
+  return /* @__PURE__ */ e(s.Root, { open: d, ...o, children: /* @__PURE__ */ n(x, { children: [
+    /* @__PURE__ */ e(s.Backdrop, { className: t.backdrop }),
+    /* @__PURE__ */ e(s.Positioner, { children: /* @__PURE__ */ n(s.Content, { className: u(t.content, g), children: [
+      /* @__PURE__ */ n("div", { className: t.contentInner, children: [
+        /* @__PURE__ */ e(s.Title, { className: t.title, children: a }),
+        /* @__PURE__ */ e(s.Description, { className: t.description, children: c })
       ] }),
-      /* @__PURE__ */ o("div", { className: s.buttonWrapper, children: [
-        /* @__PURE__ */ e(i, { ...l, onClick: m, children: r }),
-        /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: d || g("modalDialog.close") }) })
+      /* @__PURE__ */ n("div", { className: t.buttonWrapper, children: [
+        /* @__PURE__ */ e(i, { ...p, onClick: l, children: m }),
+        /* @__PURE__ */ e(s.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: r || y("modalDialog.close") }) })
       ] })
     ] }) })
   ] }) });
 };
 export {
-  q as ModalDialog
+  D as ModalDialog
 };

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { sva as m } from "../../styled-system/css/sva.js";
 import { cx as a } from "../../styled-system/css/cx.js";
+import { sva as m } from "../../styled-system/css/sva.js";
 const n = m({
   slots: ["root", "text"],
   base: {

package/dist/components/Pagination/Pagination.js

@@ -1,17 +1,12 @@
-import { jsx as e, jsxs as C, Fragment as c } from "react/jsx-runtime";
-import { SerendieSymbolChevronLeft as _, SerendieSymbolChevronRight as I } from "@serendie/symbols";
-import N, { useState as j } from "react";
+import { jsx as e, jsxs as _, Fragment as h } from "react/jsx-runtime";
+import { pagination_exports as s } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination.js";
+import { SerendieSymbolChevronLeft as I, SerendieSymbolChevronRight as N } from "@serendie/symbols";
+import j, { useState as z } from "react";
 import { IconButton as m } from "../IconButton/IconButton.js";
-import { useTranslations as z } from "../../i18n/index.js";
-import { sva as R } from "../../styled-system/css/sva.js";
-import { PaginationRoot as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
-import { cx as O } from "../../styled-system/css/cx.js";
-import { PaginationContext as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
-import { PaginationPrevTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
-import { PaginationItem as L } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
-import { PaginationEllipsis as B } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
-import { PaginationNextTrigger as E } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
-const M = R({
+import { useTranslations as R } from "../../i18n/index.js";
+import { cx as w } from "../../styled-system/css/cx.js";
+import { sva as O } from "../../styled-system/css/sva.js";
+const W = O({
   slots: ["root", "item", "ellipsis", "prevTrigger", "nextTrigger"],
   base: {
     root: {
@@ -81,38 +76,38 @@ const M = R({
   defaultVariants: {
     size: "medium"
   }
-}), Z = N.forwardRef(
+}), A = j.forwardRef(
   ({
-    count: d,
-    pageSize: p = 1,
-    page: r,
-    onPageChange: l,
-    siblingCount: h = 2,
-    className: y,
-    size: f = "medium",
-    ...u
+    count: p,
+    pageSize: c = 1,
+    page: l,
+    onPageChange: g,
+    siblingCount: y = 2,
+    className: f,
+    size: u = "medium",
+    ...b
   }, P) => {
-    const [b, v] = j(1), a = M({ size: f }), x = (t) => {
-      r || v(t.page), l == null || l(t);
-    }, i = z(), T = {
-      count: d,
-      pageSize: p,
-      siblingCount: h,
-      ...r ? { page: r } : { page: b },
-      onPageChange: x
+    const [x, v] = z(1), a = W({ size: u }), T = (i) => {
+      l || v(i.page), g == null || g(i);
+    }, t = R(), S = {
+      count: p,
+      pageSize: c,
+      siblingCount: y,
+      ...l ? { page: l } : { page: x },
+      onPageChange: T
     };
     return /* @__PURE__ */ e(
-      w,
+      s.Root,
       {
         ref: P,
-        className: O(a.root, y),
-        ...T,
-        ...u,
-        children: /* @__PURE__ */ e(W, { children: (t) => {
-          const n = t.page <= 1, S = Math.ceil(d / p), o = t.page >= S;
-          return /* @__PURE__ */ C(c, { children: [
+        className: w(a.root, f),
+        ...S,
+        ...b,
+        children: /* @__PURE__ */ e(s.Context, { children: (i) => {
+          const n = i.page <= 1, C = Math.ceil(p / c), o = i.page >= C;
+          return /* @__PURE__ */ _(h, { children: [
             /* @__PURE__ */ e(
-              F,
+              s.PrevTrigger,
               {
                 className: a.prevTrigger,
                 disabled: n,
@@ -120,51 +115,51 @@ const M = R({
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(_, {}),
+                    icon: /* @__PURE__ */ e(I, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",
-                    "aria-label": i(n ? "pagination.firstPage" : "pagination.previousPage"),
+                    "aria-label": t(n ? "pagination.firstPage" : "pagination.previousPage"),
                     disabled: n,
-                    title: i(n ? "pagination.firstPage" : "pagination.previousPage")
+                    title: t(n ? "pagination.firstPage" : "pagination.previousPage")
                   }
                 )
               }
             ),
-            t.pages.map(
-              (s, g) => s.type === "page" ? /* @__PURE__ */ e(
-                L,
+            i.pages.map(
+              (r, d) => r.type === "page" ? /* @__PURE__ */ e(
+                s.Item,
                 {
-                  ...s,
+                  ...r,
                   className: a.item,
                   asChild: !0,
                   children: /* @__PURE__ */ e(
                     m,
                     {
-                      icon: /* @__PURE__ */ e(c, { children: s.value }),
+                      icon: /* @__PURE__ */ e(h, { children: r.value }),
                       shape: "rectangle",
                       styleType: "ghost",
                       size: "small",
-                      "aria-label": i("pagination.goToPage", {
-                        page: s.value
+                      "aria-label": t("pagination.goToPage", {
+                        page: r.value
                       }),
-                      title: i("pagination.goToPage", { page: s.value })
+                      title: t("pagination.goToPage", { page: r.value })
                     }
                   )
                 },
-                g
+                d
               ) : /* @__PURE__ */ e(
-                B,
+                s.Ellipsis,
                 {
-                  index: g,
+                  index: d,
                   className: a.ellipsis,
                   children: "…"
                 },
-                g
+                d
               )
             ),
             /* @__PURE__ */ e(
-              E,
+              s.NextTrigger,
               {
                 className: a.nextTrigger,
                 disabled: o,
@@ -172,13 +167,13 @@ const M = R({
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(I, {}),
+                    icon: /* @__PURE__ */ e(N, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",
-                    "aria-label": i(o ? "pagination.lastPage" : "pagination.nextPage"),
+                    "aria-label": t(o ? "pagination.lastPage" : "pagination.nextPage"),
                     disabled: o,
-                    title: i(o ? "pagination.lastPage" : "pagination.nextPage")
+                    title: t(o ? "pagination.lastPage" : "pagination.nextPage")
                   }
                 )
               }
@@ -190,6 +185,6 @@ const M = R({
   }
 );
 export {
-  Z as Pagination,
-  M as PaginationStyle
+  A as Pagination,
+  W as PaginationStyle
 };

package/dist/components/RadioButton/RadioButton.js

@@ -1,32 +1,28 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { radio_group_exports as s } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group.js";
 import x from "../../assets/radioChecked.svg.js";
 import h from "../../assets/radioUnchecked.svg.js";
-import { sva as f } from "../../styled-system/css/sva.js";
-import { cx as i } from "../../styled-system/css/cx.js";
+import { cx as c } from "../../styled-system/css/cx.js";
 import { css as g } from "../../styled-system/css/css.js";
-import { RadioGroupItem as I } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
-import { RadioGroupItemContext as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
-import { RadioGroupItemControl as b } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
-import { RadioGroupItemText as m } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-text.js";
-import { RadioGroupItemHiddenInput as C } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
-const k = {
+import { sva as f } from "../../styled-system/css/sva.js";
+const I = {
   flexShrink: 0,
   cursor: "pointer",
   ".group:has(:focus-visible) &": {
     backgroundColor: "sd.system.color.interaction.selectedSurface",
     borderRadius: "sd.system.dimension.radius.full"
   }
-}, R = {
+}, S = {
   color: "sd.system.color.impression.primary",
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, _ = {
+}, b = {
   color: "sd.system.color.component.outlineDim",
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, c = f({
+}, n = f({
   slots: [
     "item",
     "itemControl",
@@ -46,9 +42,9 @@ const k = {
       cursor: "pointer",
       position: "relative"
     },
-    itemControl: k,
-    checkedIcon: R,
-    unCheckedIcon: _,
+    itemControl: I,
+    checkedIcon: S,
+    unCheckedIcon: b,
     itemTextGroup: {
       display: "flex",
       flexFlow: "column"
@@ -75,38 +71,38 @@ const k = {
       }
     }
   }
-}), V = ({
-  value: n,
-  label: t,
-  helperText: s,
+}), R = ({
+  value: m,
+  label: r,
+  helperText: t,
   className: d,
   ...a
 }) => {
-  const [l, p] = c.splitVariantProps(a), o = c(l), y = i(
-    o.item,
-    s && g({ alignItems: "flex-start" })
+  const [l, p] = n.splitVariantProps(a), e = n(l), y = c(
+    e.item,
+    t && g({ alignItems: "flex-start" })
   );
-  return /* @__PURE__ */ r(
-    I,
+  return /* @__PURE__ */ i(
+    s.Item,
     {
-      value: n,
-      className: i("group", y, d),
+      value: m,
+      className: c("group", y, d),
       ...p,
       children: [
-        /* @__PURE__ */ e(S, { children: (u) => /* @__PURE__ */ e(b, { className: o.itemControl, asChild: !0, children: u.checked ? /* @__PURE__ */ e(x, { className: o.checkedIcon }) : /* @__PURE__ */ e(h, { className: o.unCheckedIcon }) }) }),
-        /* @__PURE__ */ r("div", { className: o.itemTextGroup, children: [
-          t && /* @__PURE__ */ e(m, { className: o.itemText, children: t }),
-          s && /* @__PURE__ */ e(m, { className: o.helperText, children: s })
+        /* @__PURE__ */ o(s.ItemContext, { children: (u) => /* @__PURE__ */ o(s.ItemControl, { className: e.itemControl, asChild: !0, children: u.checked ? /* @__PURE__ */ o(x, { className: e.checkedIcon }) : /* @__PURE__ */ o(h, { className: e.unCheckedIcon }) }) }),
+        /* @__PURE__ */ i("div", { className: e.itemTextGroup, children: [
+          r && /* @__PURE__ */ o(s.ItemText, { className: e.itemText, children: r }),
+          t && /* @__PURE__ */ o(s.ItemText, { className: e.helperText, children: t })
         ] }),
-        /* @__PURE__ */ e(C, {})
+        /* @__PURE__ */ o(s.ItemHiddenInput, {})
       ]
     }
   );
 };
 export {
-  V as RadioButton,
-  c as RadioButtonStyle,
-  R as radioCheckedIconCss,
-  k as radioIconCss,
-  _ as radioUncheckedIconCss
+  R as RadioButton,
+  n as RadioButtonStyle,
+  S as radioCheckedIconCss,
+  I as radioIconCss,
+  b as radioUncheckedIconCss
 };

package/dist/components/RadioButton/RadioGroup.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { RadioGroupRoot as p } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-root.js";
-const u = ({
+import { radio_group_exports as p } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group.js";
+const e = ({
   children: o,
   ...r
-}) => /* @__PURE__ */ t(p, { ...r, children: o });
+}) => /* @__PURE__ */ t(p.Root, { ...r, children: o });
 export {
-  u as RadioGroup
+  e as RadioGroup
 };