seam-react 0.3.0 → 0.5.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 +3 -2
- package/dist/Sidebar.d.ts +63 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +909 -663
- package/dist/index.js.map +1 -1
- package/dist/motion.d.ts +1 -0
- package/dist/styles.cjs +243 -2
- package/dist/styles.cjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.js +245 -4
- package/dist/styles.js.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ npm install seam-react
|
|
|
17
17
|
## 使用
|
|
18
18
|
|
|
19
19
|
```tsx
|
|
20
|
-
import { Button, Tabs, Dialog } from "seam-react";
|
|
20
|
+
import { Button, Tabs, Dialog, Sidebar } from "seam-react";
|
|
21
21
|
import { SeamStyles } from "seam-react/styles";
|
|
22
22
|
|
|
23
23
|
export function Root() {
|
|
@@ -30,12 +30,13 @@ export function Root() {
|
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
组件包含:Button、Input、Switch、Tabs、Dialog、Tooltip。
|
|
33
|
+
组件包含:Button、Input、Switch、Tabs、Dialog、Tooltip、Sidebar。
|
|
34
34
|
|
|
35
35
|
- Tabs 支持方向键切换、ARIA 关联与 fluid 指示器。
|
|
36
36
|
- Switch 支持点击、键盘和拖拽 spring。
|
|
37
37
|
- Dialog 提供 Root / Trigger / Content 与语义化内容层,自带 Motion 进出场、焦点陷阱、Esc 关闭与滚动锁定。
|
|
38
38
|
- Tooltip 提供延迟显示、键盘与触屏访问、视口翻转/避让,以及可让相邻触发器共享并连续移动表面的 Group / Item 组合。
|
|
39
|
+
- Sidebar 提供可折叠 Group、可配置分组间距,以及互斥的轨道与背景 hover 模式。
|
|
39
40
|
|
|
40
41
|
完整文档:[chenhaojie9527.github.io/ui-kit](https://chenhaojie9527.github.io/ui-kit/)
|
|
41
42
|
|
|
@@ -0,0 +1,63 @@
|
|
|
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
|
+
* 鼠标预览的互斥呈现方式:轨道游标或整行背景。
|
|
12
|
+
*
|
|
13
|
+
* @default "rail"
|
|
14
|
+
*/
|
|
15
|
+
hoverIndicator?: SidebarHoverIndicator;
|
|
16
|
+
/**
|
|
17
|
+
* 分组之间的垂直间距。数字按 px 处理,也可传入 CSS 长度字符串。
|
|
18
|
+
*
|
|
19
|
+
* @default "1.5rem"
|
|
20
|
+
*/
|
|
21
|
+
groupGap?: number | string;
|
|
22
|
+
}
|
|
23
|
+
export type SidebarHoverIndicator = "rail" | "background";
|
|
24
|
+
export interface SidebarGroupProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
25
|
+
/** 分类名称。 */
|
|
26
|
+
title: ReactNode;
|
|
27
|
+
/** 分类标题前的视觉图标,不作为额外可访问名称。 */
|
|
28
|
+
icon?: ReactNode;
|
|
29
|
+
/** 是否允许用户展开和收起该分组。默认保持展开且不显示触发器。 */
|
|
30
|
+
collapsible?: boolean;
|
|
31
|
+
/** 受控展开状态。 */
|
|
32
|
+
open?: boolean;
|
|
33
|
+
/** 非受控模式下是否默认展开。 */
|
|
34
|
+
defaultOpen?: boolean;
|
|
35
|
+
/** 展开状态变化时触发。 */
|
|
36
|
+
onOpenChange?: (open: boolean) => void;
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
}
|
|
39
|
+
declare function SidebarGroup({ title, icon, collapsible, open, defaultOpen, onOpenChange, children, className, ...rest }: SidebarGroupProps): ReactElement;
|
|
40
|
+
export interface SidebarItemProps {
|
|
41
|
+
/** 当前页面是否对应此链接。 */
|
|
42
|
+
active?: boolean;
|
|
43
|
+
/** 单个原生链接或路由链接元素。 */
|
|
44
|
+
children: ReactElement;
|
|
45
|
+
/** 追加到链接元素的类名。 */
|
|
46
|
+
className?: string;
|
|
47
|
+
}
|
|
48
|
+
declare function SidebarItem({ active, children, className, }: SidebarItemProps): ReactElement;
|
|
49
|
+
/**
|
|
50
|
+
* 分组文档导航。
|
|
51
|
+
*
|
|
52
|
+
* 根节点保持原生 `<nav>`,Group 生成带名称的分组,Item 包装单个链接。
|
|
53
|
+
* hoverIndicator 在轨道游标与共享布局背景之间二选一,hover 和当前项使用
|
|
54
|
+
* 同一种反馈;Group 可按需展开和收起,同时保持链接的 Tab 顺序、焦点、
|
|
55
|
+
* 原生事件和 aria-current 行为。
|
|
56
|
+
*/
|
|
57
|
+
export interface SidebarComponent {
|
|
58
|
+
(props: SidebarProps): ReactElement;
|
|
59
|
+
Group: typeof SidebarGroup;
|
|
60
|
+
Item: typeof SidebarItem;
|
|
61
|
+
}
|
|
62
|
+
export declare const Sidebar: SidebarComponent;
|
|
63
|
+
export {};
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),s=require("react"),k=require("motion/react"),q=require("react-dom"),v=require("seam-hooks");function I(...t){return t.filter(Boolean).join(" ")}const H=s.forwardRef(function({variant:e="primary",size:n="md",loading:o=!1,iconOnly:r=!1,type:c="button",className:a,children:u,...p},i){return f.jsxs("button",{...p,ref:i,type:c,className:I("uk-button",a),"data-variant":e,"data-size":n,"data-loading":o?"true":void 0,"data-icon-only":r?"true":void 0,disabled:p.disabled||o,"aria-busy":o||void 0,children:[o?f.jsx("span",{className:"uk-button__spinner","aria-hidden":"true"}):null,u]})}),ve=s.forwardRef(function({inputSize:e="md",invalid:n=!1,className:o,"aria-invalid":r,...c},a){return f.jsx("input",{...c,ref:a,className:I("uk-input",o),"data-size":e,"aria-invalid":n?!0:r})}),B=[.23,1,.32,1],X={type:"spring",bounce:0,duration:.3},Y={type:"spring",bounce:.04,duration:.38},Ie={type:"spring",bounce:.08,duration:.34},Q={duration:.12,ease:B},Ee={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:a,id:u,...p},i){const b=s.useId(),g=u??b,d=k.useReducedMotion()??!1,h=s.useRef(!1),m=s.useRef(null),[x,y]=v.useControllableState({value:e,defaultValue:n??!1,onChange:o}),T=k.useMotionValue(x?16:0);s.useEffect(()=>{if(m.current)return;const l=k.animate(T,x?16:0,d?{duration:0}:X);return()=>l.stop()},[x,d,T]);const C=l=>{const w=m.current;if(!(!w||w.pointerId!==l.pointerId)){if(w.moved){const R=w.samples[0],j=w.samples[w.samples.length-1],P=R&&j?Math.max(j.time-R.time,1):1,_=R&&j?(j.x-R.x)/P*1e3:0,E=Math.abs(_)>220?_>0:T.get()>=8;h.current=!0,m.current=null,y(E),k.animate(T,E?16:0,d?{duration:0}:{...X,velocity:_}),window.setTimeout(()=>{h.current=!1},0)}else m.current=null;l.currentTarget.hasPointerCapture(l.pointerId)&&typeof l.currentTarget.releasePointerCapture=="function"&&l.currentTarget.releasePointerCapture(l.pointerId)}};return f.jsxs("label",{className:I("uk-switch",c),"data-disabled":r?"true":void 0,htmlFor:g,onClickCapture:l=>{h.current&&(l.preventDefault(),l.stopPropagation())},children:[f.jsx("input",{...p,ref:i,id:g,type:"checkbox",role:"switch",className:"uk-switch__input",checked:x,disabled:r,"aria-checked":x,onChange:l=>y(l.target.checked)}),f.jsx("span",{className:"uk-switch__track","aria-hidden":"true",onPointerDown:l=>{r||(m.current={pointerId:l.pointerId,startX:l.clientX,startValue:T.get(),moved:!1,samples:[{x:l.clientX,time:performance.now()}]},typeof l.currentTarget.setPointerCapture=="function"&&l.currentTarget.setPointerCapture(l.pointerId))},onPointerMove:l=>{const w=m.current;if(!w||w.pointerId!==l.pointerId)return;const R=l.clientX-w.startX;Math.abs(R)>4&&(w.moved=!0),w.moved&&(l.preventDefault(),T.set(Math.max(0,Math.min(16,w.startValue+R))),w.samples.push({x:l.clientX,time:performance.now()}),w.samples=w.samples.filter(j=>performance.now()-j.time<120))},onPointerUp:C,onPointerCancel:C,children:f.jsx(k.motion.span,{className:"uk-switch__thumb",style:{x:T}})}),a?f.jsx("span",{className:"uk-switch__label",children:a}):null]})}),W=s.createContext(null);function z(t){const e=s.useContext(W);if(!e)throw new Error(`<${t}> must be rendered inside <Tabs>`);return e}function Z(t,e){return`${t}-tab-${encodeURIComponent(e)}`}function ee(t,e){return`${t}-panel-${encodeURIComponent(e)}`}function je({value:t,defaultValue:e,onValueChange:n,orientation:o="horizontal",className:r,children:c}){const a=s.useId(),[u,p]=v.useControllableState({value:t,defaultValue:e??"",onChange:n}),i=s.useMemo(()=>({baseId:a,value:u,setValue:p,orientation:o,indicatorId:`${a}-indicator`}),[a,u,o,p]);return f.jsx(W.Provider,{value:i,children:f.jsx("div",{className:I("uk-tabs",r),"data-orientation":o,children:c})})}const De=s.forwardRef(function({className:e,onKeyDown:n,...o},r){const{orientation:c}=z("Tabs.List");return f.jsx("div",{...o,ref:r,role:"tablist","aria-orientation":c,tabIndex:-1,className:I("uk-tabs__list",e),onKeyDown:a=>{if(n?.(a),a.defaultPrevented)return;const p=a.target?.closest('[role="tab"]');if(!p||p.hasAttribute("disabled"))return;const i=Array.from(a.currentTarget.querySelectorAll('[role="tab"]:not([disabled])')),b=i.indexOf(p);if(b===-1)return;const g=c==="horizontal"?"ArrowRight":"ArrowDown",d=c==="horizontal"?"ArrowLeft":"ArrowUp";let h=-1;switch(a.key){case g:h=(b+1)%i.length;break;case d:h=(b-1+i.length)%i.length;break;case"Home":h=0;break;case"End":h=i.length-1;break;default:return}a.preventDefault();const m=i[h];m&&(m.focus(),m.click())}})}),_e=s.forwardRef(function({value:e,type:n="button",className:o,onClick:r,children:c,...a},u){const p=z("Tabs.Trigger"),i=p.value===e,b=k.useReducedMotion()??!1;return f.jsxs("button",{...a,ref:u,type:n,role:"tab",id:Z(p.baseId,e),"aria-selected":i,"aria-controls":ee(p.baseId,e),tabIndex:i?0:-1,"data-state":i?"active":"inactive",className:I("uk-tabs__trigger",o),onClick:g=>{r?.(g),g.defaultPrevented||p.setValue(e)},children:[c,i?f.jsx(k.motion.span,{className:"uk-tabs__indicator",layoutId:p.indicatorId,"aria-hidden":"true",transition:b?{duration:0}:Ie}):null]})}),Pe=s.forwardRef(function({value:e,className:n,...o},r){const c=z("Tabs.Content"),a=c.value===e;return f.jsx("div",{...o,ref:r,role:"tabpanel",id:ee(c.baseId,e),"aria-labelledby":Z(c.baseId,e),hidden:!a,tabIndex:0,"data-state":a?"active":"inactive",className:I("uk-tabs__panel",n)})}),Se=Object.assign(je,{List:De,Trigger:_e,Content:Pe}),te=s.createContext(null),Le=()=>()=>{},Me=()=>!0,Ne=()=>!1;function $(t){const e=s.useContext(te);if(!e)throw new Error(`<${t}> must be rendered inside <Dialog.Root>`);return e}function ne(t,e){return n=>{t?.(n),n.defaultPrevented||e(n)}}function oe({children:t,open:e,defaultOpen:n,onOpenChange:o}){const r=s.useId(),[c,a]=s.useState(!1),[u,p]=s.useState(!1),[i,b]=v.useControllableState({value:e,defaultValue:n??!1,onChange:o}),g=s.useMemo(()=>({open:i,setOpen:b,triggerId:`${r}-trigger`,contentId:`${r}-content`,titleId:`${r}-title`,descriptionId:`${r}-description`,hasTitle:c,setHasTitle:a,hasDescription:u,setHasDescription:p}),[r,i,u,c,b]);return f.jsx(te.Provider,{value:g,children:t})}function Oe({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:ne(o,()=>{e.setOpen(!e.open)})})}function re({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:ne(r,()=>{n.setOpen(!1)})})}return f.jsx(H,{variant:"ghost",onClick:()=>n.setOpen(!1),children:e})}const se=s.forwardRef(function({className:e,...n},o){return f.jsx("header",{...n,ref:o,className:I("uk-dialog__header",e)})}),ie=s.forwardRef(function({className:e,children:n,...o},r){const c=$("Dialog.Title"),a=c.setHasTitle;return s.useEffect(()=>(a(!0),()=>a(!1)),[a]),f.jsx("h2",{...o,ref:r,id:c.titleId,className:I("uk-dialog__title",e),children:n})}),ae=s.forwardRef(function({className:e,...n},o){const r=$("Dialog.Description"),c=r.setHasDescription;return s.useEffect(()=>(c(!0),()=>c(!1)),[c]),f.jsx("p",{...n,ref:o,id:r.descriptionId,className:I("uk-dialog__description",e)})}),ce=s.forwardRef(function({className:e,...n},o){return f.jsx("div",{...n,ref:o,className:I("uk-dialog__body",e)})}),le=s.forwardRef(function({className:e,...n},o){return f.jsx("footer",{...n,ref:o,className:I("uk-dialog__footer",e)})});function $e({requestClose:t,contentId:e,titleId:n,descriptionId:o,hasTitle:r,hasDescription:c,children:a,closeOnBackdropClick:u=!0,closeOnEscape:p=!0,initialFocusRef:i,returnFocusRef:b,className:g,"aria-label":d,"aria-labelledby":h,"aria-describedby":m}){const x=s.useRef(null),y=s.useRef(null),T=k.useIsPresent(),C=k.useReducedMotion()??!1;return v.useLockBodyScroll(!0),s.useLayoutEffect(()=>{const l=x.current;l&&(y.current??(y.current=document.activeElement instanceof HTMLElement?document.activeElement:null),!l.open&&(typeof l.showModal=="function"?l.showModal():l.setAttribute("open","")))},[]),v.useFocusTrap({active:!0,containerRef:x,initialFocusRef:i,returnFocusRef:b??y}),s.useEffect(()=>{const l=x.current;if(!l)return;const w=()=>{l.open||(typeof l.showModal=="function"?l.showModal():l.setAttribute("open",""))},R=()=>{if(!p){w();return}t()},j=E=>{E.preventDefault(),p&&t()},P=E=>{p||E.key!=="Escape"||E.defaultPrevented||(E.preventDefault(),E.stopPropagation())},_=E=>{u&&E.target===l&&t()};return l.addEventListener("close",R),l.addEventListener("cancel",j),l.addEventListener("keydown",P,!0),l.addEventListener("click",_),()=>{l.removeEventListener("close",R),l.removeEventListener("cancel",j),l.removeEventListener("keydown",P,!0),l.removeEventListener("click",_)}},[u,p,t]),f.jsx("dialog",{ref:x,id:e,className:I("uk-dialog",g),closedby:p||u?"any":"none","data-state":T?"open":"closed",inert:!T,"aria-label":d,"aria-labelledby":h??(d?void 0:r?n:void 0),"aria-describedby":m??(c?o:void 0),children:f.jsx(k.motion.div,{className:"uk-dialog__panel",initial:C?{opacity:0}:{opacity:0,transform:"translateY(12px) scale(0.96)"},animate:{opacity:1,transform:"translateY(0px) scale(1)",transition:C?O:{...Y,delay:.06}},exit:C?{opacity:0,transition:O}:{opacity:0,transform:"translateY(8px) scale(0.97)",transition:Y},children:a})})}function ue({children:t,closeOnBackdropClick:e=!0,closeOnEscape:n=!0,initialFocusRef:o,returnFocusRef:r,className:c,"aria-label":a,"aria-labelledby":u,"aria-describedby":p}){const i=$("Dialog.Content"),b=v.useEventCallback(()=>{i.setOpen(!1)});return s.useSyncExternalStore(Le,Me,Ne)?q.createPortal(f.jsx(k.MotionConfig,{reducedMotion:"user",children:f.jsx(k.AnimatePresence,{children:i.open?f.jsx($e,{requestClose:b,contentId:i.contentId,titleId:i.titleId,descriptionId:i.descriptionId,hasTitle:i.hasTitle,hasDescription:i.hasDescription,closeOnBackdropClick:e,closeOnEscape:n,initialFocusRef:o,returnFocusRef:r,className:c,"aria-label":a,"aria-labelledby":u,"aria-describedby":p,children:t},"uk-dialog"):null})}),document.body):null}function Ae({open:t,onOpenChange:e,title:n,description:o,footer:r,children:c,closeLabel:a="Close",showCloseButton:u=!0,closeOnBackdropClick:p=!0,closeOnEscape:i=!0,initialFocusRef:b,returnFocusRef:g,className:d,"aria-label":h}){return f.jsx(oe,{open:t,onOpenChange:e,children:f.jsxs(ue,{className:d,closeOnBackdropClick:p,closeOnEscape:i,initialFocusRef:b,returnFocusRef:g,"aria-label":h,children:[n||o||u?f.jsxs(se,{children:[f.jsxs("div",{className:"uk-dialog__heading",children:[n?f.jsx(ie,{children:n}):null,o?f.jsx(ae,{children:o}):null]}),u?f.jsx(re,{children:f.jsx(H,{variant:"ghost",size:"sm",iconOnly:!0,"aria-label":a,className:"uk-dialog__close",children:f.jsx("svg",{viewBox:"0 0 20 20",width:"16",height:"16","aria-hidden":"true",children:f.jsx("path",{d:"M5 5l10 10M15 5L5 15",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})})})}):null]}):null,f.jsx(ce,{children:c}),r?f.jsx(le,{children:r}):null]})})}const Be=Object.assign(Ae,{Root:oe,Trigger:Oe,Content:ue,Header:se,Title:ie,Description:ae,Body:ce,Footer:le,Close:re}),de=s.createContext(null),fe=()=>()=>{},pe=()=>!0,me=()=>!1;function he(t){const e=s.useContext(de);if(!e)throw new Error(`<${t}> must be rendered inside <Tooltip.Root>`);return e}function be(t,e){typeof t=="function"?t(e):t&&(t.current=e)}function ge(t,e){const n=typeof t=="string"?t.split(/\s+/).filter(Boolean):[];return Array.from(new Set([...n,e])).join(" ")}function D(t,e){return n=>{t?.(n),n.defaultPrevented||e(n)}}function Ve({children:t,open:e,defaultOpen:n,onOpenChange:o,delayDuration:r=300,closeDelay:c=80}){const a=s.useId(),[u,p]=s.useState(null),i=s.useRef(null),b=s.useRef(null),[g,d]=v.useControllableState({value:e,defaultValue:n??!1,onChange:o}),h=s.useCallback(()=>{i.current!==null&&(clearTimeout(i.current),i.current=null)},[]),m=s.useCallback(()=>{b.current!==null&&(clearTimeout(b.current),b.current=null)},[]),x=v.useEventCallback((l=!1)=>{if(h(),m(),!g){if(l||r<=0){d(!0);return}i.current=setTimeout(()=>{i.current=null,d(!0)},r)}}),y=v.useEventCallback(()=>{if(h(),m(),!!g){if(c<=0){d(!1);return}b.current=setTimeout(()=>{b.current=null,d(!1)},c)}}),T=v.useEventCallback(()=>{h(),m(),d(!1)});s.useEffect(()=>{g?m():h()},[m,h,g]),s.useEffect(()=>()=>{h(),m()},[m,h]);const C=s.useMemo(()=>({open:g,triggerElement:u,setTriggerElement:p,contentId:a,requestOpen:x,requestClose:y,dismiss:T}),[a,g,T,y,x,u]);return f.jsx(de.Provider,{value:C,children:t})}function Fe({children:t}){const e=he("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,a=r.onPointerEnter,u=r.onPointerLeave,p=r.onFocus,i=r.onBlur,b=r.onKeyDown,g=s.useCallback(d=>{be(c,d),n(d)},[c,n]);return s.cloneElement(o,{ref:g,"aria-describedby":e.open?ge(r["aria-describedby"],e.contentId):r["aria-describedby"],onPointerEnter:D(a,d=>{e.requestOpen(d.pointerType==="touch")}),onPointerLeave:D(u,d=>{d.pointerType!=="touch"&&e.requestClose()}),onFocus:D(p,()=>{e.requestOpen()}),onBlur:D(i,()=>{e.requestClose()}),onKeyDown:D(b,d=>{d.key==="Escape"&&e.open&&(d.preventDefault(),d.stopPropagation(),e.dismiss())})})}function A(t,e,n){return n<e?e:Math.min(Math.max(t,e),n)}function qe(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 J(t,e,n,o,r,c,a){return F(t,n,r,c,a)>=(n==="top"||n==="bottom"?e.height:e.width)+o}function He({trigger:t,tooltip:e,side:n,align:o,sideOffset:r,collisionPadding:c,avoidCollisions:a,viewportWidth:u,viewportHeight:p}){let i=n;if(a&&!J(t,e,n,r,u,p,c)){const y=qe(n),T=J(t,e,y,r,u,p,c),C=F(t,n,u,p,c),l=F(t,y,u,p,c);(T||l>C)&&(i=y)}const b=t.left+t.width/2,g=t.top+t.height/2;let d=0,h=0;switch(i){case"top":case"bottom":d=o==="start"?t.left:o==="end"?t.right-e.width:b-e.width/2,h=i==="top"?t.top-e.height-r:t.bottom+r;break;case"left":case"right":d=i==="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}a&&(d=A(d,c,u-e.width-c),h=A(h,c,p-e.height-c));const m=10,x=i==="top"||i==="bottom"?A(b-d,m,Math.max(m,e.width-m)):A(g-h,m,Math.max(m,e.height-m));return{x:d,y:h,side:i,arrowOffset:x}}function xe(t,e,{side:n,align:o,sideOffset:r,collisionPadding:c,avoidCollisions:a}){const[u,p]=s.useState(null);return s.useLayoutEffect(()=>{const i=e.current;if(!i||!t)return;const b=()=>{const d=t.getBoundingClientRect(),h=i.getBoundingClientRect();p(He({trigger:d,tooltip:h,side:n,align:o,sideOffset:r,collisionPadding:c,avoidCollisions:a,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(i),()=>{window.removeEventListener("resize",b),window.removeEventListener("scroll",b,!0),g?.disconnect()}},[o,a,c,e,n,r,t]),u}function ye(t,e,n){s.useEffect(()=>{const o=a=>{const u=a.target;u instanceof Node&&(t.contains(u)||e.current?.contains(u)||n())},r=()=>{document.visibilityState==="hidden"&&n()},c=a=>{const u=a.target;a.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 Te(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 ze({contentId:t,triggerElement:e,dismiss:n,children:o,className:r,style:c,side:a="top",align:u="center",sideOffset:p=8,collisionPadding:i=8,avoidCollisions:b=!0,...g}){const d=s.useRef(null),h=k.useReducedMotion()??!1,m=k.useIsPresent(),x=xe(e,d,{side:a,align:u,sideOffset:p,collisionPadding:i,avoidCollisions:b});ye(e,d,n);const y=Te(x?.side??a),T={...c,left:x?`${x.x}px`:0,top:x?`${x.y}px`:0,visibility:x?"visible":"hidden"};return f.jsx("div",{...g,ref:d,id:t,role:"tooltip","data-side":x?.side??a,"data-align":u,"data-state":m?"open":"closed","aria-hidden":m?void 0:!0,className:I("uk-tooltip",r),style:T,children:f.jsxs(k.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:Q,children:[f.jsx("span",{className:"uk-tooltip__arrow","aria-hidden":"true",style:{"--uk-tooltip-arrow-offset":`${x?.arrowOffset??0}px`}}),o]})})}function Ke(t){const e=he("Tooltip.Content"),o=s.useSyncExternalStore(fe,pe,me)&&e.triggerElement?e.triggerElement.closest("dialog")??document.body:null;return!o||!e.triggerElement?null:q.createPortal(f.jsx(k.MotionConfig,{reducedMotion:"user",children:f.jsx(k.AnimatePresence,{children:e.open?f.jsx(ze,{contentId:e.contentId,triggerElement:e.triggerElement,dismiss:e.dismiss,...t},"uk-tooltip"):null})}),o)}const we=s.createContext(null);function Ge(t){const e=s.useContext(we);if(!e)throw new Error(`<${t}> must be rendered inside <Tooltip.Group>`);return e}function Ue({activeValue:t,content:e,contentClassName:n,contentId:o,dismiss:r,triggerElement:c,side:a,align:u,sideOffset:p,collisionPadding:i,avoidCollisions:b}){const g=s.useRef(null),d=k.useReducedMotion()??!1,h=k.useIsPresent(),m=xe(c,g,{side:a,align:u,sideOffset:p,collisionPadding:i,avoidCollisions:b});ye(c,g,r);const x={left:m?`${m.x}px`:0,top:m?`${m.y}px`:0,transformOrigin:Te(m?.side??a),visibility:m?"visible":"hidden"};return f.jsxs(k.motion.div,{ref:g,id:o,role:"tooltip",layout:!d,layoutDependency:t,"data-side":m?.side??a,"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:d?{opacity:0}:{opacity:0,scale:.96},animate:{opacity:1,scale:1},exit:d?{opacity:0}:{opacity:0,scale:.96},transition:d?{...O,layout:{duration:0}}:Ee,children:[f.jsx("span",{className:"uk-tooltip__arrow","aria-hidden":"true",style:{"--uk-tooltip-arrow-offset":`${m?.arrowOffset??0}px`}}),f.jsx(k.motion.div,{className:"uk-tooltip__content",initial:{opacity:0},animate:{opacity:1},transition:d?O:Q,children:e},t)]})}function Xe({children:t,side:e="top",align:n="center",sideOffset:o=8,collisionPadding:r=8,avoidCollisions:c=!0,delayDuration:a=180,closeDelay:u=80,contentClassName:p}){const i=s.useId(),[b,g]=s.useState(()=>new Map),[d,h]=s.useState(!1),[m,x]=s.useState(null),y=s.useRef(null),T=s.useRef(null),C=s.useSyncExternalStore(fe,pe,me),l=s.useCallback(()=>{y.current!==null&&(clearTimeout(y.current),y.current=null)},[]),w=s.useCallback(()=>{T.current!==null&&(clearTimeout(T.current),T.current=null)},[]),R=v.useEventCallback((L,S=!1)=>{if(l(),w(),x(L),!d){if(S||a<=0){h(!0);return}y.current=setTimeout(()=>{y.current=null,h(!0)},a)}}),j=v.useEventCallback(()=>{if(l(),w(),!!d){if(u<=0){h(!1);return}T.current=setTimeout(()=>{T.current=null,h(!1)},u)}}),P=v.useEventCallback(()=>{l(),w(),h(!1)}),_=v.useEventCallback((L,S,N)=>{g(V=>{const G=V.get(L);if(G?.triggerElement===S&&Object.is(G.content,N))return V;const U=new Map(V);return U.set(L,{triggerElement:S,content:N}),U})}),E=v.useEventCallback(L=>{g(S=>{if(!S.has(L))return S;const N=new Map(S);return N.delete(L),N})});s.useEffect(()=>()=>{l(),w()},[w,l]);const Ce=s.useMemo(()=>({open:d,activeValue:m,contentId:i,activate:R,requestClose:j,dismiss:P,register:_,unregister:E}),[R,m,i,P,d,_,j,E]),M=m?b.get(m):void 0,ke=d&&!!M,K=C&&M?M.triggerElement.closest("dialog")??document.body:null;return f.jsxs(we.Provider,{value:Ce,children:[t,K&&M?q.createPortal(f.jsx(k.MotionConfig,{reducedMotion:"user",children:f.jsx(k.AnimatePresence,{children:ke?f.jsx(Ue,{activeValue:m??"",content:M.content,contentClassName:p,contentId:i,dismiss:P,triggerElement:M.triggerElement,side:e,align:n,sideOffset:o,collisionPadding:r,avoidCollisions:c},"uk-tooltip-group"):null})}),K):null]})}function Ye({value:t,content:e,children:n}){const o=Ge("Tooltip.Item"),{register:r,unregister:c}=o,[a,u]=s.useState(null);if(!s.isValidElement(n))throw new Error("<Tooltip.Item> expects a single valid React element");const p=n,i=p.props,b=i.ref??p.ref,g=i.onPointerEnter,d=i.onPointerLeave,h=i.onFocus,m=i.onBlur,x=i.onKeyDown,y=o.open&&o.activeValue===t,T=s.useCallback(C=>{be(b,C),u(C)},[b,u]);return s.useLayoutEffect(()=>{if(a)return r(t,a,e),()=>c(t)},[e,r,a,c,t]),s.cloneElement(p,{ref:T,"aria-describedby":y?ge(i["aria-describedby"],o.contentId):i["aria-describedby"],onPointerEnter:D(g,C=>{o.activate(t,C.pointerType==="touch")}),onPointerLeave:D(d,C=>{C.pointerType!=="touch"&&o.requestClose()}),onFocus:D(h,()=>{o.activate(t)}),onBlur:D(m,()=>{o.requestClose()}),onKeyDown:D(x,C=>{C.key==="Escape"&&y&&(C.preventDefault(),C.stopPropagation(),o.dismiss())})})}const Je={Root:Ve,Trigger:Fe,Content:Ke,Group:Xe,Item:Ye};exports.Button=H;exports.Dialog=Be;exports.Input=ve;exports.Switch=Re;exports.Tabs=Se;exports.Tooltip=Je;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),x=require("motion/react"),q=require("react-dom"),E=require("seam-hooks");function C(...t){return t.filter(Boolean).join(" ")}const G=i.forwardRef(function({variant:e="primary",size:n="md",loading:o=!1,iconOnly:r=!1,type:l="button",className:c,children:p,...f},a){return s.jsxs("button",{...f,ref:a,type:l,className:C("uk-button",c),"data-variant":e,"data-size":n,"data-loading":o?"true":void 0,"data-icon-only":r?"true":void 0,disabled:f.disabled||o,"aria-busy":o||void 0,children:[o?s.jsx("span",{className:"uk-button__spinner","aria-hidden":"true"}):null,p]})}),je=i.forwardRef(function({inputSize:e="md",invalid:n=!1,className:o,"aria-invalid":r,...l},c){return s.jsx("input",{...l,ref:c,className:C("uk-input",o),"data-size":e,"aria-invalid":n?!0:r})}),B=[.23,1,.32,1],Re=[.77,0,.175,1],W={type:"spring",bounce:0,duration:.3},J={type:"spring",bounce:.04,duration:.38},z={type:"spring",bounce:.08,duration:.34},Pe={duration:.2,ease:Re},Z={duration:.12,ease:B},Ne={layout:{type:"spring",bounce:0,duration:.22},opacity:{duration:.12,ease:B},scale:{duration:.12,ease:B}},O={duration:.12,ease:B},Se=i.forwardRef(function({checked:e,defaultChecked:n,onCheckedChange:o,disabled:r,className:l,children:c,id:p,...f},a){const b=i.useId(),m=p??b,h=x.useReducedMotion()??!1,g=i.useRef(!1),d=i.useRef(null),[y,v]=E.useControllableState({value:e,defaultValue:n??!1,onChange:o}),I=x.useMotionValue(y?16:0);i.useEffect(()=>{if(d.current)return;const u=x.animate(I,y?16:0,h?{duration:0}:W);return()=>u.stop()},[y,h,I]);const T=u=>{const k=d.current;if(!(!k||k.pointerId!==u.pointerId)){if(k.moved){const w=k.samples[0],_=k.samples[k.samples.length-1],N=w&&_?Math.max(_.time-w.time,1):1,P=w&&_?(_.x-w.x)/N*1e3:0,j=Math.abs(P)>220?P>0:I.get()>=8;g.current=!0,d.current=null,v(j),x.animate(I,j?16:0,h?{duration:0}:{...W,velocity:P}),window.setTimeout(()=>{g.current=!1},0)}else d.current=null;u.currentTarget.hasPointerCapture(u.pointerId)&&typeof u.currentTarget.releasePointerCapture=="function"&&u.currentTarget.releasePointerCapture(u.pointerId)}};return s.jsxs("label",{className:C("uk-switch",l),"data-disabled":r?"true":void 0,htmlFor:m,onClickCapture:u=>{g.current&&(u.preventDefault(),u.stopPropagation())},children:[s.jsx("input",{...f,ref:a,id:m,type:"checkbox",role:"switch",className:"uk-switch__input",checked:y,disabled:r,"aria-checked":y,onChange:u=>v(u.target.checked)}),s.jsx("span",{className:"uk-switch__track","aria-hidden":"true",onPointerDown:u=>{r||(d.current={pointerId:u.pointerId,startX:u.clientX,startValue:I.get(),moved:!1,samples:[{x:u.clientX,time:performance.now()}]},typeof u.currentTarget.setPointerCapture=="function"&&u.currentTarget.setPointerCapture(u.pointerId))},onPointerMove:u=>{const k=d.current;if(!k||k.pointerId!==u.pointerId)return;const w=u.clientX-k.startX;Math.abs(w)>4&&(k.moved=!0),k.moved&&(u.preventDefault(),I.set(Math.max(0,Math.min(16,k.startValue+w))),k.samples.push({x:u.clientX,time:performance.now()}),k.samples=k.samples.filter(_=>performance.now()-_.time<120))},onPointerUp:T,onPointerCancel:T,children:s.jsx(x.motion.span,{className:"uk-switch__thumb",style:{x:I}})}),c?s.jsx("span",{className:"uk-switch__label",children:c}):null]})}),ee=i.createContext(null);function te(t){const e=i.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,hoverIndicator:o="rail",groupGap:r,style:l,...c}){const[p,f]=i.useState(null),a=i.useId().replace(/:/g,""),b=i.useMemo(()=>({hoveredId:p,setHoveredId:f,indicatorBaseId:a,hoverPreview:n,hoverIndicator:o}),[p,a,n,o]),m=typeof r=="number"?`${r}px`:r,h={...l,...m===void 0?{}:{"--uk-sidebar-group-gap":m}};return s.jsx(ee.Provider,{value:b,children:s.jsx(x.LayoutGroup,{id:`sidebar-${a}`,children:s.jsx("nav",{...c,className:C("uk-sidebar",e),style:h,children:t})})})}function Le({title:t,icon:e,collapsible:n=!1,open:o,defaultOpen:r=!0,onOpenChange:l,children:c,className:p,...f}){const a=i.useId(),b=i.useId(),m=i.useId(),h=i.useRef(null),g=i.useRef(null),d=te("Sidebar.Group"),y=e!=null,v=x.useReducedMotion()??!1,[I,T]=E.useControllableState({value:o,defaultValue:r,onChange:l}),u=n?I:!0,k=d.hoveredId===m;i.useEffect(()=>{!n||u||g.current?.contains(document.activeElement)&&h.current?.focus()},[n,u]);const w=s.jsxs(s.Fragment,{children:[y?s.jsx("span",{className:"uk-sidebar__group-icon","aria-hidden":"true",children:e}):null,s.jsx("span",{className:"uk-sidebar__group-label",children:t}),n?s.jsx("span",{className:"uk-sidebar__chevron","aria-hidden":"true",children:s.jsx("svg",{viewBox:"0 0 16 16",width:"12",height:"12",fill:"none",children:s.jsx("path",{d:"m6 3.8 4.2 4.2L6 12.2",stroke:"currentColor",strokeWidth:"1.35",strokeLinecap:"round",strokeLinejoin:"round"})})}):null]});return s.jsxs("section",{...f,className:C("uk-sidebar__group",p),"aria-labelledby":f["aria-labelledby"]??a,"data-collapsible":n?"true":"false","data-has-icon":y?"true":"false","data-state":u?"open":"closed",children:[n?s.jsxs("button",{ref:h,type:"button",className:"uk-sidebar__group-title uk-sidebar__group-trigger",id:a,"aria-controls":b,"aria-expanded":u,"data-preview":d.hoverIndicator==="background"&&k?"true":void 0,onClick:()=>T(_=>!_),onPointerEnter:_=>{d.hoverPreview&&d.hoverIndicator==="background"&&_.pointerType==="mouse"&&d.setHoveredId(m)},onPointerLeave:()=>{d.hoveredId===m&&d.setHoveredId(null)},onPointerCancel:()=>{d.hoveredId===m&&d.setHoveredId(null)},children:[s.jsx(x.AnimatePresence,{initial:!1,children:d.hoverPreview&&d.hoverIndicator==="background"&&k?s.jsx(x.motion.span,{className:"uk-sidebar__group-surface","data-kind":"hover","data-slot":"sidebar-hover-highlight",layoutId:`${d.indicatorBaseId}-hover`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:v?{duration:0}:z}):null}),w]}):s.jsx("div",{className:"uk-sidebar__group-title",id:a,children:w}),s.jsx(x.motion.div,{ref:g,className:"uk-sidebar__content",id:b,"data-state":u?"open":"closed",initial:!1,animate:{height:u?"auto":0,opacity:u?1:0},transition:v?{duration:0}:Pe,inert:n&&!u,"aria-hidden":n&&!u?!0:void 0,children:s.jsx("ul",{className:"uk-sidebar__list",children:c})})]})}function Me({active:t=!1,children:e,className:n}){const o=te("Sidebar.Item"),r=i.useId(),c=x.useReducedMotion()??!1?{duration:0}:z;if(!i.isValidElement(e))throw new Error("<Sidebar.Item> expects a single valid React element");const p=e,f=p.props,a=f.className,b=typeof a=="function"?v=>C("uk-sidebar__link",a(v),n):C("uk-sidebar__link",a,n),m=f.onPointerEnter,h=f.onPointerLeave,g=f.onPointerCancel,d=o.hoveredId===r,y=s.jsxs(s.Fragment,{children:[s.jsx("span",{className:"uk-sidebar__rail","aria-hidden":"true"}),s.jsx(x.AnimatePresence,{initial:!1,children:o.hoverPreview&&o.hoverIndicator==="rail"&&d?s.jsx(x.motion.span,{className:"uk-sidebar__rail-indicator","data-kind":"hover","data-slot":"sidebar-hover-rail-indicator",layoutId:`${o.indicatorBaseId}-hover-rail`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:c}):null}),s.jsx(x.AnimatePresence,{initial:!1,children:o.hoverIndicator==="rail"&&t?s.jsx(x.motion.span,{className:"uk-sidebar__rail-indicator","data-kind":"active","data-slot":"sidebar-active-rail-indicator",layoutId:`${o.indicatorBaseId}-active-rail`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:c}):null}),s.jsx(x.AnimatePresence,{initial:!1,children:o.hoverPreview&&o.hoverIndicator==="background"&&d?s.jsx(x.motion.span,{className:"uk-sidebar__surface","data-kind":"hover","data-slot":"sidebar-hover-highlight",layoutId:`${o.indicatorBaseId}-hover`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:c}):null}),s.jsx(x.AnimatePresence,{initial:!1,children:o.hoverIndicator==="background"&&t?s.jsx(x.motion.span,{className:"uk-sidebar__surface","data-kind":"active","data-slot":"sidebar-active-highlight",layoutId:`${o.indicatorBaseId}-active`,"aria-hidden":"true",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:c}):null}),s.jsx("span",{className:"uk-sidebar__label",children:f.children})]});return s.jsx("li",{className:"uk-sidebar__item",children:i.cloneElement(p,{className:b,"data-active":t?"true":"false","data-preview":t||d?"true":"false","aria-current":f["aria-current"]??(t?"page":void 0),onPointerEnter:V(m,v=>{o.hoverPreview&&v.pointerType==="mouse"&&o.setHoveredId(r)}),onPointerLeave:V(h,()=>{o.hoveredId===r&&o.setHoveredId(null)}),onPointerCancel:V(g,()=>{o.hoveredId===r&&o.setHoveredId(null)})},y)})}const Oe=Object.assign(De,{Group:Le,Item:Me}),ne=i.createContext(null);function K(t){const e=i.useContext(ne);if(!e)throw new Error(`<${t}> must be rendered inside <Tabs>`);return e}function oe(t,e){return`${t}-tab-${encodeURIComponent(e)}`}function re(t,e){return`${t}-panel-${encodeURIComponent(e)}`}function $e({value:t,defaultValue:e,onValueChange:n,orientation:o="horizontal",className:r,children:l}){const c=i.useId(),[p,f]=E.useControllableState({value:t,defaultValue:e??"",onChange:n}),a=i.useMemo(()=>({baseId:c,value:p,setValue:f,orientation:o,indicatorId:`${c}-indicator`}),[c,p,o,f]);return s.jsx(ne.Provider,{value:a,children:s.jsx("div",{className:C("uk-tabs",r),"data-orientation":o,children:l})})}const Ae=i.forwardRef(function({className:e,onKeyDown:n,...o},r){const{orientation:l}=K("Tabs.List");return s.jsx("div",{...o,ref:r,role:"tablist","aria-orientation":l,tabIndex:-1,className:C("uk-tabs__list",e),onKeyDown:c=>{if(n?.(c),c.defaultPrevented)return;const f=c.target?.closest('[role="tab"]');if(!f||f.hasAttribute("disabled"))return;const a=Array.from(c.currentTarget.querySelectorAll('[role="tab"]:not([disabled])')),b=a.indexOf(f);if(b===-1)return;const m=l==="horizontal"?"ArrowRight":"ArrowDown",h=l==="horizontal"?"ArrowLeft":"ArrowUp";let g=-1;switch(c.key){case m:g=(b+1)%a.length;break;case h:g=(b-1+a.length)%a.length;break;case"Home":g=0;break;case"End":g=a.length-1;break;default:return}c.preventDefault();const d=a[g];d&&(d.focus(),d.click())}})}),Be=i.forwardRef(function({value:e,type:n="button",className:o,onClick:r,children:l,...c},p){const f=K("Tabs.Trigger"),a=f.value===e,b=x.useReducedMotion()??!1;return s.jsxs("button",{...c,ref:p,type:n,role:"tab",id:oe(f.baseId,e),"aria-selected":a,"aria-controls":re(f.baseId,e),tabIndex:a?0:-1,"data-state":a?"active":"inactive",className:C("uk-tabs__trigger",o),onClick:m=>{r?.(m),m.defaultPrevented||f.setValue(e)},children:[l,a?s.jsx(x.motion.span,{className:"uk-tabs__indicator",layoutId:f.indicatorId,"aria-hidden":"true",transition:b?{duration:0}:z}):null]})}),He=i.forwardRef(function({value:e,className:n,...o},r){const l=K("Tabs.Content"),c=l.value===e;return s.jsx("div",{...o,ref:r,role:"tabpanel",id:re(l.baseId,e),"aria-labelledby":oe(l.baseId,e),hidden:!c,tabIndex:0,"data-state":c?"active":"inactive",className:C("uk-tabs__panel",n)})}),Ve=Object.assign($e,{List:Ae,Trigger:Be,Content:He}),ie=i.createContext(null),Fe=()=>()=>{},qe=()=>!0,Ge=()=>!1;function $(t){const e=i.useContext(ie);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 ae({children:t,open:e,defaultOpen:n,onOpenChange:o}){const r=i.useId(),[l,c]=i.useState(!1),[p,f]=i.useState(!1),[a,b]=E.useControllableState({value:e,defaultValue:n??!1,onChange:o}),m=i.useMemo(()=>({open:a,setOpen:b,triggerId:`${r}-trigger`,contentId:`${r}-content`,titleId:`${r}-title`,descriptionId:`${r}-description`,hasTitle:l,setHasTitle:c,hasDescription:p,setHasDescription:f}),[r,a,p,l,b]);return s.jsx(ie.Provider,{value:m,children:t})}function ze({children:t}){const e=$("Dialog.Trigger"),n=t,o=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:se(o,()=>{e.setOpen(!e.open)})})}function ce({children:t,label:e="Close"}){const n=$("Dialog.Close");if(i.isValidElement(t)){const o=t,r=o.props.onClick;return i.cloneElement(o,{onClick:se(r,()=>{n.setOpen(!1)})})}return s.jsx(G,{variant:"ghost",onClick:()=>n.setOpen(!1),children:e})}const le=i.forwardRef(function({className:e,...n},o){return s.jsx("header",{...n,ref:o,className:C("uk-dialog__header",e)})}),ue=i.forwardRef(function({className:e,children:n,...o},r){const l=$("Dialog.Title"),c=l.setHasTitle;return i.useEffect(()=>(c(!0),()=>c(!1)),[c]),s.jsx("h2",{...o,ref:r,id:l.titleId,className:C("uk-dialog__title",e),children:n})}),de=i.forwardRef(function({className:e,...n},o){const r=$("Dialog.Description"),l=r.setHasDescription;return i.useEffect(()=>(l(!0),()=>l(!1)),[l]),s.jsx("p",{...n,ref:o,id:r.descriptionId,className:C("uk-dialog__description",e)})}),fe=i.forwardRef(function({className:e,...n},o){return s.jsx("div",{...n,ref:o,className:C("uk-dialog__body",e)})}),pe=i.forwardRef(function({className:e,...n},o){return s.jsx("footer",{...n,ref:o,className:C("uk-dialog__footer",e)})});function Ke({requestClose:t,contentId:e,titleId:n,descriptionId:o,hasTitle:r,hasDescription:l,children:c,closeOnBackdropClick:p=!0,closeOnEscape:f=!0,initialFocusRef:a,returnFocusRef:b,className:m,"aria-label":h,"aria-labelledby":g,"aria-describedby":d}){const y=i.useRef(null),v=i.useRef(null),I=x.useIsPresent(),T=x.useReducedMotion()??!1;return E.useLockBodyScroll(!0),i.useLayoutEffect(()=>{const u=y.current;u&&(v.current??(v.current=document.activeElement instanceof HTMLElement?document.activeElement:null),!u.open&&(typeof u.showModal=="function"?u.showModal():u.setAttribute("open","")))},[]),E.useFocusTrap({active:!0,containerRef:y,initialFocusRef:a,returnFocusRef:b??v}),i.useEffect(()=>{const u=y.current;if(!u)return;const k=()=>{u.open||(typeof u.showModal=="function"?u.showModal():u.setAttribute("open",""))},w=()=>{if(!f){k();return}t()},_=j=>{j.preventDefault(),f&&t()},N=j=>{f||j.key!=="Escape"||j.defaultPrevented||(j.preventDefault(),j.stopPropagation())},P=j=>{p&&j.target===u&&t()};return u.addEventListener("close",w),u.addEventListener("cancel",_),u.addEventListener("keydown",N,!0),u.addEventListener("click",P),()=>{u.removeEventListener("close",w),u.removeEventListener("cancel",_),u.removeEventListener("keydown",N,!0),u.removeEventListener("click",P)}},[p,f,t]),s.jsx("dialog",{ref:y,id:e,className:C("uk-dialog",m),closedby:f||p?"any":"none","data-state":I?"open":"closed",inert:!I,"aria-label":h,"aria-labelledby":g??(h?void 0:r?n:void 0),"aria-describedby":d??(l?o:void 0),children:s.jsx(x.motion.div,{className:"uk-dialog__panel",initial:T?{opacity:0}:{opacity:0,transform:"translateY(12px) scale(0.96)"},animate:{opacity:1,transform:"translateY(0px) scale(1)",transition:T?O:{...J,delay:.06}},exit:T?{opacity:0,transition:O}:{opacity:0,transform:"translateY(8px) scale(0.97)",transition:J},children:c})})}function he({children:t,closeOnBackdropClick:e=!0,closeOnEscape:n=!0,initialFocusRef:o,returnFocusRef:r,className:l,"aria-label":c,"aria-labelledby":p,"aria-describedby":f}){const a=$("Dialog.Content"),b=E.useEventCallback(()=>{a.setOpen(!1)});return i.useSyncExternalStore(Fe,qe,Ge)?q.createPortal(s.jsx(x.MotionConfig,{reducedMotion:"user",children:s.jsx(x.AnimatePresence,{children:a.open?s.jsx(Ke,{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:l,"aria-label":c,"aria-labelledby":p,"aria-describedby":f,children:t},"uk-dialog"):null})}),document.body):null}function Ue({open:t,onOpenChange:e,title:n,description:o,footer:r,children:l,closeLabel:c="Close",showCloseButton:p=!0,closeOnBackdropClick:f=!0,closeOnEscape:a=!0,initialFocusRef:b,returnFocusRef:m,className:h,"aria-label":g}){return s.jsx(ae,{open:t,onOpenChange:e,children:s.jsxs(he,{className:h,closeOnBackdropClick:f,closeOnEscape:a,initialFocusRef:b,returnFocusRef:m,"aria-label":g,children:[n||o||p?s.jsxs(le,{children:[s.jsxs("div",{className:"uk-dialog__heading",children:[n?s.jsx(ue,{children:n}):null,o?s.jsx(de,{children:o}):null]}),p?s.jsx(ce,{children:s.jsx(G,{variant:"ghost",size:"sm",iconOnly:!0,"aria-label":c,className:"uk-dialog__close",children:s.jsx("svg",{viewBox:"0 0 20 20",width:"16",height:"16","aria-hidden":"true",children:s.jsx("path",{d:"M5 5l10 10M15 5L5 15",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})})})}):null]}):null,s.jsx(fe,{children:l}),r?s.jsx(pe,{children:r}):null]})})}const Xe=Object.assign(Ue,{Root:ae,Trigger:ze,Content:he,Header:le,Title:ue,Description:de,Body:fe,Footer:pe,Close:ce}),me=i.createContext(null),be=()=>()=>{},ge=()=>!0,xe=()=>!1;function ye(t){const e=i.useContext(me);if(!e)throw new Error(`<${t}> must be rendered inside <Tooltip.Root>`);return e}function ve(t,e){typeof t=="function"?t(e):t&&(t.current=e)}function Ie(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 Ye({children:t,open:e,defaultOpen:n,onOpenChange:o,delayDuration:r=300,closeDelay:l=80}){const c=i.useId(),[p,f]=i.useState(null),a=i.useRef(null),b=i.useRef(null),[m,h]=E.useControllableState({value:e,defaultValue:n??!1,onChange:o}),g=i.useCallback(()=>{a.current!==null&&(clearTimeout(a.current),a.current=null)},[]),d=i.useCallback(()=>{b.current!==null&&(clearTimeout(b.current),b.current=null)},[]),y=E.useEventCallback((u=!1)=>{if(g(),d(),!m){if(u||r<=0){h(!0);return}a.current=setTimeout(()=>{a.current=null,h(!0)},r)}}),v=E.useEventCallback(()=>{if(g(),d(),!!m){if(l<=0){h(!1);return}b.current=setTimeout(()=>{b.current=null,h(!1)},l)}}),I=E.useEventCallback(()=>{g(),d(),h(!1)});i.useEffect(()=>{m?d():g()},[d,g,m]),i.useEffect(()=>()=>{g(),d()},[d,g]);const T=i.useMemo(()=>({open:m,triggerElement:p,setTriggerElement:f,contentId:c,requestOpen:y,requestClose:v,dismiss:I}),[c,m,I,v,y,p]);return s.jsx(me.Provider,{value:T,children:t})}function We({children:t}){const e=ye("Tooltip.Trigger"),{setTriggerElement:n}=e;if(!i.isValidElement(t))throw new Error("<Tooltip.Trigger> expects a single valid React element");const o=t,r=o.props,l=r.ref??o.ref,c=r.onPointerEnter,p=r.onPointerLeave,f=r.onFocus,a=r.onBlur,b=r.onKeyDown,m=i.useCallback(h=>{ve(l,h),n(h)},[l,n]);return i.cloneElement(o,{ref:m,"aria-describedby":e.open?Ie(r["aria-describedby"],e.contentId):r["aria-describedby"],onPointerEnter:R(c,h=>{e.requestOpen(h.pointerType==="touch")}),onPointerLeave:R(p,h=>{h.pointerType!=="touch"&&e.requestClose()}),onFocus:R(f,()=>{e.requestOpen()}),onBlur:R(a,()=>{e.requestClose()}),onKeyDown:R(b,h=>{h.key==="Escape"&&e.open&&(h.preventDefault(),h.stopPropagation(),e.dismiss())})})}function A(t,e,n){return n<e?e:Math.min(Math.max(t,e),n)}function Je(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,l,c){return F(t,n,r,l,c)>=(n==="top"||n==="bottom"?e.height:e.width)+o}function Qe({trigger:t,tooltip:e,side:n,align:o,sideOffset:r,collisionPadding:l,avoidCollisions:c,viewportWidth:p,viewportHeight:f}){let a=n;if(c&&!Q(t,e,n,r,p,f,l)){const v=Je(n),I=Q(t,e,v,r,p,f,l),T=F(t,n,p,f,l),u=F(t,v,p,f,l);(I||u>T)&&(a=v)}const b=t.left+t.width/2,m=t.top+t.height/2;let h=0,g=0;switch(a){case"top":case"bottom":h=o==="start"?t.left:o==="end"?t.right-e.width:b-e.width/2,g=a==="top"?t.top-e.height-r:t.bottom+r;break;case"left":case"right":h=a==="left"?t.left-e.width-r:t.right+r,g=o==="start"?t.top:o==="end"?t.bottom-e.height:m-e.height/2;break}c&&(h=A(h,l,p-e.width-l),g=A(g,l,f-e.height-l));const d=10,y=a==="top"||a==="bottom"?A(b-h,d,Math.max(d,e.width-d)):A(m-g,d,Math.max(d,e.height-d));return{x:h,y:g,side:a,arrowOffset:y}}function ke(t,e,{side:n,align:o,sideOffset:r,collisionPadding:l,avoidCollisions:c}){const[p,f]=i.useState(null);return i.useLayoutEffect(()=>{const a=e.current;if(!a||!t)return;const b=()=>{const h=t.getBoundingClientRect(),g=a.getBoundingClientRect();f(Qe({trigger:h,tooltip:g,side:n,align:o,sideOffset:r,collisionPadding:l,avoidCollisions:c,viewportWidth:window.innerWidth||document.documentElement.clientWidth,viewportHeight:window.innerHeight||document.documentElement.clientHeight}))};b(),window.addEventListener("resize",b),window.addEventListener("scroll",b,!0);const m=typeof ResizeObserver>"u"?null:new ResizeObserver(b);return m?.observe(t),m?.observe(a),()=>{window.removeEventListener("resize",b),window.removeEventListener("scroll",b,!0),m?.disconnect()}},[o,c,l,e,n,r,t]),p}function Te(t,e,n){i.useEffect(()=>{const o=c=>{const p=c.target;p instanceof Node&&(t.contains(p)||e.current?.contains(p)||n())},r=()=>{document.visibilityState==="hidden"&&n()},l=c=>{const p=c.target;c.key!=="Escape"||p instanceof Node&&t.contains(p)||n()};return document.addEventListener("pointerdown",o,!0),document.addEventListener("visibilitychange",r),document.addEventListener("keydown",l,!0),window.addEventListener("blur",n),()=>{document.removeEventListener("pointerdown",o,!0),document.removeEventListener("visibilitychange",r),document.removeEventListener("keydown",l,!0),window.removeEventListener("blur",n)}},[n,e,t])}function Ce(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 Ze({contentId:t,triggerElement:e,dismiss:n,children:o,className:r,style:l,side:c="top",align:p="center",sideOffset:f=8,collisionPadding:a=8,avoidCollisions:b=!0,...m}){const h=i.useRef(null),g=x.useReducedMotion()??!1,d=x.useIsPresent(),y=ke(e,h,{side:c,align:p,sideOffset:f,collisionPadding:a,avoidCollisions:b});Te(e,h,n);const v=Ce(y?.side??c),I={...l,left:y?`${y.x}px`:0,top:y?`${y.y}px`:0,visibility:y?"visible":"hidden"};return s.jsx("div",{...m,ref:h,id:t,role:"tooltip","data-side":y?.side??c,"data-align":p,"data-state":d?"open":"closed","aria-hidden":d?void 0:!0,className:C("uk-tooltip",r),style:I,children:s.jsxs(x.motion.div,{className:"uk-tooltip__surface",style:{transformOrigin:v},initial:g?{opacity:0}:{opacity:0,scale:.96},animate:{opacity:1,scale:1},exit:g?{opacity:0}:{opacity:0,scale:.96},transition:g?O:Z,children:[s.jsx("span",{className:"uk-tooltip__arrow","aria-hidden":"true",style:{"--uk-tooltip-arrow-offset":`${y?.arrowOffset??0}px`}}),o]})})}function et(t){const e=ye("Tooltip.Content"),o=i.useSyncExternalStore(be,ge,xe)&&e.triggerElement?e.triggerElement.closest("dialog")??document.body:null;return!o||!e.triggerElement?null:q.createPortal(s.jsx(x.MotionConfig,{reducedMotion:"user",children:s.jsx(x.AnimatePresence,{children:e.open?s.jsx(Ze,{contentId:e.contentId,triggerElement:e.triggerElement,dismiss:e.dismiss,...t},"uk-tooltip"):null})}),o)}const we=i.createContext(null);function tt(t){const e=i.useContext(we);if(!e)throw new Error(`<${t}> must be rendered inside <Tooltip.Group>`);return e}function nt({activeValue:t,content:e,contentClassName:n,contentId:o,dismiss:r,triggerElement:l,side:c,align:p,sideOffset:f,collisionPadding:a,avoidCollisions:b}){const m=i.useRef(null),h=x.useReducedMotion()??!1,g=x.useIsPresent(),d=ke(l,m,{side:c,align:p,sideOffset:f,collisionPadding:a,avoidCollisions:b});Te(l,m,r);const y={left:d?`${d.x}px`:0,top:d?`${d.y}px`:0,transformOrigin:Ce(d?.side??c),visibility:d?"visible":"hidden"};return s.jsxs(x.motion.div,{ref:m,id:o,role:"tooltip",layout:!h,layoutDependency:t,"data-side":d?.side??c,"data-align":p,"data-state":g?"open":"closed","aria-hidden":g?void 0:!0,className:C("uk-tooltip","uk-tooltip__surface","uk-tooltip--group",n),style: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,layout:{duration:0}}:Ne,children:[s.jsx("span",{className:"uk-tooltip__arrow","aria-hidden":"true",style:{"--uk-tooltip-arrow-offset":`${d?.arrowOffset??0}px`}}),s.jsx(x.motion.div,{className:"uk-tooltip__content",initial:{opacity:0},animate:{opacity:1},transition:h?O:Z,children:e},t)]})}function ot({children:t,side:e="top",align:n="center",sideOffset:o=8,collisionPadding:r=8,avoidCollisions:l=!0,delayDuration:c=180,closeDelay:p=80,contentClassName:f}){const a=i.useId(),[b,m]=i.useState(()=>new Map),[h,g]=i.useState(!1),[d,y]=i.useState(null),v=i.useRef(null),I=i.useRef(null),T=i.useSyncExternalStore(be,ge,xe),u=i.useCallback(()=>{v.current!==null&&(clearTimeout(v.current),v.current=null)},[]),k=i.useCallback(()=>{I.current!==null&&(clearTimeout(I.current),I.current=null)},[]),w=E.useEventCallback((D,S=!1)=>{if(u(),k(),y(D),!h){if(S||c<=0){g(!0);return}v.current=setTimeout(()=>{v.current=null,g(!0)},c)}}),_=E.useEventCallback(()=>{if(u(),k(),!!h){if(p<=0){g(!1);return}I.current=setTimeout(()=>{I.current=null,g(!1)},p)}}),N=E.useEventCallback(()=>{u(),k(),g(!1)}),P=E.useEventCallback((D,S,M)=>{m(H=>{const X=H.get(D);if(X?.triggerElement===S&&Object.is(X.content,M))return H;const Y=new Map(H);return Y.set(D,{triggerElement:S,content:M}),Y})}),j=E.useEventCallback(D=>{m(S=>{if(!S.has(D))return S;const M=new Map(S);return M.delete(D),M})});i.useEffect(()=>()=>{u(),k()},[k,u]);const _e=i.useMemo(()=>({open:h,activeValue:d,contentId:a,activate:w,requestClose:_,dismiss:N,register:P,unregister:j}),[w,d,a,N,h,P,_,j]),L=d?b.get(d):void 0,Ee=h&&!!L,U=T&&L?L.triggerElement.closest("dialog")??document.body:null;return s.jsxs(we.Provider,{value:_e,children:[t,U&&L?q.createPortal(s.jsx(x.MotionConfig,{reducedMotion:"user",children:s.jsx(x.AnimatePresence,{children:Ee?s.jsx(nt,{activeValue:d??"",content:L.content,contentClassName:f,contentId:a,dismiss:N,triggerElement:L.triggerElement,side:e,align:n,sideOffset:o,collisionPadding:r,avoidCollisions:l},"uk-tooltip-group"):null})}),U):null]})}function rt({value:t,content:e,children:n}){const o=tt("Tooltip.Item"),{register:r,unregister:l}=o,[c,p]=i.useState(null);if(!i.isValidElement(n))throw new Error("<Tooltip.Item> expects a single valid React element");const f=n,a=f.props,b=a.ref??f.ref,m=a.onPointerEnter,h=a.onPointerLeave,g=a.onFocus,d=a.onBlur,y=a.onKeyDown,v=o.open&&o.activeValue===t,I=i.useCallback(T=>{ve(b,T),p(T)},[b,p]);return i.useLayoutEffect(()=>{if(c)return r(t,c,e),()=>l(t)},[e,r,c,l,t]),i.cloneElement(f,{ref:I,"aria-describedby":v?Ie(a["aria-describedby"],o.contentId):a["aria-describedby"],onPointerEnter:R(m,T=>{o.activate(t,T.pointerType==="touch")}),onPointerLeave:R(h,T=>{T.pointerType!=="touch"&&o.requestClose()}),onFocus:R(g,()=>{o.activate(t)}),onBlur:R(d,()=>{o.requestClose()}),onKeyDown:R(y,T=>{T.key==="Escape"&&v&&(T.preventDefault(),T.stopPropagation(),o.dismiss())})})}const it={Root:Ye,Trigger:We,Content:et,Group:ot,Item:rt};exports.Button=G;exports.Dialog=Xe;exports.Input=je;exports.Sidebar=Oe;exports.Switch=Se;exports.Tabs=Ve;exports.Tooltip=it;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|