@forgedevstack/bear 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Alert/Alert.cjs +1 -1
- package/dist/components/Alert/Alert.const.cjs +1 -1
- package/dist/components/Alert/Alert.const.d.ts +4 -0
- package/dist/components/Alert/Alert.const.js +9 -15
- package/dist/components/Alert/Alert.js +43 -38
- package/dist/components/AppBar/AppBar.cjs +1 -1
- package/dist/components/AppBar/AppBar.js +20 -16
- package/dist/components/BackTop/BackTop.cjs +1 -0
- package/dist/components/BackTop/BackTop.const.cjs +1 -0
- package/dist/components/BackTop/BackTop.const.d.ts +34 -0
- package/dist/components/BackTop/BackTop.const.js +29 -0
- package/dist/components/BackTop/BackTop.d.ts +21 -0
- package/dist/components/BackTop/BackTop.js +87 -0
- package/dist/components/BackTop/BackTop.types.d.ts +28 -0
- package/dist/components/BackTop/index.d.ts +3 -0
- package/dist/components/Badge/Badge.constants.d.ts +4 -4
- package/dist/components/Badge/Badge.types.d.ts +3 -3
- package/dist/components/BottomSheet/BottomSheet.cjs +1 -1
- package/dist/components/BottomSheet/BottomSheet.js +39 -38
- package/dist/components/Button/Button.cjs +1 -1
- package/dist/components/Button/Button.constants.cjs +38 -48
- package/dist/components/Button/Button.constants.d.ts +22 -3
- package/dist/components/Button/Button.constants.js +51 -50
- package/dist/components/Button/Button.d.ts +14 -7
- package/dist/components/Button/Button.js +123 -45
- package/dist/components/Button/Button.types.d.ts +22 -4
- package/dist/components/Calendar/Calendar.cjs +1 -1
- package/dist/components/Calendar/Calendar.js +3 -2
- package/dist/components/Card/Card.const.d.ts +2 -2
- package/dist/components/Card/Card.types.d.ts +2 -2
- package/dist/components/Chat/Chat.cjs +1 -0
- package/dist/components/Chat/Chat.const.cjs +1 -0
- package/dist/components/Chat/Chat.const.d.ts +26 -0
- package/dist/components/Chat/Chat.const.js +29 -0
- package/dist/components/Chat/Chat.d.ts +21 -0
- package/dist/components/Chat/Chat.js +179 -0
- package/dist/components/Chat/Chat.types.d.ts +55 -0
- package/dist/components/Chat/index.d.ts +2 -0
- package/dist/components/Confetti/Confetti.cjs +1 -0
- package/dist/components/Confetti/Confetti.const.cjs +1 -0
- package/dist/components/Confetti/Confetti.const.d.ts +16 -0
- package/dist/components/Confetti/Confetti.const.js +36 -0
- package/dist/components/Confetti/Confetti.d.ts +23 -0
- package/dist/components/Confetti/Confetti.js +94 -0
- package/dist/components/Confetti/Confetti.types.d.ts +50 -0
- package/dist/components/Confetti/index.d.ts +4 -0
- package/dist/components/Confetti/useConfetti.cjs +1 -0
- package/dist/components/Confetti/useConfetti.d.ts +13 -0
- package/dist/components/Confetti/useConfetti.js +12 -0
- package/dist/components/DatePicker/DatePicker.cjs +1 -1
- package/dist/components/DatePicker/DatePicker.js +3 -2
- package/dist/components/DiffViewer/DiffViewer.cjs +1 -0
- package/dist/components/DiffViewer/DiffViewer.const.cjs +1 -0
- package/dist/components/DiffViewer/DiffViewer.const.d.ts +18 -0
- package/dist/components/DiffViewer/DiffViewer.const.js +21 -0
- package/dist/components/DiffViewer/DiffViewer.d.ts +18 -0
- package/dist/components/DiffViewer/DiffViewer.js +127 -0
- package/dist/components/DiffViewer/DiffViewer.types.d.ts +40 -0
- package/dist/components/DiffViewer/DiffViewer.utils.cjs +3 -0
- package/dist/components/DiffViewer/DiffViewer.utils.d.ts +9 -0
- package/dist/components/DiffViewer/DiffViewer.utils.js +39 -0
- package/dist/components/DiffViewer/index.d.ts +2 -0
- package/dist/components/Drawer/Drawer.cjs +1 -1
- package/dist/components/Drawer/Drawer.js +35 -35
- package/dist/components/FloatingChat/FloatingChat.cjs +1 -0
- package/dist/components/FloatingChat/FloatingChat.const.cjs +1 -0
- package/dist/components/FloatingChat/FloatingChat.const.d.ts +12 -0
- package/dist/components/FloatingChat/FloatingChat.const.js +15 -0
- package/dist/components/FloatingChat/FloatingChat.d.ts +19 -0
- package/dist/components/FloatingChat/FloatingChat.js +144 -0
- package/dist/components/FloatingChat/FloatingChat.types.d.ts +44 -0
- package/dist/components/FloatingChat/index.d.ts +2 -0
- package/dist/components/JsonViewer/JsonViewer.cjs +1 -0
- package/dist/components/JsonViewer/JsonViewer.const.cjs +1 -0
- package/dist/components/JsonViewer/JsonViewer.const.d.ts +4 -0
- package/dist/components/JsonViewer/JsonViewer.const.js +24 -0
- package/dist/components/JsonViewer/JsonViewer.d.ts +17 -0
- package/dist/components/JsonViewer/JsonViewer.js +195 -0
- package/dist/components/JsonViewer/JsonViewer.types.d.ts +54 -0
- package/dist/components/JsonViewer/index.d.ts +2 -0
- package/dist/components/Kanban/Kanban.cjs +1 -1
- package/dist/components/Kanban/Kanban.js +18 -17
- package/dist/components/QRCode/QRCode.cjs +1 -0
- package/dist/components/QRCode/QRCode.const.cjs +1 -0
- package/dist/components/QRCode/QRCode.const.d.ts +21 -0
- package/dist/components/QRCode/QRCode.const.js +11 -0
- package/dist/components/QRCode/QRCode.d.ts +29 -0
- package/dist/components/QRCode/QRCode.js +68 -0
- package/dist/components/QRCode/QRCode.types.d.ts +32 -0
- package/dist/components/QRCode/QRCode.utils.cjs +1 -0
- package/dist/components/QRCode/QRCode.utils.d.ts +12 -0
- package/dist/components/QRCode/QRCode.utils.js +74 -0
- package/dist/components/QRCode/index.d.ts +3 -0
- package/dist/components/Spinner/Spinner.types.d.ts +2 -2
- package/dist/components/Terminal/Terminal.cjs +1 -0
- package/dist/components/Terminal/Terminal.const.cjs +1 -0
- package/dist/components/Terminal/Terminal.const.d.ts +32 -0
- package/dist/components/Terminal/Terminal.const.js +42 -0
- package/dist/components/Terminal/Terminal.d.ts +27 -0
- package/dist/components/Terminal/Terminal.js +155 -0
- package/dist/components/Terminal/Terminal.types.d.ts +49 -0
- package/dist/components/Terminal/index.d.ts +2 -0
- package/dist/components/Tour/Tour.cjs +1 -0
- package/dist/components/Tour/Tour.const.cjs +1 -0
- package/dist/components/Tour/Tour.const.d.ts +25 -0
- package/dist/components/Tour/Tour.const.js +38 -0
- package/dist/components/Tour/Tour.d.ts +17 -0
- package/dist/components/Tour/Tour.js +179 -0
- package/dist/components/Tour/Tour.types.d.ts +80 -0
- package/dist/components/Tour/index.d.ts +4 -0
- package/dist/components/Tour/useTour.cjs +1 -0
- package/dist/components/Tour/useTour.d.ts +14 -0
- package/dist/components/Tour/useTour.js +27 -0
- package/dist/components/Typography/Typography.cjs +1 -1
- package/dist/components/Typography/Typography.d.ts +5 -1
- package/dist/components/Typography/Typography.js +93 -57
- package/dist/components/Typography/Typography.types.d.ts +29 -2
- package/dist/components/index.cjs +1 -1
- package/dist/components/index.d.ts +19 -1
- package/dist/components/index.js +242 -218
- package/dist/context/BearProvider.cjs +1 -1
- package/dist/context/BearProvider.d.ts +110 -5
- package/dist/context/BearProvider.js +198 -53
- package/dist/context/defaultTheme.cjs +1 -1
- package/dist/context/defaultTheme.js +11 -11
- package/dist/hooks/index.cjs +1 -1
- package/dist/hooks/index.d.ts +14 -0
- package/dist/hooks/index.js +56 -39
- package/dist/hooks/useBearComponent/index.d.ts +2 -0
- package/dist/hooks/useBearComponent/useBearComponent.cjs +1 -0
- package/dist/hooks/useBearComponent/useBearComponent.d.ts +71 -0
- package/dist/hooks/useBearComponent/useBearComponent.js +54 -0
- package/dist/hooks/useBearComponent/useBearComponent.types.d.ts +40 -0
- package/dist/hooks/useIdle/index.d.ts +2 -0
- package/dist/hooks/useIdle/useIdle.cjs +1 -0
- package/dist/hooks/useIdle/useIdle.d.ts +22 -0
- package/dist/hooks/useIdle/useIdle.js +66 -0
- package/dist/hooks/useIdle/useIdle.types.d.ts +29 -0
- package/dist/hooks/useLongPress/index.d.ts +2 -0
- package/dist/hooks/useLongPress/useLongPress.cjs +1 -0
- package/dist/hooks/useLongPress/useLongPress.d.ts +17 -0
- package/dist/hooks/useLongPress/useLongPress.js +44 -0
- package/dist/hooks/useLongPress/useLongPress.types.d.ts +26 -0
- package/dist/hooks/useOnline/index.d.ts +2 -0
- package/dist/hooks/useOnline/useOnline.cjs +1 -0
- package/dist/hooks/useOnline/useOnline.d.ts +16 -0
- package/dist/hooks/useOnline/useOnline.js +25 -0
- package/dist/hooks/useOnline/useOnline.types.d.ts +15 -0
- package/dist/hooks/usePageVisibility/index.d.ts +2 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.cjs +1 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.d.ts +19 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.js +26 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.types.d.ts +15 -0
- package/dist/hooks/useSpotlight/index.d.ts +2 -0
- package/dist/hooks/useSpotlight/useSpotlight.cjs +1 -0
- package/dist/hooks/useSpotlight/useSpotlight.d.ts +24 -0
- package/dist/hooks/useSpotlight/useSpotlight.js +49 -0
- package/dist/hooks/useSpotlight/useSpotlight.types.d.ts +23 -0
- package/dist/hooks/useWebSocket/index.d.ts +2 -0
- package/dist/hooks/useWebSocket/useWebSocket.cjs +1 -0
- package/dist/hooks/useWebSocket/useWebSocket.d.ts +22 -0
- package/dist/hooks/useWebSocket/useWebSocket.js +75 -0
- package/dist/hooks/useWebSocket/useWebSocket.types.d.ts +44 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +324 -283
- package/dist/styles.css +1 -1
- package/dist/types/component.types.d.ts +125 -42
- package/dist/types/theme.types.d.ts +82 -0
- package/package.json +1 -1
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export interface ConfettiPiece {
|
|
2
|
+
id: number;
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
rotation: number;
|
|
6
|
+
color: string;
|
|
7
|
+
size: number;
|
|
8
|
+
velocity: {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
};
|
|
12
|
+
rotationSpeed: number;
|
|
13
|
+
shape: 'square' | 'circle' | 'triangle';
|
|
14
|
+
}
|
|
15
|
+
export interface ConfettiProps {
|
|
16
|
+
/** Whether confetti is active */
|
|
17
|
+
active?: boolean;
|
|
18
|
+
/** Number of confetti pieces */
|
|
19
|
+
count?: number;
|
|
20
|
+
/** Duration in ms before confetti disappears */
|
|
21
|
+
duration?: number;
|
|
22
|
+
/** Custom colors array */
|
|
23
|
+
colors?: string[];
|
|
24
|
+
/** Confetti origin x position (0-1) */
|
|
25
|
+
originX?: number;
|
|
26
|
+
/** Confetti origin y position (0-1) */
|
|
27
|
+
originY?: number;
|
|
28
|
+
/** Spread angle in degrees */
|
|
29
|
+
spread?: number;
|
|
30
|
+
/** Initial velocity */
|
|
31
|
+
velocity?: number;
|
|
32
|
+
/** Gravity effect */
|
|
33
|
+
gravity?: number;
|
|
34
|
+
/** Whether to auto-hide after duration */
|
|
35
|
+
autoHide?: boolean;
|
|
36
|
+
/** Callback when animation completes */
|
|
37
|
+
onComplete?: () => void;
|
|
38
|
+
/** Custom class name */
|
|
39
|
+
className?: string;
|
|
40
|
+
/** Test ID */
|
|
41
|
+
testId?: string;
|
|
42
|
+
}
|
|
43
|
+
export interface UseConfettiReturn {
|
|
44
|
+
/** Fire confetti */
|
|
45
|
+
fire: () => void;
|
|
46
|
+
/** Stop confetti */
|
|
47
|
+
stop: () => void;
|
|
48
|
+
/** Whether confetti is active */
|
|
49
|
+
isActive: boolean;
|
|
50
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),u=()=>{const[s,t]=e.useState(!1),c=e.useCallback(()=>{t(!0)},[]),o=e.useCallback(()=>{t(!1)},[]);return{fire:c,stop:o,isActive:s}};exports.useConfetti=u;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { UseConfettiReturn } from './Confetti.types';
|
|
2
|
+
/**
|
|
3
|
+
* useConfetti - Hook to control confetti programmatically
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const { fire, stop, isActive } = useConfetti();
|
|
8
|
+
*
|
|
9
|
+
* <Confetti active={isActive} onComplete={stop} />
|
|
10
|
+
* <Button onClick={fire}>Celebrate!</Button>
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export declare const useConfetti: () => UseConfettiReturn;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:o,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:N=[],highlightedDates:g=[],slots:q,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[i,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(i&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[i]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!i),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],o?"bear-border-red-500":"focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})})]}),o&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:o}),m&&!o&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),i&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:N,highlightedDates:g,slots:q,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;
|
|
@@ -4,8 +4,9 @@ import { createPortal as X } from "react-dom";
|
|
|
4
4
|
import { Calendar as Z } from "../Calendar/Calendar.js";
|
|
5
5
|
import { cn as B } from "../../utils/cn.js";
|
|
6
6
|
import { useBearStyles as $ } from "../../hooks/useBearStyles.js";
|
|
7
|
+
import "../../hooks/useBearComponent/useBearComponent.js";
|
|
7
8
|
import { formatDate as C } from "./DatePicker.utils.js";
|
|
8
|
-
const
|
|
9
|
+
const ie = ({
|
|
9
10
|
value: o,
|
|
10
11
|
onChange: t,
|
|
11
12
|
minDate: _,
|
|
@@ -123,5 +124,5 @@ const ce = ({
|
|
|
123
124
|
] });
|
|
124
125
|
};
|
|
125
126
|
export {
|
|
126
|
-
|
|
127
|
+
ie as DatePicker
|
|
127
128
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),b=require("../../utils/cn.cjs"),T=require("../../context/BearProvider.cjs"),a=require("../Typography/Typography.cjs"),f=require("./DiffViewer.const.cjs"),h=require("./DiffViewer.utils.cjs"),q=({oldValue:c,newValue:l,viewMode:v="split",showLineNumbers:u=!0,oldTitle:N="Original",newTitle:j="Modified",showStats:x=!0,className:g,testId:m})=>{const{mode:w}=T.useBear(),p=w==="dark",d=y.useMemo(()=>h.computeDiff(c,l),[c,l]),i=y.useMemo(()=>h.computeStats(d),[d]),t=r=>u?e.jsx("span",{className:"select-none text-gray-400 dark:text-gray-600 text-right pr-3",style:{minWidth:f.LINE_NUMBER_WIDTH},children:r??""}):null,n=(r,s)=>{const o=f.DIFF_COLORS[s],D=s==="add"?"+":s==="remove"?"-":" ";return e.jsxs("div",{className:"flex font-mono text-sm",style:{backgroundColor:o.bg,borderLeft:`3px solid ${o.border}`},children:[e.jsx("span",{className:"px-2 select-none font-bold",style:{color:o.text},children:D}),e.jsx("span",{className:"flex-1 whitespace-pre",children:r})]})};if(v==="unified")return e.jsxs("div",{className:b.cn("Bear-DiffViewer","rounded-lg overflow-hidden border",p?"bg-gray-900 border-gray-700":"bg-white border-gray-200",g),"data-testid":m,children:[x&&e.jsxs("div",{className:"flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700",children:[e.jsxs(a.Typography,{variant:"caption",className:"text-green-600",children:["+",i.additions," additions"]}),e.jsxs(a.Typography,{variant:"caption",className:"text-red-600",children:["-",i.deletions," deletions"]})]}),e.jsx("div",{className:"overflow-x-auto",children:d.map((r,s)=>e.jsxs("div",{className:"flex",children:[t(r.oldLineNumber||r.newLineNumber),e.jsx("div",{className:"flex-1",children:n(r.content,r.type)})]},s))})]});const k=d.filter(r=>r.type!=="add"),L=d.filter(r=>r.type!=="remove");return e.jsxs("div",{className:b.cn("Bear-DiffViewer","rounded-lg overflow-hidden border",p?"bg-gray-900 border-gray-700":"bg-white border-gray-200",g),"data-testid":m,children:[x&&e.jsxs("div",{className:"flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700",children:[e.jsxs(a.Typography,{variant:"caption",className:"text-green-600",children:["+",i.additions," additions"]}),e.jsxs(a.Typography,{variant:"caption",className:"text-red-600",children:["-",i.deletions," deletions"]})]}),e.jsxs("div",{className:"grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700",children:[e.jsxs("div",{children:[e.jsx("div",{className:"px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",children:e.jsx(a.Typography,{variant:"caption",className:"font-semibold",children:N})}),e.jsx("div",{className:"overflow-x-auto",children:k.map((r,s)=>e.jsxs("div",{className:"flex",children:[t(r.oldLineNumber),e.jsx("div",{className:"flex-1",children:n(r.content,r.type==="remove"?"remove":"context")})]},s))})]}),e.jsxs("div",{children:[e.jsx("div",{className:"px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",children:e.jsx(a.Typography,{variant:"caption",className:"font-semibold",children:j})}),e.jsx("div",{className:"overflow-x-auto",children:L.map((r,s)=>e.jsxs("div",{className:"flex",children:[t(r.newLineNumber),e.jsx("div",{className:"flex-1",children:n(r.content,r.type==="add"?"add":"context")})]},s))})]})]})]})};exports.DiffViewer=q;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={add:{bg:"rgba(34, 197, 94, 0.15)",border:"rgba(34, 197, 94, 0.4)",text:"#22c55e"},remove:{bg:"rgba(239, 68, 68, 0.15)",border:"rgba(239, 68, 68, 0.4)",text:"#ef4444"},context:{bg:"transparent",border:"transparent",text:"inherit"}},t=50;exports.DIFF_COLORS=e;exports.LINE_NUMBER_WIDTH=t;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const DIFF_COLORS: {
|
|
2
|
+
readonly add: {
|
|
3
|
+
readonly bg: "rgba(34, 197, 94, 0.15)";
|
|
4
|
+
readonly border: "rgba(34, 197, 94, 0.4)";
|
|
5
|
+
readonly text: "#22c55e";
|
|
6
|
+
};
|
|
7
|
+
readonly remove: {
|
|
8
|
+
readonly bg: "rgba(239, 68, 68, 0.15)";
|
|
9
|
+
readonly border: "rgba(239, 68, 68, 0.4)";
|
|
10
|
+
readonly text: "#ef4444";
|
|
11
|
+
};
|
|
12
|
+
readonly context: {
|
|
13
|
+
readonly bg: "transparent";
|
|
14
|
+
readonly border: "transparent";
|
|
15
|
+
readonly text: "inherit";
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare const LINE_NUMBER_WIDTH = 50;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const r = {
|
|
2
|
+
add: {
|
|
3
|
+
bg: "rgba(34, 197, 94, 0.15)",
|
|
4
|
+
border: "rgba(34, 197, 94, 0.4)",
|
|
5
|
+
text: "#22c55e"
|
|
6
|
+
},
|
|
7
|
+
remove: {
|
|
8
|
+
bg: "rgba(239, 68, 68, 0.15)",
|
|
9
|
+
border: "rgba(239, 68, 68, 0.4)",
|
|
10
|
+
text: "#ef4444"
|
|
11
|
+
},
|
|
12
|
+
context: {
|
|
13
|
+
bg: "transparent",
|
|
14
|
+
border: "transparent",
|
|
15
|
+
text: "inherit"
|
|
16
|
+
}
|
|
17
|
+
}, t = 50;
|
|
18
|
+
export {
|
|
19
|
+
r as DIFF_COLORS,
|
|
20
|
+
t as LINE_NUMBER_WIDTH
|
|
21
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { DiffViewerProps } from './DiffViewer.types';
|
|
3
|
+
/**
|
|
4
|
+
* DiffViewer - Compare and visualize text/code differences
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* <DiffViewer
|
|
9
|
+
* oldValue="const x = 1;"
|
|
10
|
+
* newValue="const x = 2;"
|
|
11
|
+
* viewMode="split"
|
|
12
|
+
* showLineNumbers
|
|
13
|
+
* showStats
|
|
14
|
+
* />
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare const DiffViewer: FC<DiffViewerProps>;
|
|
18
|
+
export default DiffViewer;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { jsxs as r, jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as v } from "react";
|
|
3
|
+
import { cn as h } from "../../utils/cn.js";
|
|
4
|
+
import { useBear as B } from "../../context/BearProvider.js";
|
|
5
|
+
import { Typography as i } from "../Typography/Typography.js";
|
|
6
|
+
import { LINE_NUMBER_WIDTH as M, DIFF_COLORS as O } from "./DiffViewer.const.js";
|
|
7
|
+
import { computeDiff as _, computeStats as j } from "./DiffViewer.utils.js";
|
|
8
|
+
const H = ({
|
|
9
|
+
oldValue: l,
|
|
10
|
+
newValue: m,
|
|
11
|
+
viewMode: x = "split",
|
|
12
|
+
showLineNumbers: y = !0,
|
|
13
|
+
oldTitle: N = "Original",
|
|
14
|
+
newTitle: u = "Modified",
|
|
15
|
+
showStats: f = !0,
|
|
16
|
+
className: p,
|
|
17
|
+
testId: g
|
|
18
|
+
}) => {
|
|
19
|
+
const { mode: w } = B(), b = w === "dark", o = v(() => _(l, m), [l, m]), t = v(() => j(o), [o]), n = (e) => y ? /* @__PURE__ */ d(
|
|
20
|
+
"span",
|
|
21
|
+
{
|
|
22
|
+
className: "select-none text-gray-400 dark:text-gray-600 text-right pr-3",
|
|
23
|
+
style: { minWidth: M },
|
|
24
|
+
children: e ?? ""
|
|
25
|
+
}
|
|
26
|
+
) : null, s = (e, a) => {
|
|
27
|
+
const c = O[a], D = a === "add" ? "+" : a === "remove" ? "-" : " ";
|
|
28
|
+
return /* @__PURE__ */ r(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
className: "flex font-mono text-sm",
|
|
32
|
+
style: {
|
|
33
|
+
backgroundColor: c.bg,
|
|
34
|
+
borderLeft: `3px solid ${c.border}`
|
|
35
|
+
},
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ d(
|
|
38
|
+
"span",
|
|
39
|
+
{
|
|
40
|
+
className: "px-2 select-none font-bold",
|
|
41
|
+
style: { color: c.text },
|
|
42
|
+
children: D
|
|
43
|
+
}
|
|
44
|
+
),
|
|
45
|
+
/* @__PURE__ */ d("span", { className: "flex-1 whitespace-pre", children: e })
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
if (x === "unified")
|
|
51
|
+
return /* @__PURE__ */ r(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
className: h(
|
|
55
|
+
"Bear-DiffViewer",
|
|
56
|
+
"rounded-lg overflow-hidden border",
|
|
57
|
+
b ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200",
|
|
58
|
+
p
|
|
59
|
+
),
|
|
60
|
+
"data-testid": g,
|
|
61
|
+
children: [
|
|
62
|
+
f && /* @__PURE__ */ r("div", { className: "flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700", children: [
|
|
63
|
+
/* @__PURE__ */ r(i, { variant: "caption", className: "text-green-600", children: [
|
|
64
|
+
"+",
|
|
65
|
+
t.additions,
|
|
66
|
+
" additions"
|
|
67
|
+
] }),
|
|
68
|
+
/* @__PURE__ */ r(i, { variant: "caption", className: "text-red-600", children: [
|
|
69
|
+
"-",
|
|
70
|
+
t.deletions,
|
|
71
|
+
" deletions"
|
|
72
|
+
] })
|
|
73
|
+
] }),
|
|
74
|
+
/* @__PURE__ */ d("div", { className: "overflow-x-auto", children: o.map((e, a) => /* @__PURE__ */ r("div", { className: "flex", children: [
|
|
75
|
+
n(e.oldLineNumber || e.newLineNumber),
|
|
76
|
+
/* @__PURE__ */ d("div", { className: "flex-1", children: s(e.content, e.type) })
|
|
77
|
+
] }, a)) })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
const k = o.filter((e) => e.type !== "add"), L = o.filter((e) => e.type !== "remove");
|
|
82
|
+
return /* @__PURE__ */ r(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: h(
|
|
86
|
+
"Bear-DiffViewer",
|
|
87
|
+
"rounded-lg overflow-hidden border",
|
|
88
|
+
b ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200",
|
|
89
|
+
p
|
|
90
|
+
),
|
|
91
|
+
"data-testid": g,
|
|
92
|
+
children: [
|
|
93
|
+
f && /* @__PURE__ */ r("div", { className: "flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700", children: [
|
|
94
|
+
/* @__PURE__ */ r(i, { variant: "caption", className: "text-green-600", children: [
|
|
95
|
+
"+",
|
|
96
|
+
t.additions,
|
|
97
|
+
" additions"
|
|
98
|
+
] }),
|
|
99
|
+
/* @__PURE__ */ r(i, { variant: "caption", className: "text-red-600", children: [
|
|
100
|
+
"-",
|
|
101
|
+
t.deletions,
|
|
102
|
+
" deletions"
|
|
103
|
+
] })
|
|
104
|
+
] }),
|
|
105
|
+
/* @__PURE__ */ r("div", { className: "grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700", children: [
|
|
106
|
+
/* @__PURE__ */ r("div", { children: [
|
|
107
|
+
/* @__PURE__ */ d("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ d(i, { variant: "caption", className: "font-semibold", children: N }) }),
|
|
108
|
+
/* @__PURE__ */ d("div", { className: "overflow-x-auto", children: k.map((e, a) => /* @__PURE__ */ r("div", { className: "flex", children: [
|
|
109
|
+
n(e.oldLineNumber),
|
|
110
|
+
/* @__PURE__ */ d("div", { className: "flex-1", children: s(e.content, e.type === "remove" ? "remove" : "context") })
|
|
111
|
+
] }, a)) })
|
|
112
|
+
] }),
|
|
113
|
+
/* @__PURE__ */ r("div", { children: [
|
|
114
|
+
/* @__PURE__ */ d("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ d(i, { variant: "caption", className: "font-semibold", children: u }) }),
|
|
115
|
+
/* @__PURE__ */ d("div", { className: "overflow-x-auto", children: L.map((e, a) => /* @__PURE__ */ r("div", { className: "flex", children: [
|
|
116
|
+
n(e.newLineNumber),
|
|
117
|
+
/* @__PURE__ */ d("div", { className: "flex-1", children: s(e.content, e.type === "add" ? "add" : "context") })
|
|
118
|
+
] }, a)) })
|
|
119
|
+
] })
|
|
120
|
+
] })
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
};
|
|
125
|
+
export {
|
|
126
|
+
H as DiffViewer
|
|
127
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DiffViewer component types
|
|
3
|
+
*/
|
|
4
|
+
export type DiffViewMode = 'split' | 'unified';
|
|
5
|
+
export type DiffLineType = 'add' | 'remove' | 'context';
|
|
6
|
+
export interface DiffViewerProps {
|
|
7
|
+
/** Original text (left side) */
|
|
8
|
+
oldValue: string;
|
|
9
|
+
/** New text (right side) */
|
|
10
|
+
newValue: string;
|
|
11
|
+
/** View mode (default: 'split') */
|
|
12
|
+
viewMode?: DiffViewMode;
|
|
13
|
+
/** Show line numbers */
|
|
14
|
+
showLineNumbers?: boolean;
|
|
15
|
+
/** Highlight syntax (for code) */
|
|
16
|
+
syntaxHighlight?: boolean;
|
|
17
|
+
/** Language for syntax highlighting */
|
|
18
|
+
language?: string;
|
|
19
|
+
/** Old value title */
|
|
20
|
+
oldTitle?: string;
|
|
21
|
+
/** New value title */
|
|
22
|
+
newTitle?: string;
|
|
23
|
+
/** Show diff statistics */
|
|
24
|
+
showStats?: boolean;
|
|
25
|
+
/** Custom class name */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** Test ID */
|
|
28
|
+
testId?: string;
|
|
29
|
+
}
|
|
30
|
+
export interface DiffLine {
|
|
31
|
+
type: DiffLineType;
|
|
32
|
+
oldLineNumber?: number;
|
|
33
|
+
newLineNumber?: number;
|
|
34
|
+
content: string;
|
|
35
|
+
}
|
|
36
|
+
export interface DiffStats {
|
|
37
|
+
additions: number;
|
|
38
|
+
deletions: number;
|
|
39
|
+
unchanged: number;
|
|
40
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m(d,s){const o=d.split(`
|
|
2
|
+
`),u=s.split(`
|
|
3
|
+
`),p=o.length,f=u.length,l=Array(p+1).fill(null).map(()=>Array(f+1).fill(0));for(let t=1;t<=p;t++)for(let i=1;i<=f;i++)o[t-1]===u[i-1]?l[t][i]=l[t-1][i-1]+1:l[t][i]=Math.max(l[t-1][i],l[t][i-1]);const c=[];let e=p,n=f;const r=[];for(;e>0||n>0;)e>0&&n>0&&o[e-1]===u[n-1]?(r.push({type:"context",oldLineNumber:e,newLineNumber:n,content:o[e-1]}),e--,n--):n>0&&(e===0||l[e][n-1]>=l[e-1][n])?(r.push({type:"add",newLineNumber:n,content:u[n-1]}),n--):e>0&&(r.push({type:"remove",oldLineNumber:e,content:o[e-1]}),e--);for(let t=r.length-1;t>=0;t--)c.push(r[t]);return c}function a(d){return d.reduce((s,o)=>(o.type==="add"?s.additions++:o.type==="remove"?s.deletions++:s.unchanged++,s),{additions:0,deletions:0,unchanged:0})}exports.computeDiff=m;exports.computeStats=a;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { DiffLine, DiffStats } from './DiffViewer.types';
|
|
2
|
+
/**
|
|
3
|
+
* Simple diff algorithm (Myers-like LCS based)
|
|
4
|
+
*/
|
|
5
|
+
export declare function computeDiff(oldText: string, newText: string): DiffLine[];
|
|
6
|
+
/**
|
|
7
|
+
* Calculate diff statistics
|
|
8
|
+
*/
|
|
9
|
+
export declare function computeStats(diff: DiffLine[]): DiffStats;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
function m(d, s) {
|
|
2
|
+
const o = d.split(`
|
|
3
|
+
`), u = s.split(`
|
|
4
|
+
`), p = o.length, f = u.length, l = Array(p + 1).fill(null).map(() => Array(f + 1).fill(0));
|
|
5
|
+
for (let t = 1; t <= p; t++)
|
|
6
|
+
for (let i = 1; i <= f; i++)
|
|
7
|
+
o[t - 1] === u[i - 1] ? l[t][i] = l[t - 1][i - 1] + 1 : l[t][i] = Math.max(l[t - 1][i], l[t][i - 1]);
|
|
8
|
+
const c = [];
|
|
9
|
+
let e = p, n = f;
|
|
10
|
+
const r = [];
|
|
11
|
+
for (; e > 0 || n > 0; )
|
|
12
|
+
e > 0 && n > 0 && o[e - 1] === u[n - 1] ? (r.push({
|
|
13
|
+
type: "context",
|
|
14
|
+
oldLineNumber: e,
|
|
15
|
+
newLineNumber: n,
|
|
16
|
+
content: o[e - 1]
|
|
17
|
+
}), e--, n--) : n > 0 && (e === 0 || l[e][n - 1] >= l[e - 1][n]) ? (r.push({
|
|
18
|
+
type: "add",
|
|
19
|
+
newLineNumber: n,
|
|
20
|
+
content: u[n - 1]
|
|
21
|
+
}), n--) : e > 0 && (r.push({
|
|
22
|
+
type: "remove",
|
|
23
|
+
oldLineNumber: e,
|
|
24
|
+
content: o[e - 1]
|
|
25
|
+
}), e--);
|
|
26
|
+
for (let t = r.length - 1; t >= 0; t--)
|
|
27
|
+
c.push(r[t]);
|
|
28
|
+
return c;
|
|
29
|
+
}
|
|
30
|
+
function h(d) {
|
|
31
|
+
return d.reduce(
|
|
32
|
+
(s, o) => (o.type === "add" ? s.additions++ : o.type === "remove" ? s.deletions++ : s.unchanged++, s),
|
|
33
|
+
{ additions: 0, deletions: 0, unchanged: 0 }
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
export {
|
|
37
|
+
m as computeDiff,
|
|
38
|
+
h as computeStats
|
|
39
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),j=require("react-dom"),x=require("../../utils/cn.cjs"),N=require("../Icon/index.cjs"),d=300,q={left:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},right:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},top:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"},bottom:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"}},C={left:"bear-left-0 bear-top-0 bear-h-full",right:"bear-right-0 bear-top-0 bear-h-full",top:"bear-top-0 bear-left-0 bear-w-full",bottom:"bear-bottom-0 bear-left-0 bear-w-full"},D={left:"bear-translate-x-0",right:"bear-translate-x-0",top:"bear-translate-y-0",bottom:"bear-translate-y-0"},E={left:"-bear-translate-x-full",right:"bear-translate-x-full",top:"-bear-translate-y-full",bottom:"bear-translate-y-full"},S=({isOpen:s,onClose:l,title:o,children:w,side:e="right",size:g="md",showCloseButton:u=!0,closeOnBackdrop:y=!0,closeOnEscape:c=!0,className:p})=>{const[t,m]=a.useState(s),[f,n]=a.useState(!1),[v,h]=a.useState(!1);a.useEffect(()=>{if(s){m(!0),n(!1);const b=requestAnimationFrame(()=>h(!0));return()=>cancelAnimationFrame(b)}if(t){h(!1),n(!0);const b=setTimeout(()=>{m(!1),n(!1)},d);return()=>clearTimeout(b)}},[s,t]);const i=a.useCallback(b=>{c&&b.key==="Escape"&&l()},[c,l]);if(a.useEffect(()=>(t&&(document.addEventListener("keydown",i),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",i),document.body.style.overflow=""}),[t,i]),!t)return null;const k=r.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-50",children:[r.jsx("div",{className:x.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",f?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${d}ms`},onClick:y?l:void 0,"aria-hidden":"true"}),r.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":o?"drawer-title":void 0,className:x.cn("bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700 bear-overflow-hidden","bear-transform bear-transition-transform",e==="left"&&"bear-border-r",e==="right"&&"bear-border-l",e==="top"&&"bear-border-b",e==="bottom"&&"bear-border-t",C[e],q[e][g],v&&!f?D[e]:E[e],p),style:{transitionDuration:`${d}ms`},children:[(o||u)&&r.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700",children:[o&&r.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:o}),u&&r.jsx("button",{onClick:l,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:r.jsx(N.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx("div",{className:"bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:w})]})]});return j.createPortal(k,document.body)};exports.Drawer=S;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as i, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as d, useEffect as p, useCallback as A } from "react";
|
|
3
3
|
import { createPortal as E } from "react-dom";
|
|
4
|
-
import { cn as
|
|
4
|
+
import { cn as x } from "../../utils/cn.js";
|
|
5
5
|
import { XIcon as I } from "../Icon/index.js";
|
|
6
|
-
const
|
|
6
|
+
const m = 300, D = {
|
|
7
7
|
left: {
|
|
8
8
|
sm: "bear-w-64",
|
|
9
9
|
md: "bear-w-80",
|
|
@@ -47,47 +47,47 @@ const d = 300, D = {
|
|
|
47
47
|
isOpen: l,
|
|
48
48
|
onClose: b,
|
|
49
49
|
title: o,
|
|
50
|
-
children:
|
|
50
|
+
children: g,
|
|
51
51
|
side: e = "right",
|
|
52
|
-
size:
|
|
53
|
-
showCloseButton:
|
|
52
|
+
size: y = "md",
|
|
53
|
+
showCloseButton: u = !0,
|
|
54
54
|
closeOnBackdrop: v = !0,
|
|
55
|
-
closeOnEscape:
|
|
56
|
-
className:
|
|
55
|
+
closeOnEscape: c = !0,
|
|
56
|
+
className: k
|
|
57
57
|
}) => {
|
|
58
|
-
const [r,
|
|
59
|
-
|
|
58
|
+
const [r, f] = d(l), [h, n] = d(!1), [N, w] = d(!1);
|
|
59
|
+
p(() => {
|
|
60
60
|
if (l) {
|
|
61
|
-
|
|
62
|
-
const a = requestAnimationFrame(() =>
|
|
61
|
+
f(!0), n(!1);
|
|
62
|
+
const a = requestAnimationFrame(() => w(!0));
|
|
63
63
|
return () => cancelAnimationFrame(a);
|
|
64
64
|
}
|
|
65
65
|
if (r) {
|
|
66
|
-
|
|
66
|
+
w(!1), n(!0);
|
|
67
67
|
const a = setTimeout(() => {
|
|
68
|
-
|
|
69
|
-
},
|
|
68
|
+
f(!1), n(!1);
|
|
69
|
+
}, m);
|
|
70
70
|
return () => clearTimeout(a);
|
|
71
71
|
}
|
|
72
72
|
}, [l, r]);
|
|
73
|
-
const
|
|
73
|
+
const s = A(
|
|
74
74
|
(a) => {
|
|
75
|
-
|
|
75
|
+
c && a.key === "Escape" && b();
|
|
76
76
|
},
|
|
77
|
-
[
|
|
77
|
+
[c, b]
|
|
78
78
|
);
|
|
79
|
-
if (
|
|
80
|
-
document.removeEventListener("keydown",
|
|
81
|
-
}), [r,
|
|
79
|
+
if (p(() => (r && (document.addEventListener("keydown", s), document.body.style.overflow = "hidden"), () => {
|
|
80
|
+
document.removeEventListener("keydown", s), document.body.style.overflow = "";
|
|
81
|
+
}), [r, s]), !r) return null;
|
|
82
82
|
const C = /* @__PURE__ */ i("div", { className: "bear-fixed bear-inset-0 bear-z-50", children: [
|
|
83
83
|
/* @__PURE__ */ t(
|
|
84
84
|
"div",
|
|
85
85
|
{
|
|
86
|
-
className:
|
|
86
|
+
className: x(
|
|
87
87
|
"bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
|
|
88
88
|
h ? "bear-opacity-0" : "bear-opacity-100"
|
|
89
89
|
),
|
|
90
|
-
style: { transitionDuration: `${
|
|
90
|
+
style: { transitionDuration: `${m}ms` },
|
|
91
91
|
onClick: v ? b : void 0,
|
|
92
92
|
"aria-hidden": "true"
|
|
93
93
|
}
|
|
@@ -98,41 +98,41 @@ const d = 300, D = {
|
|
|
98
98
|
role: "dialog",
|
|
99
99
|
"aria-modal": "true",
|
|
100
100
|
"aria-labelledby": o ? "drawer-title" : void 0,
|
|
101
|
-
className:
|
|
102
|
-
"bear-absolute bear-bg-
|
|
103
|
-
"bear-border-
|
|
101
|
+
className: x(
|
|
102
|
+
"bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl",
|
|
103
|
+
"bear-border-neutral-200 dark:bear-border-neutral-700 bear-overflow-hidden",
|
|
104
104
|
"bear-transform bear-transition-transform",
|
|
105
105
|
e === "left" && "bear-border-r",
|
|
106
106
|
e === "right" && "bear-border-l",
|
|
107
107
|
e === "top" && "bear-border-b",
|
|
108
108
|
e === "bottom" && "bear-border-t",
|
|
109
109
|
M[e],
|
|
110
|
-
D[e][
|
|
111
|
-
|
|
112
|
-
|
|
110
|
+
D[e][y],
|
|
111
|
+
N && !h ? j[e] : T[e],
|
|
112
|
+
k
|
|
113
113
|
),
|
|
114
|
-
style: { transitionDuration: `${
|
|
114
|
+
style: { transitionDuration: `${m}ms` },
|
|
115
115
|
children: [
|
|
116
|
-
(o ||
|
|
116
|
+
(o || u) && /* @__PURE__ */ i("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700", children: [
|
|
117
117
|
o && /* @__PURE__ */ t(
|
|
118
118
|
"h2",
|
|
119
119
|
{
|
|
120
120
|
id: "drawer-title",
|
|
121
|
-
className: "bear-text-lg bear-font-semibold bear-text-white",
|
|
121
|
+
className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
|
|
122
122
|
children: o
|
|
123
123
|
}
|
|
124
124
|
),
|
|
125
|
-
|
|
125
|
+
u && /* @__PURE__ */ t(
|
|
126
126
|
"button",
|
|
127
127
|
{
|
|
128
128
|
onClick: b,
|
|
129
|
-
className: "bear-p-1 bear-rounded-lg bear-text-
|
|
129
|
+
className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
|
|
130
130
|
"aria-label": "Close drawer",
|
|
131
131
|
children: /* @__PURE__ */ t(I, { className: "bear-w-5 bear-h-5" })
|
|
132
132
|
}
|
|
133
133
|
)
|
|
134
134
|
] }),
|
|
135
|
-
/* @__PURE__ */ t("div", { className: "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-
|
|
135
|
+
/* @__PURE__ */ t("div", { className: "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: g })
|
|
136
136
|
]
|
|
137
137
|
}
|
|
138
138
|
)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),G=require("react-dom"),r=require("../../utils/cn.cjs"),U=require("../../context/BearProvider.cjs"),g=require("../Button/Button.cjs"),P=require("../Avatar/Avatar.cjs"),o=require("../Typography/Typography.cjs"),M=require("../Badge/Badge.cjs"),l=require("../Icon/index.cjs"),$=require("../Chat/Chat.cjs"),t=require("./FloatingChat.const.cjs"),Z=({messages:d,onSend:j,isLoading:b=!1,isTyping:S=!1,title:h=t.FLOATING_CHAT_DEFAULTS.TITLE,subtitle:_=t.FLOATING_CHAT_DEFAULTS.SUBTITLE,avatar:w,position:m=t.FLOATING_CHAT_DEFAULTS.POSITION,bottom:x=t.FLOATING_CHAT_DEFAULTS.BOTTOM,side:u=t.FLOATING_CHAT_DEFAULTS.SIDE,defaultOpen:E=!1,open:F,onOpenChange:s,trigger:T,badgeCount:i,header:y,welcomeMessage:p=t.FLOATING_CHAT_DEFAULTS.WELCOME_MESSAGE,poweredBy:A,className:L,testId:D})=>{const{mode:q}=U.useBear(),B=q==="dark",[C,v]=c.useState(E),[N,n]=c.useState(!1),a=F??C,I=c.useCallback(()=>{const f=!a;n(!0),v(f),s==null||s(f),setTimeout(()=>n(!1),300)},[a,s]),H=c.useCallback(()=>{n(!0),v(!1),s==null||s(!1),setTimeout(()=>n(!1),300)},[s]),k=d.length===0&&p?[{id:"welcome",content:p,sender:"bot",timestamp:new Date}]:d,z={bottom:`${x}px`,[m==="bottom-right"?"right":"left"]:`${u}px`},O={bottom:`${x+70}px`,[m==="bottom-right"?"right":"left"]:`${u}px`,width:t.CHAT_WINDOW_SIZE.width,height:t.CHAT_WINDOW_SIZE.height},W=e.jsxs("div",{className:r.cn("Bear-FloatingChat",L),"data-testid":D,children:[(a||N)&&e.jsxs("div",{className:r.cn("fixed z-50 rounded-2xl overflow-hidden shadow-2xl","transition-all duration-300 ease-out",a&&!N?"opacity-100 translate-y-0 scale-100":"opacity-0 translate-y-4 scale-95 pointer-events-none"),style:O,children:[y?e.jsx("div",{className:r.cn("px-4 py-3",B?"bg-gray-800":"bg-[var(--bear-primary-500)]"),children:y}):e.jsxs("div",{className:r.cn("px-4 py-3 flex items-center gap-3","bg-[var(--bear-primary-500)] text-white"),children:[e.jsx(P.Avatar,{src:w,initials:h[0],size:"sm",className:"ring-2 ring-white/20"}),e.jsxs("div",{className:"flex-1",children:[e.jsx(o.Typography,{variant:"subtitle2",className:"text-white font-semibold",children:h}),e.jsx(o.Typography,{variant:"caption",className:"text-white/70",children:_})]}),e.jsx(g.Button,{variant:"ghost",size:"sm",onClick:H,className:"!text-white hover:!bg-white/10",children:e.jsx(l.BearIcons.XIcon,{size:18})})]}),e.jsx($.Chat,{messages:k,onSend:j,isLoading:b,isTyping:S,showAvatars:!1,height:t.CHAT_WINDOW_SIZE.height-140,className:"!rounded-none !border-0"}),A&&e.jsx("div",{className:"px-3 py-2 text-center border-t border-gray-200 dark:border-gray-700",children:e.jsxs(o.Typography,{variant:"caption",className:"opacity-50",children:["Powered by ",A]})})]}),e.jsx("div",{className:"fixed z-50",style:z,children:T?e.jsx("div",{onClick:I,children:T}):e.jsxs("div",{className:"relative",children:[e.jsx(g.Button,{variant:"primary",onClick:I,className:r.cn("!w-14 !h-14 !rounded-full !p-0 shadow-lg","transition-transform duration-200",a&&"rotate-180"),children:a?e.jsx(l.BearIcons.XIcon,{size:24}):e.jsx(l.BearIcons.ChatIcon,{size:24})}),!a&&i&&i>0&&e.jsx(M.Badge,{variant:"danger",size:"sm",className:"absolute -top-1 -right-1 !min-w-[20px] !h-5",children:i>99?"99+":i})]})})]});return typeof document>"u"?null:G.createPortal(W,document.body)};exports.FloatingChat=Z;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t={POSITION:"bottom-right",BOTTOM:20,SIDE:20,TITLE:"Chat",SUBTITLE:"We typically reply in a few minutes",WELCOME_MESSAGE:"Hi! How can we help you today?"},T={width:380,height:520};exports.CHAT_WINDOW_SIZE=T;exports.FLOATING_CHAT_DEFAULTS=t;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const FLOATING_CHAT_DEFAULTS: {
|
|
2
|
+
readonly POSITION: "bottom-right";
|
|
3
|
+
readonly BOTTOM: 20;
|
|
4
|
+
readonly SIDE: 20;
|
|
5
|
+
readonly TITLE: "Chat";
|
|
6
|
+
readonly SUBTITLE: "We typically reply in a few minutes";
|
|
7
|
+
readonly WELCOME_MESSAGE: "Hi! How can we help you today?";
|
|
8
|
+
};
|
|
9
|
+
export declare const CHAT_WINDOW_SIZE: {
|
|
10
|
+
readonly width: 380;
|
|
11
|
+
readonly height: 520;
|
|
12
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
const t = {
|
|
2
|
+
POSITION: "bottom-right",
|
|
3
|
+
BOTTOM: 20,
|
|
4
|
+
SIDE: 20,
|
|
5
|
+
TITLE: "Chat",
|
|
6
|
+
SUBTITLE: "We typically reply in a few minutes",
|
|
7
|
+
WELCOME_MESSAGE: "Hi! How can we help you today?"
|
|
8
|
+
}, T = {
|
|
9
|
+
width: 380,
|
|
10
|
+
height: 520
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
T as CHAT_WINDOW_SIZE,
|
|
14
|
+
t as FLOATING_CHAT_DEFAULTS
|
|
15
|
+
};
|