@stokelp/ui 1.11.0 → 1.11.1

package/dist/ui.js

@@ -2,56 +2,56 @@
 import { jsx as e, jsxs as d, Fragment as ae } from "react/jsx-runtime";
 import { Accordion as B, Checkbox as S, Dialog as k, ark as T, Portal as Q, Switch as P, Tabs as I, Select as b, DatePicker as l, RadioGroup as _, switchAnatomy as ie, dialogAnatomy as ne, accordionAnatomy as le, checkboxAnatomy as se, tabsAnatomy as de, selectAnatomy as ce, datePickerAnatomy as pe, radioGroupAnatomy as ue } from "@ark-ui/react";
 import { styled as r, splitCssProps as L, Circle as me } from "@stokelp/styled-system/jsx";
-import { accordion as ge, button as he, checkbox as Y, drawer as be, formControl as ve, formLabel as W, formHelperText as xe, heading as ye, switchRecipe as Z, text as fe, textarea as we, tabs as Ce, select as ke, input as Se, inputAddon as _e, inputGroup as Te, datepicker as Ie, tag as X, radioButtonGroup as ze } from "@stokelp/styled-system/recipes";
-import { createContext as Re, forwardRef as f, useContext as Pe, createElement as Fe, useMemo as $ } from "react";
+import { accordion as ge, button as he, checkbox as Y, drawer as be, formControl as ve, formLabel as V, formHelperText as xe, heading as ye, switchRecipe as Z, text as fe, textarea as we, tabs as Ce, select as ke, input as Se, inputAddon as _e, inputGroup as Te, datepicker as Ie, tag as X, radioButtonGroup as Re } from "@stokelp/styled-system/recipes";
+import { createContext as ze, forwardRef as f, useContext as Pe, createElement as Fe, useMemo as $ } from "react";
 import { cx as F, css as A } from "@stokelp/styled-system/css";
 import { defineKeyframes as Be, defineRecipe as w, defineSlotRecipe as v, defineSemanticTokens as De, defineTextStyles as Le, defineTokens as u, defineUtility as Ae, definePreset as Ne } from "@pandacss/dev";
-const O = (...t) => t.filter(Boolean).join(" "), z = (t, o) => {
-  const a = Re(null);
+const O = (...t) => t.filter(Boolean).join(" "), R = (t, o) => {
+  const a = ze(null);
   return {
-    withContext: (c, n, m) => n ? f((s, M) => {
-      const R = Pe(a);
+    withContext: (c, n, m) => n ? f((s, E) => {
+      const z = Pe(a);
       return Fe(c, {
         ...!1,
         ...s,
         ...m == null ? void 0 : m.defaultProps,
-        className: O(R == null ? void 0 : R[n ?? ""], s.className),
-        ref: M
+        className: O(z == null ? void 0 : z[n ?? ""], s.className),
+        ref: E
       });
     }) : c,
-    withProvider: (c, n, m) => f((s, M) => {
-      const [R, V] = t.splitVariantProps({
+    withProvider: (c, n, m) => f((s, E) => {
+      const [z, M] = t.splitVariantProps({
         ...s,
         ...m == null ? void 0 : m.defaultProps
-      }), G = t(R);
+      }), G = t(z);
       return /* @__PURE__ */ e(a.Provider, { value: G, children: /* @__PURE__ */ e(
         c,
         {
-          ref: M,
+          ref: E,
           ...!1,
-          ...V,
-          className: O(G[n ?? ""], V.className)
+          ...M,
+          className: O(G[n ?? ""], M.className)
         }
       ) });
     })
   };
-}, { withProvider: He, withContext: N } = z(ge), Yr = He(r(B.Root), "root"), Zr = N(r(B.Item), "item"), Xr = N(r(B.ItemContent), "itemContent"), Or = N(r(B.ItemIndicator), "itemIndicator", {
+}, { withProvider: We, withContext: N } = R(ge), Yr = We(r(B.Root), "root"), Zr = N(r(B.Item), "item"), Xr = N(r(B.ItemContent), "itemContent"), Or = N(r(B.ItemIndicator), "itemIndicator", {
   defaultProps: {
     children: /* @__PURE__ */ e("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M4.94 6.03L8 9.08333L11.06 6.03L12 6.97L8 10.97L4 6.97L4.94 6.03Z", fill: "currentColor" }) })
   }
-}), Ur = N(r(B.ItemTrigger), "itemTrigger"), j = r("button", he), Ee = f((t, o) => {
+}), Ur = N(r(B.ItemTrigger), "itemTrigger"), j = r("button", he), He = f((t, o) => {
   const [a, i] = Y.splitVariantProps(t), [g, c] = L(i), { children: n, className: m, ...y } = c, s = Y(a);
   return /* @__PURE__ */ d(S.Root, { ref: o, className: F(s.root, A(g), m), ...y, children: [
     /* @__PURE__ */ d(S.Control, { className: s.control, children: [
-      /* @__PURE__ */ e(S.Indicator, { children: /* @__PURE__ */ e(Me, {}) }),
-      /* @__PURE__ */ e(S.Indicator, { indeterminate: !0, children: /* @__PURE__ */ e(Ve, {}) })
+      /* @__PURE__ */ e(S.Indicator, { children: /* @__PURE__ */ e(Ee, {}) }),
+      /* @__PURE__ */ e(S.Indicator, { indeterminate: !0, children: /* @__PURE__ */ e(Me, {}) })
     ] }),
     n && /* @__PURE__ */ e(S.Label, { className: s.label, children: n }),
     /* @__PURE__ */ e(S.HiddenInput, {})
   ] });
 });
-Ee.displayName = "Checkbox";
-const Me = () => /* @__PURE__ */ d("svg", { viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+He.displayName = "Checkbox";
+const Ee = () => /* @__PURE__ */ d("svg", { viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e("title", { children: "Check Icon" }),
   /* @__PURE__ */ e(
     "path",
@@ -60,10 +60,10 @@ const Me = () => /* @__PURE__ */ d("svg", { viewBox: "0 0 12 13", fill: "none",
       fill: "white"
     }
   )
-] }), Ve = () => /* @__PURE__ */ d("svg", { width: "12", height: "13", viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), Me = () => /* @__PURE__ */ d("svg", { width: "12", height: "13", viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e("title", { children: "Minus Icon" }),
   /* @__PURE__ */ e("path", { d: "M3 6H9V7H3V6Z", fill: "white" })
-] }), { withProvider: We, withContext: C } = z(be), qr = We(k.Root, void 0, {
+] }), { withProvider: Ve, withContext: C } = R(be), qr = Ve(k.Root, void 0, {
   defaultProps: {
     unmountOnExit: !0,
     lazyMount: !0
@@ -98,8 +98,8 @@ const ro = C(r(K), "content"), Ye = r("div", ve, {
     ...o ? { "aria-required": !0 } : {}
   };
   return /* @__PURE__ */ e(Ye, { ...i, ...a });
-}, Ze = r("label", W), ao = (t) => {
-  const [o, a] = W.splitVariantProps(t), [i, g] = L(a), { children: c, className: n, addon: m, ...y } = g, s = W(o);
+}, Ze = r("label", V), ao = (t) => {
+  const [o, a] = V.splitVariantProps(t), [i, g] = L(a), { children: c, className: n, addon: m, ...y } = g, s = V(o);
   return /* @__PURE__ */ d(Ze, { className: F(s.root, A(i), n), ...y, children: [
     c,
     m ? /* @__PURE__ */ e(r.span, { className: s.addon, children: m }) : null
@@ -121,18 +121,18 @@ Xe.displayName = "Switch";
 const Oe = (t) => {
   const { as: o = "p", ...a } = t, i = $(() => r(o, fe), [o]);
   return /* @__PURE__ */ e(i, { ...a });
-}, lo = r(T.textarea, we), { withProvider: Ue, withContext: H } = z(Ce), so = Ue(r(I.Root), "root", {
+}, lo = r(T.textarea, we), { withProvider: Ue, withContext: W } = R(Ce), so = Ue(r(I.Root), "root", {
   defaultProps: {
     lazyMount: !0
   }
-}), co = H(r(I.Content), "content"), po = H(r(I.Trigger), "trigger"), qe = H(r(I.Indicator), "indicator"), ee = f(
+}), co = W(r(I.Content), "content"), po = W(r(I.Trigger), "trigger"), qe = W(r(I.Indicator), "indicator"), ee = f(
   ({ children: t, ...o }, a) => /* @__PURE__ */ d(I.List, { ref: a, ...o, children: [
     t,
     /* @__PURE__ */ e(qe, {})
   ] })
 );
 ee.displayName = I.List.displayName;
-const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o === !0 ? a(t) : t, { withProvider: Je, withContext: x } = z(ke), Ke = Je(r(b.Root), "root", {
+const uo = W(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o === !0 ? a(t) : t, { withProvider: Je, withContext: x } = R(ke), Ke = Je(r(b.Root), "root", {
   defaultProps: {
     loopFocus: !0
   }
@@ -186,7 +186,7 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
 }), go = (t) => {
   const { as: o = "div", ...a } = t, i = $(() => r(o), [o]);
   return /* @__PURE__ */ e(i, { ...a });
-}, { withProvider: mt, withContext: p } = z(Ie), gt = mt(l.Root, "root", {
+}, { withProvider: mt, withContext: p } = R(Ie), gt = mt(l.Root, "root", {
   defaultProps: {
     positioning: {
       placement: "bottom-start"
@@ -197,7 +197,7 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
     lazyMount: !0,
     startOfWeek: 6
   }
-}), ht = p(l.Content, "content"), bt = p(l.Control, "control"), vt = p(l.Input, "input"), xt = p(l.MonthSelect, "monthSelect"), yt = p(l.NextTrigger, "nextTrigger"), ft = p(l.Positioner, "positioner"), wt = p(l.PrevTrigger, "prevTrigger"), Ct = p(l.TableBody, "tableBody"), kt = p(l.TableCell, "tableCell"), St = p(l.TableCellTrigger, "tableCellTrigger"), _t = p(l.TableHead, "tableHead"), Tt = p(l.TableHeader, "tableHeader"), It = p(l.Table, "table"), U = p(l.TableRow, "tableRow"), zt = p(l.Trigger, "trigger"), Rt = p(l.ViewControl, "viewControl"), Pt = p(l.View, "view"), Ft = p(l.YearSelect, "yearSelect"), Bt = () => /* @__PURE__ */ e("svg", { width: "23", height: "24", viewBox: "0 0 23 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+}), ht = p(l.Content, "content"), bt = p(l.Control, "control"), vt = p(l.Input, "input"), xt = p(l.MonthSelect, "monthSelect"), yt = p(l.NextTrigger, "nextTrigger"), ft = p(l.Positioner, "positioner"), wt = p(l.PrevTrigger, "prevTrigger"), Ct = p(l.TableBody, "tableBody"), kt = p(l.TableCell, "tableCell"), St = p(l.TableCellTrigger, "tableCellTrigger"), _t = p(l.TableHead, "tableHead"), Tt = p(l.TableHeader, "tableHeader"), It = p(l.Table, "table"), U = p(l.TableRow, "tableRow"), Rt = p(l.Trigger, "trigger"), zt = p(l.ViewControl, "viewControl"), Pt = p(l.View, "view"), Ft = p(l.YearSelect, "yearSelect"), Bt = () => /* @__PURE__ */ e("svg", { width: "23", height: "24", viewBox: "0 0 23 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
   "path",
   {
     d: "M18.2083 4H17.25V2H15.3333V4H7.66667V2H5.75V4H4.79167C3.72792 4 2.88458 4.9 2.88458 6L2.875 20C2.875 21.1 3.72792 22 4.79167 22H18.2083C19.2625 22 20.125 21.1 20.125 20V6C20.125 4.9 19.2625 4 18.2083 4ZM18.2083 20H4.79167V10H18.2083V20ZM18.2083 8H4.79167V6H18.2083V8ZM8.625 14H6.70833V12H8.625V14ZM12.4583 14H10.5417V12H12.4583V14ZM16.2917 14H14.375V12H16.2917V14ZM8.625 18H6.70833V16H8.625V18ZM12.4583 18H10.5417V16H12.4583V18ZM16.2917 18H14.375V16H16.2917V18Z",
@@ -206,10 +206,10 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
 ) }), Dt = () => /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M10.4698 4.94L9.52979 4L5.52979 8L9.52979 12L10.4698 11.06L7.41645 8L10.4698 4.94Z", fill: "currentColor" }) }), Lt = () => /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M6.46979 4L5.52979 4.94L8.58312 8L5.52979 11.06L6.46979 12L10.4698 8L6.46979 4Z", fill: "currentColor" }) }), ho = ({ placeholder: t, ...o }) => /* @__PURE__ */ d(gt, { ...o, children: [
   /* @__PURE__ */ e(bt, { asChild: !0, children: /* @__PURE__ */ d(ut, { children: [
     /* @__PURE__ */ e(vt, { asChild: !0, index: 0, placeholder: t, children: /* @__PURE__ */ e(ct, {}) }),
-    /* @__PURE__ */ e(pt, { children: /* @__PURE__ */ e(zt, { children: /* @__PURE__ */ e(Bt, {}) }) })
+    /* @__PURE__ */ e(pt, { children: /* @__PURE__ */ e(Rt, { children: /* @__PURE__ */ e(Bt, {}) }) })
   ] }) }),
   /* @__PURE__ */ e(ft, { children: /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ e(Pt, { view: "day", children: /* @__PURE__ */ e(l.Context, { children: (a) => /* @__PURE__ */ d(ae, { children: [
-    /* @__PURE__ */ d(Rt, { children: [
+    /* @__PURE__ */ d(zt, { children: [
       /* @__PURE__ */ e(wt, { asChild: !0, children: /* @__PURE__ */ e(j, { p: "space-8", variant: "secondary", size: "sm", children: /* @__PURE__ */ e(Dt, {}) }) }),
       /* @__PURE__ */ e(xt, {}),
       /* @__PURE__ */ e(Ft, {}),
@@ -226,18 +226,22 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
     n,
     /* @__PURE__ */ e(me, { className: F(s.badge) })
   ] });
-}), { withProvider: At, withContext: E } = z(ze), Nt = E(r(_.ItemControl), "itemControl"), Ht = E(r(_.ItemText), "itemText"), Et = f(
+}), { withProvider: At, withContext: H } = R(Re), Nt = H(r(_.ItemControl), "itemControl"), Wt = H(r(_.ItemText), "itemText"), Ht = f(
   ({ children: t, ...o }, a) => /* @__PURE__ */ d(_.Item, { ref: a, ...o, children: [
-    /* @__PURE__ */ e(Ht, { children: t }),
+    /* @__PURE__ */ e(Wt, { children: t }),
     /* @__PURE__ */ e(Nt, {}),
     /* @__PURE__ */ e(_.ItemHiddenInput, {})
   ] })
-), vo = At(r(_.Root), "root"), xo = E(r(Et), "item"), yo = E(r(_.Label), "label"), Mt = {
+), vo = At(r(_.Root), "root", {
+  defaultProps: {
+    orientation: "horizontal"
+  }
+}), xo = H(r(Ht), "item"), yo = H(r(_.Label), "label"), Et = {
   xl: "1536px",
   lg: "1200px",
   md: "900px",
   sm: "600px"
-}, Vt = {
+}, Mt = {
   extend: {
     checked: "&:where(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
     closed: "&:where([data-state=closed])",
@@ -255,7 +259,7 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
     today: "&:where([data-today])",
     underValue: '&:where([data-state="under-value"])'
   }
-}, Wt = {
+}, Vt = {
   "2xl": "672px",
   "3xl": "768px",
   "4xl": "896px",
@@ -1767,17 +1771,14 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
   base: {
     root: {
       display: "inline-flex",
-      borderRadius: "radius-8",
-      overflow: "hidden",
-      border: "1px solid {colors.grey.100}"
+      height: "size-40"
     },
     item: {
       width: "size-64",
-      alignItems: "center",
+      minWidth: "size-64",
       appearance: "none",
       cursor: "pointer",
       display: "inline-flex",
-      justifyContent: "center",
       outline: "none",
       transitionDuration: "normal",
       transitionProperty: "background, border-color, color, box-shadow",
@@ -1787,9 +1788,21 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
       px: "14px",
       py: "space-10",
       whiteSpace: "nowrap",
-      borderRight: {
-        base: "1px solid {colors.grey.100}",
-        _lastOfType: "none"
+      borderColor: "grey.100",
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderRightWidth: 1,
+      borderLeftWidth: 1,
+      "& + &": {
+        borderLeftWidth: 0
+      },
+      _firstOfType: {
+        borderTopLeftRadius: "radius-8",
+        borderBottomLeftRadius: "radius-8"
+      },
+      _lastOfType: {
+        borderTopRightRadius: "radius-8",
+        borderBottomRightRadius: "radius-8"
       },
       background: {
         base: "white",
@@ -1801,11 +1814,13 @@ const uo = H(r(ee), "list"), Qe = ({ children: t, when: o, wrapper: a }) => o ==
       }
     },
     itemText: {
+      flex: 1,
       fontFamily: "satoshi",
       textStyle: "body.md",
       fontWeight: "bold",
       display: "inline-flex",
       alignItems: "center",
+      justifyContent: "center",
       color: {
         base: "primary.500",
         _checked: "white",
@@ -2564,7 +2579,7 @@ function h(t = "") {
   if (o === re)
     return `${parseFloat(t) / Tr}${D}`;
 }
-const zr = u.fontSizes({
+const Rr = u.fontSizes({
   body: {
     lg: { value: h("16px") },
     md: { value: h("14px") },
@@ -2586,7 +2601,7 @@ const zr = u.fontSizes({
       xs: { value: h("18px") }
     }
   }
-}), Rr = u.fontWeights({
+}), zr = u.fontWeights({
   black: { value: "900" },
   bold: { value: "700" },
   extrabold: { value: "800" },
@@ -2684,8 +2699,8 @@ const zr = u.fontSizes({
   colors: vr,
   durations: xr,
   easings: yr,
-  fontSizes: zr,
-  fontWeights: Rr,
+  fontSizes: Rr,
+  fontWeights: zr,
   fonts: Br,
   letterSpacings: Pr,
   lineHeights: Fr,
@@ -2709,8 +2724,8 @@ const zr = u.fontSizes({
     recipes: "*"
   },
   theme: {
-    breakpoints: Mt,
-    containerSizes: Wt,
+    breakpoints: Et,
+    containerSizes: Vt,
     keyframes: jt,
     recipes: sr,
     semanticTokens: pr,
@@ -2719,7 +2734,7 @@ const zr = u.fontSizes({
     tokens: Lr
   },
   utilities: Nr,
-  conditions: Vt
+  conditions: Mt
 });
 export {
   Yr as Accordion,
@@ -2729,7 +2744,7 @@ export {
   Ur as AccordionItemTrigger,
   go as Box,
   j as Button,
-  Ee as Checkbox,
+  He as Checkbox,
   ho as DatePicker,
   qr as Drawer,
   Qr as DrawerBody,