@forgedevstack/bear 1.0.7 → 1.0.9

package/dist/components/Terminal/Terminal.js

@@ -0,0 +1,155 @@
+import { jsxs as r, jsx as t, Fragment as z } from "react/jsx-runtime";
+import { useState as u, useRef as I, useEffect as G, useCallback as y } from "react";
+import { cn as O } from "../../utils/cn.js";
+import { Typography as W } from "../Typography/Typography.js";
+import { Spinner as Y } from "../Spinner/Spinner.js";
+import { TERMINAL_DEFAULTS as p, TERMINAL_THEMES as q, LINE_TYPE_COLORS as J } from "./Terminal.const.js";
+const se = ({
+  lines: x,
+  onCommand: m,
+  cwd: C = p.CWD,
+  user: H = p.USER,
+  host: S = p.HOST,
+  prompt: g,
+  title: D = p.TITLE,
+  showHeader: N = !0,
+  showLineNumbers: L = !1,
+  showTimestamps: R = !1,
+  readOnly: f = !1,
+  height: h = p.HEIGHT,
+  theme: A = "dark",
+  history: M,
+  onHistoryChange: _,
+  autoScroll: v = !0,
+  className: $,
+  testId: K,
+  isLoading: b = !1
+}) => {
+  const l = q[A], [o, a] = u(""), [c, i] = u(-1), [U, j] = u([]), n = M ?? U, w = _ ?? j, T = I(null), d = I(null);
+  G(() => {
+    v && d.current && (d.current.scrollTop = d.current.scrollHeight);
+  }, [x, v]);
+  const B = y(() => {
+    var e;
+    f || (e = T.current) == null || e.focus();
+  }, [f]), E = y(() => {
+    o.trim() && m && (m(o.trim()), w([...n, o.trim()]), i(-1), a(""));
+  }, [o, m, n, w]), F = y((e) => {
+    if (e.key === "Enter")
+      E();
+    else if (e.key === "ArrowUp") {
+      if (e.preventDefault(), n.length > 0) {
+        const s = c === -1 ? n.length - 1 : Math.max(0, c - 1);
+        i(s), a(n[s]);
+      }
+    } else if (e.key === "ArrowDown") {
+      if (e.preventDefault(), c !== -1) {
+        const s = c + 1;
+        s >= n.length ? (i(-1), a("")) : (i(s), a(n[s]));
+      }
+    } else e.key === "c" && e.ctrlKey && (a(""), i(-1));
+  }, [E, n, c]), k = () => g || /* @__PURE__ */ r(z, { children: [
+    /* @__PURE__ */ r("span", { style: { color: l.prompt }, children: [
+      H,
+      "@",
+      S
+    ] }),
+    /* @__PURE__ */ t("span", { className: "opacity-50", children: ":" }),
+    /* @__PURE__ */ t("span", { className: "text-blue-400", children: C }),
+    /* @__PURE__ */ t("span", { className: "opacity-50", children: "$" })
+  ] }), P = (e, s) => {
+    const V = J[e.type];
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: "flex gap-2 py-0.5 hover:bg-white/5",
+        children: [
+          L && /* @__PURE__ */ t("span", { className: "opacity-30 w-8 text-right select-none", children: s + 1 }),
+          R && e.timestamp && /* @__PURE__ */ r("span", { className: "opacity-30 select-none", children: [
+            "[",
+            e.timestamp.toLocaleTimeString(),
+            "]"
+          ] }),
+          e.type === "input" ? /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ t("span", { className: "flex gap-1 select-none", children: e.prefix || k() }),
+            /* @__PURE__ */ t("span", { children: e.content })
+          ] }) : /* @__PURE__ */ t("span", { style: { color: V }, children: e.content })
+        ]
+      },
+      e.id
+    );
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: O(
+        "Bear-Terminal",
+        "rounded-lg overflow-hidden font-mono text-sm",
+        $
+      ),
+      style: {
+        backgroundColor: l.bg,
+        color: l.text,
+        border: `1px solid ${l.border}`,
+        height: typeof h == "number" ? `${h}px` : h
+      },
+      "data-testid": K,
+      onClick: B,
+      children: [
+        N && /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex items-center gap-2 px-4 py-2",
+            style: { backgroundColor: l.header, borderBottom: `1px solid ${l.border}` },
+            children: [
+              /* @__PURE__ */ r("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ t("div", { className: "w-3 h-3 rounded-full bg-red-500" }),
+                /* @__PURE__ */ t("div", { className: "w-3 h-3 rounded-full bg-yellow-500" }),
+                /* @__PURE__ */ t("div", { className: "w-3 h-3 rounded-full bg-green-500" })
+              ] }),
+              /* @__PURE__ */ t(W, { variant: "caption", className: "flex-1 text-center opacity-60", children: D }),
+              /* @__PURE__ */ t("div", { className: "w-14" }),
+              " "
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ref: d,
+            className: "overflow-y-auto p-4",
+            style: { height: N ? "calc(100% - 40px)" : "100%" },
+            children: [
+              x.map((e, s) => P(e, s)),
+              b && /* @__PURE__ */ r("div", { className: "flex items-center gap-2 py-0.5", children: [
+                /* @__PURE__ */ t(Y, { size: "sm" }),
+                /* @__PURE__ */ t("span", { className: "opacity-50", children: "Processing..." })
+              ] }),
+              !f && /* @__PURE__ */ r("div", { className: "flex gap-2 py-0.5", children: [
+                /* @__PURE__ */ t("span", { className: "flex gap-1 select-none", children: k() }),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    ref: T,
+                    type: "text",
+                    value: o,
+                    onChange: (e) => a(e.target.value),
+                    onKeyDown: F,
+                    className: "flex-1 bg-transparent outline-none caret-current",
+                    style: { color: "inherit" },
+                    autoComplete: "off",
+                    spellCheck: !1,
+                    disabled: b
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  se as Terminal
+};

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

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+export type TerminalLineType = 'input' | 'output' | 'error' | 'success' | 'warning' | 'info' | 'system';
+export interface TerminalLine {
+    id: string;
+    type: TerminalLineType;
+    content: string | ReactNode;
+    timestamp?: Date;
+    prefix?: string;
+}
+export interface TerminalProps {
+    /** Array of terminal lines */
+    lines: TerminalLine[];
+    /** Callback when user submits a command */
+    onCommand?: (command: string) => void;
+    /** Current working directory to display */
+    cwd?: string;
+    /** Username to display */
+    user?: string;
+    /** Hostname to display */
+    host?: string;
+    /** Shell prompt prefix (overrides user@host) */
+    prompt?: string | ReactNode;
+    /** Title in the header */
+    title?: string;
+    /** Show header with controls */
+    showHeader?: boolean;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Show timestamps */
+    showTimestamps?: boolean;
+    /** Read-only mode (no input) */
+    readOnly?: boolean;
+    /** Height of the terminal */
+    height?: number | string;
+    /** Theme variant */
+    theme?: 'dark' | 'light' | 'matrix';
+    /** Command history */
+    history?: string[];
+    /** Callback when history changes */
+    onHistoryChange?: (history: string[]) => void;
+    /** Auto-scroll to bottom */
+    autoScroll?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Loading state */
+    isLoading?: boolean;
+}

package/dist/components/Terminal/index.d.ts

@@ -0,0 +1,2 @@
+export { Terminal } from './Terminal';
+export type { TerminalProps, TerminalLine, TerminalLineType } from './Terminal.types';

package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../../../utils/cn.cjs"),e=require("../../TimePicker.constants.cjs"),O=({selectedHour:I,setSelectedHour:_,selectedMinute:r,setSelectedMinute:a,period:l,setPeriod:C,format:T,hours:n,minutes:N,timeValue:P,clearable:d,onChange:S,onConfirm:t,onClose:m,translations:A})=>{const c={...e.TIMEPICKER_DEFAULT_TRANSLATIONS,...A};return s.jsxs("div",{className:e.TIMEPICKER_DROPDOWN_CLASSES,children:[s.jsxs("div",{className:"Bear-TimePicker__columns bear-flex bear-gap-2 bear-mb-3",children:[s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.hour}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:n.map(E=>s.jsx("button",{onClick:()=>_(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,I===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E.toString().padStart(2,"0")},E))})]}),s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.minute}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:N.map(E=>s.jsx("button",{onClick:()=>a(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,r===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E.toString().padStart(2,"0")},E))})]}),T==="12h"&&s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.period}),s.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(E=>s.jsx("button",{onClick:()=>C(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,"bear-py-2",l===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E},E))})]})]}),s.jsxs("div",{className:e.TIMEPICKER_FOOTER_CLASSES,children:[d&&P&&s.jsx("button",{onClick:()=>{S==null||S(null),m()},className:e.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:c.cancel}),s.jsx("button",{onClick:t,className:e.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:c.ok})]})]})};exports.TimePickerColumnsDropdown=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../../../utils/cn.cjs");require("react");const e=require("../../TimePicker.constants.cjs"),O=({selectedHour:r,setSelectedHour:I,selectedMinute:_,setSelectedMinute:a,period:l,setPeriod:C,format:T,hours:n,minutes:N,timeValue:P,clearable:d,onChange:S,onConfirm:t,onClose:m,translations:A})=>{const c={...e.TIMEPICKER_DEFAULT_TRANSLATIONS,...A};return s.jsxs("div",{className:e.TIMEPICKER_DROPDOWN_CLASSES,children:[s.jsxs("div",{className:"Bear-TimePicker__columns bear-flex bear-gap-2 bear-mb-3",children:[s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.hour}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:n.map(E=>s.jsx("button",{onClick:()=>I(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,r===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E.toString().padStart(2,"0")},E))})]}),s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.minute}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:N.map(E=>s.jsx("button",{onClick:()=>a(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,_===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E.toString().padStart(2,"0")},E))})]}),T==="12h"&&s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.period}),s.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(E=>s.jsx("button",{onClick:()=>C(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,"bear-py-2",l===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E},E))})]})]}),s.jsxs("div",{className:e.TIMEPICKER_FOOTER_CLASSES,children:[d&&P&&s.jsx("button",{onClick:()=>{S==null||S(null),m()},className:e.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:c.cancel}),s.jsx("button",{onClick:t,className:e.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:c.ok})]})]})};exports.TimePickerColumnsDropdown=O;

package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.js

@@ -1,14 +1,15 @@
 import { jsxs as a, jsx as c } from "react/jsx-runtime";
 import { cn as r } from "../../../../utils/cn.js";
-import { TIMEPICKER_DROPDOWN_CLASSES as u, TIMEPICKER_DEFAULT_TRANSLATIONS as L, TIMEPICKER_COLUMN_HEADER_CLASSES as s, TIMEPICKER_COLUMN_CLASSES as d, TIMEPICKER_OPTION_ACTIVE_CLASSES as E, TIMEPICKER_OPTION_INACTIVE_CLASSES as m, TIMEPICKER_OPTION_CLASSES as n, TIMEPICKER_FOOTER_CLASSES as h, TIMEPICKER_CLEAR_BUTTON_CLASSES as v, TIMEPICKER_CONFIRM_BUTTON_CLASSES as k } from "../../TimePicker.constants.js";
-const x = ({
+import "react";
+import { TIMEPICKER_DROPDOWN_CLASSES as u, TIMEPICKER_DEFAULT_TRANSLATIONS as L, TIMEPICKER_COLUMN_HEADER_CLASSES as s, TIMEPICKER_COLUMN_CLASSES as d, TIMEPICKER_OPTION_ACTIVE_CLASSES as m, TIMEPICKER_OPTION_INACTIVE_CLASSES as E, TIMEPICKER_OPTION_CLASSES as n, TIMEPICKER_FOOTER_CLASSES as h, TIMEPICKER_CLEAR_BUTTON_CLASSES as p, TIMEPICKER_CONFIRM_BUTTON_CLASSES as v } from "../../TimePicker.constants.js";
+const B = ({
   selectedHour: S,
   setSelectedHour: _,
   selectedMinute: N,
-  setSelectedMinute: I,
-  period: T,
-  setPeriod: o,
-  format: t,
+  setSelectedMinute: o,
+  period: t,
+  setPeriod: I,
+  format: T,
   hours: C,
   minutes: P,
   timeValue: A,
@@ -29,7 +30,7 @@ const x = ({
             onClick: () => _(e),
             className: r(
               n,
-              S === e ? E : m
+              S === e ? m : E
             ),
             children: e.toString().padStart(2, "0")
           },
@@ -41,26 +42,26 @@ const x = ({
         /* @__PURE__ */ c("div", { className: d, children: P.map((e) => /* @__PURE__ */ c(
           "button",
           {
-            onClick: () => I(e),
+            onClick: () => o(e),
             className: r(
               n,
-              N === e ? E : m
+              N === e ? m : E
             ),
             children: e.toString().padStart(2, "0")
           },
           e
         )) })
       ] }),
-      t === "12h" && /* @__PURE__ */ a("div", { className: "Bear-TimePicker__column bear-flex-1", children: [
+      T === "12h" && /* @__PURE__ */ a("div", { className: "Bear-TimePicker__column bear-flex-1", children: [
         /* @__PURE__ */ c("div", { className: s, children: i.period }),
         /* @__PURE__ */ c("div", { className: "bear-space-y-1", children: ["AM", "PM"].map((e) => /* @__PURE__ */ c(
           "button",
           {
-            onClick: () => o(e),
+            onClick: () => I(e),
             className: r(
               n,
               "bear-py-2",
-              T === e ? E : m
+              t === e ? m : E
             ),
             children: e
           },
@@ -71,11 +72,11 @@ const x = ({
     /* @__PURE__ */ a("div", { className: h, children: [
       O && A && /* @__PURE__ */ c("button", { onClick: () => {
         l == null || l(null), M();
-      }, className: v, children: i.cancel }),
-      /* @__PURE__ */ c("button", { onClick: R, className: k, children: i.ok })
+      }, className: p, children: i.cancel }),
+      /* @__PURE__ */ c("button", { onClick: R, className: v, children: i.ok })
     ] })
   ] });
 };
 export {
-  x as TimePickerColumnsDropdown
+  B as TimePickerColumnsDropdown
 };

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"),e=require("../TimePicker.constants.cjs"),E=({values:t,isHourMode:n,format:i,selectedHour:a,selectedMinute:l,onSelect:b,className:h})=>{const f=c=>n?(c*30-90)*(Math.PI/180):(c*(360/t.length)-90)*(Math.PI/180),s=(n?(i==="12h"?a===12?0:a%12:a)*30-90:l*6-90)*Math.PI/180;return r.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",h),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"}),t.map((c,x)=>{const C=f(x),o=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.cos(C),_=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.sin(C),k=n?i==="12h"?c===12?a===12:a%12===c:a===c:l===c;return r.jsxs("g",{onClick:()=>b(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[k&&r.jsx("circle",{cx:o,cy:_,r:14,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),r.jsx("text",{x:o,y:_,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*.6*Math.cos(s),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.sin(s),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),E=({values:t,isHourMode:n,format:i,selectedHour:r,selectedMinute:l,onSelect:b,className:h})=>{const f=c=>n?(c*30-90)*(Math.PI/180):(c*(360/t.length)-90)*(Math.PI/180),s=(n?(i==="12h"?r===12?0:r%12:r)*30-90:l*6-90)*Math.PI/180;return a.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",h),children:[a.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"}),t.map((c,x)=>{const C=f(x),o=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.cos(C),_=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.sin(C),k=n?i==="12h"?c===12?r===12:r%12===c:r===c:l===c;return a.jsxs("g",{onClick:()=>b(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[k&&a.jsx("circle",{cx:o,cy:_,r:14,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),a.jsx("text",{x:o,y:_,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)}),a.jsx("line",{x1:e.CLOCK_CENTER,y1:e.CLOCK_CENTER,x2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.cos(s),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.sin(s),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=E;

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

@@ -1,28 +1,29 @@
 import { jsxs as f, jsx as n } from "react/jsx-runtime";
 import { cn as _ } from "../../../utils/cn.js";
-import { CLOCK_RADIUS as c, CLOCK_CENTER as a } from "../TimePicker.constants.js";
-const N = ({
+import "react";
+import { CLOCK_RADIUS as c, CLOCK_CENTER as r } from "../TimePicker.constants.js";
+const T = ({
   values: i,
   isHourMode: t,
   format: l,
-  selectedHour: r,
+  selectedHour: a,
   selectedMinute: o,
   onSelect: g,
   className: x
 }) => {
-  const d = (e) => t ? (e * 30 - 90) * (Math.PI / 180) : (e * (360 / i.length) - 90) * (Math.PI / 180), s = (t ? (l === "12h" ? r === 12 ? 0 : r % 12 : r) * 30 - 90 : o * 6 - 90) * Math.PI / 180;
+  const d = (e) => t ? (e * 30 - 90) * (Math.PI / 180) : (e * (360 / i.length) - 90) * (Math.PI / 180), s = (t ? (l === "12h" ? a === 12 ? 0 : a % 12 : a) * 30 - 90 : o * 6 - 90) * Math.PI / 180;
   return /* @__PURE__ */ f("svg", { viewBox: "0 0 200 200", className: _("Bear-TimePicker__clock-face bear-w-full bear-h-full", x), children: [
     /* @__PURE__ */ n(
       "circle",
       {
-        cx: a,
-        cy: a,
+        cx: r,
+        cy: r,
         r: c,
         className: "Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"
       }
     ),
     i.map((e, p) => {
-      const m = d(p), k = a + c * 0.85 * Math.cos(m), h = a + c * 0.85 * Math.sin(m), b = t ? l === "12h" ? e === 12 ? r === 12 : r % 12 === e : r === e : o === e;
+      const m = d(p), k = r + c * 0.85 * Math.cos(m), h = r + c * 0.85 * Math.sin(m), b = t ? l === "12h" ? e === 12 ? a === 12 : a % 12 === e : a === e : o === e;
       return /* @__PURE__ */ f(
         "g",
         {
@@ -52,10 +53,10 @@ const N = ({
     /* @__PURE__ */ n(
       "line",
       {
-        x1: a,
-        y1: a,
-        x2: a + c * 0.6 * Math.cos(s),
-        y2: a + c * 0.6 * Math.sin(s),
+        x1: r,
+        y1: r,
+        x2: r + c * 0.6 * Math.cos(s),
+        y2: r + c * 0.6 * Math.sin(s),
         className: "Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",
         strokeLinecap: "round"
       }
@@ -63,5 +64,5 @@ const N = ({
   ] });
 };
 export {
-  N as ClockFaceSvg
+  T as ClockFaceSvg
 };

package/dist/components/Tour/Tour.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("react"),L=require("../../utils/cn.cjs"),U=require("../Button/Button.cjs"),v=require("../Typography/Typography.cjs"),a=require("./Tour.const.cjs"),G=({steps:T,open:u=!1,current:A,onClose:d,onStepChange:b,onFinish:f,showIndicators:N=a.TOUR_DEFAULTS.SHOW_INDICATORS,showCloseButton:I=a.TOUR_DEFAULTS.SHOW_CLOSE_BUTTON,showSkipButton:w=a.TOUR_DEFAULTS.SHOW_SKIP_BUTTON,showPrevButton:P=a.TOUR_DEFAULTS.SHOW_PREV_BUTTON,finishText:D=a.TOUR_DEFAULTS.FINISH_TEXT,skipText:y=a.TOUR_DEFAULTS.SKIP_TEXT,maskOpacity:g=a.TOUR_DEFAULTS.MASK_OPACITY,maskColor:m=a.TOUR_DEFAULTS.MASK_COLOR,animated:E=a.TOUR_DEFAULTS.ANIMATED,className:k,testId:j})=>{const[B,x]=s.useState(0),[r,F]=s.useState(null),[R,M]=s.useState({top:0,left:0}),z=s.useRef(null),c=A??B,e=T[c],_=c===T.length-1,H=c===0,O=s.useCallback(()=>e?typeof e.target=="function"?e.target():document.querySelector(e.target):null,[e]),S=s.useCallback(()=>{const t=O();if(t){const i=t.getBoundingClientRect();F(i)}},[O]);s.useEffect(()=>{if(!r||!e)return;const t=e.placement||a.TOUR_DEFAULTS.PLACEMENT,i=e.spotlightPadding??a.TOUR_DEFAULTS.SPOTLIGHT_PADDING;let l=0,n=0;switch(t){case"top":case"top-start":case"top-end":l=r.top-a.TOUR_TOOLTIP_OFFSET-i,n=t==="top"?r.left+r.width/2:t==="top-start"?r.left:r.right;break;case"bottom":case"bottom-start":case"bottom-end":l=r.bottom+a.TOUR_TOOLTIP_OFFSET+i,n=t==="bottom"?r.left+r.width/2:t==="bottom-start"?r.left:r.right;break;case"left":case"left-start":case"left-end":n=r.left-a.TOUR_TOOLTIP_OFFSET-i,l=t==="left"?r.top+r.height/2:t==="left-start"?r.top:r.bottom;break;case"right":case"right-start":case"right-end":n=r.right+a.TOUR_TOOLTIP_OFFSET+i,l=t==="right"?r.top+r.height/2:t==="right-start"?r.top:r.bottom;break}M({top:l,left:n})},[r,e]),s.useEffect(()=>{if(!u)return;S();const t=()=>S();return window.addEventListener("resize",t),window.addEventListener("scroll",t,!0),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t,!0)}},[u,c,S]),s.useEffect(()=>{if(!u)return;const t=O();t&&t.scrollIntoView({behavior:"smooth",block:"center"})},[u,c,O]);const X=s.useCallback(async()=>{var t,i,l;if(e!=null&&e.onAfterStep&&await e.onAfterStep(),_)f==null||f(),d==null||d();else{const n=c+1;x(n),b==null||b(n),(t=T[n])!=null&&t.onBeforeStep&&await((l=(i=T[n]).onBeforeStep)==null?void 0:l.call(i))}},[c,_,e,T,f,d,b]),q=s.useCallback(async()=>{var i,l,n;e!=null&&e.onAfterStep&&await e.onAfterStep();const t=c-1;x(t),b==null||b(t),(i=T[t])!=null&&i.onBeforeStep&&await((n=(l=T[t]).onBeforeStep)==null?void 0:n.call(l))},[c,e,T,b]),p=s.useCallback(()=>{d==null||d()},[d]),W=(e==null?void 0:e.placement)||a.TOUR_DEFAULTS.PLACEMENT,h=(e==null?void 0:e.spotlightPadding)??a.TOUR_DEFAULTS.SPOTLIGHT_PADDING;return!u||!e?null:o.jsxs("div",{className:L.cn("Bear-Tour",k),"data-testid":j,children:[o.jsx("div",{className:"Bear-Tour__overlay bear-fixed bear-inset-0",style:{zIndex:a.TOUR_Z_INDEX.OVERLAY,backgroundColor:m,opacity:g,transition:E?"opacity 0.3s":"none"},onClick:p}),r&&o.jsx("div",{className:"Bear-Tour__spotlight bear-fixed bear-pointer-events-none",style:{zIndex:a.TOUR_Z_INDEX.SPOTLIGHT,top:r.top-h,left:r.left-h,width:r.width+h*2,height:r.height+h*2,borderRadius:8,boxShadow:`0 0 0 9999px ${m}`,opacity:g,transition:E?"all 0.3s ease":"none"}}),o.jsxs("div",{ref:z,className:"Bear-Tour__tooltip bear-fixed bear-bg-white dark:bear-bg-neutral-800 bear-rounded-lg bear-shadow-xl bear-p-4",style:{zIndex:a.TOUR_Z_INDEX.TOOLTIP,top:R.top,left:R.left,minWidth:280,maxWidth:360,...a.TOUR_PLACEMENT_STYLES[W],transition:E?"all 0.3s ease":"none"},children:[I&&o.jsx("button",{className:"Bear-Tour__close bear-absolute bear-top-2 bear-right-2 bear-p-1 bear-text-neutral-400 hover:bear-text-neutral-600 dark:hover:bear-text-neutral-300 bear-cursor-pointer bear-bg-transparent bear-border-none",onClick:p,"aria-label":"Close tour",children:o.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:o.jsx("path",{d:"M18 6L6 18M6 6l12 12"})})}),o.jsxs("div",{className:"Bear-Tour__content bear-pr-6",children:[e.title&&o.jsx(v.Typography,{variant:"h6",className:"bear-mb-2",children:e.title}),e.description&&o.jsx(v.Typography,{variant:"body2",color:"secondary",className:"bear-mb-4",children:e.description}),e.content]}),o.jsxs("div",{className:"Bear-Tour__footer bear-flex bear-items-center bear-justify-between bear-mt-4 bear-pt-3 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700",children:[N&&o.jsx("div",{className:"bear-flex bear-gap-1.5",children:T.map((t,i)=>o.jsx("div",{className:L.cn("bear-w-2 bear-h-2 bear-rounded-full bear-transition-colors",i===c?"bear-bg-[var(--bear-primary-500)]":"bear-bg-neutral-300 dark:bear-bg-neutral-600")},i))}),o.jsxs("div",{className:"bear-flex bear-gap-2 bear-ml-auto",children:[w&&!_&&o.jsx(U.Button,{variant:"ghost",size:"sm",onClick:p,children:y}),P&&!H&&o.jsx(U.Button,{variant:"outline",size:"sm",onClick:q,children:e.prevText||a.TOUR_DEFAULTS.PREV_TEXT}),o.jsx(U.Button,{variant:"primary",size:"sm",onClick:X,children:_?D:e.nextText||a.TOUR_DEFAULTS.NEXT_TEXT})]})]})]})]})};exports.Tour=G;

package/dist/components/Tour/Tour.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t={SHOW_INDICATORS:!0,SHOW_CLOSE_BUTTON:!0,SHOW_SKIP_BUTTON:!0,SHOW_PREV_BUTTON:!0,FINISH_TEXT:"Finish",SKIP_TEXT:"Skip",NEXT_TEXT:"Next",PREV_TEXT:"Back",MASK_OPACITY:.5,MASK_COLOR:"#000000",SPOTLIGHT_PADDING:8,ANIMATED:!0,PLACEMENT:"bottom"},r={OVERLAY:99990,SPOTLIGHT:99991,TOOLTIP:99992},T=12,a={top:{transform:"translate(-50%, -100%)"},"top-start":{transform:"translate(0, -100%)"},"top-end":{transform:"translate(-100%, -100%)"},bottom:{transform:"translate(-50%, 0)"},"bottom-start":{transform:"translate(0, 0)"},"bottom-end":{transform:"translate(-100%, 0)"},left:{transform:"translate(-100%, -50%)"},"left-start":{transform:"translate(-100%, 0)"},"left-end":{transform:"translate(-100%, -100%)"},right:{transform:"translate(0, -50%)"},"right-start":{transform:"translate(0, 0)"},"right-end":{transform:"translate(0, -100%)"}};exports.TOUR_DEFAULTS=t;exports.TOUR_PLACEMENT_STYLES=a;exports.TOUR_TOOLTIP_OFFSET=T;exports.TOUR_Z_INDEX=r;

package/dist/components/Tour/Tour.const.d.ts

@@ -0,0 +1,25 @@
+import { TourPlacement } from './Tour.types';
+export declare const TOUR_DEFAULTS: {
+    readonly SHOW_INDICATORS: true;
+    readonly SHOW_CLOSE_BUTTON: true;
+    readonly SHOW_SKIP_BUTTON: true;
+    readonly SHOW_PREV_BUTTON: true;
+    readonly FINISH_TEXT: "Finish";
+    readonly SKIP_TEXT: "Skip";
+    readonly NEXT_TEXT: "Next";
+    readonly PREV_TEXT: "Back";
+    readonly MASK_OPACITY: 0.5;
+    readonly MASK_COLOR: "#000000";
+    readonly SPOTLIGHT_PADDING: 8;
+    readonly ANIMATED: true;
+    readonly PLACEMENT: TourPlacement;
+};
+export declare const TOUR_Z_INDEX: {
+    readonly OVERLAY: 99990;
+    readonly SPOTLIGHT: 99991;
+    readonly TOOLTIP: 99992;
+};
+export declare const TOUR_TOOLTIP_OFFSET = 12;
+export declare const TOUR_PLACEMENT_STYLES: Record<TourPlacement, {
+    transform: string;
+}>;

package/dist/components/Tour/Tour.const.js

@@ -0,0 +1,38 @@
+const t = {
+  SHOW_INDICATORS: !0,
+  SHOW_CLOSE_BUTTON: !0,
+  SHOW_SKIP_BUTTON: !0,
+  SHOW_PREV_BUTTON: !0,
+  FINISH_TEXT: "Finish",
+  SKIP_TEXT: "Skip",
+  NEXT_TEXT: "Next",
+  PREV_TEXT: "Back",
+  MASK_OPACITY: 0.5,
+  MASK_COLOR: "#000000",
+  SPOTLIGHT_PADDING: 8,
+  ANIMATED: !0,
+  PLACEMENT: "bottom"
+}, r = {
+  OVERLAY: 99990,
+  SPOTLIGHT: 99991,
+  TOOLTIP: 99992
+}, a = 12, T = {
+  top: { transform: "translate(-50%, -100%)" },
+  "top-start": { transform: "translate(0, -100%)" },
+  "top-end": { transform: "translate(-100%, -100%)" },
+  bottom: { transform: "translate(-50%, 0)" },
+  "bottom-start": { transform: "translate(0, 0)" },
+  "bottom-end": { transform: "translate(-100%, 0)" },
+  left: { transform: "translate(-100%, -50%)" },
+  "left-start": { transform: "translate(-100%, 0)" },
+  "left-end": { transform: "translate(-100%, -100%)" },
+  right: { transform: "translate(0, -50%)" },
+  "right-start": { transform: "translate(0, 0)" },
+  "right-end": { transform: "translate(0, -100%)" }
+};
+export {
+  t as TOUR_DEFAULTS,
+  T as TOUR_PLACEMENT_STYLES,
+  a as TOUR_TOOLTIP_OFFSET,
+  r as TOUR_Z_INDEX
+};

package/dist/components/Tour/Tour.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { TourProps } from './Tour.types';
+/**
+ * Tour - Feature tour/onboarding walkthrough
+ *
+ * @example
+ * ```tsx
+ * const steps = [
+ *   { target: '#welcome-btn', title: 'Welcome!', description: 'Click here to start' },
+ *   { target: '#settings', title: 'Settings', description: 'Configure your preferences' },
+ * ];
+ *
+ * <Tour steps={steps} open={showTour} onClose={() => setShowTour(false)} />
+ * ```
+ */
+export declare const Tour: FC<TourProps>;
+export default Tour;

package/dist/components/Tour/Tour.js

@@ -0,0 +1,179 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useState as w, useRef as F, useCallback as T, useEffect as x } from "react";
+import { cn as y } from "../../utils/cn.js";
+import { Button as O } from "../Button/Button.js";
+import { Typography as A } from "../Typography/Typography.js";
+import { TOUR_DEFAULTS as o, TOUR_TOOLTIP_OFFSET as _, TOUR_Z_INDEX as S, TOUR_PLACEMENT_STYLES as J } from "./Tour.const.js";
+const ot = ({
+  steps: s,
+  open: f = !1,
+  current: B,
+  onClose: d,
+  onStepChange: b,
+  onFinish: m,
+  showIndicators: R = o.SHOW_INDICATORS,
+  showCloseButton: U = o.SHOW_CLOSE_BUTTON,
+  showSkipButton: z = o.SHOW_SKIP_BUTTON,
+  showPrevButton: D = o.SHOW_PREV_BUTTON,
+  finishText: H = o.FINISH_TEXT,
+  skipText: M = o.SKIP_TEXT,
+  maskOpacity: I = o.MASK_OPACITY,
+  maskColor: P = o.MASK_COLOR,
+  animated: v = o.ANIMATED,
+  className: W,
+  testId: X
+}) => {
+  const [G, L] = w(0), [r, K] = w(null), [k, V] = w({ top: 0, left: 0 }), j = F(null), c = B ?? G, t = s[c], h = c === s.length - 1, Y = c === 0, p = T(() => t ? typeof t.target == "function" ? t.target() : document.querySelector(t.target) : null, [t]), E = T(() => {
+    const e = p();
+    if (e) {
+      const a = e.getBoundingClientRect();
+      K(a);
+    }
+  }, [p]);
+  x(() => {
+    if (!r || !t) return;
+    const e = t.placement || o.PLACEMENT, a = t.spotlightPadding ?? o.SPOTLIGHT_PADDING;
+    let l = 0, i = 0;
+    switch (e) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        l = r.top - _ - a, i = e === "top" ? r.left + r.width / 2 : e === "top-start" ? r.left : r.right;
+        break;
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        l = r.bottom + _ + a, i = e === "bottom" ? r.left + r.width / 2 : e === "bottom-start" ? r.left : r.right;
+        break;
+      case "left":
+      case "left-start":
+      case "left-end":
+        i = r.left - _ - a, l = e === "left" ? r.top + r.height / 2 : e === "left-start" ? r.top : r.bottom;
+        break;
+      case "right":
+      case "right-start":
+      case "right-end":
+        i = r.right + _ + a, l = e === "right" ? r.top + r.height / 2 : e === "right-start" ? r.top : r.bottom;
+        break;
+    }
+    V({ top: l, left: i });
+  }, [r, t]), x(() => {
+    if (!f) return;
+    E();
+    const e = () => E();
+    return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [f, c, E]), x(() => {
+    if (!f) return;
+    const e = p();
+    e && e.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [f, c, p]);
+  const q = T(async () => {
+    var e, a, l;
+    if (t != null && t.onAfterStep && await t.onAfterStep(), h)
+      m == null || m(), d == null || d();
+    else {
+      const i = c + 1;
+      L(i), b == null || b(i), (e = s[i]) != null && e.onBeforeStep && await ((l = (a = s[i]).onBeforeStep) == null ? void 0 : l.call(a));
+    }
+  }, [c, h, t, s, m, d, b]), Z = T(async () => {
+    var a, l, i;
+    t != null && t.onAfterStep && await t.onAfterStep();
+    const e = c - 1;
+    L(e), b == null || b(e), (a = s[e]) != null && a.onBeforeStep && await ((i = (l = s[e]).onBeforeStep) == null ? void 0 : i.call(l));
+  }, [c, t, s, b]), N = T(() => {
+    d == null || d();
+  }, [d]), $ = (t == null ? void 0 : t.placement) || o.PLACEMENT, g = (t == null ? void 0 : t.spotlightPadding) ?? o.SPOTLIGHT_PADDING;
+  return !f || !t ? null : /* @__PURE__ */ u(
+    "div",
+    {
+      className: y("Bear-Tour", W),
+      "data-testid": X,
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "Bear-Tour__overlay bear-fixed bear-inset-0",
+            style: {
+              zIndex: S.OVERLAY,
+              backgroundColor: P,
+              opacity: I,
+              transition: v ? "opacity 0.3s" : "none"
+            },
+            onClick: N
+          }
+        ),
+        r && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "Bear-Tour__spotlight bear-fixed bear-pointer-events-none",
+            style: {
+              zIndex: S.SPOTLIGHT,
+              top: r.top - g,
+              left: r.left - g,
+              width: r.width + g * 2,
+              height: r.height + g * 2,
+              borderRadius: 8,
+              boxShadow: `0 0 0 9999px ${P}`,
+              opacity: I,
+              transition: v ? "all 0.3s ease" : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            ref: j,
+            className: "Bear-Tour__tooltip bear-fixed bear-bg-white dark:bear-bg-neutral-800 bear-rounded-lg bear-shadow-xl bear-p-4",
+            style: {
+              zIndex: S.TOOLTIP,
+              top: k.top,
+              left: k.left,
+              minWidth: 280,
+              maxWidth: 360,
+              ...J[$],
+              transition: v ? "all 0.3s ease" : "none"
+            },
+            children: [
+              U && /* @__PURE__ */ n(
+                "button",
+                {
+                  className: "Bear-Tour__close bear-absolute bear-top-2 bear-right-2 bear-p-1 bear-text-neutral-400 hover:bear-text-neutral-600 dark:hover:bear-text-neutral-300 bear-cursor-pointer bear-bg-transparent bear-border-none",
+                  onClick: N,
+                  "aria-label": "Close tour",
+                  children: /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ n("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                }
+              ),
+              /* @__PURE__ */ u("div", { className: "Bear-Tour__content bear-pr-6", children: [
+                t.title && /* @__PURE__ */ n(A, { variant: "h6", className: "bear-mb-2", children: t.title }),
+                t.description && /* @__PURE__ */ n(A, { variant: "body2", color: "secondary", className: "bear-mb-4", children: t.description }),
+                t.content
+              ] }),
+              /* @__PURE__ */ u("div", { className: "Bear-Tour__footer bear-flex bear-items-center bear-justify-between bear-mt-4 bear-pt-3 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700", children: [
+                R && /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-1.5", children: s.map((e, a) => /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: y(
+                      "bear-w-2 bear-h-2 bear-rounded-full bear-transition-colors",
+                      a === c ? "bear-bg-[var(--bear-primary-500)]" : "bear-bg-neutral-300 dark:bear-bg-neutral-600"
+                    )
+                  },
+                  a
+                )) }),
+                /* @__PURE__ */ u("div", { className: "bear-flex bear-gap-2 bear-ml-auto", children: [
+                  z && !h && /* @__PURE__ */ n(O, { variant: "ghost", size: "sm", onClick: N, children: M }),
+                  D && !Y && /* @__PURE__ */ n(O, { variant: "outline", size: "sm", onClick: Z, children: t.prevText || o.PREV_TEXT }),
+                  /* @__PURE__ */ n(O, { variant: "primary", size: "sm", onClick: q, children: h ? H : t.nextText || o.NEXT_TEXT })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ot as Tour
+};