@forgedevstack/bear 1.2.0 → 1.2.1

package/dist/components/TimePicker/components/TimePickerDialDropdown/TimePickerDialDropdown.js

@@ -1,41 +1,41 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useState as R, useCallback as v } from "react";
-import { cn as o } from "../../../../utils/cn.js";
+import { cn as n } from "../../../../utils/cn.js";
 import { TIMEPICKER_DEFAULT_TRANSLATIONS as B, CLOCK_HOURS_12 as L, TIMEPICKER_FOOTER_CLASSES as D, TIMEPICKER_CLEAR_BUTTON_CLASSES as K, TIMEPICKER_CONFIRM_BUTTON_CLASSES as z, TIMEPICKER_DROPDOWN_CLASSES as w } from "../../TimePicker.constants.js";
 import { ClockFaceSvg as F } from "../../helpers/ClockFaceSvg.js";
-const x = "bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blue-50 dark:bear-bg-blue-900/30 bear-rounded bear-px-1", _ = "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1", G = ({
-  selectedHour: i,
+const k = "bear-text-pink-600 dark:bear-text-pink-400 bear-font-bold bear-bg-pink-50 dark:bear-bg-pink-900/30 bear-rounded bear-px-1", x = "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1", G = ({
+  selectedHour: b,
   setSelectedHour: s,
   selectedMinute: d,
   setSelectedMinute: m,
-  period: u,
-  setPeriod: k,
+  period: _,
+  setPeriod: p,
   format: a,
-  hours: p,
+  hours: u,
   minutes: h,
   timeValue: T,
   clearable: S,
-  onChange: l,
+  onChange: o,
   onConfirm: E,
   onClose: C,
   translations: N
 }) => {
-  const [I, c] = R("hour"), b = { ...B, ...N }, P = a === "12h" ? i === 12 ? 12 : i % 12 : i, y = d, A = P.toString().padStart(2, "0"), M = y.toString().padStart(2, "0"), O = a === "12h" ? [...L] : p, t = I === "hour", f = t ? O : h, g = v((r) => {
+  const [I, c] = R("hour"), i = { ...B, ...N }, P = a === "12h" ? b === 12 ? 12 : b % 12 : b, y = d, A = P.toString().padStart(2, "0"), M = y.toString().padStart(2, "0"), O = a === "12h" ? [...L] : u, t = I === "hour", f = t ? O : h, g = v((r) => {
     t ? (s(a === "12h" && r === 0 ? 12 : r), c("minute")) : m(r);
   }, [t, a, s, m]);
-  return /* @__PURE__ */ n("div", { className: o(w, "Bear-TimePicker__dial bear-w-72"), children: [
-    /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2", children: b.selectTime }),
-    /* @__PURE__ */ n("div", { className: "Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4", children: [
+  return /* @__PURE__ */ l("div", { className: n(w, "Bear-TimePicker__dial bear-w-72"), children: [
+    /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2", children: i.selectTime }),
+    /* @__PURE__ */ l("div", { className: "Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4", children: [
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: () => c("hour"),
-          className: o(
+          className: n(
             "Bear-TimePicker__dial-hour-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",
-            t ? x : _
+            t ? k : x
           ),
-          "aria-label": b.hour,
+          "aria-label": i.hour,
           children: A
         }
       ),
@@ -45,21 +45,21 @@ const x = "bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blu
         {
           type: "button",
           onClick: () => c("minute"),
-          className: o(
+          className: n(
             "Bear-TimePicker__dial-minute-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",
-            t ? _ : x
+            t ? x : k
           ),
-          "aria-label": b.minute,
+          "aria-label": i.minute,
           children: M
         }
       ),
       a === "12h" && /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5 bear-ml-2", children: ["AM", "PM"].map((r) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => k(r),
-          className: o(
+          onClick: () => p(r),
+          className: n(
             "Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",
-            u === r ? "bear-text-blue-600 dark:bear-text-blue-400 bear-font-medium" : "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"
+            _ === r ? "bear-text-pink-600 dark:bear-text-pink-400 bear-font-medium" : "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"
           ),
           children: r
         },
@@ -72,16 +72,16 @@ const x = "bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blu
         values: f,
         isHourMode: t,
         format: a,
-        selectedHour: i,
+        selectedHour: b,
         selectedMinute: d,
         onSelect: g
       }
     ) }),
-    /* @__PURE__ */ n("div", { className: D, children: [
+    /* @__PURE__ */ l("div", { className: D, children: [
       S && T && /* @__PURE__ */ e("button", { onClick: () => {
-        l == null || l(null), C();
-      }, className: K, children: b.cancel }),
-      /* @__PURE__ */ e("button", { onClick: E, className: z, children: b.ok })
+        o == null || o(null), C();
+      }, className: K, children: i.cancel }),
+      /* @__PURE__ */ e("button", { onClick: E, className: z, children: i.ok })
     ] })
   ] });
 };

package/dist/components/TimePicker/helpers/ClockFaceSvg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),x=16,S=14,O=.85,R=.6,b=30,n=90,l=Math.PI/180,f=({values:o,isHourMode:t,format:_,selectedHour:a,selectedMinute:C,onSelect:A,className:L})=>{const N=c=>t?(c*b-n)*l:(c*(360/o.length)-n)*l,E=(t?(_==="12h"?a===12?0:a%12:a)*b-n:C*6-n)*l;return r.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",L),children:[r.jsx("circle",{cx:e.CLOCK_CENTER,cy:e.CLOCK_CENTER,r:e.CLOCK_RADIUS,className:"Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"}),o.map((c,h)=>{const T=N(h),s=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.cos(T),i=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.sin(T),k=t?_==="12h"?c===12?a===12:a%12===c:a===c:C===c;return r.jsxs("g",{onClick:()=>A(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[r.jsx("circle",{cx:s,cy:i,r:x,fill:"transparent"}),k&&r.jsx("circle",{cx:s,cy:i,r:S,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),r.jsx("text",{x:s,y:i,textAnchor:"middle",dominantBaseline:"middle",className:m.cn("Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",k?"bear-fill-white":"bear-fill-gray-700 dark:bear-fill-zinc-300"),children:typeof c=="number"?c.toString().padStart(2,"0"):c})]},c)}),r.jsx("line",{x1:e.CLOCK_CENTER,y1:e.CLOCK_CENTER,x2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.cos(E),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.sin(E),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),x=16,S=14,O=.85,R=.6,A=30,a=90,l=Math.PI/180,f=({values:o,isHourMode:t,format:_,selectedHour:n,selectedMinute:C,onSelect:L,className:N})=>{const b=c=>t?(c*A-a)*l:(c*(360/o.length)-a)*l,E=(t?(_==="12h"?n===12?0:n%12:n)*A-a:C*6-a)*l;return r.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",N),children:[r.jsx("circle",{cx:e.CLOCK_CENTER,cy:e.CLOCK_CENTER,r:e.CLOCK_RADIUS,className:"Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"}),o.map((c,h)=>{const T=b(h),i=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.cos(T),s=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.sin(T),k=t?_==="12h"?c===12?n===12:n%12===c:n===c:C===c;return r.jsxs("g",{onClick:()=>L(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[r.jsx("circle",{cx:i,cy:s,r:x,fill:"transparent"}),k&&r.jsx("circle",{cx:i,cy:s,r:S,className:"Bear-TimePicker__clock-face-dot bear-fill-pink-500"}),r.jsx("text",{x:i,y:s,textAnchor:"middle",dominantBaseline:"middle",className:m.cn("Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",k?"bear-fill-white":"bear-fill-gray-700 dark:bear-fill-zinc-300"),children:typeof c=="number"?c.toString().padStart(2,"0"):c})]},c)}),r.jsx("line",{x1:e.CLOCK_CENTER,y1:e.CLOCK_CENTER,x2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.cos(E),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.sin(E),className:"Bear-TimePicker__clock-face-hand bear-stroke-pink-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=f;

package/dist/components/TimePicker/helpers/ClockFaceSvg.js

@@ -1,18 +1,18 @@
-import { jsxs as T, jsx as a } from "react/jsx-runtime";
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
 import { cn as A } from "../../../utils/cn.js";
 import "react";
 import { CLOCK_RADIUS as n, CLOCK_CENTER as c } from "../TimePicker.constants.js";
-const I = 16, O = 14, E = 0.85, x = 0.6, N = 30, t = 90, s = Math.PI / 180, C = ({
+const I = 16, O = 14, p = 0.85, E = 0.6, x = 30, t = 90, s = Math.PI / 180, C = ({
   values: _,
   isHourMode: i,
   format: m,
   selectedHour: r,
   selectedMinute: k,
-  onSelect: g,
-  className: p
+  onSelect: N,
+  className: g
 }) => {
-  const d = (e) => i ? (e * N - t) * s : (e * (360 / _.length) - t) * s, b = (i ? (m === "12h" ? r === 12 ? 0 : r % 12 : r) * N - t : k * 6 - t) * s;
-  return /* @__PURE__ */ T("svg", { viewBox: "0 0 200 200", className: A("Bear-TimePicker__clock-face bear-w-full bear-h-full", p), children: [
+  const d = (e) => i ? (e * x - t) * s : (e * (360 / _.length) - t) * s, f = (i ? (m === "12h" ? r === 12 ? 0 : r % 12 : r) * x - t : k * 6 - t) * s;
+  return /* @__PURE__ */ b("svg", { viewBox: "0 0 200 200", className: A("Bear-TimePicker__clock-face bear-w-full bear-h-full", g), children: [
     /* @__PURE__ */ a(
       "circle",
       {
@@ -23,25 +23,25 @@ const I = 16, O = 14, E = 0.85, x = 0.6, N = 30, t = 90, s = Math.PI / 180, C =
       }
     ),
     _.map((e, S) => {
-      const f = d(S), l = c + n * E * Math.cos(f), o = c + n * E * Math.sin(f), h = i ? m === "12h" ? e === 12 ? r === 12 : r % 12 === e : r === e : k === e;
-      return /* @__PURE__ */ T(
+      const h = d(S), o = c + n * p * Math.cos(h), l = c + n * p * Math.sin(h), T = i ? m === "12h" ? e === 12 ? r === 12 : r % 12 === e : r === e : k === e;
+      return /* @__PURE__ */ b(
         "g",
         {
-          onClick: () => g(e),
+          onClick: () => N(e),
           className: "Bear-TimePicker__clock-face-item bear-cursor-pointer",
           children: [
-            /* @__PURE__ */ a("circle", { cx: l, cy: o, r: I, fill: "transparent" }),
-            h && /* @__PURE__ */ a("circle", { cx: l, cy: o, r: O, className: "Bear-TimePicker__clock-face-dot bear-fill-blue-500" }),
+            /* @__PURE__ */ a("circle", { cx: o, cy: l, r: I, fill: "transparent" }),
+            T && /* @__PURE__ */ a("circle", { cx: o, cy: l, r: O, className: "Bear-TimePicker__clock-face-dot bear-fill-pink-500" }),
             /* @__PURE__ */ a(
               "text",
               {
-                x: l,
-                y: o,
+                x: o,
+                y: l,
                 textAnchor: "middle",
                 dominantBaseline: "middle",
                 className: A(
                   "Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",
-                  h ? "bear-fill-white" : "bear-fill-gray-700 dark:bear-fill-zinc-300"
+                  T ? "bear-fill-white" : "bear-fill-gray-700 dark:bear-fill-zinc-300"
                 ),
                 children: typeof e == "number" ? e.toString().padStart(2, "0") : e
               }
@@ -56,9 +56,9 @@ const I = 16, O = 14, E = 0.85, x = 0.6, N = 30, t = 90, s = Math.PI / 180, C =
       {
         x1: c,
         y1: c,
-        x2: c + n * x * Math.cos(b),
-        y2: c + n * x * Math.sin(b),
-        className: "Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",
+        x2: c + n * E * Math.cos(f),
+        y2: c + n * E * Math.sin(f),
+        className: "Bear-TimePicker__clock-face-hand bear-stroke-pink-500 bear-stroke-2",
         strokeLinecap: "round"
       }
     )

package/dist/components/Toast/Toast.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),y=require("../../utils/cn.cjs"),w=require("./Toast.utils.cjs"),p={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},k=()=>e.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),C={success:"bear-bg-green-500 bear-text-white",info:"bear-bg-blue-500 bear-text-white",warning:"bear-bg-amber-500 bear-text-white",error:"bear-bg-red-500 bear-text-white"},S={"top-left":"bear-top-4 bear-left-4","top-center":"bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2","top-right":"bear-top-4 bear-right-4","bottom-left":"bear-bottom-4 bear-left-4","bottom-center":"bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2","bottom-right":"bear-bottom-4 bear-right-4"},v=s.createContext(null),I=()=>{const i=s.useContext(v);if(!i)throw new Error("useToast must be used within a ToastProvider");return i},N=({message:i,title:c,severity:b="info",duration:n=5e3,closable:l=!0,icon:r,action:x,onClose:a,onRemove:u,className:m})=>{const[f,d]=s.useState(!1);s.useEffect(()=>{if(n>0){const t=setTimeout(()=>{d(!0),setTimeout(()=>{u(),a==null||a()},200)},n);return()=>clearTimeout(t)}},[n,u,a]);const g=()=>{d(!0),setTimeout(()=>{u(),a==null||a()},200)},h=()=>r===!1?null:r||p[b];return e.jsxs("div",{role:"alert",className:y.cn("bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]","bear-transition-all bear-duration-200",f?"bear-opacity-0 bear-translate-x-2":"bear-opacity-100 bear-translate-x-0",C[b],m),children:[h()&&e.jsx("span",{className:"bear-flex-shrink-0 bear-mt-0.5",children:h()}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[c&&e.jsx("div",{className:"bear-font-semibold bear-mb-0.5",children:c}),e.jsx("div",{className:"bear-text-sm bear-opacity-90",children:i})]}),x&&e.jsx("div",{className:"bear-flex-shrink-0",children:x}),l&&e.jsx("button",{type:"button",onClick:g,className:"bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer","aria-label":"Close",children:e.jsx(k,{})})]})},T=({position:i="top-right",maxToasts:c=5,className:b})=>{const n=s.useContext(v);if(!n)return null;const{_toasts:l,_removeToast:r}=n,x=l.slice(0,c);return e.jsx("div",{className:y.cn("bear-fixed bear-z-50 bear-flex bear-flex-col bear-gap-2",S[i],b),children:x.map(a=>e.jsx(N,{...a,onRemove:()=>r(a.id)},a.id))})},E=({children:i,position:c="top-right"})=>{const[b,n]=s.useState([]),l=s.useCallback(t=>{n(o=>o.filter(j=>j.id!==t))},[]),r=s.useCallback(t=>{const o=t.id||w.generateId();return n(j=>[...j,{...t,id:o}]),o},[]),x=s.useCallback(t=>r(t),[r]),a=s.useCallback((t,o)=>r({message:t,severity:"success",...o}),[r]),u=s.useCallback((t,o)=>r({message:t,severity:"info",...o}),[r]),m=s.useCallback((t,o)=>r({message:t,severity:"warning",...o}),[r]),f=s.useCallback((t,o)=>r({message:t,severity:"error",...o}),[r]),d=s.useCallback(t=>l(t),[l]),g=s.useCallback(()=>n([]),[]),h={toast:x,success:a,info:u,warning:m,error:f,dismiss:d,dismissAll:g,_toasts:b,_removeToast:l};return e.jsxs(v.Provider,{value:h,children:[i,e.jsx(T,{position:c})]})};exports.ToastContainer=T;exports.ToastProvider=E;exports.useToast=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),y=require("../../utils/cn.cjs"),T=require("./Toast.utils.cjs"),p={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},k=()=>e.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),C={success:"bear-bg-green-500 bear-text-white",info:"bear-bg-blue-500 bear-text-white",warning:"bear-bg-amber-500 bear-text-white",error:"bear-bg-red-500 bear-text-white"},I={"top-left":"bear-top-4 bear-left-4","top-center":"bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2","top-right":"bear-top-4 bear-right-4","bottom-left":"bear-bottom-4 bear-left-4","bottom-center":"bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2","bottom-right":"bear-bottom-4 bear-right-4"},v=r.createContext(null),E=()=>{const i=r.useContext(v);if(!i)throw new Error("useToast must be used within a ToastProvider");return i},N=({message:i,title:c,severity:b="info",duration:n=5e3,closable:l=!0,icon:s,action:x,onClose:o,onRemove:u,className:g,autoScroll:f=!1})=>{const[j,m]=r.useState(!1),d=r.useRef(null);r.useEffect(()=>{f&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},[f]),r.useEffect(()=>{if(n>0){const h=setTimeout(()=>{m(!0),setTimeout(()=>{u(),o==null||o()},200)},n);return()=>clearTimeout(h)}},[n,u,o]);const t=()=>{m(!0),setTimeout(()=>{u(),o==null||o()},200)},a=()=>s===!1?null:s||p[b];return e.jsxs("div",{ref:d,role:"alert",className:y.cn("bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]","bear-transition-all bear-duration-200",j?"bear-opacity-0 bear-translate-x-2":"bear-opacity-100 bear-translate-x-0",C[b],g),children:[a()&&e.jsx("span",{className:"bear-flex-shrink-0 bear-mt-0.5",children:a()}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[c&&e.jsx("div",{className:"bear-font-semibold bear-mb-0.5",children:c}),e.jsx("div",{className:"bear-text-sm bear-opacity-90",children:i})]}),x&&e.jsx("div",{className:"bear-flex-shrink-0",children:x}),l&&e.jsx("button",{type:"button",onClick:t,className:"bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer","aria-label":"Close",children:e.jsx(k,{})})]})},w=({position:i="top-right",maxToasts:c=5,className:b})=>{const n=r.useContext(v);if(!n)return null;const{_toasts:l,_removeToast:s}=n,x=l.slice(0,c);return e.jsx("div",{className:y.cn("bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",I[i],b),children:x.map(o=>e.jsx(N,{...o,onRemove:()=>s(o.id)},o.id))})},S=({children:i,position:c="top-right"})=>{const[b,n]=r.useState([]),l=r.useCallback(t=>{n(a=>a.filter(h=>h.id!==t))},[]),s=r.useCallback(t=>{const a=t.id||T.generateId();return n(h=>[...h,{...t,id:a}]),a},[]),x=r.useCallback(t=>s(t),[s]),o=r.useCallback((t,a)=>s({message:t,severity:"success",...a}),[s]),u=r.useCallback((t,a)=>s({message:t,severity:"info",...a}),[s]),g=r.useCallback((t,a)=>s({message:t,severity:"warning",...a}),[s]),f=r.useCallback((t,a)=>s({message:t,severity:"error",...a}),[s]),j=r.useCallback(t=>l(t),[l]),m=r.useCallback(()=>n([]),[]),d={toast:x,success:o,info:u,warning:g,error:f,dismiss:j,dismissAll:m,_toasts:b,_removeToast:l};return e.jsxs(v.Provider,{value:d,children:[i,e.jsx(w,{position:c})]})};exports.ToastContainer=w;exports.ToastProvider=S;exports.useToast=E;

package/dist/components/Toast/Toast.js

@@ -1,159 +1,163 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { createContext as I, useContext as y, useState as T, useCallback as i, useEffect as N } from "react";
-import { cn as k } from "../../utils/cn.js";
-import { generateId as E } from "./Toast.utils.js";
-const S = {
-  success: /* @__PURE__ */ c("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { createContext as N, useContext as T, useState as k, useCallback as n, useRef as E, useEffect as y } from "react";
+import { cn as I } from "../../utils/cn.js";
+import { generateId as S } from "./Toast.utils.js";
+const _ = {
+  success: /* @__PURE__ */ l("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
     /* @__PURE__ */ e("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
     /* @__PURE__ */ e("polyline", { points: "22 4 12 14.01 9 11.01" })
   ] }),
-  info: /* @__PURE__ */ c("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  info: /* @__PURE__ */ l("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ e("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
     /* @__PURE__ */ e("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] }),
-  warning: /* @__PURE__ */ c("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  warning: /* @__PURE__ */ l("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
     /* @__PURE__ */ e("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
     /* @__PURE__ */ e("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
     /* @__PURE__ */ e("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
   ] }),
-  error: /* @__PURE__ */ c("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  error: /* @__PURE__ */ l("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ e("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
     /* @__PURE__ */ e("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] })
-}, _ = () => /* @__PURE__ */ c("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+}, B = () => /* @__PURE__ */ l("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
   /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
   /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] }), B = {
+] }), W = {
   success: "bear-bg-green-500 bear-text-white",
   info: "bear-bg-blue-500 bear-text-white",
   warning: "bear-bg-amber-500 bear-text-white",
   error: "bear-bg-red-500 bear-text-white"
-}, W = {
+}, C = {
   "top-left": "bear-top-4 bear-left-4",
   "top-center": "bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2",
   "top-right": "bear-top-4 bear-right-4",
   "bottom-left": "bear-bottom-4 bear-left-4",
   "bottom-center": "bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2",
   "bottom-right": "bear-bottom-4 bear-right-4"
-}, w = I(null), z = () => {
-  const n = y(w);
-  if (!n)
+}, w = N(null), M = () => {
+  const i = T(w);
+  if (!i)
     throw new Error("useToast must be used within a ToastProvider");
-  return n;
-}, C = ({
-  message: n,
+  return i;
+}, L = ({
+  message: i,
   title: b,
-  severity: d = "info",
+  severity: h = "info",
   duration: o = 5e3,
-  closable: l = !0,
+  closable: c = !0,
   icon: t,
-  action: h,
-  onClose: a,
+  action: d,
+  onClose: s,
   onRemove: x,
-  className: f
+  className: p,
+  autoScroll: m = !1
 }) => {
-  const [g, m] = T(!1);
-  N(() => {
+  const [v, g] = k(!1), u = E(null);
+  y(() => {
+    m && u.current && u.current.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+  }, [m]), y(() => {
     if (o > 0) {
-      const r = setTimeout(() => {
-        m(!0), setTimeout(() => {
-          x(), a == null || a();
+      const f = setTimeout(() => {
+        g(!0), setTimeout(() => {
+          x(), s == null || s();
         }, 200);
       }, o);
-      return () => clearTimeout(r);
+      return () => clearTimeout(f);
     }
-  }, [o, x, a]);
-  const p = () => {
-    m(!0), setTimeout(() => {
-      x(), a == null || a();
+  }, [o, x, s]);
+  const r = () => {
+    g(!0), setTimeout(() => {
+      x(), s == null || s();
     }, 200);
-  }, u = () => t === !1 ? null : t || S[d];
-  return /* @__PURE__ */ c(
+  }, a = () => t === !1 ? null : t || _[h];
+  return /* @__PURE__ */ l(
     "div",
     {
+      ref: u,
       role: "alert",
-      className: k(
+      className: I(
         "bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]",
         "bear-transition-all bear-duration-200",
-        g ? "bear-opacity-0 bear-translate-x-2" : "bear-opacity-100 bear-translate-x-0",
-        B[d],
-        f
+        v ? "bear-opacity-0 bear-translate-x-2" : "bear-opacity-100 bear-translate-x-0",
+        W[h],
+        p
       ),
       children: [
-        u() && /* @__PURE__ */ e("span", { className: "bear-flex-shrink-0 bear-mt-0.5", children: u() }),
-        /* @__PURE__ */ c("div", { className: "bear-flex-1 bear-min-w-0", children: [
+        a() && /* @__PURE__ */ e("span", { className: "bear-flex-shrink-0 bear-mt-0.5", children: a() }),
+        /* @__PURE__ */ l("div", { className: "bear-flex-1 bear-min-w-0", children: [
           b && /* @__PURE__ */ e("div", { className: "bear-font-semibold bear-mb-0.5", children: b }),
-          /* @__PURE__ */ e("div", { className: "bear-text-sm bear-opacity-90", children: n })
+          /* @__PURE__ */ e("div", { className: "bear-text-sm bear-opacity-90", children: i })
         ] }),
-        h && /* @__PURE__ */ e("div", { className: "bear-flex-shrink-0", children: h }),
-        l && /* @__PURE__ */ e(
+        d && /* @__PURE__ */ e("div", { className: "bear-flex-shrink-0", children: d }),
+        c && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: p,
+            onClick: r,
             className: "bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer",
             "aria-label": "Close",
-            children: /* @__PURE__ */ e(_, {})
+            children: /* @__PURE__ */ e(B, {})
           }
         )
       ]
     }
   );
-}, L = ({
-  position: n = "top-right",
+}, P = ({
+  position: i = "top-right",
   maxToasts: b = 5,
-  className: d
+  className: h
 }) => {
-  const o = y(w);
+  const o = T(w);
   if (!o) return null;
-  const { _toasts: l, _removeToast: t } = o, h = l.slice(0, b);
+  const { _toasts: c, _removeToast: t } = o, d = c.slice(0, b);
   return /* @__PURE__ */ e(
     "div",
     {
-      className: k(
-        "bear-fixed bear-z-50 bear-flex bear-flex-col bear-gap-2",
-        W[n],
-        d
+      className: I(
+        "bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",
+        C[i],
+        h
       ),
-      children: h.map((a) => /* @__PURE__ */ e(
-        C,
+      children: d.map((s) => /* @__PURE__ */ e(
+        L,
         {
-          ...a,
-          onRemove: () => t(a.id)
+          ...s,
+          onRemove: () => t(s.id)
         },
-        a.id
+        s.id
       ))
     }
   );
-}, M = ({
-  children: n,
+}, O = ({
+  children: i,
   position: b = "top-right"
 }) => {
-  const [d, o] = T([]), l = i((r) => {
-    o((s) => s.filter((v) => v.id !== r));
-  }, []), t = i((r) => {
-    const s = r.id || E();
-    return o((v) => [...v, { ...r, id: s }]), s;
-  }, []), h = i((r) => t(r), [t]), a = i((r, s) => t({ message: r, severity: "success", ...s }), [t]), x = i((r, s) => t({ message: r, severity: "info", ...s }), [t]), f = i((r, s) => t({ message: r, severity: "warning", ...s }), [t]), g = i((r, s) => t({ message: r, severity: "error", ...s }), [t]), m = i((r) => l(r), [l]), p = i(() => o([]), []), u = {
-    toast: h,
-    success: a,
+  const [h, o] = k([]), c = n((r) => {
+    o((a) => a.filter((f) => f.id !== r));
+  }, []), t = n((r) => {
+    const a = r.id || S();
+    return o((f) => [...f, { ...r, id: a }]), a;
+  }, []), d = n((r) => t(r), [t]), s = n((r, a) => t({ message: r, severity: "success", ...a }), [t]), x = n((r, a) => t({ message: r, severity: "info", ...a }), [t]), p = n((r, a) => t({ message: r, severity: "warning", ...a }), [t]), m = n((r, a) => t({ message: r, severity: "error", ...a }), [t]), v = n((r) => c(r), [c]), g = n(() => o([]), []), u = {
+    toast: d,
+    success: s,
     info: x,
-    warning: f,
-    error: g,
-    dismiss: m,
-    dismissAll: p,
-    _toasts: d,
-    _removeToast: l
+    warning: p,
+    error: m,
+    dismiss: v,
+    dismissAll: g,
+    _toasts: h,
+    _removeToast: c
   };
-  return /* @__PURE__ */ c(w.Provider, { value: u, children: [
-    n,
-    /* @__PURE__ */ e(L, { position: b })
+  return /* @__PURE__ */ l(w.Provider, { value: u, children: [
+    i,
+    /* @__PURE__ */ e(P, { position: b })
   ] });
 };
 export {
-  L as ToastContainer,
-  M as ToastProvider,
-  z as useToast
+  P as ToastContainer,
+  O as ToastProvider,
+  M as useToast
 };

package/dist/components/Toast/Toast.types.d.ts

@@ -22,6 +22,8 @@ export interface ToastProps {
     onClose?: () => void;
     /** Additional CSS class */
     className?: string;
+    /** Scroll the toast into view when it appears */
+    autoScroll?: boolean;
 }
 export interface ToastContainerProps {
     /** Position of toast container */

package/dist/components/Tooltip/Tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),j=require("react-dom"),k=require("../../utils/cn.cjs"),v=({content:m,children:x,position:w,placement:R,delay:y=200,className:T,disabled:M=!1})=>{const c=R||w||"top",[l,d]=r.useState(!1),[b,B]=r.useState({x:0,y:0}),u=r.useRef(null),h=r.useRef(null),n=r.useRef(),f=r.useCallback(()=>{if(!u.current||!h.current)return;const e=u.current.getBoundingClientRect(),t=h.current.getBoundingClientRect(),s=8;let o=0,i=0;switch(c){case"top":o=e.left+(e.width-t.width)/2,i=e.top-t.height-s;break;case"bottom":o=e.left+(e.width-t.width)/2,i=e.bottom+s;break;case"left":o=e.left-t.width-s,i=e.top+(e.height-t.height)/2;break;case"right":o=e.right+s,i=e.top+(e.height-t.height)/2;break}o=Math.max(8,Math.min(o,window.innerWidth-t.width-8)),i=Math.max(8,Math.min(i,window.innerHeight-t.height-8)),B({x:o,y:i})},[c]),g=()=>{M||(n.current=setTimeout(()=>{d(!0)},y))},p=()=>{n.current&&clearTimeout(n.current),d(!1)};return r.useEffect(()=>{l&&f()},[l,f]),r.useEffect(()=>()=>{n.current&&clearTimeout(n.current)},[]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:u,onMouseEnter:g,onMouseLeave:p,onFocus:g,onBlur:p,className:"Bear-Tooltip__trigger bear-inline-block",children:x}),l&&j.createPortal(a.jsx("div",{ref:h,role:"tooltip",style:{left:b.x,top:b.y},className:k.cn("bear-fixed bear-z-[9999]","Bear-Tooltip",`Bear-Tooltip--${c}`,"bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-800 bear-text-white bear-text-sm","bear-border bear-border-gray-700","bear-shadow-lg","bear-animate-in bear-fade-in bear-duration-150",T),children:a.jsx("span",{className:"Bear-Tooltip__content",children:m})}),document.body)]})};exports.Tooltip=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),M=require("react-dom"),B=require("../../utils/cn.cjs"),j=({content:p,children:w,position:x,placement:R,delay:v=200,className:y,disabled:T=!1})=>{const u=R||x||"top",[i,b]=t.useState(!1),[f,E]=t.useState({x:0,y:0}),d=t.useRef(null),h=t.useRef(null),s=t.useRef(),c=t.useCallback(()=>{if(!d.current||!h.current)return;const e=d.current.getBoundingClientRect(),r=h.current.getBoundingClientRect(),l=8;let o=0,n=0;switch(u){case"top":o=e.left+(e.width-r.width)/2,n=e.top-r.height-l;break;case"bottom":o=e.left+(e.width-r.width)/2,n=e.bottom+l;break;case"left":o=e.left-r.width-l,n=e.top+(e.height-r.height)/2;break;case"right":o=e.right+l,n=e.top+(e.height-r.height)/2;break}o=Math.max(8,Math.min(o,window.innerWidth-r.width-8)),n=Math.max(8,Math.min(n,window.innerHeight-r.height-8)),E({x:o,y:n})},[u]),g=()=>{T||(s.current=setTimeout(()=>{b(!0)},v))},m=()=>{s.current&&clearTimeout(s.current),b(!1)};return t.useEffect(()=>{i&&c()},[i,c]),t.useEffect(()=>{if(!i)return;const e=()=>{requestAnimationFrame(()=>c())};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[i,c]),t.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:d,onMouseEnter:g,onMouseLeave:m,onFocus:g,onBlur:m,className:"Bear-Tooltip__trigger bear-inline-block",children:w}),i&&M.createPortal(a.jsx("div",{ref:h,role:"tooltip",style:{left:f.x,top:f.y},className:B.cn("bear-fixed bear-z-[11000]","Bear-Tooltip",`Bear-Tooltip--${u}`,"bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-800 bear-text-white bear-text-sm","bear-border bear-border-gray-700","bear-shadow-lg","bear-animate-in bear-fade-in bear-duration-150",y),children:a.jsx("span",{className:"Bear-Tooltip__content",children:p})}),document.body)]})};exports.Tooltip=j;