@okam/stack-ui 1.44.5 → 2.0.0

package/index58.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import { ButtonComponent as c } from "./index8.mjs";
+import { Button as c } from "./index8.mjs";
 import p from "./index48.mjs";
-function h(e) {
-  const { ariaLabel: o, icon: i, customTheme: f, themeName: t = "printButton", tokens: r, ...m } = e, a = () => {
+function h(o) {
+  const { ariaLabel: e, icon: i, customTheme: s, themeName: t = "printButton", tokens: r, ...a } = o, m = () => {
     typeof window < "u" && typeof window.print == "function" && window.print();
   };
   return /* @__PURE__ */ n(
@@ -11,9 +11,9 @@ function h(e) {
     {
       themeName: `${t}.button`,
       tokens: r,
-      "aria-label": o,
-      handlePress: a,
-      ...m,
+      "aria-label": e,
+      handlePress: m,
+      ...a,
       children: /* @__PURE__ */ n(p, { themeName: `${t}.icon`, icon: i ?? "Print" })
     }
   );

package/index59.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),N=require("react"),v=require("react-aria"),b=require("./index88.js"),C=require("./index8.js"),j=require("./index48.js");function L(h){const{sharingLinksList:p,id:m,isOpen:l,setIsOpen:d,onShare:k,themeName:a="shareButton",tokens:o,customTheme:c}=h,w=b(`${a}.linksList`,{...o,isOpen:l},c),t=v.useFocusManager(),f=n=>{n.key==="Escape"&&d(!1);const{listDirection:u}=o??{};u==="row"&&(n.key==="ArrowRight"&&(t?.focusNext({wrap:!0}),n.preventDefault()),n.key==="ArrowLeft"&&(t?.focusPrevious({wrap:!0}),n.preventDefault())),u==="column"&&(n.key==="ArrowDown"&&(t?.focusNext({wrap:!0}),n.preventDefault()),n.key==="ArrowUp"&&(t?.focusPrevious({wrap:!0}),n.preventDefault()))};return s.jsx("div",{className:w,id:m,role:"listbox",tabIndex:-1,onKeyDown:f,children:p?.map(n=>{const{ariaLabel:u,onClick:x,href:e,icon:r,key:i}=n;return s.jsx(C.ButtonComponent,{themeName:`${a}.link`,tokens:{...o,isOpen:l},handlePress:()=>{k?.(i),x?.(i)},"aria-label":u,...e!=null&&e!==""?{href:e,rel:"noopener noreferrer",target:"_blank",as:"a"}:{},role:"option",children:s.jsx(j,{themeName:`${a}.linkIcons`,icon:r})},i)})})}function S(h){const{ariaLabel:p,icon:m,id:l,sharingLinksList:d,onShare:k,customTheme:a,themeName:o="shareButton",tokens:c,...w}=h,[t,f]=N.useState(!1),n=b(`${o}.container`,c,a),u=e=>{f(!t),!t&&setTimeout(()=>{e.target.parentElement?.lastChild?.firstChild?.focus()})},x=e=>{const r=e.currentTarget.firstChild,i=e.currentTarget.lastChild,y=i.firstChild,g=i.lastChild,{listDirection:D}=c??{};D==="row"&&(e.key==="ArrowRight"&&e.target===r&&(y?.focus(),e.preventDefault()),e.key==="ArrowLeft"&&e.target===r&&(g.focus(),e.preventDefault())),D==="column"&&(e.key==="ArrowDown"&&e.target===r&&(y?.focus(),e.preventDefault()),e.key==="ArrowUp"&&e.target===r&&(g.focus(),e.preventDefault())),e.key==="Escape"&&(f(!1),r?.focus()),document.activeElement===i&&r?.focus()};return s.jsx(v.FocusScope,{autoFocus:!0,restoreFocus:!0,contain:t,children:s.jsxs("div",{className:n,onKeyDown:x,children:[s.jsx(C.ButtonWithForwardRef,{themeName:`${o}.button`,tokens:{...c,isOpen:t},"aria-label":p,"aria-haspopup":"listbox","aria-expanded":t,...t&&{"aria-controls":l},handlePress:u,...w,children:s.jsx(j,{themeName:`${o}.icon`,icon:m??"Share"})}),t&&s.jsx(L,{id:l,sharingLinksList:d,onShare:k,isOpen:t,setIsOpen:f,themeName:o,customTheme:a,tokens:c})]})})}exports.IconsContainer=L;exports.ShareButton=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),N=require("react"),v=require("react-aria"),b=require("./index88.js"),j=require("./index8.js"),C=require("./index48.js");function L(h){const{sharingLinksList:p,id:d,isOpen:l,setIsOpen:m,onShare:k,themeName:a="shareButton",tokens:o,customTheme:c}=h,w=b(`${a}.linksList`,{...o,isOpen:l},c),t=v.useFocusManager(),f=n=>{n.key==="Escape"&&m(!1);const{listDirection:u}=o??{};u==="row"&&(n.key==="ArrowRight"&&(t?.focusNext({wrap:!0}),n.preventDefault()),n.key==="ArrowLeft"&&(t?.focusPrevious({wrap:!0}),n.preventDefault())),u==="column"&&(n.key==="ArrowDown"&&(t?.focusNext({wrap:!0}),n.preventDefault()),n.key==="ArrowUp"&&(t?.focusPrevious({wrap:!0}),n.preventDefault()))};return s.jsx("div",{className:w,id:d,role:"listbox",tabIndex:-1,onKeyDown:f,children:p?.map(n=>{const{ariaLabel:u,onClick:x,href:e,icon:r,key:i}=n;return s.jsx(j.Button,{themeName:`${a}.link`,tokens:{...o,isOpen:l},handlePress:()=>{k?.(i),x?.(i)},"aria-label":u,...e!=null&&e!==""?{href:e,rel:"noopener noreferrer",target:"_blank",as:"a"}:{},role:"option",children:s.jsx(C,{themeName:`${a}.linkIcons`,icon:r})},i)})})}function S(h){const{ariaLabel:p,icon:d,id:l,sharingLinksList:m,onShare:k,customTheme:a,themeName:o="shareButton",tokens:c,...w}=h,[t,f]=N.useState(!1),n=b(`${o}.container`,c,a),u=e=>{f(!t),!t&&setTimeout(()=>{e.target.parentElement?.lastChild?.firstChild?.focus()})},x=e=>{const r=e.currentTarget.firstChild,i=e.currentTarget.lastChild,y=i.firstChild,g=i.lastChild,{listDirection:D}=c??{};D==="row"&&(e.key==="ArrowRight"&&e.target===r&&(y?.focus(),e.preventDefault()),e.key==="ArrowLeft"&&e.target===r&&(g.focus(),e.preventDefault())),D==="column"&&(e.key==="ArrowDown"&&e.target===r&&(y?.focus(),e.preventDefault()),e.key==="ArrowUp"&&e.target===r&&(g.focus(),e.preventDefault())),e.key==="Escape"&&(f(!1),r?.focus()),document.activeElement===i&&r?.focus()};return s.jsx(v.FocusScope,{autoFocus:!0,restoreFocus:!0,contain:t,children:s.jsxs("div",{className:n,onKeyDown:x,children:[s.jsx(j.ButtonWithForwardRef,{themeName:`${o}.button`,tokens:{...c,isOpen:t},"aria-label":p,"aria-haspopup":"listbox","aria-expanded":t,...t&&{"aria-controls":l},handlePress:u,...w,children:s.jsx(C,{themeName:`${o}.icon`,icon:d??"Share"})}),t&&s.jsx(L,{id:l,sharingLinksList:m,onShare:k,isOpen:t,setIsOpen:f,themeName:o,customTheme:a,tokens:c})]})})}exports.IconsContainer=L;exports.ShareButton=S;

package/index59.mjs

@@ -3,9 +3,9 @@ import { jsx as i, jsxs as L } from "react/jsx-runtime";
 import { useState as N } from "react";
 import { FocusScope as b, useFocusManager as A } from "react-aria";
 import x from "./index88.mjs";
-import { ButtonWithForwardRef as O, ButtonComponent as T } from "./index8.mjs";
+import { ButtonWithForwardRef as B, Button as O } from "./index8.mjs";
 import C from "./index48.mjs";
-function B(h) {
+function T(h) {
   const { sharingLinksList: p, id: m, isOpen: u, setIsOpen: d, onShare: k, themeName: a = "shareButton", tokens: r, customTheme: c } = h, w = x(`${a}.linksList`, { ...r, isOpen: u }, c), t = A();
   return /* @__PURE__ */ i("div", { className: w, id: m, role: "listbox", tabIndex: -1, onKeyDown: (o) => {
     o.key === "Escape" && d(!1);
@@ -14,7 +14,7 @@ function B(h) {
   }, children: p?.map((o) => {
     const { ariaLabel: l, onClick: D, href: e, icon: n, key: s } = o;
     return /* @__PURE__ */ i(
-      T,
+      O,
       {
         themeName: `${a}.link`,
         tokens: { ...r, isOpen: u },
@@ -51,7 +51,7 @@ function P(h) {
     v === "row" && (e.key === "ArrowRight" && e.target === n && (y?.focus(), e.preventDefault()), e.key === "ArrowLeft" && e.target === n && (g.focus(), e.preventDefault())), v === "column" && (e.key === "ArrowDown" && e.target === n && (y?.focus(), e.preventDefault()), e.key === "ArrowUp" && e.target === n && (g.focus(), e.preventDefault())), e.key === "Escape" && (f(!1), n?.focus()), document.activeElement === s && n?.focus();
   }, children: [
     /* @__PURE__ */ i(
-      O,
+      B,
       {
         themeName: `${r}.button`,
         tokens: { ...c, isOpen: t },
@@ -65,7 +65,7 @@ function P(h) {
       }
     ),
     t && /* @__PURE__ */ i(
-      B,
+      T,
       {
         id: u,
         sharingLinksList: d,
@@ -80,6 +80,6 @@ function P(h) {
   ] }) });
 }
 export {
-  B as IconsContainer,
+  T as IconsContainer,
   P as ShareButton
 };

package/index6.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";const n=require("react/jsx-runtime"),u=require("react"),h=require("./index82.js"),o=require("./index7.js"),$=require("./index8.js"),j=require("./index48.js");function q(c){const{title:i,button:s,content:e,themeName:t="alerts.item",tokens:l,icon:r,id:m,swiperSlideIndex:a=0}=c,{activeIndex:x}=h.useCarousel(),d=x===a;return i==null&&s==null&&e==null&&r==null?null:n.jsxs(n.Fragment,{children:[r!=null&&n.jsx(j,{icon:r,themeName:`${t}.icon`,tokens:l}),(i!=null||s!=null||e!=null)&&n.jsxs(o.Box,{themeName:`${t}.container`,tokens:l,children:[i!=null&&n.jsx(o.Box,{as:"span",themeName:`${t}.title`,tokens:l,id:m,children:i}),s!=null&&n.jsx($.ButtonComponent,{tabIndex:d?0:-1,themeName:`${t}.button`,tokens:l,...s}),e!=null&&(u.isValidElement(e)?u.cloneElement(e,{themeName:`${t}.content`,tokens:l}):e)]})]})}module.exports=q;
+"use strict";const n=require("react/jsx-runtime"),u=require("react"),h=require("./index82.js"),o=require("./index7.js"),$=require("./index8.js"),j=require("./index48.js");function q(c){const{title:i,button:s,content:e,themeName:t="alerts.item",tokens:l,icon:r,id:m,swiperSlideIndex:a=0}=c,{activeIndex:x}=h.useCarousel(),d=x===a;return i==null&&s==null&&e==null&&r==null?null:n.jsxs(n.Fragment,{children:[r!=null&&n.jsx(j,{icon:r,themeName:`${t}.icon`,tokens:l}),(i!=null||s!=null||e!=null)&&n.jsxs(o.Box,{themeName:`${t}.container`,tokens:l,children:[i!=null&&n.jsx(o.Box,{as:"span",themeName:`${t}.title`,tokens:l,id:m,children:i}),s!=null&&n.jsx($.Button,{tabIndex:d?0:-1,themeName:`${t}.button`,tokens:l,...s}),e!=null&&(u.isValidElement(e)?u.cloneElement(e,{themeName:`${t}.content`,tokens:l}):e)]})]})}module.exports=q;

package/index6.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as i, Fragment as h, jsx as r } from "react/jsx-runtime";
-import { cloneElement as f, isValidElement as x } from "react";
+import { isValidElement as f, cloneElement as x } from "react";
 import { useCarousel as N } from "./index82.mjs";
 import { Box as u } from "./index7.mjs";
-import { ButtonComponent as I } from "./index8.mjs";
+import { Button as I } from "./index8.mjs";
 import $ from "./index48.mjs";
 function E(a) {
   const { title: l, button: o, content: e, themeName: t = "alerts.item", tokens: n, icon: m, id: s, swiperSlideIndex: c = 0 } = a, { activeIndex: p } = N(), d = p === c;
@@ -12,7 +12,7 @@ function E(a) {
     (l != null || o != null || e != null) && /* @__PURE__ */ i(u, { themeName: `${t}.container`, tokens: n, children: [
       l != null && /* @__PURE__ */ r(u, { as: "span", themeName: `${t}.title`, tokens: n, id: s, children: l }),
       o != null && /* @__PURE__ */ r(I, { tabIndex: d ? 0 : -1, themeName: `${t}.button`, tokens: n, ...o }),
-      e != null && (x(e) ? f(e, {
+      e != null && (f(e) ? x(e, {
         themeName: `${t}.content`,
         tokens: n
       }) : e)

package/index67.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),p=require("react"),M=require("react-aria"),f=require("./index7.js"),k=require("./index8.js");function c({href:n="#main",themeName:e="skipToMain",tokens:i,customTheme:a,children:r,ariaLabel:o,...t}){return u.jsx(k.ButtonComponent,{as:"a",href:n,themeName:e,tokens:i,customTheme:a,"aria-label":o,...t,children:r})}function m({as:n="main",id:e="main",tabIndex:i=-1,themeName:a="main",tokens:r,customTheme:o,children:t,...l}){const s=p.useRef(null),{landmarkProps:d}=M.useLandmark({role:"main"},s);return u.jsx(f.BoxWithForwardRef,{as:n,id:e,themeName:a,tokens:r,customTheme:o,ref:s,...l,...d,tabIndex:i,children:t})}c.displayName="SkipToMain";m.displayName="Main";exports.Main=m;exports.SkipToMain=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),p=require("react"),M=require("react-aria"),f=require("./index7.js"),k=require("./index8.js");function c({href:i="#main",themeName:n="skipToMain",tokens:e,customTheme:a,children:r,ariaLabel:t,...o}){return u.jsx(k.Button,{as:"a",href:i,themeName:n,tokens:e,customTheme:a,"aria-label":t,...o,children:r})}function l({as:i="main",id:n="main",tabIndex:e=-1,themeName:a="main",tokens:r,customTheme:t,children:o,...m}){const s=p.useRef(null),{landmarkProps:d}=M.useLandmark({role:"main"},s);return u.jsx(f.BoxWithForwardRef,{as:i,id:n,themeName:a,tokens:r,customTheme:t,ref:s,...m,...d,tabIndex:e,children:o})}c.displayName="SkipToMain";l.displayName="Main";exports.Main=l;exports.SkipToMain=c;

package/index67.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as p } from "react/jsx-runtime";
-import { useRef as l } from "react";
-import { useLandmark as u } from "react-aria";
+import { useRef as u } from "react";
+import { useLandmark as l } from "react-aria";
 import { BoxWithForwardRef as d } from "./index7.mjs";
-import { ButtonComponent as k } from "./index8.mjs";
+import { Button as k } from "./index8.mjs";
 function M({
   href: o = "#main",
   themeName: a = "skipToMain",
-  tokens: i,
-  customTheme: n,
+  tokens: n,
+  customTheme: i,
   children: r,
   ariaLabel: m,
   ...t
@@ -19,8 +19,8 @@ function M({
       as: "a",
       href: o,
       themeName: a,
-      tokens: i,
-      customTheme: n,
+      tokens: n,
+      customTheme: i,
       "aria-label": m,
       ...t,
       children: r
@@ -30,14 +30,14 @@ function M({
 function c({
   as: o = "main",
   id: a = "main",
-  tabIndex: i = -1,
-  themeName: n = "main",
+  tabIndex: n = -1,
+  themeName: i = "main",
   tokens: r,
   customTheme: m,
   children: t,
-  ...f
+  ...s
 }) {
-  const e = l(null), { landmarkProps: s } = u(
+  const e = u(null), { landmarkProps: f } = l(
     {
       role: "main"
     },
@@ -48,13 +48,13 @@ function c({
     {
       as: o,
       id: a,
-      themeName: n,
+      themeName: i,
       tokens: r,
       customTheme: m,
       ref: e,
-      ...f,
       ...s,
-      tabIndex: i,
+      ...f,
+      tabIndex: n,
       children: t
     }
   );

package/index81.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("@okam/core-lib"),u=require("react"),t=s.createCtxNullable(),d=t[0],a=t[1];function l(r){const{state:o,children:c,TransitionAnimation:e}=r,n=u.useMemo(()=>({state:o,TransitionAnimation:e}),[o,e]);return i.jsx(a,{value:n,children:c})}exports.AccordionContextProvider=l;exports.useAccordionCtx=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("@okam/react-utils"),u=require("react"),e=s.createCtxNullable(),d=e[0],a=e[1];function l(r){const{state:o,children:c,TransitionAnimation:t}=r,n=u.useMemo(()=>({state:o,TransitionAnimation:t}),[o,t]);return i.jsx(a,{value:n,children:c})}exports.AccordionContextProvider=l;exports.useAccordionCtx=d;

package/index81.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { createCtxNullable as s } from "@okam/core-lib";
+import { createCtxNullable as s } from "@okam/react-utils";
 import { useMemo as m } from "react";
 const r = s(), l = r[0], a = r[1];
 function f(n) {

package/index82.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),S=require("@okam/core-lib"),e=require("react"),[p,R]=S.createCtxNullable();function v(x){const{controller:o,children:f,id:t,slides:s,modules:n,...l}=x,[i,u]=e.useState(),c=e.useRef(null),a=e.useRef(null),r=e.useRef(null),[C,d]=e.useState(0),w=e.useMemo(()=>({swiper:r.current?.swiper,activeIndex:C,setActiveIndex:d,swiperRef:r,slides:s,controller:o??i,setController:u,prevNavigationRef:c,nextNavigationRef:a,id:t,modules:n,swiperProps:l}),[r,C,d,s,o,i,u,c,a,t,n,l]);return P.jsx(R,{value:w,children:f})}const b=v,g=p;exports.CarouselContextProvider=v;exports.SwiperControllerContextProvider=b;exports.useCarousel=p;exports.useSwiperController=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),S=require("@okam/react-utils"),e=require("react"),[p,R]=S.createCtxNullable();function v(x){const{controller:t,children:f,id:o,slides:s,modules:n,...l}=x,[i,u]=e.useState(),c=e.useRef(null),a=e.useRef(null),r=e.useRef(null),[C,d]=e.useState(0),w=e.useMemo(()=>({swiper:r.current?.swiper,activeIndex:C,setActiveIndex:d,swiperRef:r,slides:s,controller:t??i,setController:u,prevNavigationRef:c,nextNavigationRef:a,id:o,modules:n,swiperProps:l}),[r,C,d,s,t,i,u,c,a,o,n,l]);return P.jsx(R,{value:w,children:f})}const g=v,m=p;exports.CarouselContextProvider=v;exports.SwiperControllerContextProvider=g;exports.useCarousel=p;exports.useSwiperController=m;

package/index82.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as x } from "react/jsx-runtime";
-import { createCtxNullable as w } from "@okam/core-lib";
+import { createCtxNullable as w } from "@okam/react-utils";
 import { useState as v, useRef as o, useMemo as P } from "react";
 const [R, N] = w();
 function S(C) {

package/index83.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("@okam/core-lib"),e=require("react"),[u,c]=o.createCtx();function l({children:s}){const[t,r]=e.useState(!1);e.useEffect(()=>{r(!0)},[]);const n=e.useMemo(()=>({isClient:t}),[t]);return i.jsx(c,{value:n,children:s})}exports.IsClientContextProvider=l;exports.useIsClient=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("@okam/react-utils"),e=require("react"),[u,c]=o.createCtx();function l({children:s}){const[t,r]=e.useState(!1);e.useEffect(()=>{r(!0)},[]);const n=e.useMemo(()=>({isClient:t}),[t]);return i.jsx(c,{value:n,children:s})}exports.IsClientContextProvider=l;exports.useIsClient=u;

package/index83.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
-import { createCtx as i } from "@okam/core-lib";
+import { createCtx as i } from "@okam/react-utils";
 import { useState as n, useEffect as u, useMemo as f } from "react";
 const [a, l] = i();
 function p({ children: t }) {

package/index84.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),C=require("@okam/core-lib"),M=require("react"),v=require("react-stately"),P=require("./index86.js"),i=C.createCtxNullable(),d=i[0],q=i[1];function S({children:s,defaultSelectedKey:e,defaultIsOpen:u,onCloseCallback:c,onOpenCallback:a,tabs:x,openBtn:r,closeBtn:n,...l}){const t=v.useTabListState({...l,children:x,defaultSelectedKey:e}),b=M.useMemo(()=>({openBtn:r,closeBtn:n,tabState:t,defaultSelectedKey:e}),[r,n,t,e]);return o.jsx(q,{value:b,children:o.jsx(P.SidePanelContextProvider,{onCloseCallback:()=>{c?.(),t?.setSelectedKey?.(e)},onOpenCallback:a,defaultIsOpen:u,defaultSelectedKey:e.toString(),children:s})})}exports.MenuContextProvider=S;exports.useMenu=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),M=require("@okam/react-utils"),b=require("react"),v=require("react-stately"),P=require("./index86.js"),s=M.createCtxNullable(),d=s[0],q=s[1];function S({children:i,defaultSelectedKey:e,defaultIsOpen:u,onCloseCallback:c,onOpenCallback:a,tabs:l,openBtn:r,closeBtn:n,...x}){const t=v.useTabListState({...x,children:l,defaultSelectedKey:e}),C=b.useMemo(()=>({openBtn:r,closeBtn:n,tabState:t,defaultSelectedKey:e}),[r,n,t,e]);return o.jsx(q,{value:C,children:o.jsx(P.SidePanelContextProvider,{onCloseCallback:()=>{c?.(),t?.setSelectedKey?.(e)},onOpenCallback:a,defaultIsOpen:u,defaultSelectedKey:e.toString(),children:i})})}exports.MenuContextProvider=S;exports.useMenu=d;

package/index84.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { createCtxNullable as p } from "@okam/core-lib";
+import { createCtxNullable as p } from "@okam/react-utils";
 import { useMemo as b } from "react";
 import { useTabListState as l } from "react-stately";
 import { SidePanelContextProvider as v } from "./index86.mjs";

package/index85.mjs

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { createContext as u, use as i } from "react";
-const o = u(null);
+import { use as u, createContext as i } from "react";
+const o = i(null);
 function s(t) {
   const { children: r, state: n } = t;
   return /* @__PURE__ */ e(o, { value: n, children: r });
 }
 function a() {
-  const t = i(o);
+  const t = u(o);
   return t !== null ? t : null;
 }
 export {

package/index86.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),b=require("@okam/core-lib"),n=require("react"),x=require("react-stately"),q=require("./index79.js"),[R,B]=b.createCtx();function h(a){const{children:u,defaultSelectedKey:o,onOpenCallback:c,onCloseCallback:i,defaultIsOpen:p=!1,onOpenChange:d,isOpen:P,defaultOpen:f,type:O="dialog"}=a,S=f??p,g=n.useRef(null),y=n.useRef(null),e=x.useOverlayTriggerState({isOpen:P,defaultOpen:S,onOpenChange(s){if(d?.(s),!s){i?.();return}c?.()}}),{triggerProps:t,overlayProps:r,labelProps:l}=q({type:O},e),v=n.useMemo(()=>({labelProps:l,overlayProps:r,defaultSelectedKey:o,overlayState:e,buttonProps:{closeButtonProps:t,closeButtonRef:y,openButtonProps:t,openButtonRef:g}}),[l,r,o,e,t]);return C.jsx(B,{value:v,children:u})}exports.SidePanelContextProvider=h;exports.useSidePanel=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),b=require("@okam/react-utils"),n=require("react"),x=require("react-stately"),q=require("./index79.js"),[R,B]=b.createCtx();function h(a){const{children:u,defaultSelectedKey:o,onOpenCallback:c,onCloseCallback:i,defaultIsOpen:p=!1,onOpenChange:d,isOpen:P,defaultOpen:f,type:O="dialog"}=a,S=f??p,g=n.useRef(null),y=n.useRef(null),e=x.useOverlayTriggerState({isOpen:P,defaultOpen:S,onOpenChange(s){if(d?.(s),!s){i?.();return}c?.()}}),{triggerProps:t,overlayProps:r,labelProps:l}=q({type:O},e),v=n.useMemo(()=>({labelProps:l,overlayProps:r,defaultSelectedKey:o,overlayState:e,buttonProps:{closeButtonProps:t,closeButtonRef:y,openButtonProps:t,openButtonRef:g}}),[l,r,o,e,t]);return C.jsx(B,{value:v,children:u})}exports.SidePanelContextProvider=h;exports.useSidePanel=R;

package/index86.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as C } from "react/jsx-runtime";
-import { createCtx as S } from "@okam/core-lib";
+import { createCtx as S } from "@okam/react-utils";
 import { useRef as a, useMemo as b } from "react";
 import { useOverlayTriggerState as x } from "react-stately";
 import B from "./index79.mjs";

package/index87.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react");function u(){const e=o.createContext(void 0);function r(){const t=o.use(e);return t===void 0?null:t}return[r,e.Provider]}const i={typography:()=>""},[s,l]=u();function c({children:e,brandTheme:r=i}){const t=o.useMemo(()=>({brandTheme:r}),[r]);return n.jsx(l,{value:t,children:e})}function a(e){return({children:t})=>n.jsx(c,{brandTheme:e,children:t})}exports.ThemeContextProvider=c;exports.createCtxNullable=u;exports.createThemeProvider=a;exports.useTheme=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("@okam/react-utils"),c=require("react"),u={typography:()=>""},[s,m]=i.createCtxNullableStrict();function n({children:e,brandTheme:t=u}){const r=c.useMemo(()=>({brandTheme:t}),[t]);return o.jsx(m,{value:r,children:e})}function a(e){return({children:r})=>o.jsx(n,{brandTheme:e,children:r})}exports.ThemeContextProvider=n;exports.createThemeProvider=a;exports.useTheme=s;

package/index87.mjs

@@ -1,27 +1,19 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import { useMemo as n, createContext as u, use as c } from "react";
-function i() {
-  const e = u(void 0);
-  function r() {
-    const t = c(e);
-    return t === void 0 ? null : t;
-  }
-  return [r, e.Provider];
-}
-const m = {
+import { createCtxNullableStrict as m } from "@okam/react-utils";
+import { useMemo as n } from "react";
+const i = {
   typography: () => ""
-}, [f, s] = i();
-function v({ children: e, brandTheme: r = m }) {
-  const t = n(() => ({ brandTheme: r }), [r]);
-  return /* @__PURE__ */ o(s, { value: t, children: e });
+}, [p, c] = m();
+function u({ children: e, brandTheme: t = i }) {
+  const r = n(() => ({ brandTheme: t }), [t]);
+  return /* @__PURE__ */ o(c, { value: r, children: e });
 }
-function h(e) {
-  return ({ children: t }) => /* @__PURE__ */ o(v, { brandTheme: e, children: t });
+function v(e) {
+  return ({ children: r }) => /* @__PURE__ */ o(u, { brandTheme: e, children: r });
 }
 export {
-  v as ThemeContextProvider,
-  i as createCtxNullable,
-  h as createThemeProvider,
-  f as useTheme
+  u as ThemeContextProvider,
+  v as createThemeProvider,
+  p as useTheme
 };

package/index89.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),x=require("@okam/core-lib"),T=require("radashi"),a=require("react"),b=require("./index80.js"),i=x.createCtx(),q=i[0],v=i[1];function C({useTranslationFunc:c,children:u,namespace:o="common",translateFunctionName:e="t"}){const l=c(o),d=(t,n)=>(b.log(`translation function not found: translateFunctionName: ${e}`,"warn",{key:t,obj:n,namespace:o}),t),r=T.get(l,e,d),s=a.useCallback((t,n)=>n==null?r(t):r(t,n),[r]),f=a.useMemo(()=>({t:s}),[s]);return g.jsx(v,{value:f,children:u})}exports.TranslationContextProvider=C;exports.useTranslation=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),x=require("@okam/react-utils"),T=require("radashi"),a=require("react"),q=require("./index80.js"),i=x.createCtx(),v=i[0],C=i[1];function b({useTranslationFunc:c,children:u,namespace:o="common",translateFunctionName:e="t"}){const l=c(o),d=(t,n)=>(q.log(`translation function not found: translateFunctionName: ${e}`,"warn",{key:t,obj:n,namespace:o}),t),r=T.get(l,e,d),s=a.useCallback((t,n)=>n==null?r(t):r(t,n),[r]),f=a.useMemo(()=>({t:s}),[s]);return g.jsx(C,{value:f,children:u})}exports.TranslationContextProvider=b;exports.useTranslation=v;

package/index89.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as m } from "react/jsx-runtime";
-import { createCtx as f } from "@okam/core-lib";
+import { createCtx as f } from "@okam/react-utils";
 import { get as p } from "radashi";
 import { useCallback as x, useMemo as C } from "react";
 import { log as b } from "./index80.mjs";

package/index90.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("@okam/core-lib"),s=require("react"),t=i.createCtx(),l=t[0],S=t[1];function h(o){const{userQuery:c,children:u}=o,[e,r]=s.useState(c),a=s.useMemo(()=>({userSearchQuery:e,setUserSearchQuery:r}),[e,r]);return n.jsx(S,{value:a,children:u})}exports.SearchBarProvider=h;exports.useUserQueryValHook=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("@okam/react-utils"),s=require("react"),t=i.createCtx(),l=t[0],S=t[1];function h(c){const{userQuery:o,children:u}=c,[e,r]=s.useState(o),a=s.useMemo(()=>({userSearchQuery:e,setUserSearchQuery:r}),[e,r]);return n.jsx(S,{value:a,children:u})}exports.SearchBarProvider=h;exports.useUserQueryValHook=l;

package/index90.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as a } from "react/jsx-runtime";
-import { createCtx as n } from "@okam/core-lib";
+import { createCtx as n } from "@okam/react-utils";
 import { useState as i, useMemo as m } from "react";
 const o = n(), p = o[0], h = o[1];
 function x(s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/stack-ui",
-  "version": "1.44.5",
+  "version": "2.0.0",
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
   },
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.10.1",
-    "@okam/core-lib": "1.17.3",
     "@okam/logger": "1.1.0",
+    "@okam/react-utils": "0.0.1",
     "@react-aria/selection": "^3.27.0",
     "@react-aria/utils": "^3.32.0",
     "@react-spring/web": "^10.0.3",
@@ -49,4 +49,4 @@
     "tailwind-variants": "^3.2.2",
     "usehooks-ts": "^3.1.0"
   }
-}
+}

package/providers/Theme/index.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { TTheme, TThemePanelContext, TThemeProviderProps } from './interface';
-export declare function createCtxNullable<A extends object | null>(): readonly [() => A | null, import('react').Provider<A | undefined>];
 declare const useTheme: () => TThemePanelContext<TTheme> | null;
 export declare function ThemeContextProvider({ children, brandTheme }: TThemeProviderProps<TTheme>): import("react/jsx-runtime").JSX.Element;
 export declare function createThemeProvider(brandTheme: TTheme): ({ children }: {

package/theme/Alerts/index.d.ts

@@ -3,46 +3,46 @@ declare const alertsTheme: {
     carouselWrapper: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex flex-wrap justify-between items-center gap-4 relative", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex flex-wrap justify-between items-center gap-4 relative", unknown, unknown, undefined>>;
     closeBtn: import('tailwind-variants').TVReturnType<{} | {
         type: {
-            button: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            button: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
-            menu: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            menu: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
         };
         buttonStyle: {
-            default: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            default: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
-            outline: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            outline: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
-            hollow: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            hollow: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
         };
         intent: {
-            danger: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            danger: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
-            error: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            error: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
         };
         size: {
-            default: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            default: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
-            large: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            large: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
         };
         shape: {
-            rounded: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            rounded: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
-            circular: import('tailwind-merge').ClassNameValue | {
-                base?: import('tailwind-merge').ClassNameValue;
+            circular: import('tailwind-variants').ClassValue | {
+                base?: import('tailwind-variants').ClassValue;
             };
         };
     }, undefined, "self-end", {
@@ -143,36 +143,36 @@ declare const alertsTheme: {
         container: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "", unknown, unknown, undefined>>;
         title: import('tailwind-variants').TVReturnType<{} | {
             size: {
-                h1: import('tailwind-merge').ClassNameValue | {};
-                h2: import('tailwind-merge').ClassNameValue | {};
-                h3: import('tailwind-merge').ClassNameValue | {};
-                h4: import('tailwind-merge').ClassNameValue | {};
-                h5: import('tailwind-merge').ClassNameValue | {};
-                h6: import('tailwind-merge').ClassNameValue | {};
-                leading: import('tailwind-merge').ClassNameValue | {};
-                paragraph: import('tailwind-merge').ClassNameValue | {};
-                footnotes: import('tailwind-merge').ClassNameValue | {};
-                xs: import('tailwind-merge').ClassNameValue | {};
+                h1: import('tailwind-variants').ClassValue | {};
+                h2: import('tailwind-variants').ClassValue | {};
+                h3: import('tailwind-variants').ClassValue | {};
+                h4: import('tailwind-variants').ClassValue | {};
+                h5: import('tailwind-variants').ClassValue | {};
+                h6: import('tailwind-variants').ClassValue | {};
+                leading: import('tailwind-variants').ClassValue | {};
+                paragraph: import('tailwind-variants').ClassValue | {};
+                footnotes: import('tailwind-variants').ClassValue | {};
+                xs: import('tailwind-variants').ClassValue | {};
             };
             font: {
-                body: import('tailwind-merge').ClassNameValue | {};
+                body: import('tailwind-variants').ClassValue | {};
             };
             weight: {
-                normal: import('tailwind-merge').ClassNameValue | {};
-                light: import('tailwind-merge').ClassNameValue | {};
-                bold: import('tailwind-merge').ClassNameValue | {};
+                normal: import('tailwind-variants').ClassValue | {};
+                light: import('tailwind-variants').ClassValue | {};
+                bold: import('tailwind-variants').ClassValue | {};
             };
             color: {
-                gray: import('tailwind-merge').ClassNameValue | {};
-                white: import('tailwind-merge').ClassNameValue | {};
+                gray: import('tailwind-variants').ClassValue | {};
+                white: import('tailwind-variants').ClassValue | {};
             };
             isError: {
-                true: import('tailwind-merge').ClassNameValue | {};
+                true: import('tailwind-variants').ClassValue | {};
             };
             align: {
-                center: import('tailwind-merge').ClassNameValue | {};
-                left: import('tailwind-merge').ClassNameValue | {};
-                right: import('tailwind-merge').ClassNameValue | {};
+                center: import('tailwind-variants').ClassValue | {};
+                left: import('tailwind-variants').ClassValue | {};
+                right: import('tailwind-variants').ClassValue | {};
             };
         }, undefined, undefined, {
             size: {
@@ -309,36 +309,36 @@ declare const alertsTheme: {
         }, undefined, undefined, unknown, unknown, undefined>>>;
         content: import('tailwind-variants').TVReturnType<{} | {
             size: {
-                h1: import('tailwind-merge').ClassNameValue | {};
-                h2: import('tailwind-merge').ClassNameValue | {};
-                h3: import('tailwind-merge').ClassNameValue | {};
-                h4: import('tailwind-merge').ClassNameValue | {};
-                h5: import('tailwind-merge').ClassNameValue | {};
-                h6: import('tailwind-merge').ClassNameValue | {};
-                leading: import('tailwind-merge').ClassNameValue | {};
-                paragraph: import('tailwind-merge').ClassNameValue | {};
-                footnotes: import('tailwind-merge').ClassNameValue | {};
-                xs: import('tailwind-merge').ClassNameValue | {};
+                h1: import('tailwind-variants').ClassValue | {};
+                h2: import('tailwind-variants').ClassValue | {};
+                h3: import('tailwind-variants').ClassValue | {};
+                h4: import('tailwind-variants').ClassValue | {};
+                h5: import('tailwind-variants').ClassValue | {};
+                h6: import('tailwind-variants').ClassValue | {};
+                leading: import('tailwind-variants').ClassValue | {};
+                paragraph: import('tailwind-variants').ClassValue | {};
+                footnotes: import('tailwind-variants').ClassValue | {};
+                xs: import('tailwind-variants').ClassValue | {};
             };
             font: {
-                body: import('tailwind-merge').ClassNameValue | {};
+                body: import('tailwind-variants').ClassValue | {};
             };
             weight: {
-                normal: import('tailwind-merge').ClassNameValue | {};
-                light: import('tailwind-merge').ClassNameValue | {};
-                bold: import('tailwind-merge').ClassNameValue | {};
+                normal: import('tailwind-variants').ClassValue | {};
+                light: import('tailwind-variants').ClassValue | {};
+                bold: import('tailwind-variants').ClassValue | {};
             };
             color: {
-                gray: import('tailwind-merge').ClassNameValue | {};
-                white: import('tailwind-merge').ClassNameValue | {};
+                gray: import('tailwind-variants').ClassValue | {};
+                white: import('tailwind-variants').ClassValue | {};
             };
             isError: {
-                true: import('tailwind-merge').ClassNameValue | {};
+                true: import('tailwind-variants').ClassValue | {};
             };
             align: {
-                center: import('tailwind-merge').ClassNameValue | {};
-                left: import('tailwind-merge').ClassNameValue | {};
-                right: import('tailwind-merge').ClassNameValue | {};
+                center: import('tailwind-variants').ClassValue | {};
+                left: import('tailwind-variants').ClassValue | {};
+                right: import('tailwind-variants').ClassValue | {};
             };
         }, undefined, undefined, {
             size: {