seam-react 0.4.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 +26 -4
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +751 -621
- package/dist/index.js.map +1 -1
- package/dist/motion.d.ts +1 -0
- package/dist/styles.cjs +104 -12
- package/dist/styles.cjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.js +106 -14
- 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
|
|
package/dist/Sidebar.d.ts
CHANGED
|
@@ -2,20 +2,41 @@ import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
|
|
|
2
2
|
export interface SidebarProps extends HTMLAttributes<HTMLElement> {
|
|
3
3
|
children?: ReactNode;
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* 鼠标悬停时是否显示会跟随指针移动的背景预览。
|
|
6
6
|
*
|
|
7
7
|
* @default true
|
|
8
8
|
*/
|
|
9
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;
|
|
10
22
|
}
|
|
23
|
+
export type SidebarHoverIndicator = "rail" | "background";
|
|
11
24
|
export interface SidebarGroupProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
12
25
|
/** 分类名称。 */
|
|
13
26
|
title: ReactNode;
|
|
14
27
|
/** 分类标题前的视觉图标,不作为额外可访问名称。 */
|
|
15
28
|
icon?: ReactNode;
|
|
29
|
+
/** 是否允许用户展开和收起该分组。默认保持展开且不显示触发器。 */
|
|
30
|
+
collapsible?: boolean;
|
|
31
|
+
/** 受控展开状态。 */
|
|
32
|
+
open?: boolean;
|
|
33
|
+
/** 非受控模式下是否默认展开。 */
|
|
34
|
+
defaultOpen?: boolean;
|
|
35
|
+
/** 展开状态变化时触发。 */
|
|
36
|
+
onOpenChange?: (open: boolean) => void;
|
|
16
37
|
children?: ReactNode;
|
|
17
38
|
}
|
|
18
|
-
declare function SidebarGroup({ title, icon, children, className, ...rest }: SidebarGroupProps): ReactElement;
|
|
39
|
+
declare function SidebarGroup({ title, icon, collapsible, open, defaultOpen, onOpenChange, children, className, ...rest }: SidebarGroupProps): ReactElement;
|
|
19
40
|
export interface SidebarItemProps {
|
|
20
41
|
/** 当前页面是否对应此链接。 */
|
|
21
42
|
active?: boolean;
|
|
@@ -29,8 +50,9 @@ declare function SidebarItem({ active, children, className, }: SidebarItemProps)
|
|
|
29
50
|
* 分组文档导航。
|
|
30
51
|
*
|
|
31
52
|
* 根节点保持原生 `<nav>`,Group 生成带名称的分组,Item 包装单个链接。
|
|
32
|
-
*
|
|
33
|
-
*
|
|
53
|
+
* hoverIndicator 在轨道游标与共享布局背景之间二选一,hover 和当前项使用
|
|
54
|
+
* 同一种反馈;Group 可按需展开和收起,同时保持链接的 Tab 顺序、焦点、
|
|
55
|
+
* 原生事件和 aria-current 行为。
|
|
34
56
|
*/
|
|
35
57
|
export interface SidebarComponent {
|
|
36
58
|
(props: SidebarProps): ReactElement;
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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;
|
|
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
|