neba 1.18.1 → 1.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/a2ui/adapter-catalog.json +1 -1
- package/dist/a2ui/catalog.json +3 -3
- package/dist/a2ui/index.d.ts +37 -16
- package/dist/a2ui/index.js +1 -1
- package/dist/a2ui/schema.d.ts +7 -0
- package/dist/a2ui/schema.js +1 -1
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/agent-steps/AgentSteps.js +1 -1
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-counter/AnimateCounter.js +1 -1
- package/dist/components/animate-headline/AnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/AnimateLighting.js +1 -1
- package/dist/components/animate-marquee/AnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/AnimateScramble.js +1 -1
- package/dist/components/animate-typing/AnimateTyping.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/approval/Approval.js +1 -1
- package/dist/components/aspect-ratio/AspectRatio.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/bar-chart/BarChart.js +1 -1
- package/dist/components/blockquote/Blockquote.js +1 -1
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.js +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button-group/ButtonGroup.js +1 -1
- package/dist/components/calendar/Calendar.js +1 -1
- package/dist/components/carousel/Carousel.js +1 -1
- package/dist/components/chat-bubble/ChatBubble.js +1 -1
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/checkbox-group/index.d.ts +1 -1
- package/dist/components/chip/Chip.d.ts +32 -3
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/collapsible/Collapsible.js +1 -1
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +11 -0
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/combobox/index.d.ts +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +21 -5
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/command-palette/CommandPaletteSheet.d.ts +27 -0
- package/dist/components/command-palette/CommandPaletteSheet.js +1 -0
- package/dist/components/command-palette/index.d.ts +1 -1
- package/dist/components/confirm/Confirm.d.ts +7 -5
- package/dist/components/confirm/Confirm.js +1 -1
- package/dist/components/data-list/DataList.js +1 -1
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/data-table/RowsPerPage.d.ts +43 -0
- package/dist/components/data-table/RowsPerPage.js +1 -0
- package/dist/components/date-picker/DatePicker.js +1 -1
- package/dist/components/date-range-picker/DateRangePicker.js +1 -1
- package/dist/components/date-time-picker/DateTimePicker.js +1 -1
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/dialog/index.d.ts +1 -1
- package/dist/components/drawer/Drawer.d.ts +1 -1
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/empty/Empty.js +1 -1
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/components/floating-action-button/index.d.ts +1 -0
- package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
- package/dist/components/footer/Footer.js +1 -1
- package/dist/components/gallery/Gallery.js +1 -1
- package/dist/components/gauge-chart/GaugeChart.js +1 -1
- package/dist/components/header/Header.js +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
- package/dist/components/highlight/Highlight.js +1 -1
- package/dist/components/hover-card/HoverCard.js +1 -1
- package/dist/components/how-to-steps/HowToSteps.d.ts +3 -0
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/image/Image.js +1 -1
- package/dist/components/inline-citation/InlineCitation.d.ts +24 -0
- package/dist/components/inline-citation/InlineCitation.js +1 -1
- package/dist/components/list/List.js +1 -1
- package/dist/components/menu/Menu.js +1 -1
- package/dist/components/menubar/Menubar.js +1 -1
- package/dist/components/meter/Meter.js +1 -1
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.ts +2 -1
- package/dist/components/navigation-menu/NavigationMenu.js +1 -1
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/number-field/index.d.ts +1 -1
- package/dist/components/overlay/Overlay.js +1 -1
- package/dist/components/page-layout/PageLayout.js +1 -1
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/pie-chart/PieChart.js +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/progress-box/ProgressBox.js +1 -1
- package/dist/components/progress-circular/ProgressCircular.js +1 -1
- package/dist/components/progress-linear/ProgressLinear.js +1 -1
- package/dist/components/prompt-input/PromptInput.js +1 -1
- package/dist/components/provider/NebaProvider.js +1 -1
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/radio-group/index.d.ts +1 -1
- package/dist/components/rating/Rating.js +1 -1
- package/dist/components/reasoning/Reasoning.js +1 -1
- package/dist/components/scatter-chart/ScatterChart.js +1 -1
- package/dist/components/scroll-area/ScrollArea.js +1 -1
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/segmented-button/SegmentedButton.js +1 -1
- package/dist/components/select/Select.d.ts +12 -0
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/shortcut/Shortcut.js +1 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/sidebar/SidebarTrigger.js +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/sources/Sources.js +1 -1
- package/dist/components/sparkline/Sparkline.d.ts +7 -0
- package/dist/components/sparkline/Sparkline.js +1 -1
- package/dist/components/spoiler/Spoiler.js +1 -1
- package/dist/components/statistic/Statistic.js +1 -1
- package/dist/components/streaming-text/StreamingText.d.ts +10 -6
- package/dist/components/streaming-text/StreamingText.js +1 -1
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/switch/index.d.ts +1 -1
- package/dist/components/table/Table.js +1 -1
- package/dist/components/table/index.d.ts +1 -1
- package/dist/components/tabs/Tabs.js +1 -1
- package/dist/components/text-field/TextField.js +1 -1
- package/dist/components/text-field/index.d.ts +1 -1
- package/dist/components/text-link/TextLink.js +1 -1
- package/dist/components/time-picker/TimePicker.js +1 -1
- package/dist/components/timeline-chart/TimelineChart.js +1 -1
- package/dist/components/toast/Toast.d.ts +38 -5
- package/dist/components/toast/Toast.js +1 -1
- package/dist/components/toast/index.d.ts +2 -2
- package/dist/components/toast/index.js +1 -1
- package/dist/components/toggle/Toggle.js +1 -1
- package/dist/components/toggle-group/ToggleGroup.js +1 -1
- package/dist/components/tool-call/ToolCall.js +1 -1
- package/dist/components/toolbar/Toolbar.js +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/tour/index.d.ts +1 -1
- package/dist/components/transfer/Transfer.d.ts +7 -0
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.js +1 -1
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/internal/animate.d.ts +34 -2
- package/dist/internal/animate.js +1 -1
- package/dist/internal/cache.d.ts +7 -1
- package/dist/internal/cache.js +1 -1
- package/dist/internal/calendar.d.ts +40 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +86 -8
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +13 -0
- package/dist/internal/chart.js +1 -1
- package/dist/internal/data-table.d.ts +7 -1
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +10 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/idle.d.ts +10 -0
- package/dist/internal/idle.js +1 -0
- package/dist/internal/link.d.ts +4 -3
- package/dist/internal/media.js +1 -1
- package/dist/internal/observe.d.ts +4 -0
- package/dist/internal/observe.js +1 -1
- package/dist/internal/page-layout.d.ts +30 -2
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +17 -0
- package/dist/internal/progress.js +1 -1
- package/dist/internal/refs.d.ts +18 -0
- package/dist/internal/refs.js +1 -0
- package/dist/internal/run.d.ts +34 -19
- package/dist/internal/run.js +1 -1
- package/dist/internal/sizer.d.ts +9 -4
- package/dist/internal/sizer.js +1 -1
- package/dist/internal/styles.d.ts +14 -0
- package/dist/internal/styles.js +1 -1
- package/dist/internal/tile.d.ts +34 -0
- package/dist/internal/tile.js +1 -0
- package/dist/internal/wheel.d.ts +24 -1
- package/dist/internal/wheel.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +366 -61
- package/dist/types.d.ts +4 -2
- package/package.json +19 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{ButtonGroupContext as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{ButtonGroupContext as t}from"../../internal/button-group.js";import{cx as i}from"../../internal/styles.js";import{useStyleDefaults as n}from"../../internal/defaults.js";const r={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"},a={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"};export const ToggleGroup=/*@__PURE__*/o.forwardRef(function ToggleGroup(s,u){const{variant:d,size:c,color:f,density:m,elevation:p,value:h,defaultValue:v,onValueChange:g,multiple:x=!1,orientation:z="horizontal",disabled:b,loopFocus:j=!0,fullWidth:y=!1,className:V,children:w,...G}=n(s,["size","density","variant"]),T=o.useMemo(()=>({variant:d,size:c,color:f,density:m,elevation:p,disabled:b}),[d,c,f,m,p,b]);return e(t.Provider,{value:T,children:e(l,{ref:u,value:h,defaultValue:v,onValueChange:e=>g?.(e),multiple:x,orientation:z,disabled:b,loopFocus:j,className:i("align-middle [&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10 [&>*]:shrink-0","vertical"===z?"flex-col":"flex-row",r[z],"outline"===(d??"outline")?a[z]:"",y?"flex w-full [&>*]:flex-1":"inline-flex",V??""),...G,children:w})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as a,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{Collapsible as s}from"@base-ui/react/collapsible";import{boxPaddingXClasses as r,boxPaddingYClasses as t}from"../box/Box.js";import{ChevronIcon as o}from"../../internal/icons.js";import{
|
|
1
|
+
"use client";import{jsx as e,Fragment as a,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{Collapsible as s}from"@base-ui/react/collapsible";import{boxPaddingXClasses as r,boxPaddingYClasses as t}from"../box/Box.js";import{ChevronIcon as o}from"../../internal/icons.js";import{RunTime as i,runColor as c,runIcon as m,useRunClock as d}from"../../internal/run.js";import{runMessages as u,toolMessages as f,useMessages as p}from"../../internal/i18n.js";import{collapsiblePanelClasses as h,cx as x,gapClasses as b,hasContent as g,iconClasses as v,metaTextClasses as N,preformattedClasses as w,radiusClasses as j,sheetBodyClasses as y,sheetTitleClasses as k,srOnlyClasses as z,surfaceClasses as C,surfaceSlots as B,transitionClasses as F,disclosureChevronClasses as O,disclosureTriggerClasses as R}from"../../internal/styles.js";import{useStyleDefaults as T}from"../../internal/defaults.js";const U={solid:C+" text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)]",outline:C+" border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]",text:"text-(--neba-fg) bg-transparent"},_=k;export const ToolCall=/*@__PURE__*/l.forwardRef(function ToolCall(w,k){const{variant:C="outline",size:E="md",color:P="primary",density:S="default",elevation:$=0,name:q,status:A="pending",args:D,result:G,error:H,duration:I,meta:J,icon:K,open:L,defaultOpen:M=!1,onOpenChange:Q,hiddenUntilFound:V=!0,locale:W,labels:X,classNames:Y,className:Z,style:ee,children:ae,...ne}=T(w,["size","density","variant","locale"]),le=p(u,W),se=p(f,W),re={...le,...se,...X},[te,oe]=l.useState(M),ie=void 0!==L,ce=ie?L:te,me=l.useRef(A);l.useEffect(()=>{me.current===A||"error"!==A||ie||oe(!0),me.current=A},[A,ie]);const de=d("running"===A,I),ue=c(A,P),fe=void 0===K?m(A):K,pe=function(e,a,n){return"error"===e&&g(n)?n:a}(A,G,H),he=g(D)||g(pe)||g(ae),xe=r[S][E],be=t[S][E],ge=n(a,{children:[g(fe)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--n-accent)",children:fe}):null,e("span",{className:x("min-w-0 truncate font-mono font-semibold",_[E]),children:q}),e("span",{className:z,children:re[A]}),g(J)?e("span",{className:x("min-w-0 truncate text-(--neba-muted-fg)",N[E]),children:J}):null,e("span",{className:"flex-1"}),e(i,{...de,locale:W,className:x("shrink-0 tabular-nums text-(--neba-muted-fg)",N[E])})]}),ve=x("flex flex-col overflow-hidden",j[E],U[C],F,v,Z??""),Ne={...B(ue,$),...ee};return he?n(s.Root,{ref:k,open:ce,onOpenChange:e=>{ie||oe(e),Q?.(e)},"data-status":A,className:ve,style:Ne,...ne,children:[n(s.Trigger,{className:x("flex w-full cursor-pointer items-center text-start",R,xe,be,b[E],F,"hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",Y?.header??""),children:[ge,e("span",{className:`${O} text-(--neba-muted-fg)`,children:e(o,{})})]}),e(s.Panel,{hiddenUntilFound:V,className:h,children:n("div",{className:x("flex min-w-0 flex-col gap-2 pb-4",xe,y[E],"compact"===S?"pb-2":"",Y?.body??""),children:[g(D)?e(Block,{size:E,label:re.arguments,className:Y?.args,value:D}):null,g(pe)?e(Block,{size:E,label:"error"===A&&g(H)?le.error:re.result,className:Y?.result,value:pe,accent:"error"===A}):null,ae]})})]}):e("div",{ref:k,"data-status":A,className:ve,style:Ne,...ne,children:e("div",{className:x("flex items-center",xe,be,b[E],Y?.header??""),children:ge})})});function Block({size:a,label:l,value:s,className:r,accent:t=!1}){return n("div",{className:x("flex min-w-0 flex-col gap-1",r??""),children:[e("span",{className:x("font-medium tracking-wide text-(--neba-muted-fg) uppercase",N[a]),children:l}),"string"==typeof s?e("pre",{className:x(w,"max-h-64",t?"text-(--n-accent)":""),children:s}):e("div",{className:t?"text-(--n-accent)":void 0,children:s})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{useRender as
|
|
1
|
+
"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{useRender as a}from"@base-ui/react/use-render";import{boxPaddingXClasses as n,boxPaddingYClasses as i,boxPaddingYValues as s}from"../box/Box.js";import{cx as l,hasContent as d,radiusClasses as m,sheetSectionGapClasses as c,surfaceClasses as p,surfaceSlots as b,transitionClasses as f}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const v={solid:p+" text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)]",outline:p+" border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]",text:"text-(--neba-fg) bg-transparent"},u={static:{top:"",bottom:""},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},g={top:"border-b [border-color:var(--n-line)]",bottom:"border-t [border-color:var(--n-line)]"};export const Toolbar=/*@__PURE__*/o.forwardRef(function Toolbar(o,p){const{variant:h="outline",size:y="md",color:w="primary",density:j="default",elevation:z=0,position:k="static",side:N="top",safeArea:T=!0,divider:B=!1,start:$,end:A,render:F,className:R,style:q,children:C,...D}=x(o,["size","density","variant"]),E=l("flex w-full min-w-0 items-center",n[j][y],i[j][y],c[y],"static"===k?m[y]:"",v[h],B?g[N]:"",u[k][N],f,R??"");return a({render:F,ref:p,props:{className:E,style:{...b(w,z),...T&&"static"!==k?{["bottom"===N?"paddingBottom":"paddingTop"]:`calc(${s[j][y]} + env(safe-area-inset-${N}))`}:null,...q},children:r(t,{children:[d($)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:$}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:C}),d(A)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:A}):null]}),...D}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tooltip as o}from"@base-ui/react/tooltip";import{controlSlots as i,cx as s,metaTextClasses as l,paddingXClasses as r,popupFadeClasses as d,radiusClasses as n,surfaceClasses as p}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";export const TooltipProvider=o.Provider;const m=p+" max-w-64 text-(--n-on-solid) bg-(--n-fill) [box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)] [outline:none] "+d+" data-[instant]:[transition-duration:0ms]",f={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},h={xs:6,sm:7,md:8,lg:9,xl:10};export function Tooltip(d){const{content:p,children:u,size:x="sm",color:y="secondary",density:b="default",side:g="top",align:v="center",sideOffset:w=6,delay:O,closeDelay:j,arrow:z=!0,open:N,defaultOpen:P,onOpenChange:T,disabled:C=!1,className:D,style:k,id:A,...B}=c(d,["size","density"]),I=h[x],L=a.useId(),M=A??L,[R,S]=a.useState(P??!1),q=N??R;return t(o.Root,{open:N,defaultOpen:P,onOpenChange:e=>{void 0===N&&S(e),T?.(e)},children:[e(o.Trigger,{render:u,delay:O,closeDelay:j,disabled:C,"aria-describedby":q?M:void 0}),e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:g,align:v,sideOffset:w,children:t(o.Popup,{id:M,role:"tooltip",className:s(m,n[x],r[b][x],f[x],l[x],D??""),style:{...i(y,3,"solid"),...k},...B,children:[z?e(o.Arrow,{className:"data-[side=top]:bottom-[-1px] data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180 data-[side=left]:right-[-1px] data-[side=left]:-rotate-90 data-[side=right]:left-[-1px] data-[side=right]:rotate-90",children:e("svg",{width:I,height:I/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--n-fill)"})})}):null,p]})})})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as s}from"../../internal/layout-effect.js";import{Popover as i}from"@base-ui/react/popover";import{Button as o}from"../button/Button.js";import{boxPaddingXClasses as l,boxPaddingYClasses as a}from"../box/Box.js";import{actionMessages as r,fillMessage as c,stepsMessages as d,useMessages as m}from"../../internal/i18n.js";import{CloseIcon as p}from"../../internal/icons.js";import{queryMatches as u,reducedMotionQuery as h}from"../../internal/media.js";import{observeResize as f}from"../../internal/observe.js";import{cx as g,hasContent as x,metaTextClasses as b,popupFadeClasses as v,radiusClasses as w,sheetBodyClasses as N,sheetCloseClasses as k,sheetHeaderGapClasses as y,sheetSectionGapClasses as j,sheetTitleClasses as S,srOnlyClasses as z,surfaceClasses as L,surfaceSlots as C}from"../../internal/styles.js";import{useStyleDefaults as E}from"../../internal/defaults.js";const M=L+" relative flex flex-col border text-(--neba-fg) bg-(--n-panel-press) [border-color:var(--n-line)] [box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)] [outline:none] "+v,P={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},O={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function $(e){try{return document.querySelector(e)}catch{return null}}function Mask({spot:t,radius:n,className:s}){return e("div",null===t?{"aria-hidden":"true",className:g("pointer-events-none fixed inset-0 z-40 bg-(--neba-scrim)",s)}:{"aria-hidden":"true",className:g("pointer-events-none fixed top-0 left-0 z-40 [box-shadow:0_0_0_9999px_var(--neba-scrim)]",s),style:{translate:`${t.left}px ${t.top}px`,width:t.width,height:t.height,borderRadius:n}})}export function Tour(v){const{steps:L,open:_,defaultOpen:B=!1,onOpenChange:F,step:R,defaultStep:T=0,onStepChange:q,onFinish:A,mask:I=!0,skippable:V=!0,dismissible:D=!0,scrollIntoView:H=!0,locale:G,previousLabel:J,nextLabel:K,doneLabel:Q,skipLabel:U,closeLabel:W,size:X="md",color:Y="primary",density:Z="default",className:ee,classNames:te}=E(v,["size","density","locale"]),ne=m(d,G),se=m(r,G),[ie,oe]=n.useState(B),[le,ae]=n.useState(T),re=_??ie,ce=Math.min(R??le,Math.max(0,L.length-1)),de=L[ce],[me,pe]=n.useState(null),ue=e=>{void 0===_&&oe(e),F?.(e)},he=e=>{void 0===R&&ae(e),q?.(e)},[fe,ge]=n.useState(null);if(s(()=>{const e=de?.target;ge(re&&e?$(e):null)},[re,de?.target]),n.useEffect(()=>{const e=de?.target;if(!re||!e)return;const t=$(e);if(!(t instanceof HTMLElement))return;H&&t.scrollIntoView({block:"center",inline:"nearest",behavior:u(h)?"auto":"smooth"});const n=de?.padding??6;let s=0;const i=()=>{s=0;const i=t.getBoundingClientRect(),o={top:i.top-n,left:i.left-n,width:i.width+2*n,height:i.height+2*n};pe(t=>t?.selector===e&&t.spot.top===o.top&&t.spot.left===o.left&&t.spot.width===o.width&&t.spot.height===o.height?t:{selector:e,spot:o})},o=()=>{0===s&&(s=requestAnimationFrame(i))};i();const l=f(t,o);return window.addEventListener("scroll",o,{passive:!0,capture:!0}),window.addEventListener("resize",o,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),l(),window.removeEventListener("scroll",o,!0),window.removeEventListener("resize",o)}},[re,de?.target,de?.padding,H]),0===L.length)return null;const xe=re&&de?.target&&me?.selector===de.target?me.spot:null,be=0===ce,ve=ce===L.length-1,we=l[Z][X],Ne=a[Z][X],ke=O[X],ye=x(de?.title)||x(de?.content);return e(i.Root,{open:re,onOpenChange:(e,t)=>{(e||D||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?ue(e):t.cancel()},children:t(i.Portal,{children:[re&&I?e(Mask,{spot:xe,radius:xe?8:0,className:te?.mask}):null,e(i.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:de?.side??"bottom",align:de?.align??"center",sideOffset:10,collisionPadding:12,anchor:fe,children:t(i.Popup,{className:g(M,w[X],N[X],j[X],P[X],we,Ne,ee),style:C(Y,3),children:[e("span",{className:z,"aria-live":"polite",children:"string"==typeof de?.title?c(ne.step,{index:String(ce+1),title:de.title}):c(ne.position,{index:String(ce+1),total:String(L.length)})}),ye?t("div",{className:"flex items-start gap-3",children:[t("div",{className:`flex min-w-0 flex-1 flex-col ${y[X]}`,children:[x(de?.title)?e(i.Title,{className:g("m-0 font-semibold",S[X],te?.title),children:de?.title}):null,x(de?.content)?e(i.Description,{className:g("m-0 min-w-0",te?.description),children:de?.content}):null]}),D?e("button",{type:"button","aria-label":W??se.close,onClick:()=>ue(!1),className:g(k,te?.close),children:e(p,{})}):null]}):null,t("div",{className:g("flex items-center gap-2",te?.footer),children:[e("span",{className:`shrink-0 tabular-nums text-(--neba-muted-fg) ${b[X]}`,children:c(ne.position,{index:String(ce+1),total:String(L.length)})}),t("div",{className:"ms-auto flex items-center gap-2",children:[V&&!ve?e(o,{size:ke,variant:"text",color:"secondary",onClick:()=>ue(!1),children:U??ne.skip}):null,be?null:e(o,{size:ke,variant:"outline",color:Y,onClick:()=>he(ce-1),children:J??ne.previous}),e(o,{size:ke,color:Y,onClick:()=>ve?(A?.(),void ue(!1)):he(ce+1),children:ve?Q??ne.done:K??ne.next})]})]})]})})]})})}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Tour } from './Tour.js';
|
|
2
|
-
export type { TourProps, TourStep } from './Tour.js';
|
|
2
|
+
export type { TourProps, TourSlot, TourStep } from './Tour.js';
|
|
@@ -27,6 +27,13 @@ export interface TransferProps extends NebaStyleProps, Omit<React.ComponentProps
|
|
|
27
27
|
height?: number | string;
|
|
28
28
|
/** Nothing can be ticked or moved. */
|
|
29
29
|
disabled?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Identifies the chosen values when a form is submitted. Each value on the
|
|
32
|
+
* right is a hidden input under this name, so `FormData.getAll(name)` reads
|
|
33
|
+
* them in order and a `Form`'s `onSubmit` is handed them as an array. With
|
|
34
|
+
* nothing chosen, nothing is submitted, as with a checkbox left unticked.
|
|
35
|
+
*/
|
|
36
|
+
name?: string;
|
|
30
37
|
/**
|
|
31
38
|
* Which language the headings, the buttons and the filter are written in — a
|
|
32
39
|
* BCP 47 tag such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Checkbox as t}from"../checkbox/Checkbox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{ScrollArea as r}from"../scroll-area/ScrollArea.js";import{TextField as n}from"../text-field/TextField.js";import{fillMessage as i,transferMessages as o,useMessages as c}from"../../internal/i18n.js";import{ArrowRightIcon as d}from"../../internal/icons.js";import{searchText as u}from"../../internal/search.js";import{cx as m,fieldRestClasses as h,hasContent as f,metaTextClasses as b,paddingXClasses as p,radiusClasses as v,srOnlyClasses as g,surfaceSlots as x,toLength as y}from"../../internal/styles.js";import{useStyleDefaults as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Checkbox as t}from"../checkbox/Checkbox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{ScrollArea as r}from"../scroll-area/ScrollArea.js";import{TextField as n}from"../text-field/TextField.js";import{fillMessage as i,transferMessages as o,useMessages as c}from"../../internal/i18n.js";import{ArrowRightIcon as d}from"../../internal/icons.js";import{searchText as u}from"../../internal/search.js";import{cx as m,fieldRestClasses as h,hasContent as f,metaTextClasses as b,paddingXClasses as p,radiusClasses as v,srOnlyClasses as g,surfaceSlots as x,toLength as y}from"../../internal/styles.js";import{useStyleDefaults as k}from"../../internal/defaults.js";const S={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},w={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},T=/*@__PURE__*/l.memo(function TransferRow({value:a,label:l,checked:s,disabled:r,arrived:n,size:i,color:o,onTick:c}){return e(t,{size:i,color:o,className:m(w[i],n?"[animation:neba-anim-fade_var(--neba-duration-fill)_var(--neba-ease)_both]":""),label:l,checked:s,disabled:r,onCheckedChange:e=>c(a,!0===e)})});function Panel({title:s,rows:i,arrived:o,ticked:c,onTick:d,onTickAll:u,search:m,onSearch:f,searchable:g,disabled:y,height:k,emptyMessage:N,searchLabel:j,selectAllLabel:z,style:C}){const{size:M,variant:$="outline",color:A="primary",density:L="default"}=C,_=i.filter(e=>!e.disabled),D=_.filter(e=>c.has(e.value)),V=_.length>0&&D.length===_.length,P=D.length>0&&!V,R=p[L][M],W=l.useId();return a("div",{role:"group","aria-labelledby":W,className:"flex min-w-0 flex-col overflow-hidden "+h[$]+" "+v[M],style:x(A,0),children:[a("div",{className:`flex items-center gap-2 border-b [border-color:var(--neba-border)] ${R} ${S[M]}`,children:[e(t,{size:M,color:A,checked:V,indeterminate:P,disabled:y||0===_.length,"aria-label":z,onCheckedChange:e=>u(!0===e)}),e("span",{id:W,className:`min-w-0 flex-1 truncate font-medium ${b[M]}`,children:s}),a("span",{className:`shrink-0 tabular-nums text-(--neba-muted-fg) ${b[M]}`,children:[D.length,"/",i.length]})]}),g?e("div",{className:`${R} ${S[M]}`,children:e(n,{size:M,color:A,density:L,fullWidth:!0,variant:"text",disabled:y,placeholder:j,"aria-label":j,value:m,onChange:e=>f(e.target.value)})}):null,e(r,{size:M,color:A,height:k,fade:!0,children:e("div",{className:`flex flex-col ${R} ${S[M]}`,children:0===i.length?e("span",{className:`text-(--neba-muted-fg) ${b[M]} ${w[M]}`,children:N}):i.map(a=>e(T,{value:a.value,label:a.label,checked:c.has(a.value),disabled:y||!0===a.disabled,arrived:o.has(a.value),size:M,color:A,onTick:d},a.value))})})]})}function N(e,a,l){const t=u(a);return""===t?e:e.filter(e=>{const a=l.get(e.value);return void 0===a||a.includes(t)})}export const Transfer=/*@__PURE__*/l.forwardRef(function Transfer(t,r){const{items:n,value:h,defaultValue:b,onValueChange:p,sourceLabel:v,targetLabel:x,searchable:S=!1,height:w=220,disabled:T=!1,name:j,locale:z,variant:C="outline",size:M="md",color:$="primary",density:A="default",className:L,..._}=k(t,["size","density","variant","locale"]),D=c(o,z),[V,P]=l.useState(b??[]),R=h??V,[W,I]=l.useState(()=>new Set),[B,E]=l.useState(()=>new Set),[F,q]=l.useState(""),[G,H]=l.useState(""),[J,K]=l.useState(""),O=l.useRef(void 0);l.useEffect(()=>()=>clearTimeout(O.current),[]);const Q=l.useMemo(()=>new Set(R),[R]),U=l.useMemo(()=>n.filter(e=>!Q.has(e.value)),[n,Q]),X=l.useMemo(()=>n.filter(e=>Q.has(e.value)),[n,Q]),Y=l.useCallback((e,a)=>{I(l=>{const t=new Set(l);return a?t.add(e):t.delete(e),t})},[]),Z=(e,a)=>{I(l=>{const t=new Set(l);for(const l of e)l.disabled||(a?t.add(l.value):t.delete(l.value));return t})},ee=(e,a)=>{const l=e.filter(e=>!e.disabled&&W.has(e.value));if(0===l.length)return;const t=new Set(l.map(e=>e.value)),s=new Set(n.map(e=>e.value)),r=R.filter(e=>!s.has(e)),o=a?[...n.filter(e=>Q.has(e.value)||t.has(e.value)).map(e=>e.value),...r]:R.filter(e=>!t.has(e));I(e=>new Set([...e].filter(e=>!t.has(e)))),E(t),(e=>{void 0===h&&P(e),p?.(e)})(o);const c=a?x:v,d=i(D.moved,{count:String(l.length),list:"string"==typeof c&&c.trim()?c:a?D.target:D.source});clearTimeout(O.current),K(""),O.current=setTimeout(()=>K(d),100)},ae=l.useMemo(()=>function(e){const a=new Map;for(const l of e)"string"==typeof l.label&&a.set(l.value,u(l.label));return a}(n),[n]),le=l.useDeferredValue(F),te=l.useDeferredValue(G),se=l.useMemo(()=>N(U,le,ae),[U,le,ae]),re=l.useMemo(()=>N(X,te,ae),[X,te,ae]),ne=se.some(e=>!e.disabled&&W.has(e.value)),ie=re.some(e=>!e.disabled&&W.has(e.value)),oe=y(w),ce={variant:C,size:M,color:$,density:A};return a("div",{ref:r,className:m("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",L??""),..._,children:[e(Panel,{title:f(v)?v:D.source,rows:se,arrived:B,ticked:W,onTick:Y,onTickAll:e=>Z(se,e),search:F,onSearch:q,searchable:S,disabled:T,height:oe,emptyMessage:D.empty,searchLabel:D.search,selectAllLabel:D.selectAll,style:ce}),a("div",{className:"flex flex-col gap-2",children:[e(s,{size:M,color:$,variant:"text"===C?"text":"outline",label:D.toTarget,disabled:T||!ne,focusableWhenDisabled:!T,onClick:()=>ee(se,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(d,{})})}),e(s,{size:M,color:$,variant:"text"===C?"text":"outline",label:D.toSource,disabled:T||!ie,focusableWhenDisabled:!T,onClick:()=>ee(re,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(d,{})})})]}),e(Panel,{title:f(x)?x:D.target,rows:re,arrived:B,ticked:W,onTick:Y,onTickAll:e=>Z(re,e),search:G,onSearch:H,searchable:S,disabled:T,height:oe,emptyMessage:D.empty,searchLabel:D.search,selectAllLabel:D.selectAll,style:ce}),e("span",{role:"status",className:g,children:J}),void 0===j?null:R.map(a=>e("input",{type:"hidden",name:j,value:a,disabled:T,"data-neba-repeats":""},a))]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{TreeItem as n,TreeView as r}from"../tree-view/TreeView.js";import{PickerShell as t}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{actionMessages as s,commandMessages as c,comboboxMessages as d,useMessages as u}from"../../internal/i18n.js";import{useStyleDefaults as p}from"../../internal/defaults.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}function m(e,l=new Map){for(const a of e)l.set(a,i([a.searchLabel??("string"==typeof a.label?a.label:String(a.value))])),a.children&&m(a.children,l);return l}function f(e,l,a){if(""===l)return e;const n=[];for(const r of e){const e=r.children?f(r.children,l,a):void 0,t=(a.get(r)??"").includes(l);(t||e&&e.length>0)&&n.push({...r,children:t?r.children:e})}return n}function
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{TreeItem as n,TreeView as r}from"../tree-view/TreeView.js";import{PickerShell as t}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{actionMessages as s,commandMessages as c,comboboxMessages as d,useMessages as u}from"../../internal/i18n.js";import{useStyleDefaults as p}from"../../internal/defaults.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}function m(e,l=new Map){for(const a of e)l.set(a,i([a.searchLabel??("string"==typeof a.label?a.label:String(a.value))])),a.children&&m(a.children,l);return l}function f(e,l,a){if(""===l)return e;const n=[];for(const r of e){const e=r.children?f(r.children,l,a):void 0,t=(a.get(r)??"").includes(l);(t||e&&e.length>0)&&n.push({...r,children:t?r.children:e})}return n}function b(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),b(a.children,l));return l}export const TreeSelect=/*@__PURE__*/a.forwardRef(function TreeSelect(i,g){const{items:v=[],value:x,defaultValue:y,onValueChange:C,multiple:S=!1,selectableBranches:w=!1,defaultExpanded:j,expanded:N,onExpandedChange:M,open:O,defaultOpen:V,onOpenChange:z,placeholder:T,clearable:k=!1,clearLabel:E,closeOnSelect:L,searchable:A=!1,searchPlaceholder:I,locale:P,format:R,name:B,size:D="md",color:F="primary",readOnly:$=!1,disabled:q=!1,classNames:G,...H}=p(i,["size","density","variant","locale","labelPlacement"]),J=u(d,P),K=u(c,P),Q=u(s,P),U=e=>null==e?[]:Array.isArray(e)?e:[e],[W,X]=a.useState(()=>U(y)),Y=void 0!==x?U(x):W,[Z,_]=a.useState(V??!1),ee=O??Z,[le,ae]=a.useState(""),ne=a.useMemo(()=>h(v),[v]),re=a.useMemo(()=>m(v),[v]),te=a.useDeferredValue(le),ie=o(te),oe=a.useMemo(()=>f(v,ie,re),[v,ie,re]),se=a.useMemo(()=>""===ie?void 0:b(oe),[ie,oe]),[ce,de]=a.useState(()=>j??[]),ue=se??N??ce,pe=e=>{e&&($||q)||(void 0===O&&_(e),e||ae(""),z?.(e))},he=e=>{void 0===x&&X(e),C?.(e)},me=a.useCallback(e=>e.selectable??(!(e.children&&e.children.length>0)||w),[w]),fe=Y.map(e=>ne.get(e)).filter(e=>void 0!==e),be=0===fe.length?T??"":R?R(fe):fe.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ge=G?.item,ve=a.useMemo(()=>{const l=a=>a.map(a=>e(n,{value:a.value,label:a.label,startIcon:a.startIcon,disabled:a.disabled,selectable:me(a),className:ge,children:a.children?l(a.children):null},a.value));return l(oe)},[oe,me,ge]);return e(t,{...H,size:D,color:F,readOnly:$,disabled:q,triggerRef:g,display:be,empty:0===fe.length,clearable:k,onClear:()=>he([]),open:ee,onOpenChange:pe,clearLabel:E??Q.clear,popupClassName:G?.popup,initialFocus:!0,hiddenValues:B?Y.map(e=>({name:B,value:String(e)})):void 0,repeats:S,children:l("div",{className:"flex max-h-80 w-64 flex-col gap-2 overflow-hidden",children:[A?e("input",{type:"text",value:le,placeholder:I??K.search,"aria-label":I??K.search,onChange:e=>ae(e.currentTarget.value),className:"neba-input w-full shrink-0 bg-transparent px-1 py-1 [font:inherit] text-(--neba-fg) [outline:none] placeholder:text-(--neba-muted-fg)"}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===oe.length?e("p",{className:`px-1 py-2 text-(--neba-muted-fg) ${G?.empty??""}`,children:J.empty}):e(r,{size:D,color:F,multiple:S,selected:Y,onSelectedChange:e=>{const l=e.filter(e=>{const l=ne.get(e);return void 0!==l&&me(l)&&!l.disabled});he(S?l:l.slice(-1)),(L??!S)&&pe(!1)},expanded:ue,onExpandedChange:se?()=>{}:e=>{void 0===N&&de(e),M?.(e)},className:G?.tree,children:ve})})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as t,jsxs as
|
|
1
|
+
"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{useMergedRef as l}from"../../internal/refs.js";import{inertValue as a}from"../../internal/inert.js";import{safeHref as s}from"../../internal/link.js";import{searchText as o}from"../../internal/search.js";import{ChevronIcon as i}from"../../internal/icons.js";import{controlTextClasses as d,cx as c,gapClasses as u,hasContent as m,iconClasses as p,radiusClasses as f,surfaceClasses as x,surfaceSlots as g,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const b=/*@__PURE__*/n.createContext({size:"md",density:"default",disabled:!1,multiple:!1,keepMounted:!1,expandedKeys:new Set,selectedKeys:new Set,activeKey:null,toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),y=/*@__PURE__*/n.createContext(!1),w=/*@__PURE__*/n.createContext(!1),k={solid:x+" text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)]",outline:x+" border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]",text:"text-(--neba-fg) bg-transparent"},C={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.75rem"},S={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},E={default:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},compact:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-2",xl:"px-2.5"}},N={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.5rem]",lg:"rounded-[0.625rem]",xl:"rounded-[0.75rem]"},A={none:"",simple:"neba-tree-simple",folder:"neba-tree-folder"};function K(e){return Array.from(e.querySelectorAll('[role="treeitem"]')).filter(e=>null===e.closest("[data-closing]"))}const j=e=>String(e);export const TreeView=/*@__PURE__*/n.forwardRef(function TreeView(t,r){const{variant:a="outline",size:s="md",color:i="primary",density:d="default",elevation:u=0,lines:m="simple",expanded:p,defaultExpanded:x,onExpandedChange:y,selected:E,defaultSelected:N,onSelectedChange:V,multiple:R=!1,disabled:D=!1,label:P,keepMounted:M=!1,className:z,style:I,children:T,onKeyDown:_,...q}=v(t,["size","density","variant"]),[F,L]=n.useState(x??[]),[H,O]=n.useState(N??[]),[U,W]=n.useState(null),B=p??F,G=E??H,J=n.useRef(null),Q=l(J,r),X=n.useRef({expandedValues:B,selectedValues:G,controlledExpanded:void 0!==p,controlledSelected:void 0!==E,multiple:R,onExpandedChange:y,onSelectedChange:V});X.current={expandedValues:B,selectedValues:G,controlledExpanded:void 0!==p,controlledSelected:void 0!==E,multiple:R,onExpandedChange:y,onSelectedChange:V};const Y=n.useCallback(e=>{const{expandedValues:t,controlledExpanded:r,onExpandedChange:n}=X.current,l=j(e),a=t.some(e=>j(e)===l)?t.filter(e=>j(e)!==l):[...t,e];r||L(a),n?.(a)},[]),Z=n.useCallback(e=>{const{selectedValues:t,controlledSelected:r,multiple:n,onSelectedChange:l}=X.current,a=j(e),s=t.some(e=>j(e)===a),o=n?s?t.filter(e=>j(e)!==a):[...t,e]:[e];r||O(o),l?.(o)},[]),$=n.useRef(new Map),ee=n.useRef(new Set),te=n.useCallback((e,t,r)=>($.current.set(e,t),r&&ee.current.add(e),()=>{$.current.delete(e),ee.current.delete(e)}),[]),re=n.useMemo(()=>B.map(j).join("\0"),[B]),ne=n.useMemo(()=>G.map(j).join("\0"),[G]),le=n.useMemo(()=>({size:s,density:d,disabled:D,multiple:R,keepMounted:M,expandedKeys:new Set(B.map(j)),selectedKeys:new Set(G.map(j)),activeKey:U,toggle:Y,select:Z,activate:W,register:te}),[s,d,D,R,M,re,ne,U,Y,Z,te]);n.useEffect(()=>{if(null!==U&&$.current.has(U))return;if(null===U&&0===G.length&&1===ee.current.size)return;const e=J.current;if(!e)return;const t=K(e);if(0===t.length)return;const r=t.find(e=>"true"===e.getAttribute("aria-selected"))??t[0];W(r.dataset.nebaValue??null)});const ae=c("flex list-none flex-col p-1",f[s],k[a],h,A[m],z);return e(b.Provider,{value:le,children:e("ul",{ref:Q,role:"tree","aria-label":P,"aria-multiselectable":R||void 0,className:ae,style:{...g(i,u),"--n-tree-indent":C[s],"--n-tree-row":S[s],...I},onKeyDown:function(e){if(_?.(e),e.defaultPrevented)return;const t=J.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;if(e.target!==r)return;const n=K(t),l=n.indexOf(r);if(-1===l)return;const a=t=>{t&&(e.preventDefault(),W(t.dataset.nebaValue??null),t.focus())},s=e=>{const t=e.dataset.nebaValue;t&&$.current.get(t)?.toggle()},i="rtl"===getComputedStyle(t).direction,d=i?"ArrowLeft":"ArrowRight",c=i?"ArrowRight":"ArrowLeft",u=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":a(n[l+1]);break;case"ArrowUp":a(n[l-1]);break;case"Home":a(n[0]);break;case"End":a(n[n.length-1]);break;case d:"false"===u?(e.preventDefault(),s(r)):"true"===u&&a(n[l+1]);break;case c:"true"===u?(e.preventDefault(),s(r)):a(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault();(("Enter"===e.key?r.querySelector(":scope > div > a[href]"):null)??r).click();break;default:if(1===[...e.key].length&&" "!==e.key&&!e.ctrlKey&&!e.metaKey&&!e.altKey){const t=o(e.key);a([...n.slice(l+1),...n.slice(0,l)].find(e=>o(e.querySelector("[data-neba-label]")?.textContent??"").startsWith(t)))}}},...q,children:n.Children.toArray(T).map((t,r)=>e(w.Provider,{value:0===r,children:t},n.isValidElement(t)&&null!==t.key?t.key:r))})})});export const TreeItem=/*@__PURE__*/n.forwardRef(function TreeItem({value:o,label:f,startIcon:x,endIcon:g,action:v,href:k,expandable:C,disabled:S=!1,selectable:A=!0,className:K,children:V,onClick:R,...D},P){const{size:M,density:z,disabled:I,expandedKeys:T,selectedKeys:_,activeKey:q,toggle:F,select:L,activate:H,register:O,multiple:U,keepMounted:W}=n.useContext(b),B=n.useId(),G=o??B,J=j(G),Q=n.useRef(null),X=l(Q,P),Y=n.Children.toArray(V),Z=C??Y.length>0,$=Z&&T.has(J),ee=_.has(J),te=S||I,re=n.useRef({toggle:()=>{}});re.current.toggle=()=>{!te&&Z&&F(G)};const ne=n.useContext(y),le=n.useContext(w)&&null===q&&0===_.size;n.useEffect(()=>ne?void 0:O(J,re.current,le),[ne,J,O,le]);const[ae,se]=n.useState($),[oe,ie]=n.useState($),de=n.useRef(null);n.useEffect(()=>{if($){se(!0);const e=requestAnimationFrame(()=>ie(!0));return()=>cancelAnimationFrame(e)}ie(!1);const e=de.current;(null===e||getComputedStyle(e).transitionDuration.split(",").every(e=>0===parseFloat(e)))&&se(!1)},[$]);const ce=c("flex min-w-0 flex-1 cursor-pointer items-center text-start no-underline","h-(--n-tree-row)",E[z][M],N[M],u[M],d[M],h,p,"group-focus-visible/tree-item:[outline:2px_solid_var(--n-ring)]","group-focus-visible/tree-item:outline-offset-[-2px]",te?"cursor-not-allowed text-(--neba-disabled-fg)":ee?"bg-(--n-soft-press) font-medium text-(--n-on-tint) hover:bg-(--n-soft-press)":"text-inherit hover:bg-(--n-soft)"),ue=r(t,{children:[e("span",{"aria-hidden":"true",onClick:e=>{!te&&Z&&(e.stopPropagation(),e.preventDefault(),Q.current?.focus(),H(J),F(G))},className:c("flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",Z?"text-(--neba-muted-fg)":"",$?"rotate-0":"-rotate-90 rtl:rotate-90"),children:Z?e(i,{}):null}),m(x)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:x}):null,e("span",{"data-neba-label":"",className:"min-w-0 flex-1 truncate",children:f}),m(g)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:g}):null]});return r("li",{ref:X,role:"treeitem","aria-expanded":Z?$:void 0,"aria-selected":!!ee||(!U||!A)&&void 0,"aria-disabled":te||void 0,"data-neba-value":J,tabIndex:q===J||le?0:-1,className:c("group/tree-item relative block [outline:none]",K),onClick:function(e){e.stopPropagation(),te?e.preventDefault():(Q.current?.focus(),H(J),R?.(e),e.defaultPrevented||(Z&&F(G),A&&L(G)))},...D,children:[r("div",{className:"flex w-full items-center",children:[void 0===s(k)||te?e("div",{className:ce,children:ue}):e("a",{href:s(k),tabIndex:-1,className:ce,"aria-current":ee?"page":void 0,children:ue}),m(v)?e("span",{className:c("flex shrink-0 items-center",E[z][M]),onClick:e=>e.stopPropagation(),children:v}):null]}),Z&&(ae||W)&&Y.length>0?e("div",{ref:de,"data-closing":$?void 0:"",inert:a(!$),className:c("grid [transition:grid-template-rows_var(--neba-duration)_var(--neba-ease)]",oe?"[grid-template-rows:1fr]":"[grid-template-rows:0fr] pointer-events-none"),onTransitionEnd:e=>{e.target!==e.currentTarget||"grid-template-rows"!==e.propertyName||$||se(!1)},children:e("ul",{role:"group",className:"min-h-0 list-none overflow-hidden ps-(--n-tree-indent)",children:e(y.Provider,{value:ne||!$,children:e(w.Provider,{value:!1,children:V})})})}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useMergedRef as o}from"../../internal/refs.js";import{useLayoutEffectOnClient as r}from"../../internal/layout-effect.js";import{useRender as s}from"@base-ui/react/use-render";import{beginPointerDrag as a,drawnScale as l}from"../../internal/drag.js";import{actionMessages as d,useMessages as c,windowMessages as u}from"../../internal/i18n.js";import{cx as h,hasContent as m,iconClasses as f,surfaceClasses as g}from"../../internal/styles.js";import{WindowControls as w,orderControls as p,windowChrome as b,windowMetrics as x,windowSlots as v}from"../../internal/window.js";import{inertValue as z}from"../../internal/inert.js";import{useStyleDefaults as y}from"../../internal/defaults.js";function M(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const E=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}],N=[];export const WindowPane=/*@__PURE__*/i.forwardRef(function WindowPane(S,H){const{os:k="macos",title:C,icon:L,actions:j,controls:W=!0,size:I="md",color:P="primary",accent:D=!1,transparency:T=0,active:A,elevation:O=2,position:R="static",draggable:B=!1,resizable:X=!1,width:$,height:F,minWidth:Y=180,minHeight:_,offset:q,defaultOffset:K,onOffsetChange:U,onResize:G,open:J,defaultOpen:Q=!0,onOpenChange:V,minimized:Z,defaultMinimized:ee=!1,onMinimizedChange:te,maximized:ne,defaultMaximized:ie=!1,onMaximizedChange:oe,scroll:re=!0,locale:se,minimizeLabel:ae,maximizeLabel:le,restoreLabel:de,closeLabel:ce,resizeLabel:ue,render:he,className:me,style:fe,children:ge,...we}=y(S,["size","locale"]),pe=c(u,se),be=i.useId(),xe=c(d,se),ve=b(k),ze=x(k,I),ye=i.useId(),[Me,Ee]=M(J,Q,V),[Ne,Se]=M(Z,ee,te),[He,ke]=M(ne,ie,oe),[Ce,Le]=M(q,K??{x:0,y:0},U),[je,We]=i.useState(null),[Ie,Pe]=i.useState({width:$,height:F});Ie.width===$&&Ie.height===F||(Pe({width:$,height:F}),We(null));const[De,Te]=i.useState(!0),Ae=A??De,[Oe,Re]=i.useState(null),[Be,Xe]=i.useState(null),[$e,Fe]=i.useState(!1),[Ye,_e]=i.useState(!1),[qe,Ke]=i.useState(Me);qe!==Me&&(Ke(Me),_e(!Me)),i.useEffect(()=>{if(!Ye)return;const e=window.setTimeout(()=>_e(!1),260);return()=>window.clearTimeout(e)},[Ye]);const Ue=i.useRef(null),Ge=o(Ue,H);i.useEffect(()=>{if(void 0!==A||!Me)return;const e=Ue.current;if(!e)return;const t=e=>Te(e);N.push(t);const n=n=>{const i=n.target;if(!(i instanceof Node))return;if(e.contains(i))return N.splice(N.indexOf(t),1),N.push(t),void Te(!0);const o=i instanceof Element?i:i.parentElement;o?.closest(".neba-window")&&Te(!1)};return document.addEventListener("pointerdown",n,!0),document.addEventListener("focusin",n,!0),()=>{document.removeEventListener("pointerdown",n,!0),document.removeEventListener("focusin",n,!0);const e=N.indexOf(t),i=e===N.length-1;N.splice(e,1),i&&N[N.length-1]?.(!0)}},[A,Me]);const Je=i.useRef(null);function Qe(e,t){if(0!==e.button)return;Je.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY,r=Ue.current,s=r?l(r):{x:1,y:1};Fe(!0);const d=()=>{Je.current=null,Fe(!1)},c=a({target:n,pointerId:e.pointerId,onMove:e=>t((e.clientX-i)/s.x,(e.clientY-o)/s.y),onEnd:d});Je.current=()=>{c(),d()}}i.useEffect(()=>()=>Je.current?.(),[]);const Ve={width:Math.max(0,Y),height:Math.max(ze.bar,_??ze.bar)};function Ze(e){We(e),G?.(e)}const et=p(k,!0===W?["minimize","maximize","close"]:!1===W?[]:W),tt=et.includes("maximize");r(()=>{if(!Ne||null!==Oe)return;const e=Ue.current,t=e?.firstElementChild;e&&t instanceof HTMLElement&&Re(t.offsetHeight+(e.offsetHeight-e.clientHeight))},[Ne,Oe]),i.useEffect(()=>{if(Ne||null===Be)return;const e=window.setTimeout(()=>Xe(null),400);return()=>window.clearTimeout(e)},[Ne,Be]);const nt={minimize:ae??pe.minimize,maximize:le??pe.maximize,restore:de??pe.restore,close:ce??xe.close},it=e(w,{os:k,metrics:ze,controls:et,maximized:He,active:Ae,labels:nt,onCommand:function(e){"close"===e?Ee(!1):"minimize"===e?function(e){const t=Ue.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Re(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(je?.height??F)&&t)return Xe(t.offsetHeight),void requestAnimationFrame(()=>Se(!0));Se(e)}(!Ne):ke(!He)}}),ot=m(C)?e("span",{id:ye,className:"min-w-0 truncate",children:C}):null,rt=m(L)?e("span",{className:"flex shrink-0 items-center",children:L}):null,st=t("div",{className:h("relative flex shrink-0 items-center select-none",f,B&&!He?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:ze.bar,textShadow:"var(--n-window-bar-shadow)",fontWeight:ze.weight,paddingInlineStart:ze.padX,paddingInlineEnd:ze.padEnd,gap:Math.round(.7*ze.title),fontSize:ze.title,backgroundColor:"var(--n-window-bar)",backgroundImage:"var(--n-window-bar-image)",color:"var(--n-window-bar-fg)",borderBlockEnd:ve.rule?"1px solid var(--n-window-line)":void 0},onPointerDown:function(e){if(!B||He)return;const t={...Ce},n=Ue.current,i="fixed"===R?{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}:"absolute"===R&&n?.offsetParent instanceof HTMLElement?{width:n.offsetParent.clientWidth,height:n.offsetParent.clientHeight}:null,o=n?.offsetWidth??0,r=Math.min(o,48);Qe(e,(e,n)=>{const s=t.x+e,a=t.y+n;Le(i?{x:Math.min(Math.max(s,r-o),i.width-r),y:Math.min(Math.max(a,0),Math.max(0,i.height-ze.bar))}:{x:s,y:a})})},onDoubleClick:tt?()=>ke(!He):void 0,children:["start"===ve.controlsSide?it:null,"center"===ve.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:ze.controlsWidth(et.length)+2*ze.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*ze.title)},children:[rt,ot]})}):t(n,{children:[rt,ot]}),e("span",{className:"flex-1"}),m(j)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*ze.title)},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:j}):null,"end"===ve.controlsSide?it:null]}),at=He?{left:0,top:0,width:"100%",height:"100%"}:{left:Ce.x,top:Ce.y,width:je?.width??$,height:Ne?Oe??ze.bar:je?.height??F??Be??void 0},lt=s({render:he,ref:Ge,props:{role:"group","aria-labelledby":ot?ye:void 0,className:h("neba-window relative flex min-w-0 flex-col overflow-hidden",T>0?g:"",ve.glass&&0===T?"[backdrop-filter:var(--neba-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--neba-duration-window)]","[transition-timing-function:var(--neba-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",me),"data-gesture":$e?"":void 0,inert:z(!Me),style:{opacity:Me?void 0:0,...v({os:k,color:P,accent:D,transparency:T,active:Ae,elevation:O}),position:"static"===R?"relative":R,...at,borderRadius:He?0:`${ze.radius}px ${ze.radius}px ${ze.radiusBottom}px ${ze.radiusBottom}px`,borderStyle:"solid",borderWidth:ze.frame,borderColor:"var(--n-window-line)",backgroundColor:"var(--n-window-band)",boxShadow:"var(--n-window-shadow), var(--neba-plate-glass)",...fe},children:t(n,{children:[st,e("div",{className:h("min-h-0 flex-1",re?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--n-window-body)",marginInline:ze.band.side,marginBottom:ze.band.bottom,boxShadow:ze.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:z(Ne),children:ge}),!X||He||Ne?null:e("span",{id:be,hidden:!0,children:pe.resizeHint}),!X||He||Ne?null:E.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?ue??pe.resize:void 0,"aria-describedby":n?be:void 0,"aria-hidden":n?void 0:"true",className:h("absolute z-10 touch-none",t.className,n?"neba-hit":"",n?"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function(e,t){const n=Ue.current;if(!n||He)return;const i={width:n.offsetWidth,height:n.offsetHeight,x:Ce.x,y:Ce.y},o=e.includes("e"),r=e.includes("w"),s=e.includes("n"),a=e.includes("s");Qe(t,(e,t)=>{let{width:n,height:l}=i,{x:d,y:c}=i;o&&(n=Math.max(Ve.width,i.width+e)),a&&(l=Math.max(Ve.height,i.height+t)),r&&(n=Math.max(Ve.width,i.width-e),d=i.x+(i.width-n)),s&&(l=Math.max(Ve.height,i.height-t),c=i.y+(i.height-l)),Ze({width:n,height:l}),(r||s)&&Le({x:d,y:c})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function(e,t){const n=Ue.current;n&&Ze({width:Math.max(Ve.width,n.offsetWidth+e),height:Math.max(Ve.height,n.offsetHeight+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...we}});return Me||Ye?lt:null});
|
|
@@ -193,6 +193,29 @@ export interface AnimationRunOptions {
|
|
|
193
193
|
*/
|
|
194
194
|
caller?: TriggerHandlers;
|
|
195
195
|
}
|
|
196
|
+
/**
|
|
197
|
+
* The threshold a `visible` trigger watches with, settled once when the watch
|
|
198
|
+
* starts.
|
|
199
|
+
*
|
|
200
|
+
* An `IntersectionObserver` measures the element as it is drawn, and two things
|
|
201
|
+
* about an entrance that is waiting made the answer one that could never come.
|
|
202
|
+
*
|
|
203
|
+
* **An element larger than the screen.** A threshold is a share of the
|
|
204
|
+
* element, so `0.2` of something six screens tall is more than a screen of it,
|
|
205
|
+
* which no screen can show, and it stayed on its first frame for good. The share is
|
|
206
|
+
* scaled down by how much of the element a screen can hold at most, which keeps
|
|
207
|
+
* the meaning the same for a tall element as for a short one: a fifth of the
|
|
208
|
+
* screen filled by it. Rounded down to a hundredth, so a page of tall elements
|
|
209
|
+
* shares a few observers rather than one each.
|
|
210
|
+
*
|
|
211
|
+
* **A first frame somewhere else.** A slide waits on its first frame, a full
|
|
212
|
+
* width away for the default distance, and a full-width element moved a full
|
|
213
|
+
* width sideways is never on the screen at all, nor is one moved out of a box
|
|
214
|
+
* with `overflow: hidden`. So an entrance that moves is drawn where it belongs,
|
|
215
|
+
* unseen, while it waits — see `data-waiting` in `useAnimateElement` — and
|
|
216
|
+
* needs nothing here.
|
|
217
|
+
*/
|
|
218
|
+
export declare function visibilityWatch(element: HTMLElement, threshold: number): number;
|
|
196
219
|
/** The events a `hover` trigger listens to. */
|
|
197
220
|
type TriggerHandlers = Pick<React.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur'>;
|
|
198
221
|
export interface AnimationRun {
|
|
@@ -239,7 +262,16 @@ export interface AnimationRun {
|
|
|
239
262
|
* would restart the animation by unmounting the children, taking their state
|
|
240
263
|
* with it. Clearing `animation-name`, reading a layout property to force the
|
|
241
264
|
* style to settle, and putting it back is the one move that rewinds the element
|
|
242
|
-
* and leaves everything inside it alone.
|
|
265
|
+
* and leaves everything inside it alone. It is made only for a replay: an
|
|
266
|
+
* animation that has been paused since it was drawn is still on its first
|
|
267
|
+
* frame, letting it go is the whole of starting it, and so the first start of
|
|
268
|
+
* a `visible`, `hover` or `manual` effect forces no layout at all.
|
|
269
|
+
*
|
|
270
|
+
* The rewind stays a reflow rather than a seek through `getAnimations()`.
|
|
271
|
+
* Setting `currentTime` back to `0` on an animation that has finished moves it
|
|
272
|
+
* from its last phase to its first, which Chromium and WebKit report as an
|
|
273
|
+
* `animationstart` and an `animationend` at once when there is a `delay` — and
|
|
274
|
+
* a pattern that unmounts on `animationend` would take that for the end.
|
|
243
275
|
*/
|
|
244
276
|
export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite, caller, parts }: AnimationRunOptions): AnimationRun;
|
|
245
277
|
export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
|
|
@@ -281,7 +313,7 @@ export interface AnimateElement {
|
|
|
281
313
|
* Marquee, Headline, Appear, Split, Scramble and Counter — call
|
|
282
314
|
* `useAnimationRun` directly and put the classes where their own structure
|
|
283
315
|
* needs them. `effect` may be `null` for the one effect component, Lighting,
|
|
284
|
-
* whose keyframe runs on
|
|
316
|
+
* whose keyframe runs on the light it draws inside the root rather than on the root.
|
|
285
317
|
*
|
|
286
318
|
* `data-neba-animation` and `data-state` are here rather than in each component
|
|
287
319
|
* because they are the same two facts every time, and because a test that has
|
package/dist/internal/animate.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as t}from"./layout-effect.js";import{observeVisibility as a}from"./observe.js";import{cx as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as t}from"./layout-effect.js";import{observeVisibility as a}from"./observe.js";import{cx as i}from"./styles.js";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink",reveal:"neba-anim-reveal"};export const animBaseClass="neba-anim";export const childAnimations=":scope > .neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900,reveal:620};export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(i=e.repeat,"infinite"===i?"infinite":String(i)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,i;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(n["--n-anim-clip"]=e.clip),"view"===e.timeline&&(n["--n-anim-timeline"]="view()",n["--n-anim-range"]=e.range??"entry 0% cover 45%"),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function staggers({stagger:e,durationStep:n}){return 0!==e||0!==n}export function staggerChildren(t,a,r,{stagger:o,durationStep:s,reverse:l}){const c=n.Children.toArray(t);return c.map((t,u)=>{const m=l?c.length-1-u:u,d=animationSlots({...r,delay:r.delay+m*o,duration:Math.max(0,r.duration+m*s)});if(!n.isValidElement(t))return e("span",{className:a,style:d,children:t},u);const f=t.props;return n.cloneElement(t,{className:i(a,f.className),style:{...d,...f.style}})})}export const MIN_BLINK_DURATION=334;export function transitionProps(e){const n=transitionParts(e);return n?{className:`neba-anim ${animationClasses[n.effect]}`,style:{...animationSlots(n.slots),"--n-anim-state":"running"}}:{className:"",style:{}}}export function transitionParts(e){if(!e)return null;const n="string"==typeof e?{type:e}:e,{type:t}=n,a=n.duration??defaultDurations[t],i={duration:"blink"===t?Math.max(a,334):a,delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate,timeline:n.timeline,range:n.range};if("grow"!==t&&"zoom"!==t||(i.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");i.x=e,i.y=t}return"rotate"===t&&(i.angle=`${n.angle??-180}deg`),"reveal"===t&&(i.clip=revealClip(n.side??"left")),{effect:t,slots:i}}export{usePrefersReducedMotion}from"./media.js";export function visibilityWatch(e,n){const t=document.documentElement.clientWidth||window.innerWidth,a=document.documentElement.clientHeight||window.innerHeight,i=Math.min(1,t/Math.max(1,e.offsetWidth))*Math.min(1,a/Math.max(1,e.offsetHeight));return i<1?Math.floor(n*i*100)/100:n}export function useAnimationRun({trigger:e,play:i,once:r,threshold:o,paused:s,infinite:l,caller:c,parts:u}){const m=n.useRef(null),[d,f]=n.useState("mount"===e),[p,g]=n.useState(0),[y,h]=n.useState(!1),x=n.useCallback(()=>{f(!0),g(e=>e+1)},[]),v=!d||s||l&&y?"paused":"running",b=n.useRef(!1);t(()=>{const e=m.current;if(!e||0===p||!b.current)return;const n=[e,...u?e.querySelectorAll(u):[]];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[p,u]),t(()=>{"running"===v&&(b.current=!0)},[v]),n.useEffect(()=>{if("visible"!==e)return;const n=m.current;if(!n)return;const t=visibilityWatch(n,o);let i=null;if(i=a(n,t,e=>{e?(x(),r&&(i?.(),i=null)):r||f(!1)}),i)return()=>i?.();f(!0)},[e,r,o,x]),n.useEffect(()=>{const e=m.current;if(l&&e)return a(e,0,e=>h(!e))??void 0},[l]),n.useEffect(()=>{"manual"===e&&(i?x():f(!1))},[e,i,x]);const w=e=>e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget),S="hover"===e?{onPointerEnter:e=>{c?.onPointerEnter?.(e),x()},onFocus:e=>{c?.onFocus?.(e),w(e)||x()},onPointerLeave:e=>{c?.onPointerLeave?.(e),l&&f(!1)},onBlur:e=>{c?.onBlur?.(e),l&&!w(e)&&f(!1)}}:{};return{ref:n.useCallback(e=>{m.current=e},[]),state:v,started:d,run:p,handlers:S,offscreen:l&&y}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:r,paused:o,infinite:s,caller:l,children:c,stagger:u=0,durationStep:m=0,reverse:d=!1,effectClass:f,name:p,...g}=e,y=n?animationClasses[n]:f,h=y?`neba-anim ${y}`:"",x=""!==h&&staggers({stagger:u,durationStep:m,reverse:d}),v="visible"===t&&!x&&"view"!==g.timeline&&"in"===(g.mode??"in")&&("slide"===n||"grow"===n||"zoom"===n||"rotate"===n),b=useAnimationRun({trigger:t,play:a,once:i,threshold:r,paused:o,infinite:s,caller:l,parts:x?childAnimations:void 0}),w="view"===g.timeline?"running":b.state;return{ref:b.ref,className:x?"":h,style:x?{"--n-anim-state":w}:{...animationSlots(g),"--n-anim-state":w},props:{...b.handlers,"data-neba-animation":p??n??void 0,"data-state":w,"data-waiting":v&&!b.started&&0===b.run?0===(g.opacity??0)?"":"shown":void 0},children:x?staggerChildren(c,h,g,{stagger:u,durationStep:m,reverse:d}):c}}
|
package/dist/internal/cache.d.ts
CHANGED
|
@@ -19,6 +19,12 @@
|
|
|
19
19
|
* One rule comes with the shape: a store must not hold `undefined` as a value,
|
|
20
20
|
* or every read of that key misses and builds again. All five hold an object, a
|
|
21
21
|
* number or `null`.
|
|
22
|
+
*
|
|
23
|
+
* A store keyed on something far more numerous names a ceiling of its own.
|
|
24
|
+
* Highlight's folded characters are the one: a text in Hangul or Han has
|
|
25
|
+
* hundreds of different characters in ordinary use, and at the default a store
|
|
26
|
+
* of them emptied itself every few dozen characters and cost more than it
|
|
27
|
+
* saved.
|
|
22
28
|
*/
|
|
23
29
|
/** Reads `key` out of `store`, filling it in with `build` on a miss. */
|
|
24
|
-
export declare function memoise<K, V>(store: Map<K, V>, key: K, build: () => V): V;
|
|
30
|
+
export declare function memoise<K, V>(store: Map<K, V>, key: K, build: () => V, limit?: number): V;
|
package/dist/internal/cache.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export function memoise(e,t,n){const
|
|
1
|
+
export function memoise(e,t,n,o=64){const r=e.get(t);if(void 0!==r)return r;e.size>=o&&e.clear();const i=n();return e.set(t,i),i}
|
|
@@ -36,6 +36,38 @@ export type PickerLabels = PickerMessages;
|
|
|
36
36
|
* say so.
|
|
37
37
|
*/
|
|
38
38
|
export declare function usePickerLabels(overrides: Partial<PickerLabels> | undefined, locale: string | undefined): PickerLabels;
|
|
39
|
+
/**
|
|
40
|
+
* A caller's `shouldDisableDate`, as a new function on every render of the
|
|
41
|
+
* component the caller rendered.
|
|
42
|
+
*
|
|
43
|
+
* The day grid works out which days can be chosen once per month and asks
|
|
44
|
+
* again only when this changes identity, which is what keeps a moving range
|
|
45
|
+
* band from calling it sixty times per cell crossed. Handed the caller's own
|
|
46
|
+
* function, that memo would also stop asking when the caller's tree renders
|
|
47
|
+
* again with the same function reading data that has since changed — a
|
|
48
|
+
* `useCallback` with a dependency missing, or a module-level function over a
|
|
49
|
+
* set the page mutates — and a day that used to grey out on that render would
|
|
50
|
+
* stay choosable. A wrapper made here is new whenever the Calendar or picker
|
|
51
|
+
* renders, so the grid asks exactly as often as it did before it kept the
|
|
52
|
+
* answers, while a band moving inside the popup, which renders below this,
|
|
53
|
+
* leaves it alone.
|
|
54
|
+
*/
|
|
55
|
+
export declare function askOnEveryRender(check: ((date: Date) => boolean) | undefined): ((date: Date) => boolean) | undefined;
|
|
56
|
+
/**
|
|
57
|
+
* Every string a picker's trigger could show, for the `WidthSizer` that holds
|
|
58
|
+
* it at the widest of them.
|
|
59
|
+
*
|
|
60
|
+
* With no `locale`, the server and the hydrating render write `en-US` and every
|
|
61
|
+
* render after that writes the runtime's language — see `useIntlLocale`. Sized
|
|
62
|
+
* by the second set alone, a trigger that is not `fullWidth` took the width of
|
|
63
|
+
* the first in the server's HTML and gave it up the moment the page hydrated,
|
|
64
|
+
* and everything after it in a row of controls moved sideways. So a picker that
|
|
65
|
+
* came through hydration keeps the `en-US` samples beside the runtime's. It can
|
|
66
|
+
* still grow then, where the reader's language writes a longer date, but it
|
|
67
|
+
* never shrinks. A picker first mounted in the browser never had an `en-US`
|
|
68
|
+
* width to keep, and a named locale is the same on both sides.
|
|
69
|
+
*/
|
|
70
|
+
export declare function usePickerSamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
|
|
39
71
|
export interface CalendarProps {
|
|
40
72
|
size: NebaSize;
|
|
41
73
|
color: NebaColor;
|
|
@@ -83,6 +115,13 @@ export interface CalendarProps {
|
|
|
83
115
|
renderDay?: (date: Date) => React.ReactNode;
|
|
84
116
|
/** Takes the focus on mount — the popup has just opened. */
|
|
85
117
|
autoFocus?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* `month` is the month a server drew, and moves on to the reader's own in
|
|
120
|
+
* the render after hydration ends. An inline Calendar with no month of its
|
|
121
|
+
* own does that; the tab stop waits for the month it moves to rather than
|
|
122
|
+
* settling on the 1st of the one about to leave the screen.
|
|
123
|
+
*/
|
|
124
|
+
monthFromClock?: boolean;
|
|
86
125
|
/**
|
|
87
126
|
* More than one cell can be selected at once — a `multiple` calendar or a
|
|
88
127
|
* range — which a screen reader is told on the grid a pick is made in.
|
|
@@ -114,7 +153,7 @@ export interface CalendarProps {
|
|
|
114
153
|
* grid instead of walking forty-two cells — the pattern the ARIA date-picker
|
|
115
154
|
* practice describes, and the reason none of the cells is a `disabled` button.
|
|
116
155
|
*/
|
|
117
|
-
export declare function Calendar({ size, color, locale: callerLocale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, multiselectable, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
|
|
156
|
+
export declare function Calendar({ size, color, locale: callerLocale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, monthFromClock, multiselectable, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
|
|
118
157
|
export type { TimeUnit };
|
|
119
158
|
export interface TimeGridProps {
|
|
120
159
|
size: NebaSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{useLayoutEffectOnClient as o}from"./layout-effect.js";import{Button as l}from"../components/button/Button.js";import{ChevronIcon as a}from"./icons.js";import{controlHeightClasses as s,controlTextClasses as i,cx as c,gapClasses as d,metaTextClasses as u,pressTransitionClasses as m,srOnlyClasses as h,transitionClasses as f}from"./styles.js";import{addDays as g,addMonths as b,addYears as p,calendarWeeks as y,compareDay as v,isDayOutside as x,isMonthBeforeYear as w,isSameDay as D,isSameMonth as N,isUnitOutside as S,isValidDate as M,makeDate as C,meridiemLabels as k,monthLabels as z,startOfDay as P,startOfMonth as A,today as j,weekdayLabels as Y,withTime as B,YEAR_PAGE_SIZE as E,yearPageStart as F}from"./date.js";import{dateFormatter as T}from"./format.js";import{pickerMessages as H,useMessages as R}from"./i18n.js";import{useHydrated as I,useIntlLocale as K}from"./media.js";export function usePickerLabels(e,t){const n=R(H,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}const G={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},O={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},U={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},q={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},$=["neba-calendar-cell relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,m,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:i=!1,disabled:d=!1,focused:u=!1,size:m,className:h,onClick:f,onPointerEnter:g,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":d||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:c($,"start"===a?U[m]:"end"===a?q[m]:"middle"===a?"rounded-none":O[m],d?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":i?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{d||f()},onPointerEnter:g,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:o,view:u,month:m,locale:f,labels:g,showPreviousButton:b,showNextButton:p,captionId:y,onStep:v,onViewChange:x}){const D=z(f,"long")[m.getMonth()],N=String(m.getFullYear()),S=w(f),M=F(m.getFullYear()),C=`${M}–${M+E-1}`,k="day"===u?[g.previousMonth,g.nextMonth]:"month"===u?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],P=(t,n)=>n?e(l,{variant:"text",size:r,color:o,density:"compact","aria-label":k[-1===t?0:1],onClick:()=>v(t),startIcon:e("span",{className:c("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(a,{})})}):e("span",{"aria-hidden":"true",className:c(s[r],"w-(--n-cell)")}),A=t=>e("span",{className:c("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(a,{})}),j=e(l,{variant:"text",size:r,color:o,density:"compact","aria-describedby":`${y}-month`,"aria-expanded":"month"===u,onClick:()=>x("month"===u?"day":"month"),endIcon:A("month"===u),children:D},"month"),Y=e(l,{variant:"text",size:r,color:o,density:"compact",className:"tabular-nums","aria-describedby":`${y}-year`,"aria-expanded":"year"===u,onClick:()=>x("year"===u?"day":"year"),endIcon:A("year"===u),children:N},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:y,className:h,"aria-live":"polite",children:"day"===u?T(f,{year:"numeric",month:"long"}).format(m):"month"===u?N:C}),e("span",{id:`${y}-month`,hidden:!0,children:g.chooseMonth}),e("span",{id:`${y}-year`,hidden:!0,children:g.chooseYear}),P(-1,b),e("div",{className:c("flex min-w-0 flex-1 items-center justify-center",d[r]),children:"year"===u?e("span",{className:c("flex items-center font-medium tabular-nums text-(--neba-fg)",s[r],i[r]),children:C}):"month"===u?Y:t(n,S?{children:[j,Y]}:{children:[Y,j]})}),P(1,p)]})}const L={day:0,month:1,year:2};export function Calendar({size:n,color:l,locale:a,weekStartsOn:s,month:i,onMonthChange:u,selected:m,rangeStart:h=null,rangeEnd:f=null,onSelect:g,granularity:y="day",renderDay:v,onPreviewChange:w,minDate:S,maxDate:k,shouldDisableDate:z,showOutsideDays:Y=!0,autoFocus:B=!1,multiselectable:F=!1,showPreviousButton:T=!0,showNextButton:H=!0,labels:R,className:O}){const U=K(a),q=r.useId(),[$,_]=r.useState(y),V=L[$]<L[y]?y:$,J=r.useMemo(()=>m.filter(M),[m]),Q=I(),[W,X]=r.useState(()=>{const e=J.find(e=>N(e,i));return e?P(e):Q&&N(j(),i)?j():A(i)}),Z=r.useRef(!Q);r.useEffect(()=>{Q&&Z.current&&(Z.current=!1,X(e=>D(e,A(i))&&N(j(),i)&&!J.some(e=>N(e,i))?j():e))},[Q]);const ee=r.useRef(B),te=r.useRef(null);r.useEffect(()=>{X(e=>N(e,i)?e:A(i))},[i]),o(()=>{ee.current&&(ee.current=!1,te.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const ne=r.useCallback(e=>x(e,S,k)||(z?.(e)??!1),[S,k,z]),re=e=>{ee.current=!0,_(e)},oe=e=>{ee.current=!0,u(e)};return t("div",{ref:te,className:c("flex flex-col",d[n],O),style:{"--n-cell":G[n]},onPointerLeave:()=>w?.(null),children:[e(Header,{size:n,color:l,view:V,month:i,locale:U,labels:R,showPreviousButton:T,showNextButton:H,captionId:q,onStep:e=>{u("day"===V?b(i,e):p(i,"month"===V?e:e*E))},onViewChange:re}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===V?e(DayGrid,{labelledBy:q,multiselectable:F&&"day"===y,size:n,locale:U,weekStartsOn:s,month:i,chosen:J,rangeStart:h,rangeEnd:f,focusedDate:W,renderDay:v,showOutsideDays:Y,isDisabled:ne,onSelect:e=>{X(e),g(e)},onPreviewChange:w,onMoveFocus:e=>{ee.current=!0,X(e),N(e,i)||u(A(e))}}):"month"===V?e(MonthGrid,{labelledBy:q,multiselectable:F&&"month"===y,size:n,locale:U,month:i,chosen:J,minDate:S,maxDate:k,shouldDisable:"month"===y?z:void 0,onMoveCursor:oe,onPick:e=>{const t=C(i.getFullYear(),e,1);u(t),"month"===y?g(t):(X(e=>N(e,t)?e:t),re("day"))}}):e(YearGrid,{labelledBy:q,multiselectable:F&&"year"===y,size:n,month:i,chosen:J,minDate:S,maxDate:k,shouldDisable:"year"===y?z:void 0,onMoveCursor:oe,onPick:e=>{if("year"===y){const t=C(e,0,1);return u(t),void g(t)}u(C(e,i.getMonth(),1)),re("month")}})})]})}function _(e){return"rtl"===getComputedStyle(e).direction}function DayGrid({labelledBy:n,multiselectable:r,size:o,locale:l,weekStartsOn:a,month:s,chosen:d,rangeStart:m,rangeEnd:h,focusedDate:f,renderDay:p,showOutsideDays:x,isDisabled:w,onSelect:S,onPreviewChange:C,onMoveFocus:k}){const z=y(s,a),P=Y(l,a,"short"),A=Y(l,a,"long"),B=T(l,{dateStyle:"full"}),E=(H=h,M(F=m)&&M(H)?v(F,H)<=0?[F,H]:[H,F]:null);var F,H;const R=I()?j():null;return t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":r||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":A[n],className:c("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",u[o]),children:t},n))}),z.map((n,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:n.map(n=>{const r=!N(n,s);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},n.getTime());const l=d.some(e=>D(e,n)),u=null!==E&&v(n,E[0])>=0&&v(n,E[1])<=0,m=null!==E&&u&&D(n,E[0]),h=null!==E&&u&&D(n,E[1]);return t(Cell,{size:o,label:B.format(n),selected:l,inRange:u&&!l,rangeEdge:u?m&&h?"both":m?"start":h?"end":"middle":null,current:null!==R&&D(n,R),muted:r,disabled:w(n),focused:D(n,f),className:c("size-(--n-cell)",i[o]),onClick:()=>S(n),onPointerEnter:()=>C?.(n),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-a+7)%7,r=_(e.currentTarget)?-1:1,o={ArrowLeft:()=>g(t,-r),ArrowRight:()=>g(t,r),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>b(t,e.shiftKey?-12:-1),PageDown:()=>b(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),k(o()))})(e,n),children:[n.getDate(),p?p(n):null]},n.getTime())})},r))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:s,maxDate:d,shouldDisable:u,onMoveCursor:m,onPick:h}){const f=z(o,"short"),g=T(o,{year:"numeric",month:"long"}),p=l.getFullYear(),y=I()?new Date:null,v=e=>{const t=_(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(b(A(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=C(p,o,1);return e(Cell,{size:r,label:g.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==y&&y.getFullYear()===p&&y.getMonth()===o,disabled:S(m,"month",s,d)||(u?.(m)??!1),focused:o===l.getMonth(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>h(o),onKeyDown:v,children:f[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:s,shouldDisable:d,onMoveCursor:u,onPick:m}){const h=F(o.getFullYear()),f=I()?(new Date).getFullYear():null,g=e=>{const t=_(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==n&&(e.preventDefault(),u(p(A(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const u=h+4*t+n,b=C(u,0,1);return e(Cell,{size:r,label:String(u),selected:l.some(e=>e.getFullYear()===u),current:u===f,disabled:S(b,"year",a,s)||(d?.(b)??!1),focused:u===o.getFullYear(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>m(u),onKeyDown:g,children:u},u)})},t))})}function V(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:a,referenceDate:d,onChange:u,hour12:m,showSeconds:f,hourStep:g,minuteStep:b,secondStep:p,shouldDisableTime:y,autoFocus:v=!1,labels:x,className:w}){const D=K(l),N=a??d,S=r.useRef(null),[M,C]=r.useMemo(()=>k(D),[D]);r.useEffect(()=>{const e=S.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(V),v){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const z=r.useMemo(()=>{const e=Math.ceil((m?12:24)/g),t=Array.from({length:e},(e,t)=>t*g);return m?t.map(e=>0===e?12:e):t},[m,g]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),A=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),j=e=>String(e).padStart(2,"0"),Y=m?N.getHours()%12||12:N.getHours(),E=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),V(o)},F=(t,r,o,l,d)=>{const h=Math.max(0,null===a?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:E,className:c("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const f=((e,t)=>B(N,"hour"===e?{hours:m?t%12+(N.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:N.getHours()%12+12*t}))(t,r),g=null!==a&&l(r),b=y?.(f,t)??!1;return e("button",{type:"button",role:"option","aria-selected":g,"aria-disabled":b||void 0,"data-chosen":g?"true":void 0,tabIndex:o===h?0:-1,className:c($,O[n],s[n],i[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":g?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||u(f)},children:d(r)},r)})},t)};return t("div",{ref:S,className:c("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":G[n]},children:[F("hour",x.hour,z,e=>e===Y,e=>m?String(e):j(e)),F("minute",x.minute,P,e=>e===N.getMinutes(),j),f?F("second",x.second,A,e=>e===N.getSeconds(),j):null,m?F("meridiem",x.meridiem,[0,1],e=>(N.getHours()>=12?1:0)===e,e=>0===e?M:C):null,e("span",{className:h,"aria-live":"polite",children:null===a?"":T(D,{hour:"numeric",minute:"2-digit",...f?{second:"2-digit"}:{}}).format(a)})]})}
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{useLayoutEffectOnClient as o}from"./layout-effect.js";import{Button as l}from"../components/button/Button.js";import{ChevronIcon as a}from"./icons.js";import{controlHeightClasses as s,controlTextClasses as i,cx as c,gapClasses as u,metaTextClasses as d,pressTransitionClasses as m,srOnlyClasses as h,transitionClasses as f}from"./styles.js";import{addDays as g,addMonths as b,addYears as p,calendarWeeks as v,compareDay as y,displaySamples as x,isDayOutside as w,isMonthBeforeYear as D,isSameDay as S,isSameMonth as N,isUnitOutside as k,isValidDate as M,makeDate as C,meridiemLabels as z,monthLabels as P,startOfDay as A,startOfMonth as E,today as j,weekdayLabels as R,withTime as Y,YEAR_PAGE_SIZE as F,yearPageStart as B}from"./date.js";import{dateFormatter as T}from"./format.js";import{pickerMessages as H,useMessages as I}from"./i18n.js";import{HYDRATION_LOCALE as K,useHydrated as O,useIntlLocale as $}from"./media.js";export function usePickerLabels(e,t){const n=I(H,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}export function askOnEveryRender(e){return e?t=>e(t):void 0}export function usePickerSamples(e,t){const n=$(e),o=O(),[l]=r.useState(()=>!o),a=x(n,t),s=l&&o&&void 0===e?x(K,t):null;return r.useMemo(()=>null===s?a:[...new Set([...s,...a])],[s,a])}const G={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},U={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},q={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},L={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},V=`neba-calendar-cell relative flex select-none items-center justify-center tabular-nums [-webkit-tap-highlight-color:transparent] [touch-action:manipulation] ${f} ${m} focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]`;function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:i=!1,disabled:u=!1,focused:d=!1,size:m,className:h,onClick:f,onPointerEnter:g,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":u||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:c(V,"start"===a?q[m]:"end"===a?L[m]:"middle"===a?"rounded-none":U[m],u?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":i?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{u||f()},onPointerEnter:g,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}const _=/*@__PURE__*/r.memo(function Header({size:r,color:o,view:d,month:m,locale:f,labels:g,showPreviousButton:b,showNextButton:p,captionId:v,actions:y}){const x=P(f,"long")[m.getMonth()],w=String(m.getFullYear()),S=D(f),N=B(m.getFullYear()),k=`${N}–${N+F-1}`,M="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],C=(t,n)=>n?e(l,{variant:"text",size:r,color:o,density:"compact","aria-label":M[-1===t?0:1],onClick:()=>y.current.step(t),startIcon:e("span",{className:c("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(a,{})})}):e("span",{"aria-hidden":"true",className:c(s[r],"w-(--n-cell)")}),z=t=>e("span",{className:c("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(a,{})}),A=e(l,{variant:"text",size:r,color:o,density:"compact","aria-describedby":`${v}-month`,"aria-expanded":"month"===d,onClick:()=>y.current.changeView("month"===d?"day":"month"),endIcon:z("month"===d),children:x},"month"),E=e(l,{variant:"text",size:r,color:o,density:"compact",className:"tabular-nums","aria-describedby":`${v}-year`,"aria-expanded":"year"===d,onClick:()=>y.current.changeView("year"===d?"day":"year"),endIcon:z("year"===d),children:w},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:v,className:h,"aria-live":"polite",children:"day"===d?T(f,{year:"numeric",month:"long"}).format(m):"month"===d?w:k}),e("span",{id:`${v}-month`,hidden:!0,children:g.chooseMonth}),e("span",{id:`${v}-year`,hidden:!0,children:g.chooseYear}),C(-1,b),e("div",{className:c("flex min-w-0 flex-1 items-center justify-center",u[r]),children:"year"===d?e("span",{className:c("flex items-center font-medium tabular-nums text-(--neba-fg)",s[r],i[r]),children:k}):"month"===d?E:t(n,S?{children:[A,E]}:{children:[E,A]})}),C(1,p)]})}),J={day:0,month:1,year:2};export function Calendar({size:n,color:l,locale:a,weekStartsOn:s,month:i,onMonthChange:d,selected:m,rangeStart:h=null,rangeEnd:f=null,onSelect:g,granularity:v="day",renderDay:y,onPreviewChange:x,minDate:D,maxDate:k,shouldDisableDate:z,showOutsideDays:P=!0,autoFocus:R=!1,monthFromClock:Y=!1,multiselectable:B=!1,showPreviousButton:T=!0,showNextButton:H=!0,labels:I,className:K}){const U=$(a),q=r.useId(),[L,V]=r.useState(v),Q=J[L]<J[v]?v:L,W=r.useMemo(()=>m.filter(M),[m]),X=O(),[Z,ee]=r.useState(()=>{const e=W.find(e=>N(e,i));return e?A(e):X&&N(j(),i)?j():E(i)}),te=r.useRef(!X),ne=r.useRef(!1);r.useEffect(()=>{X&&te.current&&(te.current=!1,ne.current=Y&&!N(j(),i),ee(e=>S(e,E(i))&&N(j(),i)&&!W.some(e=>N(e,i))?j():e))},[X]);const re=r.useRef(R),oe=r.useRef(null);r.useEffect(()=>{const e=ne.current;ne.current=!1,ee(t=>N(t,i)?t:e&&N(j(),i)?j():E(i))},[i]),o(()=>{re.current&&(re.current=!1,oe.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const le=r.useCallback(e=>w(e,D,k)||(z?.(e)??!1),[D,k,z]),ae=e=>{d("day"===Q?b(i,e):p(i,"month"===Q?e:e*F))},se=e=>{re.current=!0,V(e)},ie=e=>{re.current=!0,d(e)},ce=r.useRef({step:ae,changeView:se});return o(()=>{ce.current={step:ae,changeView:se}}),t("div",{ref:oe,className:c("flex flex-col",u[n],K),style:{"--n-cell":G[n]},onPointerLeave:()=>x?.(null),children:[e(_,{size:n,color:l,view:Q,month:i,locale:U,labels:I,showPreviousButton:T,showNextButton:H,captionId:q,actions:ce}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===Q?e(DayGrid,{labelledBy:q,multiselectable:B&&"day"===v,size:n,locale:U,weekStartsOn:s,month:i,chosen:W,rangeStart:h,rangeEnd:f,focusedDate:Z,renderDay:y,showOutsideDays:P,isDisabled:le,onSelect:e=>{ee(e),g(e)},onPreviewChange:x,onMoveFocus:e=>{re.current=!0,ee(e),N(e,i)||d(E(e))}}):"month"===Q?e(MonthGrid,{labelledBy:q,multiselectable:B&&"month"===v,size:n,locale:U,month:i,chosen:W,minDate:D,maxDate:k,shouldDisable:"month"===v?z:void 0,onMoveCursor:ie,onPick:e=>{const t=C(i.getFullYear(),e,1);d(t),"month"===v?g(t):(ee(e=>N(e,t)?e:t),se("day"))}}):e(YearGrid,{labelledBy:q,multiselectable:B&&"year"===v,size:n,month:i,chosen:W,minDate:D,maxDate:k,shouldDisable:"year"===v?z:void 0,onMoveCursor:ie,onPick:e=>{if("year"===v){const t=C(e,0,1);return d(t),void g(t)}d(C(e,i.getMonth(),1)),se("month")}})})]})}function Q(e){return"rtl"===getComputedStyle(e).direction}const W=/*@__PURE__*/r.memo(function DayCell({date:e,extra:n,actions:r,label:o,selected:l,inRange:a,rangeEdge:s,current:u,muted:d,disabled:m,focused:h,size:f}){return t(Cell,{label:o,selected:l,inRange:a,rangeEdge:s,current:u,muted:d,disabled:m,focused:h,size:f,className:c("size-(--n-cell)",i[f]),onClick:()=>r.current.select(e),onPointerEnter:()=>r.current.preview(e),onKeyDown:t=>r.current.keyDown(t,e),children:[e.getDate(),n]})});function DayGrid({labelledBy:n,multiselectable:l,size:a,locale:s,weekStartsOn:i,month:u,chosen:m,rangeStart:h,rangeEnd:f,focusedDate:p,renderDay:x,showOutsideDays:w,isDisabled:D,onSelect:k,onPreviewChange:C,onMoveFocus:z}){const P=R(s,i,"short"),A=R(s,i,"long"),E=(F=f,M(Y=h)&&M(F)?y(Y,F)<=0?[Y,F]:[F,Y]:null);var Y,F;const B=O()?j():null,H=u.getTime(),I=r.useMemo(()=>{const e=T(s,{dateStyle:"full"}),t=new Date(H);return v(t,i).map(n=>n.map(n=>{const r=!N(n,t),o=r&&!w;return{date:n,outside:r,hole:o,label:o?"":e.format(n),disabled:!o&&D(n)}}))},[H,i,s,w,D]),K=(e,t)=>{const n=(t.getDay()-i+7)%7,r=Q(e.currentTarget)?-1:1,o={ArrowLeft:()=>g(t,-r),ArrowRight:()=>g(t,r),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>b(t,e.shiftKey?-12:-1),PageDown:()=>b(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),z(o()))},$=r.useRef({select:k,preview:e=>C?.(e),keyDown:K});return o(()=>{$.current={select:k,preview:e=>C?.(e),keyDown:K}}),t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":l||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":A[n],className:c("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",d[a]),children:t},n))}),I.map((t,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,outside:n,hole:r,label:o,disabled:l})=>{if(r)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},t.getTime());const s=m.some(e=>S(e,t)),i=null!==E&&y(t,E[0])>=0&&y(t,E[1])<=0,c=null!==E&&i&&S(t,E[0]),u=null!==E&&i&&S(t,E[1]);return e(W,{date:t,size:a,label:o,selected:s,inRange:i&&!s,rangeEdge:i?c&&u?"both":c?"start":u?"end":"middle":null,current:null!==B&&S(t,B),muted:n,disabled:l,focused:S(t,p),extra:x?x(t):null,actions:$},t.getTime())})},n))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:s,maxDate:u,shouldDisable:d,onMoveCursor:m,onPick:h}){const f=P(o,"short"),g=T(o,{year:"numeric",month:"long"}),p=l.getFullYear(),v=O()?new Date:null,y=e=>{const t=Q(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(b(E(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=C(p,o,1);return e(Cell,{size:r,label:g.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==v&&v.getFullYear()===p&&v.getMonth()===o,disabled:k(m,"month",s,u)||(d?.(m)??!1),focused:o===l.getMonth(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>h(o),onKeyDown:y,children:f[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:s,shouldDisable:u,onMoveCursor:d,onPick:m}){const h=B(o.getFullYear()),f=O()?(new Date).getFullYear():null,g=e=>{const t=Q(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==n&&(e.preventDefault(),d(p(E(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const d=h+4*t+n,b=C(d,0,1);return e(Cell,{size:r,label:String(d),selected:l.some(e=>e.getFullYear()===d),current:d===f,disabled:k(b,"year",a,s)||(u?.(b)??!1),focused:d===o.getFullYear(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>m(d),onKeyDown:g,children:d},d)})},t))})}function X(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:a,referenceDate:u,onChange:d,hour12:m,showSeconds:f,hourStep:g,minuteStep:b,secondStep:p,shouldDisableTime:v,autoFocus:y=!1,labels:x,className:w}){const D=$(l),S=a??u,N=r.useRef(null),[k,M]=r.useMemo(()=>z(D),[D]);r.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(X),y){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[y]);const C=r.useMemo(()=>{const e=Math.ceil((m?12:24)/g),t=Array.from({length:e},(e,t)=>t*g);return m?t.map(e=>0===e?12:e):t},[m,g]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),A=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),E=e=>String(e).padStart(2,"0"),j=m?S.getHours()%12||12:S.getHours(),R=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),X(o)},F=(t,r,o,l,u)=>{const h=Math.max(0,null===a?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:R,className:c("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const f=((e,t)=>Y(S,"hour"===e?{hours:m?t%12+(S.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:S.getHours()%12+12*t}))(t,r),g=null!==a&&l(r),b=v?.(f,t)??!1;return e("button",{type:"button",role:"option","aria-selected":g,"aria-disabled":b||void 0,"data-chosen":g?"true":void 0,tabIndex:o===h?0:-1,className:c(V,U[n],s[n],i[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":g?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||d(f)},children:u(r)},r)})},t)};return t("div",{ref:N,className:c("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":G[n]},children:[F("hour",x.hour,C,e=>e===j,e=>m?String(e):E(e)),F("minute",x.minute,P,e=>e===S.getMinutes(),E),f?F("second",x.second,A,e=>e===S.getSeconds(),E):null,m?F("meridiem",x.meridiem,[0,1],e=>(S.getHours()>=12?1:0)===e,e=>0===e?k:M):null,e("span",{className:h,"aria-live":"polite",children:null===a?"":T(D,{hour:"numeric",minute:"2-digit",...f?{second:"2-digit"}:{}}).format(a)})]})}
|