neba 1.12.0 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +43 -41
- package/dist/components/accordion/Accordion.d.ts +18 -0
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-marquee/AnimateMarquee.d.ts +5 -3
- package/dist/components/animate-marquee/AnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/AnimateScramble.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/bottom-navigation/BottomNavigation.d.ts +10 -0
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/calendar/Calendar.js +1 -1
- package/dist/components/carousel/Carousel.d.ts +13 -0
- package/dist/components/carousel/Carousel.js +1 -1
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +18 -0
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/data-table/DataTable.js +1 -1
- 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/drawer/Drawer.js +1 -1
- package/dist/components/gauge-chart/GaugeChart.js +1 -1
- package/dist/components/grid/Grid.d.ts +11 -1
- package/dist/components/grid/Grid.js +1 -1
- package/dist/components/hover-card/HoverCard.js +1 -1
- package/dist/components/image/Image.d.ts +32 -4
- package/dist/components/image/Image.js +1 -1
- package/dist/components/menu/Menu.js +1 -1
- package/dist/components/meter/Meter.d.ts +7 -0
- package/dist/components/meter/Meter.js +1 -1
- package/dist/components/navigation-menu/NavigationMenu.js +1 -1
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/otp-field/OtpField.js +1 -1
- package/dist/components/overlay/Overlay.js +1 -1
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/progress-circular/ProgressCircular.d.ts +10 -1
- package/dist/components/progress-circular/ProgressCircular.js +1 -1
- package/dist/components/progress-linear/ProgressLinear.d.ts +7 -1
- package/dist/components/progress-linear/ProgressLinear.js +1 -1
- package/dist/components/provider/NebaProvider.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.d.ts +8 -7
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/select/Select.d.ts +13 -0
- package/dist/components/select/Select.js +1 -1
- package/dist/components/slider/Slider.d.ts +37 -2
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/tabs/Tabs.d.ts +18 -0
- package/dist/components/tabs/Tabs.js +1 -1
- package/dist/components/text-field/TextField.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.js +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.d.ts +2 -0
- package/dist/components/tree-select/TreeSelect.js +1 -1
- package/dist/components/typography/Typography.js +1 -1
- package/dist/internal/cache.d.ts +24 -0
- package/dist/internal/cache.js +1 -0
- package/dist/internal/calendar.d.ts +15 -42
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +16 -3
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/date.js +1 -1
- package/dist/internal/drag.d.ts +8 -6
- package/dist/internal/drag.js +1 -1
- package/dist/internal/format.d.ts +21 -7
- package/dist/internal/format.js +1 -1
- package/dist/internal/grid.d.ts +16 -0
- package/dist/internal/grid.js +1 -1
- package/dist/internal/i18n.d.ts +72 -0
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/icons.d.ts +25 -0
- package/dist/internal/icons.js +1 -1
- package/dist/internal/link.d.ts +5 -4
- package/dist/internal/media.js +1 -1
- package/dist/internal/observe.js +1 -1
- package/dist/internal/picker.d.ts +8 -3
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +24 -1
- package/dist/internal/progress.js +1 -1
- package/dist/internal/styles.d.ts +73 -3
- package/dist/internal/styles.js +1 -1
- package/dist/internal/text.d.ts +0 -10
- package/dist/internal/text.js +1 -1
- package/dist/internal/wheel.d.ts +38 -0
- package/dist/internal/wheel.js +1 -0
- package/dist/locales/ar.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/hi.js +1 -1
- package/dist/locales/id.js +1 -1
- package/dist/locales/it.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/nl.js +1 -1
- package/dist/locales/pl.js +1 -1
- package/dist/locales/pt.js +1 -1
- package/dist/locales/ru.js +1 -1
- package/dist/locales/th.js +1 -1
- package/dist/locales/tr.js +1 -1
- package/dist/locales/vi.js +1 -1
- package/dist/locales/zh-hans.js +1 -1
- package/dist/locales/zh-hant.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +131 -6
- package/package.json +2 -2
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Slider as BaseUISlider } from '@base-ui/react/slider';
|
|
3
|
-
import type { NebaColor, NebaOrientation, NebaSize } from '../../types.js';
|
|
3
|
+
import type { NebaColor, NebaFieldSlot, NebaOrientation, NebaSize, NebaSlots } from '../../types.js';
|
|
4
4
|
type BaseSliderProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISlider.Root>, 'className' | 'style' | 'render' | 'children' | 'orientation'>;
|
|
5
|
+
/**
|
|
6
|
+
* The parts a Slider draws behind its root.
|
|
7
|
+
*
|
|
8
|
+
* `control` is the whole strip a press lands on, which is deliberately taller
|
|
9
|
+
* than the `track` drawn inside it. There is no `error`: a slider always has a
|
|
10
|
+
* value in range, so there is nothing for one to say.
|
|
11
|
+
*/
|
|
12
|
+
export type SliderSlot = Exclude<NebaFieldSlot, 'error'> | 'track' | 'indicator' | 'thumb' | 'mark';
|
|
13
|
+
/** One labelled point on the track. */
|
|
14
|
+
export interface SliderMark {
|
|
15
|
+
/** Where it sits, in the slider's own units. */
|
|
16
|
+
value: number;
|
|
17
|
+
/** What is written under it. A mark with no label is a tick on its own. */
|
|
18
|
+
label?: React.ReactNode;
|
|
19
|
+
}
|
|
5
20
|
export interface SliderProps extends BaseSliderProps {
|
|
6
21
|
/** @default 'md' */
|
|
7
22
|
size?: NebaSize;
|
|
@@ -23,8 +38,28 @@ export interface SliderProps extends BaseSliderProps {
|
|
|
23
38
|
* @default false
|
|
24
39
|
*/
|
|
25
40
|
showValue?: boolean | ((formatted: readonly string[], values: readonly number[]) => React.ReactNode);
|
|
26
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* Points named along the track: `1 / 100 / 250 / 500` under a count, or
|
|
43
|
+
* "realistic" and "abstract" at the two ends of a style axis.
|
|
44
|
+
*
|
|
45
|
+
* An array is the marks, each at its own `value`, and a mark with no `label`
|
|
46
|
+
* is a tick on its own. `true` is a tick at every `step`, which is worth
|
|
47
|
+
* pairing with a step you chose — the default `step={1}` over the default
|
|
48
|
+
* range is a hundred of them.
|
|
49
|
+
*
|
|
50
|
+
* A mark is read by the eye and not by a screen reader: the value is already
|
|
51
|
+
* announced by the thumb, and a second reading of the same numbers is noise.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
marks?: boolean | readonly SliderMark[];
|
|
55
|
+
/** Class names for the root: the column holding the label, the strip and the
|
|
56
|
+
* line under it. The parts behind it are `classNames`. */
|
|
27
57
|
className?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Class names for the parts behind the root — the strip, the rail, the fill,
|
|
60
|
+
* a thumb, a mark.
|
|
61
|
+
*/
|
|
62
|
+
classNames?: NebaSlots<SliderSlot>;
|
|
28
63
|
style?: React.CSSProperties;
|
|
29
64
|
}
|
|
30
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as s}from"@base-ui/react/slider";import{cx as r,
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Slider as s}from"@base-ui/react/slider";import{cx as r,hasContent as n,metaTextClasses as t,surfaceClasses as o,transitionClasses as i}from"../../internal/styles.js";import{WidthSizer as c}from"../../internal/sizer.js";import{useStyleDefaults as m}from"../../internal/defaults.js";const u={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},f={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},d={xs:"size-3",sm:"size-3.5",md:"size-4",lg:"size-5",xl:"size-6"},h={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},b={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},x=`rounded-full bg-(--n-fill) ${i}`,p=["rounded-full border bg-(--neba-surface)",o,"[border-color:var(--n-line-hover)]","[box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]","cursor-grab select-none active:cursor-grabbing",i,"hover:[box-shadow:var(--neba-shadow-2),0_0_0_4px_var(--n-soft)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[dragging]:[box-shadow:var(--neba-shadow-1),0_0_0_6px_var(--n-soft-hover)]"].join(" ");function v(e,l,a,s){const r=(e.value-l)/(a-l)*100;return s?{insetBlockEnd:`${r}%`}:{insetInlineStart:`${r}%`}}export const Slider=/*@__PURE__*/a.forwardRef(function(o,i){const{size:g="md",color:w="primary",orientation:N="horizontal",label:$,description:y,showValue:_=!1,marks:z=!1,disabled:j=!1,classNames:k,min:A=0,max:S=100,step:V=1,className:I,style:M,...R}=m(o,["size"]),T="vertical"===N,B=a.useMemo(()=>!0===z?function(e,l,a){const s=l-e;if(!(a>0)||!(s>0)||s/a>100)return[];const r=Math.floor(s/a);return Array.from({length:r+1},(l,s)=>({value:e+s*a}))}(A,S,V):!1===z?[]:[...z],[z,A,S,V]),C={"--n-fill":`var(--neba-${w}-fill)`,"--n-accent":`var(--neba-${w}-accent)`,"--n-soft":`var(--neba-${w}-soft)`,"--n-soft-hover":`var(--neba-${w}-soft-hover)`,"--n-line-hover":`var(--neba-${w}-line-hover)`,"--n-ring":`var(--neba-${w}-ring)`},E=R.value??R.defaultValue,L=Array.isArray(E)?E.length:1,q=e(s.Control,{className:r("flex touch-none select-none items-center justify-center",T?`${b[g]} h-full flex-col`:`w-full ${h[g]}`,k?.control),children:l(s.Track,{className:r("rounded-full bg-(--n-soft)",T?`${f[g]} h-full`:`${u[g]} w-full`,k?.track),children:[e(s.Indicator,{className:r(x,k?.indicator)}),Array.from({length:L},(l,a)=>e(s.Thumb,{index:a,className:r(p,d[g],k?.thumb)},a))]})}),D=B.some(e=>n(e.label)),F=B.length>0?l("div",{"aria-hidden":"true",className:r("relative",t[g],T?"h-full ps-3":D?"h-[calc(1lh+0.375rem)] w-full":"h-1.5 w-full"),children:[B.map((a,s)=>l("span",{className:r("absolute flex text-(--neba-muted-fg)",T?"start-0 h-0 items-center gap-1.5":"top-0 w-0 flex-col items-center",k?.mark),style:v(a,A,S,T),children:[e("span",{className:r("shrink-0 rounded-full bg-(--neba-border)",T?"h-px w-1.5":"h-1.5 w-px")}),n(a.label)?e("span",{className:"whitespace-nowrap",children:a.label}):null]},`${a.value}:${s}`)),T?e(c,{samples:B.filter(e=>n(e.label)).map(e=>e.label)}):null]}):null;return l(s.Root,{ref:i,orientation:N,disabled:j,className:r("flex",T?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",j?"[filter:saturate(0.25)] opacity-70 [&_*]:cursor-not-allowed":"",I??""),style:{...C,...M},min:A,max:S,step:V,...R,children:[$||_?l("div",{className:`flex w-full items-baseline gap-2 ${t[g]}`,children:[$?e(s.Label,{className:r("font-medium",j?"text-(--neba-disabled-fg)":"text-(--neba-fg)",k?.label),children:$}):null,_?e(s.Value,{className:"ms-auto tabular-nums text-(--neba-muted-fg)",children:"function"==typeof _?_:null}):null]}):null,T?l("div",{className:"flex h-40 items-stretch",children:[q,F]}):q,T?null:F,y?e("div",{className:r(t[g],"text-(--neba-muted-fg)",k?.description),children:y}):null]})});
|
|
@@ -69,6 +69,24 @@ export interface TabsProps extends Omit<NebaStyleProps, 'variant'>, Omit<React.C
|
|
|
69
69
|
* definition. Left out, a wrapping bar takes every line it needs.
|
|
70
70
|
*/
|
|
71
71
|
lines?: number;
|
|
72
|
+
/**
|
|
73
|
+
* Turns a wheel rolled over the bar into travel along it, and holds it there
|
|
74
|
+
* while the pointer is over a bar that has somewhere to go.
|
|
75
|
+
*
|
|
76
|
+
* On by default, which is the opposite of the same prop on `ScrollZone`, and
|
|
77
|
+
* for the one reason that separates them: a ScrollZone draws a pair of
|
|
78
|
+
* buttons and a tab bar draws none. Its scrollbar is hidden too, so a wheel
|
|
79
|
+
* the page answers instead leaves the tabs past the edge reachable only by
|
|
80
|
+
* keyboard.
|
|
81
|
+
*
|
|
82
|
+
* A bar that fits takes nothing, so this costs a page with three tabs on it
|
|
83
|
+
* nothing at all. What it does take it keeps at the ends as well, rather than
|
|
84
|
+
* letting a flick that runs out of bar become a jump down the article; moving
|
|
85
|
+
* the pointer off the bar is what gives the page its wheel back. A trackpad
|
|
86
|
+
* swiping sideways is left to the browser, which scrolls it better.
|
|
87
|
+
* @default true
|
|
88
|
+
*/
|
|
89
|
+
wheel?: boolean;
|
|
72
90
|
/** The tabs share the bar's full width, each taking an equal share of it. */
|
|
73
91
|
fullWidth?: boolean;
|
|
74
92
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as l,controlHeightValues as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as l,controlHeightValues as n,controlTextClasses as i,cx as r,gapClasses as s,hasContent as c,iconClasses as d,paddingXClasses as f,radiusClasses as u,surfaceClasses as b,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{observeResize as p}from"../../internal/observe.js";import{bindAxisWheel as x}from"../../internal/wheel.js";const m=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),w={solid:{horizontal:`${b} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${b} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},g={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},y={horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-b-2 [border-color:var(--n-accent)] !bg-transparent",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) border-e-2 [border-color:var(--n-accent)] !bg-transparent"},z={solid:`${b} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},N={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=/*@__PURE__*/a.forwardRef(function({value:n,startIcon:b,endIcon:h,disabled:p=!1,className:x,children:w,...g},y){const{variant:z,size:$,density:j,fullWidth:k}=a.useContext(m);return t(o.Tab,{ref:y,value:n,disabled:p,className:r("relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",l[$],i[$],s[$],f[j][$],"solid"===z?u[$]:"",v,d,N[z],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",k?"flex-1":"",x??""),...g,children:[c(b)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:b}):null,w,c(h)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:h}):null]})});export const TabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:l=!1,className:n,children:i,...r},s){const{size:c}=a.useContext(m);return e(o.Panel,{ref:s,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2","data-[starting-style]:opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]",u[c],n??""].filter(Boolean).join(" "),...r,children:i})});export const Tabs=/*@__PURE__*/a.forwardRef(function({variant:l="outline",size:i="md",color:s="primary",density:c="default",value:d,defaultValue:f,onValueChange:b,orientation:v="horizontal",activateOnFocus:N=!1,loopFocus:$=!0,overflow:j="scroll",lines:k,wheel:T=!0,fullWidth:C=!1,className:E,style:M,children:R,...W},_){const V="horizontal"===v,A="wrap"===j,F=a.useRef(null),L=a.useRef(null),P=a.useMemo(()=>({variant:l,size:i,density:c,orientation:v,fullWidth:C}),[l,i,c,v,C]),H=[],I=[];a.Children.forEach(R,e=>{a.isValidElement(e)&&e.type===TabPanel?I.push(e):null!=e&&!1!==e&&H.push(e)});const O=H.length;return a.useEffect(()=>{const e=L.current,t=F.current;if(!e||!t)return;const a=()=>{const a=Math.abs(V?e.scrollLeft:e.scrollTop),o=V?e.clientWidth:e.clientHeight,l=V?e.scrollWidth:e.scrollHeight,n=V?"x":"y",i=V?"y":"x";t.toggleAttribute(`data-overflow-${n}-start`,a>1),t.toggleAttribute(`data-overflow-${n}-end`,l-o-a>1),t.removeAttribute(`data-overflow-${i}-start`),t.removeAttribute(`data-overflow-${i}-end`)};a(),e.addEventListener("scroll",a,{passive:!0});const o=p(e,a);return()=>{e.removeEventListener("scroll",a),o()}},[V,O]),a.useEffect(()=>{const e=L.current;if(e&&T)return x(e)},[T]),e(m.Provider,{value:P,children:t(o.Root,{ref:e=>{F.current=e,"function"==typeof _?_(e):_&&(_.current=e)},value:d,defaultValue:f,onValueChange:e=>b?.(e),orientation:v,className:r("flex min-w-0","vertical"===v?"flex-row gap-4":"flex-col gap-4",E??""),style:{...h(s,0),...M},...W,children:[t(o.List,{ref:L,activateOnFocus:N,loopFocus:$,className:r("relative shrink-0",w[l][v],"solid"===l?u[i]:"",C&&"horizontal"===v?"w-full":"",A?"flex-wrap":V?"overflow-x-auto":"",A&&void 0!==k?V?"overflow-y-auto":"overflow-x-auto":"",!A&&V?"overflow-y-hidden":"","overscroll-contain","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","neba-scroll-fade"),style:{"--n-fade":"2rem",maxHeight:A&&void 0!==k?`calc(${n[i]} * ${Math.max(1,Math.round(k))}${"solid"===l?" + 0.5rem":""})`:void 0},children:[H,e(o.Indicator,{className:["pointer-events-none",A&&"solid"!==l?y[v]:g[l][v],z[l],"solid"===l?u[i]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),I]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as l}from"@base-ui/react/input";import{SpinnerIcon as s}from"../../internal/icons.js";import{controlTextLeadingClasses as a,cx as i,disabledClasses as o,fieldFocusTransitionClasses as c,fieldHeightClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as u,fieldRingClasses as p,gapClasses as f,iconClasses as x,metaTextClasses as h,paddingXClasses as b,radiusClasses as g,stackGapClasses as y,surfaceSlots as $,transitionClasses as w}from"../../internal/styles.js";import{keyHandler as N}from"../../internal/keys.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const j={xs:`${f.xs} ${g.xs} ${a.xs}`,sm:`${f.sm} ${g.sm} ${a.sm}`,md:`${f.md} ${g.md} ${a.md}`,lg:`${f.lg} ${g.lg} ${a.lg}`,xl:`${f.xl} ${g.xl} ${a.xl}`},z={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},k={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},D=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",w,c,p,x].join(" "),R=u,I=d;export const TextField=/*@__PURE__*/n.forwardRef(function(a,c){const{variant:d="outline",size:u="md",color:p="primary",density:f="default",elevation:x=0,multiline:g=!1,rows:w=3,resize:K="vertical",label:O,description:T,error:C,invalid:E,startIcon:F,endIcon:L,loading:P=!1,fullWidth:W=!1,classNames:q,shortcuts:A,onKeyDown:B,readOnly:G=!1,disabled:H=!1,type:J="text",className:M,style:Q,...S}=v(a,["size","density","variant"]),U=null!=C&&!1!==C&&""!==C,V=E??U,X=V?"danger":p,Y=n.useRef(null),Z=n.useCallback(e=>{Y.current=e,"function"==typeof c?c(e):c&&(c.current=e)},[c]),_=i(D,j[u],g?`${z[u]} items-start`:`${m[u]} items-center`,b[f][u],H?o[d]:G?I[d]:R[d],q?.shell),ee=i("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",g?`block ${k[K]}`:"self-stretch",q?.control),te="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:H,invalid:V,className:i("flex-col align-top",y[u],W?"flex w-full":"inline-flex",M??""),style:{...$(X,x),...Q},children:[O?e(r.Label,{className:i(h[u],"font-medium",H?"text-(--neba-disabled-fg)":"text-(--neba-fg)",q?.label),children:O}):null,t("span",{className:_,onPointerDown:e=>{e.target!==e.currentTarget||H||(e.preventDefault(),Y.current?.focus())},children:[F?e("span",{className:te,children:F}):null,e(l,{ref:Z,className:ee,disabled:H,readOnly:G,"aria-busy":P||void 0,"data-loading":P||void 0,...g?{render:e("textarea",{rows:w})}:{type:J},...S,onKeyDown:N(A,B)}),P?e("span",{className:te,children:e(s,{})}):L?e("span",{className:te,children:L}):null]}),T?e(r.Description,{className:i(h[u],"text-(--neba-muted-fg)",q?.description),children:T}):null,e(r.Error,U?{match:!0,className:i(h[u],"text-(--n-accent)",q?.error),children:C}:{className:i(h[u],"text-(--n-accent)",q?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Button as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Button as l}from"../button/Button.js";import{TimeGrid as t,usePickerLabels as a}from"../../internal/calendar.js";import{ClockIcon as i}from"../../internal/icons.js";import{PickerFooter as r,PickerShell as s}from"../../internal/picker.js";import{displaySamples as c,formatDate as d,isHour12 as u,isValidDate as m,secondsOfDay as p,timeUnitSpan as h,toISOTime as f,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";export const TimePicker=/*@__PURE__*/o.forwardRef(function(v,j){const{value:x,defaultValue:C,onValueChange:w,open:z,defaultOpen:k,onOpenChange:D,referenceDate:O,minTime:T,maxTime:M,shouldDisableTime:V,hour12:B,showSeconds:I=!1,hourStep:N=1,minuteStep:R=1,secondStep:F=1,locale:H,format:L,placeholder:P,clearable:q=!1,showNowButton:A=!0,closeOnSelect:E=!1,labels:G,name:J,size:K="md",color:Q="primary",density:U="default",readOnly:W=!1,disabled:X=!1,startIcon:Y,...Z}=g(v,["size","density","locale"]),$=a(G,H),_=B??u(H),[ee,ne]=o.useState(C??null),oe=void 0!==x?x:ee,[le,te]=o.useState(k??!1),ae=z??le,[ie]=o.useState(()=>O??new Date),re=e=>{e&&(W||X)||(void 0===z&&te(e),D?.(e))},se=e=>{void 0===x&&ne(e),w?.(e)},ce=o.useCallback((e,n)=>{const[o,l]=h(n,e);return!!(m(T)&&l<p(T))||(!!(m(M)&&o>p(M))||(V?.(e,n)??!1))},[T,M,V]),de=o.useMemo(()=>L??{hour:"numeric",minute:"2-digit",...I?{second:"2-digit"}:{}},[L,I]),ue=new Date,me=S(O??ie,{hours:ue.getHours(),minutes:ue.getMinutes(),seconds:I?ue.getSeconds():0}),pe=A||q||!E,he=o.useMemo(()=>y(c(H,de),P),[H,de,P]);return e(s,{...Z,size:K,color:Q,density:U,readOnly:W,disabled:X,triggerRef:j,startIcon:Y??e(i,{}),display:m(oe)?d(oe,H,de):P??"",samples:he,empty:!m(oe),clearable:q,onClear:()=>se(null),open:ae,onOpenChange:re,clearLabel:$.clear,hiddenValues:J?[{name:J,value:m(oe)?f(oe,I):""}]:void 0,children:n("div",{className:b("flex flex-col",pe&&"gap-1.5"),children:[e(t,{size:K,density:U,locale:H,value:m(oe)?oe:null,referenceDate:O??ie,onChange:e=>{se(e),E&&re(!1)},hour12:_,showSeconds:I,hourStep:N,minuteStep:R,secondStep:F,shouldDisableTime:ce,labels:$,autoFocus:!0}),pe?n(r,{size:K,children:[q?e(l,{variant:"text",size:K,color:Q,density:"compact",onClick:()=>{se(null),re(!1)},children:$.clear}):null,A?e(l,{variant:"text",size:K,color:Q,density:"compact",disabled:ce(me,"second"),onClick:()=>{se(me),re(!1)},children:$.now}):null,E?null:e(l,{variant:"solid",size:K,color:Q,density:"compact",onClick:()=>re(!1),children:$.done})]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as s,barMaxThickness as a,barRadius as l,formatTimeTicks as i,formatTimeValue as c,markGap as m,resolveColor as d,seriesColor as u,timeScale as h,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as x}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";export function TimelineChart(n){const{series:r,min:l,max:d,barSize:x,rounded:k=!0,size:g="md",density:v="default",xAxis:j,yAxis:$,locale:C,...z}=p(n,["size","density","locale"]),w=t.useMemo(()=>r.map(M),[r]),A=t.useMemo(()=>w.map(e=>e.spans),[w]),E=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const o of A)for(const r of o)r&&(t=!0,e=Math.min(e,r.from),n=Math.max(n,r.to));return t?{min:e,max:n}:null},[A]),P=t.useMemo(()=>h(E,{min:f(l)??void 0,max:f(d)??void 0,tickCount:$?.tickCount}),[E,l,d,$?.tickCount]),B=t.useMemo(()=>i(P.ticks,P.unit,C),[P,C]),I=t.useMemo(()=>r.map((e,n)=>u(e,n)),[r]),N=t.useMemo(()=>[{data:A.map(e=>e.some(Boolean)?1:null)}],[A]),T=t.useMemo(()=>r.map((e,n)=>e.name??`${n+1}`),[r]),F=x??a[g],R=t.useCallback(e=>{const n=[];return w.forEach((t,o)=>{const r=Math.min(F,Math.max(1,(e.band.band-m*(t.lanes-1))/t.lanes)),s=r*t.lanes+m*(t.lanes-1),a=e.plot.top+e.categoryPx(o)-s/2+r/2;t.spans.forEach((t,s)=>{if(!t)return;const l=e.valuePx(t.from),i=e.valuePx(t.to);n.push({series:o,index:s,x:(l+i)/2,y:a+t.lane*(r+m),r:r/2,rx:Math.max(0,(i-l)/2),ry:r/2})})}),n},[w,F]),S=t.useCallback(e=>{const n=A[e.series]?.[e.index];if(!n)return null;const t=[{seriesIndex:e.series,name:T[e.series],color:n.color??I[e.series],value:n.to-n.from,formatted:`${c(n.from,P.unit,C)} – ${c(n.to,P.unit,C)}`}];return{heading:n.span.label??T[e.series],items:t}},[A,T,I,P.unit,C]);return e(o,{...z,series:N,categories:T,size:g,density:v,locale:C,horizontal:!0,scale:P,xAxis:j,yAxis:{tickFormat:(e,n)=>B[n]??"",...$},legend:!1,bandRatio:s[v],marks:R,markTooltip:S,table:n=>e(y,{id:n,names:T,series:r,spans:A,unit:P.unit,label:z.label,corner:j?.label,locale:C}),children:n=>e(b,{context:n,spans:A,colors:I,rounded:k})})}function M(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?d(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),o=-1===n?t.length:n;t[o]=e.to,e.lane=o}),{spans:n,lanes:Math.max(1,t.length)}}function b({context:n,spans:t,colors:o,rounded:s}){const{marks:a,activeMark:i,plot:c}=n,m=s?l:0;return e("g",{children:a.map(n=>{const s=t[n.series]?.[n.index];if(!s)return null;const a=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,d=2*(n.ry??n.r),u=Math.max(c.left,n.x-l),h=Math.min(c.left+c.width,n.x+l);if(h<c.left||u>c.left+c.width)return null;const f=Math.max(1,h-u);return e("rect",{x:u,y:n.y-d/2,width:f,height:d,rx:Math.min(m,f/2,d/2),fill:s.color??o[n.series],opacity:a?1:.92,className:r},`${n.series}-${n.index}`)})})}const y=/*@__PURE__*/t.memo(function({id:t,names:o,series:r,spans:s,unit:a,label:l,corner:i,locale:m}){const d=r.some(e=>e.data.some(e=>void 0!==e.label));return n("table",{id:t,className:x,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:i??""}),d?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:"start"}),e("th",{scope:"col",children:"end"})]})}),e("tbody",{children:s.flatMap((t,s)=>t.map((t,l)=>n("tr",{children:[e("th",{scope:"row",children:o[s]}),d?e("td",{children:r[s].data[l]?.label??""}):null,e("td",{children:t?c(t.from,a,m):""}),e("td",{children:t?c(t.to,a,m):""})]},`${s}-${l}`)))})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{boxPaddingClasses as i}from"../box/Box.js";import{actionMessages as n,useMessages as a}from"../../internal/i18n.js";import{CloseIcon as r,severityIcon as l}from"../../internal/icons.js";import{controlSlots as c,cx as d,focusRingClasses as m,hasContent as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{boxPaddingClasses as i}from"../box/Box.js";import{actionMessages as n,useMessages as a}from"../../internal/i18n.js";import{CloseIcon as r,severityIcon as l}from"../../internal/icons.js";import{controlSlots as c,cx as d,focusRingClasses as m,hasContent as p,iconClasses as u,metaTextClasses as f,popupFadeClasses as b,radiusClasses as x,sheetBodyClasses as v,sheetHeaderGapClasses as h,sheetSectionGapClasses as w,sheetTitleClasses as g,surfaceClasses as y}from"../../internal/styles.js";import{useStyleDefaults as N}from"../../internal/defaults.js";const j={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},z={solid:[y,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[y,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[y,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},T={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function _(e){const{color:t,variant:o,icon:s,actionLabel:i,onAction:n,...a}=e;return{...a,data:{color:t,variant:o,icon:s},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useToast(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(_(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,_(o)),promise:(t,o)=>e.promise(t,{loading:_(o.loading),success:e=>_("function"==typeof o.success?o.success(e):o.success),error:e=>_("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function k({toast:o,variant:n,color:a,size:y,density:N,closeLabel:j,swipeDirection:_,classNames:k}){const D=o.data?.variant??n??"outline",L=o.data?.color??a,M=void 0===o.data?.icon?l(L):o.data.icon,P=T[D],$=p(o.title);return t(s.Root,{toast:o,swipeDirection:_,className:d("pointer-events-auto flex w-full items-start",i[N??"default"][y],x[y],w[y],v[y],z[D],u,b,"data-[limited]:hidden",m,k?.toast),style:c(L,3,D),children:[p(M)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${P}`,children:M}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${h[y]}`,children:[e(s.Title,{className:d("neba-title font-semibold",g[y],P,k?.title)}),e(s.Description,{className:d($&&"solid"!==D?"text-(--neba-muted-fg)":"",k?.description)})]}),e(s.Action,{className:d("flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",P||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",f[y],k?.action)}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(s.Close,{"aria-label":j,className:d("inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",k?.close),children:e(r,{})})})]})}function D(t){const{toasts:i}=s.useToastManager(),{position:n,width:a,classNames:r,...l}=t,c=o.useMemo(()=>[n.startsWith("top")?"up":"down","left","right"],[n]);return e(s.Portal,{children:e(s.Viewport,{className:d("neba-portal pointer-events-none fixed inset-x-0 z-(--neba-z-portal) flex flex-col gap-2 p-4",j[n],r?.viewport),children:i.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof a?`${a}px`:a},children:e(k,{toast:t,swipeDirection:c,classNames:r,...l})},t.id))})})}export function ToastProvider(o){const{variant:i="outline",size:r="md",color:l="primary",density:c="default",position:d="bottom-end",timeout:m=5e3,limit:p=3,width:u=380,locale:f,closeLabel:b,classNames:x,children:v}=N(o,["size","density","variant","locale"]),h=a(n,f);return t(s.Provider,{timeout:m,limit:p,children:[v,e(D,{position:d,variant:i,size:r,color:l,density:c,width:u,closeLabel:b??h.close,classNames:x})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{controlSlots as i,cx as s,metaTextClasses as l,paddingXClasses as n,popupFadeClasses as r,radiusClasses as d,surfaceClasses as p}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";export const TooltipProvider=a.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]",r,"data-[instant]:[transition-duration:0ms]"].join(" "),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(r){const{content:p,children:u,size:x="sm",color:y="secondary",density:b="default",side:g="top",align:v="center",sideOffset:j=6,delay:w,closeDelay:O,arrow:
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{controlSlots as i,cx as s,metaTextClasses as l,paddingXClasses as n,popupFadeClasses as r,radiusClasses as d,surfaceClasses as p}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";export const TooltipProvider=a.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]",r,"data-[instant]:[transition-duration:0ms]"].join(" "),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(r){const{content:p,children:u,size:x="sm",color:y="secondary",density:b="default",side:g="top",align:v="center",sideOffset:j=6,delay:w,closeDelay:O,arrow:z=!0,open:N,defaultOpen:P,onOpenChange:T,disabled:C=!1,className:D,style:k,...A}=c(r,["size","density"]),B=h[x],I=o.useId(),[L,M]=o.useState(P??!1),R=N??L;return t(a.Root,{open:N,defaultOpen:P,onOpenChange:e=>{void 0===N&&M(e),T?.(e)},children:[e(a.Trigger,{render:u,delay:w,closeDelay:O,disabled:C,"aria-describedby":R?I:void 0}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:g,align:v,sideOffset:j,children:t(a.Popup,{id:I,role:"tooltip",className:s(m,d[x],n[b][x],f[x],l[x],D??""),style:{...i(y,3,"solid"),...k},...A,children:[z?e(a.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"].join(" "),children:e("svg",{width:B,height:B/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{Popover as s}from"@base-ui/react/popover";import{Button as o}from"../button/Button.js";import{boxPaddingXClasses as i,boxPaddingYClasses as r}from"../box/Box.js";import{actionMessages as l,fill as a,stepsMessages as c,useMessages as d}from"../../internal/i18n.js";import{CloseIcon as m}from"../../internal/icons.js";import{observeResize as u}from"../../internal/observe.js";import{cx as p,hasContent as f,metaTextClasses as h,popupFadeClasses as g,radiusClasses as b,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetSectionGapClasses as w,sheetTitleClasses as N,surfaceClasses as k,surfaceSlots as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as s}from"@base-ui/react/popover";import{Button as o}from"../button/Button.js";import{boxPaddingXClasses as i,boxPaddingYClasses as r}from"../box/Box.js";import{actionMessages as l,fill as a,stepsMessages as c,useMessages as d}from"../../internal/i18n.js";import{CloseIcon as m}from"../../internal/icons.js";import{observeResize as u}from"../../internal/observe.js";import{cx as p,hasContent as f,metaTextClasses as h,popupFadeClasses as g,radiusClasses as b,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetSectionGapClasses as w,sheetTitleClasses as N,surfaceClasses as k,surfaceSlots as z}from"../../internal/styles.js";import{useStyleDefaults as j}from"../../internal/defaults.js";const y=[k,"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]",g].join(" "),_={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},L={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function S({spot:t,radius:n,className:s}){return e("div",null===t?{"aria-hidden":"true",className:p("pointer-events-none fixed inset-0 z-40 bg-(--neba-scrim)",s)}:{"aria-hidden":"true",className:p("pointer-events-none fixed z-40 [box-shadow:0_0_0_9999px_var(--neba-scrim)]",s),style:{top:t.top,left:t.left,width:t.width,height:t.height,borderRadius:n}})}export function Tour(g){const{steps:k,open:C,defaultOpen:E=!1,onOpenChange:P,step:O,defaultStep:q=0,onStepChange:B,onFinish:F,mask:M=!0,skippable:R=!0,dismissible:T=!0,scrollIntoView:A=!0,locale:I,previousLabel:V,nextLabel:$,doneLabel:D,skipLabel:H,size:G="md",color:J="primary",density:K="default",className:Q,classNames:U}=j(g,["size","density","locale"]),W=d(c,I),X=d(l,I),[Y,Z]=n.useState(E),[ee,te]=n.useState(q),ne=C??Y,se=Math.min(O??ee,Math.max(0,k.length-1)),oe=k[se],[ie,re]=n.useState(null),le=e=>{void 0===C&&Z(e),P?.(e)},ae=e=>{void 0===O&&te(e),B?.(e)};if(n.useEffect(()=>{const e=oe?.target;if(!ne||!e)return;const t=document.querySelector(e);if(!(t instanceof HTMLElement))return;A&&t.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});const n=oe?.padding??6;let s=0;const o=()=>{s=0;const o=t.getBoundingClientRect();re({selector:e,spot:{top:o.top-n,left:o.left-n,width:o.width+2*n,height:o.height+2*n}})},i=()=>{0===s&&(s=requestAnimationFrame(o))};o();const r=u(t,i);return window.addEventListener("scroll",i,{passive:!0,capture:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),r(),window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)}},[ne,oe?.target,oe?.padding,A]),0===k.length)return null;const ce=ne&&oe?.target&&ie?.selector===oe.target?ie.spot:null,de=0===se,me=se===k.length-1,ue=i[K][G],pe=r[K][G],fe=L[G],he=f(oe?.title)||f(oe?.content);return t(s.Root,{open:ne,onOpenChange:(e,t)=>{(e||T||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?le(e):t.cancel()},children:[ne&&M?e(S,{spot:ce,radius:ce?8:0,className:U?.mask}):null,e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:oe?.side??"bottom",align:oe?.align??"center",sideOffset:10,collisionPadding:12,anchor:()=>{if(!oe?.target)return null;const e=document.querySelector(oe.target);return e instanceof Element?e:null},children:t(s.Popup,{className:p(y,b[G],v[G],w[G],_[G],ue,pe,Q),style:z(J,3),children:[he?t("div",{className:"flex items-start gap-3",children:[t("div",{className:`flex min-w-0 flex-1 flex-col ${x[G]}`,children:[f(oe?.title)?e(s.Title,{className:p("m-0 font-semibold",N[G],U?.title),children:oe?.title}):null,f(oe?.content)?e(s.Description,{className:p("m-0 min-w-0",U?.description),children:oe?.content}):null]}),T?e("button",{type:"button","aria-label":X.close,onClick:()=>le(!1),className:p("flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",U?.close),children:e(m,{})}):null]}):null,t("div",{className:p("flex items-center gap-2",U?.footer),children:[e("span",{className:`shrink-0 tabular-nums text-(--neba-muted-fg) ${h[G]}`,children:a(W.position,{index:String(se+1),total:String(k.length)})}),t("div",{className:"ms-auto flex items-center gap-2",children:[R&&!me?e(o,{size:fe,variant:"text",color:"secondary",onClick:()=>le(!1),children:H??W.skip}):null,de?null:e(o,{size:fe,variant:"outline",color:J,onClick:()=>ae(se-1),children:V??W.previous}),e(o,{size:fe,color:J,onClick:()=>me?(F?.(),void le(!1)):ae(se+1),children:me?D??W.done:$??W.next})]})]})]})})})]})}
|
|
@@ -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 i}from"../text-field/TextField.js";import{transferMessages as n,useMessages as o}from"../../internal/i18n.js";import{ArrowRightIcon as c}from"../../internal/icons.js";import{searchText as d}from"../../internal/search.js";import{cx as m,fieldRestClasses 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 i}from"../text-field/TextField.js";import{transferMessages as n,useMessages as o}from"../../internal/i18n.js";import{ArrowRightIcon as c}from"../../internal/icons.js";import{searchText as d}from"../../internal/search.js";import{cx as m,fieldRestClasses as u,hasContent as h,metaTextClasses as f,paddingXClasses as b,radiusClasses as p,surfaceSlots as v,toLength as g}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";const y={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},k={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function S({title:l,rows:s,arrived:n,ticked:o,onTick:c,onTickAll:d,search:h,onSearch:g,searchable:x,disabled:S,height:w,emptyMessage:j,searchLabel:N,selectAllLabel:z,style:M}){const{size:$,variant:A="outline",color:C="primary",density:T="default"}=M,L=s.filter(e=>!e.disabled),_=L.filter(e=>o.has(e.value)),V=L.length>0&&_.length===L.length,B=_.length>0&&!V,F=b[T][$];return a("div",{className:["flex min-w-0 flex-col overflow-hidden",u[A],p[$]].join(" "),style:v(C,0),children:[a("div",{className:`flex items-center gap-2 border-b [border-color:var(--neba-border)] ${F} ${y[$]}`,children:[e(t,{size:$,color:C,checked:V,indeterminate:B,disabled:S||0===L.length,"aria-label":z,onCheckedChange:e=>d(!0===e)}),e("span",{className:`min-w-0 flex-1 truncate font-medium ${f[$]}`,children:l}),a("span",{className:`shrink-0 tabular-nums text-(--neba-muted-fg) ${f[$]}`,children:[_.length,"/",s.length]})]}),x?e("div",{className:`${F} ${y[$]}`,children:e(i,{size:$,color:C,density:T,fullWidth:!0,variant:"text",disabled:S,placeholder:N,"aria-label":N,value:h,onChange:e=>g(e.target.value)})}):null,e(r,{size:$,color:C,height:w,fade:!0,children:e("div",{className:`flex flex-col ${F} ${y[$]}`,children:0===s.length?e("span",{className:`text-(--neba-muted-fg) ${f[$]} ${k[$]}`,children:j}):s.map(a=>e(t,{size:$,color:C,className:m(k[$],n.has(a.value)?"[animation:neba-anim-fade_var(--neba-duration-fill)_var(--neba-ease)_both]":""),label:a.label,checked:o.has(a.value),disabled:S||a.disabled,onCheckedChange:e=>c(a.value,!0===e)},a.value))})})]})}function w(e,a,l){const t=d(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(t,r){const{items:i,value:u,defaultValue:f,onValueChange:b,sourceLabel:p,targetLabel:v,searchable:y=!1,height:k=220,disabled:j=!1,locale:N,variant:z="outline",size:M="md",color:$="primary",density:A="default",className:C,...T}=x(t,["size","density","variant","locale"]),L=o(n,N),[_,V]=l.useState(f??[]),B=u??_,[F,I]=l.useState(()=>new Set),[R,W]=l.useState(()=>new Set),[q,D]=l.useState(""),[E,G]=l.useState(""),H=l.useMemo(()=>new Set(B),[B]),J=l.useMemo(()=>i.filter(e=>!H.has(e.value)),[i,H]),K=l.useMemo(()=>i.filter(e=>H.has(e.value)),[i,H]),O=(e,a)=>{I(l=>{const t=new Set(l);return a?t.add(e):t.delete(e),t})},P=(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})},Q=(e,a)=>{const l=e.filter(e=>!e.disabled&&F.has(e.value));if(0===l.length)return;const t=new Set(l.map(e=>e.value)),s=a?i.filter(e=>H.has(e.value)||t.has(e.value)).map(e=>e.value):B.filter(e=>!t.has(e));I(e=>new Set([...e].filter(e=>!t.has(e)))),W(t),(e=>{void 0===u&&V(e),b?.(e)})(s)},U=l.useMemo(()=>function(e){const a=new Map;for(const l of e)"string"==typeof l.label&&a.set(l.value,d(l.label));return a}(i),[i]),X=l.useMemo(()=>w(J,q,U),[J,q,U]),Y=l.useMemo(()=>w(K,E,U),[K,E,U]),Z=X.some(e=>!e.disabled&&F.has(e.value)),ee=Y.some(e=>!e.disabled&&F.has(e.value)),ae=g(k),le={variant:z,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)]",C??""),...T,children:[e(S,{title:h(p)?p:L.source,rows:X,arrived:R,ticked:F,onTick:O,onTickAll:e=>P(X,e),search:q,onSearch:D,searchable:y,disabled:j,height:ae,emptyMessage:L.empty,searchLabel:L.search,selectAllLabel:L.selectAll,style:le}),a("div",{className:"flex flex-col gap-2",children:[e(s,{size:M,color:$,variant:"text"===z?"text":"outline",label:L.toTarget,disabled:j||!Z,onClick:()=>Q(X,!0),icon:e(c,{})}),e(s,{size:M,color:$,variant:"text"===z?"text":"outline",label:L.toSource,disabled:j||!ee,onClick:()=>Q(Y,!1),icon:e("span",{className:"flex rotate-180",children:e(c,{})})})]}),e(S,{title:h(v)?v:L.target,rows:Y,arrived:R,ticked:F,onTick:O,onTickAll:e=>P(Y,e),search:E,onSearch:G,searchable:y,disabled:j,height:ae,emptyMessage:L.empty,searchLabel:L.search,selectAllLabel:L.selectAll,style:le})]})});
|
|
@@ -53,6 +53,8 @@ export interface TreeSelectProps extends PickerShellProps {
|
|
|
53
53
|
placeholder?: React.ReactNode;
|
|
54
54
|
/** Offers the × that empties the control. @default false */
|
|
55
55
|
clearable?: boolean;
|
|
56
|
+
/** Accessible name of the clear button. Defaults to the `locale`'s word. */
|
|
57
|
+
clearLabel?: string;
|
|
56
58
|
/** Closes the popup as soon as a node is chosen. @default !multiple */
|
|
57
59
|
closeOnSelect?: boolean;
|
|
58
60
|
/**
|
|
@@ -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{
|
|
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 o,searchText as i}from"../../internal/search.js";import{actionMessages as s,commandMessages as c,comboboxMessages as d,useMessages as u}from"../../internal/i18n.js";import{useStyleDefaults as h}from"../../internal/defaults.js";function p(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&p(a.children,l);return l}function m(e,l=new Map){for(const a of e)l.set(a,o([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 g(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),g(a.children,l));return l}export const TreeSelect=/*@__PURE__*/a.forwardRef(function(o,v){const{items:b=[],value:x,defaultValue:y,onValueChange:w,multiple:C=!1,selectableBranches:S=!1,defaultExpanded:j,expanded:N,onExpandedChange:M,open:O,defaultOpen:z,onOpenChange:V,placeholder:E,clearable:L=!1,clearLabel:T,closeOnSelect:k,searchable:A=!1,searchPlaceholder:I,locale:R,format:B,name:P,size:$="md",color:q="primary",readOnly:D=!1,disabled:F=!1,classNames:G,...H}=h(o,["size","locale"]),J=u(d,R),K=u(c,R),Q=u(s,R),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(z??!1),ee=O??Z,[le,ae]=a.useState(""),ne=a.useMemo(()=>p(b),[b]),re=a.useMemo(()=>m(b),[b]),te=i(le),oe=a.useMemo(()=>f(b,te,re),[b,te,re]),ie=a.useMemo(()=>""===te?void 0:g(oe),[te,oe]),[se,ce]=a.useState(()=>j??[]),de=ie??N??se,ue=e=>{e&&(D||F)||(void 0===O&&_(e),e||ae(""),V?.(e))},he=e=>{void 0===x&&X(e),w?.(e)},pe=e=>e.selectable??(!(e.children&&e.children.length>0)||S),me=Y.map(e=>ne.get(e)).filter(e=>void 0!==e),fe=0===me.length?E??"":B?B(me):me.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ge=l=>l.map(l=>e(n,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled||!pe(l),className:G?.item,children:l.children?ge(l.children):null},l.value));return e(t,{...H,size:$,color:q,readOnly:D,disabled:F,triggerRef:v,display:fe,empty:0===me.length,clearable:L,onClear:()=>he([]),open:ee,onOpenChange:ue,clearLabel:T??Q.clear,popupClassName:G?.popup,hiddenValues:P?Y.map(e=>({name:P,value:String(e)})):void 0,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:"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:$,color:q,multiple:C,selected:Y,onSelectedChange:e=>{const l=e.filter(e=>{const l=ne.get(e);return void 0!==l&&pe(l)&&!l.disabled});he(C?l:l.slice(-1)),(k??!C)&&ue(!1)},expanded:de,onExpandedChange:ie?()=>{}:e=>{void 0===N&&ce(e),M?.(e)},className:G?.tree,children:ge(oe)})})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{transitionProps as r}from"../../internal/animate.js";import{cx as m}from"../../internal/styles.js";const
|
|
1
|
+
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{transitionProps as r}from"../../internal/animate.js";import{clampClasses as n,cx as m}from"../../internal/styles.js";const a={h1:"text-[1.875rem]/[1.2] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.25] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.3] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.41176]",h5:"text-[0.9375rem]/[1.46667]",h6:"text-[0.8125rem]/[1.53846]",lead:"text-[1.0625rem]/[1.64706]",body:"text-[0.8125rem]/[1.69231]",caption:"text-[0.75rem]/[1.5]",overline:"text-[0.6875rem]/[1.45455] tracking-[0.08em] uppercase"},o={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},i={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},l=new Set(["caption","overline"]),s={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},h={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},c={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"};export const Typography=/*@__PURE__*/e.forwardRef(function({level:d="body",color:b,weight:p,align:x,lines:u,gutter:f=!1,transition:y,render:g,className:v,style:j,children:k,...w},N){const E=r(y),R=m("neba-typography",a[d],h[p??o[d]],x?c[x]:"",u?n(u):"",f?s[d]:"",b?"text-(--n-accent)":l.has(d)?"text-(--neba-muted-fg)":"text-(--neba-fg)",E.className,v??"");return t({render:g??e.createElement(i[d]),ref:N,props:{className:R,style:b?{"--n-accent":`var(--neba-${b}-accent)`,...E.style,...j}:{...E.style,...j},children:k,...w}})});
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A memo that cannot grow without bound.
|
|
3
|
+
*
|
|
4
|
+
* Five caches in this folder are keyed on something a caller chose — a
|
|
5
|
+
* `locale`, a media query string, the options behind a `format` prop — and
|
|
6
|
+
* every one of those keys arrives through a public prop or a public hook. The
|
|
7
|
+
* library's own use of them is a handful of entries each: a dozen queries, two
|
|
8
|
+
* segmenter granularities, however many languages a product ships. A caller
|
|
9
|
+
* computing a key is the case with no ceiling, and what sits on the far side is
|
|
10
|
+
* an `Intl` object or a live `MediaQueryList` rather than a few bytes.
|
|
11
|
+
*
|
|
12
|
+
* So there is a ceiling, and reaching it empties the store rather than evicting
|
|
13
|
+
* the coldest entry. An LRU wants a second structure and an ordering to
|
|
14
|
+
* maintain on every read, which is real work on the one path this exists to
|
|
15
|
+
* make cheap; emptying is a single branch, and the worst it can do is make the
|
|
16
|
+
* next call build what it would have built anyway. The limit is far above
|
|
17
|
+
* anything the library itself reaches, so an ordinary page never meets it.
|
|
18
|
+
*
|
|
19
|
+
* One rule comes with the shape: a store must not hold `undefined` as a value,
|
|
20
|
+
* or every read of that key misses and builds again. All five hold an object, a
|
|
21
|
+
* number or `null`.
|
|
22
|
+
*/
|
|
23
|
+
/** 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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function memoise(e,t,n){const o=e.get(t);if(void 0!==o)return o;e.size>=64&&e.clear();const r=n();return e.set(t,r),r}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type TimeUnit } from './date.js';
|
|
3
|
+
import { type PickerMessages } from './i18n.js';
|
|
3
4
|
import type { NebaColor, NebaDateGranularity, NebaDensity, NebaSize, NebaWeekday } from '../types.js';
|
|
4
5
|
/**
|
|
5
6
|
* The calendar grid and the clock columns, written once for the four pickers.
|
|
@@ -20,49 +21,21 @@ import type { NebaColor, NebaDateGranularity, NebaDensity, NebaSize, NebaWeekday
|
|
|
20
21
|
/**
|
|
21
22
|
* Every string a picker says that is not a date.
|
|
22
23
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* mostly apology. The dates themselves are never in here — those come from
|
|
27
|
-
* `Intl`, which already knows what July is called in more languages than this
|
|
28
|
-
* file ever will.
|
|
24
|
+
* The set itself lives in `internal/i18n.ts`, with the other nineteen
|
|
25
|
+
* namespaces and the eighteen translations of each — the name stays here
|
|
26
|
+
* because it is what the `labels` prop is typed against.
|
|
29
27
|
*/
|
|
30
|
-
export
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
chooseMonth: string;
|
|
42
|
-
chooseYear: string;
|
|
43
|
-
/**
|
|
44
|
-
* The footer's actions. Three shortcuts rather than one because the button
|
|
45
|
-
* jumps to the current *unit*, and a month picker whose footer says "Today"
|
|
46
|
-
* is offering a day it has no way to accept.
|
|
47
|
-
*/
|
|
48
|
-
today: string;
|
|
49
|
-
thisMonth: string;
|
|
50
|
-
thisYear: string;
|
|
51
|
-
now: string;
|
|
52
|
-
clear: string;
|
|
53
|
-
done: string;
|
|
54
|
-
/** The clock's columns. */
|
|
55
|
-
hour: string;
|
|
56
|
-
minute: string;
|
|
57
|
-
second: string;
|
|
58
|
-
meridiem: string;
|
|
59
|
-
/** Which end of a range the calendar is currently asking for. */
|
|
60
|
-
start: string;
|
|
61
|
-
end: string;
|
|
62
|
-
}
|
|
63
|
-
export declare const defaultPickerLabels: PickerLabels;
|
|
64
|
-
/** Merges a caller's overrides over the defaults, once per render. */
|
|
65
|
-
export declare function usePickerLabels(overrides?: Partial<PickerLabels>): PickerLabels;
|
|
28
|
+
export type PickerLabels = PickerMessages;
|
|
29
|
+
/**
|
|
30
|
+
* The twenty strings for a locale, with a caller's own wording over the top.
|
|
31
|
+
*
|
|
32
|
+
* `locale` answers the language and `overrides` answers the wording, which is
|
|
33
|
+
* why both are taken: a product in Korean should not have to write out twenty
|
|
34
|
+
* labels to stop a calendar saying "Previous month", and a product that wants
|
|
35
|
+
* "Back" instead of "Previous month" should not have to register a language to
|
|
36
|
+
* say so.
|
|
37
|
+
*/
|
|
38
|
+
export declare function usePickerLabels(overrides: Partial<PickerLabels> | undefined, locale: string | undefined): PickerLabels;
|
|
66
39
|
export interface CalendarProps {
|
|
67
40
|
size: NebaSize;
|
|
68
41
|
color: NebaColor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{Button as r}from"../components/button/Button.js";import{ChevronIcon as a}from"./icons.js";import{controlHeightClasses as l,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as u,pressTransitionClasses as d,srOnlyClasses as m,transitionClasses as h}from"./styles.js";import{addDays as g,addMonths as f,addYears as b,calendarWeeks as p,compareDay as v,isDayOutside as x,isMonthBeforeYear as y,isSameDay as w,isSameMonth as D,isUnitOutside as N,isValidDate as S,makeDate as M,meridiemLabels as P,monthLabels as C,startOfDay as k,startOfMonth as z,today as Y,weekdayLabels as A,withTime as j,YEAR_PAGE_SIZE as E,yearPageStart as F}from"./date.js";import{dateFormatter as T}from"./format.js";export const defaultPickerLabels={previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function usePickerLabels(e){return o.useMemo(()=>e?{...defaultPickerLabels,...e}:defaultPickerLabels,[e])}const R={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},B={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)"},H={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)"},K=["relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,d,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function O({children:n,label:o,selected:r,inRange:a=!1,rangeEdge:l=null,current:s=!1,muted:c=!1,disabled:u=!1,focused:d=!1,size:m,className:h,onClick:g,onPointerEnter:f,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":u||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:i(K,"start"===l?H[m]:"end"===l?L[m]:"middle"===l?"rounded-none":B[m],u?"cursor-not-allowed text-(--neba-disabled-fg)":r?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":a?"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-accent) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"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||g()},onPointerEnter:f,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function U({size:o,color:u,view:d,month:m,locale:h,labels:g,showPreviousButton:f,showNextButton:b,onStep:p,onViewChange:v}){const x=C(h,"long")[m.getMonth()],w=String(m.getFullYear()),D=y(h),N="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],S=(t,n)=>n?e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":N[-1===t?0:1],onClick:()=>p(t),startIcon:e("span",{className:i("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(a,{})})}):e("span",{"aria-hidden":"true",className:i(l[o],"w-(--n-cell)")}),M=t=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(a,{})}),P=e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":g.chooseMonth,"aria-expanded":"month"===d,onClick:()=>v("month"===d?"day":"month"),endIcon:M("month"===d),children:x},"month"),k=e(r,{variant:"text",size:o,color:u,density:"compact",className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,onClick:()=>v("year"===d?"day":"year"),endIcon:M("year"===d),children:w},"year"),z=F(m.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[S(-1,f),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[o]),children:"year"===d?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",l[o],s[o]),children:`${z}–${z+E-1}`}):"month"===d?k:t(n,D?{children:[P,k]}:{children:[k,P]})}),S(1,b)]})}const q={day:0,month:1,year:2};export function Calendar({size:n,color:r,locale:a,weekStartsOn:l,month:s,onMonthChange:u,selected:d,rangeStart:m=null,rangeEnd:h=null,onSelect:g,granularity:p="day",renderDay:v,onPreviewChange:y,minDate:w,maxDate:N,shouldDisableDate:P,showOutsideDays:C=!0,autoFocus:A=!1,showPreviousButton:j=!0,showNextButton:F=!0,labels:T,className:B}){const[H,L]=o.useState(p),K=q[H]<q[p]?p:H,O=o.useMemo(()=>d.filter(S),[d]),[V,G]=o.useState(()=>{const e=O.find(e=>D(e,s));return e?k(e):D(Y(),s)?Y():z(s)}),J=o.useRef(A),Q=o.useRef(null);o.useEffect(()=>{G(e=>D(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{J.current&&(J.current=!1,Q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const W=o.useCallback(e=>x(e,w,N)||(P?.(e)??!1),[w,N,P]),X=e=>{J.current=!0,L(e)},Z=e=>{J.current=!0,u(e)};return t("div",{ref:Q,className:i("flex flex-col",c[n],B),style:{"--n-cell":R[n]},onPointerLeave:()=>y?.(null),children:[e(U,{size:n,color:r,view:K,month:s,locale:a,labels:T,showPreviousButton:j,showNextButton:F,onStep:e=>{u("day"===K?f(s,e):b(s,"month"===K?e:e*E))},onViewChange:X}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===K?e(I,{size:n,locale:a,weekStartsOn:l,month:s,chosen:O,rangeStart:m,rangeEnd:h,focusedDate:V,renderDay:v,showOutsideDays:C,isDisabled:W,onSelect:e=>{G(e),g(e)},onPreviewChange:y,onMoveFocus:e=>{J.current=!0,G(e),D(e,s)||u(z(e))}}):"month"===K?e($,{size:n,locale:a,month:s,chosen:O,minDate:w,maxDate:N,shouldDisable:"month"===p?P:void 0,onMoveCursor:Z,onPick:e=>{const t=M(s.getFullYear(),e,1);u(t),"month"===p?g(t):X("day")}}):e(_,{size:n,month:s,chosen:O,minDate:w,maxDate:N,shouldDisable:"year"===p?P:void 0,onMoveCursor:Z,onPick:e=>{if("year"===p){const t=M(e,0,1);return u(t),void g(t)}u(M(e,s.getMonth(),1)),X("month")}})})]})}function I({size:n,locale:o,weekStartsOn:r,month:a,chosen:l,rangeStart:c,rangeEnd:d,focusedDate:m,renderDay:h,showOutsideDays:b,isDisabled:x,onSelect:y,onPreviewChange:N,onMoveFocus:M}){const P=p(a,r),C=A(o,r,"short"),k=A(o,r,"long"),z=T(o,{dateStyle:"full"}),j=(F=d,S(E=c)&&S(F)?v(E,F)<=0?[E,F]:[F,E]:null);var E,F;const R=Y();return t("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:C.map((t,o)=>e("span",{role:"columnheader","aria-label":k[o],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",u[n]),children:t},o))}),P.map((o,c)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const c=!D(o,a);if(c&&!b)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},o.getTime());const u=l.some(e=>w(e,o)),d=null!==j&&v(o,j[0])>=0&&v(o,j[1])<=0,p=null!==j&&d&&w(o,j[0]),S=null!==j&&d&&w(o,j[1]);return t(O,{size:n,label:z.format(o),selected:u,inRange:d&&!u,rangeEdge:d?p&&S?"both":p?"start":S?"end":"middle":null,current:w(o,R)&&!u,muted:c,disabled:x(o),focused:w(o,m),className:i("size-(--n-cell)",s[n]),onClick:()=>y(o),onPointerEnter:()=>N?.(o),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-r+7)%7,o={ArrowLeft:()=>g(t,-1),ArrowRight:()=>g(t,1),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>f(t,e.shiftKey?-12:-1),PageDown:()=>f(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),M(o()))})(e,o),children:[o.getDate(),h?h(o):null]},o.getTime())})},c))]})}function $({size:t,locale:n,month:o,chosen:r,minDate:a,maxDate:l,shouldDisable:c,onMoveCursor:u,onPick:d}){const m=C(n,"short"),h=C(n,"long"),g=o.getFullYear(),b=new Date,p=e=>{const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==t&&(e.preventDefault(),u(f(z(o),t)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(u=>{const f=3*n+u,v=M(g,f,1);return e(O,{size:t,label:`${h[f]} ${g}`,selected:r.some(e=>e.getFullYear()===g&&e.getMonth()===f),current:b.getFullYear()===g&&b.getMonth()===f,disabled:N(v,"month",a,l)||(c?.(v)??!1),focused:f===o.getMonth(),className:i("h-(--n-cell) w-full",s[t]),onClick:()=>d(f),onKeyDown:p,children:m[f]},f)})},n))})}function _({size:t,month:n,chosen:o,minDate:r,maxDate:a,shouldDisable:l,onMoveCursor:c,onPick:u}){const d=F(n.getFullYear()),m=(new Date).getFullYear(),h=e=>{const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==t&&(e.preventDefault(),c(b(z(n),t)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(c=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(g=>{const f=d+4*c+g,b=M(f,0,1);return e(O,{size:t,label:String(f),selected:o.some(e=>e.getFullYear()===f),current:f===m,disabled:N(b,"year",r,a)||(l?.(b)??!1),focused:f===n.getFullYear(),className:i("h-(--n-cell) w-full",s[t]),onClick:()=>u(f),onKeyDown:h,children:f},f)})},c))})}function V(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.top-o.top-t.clientTop+t.scrollTop,a=r+n.height;r<t.scrollTop?t.scrollTop=r:a>t.scrollTop+t.clientHeight&&(t.scrollTop=a-t.clientHeight)}export function TimeGrid({size:n,density:r,locale:a,value:c,referenceDate:u,onChange:d,hour12:h,showSeconds:g,hourStep:f,minuteStep:b,secondStep:p,shouldDisableTime:v,autoFocus:x=!1,labels:y,className:w}){const D=c??u,N=o.useRef(null),[S,M]=o.useMemo(()=>P(a),[a]);o.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(V),x){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[x]);const C=o.useMemo(()=>{const e=Math.ceil((h?12:24)/f),t=Array.from({length:e},(e,t)=>t*f);return h?t.map(e=>0===e?12:e):t},[h,f]),k=o.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),z=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),Y=e=>String(e).padStart(2,"0"),A=h?D.getHours()%12||12:D.getHours(),E=(t,o,r,a,u)=>e("div",{role:"listbox","aria-label":o,className:i("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:r.map(o=>{const r=((e,t)=>j(D,"hour"===e?{hours:h?t%12+(D.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:D.getHours()%12+12*t}))(t,o),m=null!==c&&a(o),g=v?.(r,t)??!1;return e("button",{type:"button",role:"option","aria-selected":m,"aria-disabled":g||void 0,"data-chosen":m?"true":void 0,className:i(K,B[n],l[n],s[n],"w-full shrink-0",g?"cursor-not-allowed text-(--neba-disabled-fg)":m?"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:()=>{g||d(r)},children:u(o)},o)})},t);return t("div",{ref:N,className:i("flex","compact"===r?"gap-0.5":"gap-1",w),style:{"--n-cell":R[n]},children:[E("hour",y.hour,C,e=>e===A,e=>h?String(e):Y(e)),E("minute",y.minute,k,e=>e===D.getMinutes(),Y),g?E("second",y.second,z,e=>e===D.getSeconds(),Y):null,h?E("meridiem",y.meridiem,[0,1],e=>(D.getHours()>=12?1:0)===e,e=>0===e?S:M):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":T(a,{hour:"numeric",minute:"2-digit",...g?{second:"2-digit"}:{}}).format(c)})]})}
|
|
1
|
+
"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as o from"react";import{Button as r}from"../components/button/Button.js";import{ChevronIcon as l}from"./icons.js";import{controlHeightClasses as a,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as u,pressTransitionClasses as d,srOnlyClasses as m,transitionClasses as h}from"./styles.js";import{addDays as g,addMonths as f,addYears as b,calendarWeeks as p,compareDay as v,isDayOutside as x,isMonthBeforeYear as y,isSameDay as w,isSameMonth as D,isUnitOutside as N,isValidDate as S,makeDate as M,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as P,today as j,weekdayLabels as A,withTime as F,YEAR_PAGE_SIZE as Y,yearPageStart as E}from"./date.js";import{dateFormatter as R}from"./format.js";import{pickerMessages as T,useMessages as B}from"./i18n.js";export function usePickerLabels(e,n){const t=B(T,n);return o.useMemo(()=>e?{...t,...e}:t,[t,e])}const H={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},K={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)"},L={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)"},O={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)"},U=["relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,d,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function q({children:t,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:u=!1,focused:d=!1,size:m,className:h,onClick:g,onPointerEnter:f,onKeyDown:b}){return n("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":u||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:i(U,"start"===a?L[m]:"end"===a?O[m]:"middle"===a?"rounded-none":K[m],u?"cursor-not-allowed text-(--neba-disabled-fg)":r?"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-accent) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"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||g()},onPointerEnter:f,onKeyDown:b,children:[t,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function I({size:o,color:u,view:d,month:m,locale:h,labels:g,showPreviousButton:f,showNextButton:b,onStep:p,onViewChange:v}){const x=k(h,"long")[m.getMonth()],w=String(m.getFullYear()),D=y(h),N="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],S=(n,t)=>t?e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":N[-1===n?0:1],onClick:()=>p(n),startIcon:e("span",{className:i("flex items-center",-1===n?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(l,{})})}):e("span",{"aria-hidden":"true",className:i(a[o],"w-(--n-cell)")}),M=n=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",n&&"rotate-180"),children:e(l,{})}),C=e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":g.chooseMonth,"aria-expanded":"month"===d,onClick:()=>v("month"===d?"day":"month"),endIcon:M("month"===d),children:x},"month"),z=e(r,{variant:"text",size:o,color:u,density:"compact",className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,onClick:()=>v("year"===d?"day":"year"),endIcon:M("year"===d),children:w},"year"),P=E(m.getFullYear());return n("div",{className:"flex items-center justify-between gap-1",children:[S(-1,f),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[o]),children:"year"===d?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",a[o],s[o]),children:`${P}–${P+Y-1}`}):"month"===d?z:n(t,D?{children:[C,z]}:{children:[z,C]})}),S(1,b)]})}const $={day:0,month:1,year:2};export function Calendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:u,selected:d,rangeStart:m=null,rangeEnd:h=null,onSelect:g,granularity:p="day",renderDay:v,onPreviewChange:y,minDate:w,maxDate:N,shouldDisableDate:C,showOutsideDays:k=!0,autoFocus:A=!1,showPreviousButton:F=!0,showNextButton:E=!0,labels:R,className:T}){const[B,K]=o.useState(p),L=$[B]<$[p]?p:B,O=o.useMemo(()=>d.filter(S),[d]),[U,q]=o.useState(()=>{const e=O.find(e=>D(e,s));return e?z(e):D(j(),s)?j():P(s)}),J=o.useRef(A),Q=o.useRef(null);o.useEffect(()=>{q(e=>D(e,s)?e:P(s))},[s]),o.useLayoutEffect(()=>{J.current&&(J.current=!1,Q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const W=o.useCallback(e=>x(e,w,N)||(C?.(e)??!1),[w,N,C]),X=e=>{J.current=!0,K(e)},Z=e=>{J.current=!0,u(e)};return n("div",{ref:Q,className:i("flex flex-col",c[t],T),style:{"--n-cell":H[t]},onPointerLeave:()=>y?.(null),children:[e(I,{size:t,color:r,view:L,month:s,locale:l,labels:R,showPreviousButton:F,showNextButton:E,onStep:e=>{u("day"===L?f(s,e):b(s,"month"===L?e:e*Y))},onViewChange:X}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===L?e(_,{size:t,locale:l,weekStartsOn:a,month:s,chosen:O,rangeStart:m,rangeEnd:h,focusedDate:U,renderDay:v,showOutsideDays:k,isDisabled:W,onSelect:e=>{q(e),g(e)},onPreviewChange:y,onMoveFocus:e=>{J.current=!0,q(e),D(e,s)||u(P(e))}}):"month"===L?e(V,{size:t,locale:l,month:s,chosen:O,minDate:w,maxDate:N,shouldDisable:"month"===p?C:void 0,onMoveCursor:Z,onPick:e=>{const n=M(s.getFullYear(),e,1);u(n),"month"===p?g(n):X("day")}}):e(G,{size:t,month:s,chosen:O,minDate:w,maxDate:N,shouldDisable:"year"===p?C:void 0,onMoveCursor:Z,onPick:e=>{if("year"===p){const n=M(e,0,1);return u(n),void g(n)}u(M(e,s.getMonth(),1)),X("month")}})})]})}function _({size:t,locale:o,weekStartsOn:r,month:l,chosen:a,rangeStart:c,rangeEnd:d,focusedDate:m,renderDay:h,showOutsideDays:b,isDisabled:x,onSelect:y,onPreviewChange:N,onMoveFocus:M}){const C=p(l,r),k=A(o,r,"short"),z=A(o,r,"long"),P=R(o,{dateStyle:"full"}),F=(E=d,S(Y=c)&&S(E)?v(Y,E)<=0?[Y,E]:[E,Y]:null);var Y,E;const T=j();return n("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:k.map((n,o)=>e("span",{role:"columnheader","aria-label":z[o],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",u[t]),children:n},o))}),C.map((o,c)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const c=!D(o,l);if(c&&!b)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},o.getTime());const u=a.some(e=>w(e,o)),d=null!==F&&v(o,F[0])>=0&&v(o,F[1])<=0,p=null!==F&&d&&w(o,F[0]),S=null!==F&&d&&w(o,F[1]);return n(q,{size:t,label:P.format(o),selected:u,inRange:d&&!u,rangeEdge:d?p&&S?"both":p?"start":S?"end":"middle":null,current:w(o,T)&&!u,muted:c,disabled:x(o),focused:w(o,m),className:i("size-(--n-cell)",s[t]),onClick:()=>y(o),onPointerEnter:()=>N?.(o),onKeyDown:e=>((e,n)=>{const t=(n.getDay()-r+7)%7,o={ArrowLeft:()=>g(n,-1),ArrowRight:()=>g(n,1),ArrowUp:()=>g(n,-7),ArrowDown:()=>g(n,7),Home:()=>g(n,-t),End:()=>g(n,6-t),PageUp:()=>f(n,e.shiftKey?-12:-1),PageDown:()=>f(n,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),M(o()))})(e,o),children:[o.getDate(),h?h(o):null]},o.getTime())})},c))]})}function V({size:n,locale:t,month:o,chosen:r,minDate:l,maxDate:a,shouldDisable:c,onMoveCursor:u,onPick:d}){const m=k(t,"short"),h=k(t,"long"),g=o.getFullYear(),b=new Date,p=e=>{const n={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),u(f(P(o),n)))};return e("div",{role:"grid",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(u=>{const f=3*t+u,v=M(g,f,1);return e(q,{size:n,label:`${h[f]} ${g}`,selected:r.some(e=>e.getFullYear()===g&&e.getMonth()===f),current:b.getFullYear()===g&&b.getMonth()===f,disabled:N(v,"month",l,a)||(c?.(v)??!1),focused:f===o.getMonth(),className:i("h-(--n-cell) w-full",s[n]),onClick:()=>d(f),onKeyDown:p,children:m[f]},f)})},t))})}function G({size:n,month:t,chosen:o,minDate:r,maxDate:l,shouldDisable:a,onMoveCursor:c,onPick:u}){const d=E(t.getFullYear()),m=(new Date).getFullYear(),h=e=>{const n={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-Y,PageDown:Y}[e.key];void 0!==n&&(e.preventDefault(),c(b(P(t),n)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(c=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(g=>{const f=d+4*c+g,b=M(f,0,1);return e(q,{size:n,label:String(f),selected:o.some(e=>e.getFullYear()===f),current:f===m,disabled:N(b,"year",r,l)||(a?.(b)??!1),focused:f===t.getFullYear(),className:i("h-(--n-cell) w-full",s[n]),onClick:()=>u(f),onKeyDown:h,children:f},f)})},c))})}function J(e){const n=e.parentElement;if(!n)return;const t=e.getBoundingClientRect(),o=n.getBoundingClientRect(),r=t.top-o.top-n.clientTop+n.scrollTop,l=r+t.height;r<n.scrollTop?n.scrollTop=r:l>n.scrollTop+n.clientHeight&&(n.scrollTop=l-n.clientHeight)}export function TimeGrid({size:t,density:r,locale:l,value:c,referenceDate:u,onChange:d,hour12:h,showSeconds:g,hourStep:f,minuteStep:b,secondStep:p,shouldDisableTime:v,autoFocus:x=!1,labels:y,className:w}){const D=c??u,N=o.useRef(null),[S,M]=o.useMemo(()=>C(l),[l]);o.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(J),x){const n=e?.querySelector('[role="listbox"]');(n?.querySelector('[data-chosen="true"]')??n?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[x]);const k=o.useMemo(()=>{const e=Math.ceil((h?12:24)/f),n=Array.from({length:e},(e,n)=>n*f);return h?n.map(e=>0===e?12:e):n},[h,f]),z=o.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,n)=>n*b),[b]),P=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,n)=>n*p),[p]),j=e=>String(e).padStart(2,"0"),A=h?D.getHours()%12||12:D.getHours(),Y=(n,o,r,l,u)=>e("div",{role:"listbox","aria-label":o,className:i("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:r.map(o=>{const r=((e,n)=>F(D,"hour"===e?{hours:h?n%12+(D.getHours()>=12?12:0):n}:"minute"===e?{minutes:n}:"second"===e?{seconds:n}:{hours:D.getHours()%12+12*n}))(n,o),m=null!==c&&l(o),g=v?.(r,n)??!1;return e("button",{type:"button",role:"option","aria-selected":m,"aria-disabled":g||void 0,"data-chosen":m?"true":void 0,className:i(U,K[t],a[t],s[t],"w-full shrink-0",g?"cursor-not-allowed text-(--neba-disabled-fg)":m?"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:()=>{g||d(r)},children:u(o)},o)})},n);return n("div",{ref:N,className:i("flex","compact"===r?"gap-0.5":"gap-1",w),style:{"--n-cell":H[t]},children:[Y("hour",y.hour,k,e=>e===A,e=>h?String(e):j(e)),Y("minute",y.minute,z,e=>e===D.getMinutes(),j),g?Y("second",y.second,P,e=>e===D.getSeconds(),j):null,h?Y("meridiem",y.meridiem,[0,1],e=>(D.getHours()>=12?1:0)===e,e=>0===e?S:M):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":R(l,{hour:"numeric",minute:"2-digit",...g?{second:"2-digit"}:{}}).format(c)})]})}
|
|
@@ -273,8 +273,15 @@ interface DataTableProps {
|
|
|
273
273
|
* It is clipped rather than `display: none`, for the reason `srOnlyClasses`
|
|
274
274
|
* gives: the second one takes it off the accessibility tree along with the
|
|
275
275
|
* screen, which would leave the chart exactly as mute as before.
|
|
276
|
+
*
|
|
277
|
+
* Memoised, and it is the one component in this file that has to be. It is a
|
|
278
|
+
* row per category and a cell per series, and it is built in the same render
|
|
279
|
+
* body that holds the crosshair's state — so without this every cell of it is
|
|
280
|
+
* reconciled again for each pixel the pointer travels across the picture, on a
|
|
281
|
+
* table nobody is looking at. Every prop it takes is either a primitive or
|
|
282
|
+
* something already memoised above.
|
|
276
283
|
*/
|
|
277
|
-
declare
|
|
284
|
+
declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
|
|
278
285
|
interface SurfaceProps extends Omit<BoxProps, 'children'> {
|
|
279
286
|
legend: React.ReactNode;
|
|
280
287
|
legendSide: NonNullable<NebaChartLegend['side']>;
|
|
@@ -391,8 +398,14 @@ interface CartesianProps extends CartesianChartProps {
|
|
|
391
398
|
* @default 24
|
|
392
399
|
*/
|
|
393
400
|
markRadius?: number;
|
|
394
|
-
/**
|
|
395
|
-
|
|
401
|
+
/**
|
|
402
|
+
* The table under the chart, for a chart whose data is not a grid.
|
|
403
|
+
*
|
|
404
|
+
* It is handed the frame's own `format`, already stable across a render, so a
|
|
405
|
+
* table of its own is memoised on the same terms `ChartDataTable` is rather
|
|
406
|
+
* than building a formatter that a pointer moving over the picture rebuilds.
|
|
407
|
+
*/
|
|
408
|
+
table?: (id: string, format: (value: number) => string) => React.ReactNode;
|
|
396
409
|
/** The legend's swatch, for a chart whose marks are not all the same shape. */
|
|
397
410
|
swatch?: (index: number, color: string) => React.ReactNode;
|
|
398
411
|
/**
|