seam-react 0.2.0 → 0.4.0
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/README.md +2 -1
- package/dist/Sidebar.d.ts +41 -0
- package/dist/Tooltip.d.ts +112 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1099 -346
- package/dist/index.js.map +1 -1
- package/dist/motion.d.ts +7 -0
- package/dist/styles.cjs +242 -2
- package/dist/styles.cjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.js +243 -3
- package/dist/styles.js.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -30,11 +30,12 @@ export function Root() {
|
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
组件包含:Button、Input、Switch、Tabs、Dialog。
|
|
33
|
+
组件包含:Button、Input、Switch、Tabs、Dialog、Tooltip。
|
|
34
34
|
|
|
35
35
|
- Tabs 支持方向键切换、ARIA 关联与 fluid 指示器。
|
|
36
36
|
- Switch 支持点击、键盘和拖拽 spring。
|
|
37
37
|
- Dialog 提供 Root / Trigger / Content 与语义化内容层,自带 Motion 进出场、焦点陷阱、Esc 关闭与滚动锁定。
|
|
38
|
+
- Tooltip 提供延迟显示、键盘与触屏访问、视口翻转/避让,以及可让相邻触发器共享并连续移动表面的 Group / Item 组合。
|
|
38
39
|
|
|
39
40
|
完整文档:[chenhaojie9527.github.io/ui-kit](https://chenhaojie9527.github.io/ui-kit/)
|
|
40
41
|
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
|
|
2
|
+
export interface SidebarProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
/**
|
|
5
|
+
* 鼠标悬停时是否显示与当前项并列的预览指示器。
|
|
6
|
+
*
|
|
7
|
+
* @default true
|
|
8
|
+
*/
|
|
9
|
+
hoverPreview?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface SidebarGroupProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
12
|
+
/** 分类名称。 */
|
|
13
|
+
title: ReactNode;
|
|
14
|
+
/** 分类标题前的视觉图标,不作为额外可访问名称。 */
|
|
15
|
+
icon?: ReactNode;
|
|
16
|
+
children?: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
declare function SidebarGroup({ title, icon, children, className, ...rest }: SidebarGroupProps): ReactElement;
|
|
19
|
+
export interface SidebarItemProps {
|
|
20
|
+
/** 当前页面是否对应此链接。 */
|
|
21
|
+
active?: boolean;
|
|
22
|
+
/** 单个原生链接或路由链接元素。 */
|
|
23
|
+
children: ReactElement;
|
|
24
|
+
/** 追加到链接元素的类名。 */
|
|
25
|
+
className?: string;
|
|
26
|
+
}
|
|
27
|
+
declare function SidebarItem({ active, children, className, }: SidebarItemProps): ReactElement;
|
|
28
|
+
/**
|
|
29
|
+
* 分组文档导航。
|
|
30
|
+
*
|
|
31
|
+
* 根节点保持原生 `<nav>`,Group 生成带名称的分组,Item 包装单个链接。
|
|
32
|
+
* 当前项和鼠标预览使用两个独立的共享布局指示器;链接的 Tab 顺序、焦点、
|
|
33
|
+
* 原生事件和 aria-current 行为保持不变。
|
|
34
|
+
*/
|
|
35
|
+
export interface SidebarComponent {
|
|
36
|
+
(props: SidebarProps): ReactElement;
|
|
37
|
+
Group: typeof SidebarGroup;
|
|
38
|
+
Item: typeof SidebarItem;
|
|
39
|
+
}
|
|
40
|
+
export declare const Sidebar: SidebarComponent;
|
|
41
|
+
export {};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
|
|
2
|
+
export type TooltipSide = "top" | "right" | "bottom" | "left";
|
|
3
|
+
export type TooltipAlign = "start" | "center" | "end";
|
|
4
|
+
export interface TooltipRootProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** 受控打开状态。 */
|
|
7
|
+
open?: boolean;
|
|
8
|
+
/** 非受控模式下的初始打开状态。 */
|
|
9
|
+
defaultOpen?: boolean;
|
|
10
|
+
/** 打开状态变化时触发。 */
|
|
11
|
+
onOpenChange?: (open: boolean) => void;
|
|
12
|
+
/** 指针停留或聚焦多久后显示,默认 300ms。 */
|
|
13
|
+
delayDuration?: number;
|
|
14
|
+
/** 离开触发器后多久关闭,默认 80ms。 */
|
|
15
|
+
closeDelay?: number;
|
|
16
|
+
}
|
|
17
|
+
/** Tooltip 的状态、计时器与语义 ID 根节点。 */
|
|
18
|
+
declare function TooltipRoot({ children, open, defaultOpen, onOpenChange, delayDuration, closeDelay, }: TooltipRootProps): ReactElement;
|
|
19
|
+
export interface TooltipTriggerProps {
|
|
20
|
+
/** 单个可聚焦的交互元素;事件和 ref 会与调用方传入的值合并。 */
|
|
21
|
+
children: ReactElement;
|
|
22
|
+
}
|
|
23
|
+
/** 为原生交互元素补充 hover、focus、Escape 与 aria-describedby。 */
|
|
24
|
+
declare function TooltipTrigger({ children }: TooltipTriggerProps): ReactElement;
|
|
25
|
+
export interface TooltipContentProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "role"> {
|
|
26
|
+
children?: ReactNode;
|
|
27
|
+
/** 首选方向,空间不足时自动翻转。 */
|
|
28
|
+
side?: TooltipSide;
|
|
29
|
+
/** 沿首选方向与触发器的对齐方式。 */
|
|
30
|
+
align?: TooltipAlign;
|
|
31
|
+
/** 与触发器之间的间距,默认 8px。 */
|
|
32
|
+
sideOffset?: number;
|
|
33
|
+
/** 与视口边缘的最小间距,默认 8px。 */
|
|
34
|
+
collisionPadding?: number;
|
|
35
|
+
/** 是否根据视口空间翻转和避让,默认 true。 */
|
|
36
|
+
avoidCollisions?: boolean;
|
|
37
|
+
}
|
|
38
|
+
interface Rectangle {
|
|
39
|
+
top: number;
|
|
40
|
+
right: number;
|
|
41
|
+
bottom: number;
|
|
42
|
+
left: number;
|
|
43
|
+
width: number;
|
|
44
|
+
height: number;
|
|
45
|
+
}
|
|
46
|
+
interface TooltipPosition {
|
|
47
|
+
x: number;
|
|
48
|
+
y: number;
|
|
49
|
+
side: TooltipSide;
|
|
50
|
+
arrowOffset: number;
|
|
51
|
+
}
|
|
52
|
+
export declare function calculateTooltipPosition({ trigger, tooltip, side, align, sideOffset, collisionPadding, avoidCollisions, viewportWidth, viewportHeight, }: {
|
|
53
|
+
trigger: Rectangle;
|
|
54
|
+
tooltip: Rectangle;
|
|
55
|
+
side: TooltipSide;
|
|
56
|
+
align: TooltipAlign;
|
|
57
|
+
sideOffset: number;
|
|
58
|
+
collisionPadding: number;
|
|
59
|
+
avoidCollisions: boolean;
|
|
60
|
+
viewportWidth: number;
|
|
61
|
+
viewportHeight: number;
|
|
62
|
+
}): TooltipPosition;
|
|
63
|
+
/** Portal 并管理 Tooltip 的测量、定位、presence 与退出生命周期。 */
|
|
64
|
+
declare function TooltipContent(props: TooltipContentProps): ReactElement | null;
|
|
65
|
+
export interface TooltipGroupProps {
|
|
66
|
+
children: ReactNode;
|
|
67
|
+
/** 组内所有 Tooltip 共用的方向。 */
|
|
68
|
+
side?: TooltipSide;
|
|
69
|
+
/** 组内所有 Tooltip 共用的对齐方式。 */
|
|
70
|
+
align?: TooltipAlign;
|
|
71
|
+
sideOffset?: number;
|
|
72
|
+
collisionPadding?: number;
|
|
73
|
+
avoidCollisions?: boolean;
|
|
74
|
+
/** 刚进入组时延迟多久显示,默认 180ms;组已经打开后切换立即生效。 */
|
|
75
|
+
delayDuration?: number;
|
|
76
|
+
/** 完全离开组内触发器后多久关闭,默认 80ms。 */
|
|
77
|
+
closeDelay?: number;
|
|
78
|
+
contentClassName?: string;
|
|
79
|
+
}
|
|
80
|
+
export interface TooltipItemProps {
|
|
81
|
+
/** 组内唯一值,用于切换共享 Tooltip。 */
|
|
82
|
+
value: string;
|
|
83
|
+
/** 该项激活时显示在共享 Tooltip 中的内容。 */
|
|
84
|
+
content: ReactNode;
|
|
85
|
+
/** 单个可聚焦交互元素。 */
|
|
86
|
+
children: ReactElement;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* 一组共享同一浮动表面的 Tooltip。
|
|
90
|
+
*
|
|
91
|
+
* 首次进入按 delayDuration 显示;已打开后在相邻 Item 间切换会立即更新内容,
|
|
92
|
+
* 并由 Motion layout 连续移动到新触发器的位置。
|
|
93
|
+
*/
|
|
94
|
+
declare function TooltipGroup({ children, side, align, sideOffset, collisionPadding, avoidCollisions, delayDuration, closeDelay, contentClassName, }: TooltipGroupProps): ReactElement;
|
|
95
|
+
/** 注册组内触发器与内容,但不改变触发器的 DOM 结构或交互语义。 */
|
|
96
|
+
declare function TooltipItem({ value, content, children, }: TooltipItemProps): ReactElement;
|
|
97
|
+
export interface TooltipComponent {
|
|
98
|
+
Root: typeof TooltipRoot;
|
|
99
|
+
Trigger: typeof TooltipTrigger;
|
|
100
|
+
Content: typeof TooltipContent;
|
|
101
|
+
Group: typeof TooltipGroup;
|
|
102
|
+
Item: typeof TooltipItem;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* 简短说明性浮层。
|
|
106
|
+
*
|
|
107
|
+
* 组合式 API:单个 Tooltip 使用 Root / Trigger / Content;相邻说明使用
|
|
108
|
+
* Group / Item 共享同一个浮动表面。触发器保留原生语义,Content 只承担
|
|
109
|
+
* role="tooltip";需要交互或较长内容时应使用可见说明或 Popover。
|
|
110
|
+
*/
|
|
111
|
+
export declare const Tooltip: TooltipComponent;
|
|
112
|
+
export {};
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),I=require("motion/react"),W=require("react-dom"),R=require("seam-hooks");function m(...o){return o.filter(Boolean).join(" ")}const M=i.forwardRef(function({variant:e="primary",size:n="md",loading:r=!1,iconOnly:s=!1,type:l="button",className:c,children:f,...d},u){return a.jsxs("button",{...d,ref:u,type:l,className:m("uk-button",c),"data-variant":e,"data-size":n,"data-loading":r?"true":void 0,"data-icon-only":s?"true":void 0,disabled:d.disabled||r,"aria-busy":r||void 0,children:[r?a.jsx("span",{className:"uk-button__spinner","aria-hidden":"true"}):null,f]})}),J=i.forwardRef(function({inputSize:e="md",invalid:n=!1,className:r,"aria-invalid":s,...l},c){return a.jsx("input",{...l,ref:c,className:m("uk-input",r),"data-size":e,"aria-invalid":n?!0:s})}),Q=[.23,1,.32,1],S={type:"spring",bounce:0,duration:.3},L={type:"spring",bounce:.04,duration:.38},Z={type:"spring",bounce:.08,duration:.34},A={duration:.12,ease:Q},ee=i.forwardRef(function({checked:e,defaultChecked:n,onCheckedChange:r,disabled:s,className:l,children:c,id:f,...d},u){const g=i.useId(),b=f??g,C=I.useReducedMotion()??!1,h=i.useRef(!1),x=i.useRef(null),[k,j]=R.useControllableState({value:e,defaultValue:n??!1,onChange:r}),D=I.useMotionValue(k?16:0);i.useEffect(()=>{if(x.current)return;const t=I.animate(D,k?16:0,C?{duration:0}:S);return()=>t.stop()},[k,C,D]);const _=t=>{const p=x.current;if(!(!p||p.pointerId!==t.pointerId)){if(p.moved){const T=p.samples[0],w=p.samples[p.samples.length-1],E=T&&w?Math.max(w.time-T.time,1):1,v=T&&w?(w.x-T.x)/E*1e3:0,y=Math.abs(v)>220?v>0:D.get()>=8;h.current=!0,x.current=null,j(y),I.animate(D,y?16:0,C?{duration:0}:{...S,velocity:v}),window.setTimeout(()=>{h.current=!1},0)}else x.current=null;t.currentTarget.hasPointerCapture(t.pointerId)&&typeof t.currentTarget.releasePointerCapture=="function"&&t.currentTarget.releasePointerCapture(t.pointerId)}};return a.jsxs("label",{className:m("uk-switch",l),"data-disabled":s?"true":void 0,htmlFor:b,onClickCapture:t=>{h.current&&(t.preventDefault(),t.stopPropagation())},children:[a.jsx("input",{...d,ref:u,id:b,type:"checkbox",role:"switch",className:"uk-switch__input",checked:k,disabled:s,"aria-checked":k,onChange:t=>j(t.target.checked)}),a.jsx("span",{className:"uk-switch__track","aria-hidden":"true",onPointerDown:t=>{s||(x.current={pointerId:t.pointerId,startX:t.clientX,startValue:D.get(),moved:!1,samples:[{x:t.clientX,time:performance.now()}]},typeof t.currentTarget.setPointerCapture=="function"&&t.currentTarget.setPointerCapture(t.pointerId))},onPointerMove:t=>{const p=x.current;if(!p||p.pointerId!==t.pointerId)return;const T=t.clientX-p.startX;Math.abs(T)>4&&(p.moved=!0),p.moved&&(t.preventDefault(),D.set(Math.max(0,Math.min(16,p.startValue+T))),p.samples.push({x:t.clientX,time:performance.now()}),p.samples=p.samples.filter(w=>performance.now()-w.time<120))},onPointerUp:_,onPointerCancel:_,children:a.jsx(I.motion.span,{className:"uk-switch__thumb",style:{x:D}})}),c?a.jsx("span",{className:"uk-switch__label",children:c}):null]})}),H=i.createContext(null);function P(o){const e=i.useContext(H);if(!e)throw new Error(`<${o}> must be rendered inside <Tabs>`);return e}function O(o,e){return`${o}-tab-${encodeURIComponent(e)}`}function $(o,e){return`${o}-panel-${encodeURIComponent(e)}`}function te({value:o,defaultValue:e,onValueChange:n,orientation:r="horizontal",className:s,children:l}){const c=i.useId(),[f,d]=R.useControllableState({value:o,defaultValue:e??"",onChange:n}),u=i.useMemo(()=>({baseId:c,value:f,setValue:d,orientation:r,indicatorId:`${c}-indicator`}),[c,f,r,d]);return a.jsx(H.Provider,{value:u,children:a.jsx("div",{className:m("uk-tabs",s),"data-orientation":r,children:l})})}const ne=i.forwardRef(function({className:e,onKeyDown:n,...r},s){const{orientation:l}=P("Tabs.List");return a.jsx("div",{...r,ref:s,role:"tablist","aria-orientation":l,tabIndex:-1,className:m("uk-tabs__list",e),onKeyDown:c=>{if(n?.(c),c.defaultPrevented)return;const d=c.target?.closest('[role="tab"]');if(!d||d.hasAttribute("disabled"))return;const u=Array.from(c.currentTarget.querySelectorAll('[role="tab"]:not([disabled])')),g=u.indexOf(d);if(g===-1)return;const b=l==="horizontal"?"ArrowRight":"ArrowDown",C=l==="horizontal"?"ArrowLeft":"ArrowUp";let h=-1;switch(c.key){case b:h=(g+1)%u.length;break;case C:h=(g-1+u.length)%u.length;break;case"Home":h=0;break;case"End":h=u.length-1;break;default:return}c.preventDefault();const x=u[h];x&&(x.focus(),x.click())}})}),re=i.forwardRef(function({value:e,type:n="button",className:r,onClick:s,children:l,...c},f){const d=P("Tabs.Trigger"),u=d.value===e,g=I.useReducedMotion()??!1;return a.jsxs("button",{...c,ref:f,type:n,role:"tab",id:O(d.baseId,e),"aria-selected":u,"aria-controls":$(d.baseId,e),tabIndex:u?0:-1,"data-state":u?"active":"inactive",className:m("uk-tabs__trigger",r),onClick:b=>{s?.(b),b.defaultPrevented||d.setValue(e)},children:[l,u?a.jsx(I.motion.span,{className:"uk-tabs__indicator",layoutId:d.indicatorId,"aria-hidden":"true",transition:g?{duration:0}:Z}):null]})}),oe=i.forwardRef(function({value:e,className:n,...r},s){const l=P("Tabs.Content"),c=l.value===e;return a.jsx("div",{...r,ref:s,role:"tabpanel",id:$(l.baseId,e),"aria-labelledby":O(l.baseId,e),hidden:!c,tabIndex:0,"data-state":c?"active":"inactive",className:m("uk-tabs__panel",n)})}),ae=Object.assign(te,{List:ne,Trigger:re,Content:oe}),V=i.createContext(null),se=()=>()=>{},ie=()=>!0,ce=()=>!1;function N(o){const e=i.useContext(V);if(!e)throw new Error(`<${o}> must be rendered inside <Dialog.Root>`);return e}function U(o,e){return n=>{o?.(n),n.defaultPrevented||e(n)}}function X({children:o,open:e,defaultOpen:n,onOpenChange:r}){const s=i.useId(),[l,c]=i.useState(!1),[f,d]=i.useState(!1),[u,g]=R.useControllableState({value:e,defaultValue:n??!1,onChange:r}),b=i.useMemo(()=>({open:u,setOpen:g,triggerId:`${s}-trigger`,contentId:`${s}-content`,titleId:`${s}-title`,descriptionId:`${s}-description`,hasTitle:l,setHasTitle:c,hasDescription:f,setHasDescription:d}),[s,u,f,l,g]);return a.jsx(V.Provider,{value:b,children:o})}function le({children:o}){const e=N("Dialog.Trigger"),n=o,r=n.props.onClick;return i.cloneElement(n,{id:e.triggerId,"aria-haspopup":"dialog","aria-expanded":e.open,"aria-controls":e.open?e.contentId:void 0,onClick:U(r,()=>{e.setOpen(!e.open)})})}function z({children:o,label:e="Close"}){const n=N("Dialog.Close");if(i.isValidElement(o)){const r=o,s=r.props.onClick;return i.cloneElement(r,{onClick:U(s,()=>{n.setOpen(!1)})})}return a.jsx(M,{variant:"ghost",onClick:()=>n.setOpen(!1),children:e})}const B=i.forwardRef(function({className:e,...n},r){return a.jsx("header",{...n,ref:r,className:m("uk-dialog__header",e)})}),F=i.forwardRef(function({className:e,children:n,...r},s){const l=N("Dialog.Title"),c=l.setHasTitle;return i.useEffect(()=>(c(!0),()=>c(!1)),[c]),a.jsx("h2",{...r,ref:s,id:l.titleId,className:m("uk-dialog__title",e),children:n})}),q=i.forwardRef(function({className:e,...n},r){const s=N("Dialog.Description"),l=s.setHasDescription;return i.useEffect(()=>(l(!0),()=>l(!1)),[l]),a.jsx("p",{...n,ref:r,id:s.descriptionId,className:m("uk-dialog__description",e)})}),K=i.forwardRef(function({className:e,...n},r){return a.jsx("div",{...n,ref:r,className:m("uk-dialog__body",e)})}),Y=i.forwardRef(function({className:e,...n},r){return a.jsx("footer",{...n,ref:r,className:m("uk-dialog__footer",e)})});function ue({requestClose:o,contentId:e,titleId:n,descriptionId:r,hasTitle:s,hasDescription:l,children:c,closeOnBackdropClick:f=!0,closeOnEscape:d=!0,initialFocusRef:u,returnFocusRef:g,className:b,"aria-label":C,"aria-labelledby":h,"aria-describedby":x}){const k=i.useRef(null),j=i.useRef(null),D=I.useIsPresent(),_=I.useReducedMotion()??!1;return R.useLockBodyScroll(!0),i.useLayoutEffect(()=>{const t=k.current;t&&(j.current??(j.current=document.activeElement instanceof HTMLElement?document.activeElement:null),!t.open&&(typeof t.showModal=="function"?t.showModal():t.setAttribute("open","")))},[]),R.useFocusTrap({active:!0,containerRef:k,initialFocusRef:u,returnFocusRef:g??j}),i.useEffect(()=>{const t=k.current;if(!t)return;const p=()=>{t.open||(typeof t.showModal=="function"?t.showModal():t.setAttribute("open",""))},T=()=>{if(!d){p();return}o()},w=y=>{y.preventDefault(),d&&o()},E=y=>{d||y.key!=="Escape"||y.defaultPrevented||(y.preventDefault(),y.stopPropagation())},v=y=>{f&&y.target===t&&o()};return t.addEventListener("close",T),t.addEventListener("cancel",w),t.addEventListener("keydown",E,!0),t.addEventListener("click",v),()=>{t.removeEventListener("close",T),t.removeEventListener("cancel",w),t.removeEventListener("keydown",E,!0),t.removeEventListener("click",v)}},[f,d,o]),a.jsx("dialog",{ref:k,id:e,className:m("uk-dialog",b),closedby:d||f?"any":"none","data-state":D?"open":"closed",inert:!D,"aria-label":C,"aria-labelledby":h??(C?void 0:s?n:void 0),"aria-describedby":x??(l?r:void 0),children:a.jsx(I.motion.div,{className:"uk-dialog__panel",initial:_?{opacity:0}:{opacity:0,transform:"translateY(12px) scale(0.96)"},animate:{opacity:1,transform:"translateY(0px) scale(1)",transition:_?A:{...L,delay:.06}},exit:_?{opacity:0,transition:A}:{opacity:0,transform:"translateY(8px) scale(0.97)",transition:L},children:c})})}function G({children:o,closeOnBackdropClick:e=!0,closeOnEscape:n=!0,initialFocusRef:r,returnFocusRef:s,className:l,"aria-label":c,"aria-labelledby":f,"aria-describedby":d}){const u=N("Dialog.Content"),g=R.useEventCallback(()=>{u.setOpen(!1)});return i.useSyncExternalStore(se,ie,ce)?W.createPortal(a.jsx(I.MotionConfig,{reducedMotion:"user",children:a.jsx(I.AnimatePresence,{children:u.open?a.jsx(ue,{requestClose:g,contentId:u.contentId,titleId:u.titleId,descriptionId:u.descriptionId,hasTitle:u.hasTitle,hasDescription:u.hasDescription,closeOnBackdropClick:e,closeOnEscape:n,initialFocusRef:r,returnFocusRef:s,className:l,"aria-label":c,"aria-labelledby":f,"aria-describedby":d,children:o},"uk-dialog"):null})}),document.body):null}function de({open:o,onOpenChange:e,title:n,description:r,footer:s,children:l,closeLabel:c="Close",showCloseButton:f=!0,closeOnBackdropClick:d=!0,closeOnEscape:u=!0,initialFocusRef:g,returnFocusRef:b,className:C,"aria-label":h}){return a.jsx(X,{open:o,onOpenChange:e,children:a.jsxs(G,{className:C,closeOnBackdropClick:d,closeOnEscape:u,initialFocusRef:g,returnFocusRef:b,"aria-label":h,children:[n||r||f?a.jsxs(B,{children:[a.jsxs("div",{className:"uk-dialog__heading",children:[n?a.jsx(F,{children:n}):null,r?a.jsx(q,{children:r}):null]}),f?a.jsx(z,{children:a.jsx(M,{variant:"ghost",size:"sm",iconOnly:!0,"aria-label":c,className:"uk-dialog__close",children:a.jsx("svg",{viewBox:"0 0 20 20",width:"16",height:"16","aria-hidden":"true",children:a.jsx("path",{d:"M5 5l10 10M15 5L5 15",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})})})}):null]}):null,a.jsx(K,{children:l}),s?a.jsx(Y,{children:s}):null]})})}const fe=Object.assign(de,{Root:X,Trigger:le,Content:G,Header:B,Title:F,Description:q,Body:K,Footer:Y,Close:z});exports.Button=M;exports.Dialog=fe;exports.Input=J;exports.Switch=ee;exports.Tabs=ae;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),s=require("react"),T=require("motion/react"),q=require("react-dom"),k=require("seam-hooks");function I(...t){return t.filter(Boolean).join(" ")}const G=s.forwardRef(function({variant:e="primary",size:n="md",loading:o=!1,iconOnly:r=!1,type:c="button",className:i,children:u,...d},a){return l.jsxs("button",{...d,ref:a,type:c,className:I("uk-button",i),"data-variant":e,"data-size":n,"data-loading":o?"true":void 0,"data-icon-only":r?"true":void 0,disabled:d.disabled||o,"aria-busy":o||void 0,children:[o?l.jsx("span",{className:"uk-button__spinner","aria-hidden":"true"}):null,u]})}),je=s.forwardRef(function({inputSize:e="md",invalid:n=!1,className:o,"aria-invalid":r,...c},i){return l.jsx("input",{...c,ref:i,className:I("uk-input",o),"data-size":e,"aria-invalid":n?!0:r})}),B=[.23,1,.32,1],Y={type:"spring",bounce:0,duration:.3},J={type:"spring",bounce:.04,duration:.38},W={type:"spring",bounce:.08,duration:.34},Z={duration:.12,ease:B},_e={layout:{type:"spring",bounce:0,duration:.22},opacity:{duration:.12,ease:B},scale:{duration:.12,ease:B}},O={duration:.12,ease:B},Re=s.forwardRef(function({checked:e,defaultChecked:n,onCheckedChange:o,disabled:r,className:c,children:i,id:u,...d},a){const b=s.useId(),g=u??b,f=T.useReducedMotion()??!1,h=s.useRef(!1),m=s.useRef(null),[x,y]=k.useControllableState({value:e,defaultValue:n??!1,onChange:o}),C=T.useMotionValue(x?16:0);s.useEffect(()=>{if(m.current)return;const p=T.animate(C,x?16:0,f?{duration:0}:Y);return()=>p.stop()},[x,f,C]);const w=p=>{const v=m.current;if(!(!v||v.pointerId!==p.pointerId)){if(v.moved){const j=v.samples[0],_=v.samples[v.samples.length-1],D=j&&_?Math.max(_.time-j.time,1):1,P=j&&_?(_.x-j.x)/D*1e3:0,E=Math.abs(P)>220?P>0:C.get()>=8;h.current=!0,m.current=null,y(E),T.animate(C,E?16:0,f?{duration:0}:{...Y,velocity:P}),window.setTimeout(()=>{h.current=!1},0)}else m.current=null;p.currentTarget.hasPointerCapture(p.pointerId)&&typeof p.currentTarget.releasePointerCapture=="function"&&p.currentTarget.releasePointerCapture(p.pointerId)}};return l.jsxs("label",{className:I("uk-switch",c),"data-disabled":r?"true":void 0,htmlFor:g,onClickCapture:p=>{h.current&&(p.preventDefault(),p.stopPropagation())},children:[l.jsx("input",{...d,ref:a,id:g,type:"checkbox",role:"switch",className:"uk-switch__input",checked:x,disabled:r,"aria-checked":x,onChange:p=>y(p.target.checked)}),l.jsx("span",{className:"uk-switch__track","aria-hidden":"true",onPointerDown:p=>{r||(m.current={pointerId:p.pointerId,startX:p.clientX,startValue:C.get(),moved:!1,samples:[{x:p.clientX,time:performance.now()}]},typeof p.currentTarget.setPointerCapture=="function"&&p.currentTarget.setPointerCapture(p.pointerId))},onPointerMove:p=>{const v=m.current;if(!v||v.pointerId!==p.pointerId)return;const j=p.clientX-v.startX;Math.abs(j)>4&&(v.moved=!0),v.moved&&(p.preventDefault(),C.set(Math.max(0,Math.min(16,v.startValue+j))),v.samples.push({x:p.clientX,time:performance.now()}),v.samples=v.samples.filter(_=>performance.now()-_.time<120))},onPointerUp:w,onPointerCancel:w,children:l.jsx(T.motion.span,{className:"uk-switch__thumb",style:{x:C}})}),i?l.jsx("span",{className:"uk-switch__label",children:i}):null]})}),ee=s.createContext(null);function Pe(t){const e=s.useContext(ee);if(!e)throw new Error(`<${t}> must be rendered inside <Sidebar>`);return e}function V(t,e){return n=>{t?.(n),n.defaultPrevented||e(n)}}function De({children:t,className:e,hoverPreview:n=!0,...o}){const[r,c]=s.useState(null),i=s.useId().replace(/:/g,""),u=s.useMemo(()=>({hoveredId:r,setHoveredId:c,indicatorBaseId:i,hoverPreview:n}),[r,i,n]);return l.jsx(ee.Provider,{value:u,children:l.jsx(T.LayoutGroup,{id:`sidebar-${i}`,children:l.jsx("nav",{...o,className:I("uk-sidebar",e),children:t})})})}function Se({title:t,icon:e,children:n,className:o,...r}){const c=s.useId(),i=e!=null;return l.jsxs("section",{...r,className:I("uk-sidebar__group",o),"aria-labelledby":r["aria-labelledby"]??c,"data-has-icon":i?"true":"false",children:[l.jsxs("p",{className:"uk-sidebar__group-title",id:c,children:[i?l.jsx("span",{className:"uk-sidebar__group-icon","aria-hidden":"true",children:e}):null,l.jsx("span",{children:t})]}),l.jsx("ul",{className:"uk-sidebar__list",children:n})]})}function Ne({active:t=!1,children:e,className:n}){const o=Pe("Sidebar.Item"),r=s.useId(),i=T.useReducedMotion()??!1?{duration:0}:W;if(!s.isValidElement(e))throw new Error("<Sidebar.Item> expects a single valid React element");const u=e,d=u.props,a=d.className,b=typeof a=="function"?y=>I("uk-sidebar__link",a(y),n):I("uk-sidebar__link",a,n),g=d.onPointerEnter,f=d.onPointerLeave,h=d.onPointerCancel,m=o.hoveredId===r,x=l.jsxs(l.Fragment,{children:[l.jsx("span",{className:"uk-sidebar__rail","aria-hidden":"true"}),l.jsx(T.AnimatePresence,{initial:!1,children:o.hoverPreview&&m?l.jsx(T.motion.span,{className:"uk-sidebar__indicator","data-kind":"hover","data-slot":"sidebar-hover-indicator",layoutId:`${o.indicatorBaseId}-hover`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:i}):null}),l.jsx(T.AnimatePresence,{initial:!1,children:t?l.jsx(T.motion.span,{className:"uk-sidebar__indicator","data-kind":"active","data-slot":"sidebar-active-indicator",layoutId:`${o.indicatorBaseId}-active`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:i}):null}),l.jsx("span",{className:"uk-sidebar__label",children:d.children})]});return l.jsx("li",{className:"uk-sidebar__item",children:s.cloneElement(u,{className:b,"data-active":t?"true":"false","data-preview":t||m?"true":"false","aria-current":d["aria-current"]??(t?"page":void 0),onPointerEnter:V(g,y=>{o.hoverPreview&&y.pointerType==="mouse"&&o.setHoveredId(r)}),onPointerLeave:V(f,()=>{o.hoveredId===r&&o.setHoveredId(null)}),onPointerCancel:V(h,()=>{o.hoveredId===r&&o.setHoveredId(null)})},x)})}const Le=Object.assign(De,{Group:Se,Item:Ne}),te=s.createContext(null);function z(t){const e=s.useContext(te);if(!e)throw new Error(`<${t}> must be rendered inside <Tabs>`);return e}function ne(t,e){return`${t}-tab-${encodeURIComponent(e)}`}function oe(t,e){return`${t}-panel-${encodeURIComponent(e)}`}function Me({value:t,defaultValue:e,onValueChange:n,orientation:o="horizontal",className:r,children:c}){const i=s.useId(),[u,d]=k.useControllableState({value:t,defaultValue:e??"",onChange:n}),a=s.useMemo(()=>({baseId:i,value:u,setValue:d,orientation:o,indicatorId:`${i}-indicator`}),[i,u,o,d]);return l.jsx(te.Provider,{value:a,children:l.jsx("div",{className:I("uk-tabs",r),"data-orientation":o,children:c})})}const Oe=s.forwardRef(function({className:e,onKeyDown:n,...o},r){const{orientation:c}=z("Tabs.List");return l.jsx("div",{...o,ref:r,role:"tablist","aria-orientation":c,tabIndex:-1,className:I("uk-tabs__list",e),onKeyDown:i=>{if(n?.(i),i.defaultPrevented)return;const d=i.target?.closest('[role="tab"]');if(!d||d.hasAttribute("disabled"))return;const a=Array.from(i.currentTarget.querySelectorAll('[role="tab"]:not([disabled])')),b=a.indexOf(d);if(b===-1)return;const g=c==="horizontal"?"ArrowRight":"ArrowDown",f=c==="horizontal"?"ArrowLeft":"ArrowUp";let h=-1;switch(i.key){case g:h=(b+1)%a.length;break;case f:h=(b-1+a.length)%a.length;break;case"Home":h=0;break;case"End":h=a.length-1;break;default:return}i.preventDefault();const m=a[h];m&&(m.focus(),m.click())}})}),$e=s.forwardRef(function({value:e,type:n="button",className:o,onClick:r,children:c,...i},u){const d=z("Tabs.Trigger"),a=d.value===e,b=T.useReducedMotion()??!1;return l.jsxs("button",{...i,ref:u,type:n,role:"tab",id:ne(d.baseId,e),"aria-selected":a,"aria-controls":oe(d.baseId,e),tabIndex:a?0:-1,"data-state":a?"active":"inactive",className:I("uk-tabs__trigger",o),onClick:g=>{r?.(g),g.defaultPrevented||d.setValue(e)},children:[c,a?l.jsx(T.motion.span,{className:"uk-tabs__indicator",layoutId:d.indicatorId,"aria-hidden":"true",transition:b?{duration:0}:W}):null]})}),Ae=s.forwardRef(function({value:e,className:n,...o},r){const c=z("Tabs.Content"),i=c.value===e;return l.jsx("div",{...o,ref:r,role:"tabpanel",id:oe(c.baseId,e),"aria-labelledby":ne(c.baseId,e),hidden:!i,tabIndex:0,"data-state":i?"active":"inactive",className:I("uk-tabs__panel",n)})}),Be=Object.assign(Me,{List:Oe,Trigger:$e,Content:Ae}),re=s.createContext(null),He=()=>()=>{},Ve=()=>!0,Fe=()=>!1;function $(t){const e=s.useContext(re);if(!e)throw new Error(`<${t}> must be rendered inside <Dialog.Root>`);return e}function se(t,e){return n=>{t?.(n),n.defaultPrevented||e(n)}}function ie({children:t,open:e,defaultOpen:n,onOpenChange:o}){const r=s.useId(),[c,i]=s.useState(!1),[u,d]=s.useState(!1),[a,b]=k.useControllableState({value:e,defaultValue:n??!1,onChange:o}),g=s.useMemo(()=>({open:a,setOpen:b,triggerId:`${r}-trigger`,contentId:`${r}-content`,titleId:`${r}-title`,descriptionId:`${r}-description`,hasTitle:c,setHasTitle:i,hasDescription:u,setHasDescription:d}),[r,a,u,c,b]);return l.jsx(re.Provider,{value:g,children:t})}function qe({children:t}){const e=$("Dialog.Trigger"),n=t,o=n.props.onClick;return s.cloneElement(n,{id:e.triggerId,"aria-haspopup":"dialog","aria-expanded":e.open,"aria-controls":e.open?e.contentId:void 0,onClick:se(o,()=>{e.setOpen(!e.open)})})}function ae({children:t,label:e="Close"}){const n=$("Dialog.Close");if(s.isValidElement(t)){const o=t,r=o.props.onClick;return s.cloneElement(o,{onClick:se(r,()=>{n.setOpen(!1)})})}return l.jsx(G,{variant:"ghost",onClick:()=>n.setOpen(!1),children:e})}const ce=s.forwardRef(function({className:e,...n},o){return l.jsx("header",{...n,ref:o,className:I("uk-dialog__header",e)})}),le=s.forwardRef(function({className:e,children:n,...o},r){const c=$("Dialog.Title"),i=c.setHasTitle;return s.useEffect(()=>(i(!0),()=>i(!1)),[i]),l.jsx("h2",{...o,ref:r,id:c.titleId,className:I("uk-dialog__title",e),children:n})}),ue=s.forwardRef(function({className:e,...n},o){const r=$("Dialog.Description"),c=r.setHasDescription;return s.useEffect(()=>(c(!0),()=>c(!1)),[c]),l.jsx("p",{...n,ref:o,id:r.descriptionId,className:I("uk-dialog__description",e)})}),de=s.forwardRef(function({className:e,...n},o){return l.jsx("div",{...n,ref:o,className:I("uk-dialog__body",e)})}),fe=s.forwardRef(function({className:e,...n},o){return l.jsx("footer",{...n,ref:o,className:I("uk-dialog__footer",e)})});function Ge({requestClose:t,contentId:e,titleId:n,descriptionId:o,hasTitle:r,hasDescription:c,children:i,closeOnBackdropClick:u=!0,closeOnEscape:d=!0,initialFocusRef:a,returnFocusRef:b,className:g,"aria-label":f,"aria-labelledby":h,"aria-describedby":m}){const x=s.useRef(null),y=s.useRef(null),C=T.useIsPresent(),w=T.useReducedMotion()??!1;return k.useLockBodyScroll(!0),s.useLayoutEffect(()=>{const p=x.current;p&&(y.current??(y.current=document.activeElement instanceof HTMLElement?document.activeElement:null),!p.open&&(typeof p.showModal=="function"?p.showModal():p.setAttribute("open","")))},[]),k.useFocusTrap({active:!0,containerRef:x,initialFocusRef:a,returnFocusRef:b??y}),s.useEffect(()=>{const p=x.current;if(!p)return;const v=()=>{p.open||(typeof p.showModal=="function"?p.showModal():p.setAttribute("open",""))},j=()=>{if(!d){v();return}t()},_=E=>{E.preventDefault(),d&&t()},D=E=>{d||E.key!=="Escape"||E.defaultPrevented||(E.preventDefault(),E.stopPropagation())},P=E=>{u&&E.target===p&&t()};return p.addEventListener("close",j),p.addEventListener("cancel",_),p.addEventListener("keydown",D,!0),p.addEventListener("click",P),()=>{p.removeEventListener("close",j),p.removeEventListener("cancel",_),p.removeEventListener("keydown",D,!0),p.removeEventListener("click",P)}},[u,d,t]),l.jsx("dialog",{ref:x,id:e,className:I("uk-dialog",g),closedby:d||u?"any":"none","data-state":C?"open":"closed",inert:!C,"aria-label":f,"aria-labelledby":h??(f?void 0:r?n:void 0),"aria-describedby":m??(c?o:void 0),children:l.jsx(T.motion.div,{className:"uk-dialog__panel",initial:w?{opacity:0}:{opacity:0,transform:"translateY(12px) scale(0.96)"},animate:{opacity:1,transform:"translateY(0px) scale(1)",transition:w?O:{...J,delay:.06}},exit:w?{opacity:0,transition:O}:{opacity:0,transform:"translateY(8px) scale(0.97)",transition:J},children:i})})}function pe({children:t,closeOnBackdropClick:e=!0,closeOnEscape:n=!0,initialFocusRef:o,returnFocusRef:r,className:c,"aria-label":i,"aria-labelledby":u,"aria-describedby":d}){const a=$("Dialog.Content"),b=k.useEventCallback(()=>{a.setOpen(!1)});return s.useSyncExternalStore(He,Ve,Fe)?q.createPortal(l.jsx(T.MotionConfig,{reducedMotion:"user",children:l.jsx(T.AnimatePresence,{children:a.open?l.jsx(Ge,{requestClose:b,contentId:a.contentId,titleId:a.titleId,descriptionId:a.descriptionId,hasTitle:a.hasTitle,hasDescription:a.hasDescription,closeOnBackdropClick:e,closeOnEscape:n,initialFocusRef:o,returnFocusRef:r,className:c,"aria-label":i,"aria-labelledby":u,"aria-describedby":d,children:t},"uk-dialog"):null})}),document.body):null}function ze({open:t,onOpenChange:e,title:n,description:o,footer:r,children:c,closeLabel:i="Close",showCloseButton:u=!0,closeOnBackdropClick:d=!0,closeOnEscape:a=!0,initialFocusRef:b,returnFocusRef:g,className:f,"aria-label":h}){return l.jsx(ie,{open:t,onOpenChange:e,children:l.jsxs(pe,{className:f,closeOnBackdropClick:d,closeOnEscape:a,initialFocusRef:b,returnFocusRef:g,"aria-label":h,children:[n||o||u?l.jsxs(ce,{children:[l.jsxs("div",{className:"uk-dialog__heading",children:[n?l.jsx(le,{children:n}):null,o?l.jsx(ue,{children:o}):null]}),u?l.jsx(ae,{children:l.jsx(G,{variant:"ghost",size:"sm",iconOnly:!0,"aria-label":i,className:"uk-dialog__close",children:l.jsx("svg",{viewBox:"0 0 20 20",width:"16",height:"16","aria-hidden":"true",children:l.jsx("path",{d:"M5 5l10 10M15 5L5 15",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})})})}):null]}):null,l.jsx(de,{children:c}),r?l.jsx(fe,{children:r}):null]})})}const Ke=Object.assign(ze,{Root:ie,Trigger:qe,Content:pe,Header:ce,Title:le,Description:ue,Body:de,Footer:fe,Close:ae}),me=s.createContext(null),he=()=>()=>{},be=()=>!0,ge=()=>!1;function xe(t){const e=s.useContext(me);if(!e)throw new Error(`<${t}> must be rendered inside <Tooltip.Root>`);return e}function ye(t,e){typeof t=="function"?t(e):t&&(t.current=e)}function Te(t,e){const n=typeof t=="string"?t.split(/\s+/).filter(Boolean):[];return Array.from(new Set([...n,e])).join(" ")}function R(t,e){return n=>{t?.(n),n.defaultPrevented||e(n)}}function Ue({children:t,open:e,defaultOpen:n,onOpenChange:o,delayDuration:r=300,closeDelay:c=80}){const i=s.useId(),[u,d]=s.useState(null),a=s.useRef(null),b=s.useRef(null),[g,f]=k.useControllableState({value:e,defaultValue:n??!1,onChange:o}),h=s.useCallback(()=>{a.current!==null&&(clearTimeout(a.current),a.current=null)},[]),m=s.useCallback(()=>{b.current!==null&&(clearTimeout(b.current),b.current=null)},[]),x=k.useEventCallback((p=!1)=>{if(h(),m(),!g){if(p||r<=0){f(!0);return}a.current=setTimeout(()=>{a.current=null,f(!0)},r)}}),y=k.useEventCallback(()=>{if(h(),m(),!!g){if(c<=0){f(!1);return}b.current=setTimeout(()=>{b.current=null,f(!1)},c)}}),C=k.useEventCallback(()=>{h(),m(),f(!1)});s.useEffect(()=>{g?m():h()},[m,h,g]),s.useEffect(()=>()=>{h(),m()},[m,h]);const w=s.useMemo(()=>({open:g,triggerElement:u,setTriggerElement:d,contentId:i,requestOpen:x,requestClose:y,dismiss:C}),[i,g,C,y,x,u]);return l.jsx(me.Provider,{value:w,children:t})}function Xe({children:t}){const e=xe("Tooltip.Trigger"),{setTriggerElement:n}=e;if(!s.isValidElement(t))throw new Error("<Tooltip.Trigger> expects a single valid React element");const o=t,r=o.props,c=r.ref??o.ref,i=r.onPointerEnter,u=r.onPointerLeave,d=r.onFocus,a=r.onBlur,b=r.onKeyDown,g=s.useCallback(f=>{ye(c,f),n(f)},[c,n]);return s.cloneElement(o,{ref:g,"aria-describedby":e.open?Te(r["aria-describedby"],e.contentId):r["aria-describedby"],onPointerEnter:R(i,f=>{e.requestOpen(f.pointerType==="touch")}),onPointerLeave:R(u,f=>{f.pointerType!=="touch"&&e.requestClose()}),onFocus:R(d,()=>{e.requestOpen()}),onBlur:R(a,()=>{e.requestClose()}),onKeyDown:R(b,f=>{f.key==="Escape"&&e.open&&(f.preventDefault(),f.stopPropagation(),e.dismiss())})})}function A(t,e,n){return n<e?e:Math.min(Math.max(t,e),n)}function Ye(t){switch(t){case"top":return"bottom";case"right":return"left";case"bottom":return"top";case"left":return"right"}}function F(t,e,n,o,r){switch(e){case"top":return t.top-r;case"right":return n-t.right-r;case"bottom":return o-t.bottom-r;case"left":return t.left-r}}function Q(t,e,n,o,r,c,i){return F(t,n,r,c,i)>=(n==="top"||n==="bottom"?e.height:e.width)+o}function Je({trigger:t,tooltip:e,side:n,align:o,sideOffset:r,collisionPadding:c,avoidCollisions:i,viewportWidth:u,viewportHeight:d}){let a=n;if(i&&!Q(t,e,n,r,u,d,c)){const y=Ye(n),C=Q(t,e,y,r,u,d,c),w=F(t,n,u,d,c),p=F(t,y,u,d,c);(C||p>w)&&(a=y)}const b=t.left+t.width/2,g=t.top+t.height/2;let f=0,h=0;switch(a){case"top":case"bottom":f=o==="start"?t.left:o==="end"?t.right-e.width:b-e.width/2,h=a==="top"?t.top-e.height-r:t.bottom+r;break;case"left":case"right":f=a==="left"?t.left-e.width-r:t.right+r,h=o==="start"?t.top:o==="end"?t.bottom-e.height:g-e.height/2;break}i&&(f=A(f,c,u-e.width-c),h=A(h,c,d-e.height-c));const m=10,x=a==="top"||a==="bottom"?A(b-f,m,Math.max(m,e.width-m)):A(g-h,m,Math.max(m,e.height-m));return{x:f,y:h,side:a,arrowOffset:x}}function Ce(t,e,{side:n,align:o,sideOffset:r,collisionPadding:c,avoidCollisions:i}){const[u,d]=s.useState(null);return s.useLayoutEffect(()=>{const a=e.current;if(!a||!t)return;const b=()=>{const f=t.getBoundingClientRect(),h=a.getBoundingClientRect();d(Je({trigger:f,tooltip:h,side:n,align:o,sideOffset:r,collisionPadding:c,avoidCollisions:i,viewportWidth:window.innerWidth||document.documentElement.clientWidth,viewportHeight:window.innerHeight||document.documentElement.clientHeight}))};b(),window.addEventListener("resize",b),window.addEventListener("scroll",b,!0);const g=typeof ResizeObserver>"u"?null:new ResizeObserver(b);return g?.observe(t),g?.observe(a),()=>{window.removeEventListener("resize",b),window.removeEventListener("scroll",b,!0),g?.disconnect()}},[o,i,c,e,n,r,t]),u}function ve(t,e,n){s.useEffect(()=>{const o=i=>{const u=i.target;u instanceof Node&&(t.contains(u)||e.current?.contains(u)||n())},r=()=>{document.visibilityState==="hidden"&&n()},c=i=>{const u=i.target;i.key!=="Escape"||u instanceof Node&&t.contains(u)||n()};return document.addEventListener("pointerdown",o,!0),document.addEventListener("visibilitychange",r),document.addEventListener("keydown",c,!0),window.addEventListener("blur",n),()=>{document.removeEventListener("pointerdown",o,!0),document.removeEventListener("visibilitychange",r),document.removeEventListener("keydown",c,!0),window.removeEventListener("blur",n)}},[n,e,t])}function we(t){switch(t){case"top":return"center bottom";case"bottom":return"center top";case"left":return"right center";case"right":return"left center";default:return"center"}}function Qe({contentId:t,triggerElement:e,dismiss:n,children:o,className:r,style:c,side:i="top",align:u="center",sideOffset:d=8,collisionPadding:a=8,avoidCollisions:b=!0,...g}){const f=s.useRef(null),h=T.useReducedMotion()??!1,m=T.useIsPresent(),x=Ce(e,f,{side:i,align:u,sideOffset:d,collisionPadding:a,avoidCollisions:b});ve(e,f,n);const y=we(x?.side??i),C={...c,left:x?`${x.x}px`:0,top:x?`${x.y}px`:0,visibility:x?"visible":"hidden"};return l.jsx("div",{...g,ref:f,id:t,role:"tooltip","data-side":x?.side??i,"data-align":u,"data-state":m?"open":"closed","aria-hidden":m?void 0:!0,className:I("uk-tooltip",r),style:C,children:l.jsxs(T.motion.div,{className:"uk-tooltip__surface",style:{transformOrigin:y},initial:h?{opacity:0}:{opacity:0,scale:.96},animate:{opacity:1,scale:1},exit:h?{opacity:0}:{opacity:0,scale:.96},transition:h?O:Z,children:[l.jsx("span",{className:"uk-tooltip__arrow","aria-hidden":"true",style:{"--uk-tooltip-arrow-offset":`${x?.arrowOffset??0}px`}}),o]})})}function We(t){const e=xe("Tooltip.Content"),o=s.useSyncExternalStore(he,be,ge)&&e.triggerElement?e.triggerElement.closest("dialog")??document.body:null;return!o||!e.triggerElement?null:q.createPortal(l.jsx(T.MotionConfig,{reducedMotion:"user",children:l.jsx(T.AnimatePresence,{children:e.open?l.jsx(Qe,{contentId:e.contentId,triggerElement:e.triggerElement,dismiss:e.dismiss,...t},"uk-tooltip"):null})}),o)}const Ie=s.createContext(null);function Ze(t){const e=s.useContext(Ie);if(!e)throw new Error(`<${t}> must be rendered inside <Tooltip.Group>`);return e}function et({activeValue:t,content:e,contentClassName:n,contentId:o,dismiss:r,triggerElement:c,side:i,align:u,sideOffset:d,collisionPadding:a,avoidCollisions:b}){const g=s.useRef(null),f=T.useReducedMotion()??!1,h=T.useIsPresent(),m=Ce(c,g,{side:i,align:u,sideOffset:d,collisionPadding:a,avoidCollisions:b});ve(c,g,r);const x={left:m?`${m.x}px`:0,top:m?`${m.y}px`:0,transformOrigin:we(m?.side??i),visibility:m?"visible":"hidden"};return l.jsxs(T.motion.div,{ref:g,id:o,role:"tooltip",layout:!f,layoutDependency:t,"data-side":m?.side??i,"data-align":u,"data-state":h?"open":"closed","aria-hidden":h?void 0:!0,className:I("uk-tooltip","uk-tooltip__surface","uk-tooltip--group",n),style:x,initial:f?{opacity:0}:{opacity:0,scale:.96},animate:{opacity:1,scale:1},exit:f?{opacity:0}:{opacity:0,scale:.96},transition:f?{...O,layout:{duration:0}}:_e,children:[l.jsx("span",{className:"uk-tooltip__arrow","aria-hidden":"true",style:{"--uk-tooltip-arrow-offset":`${m?.arrowOffset??0}px`}}),l.jsx(T.motion.div,{className:"uk-tooltip__content",initial:{opacity:0},animate:{opacity:1},transition:f?O:Z,children:e},t)]})}function tt({children:t,side:e="top",align:n="center",sideOffset:o=8,collisionPadding:r=8,avoidCollisions:c=!0,delayDuration:i=180,closeDelay:u=80,contentClassName:d}){const a=s.useId(),[b,g]=s.useState(()=>new Map),[f,h]=s.useState(!1),[m,x]=s.useState(null),y=s.useRef(null),C=s.useRef(null),w=s.useSyncExternalStore(he,be,ge),p=s.useCallback(()=>{y.current!==null&&(clearTimeout(y.current),y.current=null)},[]),v=s.useCallback(()=>{C.current!==null&&(clearTimeout(C.current),C.current=null)},[]),j=k.useEventCallback((N,S=!1)=>{if(p(),v(),x(N),!f){if(S||i<=0){h(!0);return}y.current=setTimeout(()=>{y.current=null,h(!0)},i)}}),_=k.useEventCallback(()=>{if(p(),v(),!!f){if(u<=0){h(!1);return}C.current=setTimeout(()=>{C.current=null,h(!1)},u)}}),D=k.useEventCallback(()=>{p(),v(),h(!1)}),P=k.useEventCallback((N,S,M)=>{g(H=>{const U=H.get(N);if(U?.triggerElement===S&&Object.is(U.content,M))return H;const X=new Map(H);return X.set(N,{triggerElement:S,content:M}),X})}),E=k.useEventCallback(N=>{g(S=>{if(!S.has(N))return S;const M=new Map(S);return M.delete(N),M})});s.useEffect(()=>()=>{p(),v()},[v,p]);const ke=s.useMemo(()=>({open:f,activeValue:m,contentId:a,activate:j,requestClose:_,dismiss:D,register:P,unregister:E}),[j,m,a,D,f,P,_,E]),L=m?b.get(m):void 0,Ee=f&&!!L,K=w&&L?L.triggerElement.closest("dialog")??document.body:null;return l.jsxs(Ie.Provider,{value:ke,children:[t,K&&L?q.createPortal(l.jsx(T.MotionConfig,{reducedMotion:"user",children:l.jsx(T.AnimatePresence,{children:Ee?l.jsx(et,{activeValue:m??"",content:L.content,contentClassName:d,contentId:a,dismiss:D,triggerElement:L.triggerElement,side:e,align:n,sideOffset:o,collisionPadding:r,avoidCollisions:c},"uk-tooltip-group"):null})}),K):null]})}function nt({value:t,content:e,children:n}){const o=Ze("Tooltip.Item"),{register:r,unregister:c}=o,[i,u]=s.useState(null);if(!s.isValidElement(n))throw new Error("<Tooltip.Item> expects a single valid React element");const d=n,a=d.props,b=a.ref??d.ref,g=a.onPointerEnter,f=a.onPointerLeave,h=a.onFocus,m=a.onBlur,x=a.onKeyDown,y=o.open&&o.activeValue===t,C=s.useCallback(w=>{ye(b,w),u(w)},[b,u]);return s.useLayoutEffect(()=>{if(i)return r(t,i,e),()=>c(t)},[e,r,i,c,t]),s.cloneElement(d,{ref:C,"aria-describedby":y?Te(a["aria-describedby"],o.contentId):a["aria-describedby"],onPointerEnter:R(g,w=>{o.activate(t,w.pointerType==="touch")}),onPointerLeave:R(f,w=>{w.pointerType!=="touch"&&o.requestClose()}),onFocus:R(h,()=>{o.activate(t)}),onBlur:R(m,()=>{o.requestClose()}),onKeyDown:R(x,w=>{w.key==="Escape"&&y&&(w.preventDefault(),w.stopPropagation(),o.dismiss())})})}const ot={Root:Ue,Trigger:Xe,Content:We,Group:tt,Item:nt};exports.Button=G;exports.Dialog=Ke;exports.Input=je;exports.Sidebar=Le;exports.Switch=Re;exports.Tabs=Be;exports.Tooltip=ot;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|