neba 1.11.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-appear/AnimateAppear.d.ts +2 -13
- package/dist/components/animate-appear/AnimateAppear.js +1 -1
- package/dist/components/animate-blink/AnimateBlink.d.ts +2 -2
- package/dist/components/animate-blink/AnimateBlink.js +1 -1
- package/dist/components/animate-counter/AnimateCounter.d.ts +45 -0
- package/dist/components/animate-counter/AnimateCounter.js +1 -0
- package/dist/components/animate-counter/index.d.ts +1 -0
- package/dist/components/animate-counter/index.js +1 -0
- package/dist/components/animate-fade/AnimateFade.d.ts +2 -2
- package/dist/components/animate-fade/AnimateFade.js +1 -1
- package/dist/components/animate-float/AnimateFloat.d.ts +35 -0
- package/dist/components/animate-float/AnimateFloat.js +1 -0
- package/dist/components/animate-float/index.d.ts +1 -0
- package/dist/components/animate-float/index.js +1 -0
- package/dist/components/animate-grow/AnimateGrow.d.ts +2 -2
- package/dist/components/animate-grow/AnimateGrow.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-reveal/AnimateReveal.d.ts +41 -0
- package/dist/components/animate-reveal/AnimateReveal.js +1 -0
- package/dist/components/animate-reveal/index.d.ts +1 -0
- package/dist/components/animate-reveal/index.js +1 -0
- package/dist/components/animate-rotate/AnimateRotate.d.ts +2 -2
- package/dist/components/animate-rotate/AnimateRotate.js +1 -1
- package/dist/components/animate-scramble/AnimateScramble.d.ts +48 -0
- package/dist/components/animate-scramble/AnimateScramble.js +1 -0
- package/dist/components/animate-scramble/index.d.ts +1 -0
- package/dist/components/animate-scramble/index.js +1 -0
- package/dist/components/animate-shake/AnimateShake.d.ts +39 -0
- package/dist/components/animate-shake/AnimateShake.js +1 -0
- package/dist/components/animate-shake/index.d.ts +1 -0
- package/dist/components/animate-shake/index.js +1 -0
- package/dist/components/animate-slide/AnimateSlide.d.ts +2 -2
- package/dist/components/animate-slide/AnimateSlide.js +1 -1
- package/dist/components/animate-split/AnimateSplit.d.ts +61 -0
- package/dist/components/animate-split/AnimateSplit.js +1 -0
- package/dist/components/animate-split/index.d.ts +1 -0
- package/dist/components/animate-split/index.js +1 -0
- package/dist/components/animate-typing/AnimateTyping.js +1 -1
- package/dist/components/animate-zoom/AnimateZoom.d.ts +2 -2
- package/dist/components/animate-zoom/AnimateZoom.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/bar-chart/BarChart.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/checkbox/Checkbox.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/container/Container.d.ts +12 -4
- package/dist/components/container/Container.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/flex/Flex.d.ts +93 -0
- package/dist/components/flex/Flex.js +1 -0
- package/dist/components/flex/index.d.ts +2 -0
- package/dist/components/flex/index.js +1 -0
- package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/components/footer/Footer.d.ts +4 -3
- package/dist/components/footer/Footer.js +1 -1
- package/dist/components/gallery/Gallery.d.ts +150 -0
- package/dist/components/gallery/Gallery.js +1 -0
- package/dist/components/gallery/GalleryViewer.d.ts +30 -0
- package/dist/components/gallery/GalleryViewer.js +1 -0
- package/dist/components/gallery/index.d.ts +2 -0
- package/dist/components/gallery/index.js +1 -0
- 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/grid-container/GridContainer.js +1 -1
- package/dist/components/header/Header.d.ts +5 -4
- package/dist/components/header/Header.js +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
- package/dist/components/hover-card/HoverCard.js +1 -1
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/image/Image.d.ts +155 -7
- package/dist/components/image/Image.js +1 -1
- package/dist/components/image/index.d.ts +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/pie-chart/PieChart.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/radio-group/RadioGroup.js +1 -1
- package/dist/components/rating/Rating.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 +17 -11
- 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/show/Show.d.ts +60 -0
- package/dist/components/show/Show.js +1 -0
- package/dist/components/show/index.d.ts +2 -0
- package/dist/components/show/index.js +1 -0
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/slider/Slider.d.ts +37 -2
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/spoiler/Spoiler.js +1 -1
- package/dist/components/stack/Stack.d.ts +126 -0
- package/dist/components/stack/Stack.js +1 -0
- package/dist/components/stack/index.d.ts +1 -0
- package/dist/components/stack/index.js +1 -0
- package/dist/components/statistic/Statistic.d.ts +8 -3
- package/dist/components/tabs/Tabs.d.ts +46 -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/toggle/Toggle.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/tree-view/TreeView.js +1 -1
- package/dist/components/typography/Typography.js +1 -1
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/useMediaQuery.d.ts +35 -1
- package/dist/hooks/useMediaQuery.js +1 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +65 -2
- package/dist/internal/animate.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 +48 -3
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +16 -0
- package/dist/internal/chart.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 +29 -27
- package/dist/internal/grid.js +1 -1
- package/dist/internal/i18n.d.ts +92 -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.d.ts +9 -2
- package/dist/internal/media.js +1 -1
- package/dist/internal/observe.js +1 -1
- package/dist/internal/page-layout.d.ts +11 -9
- package/dist/internal/page-layout.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/responsive.d.ts +97 -0
- package/dist/internal/responsive.js +1 -0
- package/dist/internal/styles.d.ts +140 -2
- package/dist/internal/styles.js +1 -1
- package/dist/internal/text.d.ts +32 -0
- package/dist/internal/text.js +1 -0
- 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 +411 -30
- package/dist/types.d.ts +119 -6
- package/package.json +19 -18
- package/dist/components/avatar-group/AvatarGroup.d.ts +0 -47
- package/dist/components/avatar-group/AvatarGroup.js +0 -1
- package/dist/components/avatar-group/index.d.ts +0 -2
- package/dist/components/avatar-group/index.js +0 -1
- package/dist/internal/avatar-group.d.ts +0 -22
- package/dist/internal/avatar-group.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{CheckIcon as o,CodeIcon as l,CopyIcon as r}from"../../internal/icons.js";import{codeMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{CheckIcon as o,CodeIcon as l,CopyIcon as r}from"../../internal/icons.js";import{codeMessages as i,useMessages as a}from"../../internal/i18n.js";import{canonicalLanguage as s,highlight as c,plainLines as d}from"../../internal/highlight.js";import{cx as p,hasContent as m,metaTextClasses as u,radiusClasses as f,srOnlyClasses as x,surfaceSlots as g,toLength as h,transitionClasses as y}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";export{registerLanguage}from"../../internal/highlight.js";const b={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},w={default:{xs:"py-2",sm:"py-3",md:"py-3.5",lg:"py-4",xl:"py-5"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-3.5"}},N={default:{xs:"px-2",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"}},k={default:{xs:"px-2.5 py-1",sm:"px-3.5 py-1",md:"px-4 py-1.5",lg:"px-4.5 py-2",xl:"px-5.5 py-2"},compact:{xs:"px-2 py-0.5",sm:"px-2.5 py-0.5",md:"px-3 py-1",lg:"px-3.5 py-1",xl:"px-4 py-1.5"}};export const CodeBlock=/*@__PURE__*/n.forwardRef(function(S,j){const{code:L,language:M,theme:T="dark",size:C="md",color:_="primary",density:A="default",elevation:F=0,highlight:R=!0,toolbar:z=!0,title:E,showLanguage:H=!0,copyable:K=!0,rawToggle:$=!1,highlightLines:D,lineNumbers:B=!1,startLine:I=1,prompt:q,wrap:G=!1,maxHeight:J,fontFamily:O,fontSize:P,lineHeight:Q,letterSpacing:U,locale:V,copyLabel:W,copiedLabel:X,rawLabel:Y,onCopy:Z,className:ee,style:te,...ne}=v(S,["size","density","locale"]),oe=a(i,V),le=n.useMemo(()=>L.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[L]),re=s(M),[ie,ae]=n.useState(!1),[se,ce]=n.useState(null),[de,pe]=n.useState(null),me=R&&!ie&&null!==re;n.useEffect(()=>{if(!me||!re)return void pe(null);let e=!1;return c(le,re).then(t=>{e||pe(t)},()=>{e||pe(null)}),()=>{e=!0}},[le,re,me]);const ue=n.useMemo(()=>me&&de?de:d(le),[me,de,le]),fe=`${String(I+Math.max(ue.length-1,0)).length}ch`,xe=n.useRef(void 0);n.useEffect(()=>()=>clearTimeout(xe.current),[]);const ge=n.useMemo(()=>function(e){const t=new Set;if(void 0===e)return t;for(const n of Array.isArray(e)?e:[e])if("number"!=typeof n)for(const e of n.split(",")){const n=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!n)continue;const o=Number(n[1]),l=void 0===n[2]?o:Number(n[2]);for(let e=Math.min(o,l);e<=Math.max(o,l);e+=1)t.add(e)}else Number.isFinite(n)&&t.add(Math.trunc(n));return t}(D),[D]),he=n.useRef(null),ye=W??oe.copy,ve=X??oe.copied,be=Y??oe.raw,we=p("inline-flex shrink-0 cursor-pointer items-center gap-1 border-0 bg-transparent","px-1.5 py-1 text-(--n-code-dim) hover:text-(--n-code-fg) hover:bg-(--n-code-hover)",f.xs,u[C],"[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",y,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),Ne=m(E)?void 0:re??oe.code,ke=e("div",{role:"region","aria-label":"string"==typeof E?E:Ne,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=he.current,n="undefined"==typeof window?null:window.getSelection();if(!t||!n)return;e.preventDefault();const o=document.createRange();o.selectNodeContents(t),n.removeAllRanges(),n.addRange(o)},className:p("min-h-0 overflow-auto",w[A][C],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:-outline-offset-2"),style:void 0===J?void 0:{maxHeight:h(J)},children:e("pre",{ref:he,className:p("m-0 bg-transparent p-0 font-mono",G?"w-full":"w-max min-w-full"),children:ue.map((t,o)=>{const l=I+o;return e("div",{className:p("neba-code-line",N[A][C]),"data-line":B?l:void 0,"data-mark":ge.has(l)?"":void 0,"data-prompt":q&&t.length>0?q:void 0,children:e("code",{children:t.map((t,o)=>t.token?e("span",{className:t.token,children:t.text},o):e(n.Fragment,{children:t.text},o))})},o)})})});return t("div",{ref:j,className:p("neba-code flex min-w-0 flex-col overflow-hidden",f[C],"border bg-(--n-code-bg) text-(--n-code-fg) [border-color:var(--n-code-rule)]","[box-shadow:var(--n-elev)]",y,ee),"data-code-theme":T,"data-code-wrap":G?"true":void 0,style:{...g(_,F),"--n-code-gutter":fe,...O?{fontFamily:O}:null,...void 0===P?null:{fontSize:h(P)},...void 0===Q?null:{lineHeight:Q},...void 0===U?null:{letterSpacing:h(U)},...te},...ne,children:[z&&(H||K||$||m(E))?t("div",{className:p("flex min-w-0 items-center gap-1 border-b [border-color:var(--n-code-rule)]",k[A][C]),children:[m(E)?e("span",{className:p("min-w-0 truncate font-mono",u[C]),children:E}):null,H&&re?e("span",{className:p("min-w-0 truncate font-mono tracking-wide text-(--n-code-dim) uppercase select-none",u[C]),children:re}):null,e("span",{className:"flex-1"}),$&&R?e("button",{type:"button","aria-pressed":ie,"aria-label":be,title:be,onClick:()=>ae(e=>!e),className:p(we,ie?"text-(--n-code-fg) bg-(--n-code-hover)":""),children:e(l,{})}):null,K?t("button",{type:"button",onClick:async()=>{const e=await async function(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}const t=document.activeElement;try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.setAttribute("aria-hidden","true"),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const n=document.execCommand("copy");return t.remove(),n}catch{return!1}finally{t instanceof HTMLElement&&t.isConnected&&t.focus()}}(le);clearTimeout(xe.current),ce(e),xe.current=setTimeout(()=>ce(null),2e3),e&&Z?.(le)},className:we,children:[e(se?o:r,{}),e("span",{children:null===se?ye:se?ve:oe.copyFailed})]}):null]}):null,e("div",{className:p("flex min-h-0 flex-col",b[C]),children:ke}),e("span",{"aria-live":"polite",className:x,children:null===se?"":se?ve:oe.copyFailed})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{PickerShell as l}from"../../internal/picker.js";import{CheckIcon as n}from"../../internal/icons.js";import{colorMessages as t,useMessages as o}from"../../internal/i18n.js";import{checkerBackground as s,clamp as i,cssColor as d,defaultSwatches as h,formatColor as c,parseColor as u,readableInk as f}from"../../internal/color.js";import{controlTextClasses as p,cx as b,focusRingClasses as m,metaTextClasses as g,radiusClasses as v,stackGapClasses as x,surfaceSlots as y}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const N={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},k={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},C={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},_={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},j={xs:10,sm:12,md:14,lg:16,xl:18},z=["relative overflow-hidden border","[border-color:var(--neba-border)]","[box-shadow:var(--neba-plate-glass)]"].join(" "),I=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function T(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:i((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:i((e.clientY-a.top)/a.height,0,1)}}function A(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function D({hsv:r,alphaValue:l,onChange:t,text:o,onTextChange:h,withAlpha:p,swatches:x,editable:y,size:w,inert:D,labels:M}){const O=j[w],L=-O/2,P=d({h:r.h,s:100,v:100}),V=d(r),$=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),S=(e,a,r,l)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,onKeyDown:e=>{const a=A(e);!D&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:b("flex flex-col",N[w],_[w]),children:[e("div",{...$(e=>{const{x:a,y:n}=T(e);t({hsv:{h:r.h,s:100*a,v:100*(1-n)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":M.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,onKeyDown:e=>{const a=A(e);!D&&a&&(e.preventDefault(),t({hsv:{h:r.h,s:i(r.s+a.x,0,100),v:i(r.v+a.y,0,100)},alpha:l}))},className:b(z,k[w],v[w],m,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:P,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:I,style:{width:O,height:O,left:`${r.s}%`,top:100-r.v+"%",marginLeft:L,marginTop:L,backgroundColor:V}})}),e("div",{...$(e=>t({hsv:{...r,h:360*T(e).x},alpha:l})),...S(M.hue,r.h,360,e=>t({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:b(z,C[w],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:I,style:{width:O,height:O,left:r.h/360*100+"%",top:"50%",marginLeft:L,marginTop:L,backgroundColor:P}})}),p?a("div",{...$(e=>t({hsv:r,alpha:T(e).x})),...S(M.alpha,100*l,100,e=>t({hsv:r,alpha:i(l+e/100,0,1)})),className:b(z,C[w],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:s,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${d(r,0)}, ${V})`}}),e("span",{className:I,style:{width:O,height:O,left:100*l+"%",top:"50%",marginLeft:L,marginTop:L,backgroundColor:d(r,l)}})]}):null,y?a("div",{className:b("flex items-center",_[w]),children:[e("span",{"aria-hidden":"true",className:b("shrink-0 rounded-full border","[border-color:var(--neba-border)]"),style:{width:O+6,height:O+6,...s},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:d(r,l)}})}),e("input",{type:"text",value:o,readOnly:D,spellCheck:!1,autoComplete:"off","aria-label":M.value,onChange:e=>h(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--neba-border)]",v.xs,g[w],"text-(--neba-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1")})]}):null,x&&x.length>0?e("div",{role:"group","aria-label":M.swatches,className:"grid grid-cols-8 gap-1",children:x.map(a=>{const o=u(a),s=null!==o&&c(o.hsv,o.alpha,"hex")===c(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":s,onClick:()=>{o&&t(o)},className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",m,D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--neba-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:s&&o?e("span",{style:{color:f(o.hsv)},children:e(n,{})}):null},a)})}):null]})}function M(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const O={h:217,s:87,v:82};export const ColorPicker=/*@__PURE__*/r.forwardRef(function(n,i){const{value:f,defaultValue:m="#1a58d1",onValueChange:v,format:N="hex",alpha:k=!1,swatches:C=h,inline:_=!1,editable:j=!0,label:z,description:I,error:T,invalid:A,required:L=!1,disabled:P=!1,readOnly:V=!1,fullWidth:$=!1,clearable:S=!1,name:q,open:K,defaultOpen:R=!1,onOpenChange:B,locale:W,labels:E,variant:U="outline",size:X="md",color:Y="primary",density:F="default",elevation:G=0,className:H,style:J,...Q}=w(n,["size","density","variant","locale"]),Z=o(t,W),ee=r.useMemo(()=>({...Z,...E}),[Z,E]),[ae,re]=r.useState(m),le=f??ae,[ne,te]=r.useState(R),oe=K??ne,[se,ie]=r.useState(()=>u(le)??{hsv:O,alpha:1}),[de,he]=r.useState(()=>le||""),ce=c(se.hsv,k?se.alpha:1,N),ue=""===le;r.useEffect(()=>{const e=u(le);e?c(e.hsv,k?e.alpha:1,N)!==ce&&(he(le),ie(e)):he(le)},[le,ce,k,N]);const fe=(e,a)=>{ie(e);const r=c(e.hsv,k?e.alpha:1,N);he(a??r),void 0===f&&re(r),v?.(r)},pe=P||V,be=e(D,{hsv:se.hsv,alphaValue:se.alpha,onChange:fe,text:de,onTextChange:e=>{he(e);const a=u(e);a&&fe(a,e)},withAlpha:k,swatches:C,editable:j,size:X,inert:pe,labels:ee}),me=q?e("input",{type:"hidden",name:q,value:ue?"":ce}):null;if(_){const r=A??Boolean(T)?"danger":Y;return a("div",{ref:i,className:b("flex flex-col",x[X],H),style:{...y(r,G),...J},...Q,children:[z?e("span",{className:b(g[X],"font-medium",P?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:z}):null,be,I?e("span",{className:b(g[X],"text-(--neba-muted-fg)"),children:I}):null,T?e("span",{className:b(g[X],"text-(--n-accent)"),children:T}):null,me]})}return e("div",{ref:i,className:$?"w-full":"inline-block",...Q,children:e(l,{variant:U,size:X,color:Y,density:F,elevation:G,style:J,label:z,description:I,error:T,invalid:A,required:L,disabled:P,readOnly:V,fullWidth:$,className:H,startIcon:e("span",{"aria-hidden":"true",className:b("block size-[1.15em] shrink-0 rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]"),style:s,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ue?"transparent":d(se.hsv,k?se.alpha:1)}})}),display:ue?ee.empty:ce,samples:M(N,k),empty:ue,clearable:S,onClear:()=>{void 0===f&&re(""),he(""),v?.("")},open:oe,onOpenChange:e=>{void 0===K&&te(e),B?.(e)},clearLabel:ee.clear,hiddenValues:q?[{name:q,value:ue?"":ce}]:void 0,children:e("div",{className:p[X],children:be})})})});
|
|
@@ -51,6 +51,24 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
|
|
|
51
51
|
/** The initially chosen value, for an uncontrolled combobox. */
|
|
52
52
|
defaultValue?: Selection<Multiple> | null;
|
|
53
53
|
onValueChange?: (value: Selection<Multiple>) => void;
|
|
54
|
+
/**
|
|
55
|
+
* How the typed text narrows the list, when the default is not what should
|
|
56
|
+
* happen.
|
|
57
|
+
*
|
|
58
|
+
* `false` turns the filter off, which is what a list that is **already**
|
|
59
|
+
* narrowed needs: a server that matched on a keyword, a description or a
|
|
60
|
+
* synonym sends back rows whose visible label does not contain the query at
|
|
61
|
+
* all, and filtering them a second time here drops exactly the results the
|
|
62
|
+
* search was for. Fetch on `onInputValueChange`, hand the answer to `items`,
|
|
63
|
+
* and let it through.
|
|
64
|
+
*
|
|
65
|
+
* A function decides per option — matching a `value` as well as a label, or
|
|
66
|
+
* matching from the start of a word rather than anywhere in it. The row that
|
|
67
|
+
* offers to add what was typed is never filtered out: it *is* the query.
|
|
68
|
+
*
|
|
69
|
+
* @default the accent- and case-insensitive match Base UI does
|
|
70
|
+
*/
|
|
71
|
+
filter?: false | ((option: ComboboxOption, query: string) => boolean);
|
|
54
72
|
/** Called as the text in the input changes — the filter query, not the value. */
|
|
55
73
|
onInputValueChange?: (inputValue: string) => void;
|
|
56
74
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{keyHandler as h}from"../../internal/keys.js";import{chipRemoveClasses as b,
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{keyHandler as h}from"../../internal/keys.js";import{chipRemoveClasses as b,controlTextLeadingClasses as f,cx as g,disabledClasses as x,fieldFocusTransitionClasses as v,fieldHeightClasses as y,fieldReadOnlyClasses as N,fieldRestClasses as w,fieldRingClasses as j,gapClasses as C,hasContent as L,iconClasses as I,metaTextClasses as S,paddingXClasses as z,popupFadeClasses as O,radiusClasses as V,stackGapClasses as _,surfaceClasses as $,surfaceSlots as k,transitionClasses as A}from"../../internal/styles.js";import{useStyleDefaults as M}from"../../internal/defaults.js";const R=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",A,v,j,I].join(" "),T={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},q=[$,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",O].join(" "),E=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",A,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),F=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function P(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox(v){const{variant:j="outline",size:I="md",color:O="primary",density:$="default",elevation:A=0,items:B,multiple:D,value:G,defaultValue:H,onValueChange:K,filter:W,onInputValueChange:J,allowCustom:Q=!0,customLabel:U,clearable:X=!1,locale:Y,emptyMessage:Z,limit:ee,placeholder:ae,label:le,description:te,error:ne,invalid:ie,startIcon:re,fullWidth:se=!1,disabled:oe=!1,readOnly:ce=!1,required:de=!1,name:me,open:ue,defaultOpen:pe,onOpenChange:he,clearLabel:be,removeLabel:fe,inputRef:ge,shortcuts:xe,id:ve,className:ye,classNames:Ne,style:we,...je}=M(v,["size","density","variant","locale"]),Ce=c(s,Y),Le=c(r,Y),Ie=fe??(e=>o(Ce.remove,{label:e})),Se=L(ne),ze=ie??Se,Oe=ze?"danger":O,Ve=!0===D,_e=l.useMemo(()=>B.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[B]),[$e,ke]=l.useState(()=>P(H)),Ae=void 0===G?$e:P(G),[Me,Re]=l.useState(""),Te=l.useMemo(()=>new Map(_e.map(e=>[e.value,e])),[_e]),qe=l.useCallback(e=>Te.get(e)??{value:e,label:String(e),custom:!0},[Te]),Ee=Me.trim(),Fe=Ee.toLocaleLowerCase(),Pe=""===Ee||_e.some(e=>e.label.toLocaleLowerCase()===Fe||String(e.value).toLocaleLowerCase()===Fe)||Ae.some(e=>String(e).toLocaleLowerCase()===Fe),Be=!Q||ce||oe||Pe?null:Ee,De=l.useMemo(()=>null===Be?_e:[..._e,{value:Be,label:Be,custom:!0}],[_e,Be]),Ge=Ve?Ae.map(qe):Ae.length>0?qe(Ae[0]):null;const He=z[$][I],Ke=[R,f[I],V[I],C[I],Ve?T[I]:y[I],`${He} pe-1.5`,oe?x[j]:ce?N[j]:w[j],Ne?.shell].filter(Boolean).join(" "),We=["min-w-0 flex-1 self-stretch 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",Ne?.control].filter(Boolean).join(" "),Je=a=>e(t.Input,{ref:ge,onKeyDown:h(xe),placeholder:ae,className:Ve?`${We} min-w-16 ${a?"ms-1.5":""}`:We});return a(n.Root,{disabled:oe,invalid:ze,className:g("flex-col align-top",_[I],se?"flex w-full":"inline-flex",ye??""),style:{...k(Oe,A),...we},...je,children:[le?e(n.Label,{className:g(S[I],"font-medium",oe?"text-(--neba-disabled-fg)":"text-(--neba-fg)",Ne?.label),children:le}):null,a(t.Root,{id:ve,name:me,items:De,multiple:Ve,value:Ge,onValueChange:e=>{!function(e){void 0===G&&ke(e),K?.(Ve?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Re(e),J?.(e)},open:ue,defaultOpen:pe,onOpenChange:e=>he?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:ee,filter:!1===W?null:W?(e,a)=>!0===e.custom||W(e,a):void 0,disabled:oe,readOnly:ce,required:de,children:[a(t.InputGroup,{className:Ke,children:[re?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:re}):null,Ve?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(t.Chip,{render:e(i,{variant:"outline",size:I,color:Oe,density:"compact",disabled:oe,className:Ne?.chip,endIcon:ce||oe?null:e(t.ChipRemove,{"aria-label":Ie(a.label),className:b,children:e(u,{})})}),children:a.label},String(a.value))),Je(n.length>0)]})})}):Je(!1),X&&!ce?e(t.Clear,{"aria-label":be??Le.clear,className:F,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof le?void 0:"Open",className:F,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:6,children:a(t.Popup,{className:g(q,V[I],f[I],Ne?.popup),style:k(Oe,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:Z??Ce.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:g(E,Ne?.item),children:n.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:U?U(n.label):`Add “${n.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),te?e(n.Description,{className:g(S[I],"text-(--neba-muted-fg)",Ne?.description),children:te}):null,e(n.Error,Se?{match:!0,className:g(S[I],"text-(--n-accent)",Ne?.error),children:ne}:{className:g(S[I],"text-(--n-accent)",Ne?.error)})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as l}from"@base-ui/react/autocomplete";import{Dialog as n}from"@base-ui/react/dialog";import{Shortcut as r}from"../shortcut/Shortcut.js";import{matchesShortcut as s}from"../../internal/keys.js";import{commandMessages as o,useMessages as i}from"../../internal/i18n.js";import{searchHaystack as c,searchText as d}from"../../internal/search.js";import{controlTextLeadingClasses as m,cx as p,hasContent as u,metaTextClasses as h,popupFadeClasses as x,radiusClasses as f,surfaceClasses as b,surfaceSlots as g,toLength as v}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const y=["fixed inset-0 z-(--neba-z-portal) bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",x].join(" "),N=[b,"relative flex w-full flex-col overflow-hidden","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]",x].join(" "),k={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},j={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},z={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},C={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},S=["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--neba-duration)_var(--neba-ease)]","data-[highlighted]:bg-(--n-soft) data-[highlighted]:text-(--n-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)"].join(" ");function E(e){return c([e.label,e.group,...e.keywords??[]])}export function CommandPalette(c){const{items:x,open:b,defaultOpen:M=!1,onOpenChange:L,onSelect:O,shortcut:P="Mod+K",width:V,maxHeight:_=320,locale:D,placeholder:F,emptyMessage:H,label:I,size:R="md",color:$="primary",density:B="default",className:K,classNames:T}=w(c,["size","density","locale"]),W=i(o,D),[q,A]=a.useState(M),[G,J]=a.useState(""),Q=b??q,U=a.useCallback(e=>{void 0===b&&A(e),L?.(e)},[b,L]);a.useEffect(()=>{if(!1===P)return;const e=e=>{s(e,P)&&(e.preventDefault(),U(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[P,U]);const X=a.useMemo(()=>x.map(E),[x]),Y=a.useMemo(()=>{const e=d(G);return""===e?x:x.filter((t,a)=>X[a].includes(e))},[x,X,G]),Z=v(V),ee=v(_);return e(n.Root,{open:Q,onOpenChange:e=>{e||J(""),U(e)},children:t(n.Portal,{children:[e(n.Backdrop,{className:p("neba-portal",y,T?.backdrop)}),e(n.Viewport,{className:p("neba-portal fixed inset-0 z-(--neba-z-portal) flex justify-center p-4 pt-[12vh]",T?.viewport),children:e(n.Popup,{"aria-label":I??W.label,className:p(N,f[R],m[R],void 0===Z?k[R]:"","self-start",K),style:{...g($,3),...void 0===Z?null:{maxWidth:Z}},children:t(l.Root,{open:!0,mode:"list",items:Y,filter:null,value:G,onValueChange:e=>J(e),itemToStringValue:e=>e.label,children:[e("div",{className:`flex shrink-0 items-center border-b [border-color:var(--n-line)] ${C[R]}`,children:e(l.Input,{autoFocus:!0,placeholder:F??W.search,className:p("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--neba-muted-fg) caret-(--n-accent)",j[R],T?.input)})}),e(l.List,{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",T?.list),style:{maxHeight:ee},children:(n,s)=>t(a.Fragment,{children:[n.group&&n.group!==Y[s-1]?.group?e("div",{role:"presentation",className:p(C[R],"pt-2 pb-1 font-medium text-(--neba-muted-fg)",h[R],T?.group),children:n.group}):null,t(l.Item,{index:s,value:n,disabled:n.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),O?.(e),U(!1))})(n),className:p(S,f[R],C[R],z["compact"===B?"xs":R],T?.item),children:[u(n.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:n.icon}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:n.label}),u(n.description)?e("span",{className:`truncate text-(--neba-muted-fg) ${h[R]}`,children:n.description}):null]}),n.shortcut?e(r,{size:"xs",keys:n.shortcut,className:"shrink-0"}):null]})]},n.value)}),e(l.Empty,{className:p(C[R],"py-6 text-center text-(--neba-muted-fg)",h[R],T?.empty),children:H??W.empty})]})})})]})})}
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
-
import type { NebaDensity, NebaSize } from '../../types.js';
|
|
3
|
+
import type { NebaDensity, NebaMeasure, NebaResponsive, NebaSize } from '../../types.js';
|
|
4
4
|
export interface ContainerProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
5
|
/**
|
|
6
|
-
* How wide the content is allowed to get
|
|
7
|
-
*
|
|
6
|
+
* How wide the content is allowed to get.
|
|
7
|
+
*
|
|
8
|
+
* A step of the measure ladder — `xs` 30rem, `sm` 40rem, `md` 48rem, `lg`
|
|
9
|
+
* 64rem, `xl` 80rem — or any length of your own: `'60ch'`, `'min(90vw,
|
|
10
|
+
* 72rem)'`, or a number, which is pixels. The four upper steps are the
|
|
11
|
+
* breakpoint floors; `xs` is not, because a measure of zero is not a thing.
|
|
12
|
+
*
|
|
13
|
+
* Responsive: `maxWidth={{ xs: 'none', lg: 'xl' }}` lets the content run to
|
|
14
|
+
* the gutters until 64rem and holds it at 80rem from there on. Every entry
|
|
15
|
+
* applies from its own breakpoint up.
|
|
8
16
|
*
|
|
9
17
|
* `none`, the default, is no limit: a Container's job is the gutter, and a
|
|
10
18
|
* measure is a second decision that a page should have to ask for.
|
|
11
19
|
* @default 'none'
|
|
12
20
|
*/
|
|
13
|
-
maxWidth?:
|
|
21
|
+
maxWidth?: NebaResponsive<NebaMeasure>;
|
|
14
22
|
/**
|
|
15
23
|
* The gutter, on the `size`/`density` scale. Turn it off to keep the
|
|
16
24
|
* centring and the measure without the padding.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as t}from"../box/Box.js";import{responsiveSlots as s}from"../../internal/responsive.js";import{cx as n,measureValue as o}from"../../internal/styles.js";import{useStyleDefaults as a}from"../../internal/defaults.js";export const Container=/*@__PURE__*/e.forwardRef(function(e,i){const{maxWidth:m,padded:d=!0,size:l="md",density:f="default",centered:c=!0,render:p,className:u,style:x,children:w,...y}=a(e,["size","density"]),b=n("neba-measure block w-full max-w-(--n-max-w)",c?"mx-auto":"",d?t[f][l]:"",u??"");return r({render:p,ref:i,props:{className:b,style:{...s("max-w",m,o),...x},children:w,...y}})});
|
|
@@ -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{Box as a}from"../box/Box.js";import{Button as l}from"../button/Button.js";import{Checkbox as o}from"../checkbox/Checkbox.js";import{Pagination as s}from"../pagination/Pagination.js";import{Select as i}from"../select/Select.js";import{TextField as c}from"../text-field/TextField.js";import{compareValues as u,dataHeaderHeights as d,dataRowHeights as p,dataTickWidths as m,defaultColumnWidth as g,keysBetween as f,minColumnWidth as h,nextSort as y,pageBounds as b,sortRows as v,virtualWindow as k}from"../../internal/data-table.js";import{beginPointerDrag as w}from"../../internal/drag.js";import{emptyMessages as x,fillMessage as C,tableMessages as S,useMessages as M}from"../../internal/i18n.js";import{searchHaystack as N,searchText as K}from"../../internal/search.js";import{ChevronIcon as z}from"../../internal/icons.js";import{observeResize as _}from"../../internal/observe.js";import{downloadText as j,toCsv as $}from"../../internal/csv.js";import{controlTextLeadingClasses as E,cx as D,hasContent as P,metaTextClasses as R,paddingXValues as T,srOnlyClasses as A,toLength as I}from"../../internal/styles.js";import{useStyleDefaults as B}from"../../internal/defaults.js";const L=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),F={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},O=["group/sort flex w-full min-w-0 cursor-pointer items-center gap-1","text-inherit [outline:none]","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),H=["absolute inset-y-0 z-10 w-2 cursor-col-resize select-none","end-0 translate-x-1/2 rtl:-translate-x-1/2","after:absolute after:inset-y-1 after:start-1/2 after:w-px","after:[background:transparent]","after:[transition:background_var(--neba-duration)_var(--neba-ease)]","hover:after:[background:var(--n-accent)] data-[dragging]:after:[background:var(--n-accent)]"].join(" ");function W(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("circle",{cx:"7.25",cy:"7.25",r:"4.75",stroke:"currentColor",strokeWidth:"1.5"}),e("path",{d:"m10.75 10.75 2.75 2.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function DataTable(X){const{headers:V,items:q,getRowKey:G,variant:U="outline",size:Y="sm",color:J="primary",density:Q="compact",elevation:Z=0,height:ee,maxHeight:te,rowHeight:ne,striped:re=!1,hoverable:ae=!0,stickyHeader:le=!0,caption:oe,label:se,empty:ie,virtual:ce=!0,overscan:ue=8,sortable:de=!1,sortMode:pe="single",sort:me,defaultSort:ge,onSortChange:fe,resizable:he=!1,columnWidths:ye,columnOrder:be,defaultColumnOrder:ve,onColumnOrderChange:ke,reorderable:we=!1,defaultColumnWidths:xe,onColumnWidthsChange:Ce,selectionMode:Se="none",selected:Me,defaultSelected:Ne,onSelectedChange:Ke,checkboxes:ze=!1,onRowClick:_e,onRowActivate:je,paging:$e="scroll",page:Ee,defaultPage:De=1,onPageChange:Pe,pageSize:Re,defaultPageSize:Te=25,onPageSizeChange:Ae,pageSizeOptions:Ie=[10,25,50,100],footer:Be,search:Le,defaultSearch:Fe,onSearchChange:Oe,searchable:He=!1,searchPlaceholder:We,filter:Xe,toolbar:Ve,exportable:qe=!1,exportFileName:Ge="table.csv",onExport:Ue,onCellEdit:Ye,groupBy:Je,collapsibleGroups:Qe=!0,defaultCollapsedGroups:Ze,manual:et=!1,rowCount:tt,locale:nt,className:rt,style:at,...lt}=B(X,["size","density","variant","locale"]),ot=M(S,nt),st=M(x,nt),it=r.useId(),ct=ne??p[Q][Y],ut=d[Q][Y],dt=T[Q][Y],pt=r.useMemo(()=>new Set(!0===et?["sort","filter","pages"]:et||[]),[et]),[mt,gt]=r.useState(()=>ve??[]),ft=be??mt,ht=r.useMemo(()=>{const e=V.filter(e=>!e.hidden),t=ft.map(t=>e.find(e=>e.key===t)).filter(e=>void 0!==e),n=e.filter(e=>!ft.includes(e.key)),r=0===ft.length?e:[...t,...n],a=e=>"start"===e.pinned?0:"end"===e.pinned?2:1;return r.map((e,t)=>({column:e,index:t})).sort((e,t)=>a(e.column)-a(t.column)||e.index-t.index).map(e=>e.column)},[V,ft]),yt=ht.some(e=>void 0!==e.group),bt="none"!==Se,vt="multiple"===Se,kt=bt&&ze,wt=r.useMemo(()=>q.map((e,t)=>{const n=G?G(e,t):t;return{row:e,identity:n,key:String(n),origin:t}}),[q,G]),[xt,Ct]=r.useState(Fe??""),St=(Le??xt).trim(),Mt=""!==St&&!pt.has("filter"),Nt=r.useMemo(()=>ht.filter(e=>!1!==e.searchable),[ht]),Kt=r.useMemo(()=>Mt&&0!==Nt.length?wt.map(e=>N(Nt.map(t=>t.value?t.value(e.row):e.row[t.key]))):null,[wt,Nt,Mt]),zt=r.useMemo(()=>{if(pt.has("filter"))return wt;const e=K(St),t=""!==e&&Kt?wt.filter(t=>Kt[t.origin].includes(e)):wt;return Xe?t.filter(e=>Xe(e.row,e.origin)):t},[wt,St,Xe,pt,Kt]),_t=r.useMemo(()=>new Intl.Collator(nt,{numeric:!0,sensitivity:"base"}),[nt]),[jt,$t]=r.useState(ge??[]),Et=me??jt,Dt=r.useMemo(()=>pt.has("sort")?zt:v(zt,Et,e=>{const t=ht.find(t=>t.key===e);if(!t)return null;if(t.compare)return(e,n)=>t.compare(e.row,n.row);const n=t.value?t.value:e=>e[t.key];return(e,t)=>u(n(e.row),n(t.row),_t)}),[zt,Et,ht,_t,pt]),[Pt,Rt]=r.useState(De),[Tt,At]=r.useState(Te),It=Re??Tt,[Bt,Lt]=r.useState(()=>new Set(Ze??[])),Ft=r.useMemo(()=>{if(!Je)return null;const e=[],t=new Map;for(const n of Dt){const r=Je(n.row)??"";t.has(r)||(t.set(r,[]),e.push(r)),t.get(r).push(n)}return{order:[...e].sort((e,t)=>""===e?-1:""===t?1:0),byLabel:t}},[Dt,Je]),Ot=r.useMemo(()=>Ft?Ft.order.flatMap(e=>Bt.has(e)?[]:Ft.byLabel.get(e)??[]):Dt,[Ft,Bt,Dt]),Ht=pt.has("pages")?tt??Ot.length:Ot.length,Wt=b(Ht,Ee??Pt,It),Xt=r.useMemo(()=>"pages"!==$e||pt.has("pages")?Ot:Ot.slice(Wt.start,Wt.end),[Ot,$e,pt,Wt.start,Wt.end]),Vt="pages"===$e?Wt.start:0,qt=r.useMemo(()=>Xt.map(e=>e.key),[Xt]),Gt=r.useMemo(()=>new Map(wt.map(e=>[e.key,e])),[wt]),[Ut,Yt]=r.useState(Ne??[]),Jt=Me??Ut,Qt=r.useMemo(()=>new Set(Jt.map(String)),[Jt]),[Zt,en]=r.useState(null),tn=r.useRef(null),nn=r.useRef({paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt});nn.current={paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt};const rn=r.useCallback(e=>{const t=[],n=[];for(const r of e){const e=nn.current.byKey.get(r);e&&(t.push(e.identity),n.push(e.row))}void 0===Me&&Yt(t),Ke?.(t,n)},[Me,Ke]),an=r.useCallback(e=>{tn.current=e,rn([e])},[rn]),ln=r.useCallback(e=>{const t=nn.current.selectedKeys,n=new Set(t);n.has(e)?n.delete(e):n.add(e),tn.current=e,rn([...n])},[rn]),on=r.useCallback((e,t)=>{const n=nn.current.pagedKeys,r=tn.current??n[0];if(void 0===r)return;const a=f(n,r,e);0!==a.length&&rn(t?[...new Set([...nn.current.selectedKeys,...a])]:a)},[rn]),sn=r.useRef(null),cn=r.useRef(null),un=r.useRef(null),[dn,pn]=r.useState(0),[mn,gn]=r.useState(0),fn=void 0!==ee||void 0!==te,hn=ce&&fn&&Xt.length>0&&!Je;r.useLayoutEffect(()=>{const e=sn.current;if(e&&hn)return pn(e.clientHeight),_(e,e=>pn(e.contentRect.height))},[hn]);const yn=r.useCallback(e=>{if(!hn)return;const t=Math.floor(e.currentTarget.scrollTop/ct)*ct;gn(e=>e===t?e:t)},[hn,ct]),bn=hn?k(mn,dn,ct,Xt.length,ue):{start:0,end:Xt.length,before:0,after:0},vn=Xt.slice(bn.start,bn.end),kn=bt&&null!==Zt&&vn.some(e=>e.key===Zt),[wn,xn]=r.useState(xe??{}),Cn=ye??wn,Sn=r.useCallback(e=>{void 0===ye&&xn(e),Ce?.(e)},[ye,Ce]),Mn=r.useRef(new Map),Nn=r.useRef(null),Kn=r.useRef(null),[zn,_n]=r.useState(null),[jn,$n]=r.useState(null);r.useEffect(()=>()=>{Nn.current?.(),Kn.current?.()},[]);const En=(e,t)=>{if(0!==t.button)return;const n=t.currentTarget,r=t.clientX;let a=!1;Kn.current=w({target:n,pointerId:t.pointerId,onMove:t=>{if(!a){if(Math.abs(t.clientX-r)<6)return;a=!0,_n(e)}const n=ht.find(e=>{if(e.pinned)return!1;const n=Mn.current.get(e.key);if(!n)return!1;const r=n.getBoundingClientRect();return t.clientX>=r.left&&t.clientX<=r.right});$n(n&&n.key!==e?n.key:null)},onEnd:()=>{Kn.current=null,_n(e=>($n(t=>{if(e&&t&&e!==t){const r=ht.map(e=>e.key),a=r.indexOf(e),l=r.indexOf(t);r.splice(l,0,...r.splice(a,1)),n=r,void 0===be&>(n),ke?.(n)}var n;return null}),null))}})},Dn=r.useCallback(e=>{const t=sn.current;if(!t||!fn)return;const n=le?ut*(yt?2:1):0,r=e*ct;r<t.scrollTop+n?t.scrollTop=Math.max(0,r-n):r+ct>t.scrollTop+t.clientHeight&&(t.scrollTop=r+ct-t.clientHeight)},[fn,le,ut,yt,ct]),Pn=(e,t)=>{const n=nn.current.paged,r=Math.min(Math.max(e,0),n.length-1),a=n[r];a&&(t.preventDefault(),en(a.key),Dn(r),t.shiftKey&&nn.current.multiple?on(a.key,!1):t.ctrlKey||t.metaKey||an(a.key))};const Rn=r.useCallback(e=>{const t=cn.current,n=nn.current.paged;if(!t||0===n.length)return null;const r=t.getBoundingClientRect().top,a=Math.floor((e-r)/ct);return Math.min(Math.max(a,0),n.length-1)},[ct]),Tn=r.useRef(null),An=r.useCallback(e=>{const t=Rn(e),n=null===t?void 0:nn.current.paged[t];n&&(en(n.key),on(n.key,!1))},[Rn,on]),In=r.useRef(An);In.current=An;function Bn(e,t){if(bt&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(un.current?.focus({preventScroll:!0}),en(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&vt?(t.preventDefault(),void on(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&vt?ln(e.key):(an(e.key),vt&&(e=>{if(Tn.current)return;const t=e=>{const t=Tn.current,r=sn.current;if(!t)return;if(t.y=e.clientY,In.current(t.y),!r||!fn)return;const a=r.getBoundingClientRect(),l=a.top+ct-t.y,o=t.y-(a.bottom-ct);t.speed=l>0?-Math.min(l,40):o>0?Math.min(o,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(n))},n=()=>{const e=Tn.current,t=sn.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,In.current(e.y),e.frame=requestAnimationFrame(n)):e&&(e.frame=null)},r=()=>{const e=Tn.current;null!=e?.frame&&cancelAnimationFrame(e.frame),Tn.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r)};Tn.current={y:e,speed:0,frame:null,stop:r},window.addEventListener("pointermove",t),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)})(t.clientY)))}else nn.current.selectedKeys.has(e.key)||an(e.key)}r.useEffect(()=>()=>Tn.current?.stop(),[]);const Ln=r.useMemo(()=>qt.reduce((e,t)=>Qt.has(t)?e+1:e,0),[qt,Qt]),Fn=qt.length>0&&Ln===qt.length,On=m[Y],Hn=e=>Cn[e.key]??e.width,Wn=(kt?On:0)+ht.reduce((e,t)=>e+(Hn(t)??h),0),Xn=ht.length>0&&ht.every(e=>void 0!==Hn(e)),Vn=ht.length+(kt?1:0)+(Xn?1:0),qn=r.useMemo(()=>{const e=[];return ht.forEach((t,n)=>{const r=e[e.length-1];r&&void 0!==r.label&&r.label===t.group?r.span+=1:e.push({label:t.group,span:1,from:n})}),e},[ht]),Gn=r.useMemo(()=>{const e=new Map,t=new Map;let n=kt?On:0;for(const t of ht)"start"===t.pinned&&(e.set(t.key,n),n+=Hn(t)??g);let r=0;for(let e=ht.length-1;e>=0;e-=1){const n=ht[e];"end"===n.pinned&&(t.set(n.key,r),r+=Hn(n)??g)}return{start:e,end:t}},[ht,Cn,kt,On]),Un=(e,t)=>{if(!e.pinned)return{};const n="start"===e.pinned?Gn.start.get(e.key):Gn.end.get(e.key);return{position:"sticky",insetInlineStart:"start"===e.pinned?`${n??0}px`:void 0,insetInlineEnd:"end"===e.pinned?`${n??0}px`:void 0,zIndex:t?3:1,backgroundColor:"var(--n-panel-press)",backgroundImage:t?void 0:"linear-gradient(var(--n-row), var(--n-row))"}},Yn={padding:`0 ${dt}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},Jn={...Yn,height:`${ut}px`,backgroundColor:"var(--n-panel-press)"},Qn="odd"===re?0:1,Zn=r.useMemo(()=>new Intl.NumberFormat(nt),[nt]),er=Be??"pages"===$e,tr=C(ot.range,{start:Zn.format(0===Ht?0:("pages"===$e?Wt.start:0)+1),end:Zn.format("pages"===$e?Wt.end:Ht),total:Zn.format(Ht)}),nr=e=>{void 0===Ee&&Rt(e),Pe?.(e)},rr=(n,r)=>{const a=Qt.has(n.key),l=Zt===n.key;return t("tr",{id:`${it}-${n.key}`,"aria-selected":bt?a:void 0,"aria-rowindex":hn?r+2:void 0,"data-neba-row":n.key,className:D(L,a?"[--n-row:var(--n-soft-press)]":!1!==re&&r%2===Qn?"[--n-row:var(--n-stripe)]":"",!a&&ae?"hover:[--n-row:var(--n-soft)]":"",l&&bt?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",bt||_e?"cursor-default":""),style:{height:`${ct}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>Bn(n,e),onClick:e=>_e?.(n.row,Vt+r,e),onDoubleClick:()=>je?.(n.row,Vt+r),children:[kt?dr(n):null,ht.map(t=>{const a=ir(t,n.row),l=or?.key===n.key&&or.column===t.key;return e("td",{role:bt?"gridcell":void 0,style:{...Yn,...Un(t,!1),textAlign:t.align??"start",cursor:a&&!l?"cell":void 0},onDoubleClick:a?e=>{e.stopPropagation(),sr({key:n.key,column:t.key})}:void 0,children:l?cr(n,t):t.render?t.render(n.row,Vt+r):n.row[t.key]},t.key)}),Xn?e("td",{"aria-hidden":"true",style:{...Yn,padding:0}}):null]})},ar=(n,r,a)=>{const l=n.sortable??de,o=n.resizable??he,s=we&&!n.pinned,i=(c=n.key,Et.find(e=>e.key===c));var c;const u=i?Et.findIndex(e=>e.key===n.key)+1:0,d=n.headerAlign??n.align??"start";return t("th",{ref:e=>{e?Mn.current.set(n.key,e):Mn.current.delete(n.key)},scope:"col",rowSpan:a,"aria-sort":i?"asc"===i.direction?"ascending":"descending":void 0,"data-column":n.key,"data-dragging":zn===n.key||void 0,className:D("relative font-semibold select-none",i?"text-(--n-accent)":"text-(--neba-muted-fg)",le?"sticky z-20 [backdrop-filter:var(--neba-blur)]":"",s?"cursor-grab":"",zn===n.key?"opacity-60":"",jn===n.key?"shadow-[inset_2px_0_0_var(--n-accent)]":""),style:{...Jn,...Un(n,!0),top:le?2!==a&&yt?ut:0:void 0,textAlign:d},onPointerDown:s?e=>En(n.key,e):void 0,children:[l?t("button",{type:"button",className:D(O,"end"===d?"justify-end":"center"===d?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const n=y(Et,e,t&&"multiple"===pe);void 0===me&&$t(n),fe?.(n)})(n.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:n.label??n.key}),e("span",{"aria-hidden":"true",className:D("flex items-center","desc"===i?.direction?"rotate-0":"rotate-180",i?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(z,{})}),u>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:u}):null]}):e("span",{className:"block truncate",children:n.label??n.key}),o&&r<ht.length-1?e("span",{"aria-hidden":"true",className:H,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r={...Cn};for(const e of ht){const t=Mn.current.get(e.key);t&&void 0===r[e.key]&&(r[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(n).direction,l=t.clientX,o=r[e]??g,s=ht.find(t=>t.key===e)?.minWidth??h;Nn.current=w({target:n,pointerId:t.pointerId,onMove:t=>{const n=(t.clientX-l)*(a?-1:1);Sn({...r,[e]:Math.max(s,Math.round(o+n))})},onEnd:()=>{Nn.current=null}})})(n.key,e),onDoubleClick:()=>(e=>{const t={...Cn};delete t[e],Sn(t)})(n.key)}):null]},n.key)},lr=(n,r)=>{const a=Bt.has(n),l=Qe,o=r.map(e=>e.row),s=()=>Lt(e=>{const t=new Set(e);return t.has(n)?t.delete(n):t.add(n),t}),i=t("span",{className:"flex min-w-0 items-center gap-1.5",children:[l?e("span",{"aria-hidden":"true",className:D("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",a?"-rotate-90 rtl:rotate-90":""),children:e(z,{})}):null,e("span",{className:"truncate font-semibold",children:""===n?st.title:n}),e("span",{className:"shrink-0 text-(--neba-muted-fg) tabular-nums",children:Zn.format(r.length)})]});return t("tr",{"data-neba-group":n,style:{height:`${ct}px`,backgroundColor:"var(--n-soft)"},children:[kt?e("td",{style:{...Yn,padding:0}}):null,ht.map((t,n)=>e("td",{colSpan:1,style:{...Yn,...Un(t,!1),textAlign:0===n?"start":t.align??"start"},children:0===n?l?e("button",{type:"button","aria-expanded":!a,className:"flex w-full min-w-0 items-center text-start [outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",onClick:s,children:i}):i:t.aggregate?e("span",{className:"tabular-nums",children:t.aggregate(o)}):null},t.key)),Xn?e("td",{"aria-hidden":"true",style:{...Yn,padding:0}}):null]})},[or,sr]=r.useState(null),ir=(e,t)=>void 0!==Ye&&("function"==typeof e.editable?e.editable(t):Boolean(e.editable)),cr=(t,n)=>{const r=n.value?n.value(t.row):t.row[n.key],a=e=>{sr(null);const a="number"===n.editType?Number(e):e;"number"===n.editType&&Number.isNaN(a)||String(a)!==String(r??"")&&Ye?.(t.row,n,a)};return e("input",{autoFocus:!0,type:"number"===n.editType?"number":"text",defaultValue:null==r?"":String(r),"aria-label":"string"==typeof n.label?n.label:n.key,className:"w-full bg-transparent [font:inherit] text-inherit [outline:none]",style:{textAlign:n.align??"start"},onPointerDown:e=>e.stopPropagation(),onBlur:e=>a(e.currentTarget.value),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),a(e.currentTarget.value)),"Escape"===e.key&&(e.stopPropagation(),sr(null))}})},ur=t=>e("span",{className:"flex items-center justify-center",children:t}),dr=t=>e("td",{role:bt?"gridcell":void 0,style:{...Yn,padding:0,overflow:"visible"},children:ur(e(o,{size:Y,color:J,checked:Qt.has(t.key),"aria-label":ot.selectRow,onCheckedChange:()=>{vt?ln(t.key):an(t.key)}}))}),pr=vt?ur(e(o,{size:Y,color:J,checked:Fn,indeterminate:Ln>0&&!Fn,"aria-label":ot.selectAll,onCheckedChange:()=>{if(Fn){const e=new Set(qt);rn([...Qt].filter(t=>!e.has(t)))}else rn([...new Set([...Qt,...qt])])}})):null,mr=Xn?e("th",{"aria-hidden":"true",className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0}}):null,gr=(t,n)=>n>0?e("tr",{"aria-hidden":"true",style:{height:`${n}px`},children:e("td",{colSpan:Vn,style:{padding:0,border:0}})},t):null;return t(a,{variant:U,size:Y,color:J,density:Q,elevation:Z,padded:!1,className:D("flex flex-col overflow-hidden",bt?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",rt),style:{...F,...at},...lt,children:[He||qe||P(Ve)?t("div",{className:"flex items-center gap-2",style:{padding:`${dt} ${dt}`,borderBottom:"1px solid var(--n-line)"},children:[He?e(c,{size:Y,color:J,density:Q,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(W,{}),placeholder:We??ot.search,"aria-label":We??ot.search,value:Le??xt,onChange:e=>{const t=e.target.value;void 0===Le&&Ct(t),nr(1),Oe?.(t)}}):null,qe||P(Ve)?t("div",{className:"ms-auto flex items-center gap-2",children:[Ve,qe?e(l,{size:Y,color:J,density:Q,variant:"outline",onClick:()=>{const e=ht.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),n=Dt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):e.value?e.value(t.row):t.row[e.key])),r=$([t,...n]);Ue?Ue(r):j(r,Ge,"text/csv;charset=utf-8")},children:ot.exportCsv}):null]}):null]}):null,e("div",{ref:sn,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:I(ee),maxHeight:I(te)},onScroll:yn,children:t("table",{ref:un,role:bt?"grid":void 0,"aria-label":se,"aria-multiselectable":vt||void 0,"aria-rowcount":hn?Xt.length+1:void 0,"aria-activedescendant":kn?`${it}-${Zt}`:void 0,tabIndex:bt?0:void 0,className:D("w-full text-start [outline:none]",E[Y],"text-(--neba-fg)",bt?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${Wn}px`},onKeyDown:function(e){if(!bt||e.target!==e.currentTarget)return;const t=nn.current.paged;if(0===t.length)return;const n=null===Zt?-1:nn.current.pagedKeys.indexOf(Zt),r=Math.max(1,Math.floor((dn||10*ct)/ct)-1);switch(e.key){case"ArrowDown":Pn(n+1,e);break;case"ArrowUp":Pn(-1===n?0:n-1,e);break;case"Home":Pn(0,e);break;case"End":Pn(t.length-1,e);break;case"PageDown":Pn(-1===n?0:n+r,e);break;case"PageUp":Pn(-1===n?0:n-r,e);break;case" ":-1!==n&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&vt?ln(t[n].key):an(t[n].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&vt&&(e.preventDefault(),rn(nn.current.pagedKeys));break;case"Escape":e.preventDefault(),rn([]);break;case"Enter":-1!==n&&je&&(e.preventDefault(),je(t[n].row,Vt+n))}},children:[oe?e("caption",{className:D(R[Y],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${dt}`,textAlign:"start"},children:oe}):null,t("colgroup",{children:[kt?e("col",{style:{width:`${On}px`}}):null,ht.map(t=>{const n=Hn(t);return e("col",{style:void 0===n?void 0:{width:`${n}px`}},t.key)}),Xn?e("col",{}):null]}),t("thead",{children:[yt?t("tr",{style:{height:`${ut}px`},children:[kt?e("th",{scope:"col",rowSpan:2,className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0,overflow:"visible"},children:pr}):null,qn.map(t=>void 0===t.label?ar(ht[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:D("font-semibold text-(--neba-muted-fg) select-none",le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,textAlign:"center"},children:t.label},`group-${t.from}`)),Xn?r.cloneElement(mr,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${ut}px`},children:[kt&&!yt?e("th",{scope:"col",className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0,overflow:"visible"},children:pr}):null,ht.map((e,t)=>yt&&void 0===e.group?null:ar(e,t)),Xn&&!yt?mr:null]})]}),e("tbody",{ref:cn,children:0===Xt.length?e("tr",{children:e("td",{colSpan:Vn,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${dt}`,textAlign:"center"},children:ie??st.title})}):t(n,{children:[gr("before",bn.before),Ft?Ft.order.map(e=>{const n=Ft.byLabel.get(e)??[],a=n.filter(e=>qt.includes(e.key));return t(r.Fragment,{children:[lr(e,n),a.map(e=>rr(e,Xt.indexOf(e)))]},e||"\0")}):vn.map((e,t)=>rr(e,bn.start+t)),gr("after",bn.after)]})})]})}),er?t("div",{className:D("flex flex-wrap items-center gap-3",R[Y]),style:{padding:`0.375rem ${dt}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:tr}),bt&&Qt.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:C(ot.selected,{count:Zn.format(Qt.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===$e&&Ie.length>0?e(n,{children:e(i,{size:Y,color:J,density:Q,variant:"outline",label:ot.rowsPerPage,items:Ie.map(e=>({value:e})),value:It,onValueChange:e=>{const t=Number(e);void 0===Re&&At(t),nr(Math.floor(Wt.start/t)+1),Ae?.(t)}})}):null,"pages"===$e?e(s,{size:Y,color:J,count:Wt.pages,page:Wt.page,siblingCount:0,onPageChange:nr}):null]})]}):null,!er&&hn?e("span",{className:A,"aria-live":"polite",children:tr}):null]})}
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{Box as a}from"../box/Box.js";import{Button as l}from"../button/Button.js";import{Checkbox as o}from"../checkbox/Checkbox.js";import{Pagination as s}from"../pagination/Pagination.js";import{Select as i}from"../select/Select.js";import{TextField as c}from"../text-field/TextField.js";import{compareValues as u,dataHeaderHeights as d,dataRowHeights as p,dataTickWidths as m,defaultColumnWidth as g,keysBetween as f,minColumnWidth as h,nextSort as y,pageBounds as b,sortRows as v,virtualWindow as k}from"../../internal/data-table.js";import{beginPointerDrag as x}from"../../internal/drag.js";import{emptyMessages as w,fillMessage as C,tableMessages as S,useMessages as M}from"../../internal/i18n.js";import{searchHaystack as N,searchText as K}from"../../internal/search.js";import{ChevronIcon as z}from"../../internal/icons.js";import{observeResize as _}from"../../internal/observe.js";import{downloadText as j,toCsv as $}from"../../internal/csv.js";import{controlTextLeadingClasses as D,cx as P,hasContent as T,metaTextClasses as R,paddingXValues as A,srOnlyClasses as E,toLength as I}from"../../internal/styles.js";import{useStyleDefaults as B}from"../../internal/defaults.js";const H=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),F={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},O=["group/sort flex w-full min-w-0 cursor-pointer items-center gap-1","text-inherit [outline:none]","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),W=["absolute inset-y-0 z-10 w-2 cursor-col-resize select-none","end-0 translate-x-1/2 rtl:-translate-x-1/2","after:absolute after:inset-y-1 after:start-1/2 after:w-px","after:[background:transparent]","after:[transition:background_var(--neba-duration)_var(--neba-ease)]","hover:after:[background:var(--n-accent)] data-[dragging]:after:[background:var(--n-accent)]"].join(" ");function L(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("circle",{cx:"7.25",cy:"7.25",r:"4.75",stroke:"currentColor",strokeWidth:"1.5"}),e("path",{d:"m10.75 10.75 2.75 2.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function DataTable(X){const{headers:V,items:q,getRowKey:G,variant:U="outline",size:Y="sm",color:J="primary",density:Q="compact",elevation:Z=0,height:ee,maxHeight:te,rowHeight:ne,striped:re=!1,hoverable:ae=!0,stickyHeader:le=!0,caption:oe,label:se,empty:ie,virtual:ce=!0,overscan:ue=8,sortable:de=!1,sortMode:pe="single",sort:me,defaultSort:ge,onSortChange:fe,resizable:he=!1,columnWidths:ye,columnOrder:be,defaultColumnOrder:ve,onColumnOrderChange:ke,reorderable:xe=!1,defaultColumnWidths:we,onColumnWidthsChange:Ce,selectionMode:Se="none",selected:Me,defaultSelected:Ne,onSelectedChange:Ke,checkboxes:ze=!1,onRowClick:_e,onRowActivate:je,paging:$e="scroll",page:De,defaultPage:Pe=1,onPageChange:Te,pageSize:Re,defaultPageSize:Ae=25,onPageSizeChange:Ee,pageSizeOptions:Ie=[10,25,50,100],footer:Be,search:He,defaultSearch:Fe,onSearchChange:Oe,searchable:We=!1,searchPlaceholder:Le,filter:Xe,toolbar:Ve,exportable:qe=!1,exportFileName:Ge="table.csv",onExport:Ue,onCellEdit:Ye,groupBy:Je,collapsibleGroups:Qe=!0,defaultCollapsedGroups:Ze,manual:et=!1,rowCount:tt,locale:nt,className:rt,style:at,...lt}=B(X,["size","density","variant","locale"]),ot=M(S,nt),st=M(w,nt),it=r.useId(),ct=ne??p[Q][Y],ut=d[Q][Y],dt=A[Q][Y],pt=r.useMemo(()=>new Set(!0===et?["sort","filter","pages"]:et||[]),[et]),[mt,gt]=r.useState(()=>ve??[]),ft=be??mt,ht=r.useMemo(()=>{const e=V.filter(e=>!e.hidden),t=ft.map(t=>e.find(e=>e.key===t)).filter(e=>void 0!==e),n=e.filter(e=>!ft.includes(e.key)),r=0===ft.length?e:[...t,...n],a=e=>"start"===e.pinned?0:"end"===e.pinned?2:1;return r.map((e,t)=>({column:e,index:t})).sort((e,t)=>a(e.column)-a(t.column)||e.index-t.index).map(e=>e.column)},[V,ft]),yt=ht.some(e=>void 0!==e.group),bt="none"!==Se,vt="multiple"===Se,kt=bt&&ze,xt=r.useMemo(()=>q.map((e,t)=>{const n=G?G(e,t):t;return{row:e,identity:n,key:String(n),origin:t}}),[q,G]),[wt,Ct]=r.useState(Fe??""),St=(He??wt).trim(),Mt=""!==St&&!pt.has("filter"),Nt=r.useMemo(()=>ht.filter(e=>!1!==e.searchable),[ht]),Kt=r.useMemo(()=>Mt&&0!==Nt.length?xt.map(e=>N(Nt.map(t=>t.value?t.value(e.row):e.row[t.key]))):null,[xt,Nt,Mt]),zt=r.useMemo(()=>{if(pt.has("filter"))return xt;const e=K(St),t=""!==e&&Kt?xt.filter(t=>Kt[t.origin].includes(e)):xt;return Xe?t.filter(e=>Xe(e.row,e.origin)):t},[xt,St,Xe,pt,Kt]),_t=r.useMemo(()=>new Intl.Collator(nt,{numeric:!0,sensitivity:"base"}),[nt]),[jt,$t]=r.useState(ge??[]),Dt=me??jt,Pt=r.useMemo(()=>pt.has("sort")?zt:v(zt,Dt,e=>{const t=ht.find(t=>t.key===e);if(!t)return null;if(t.compare)return(e,n)=>t.compare(e.row,n.row);const n=t.value?t.value:e=>e[t.key];return(e,t)=>u(n(e.row),n(t.row),_t)}),[zt,Dt,ht,_t,pt]),[Tt,Rt]=r.useState(Pe),[At,Et]=r.useState(Ae),It=Re??At,[Bt,Ht]=r.useState(()=>new Set(Ze??[])),Ft=r.useMemo(()=>{if(!Je)return null;const e=[],t=new Map;for(const n of Pt){const r=Je(n.row)??"";t.has(r)||(t.set(r,[]),e.push(r)),t.get(r).push(n)}return{order:[...e].sort((e,t)=>""===e?-1:""===t?1:0),byLabel:t}},[Pt,Je]),Ot=r.useMemo(()=>Ft?Ft.order.flatMap(e=>Bt.has(e)?[]:Ft.byLabel.get(e)??[]):Pt,[Ft,Bt,Pt]),Wt=pt.has("pages")?tt??Ot.length:Ot.length,Lt=b(Wt,De??Tt,It),Xt=r.useMemo(()=>"pages"!==$e||pt.has("pages")?Ot:Ot.slice(Lt.start,Lt.end),[Ot,$e,pt,Lt.start,Lt.end]),Vt="pages"===$e?Lt.start:0,qt=r.useMemo(()=>Xt.map(e=>e.key),[Xt]),Gt=r.useMemo(()=>new Map(xt.map(e=>[e.key,e])),[xt]),[Ut,Yt]=r.useState(Ne??[]),Jt=Me??Ut,Qt=r.useMemo(()=>new Set(Jt.map(String)),[Jt]),[Zt,en]=r.useState(null),tn=r.useRef(null),nn=r.useRef({paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt});nn.current={paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt};const rn=r.useCallback(e=>{const t=[],n=[];for(const r of e){const e=nn.current.byKey.get(r);e&&(t.push(e.identity),n.push(e.row))}void 0===Me&&Yt(t),Ke?.(t,n)},[Me,Ke]),an=r.useCallback(e=>{tn.current=e,rn([e])},[rn]),ln=r.useCallback(e=>{const t=nn.current.selectedKeys,n=new Set(t);n.has(e)?n.delete(e):n.add(e),tn.current=e,rn([...n])},[rn]),on=r.useCallback((e,t)=>{const n=nn.current.pagedKeys,r=tn.current??n[0];if(void 0===r)return;const a=f(n,r,e);0!==a.length&&rn(t?[...new Set([...nn.current.selectedKeys,...a])]:a)},[rn]),sn=r.useRef(null),cn=r.useRef(null),un=r.useRef(null),[dn,pn]=r.useState(0),[mn,gn]=r.useState(0),fn=void 0!==ee||void 0!==te,hn=ce&&fn&&Xt.length>0&&!Je;r.useLayoutEffect(()=>{const e=sn.current;if(e&&hn)return pn(e.clientHeight),_(e,e=>pn(e.contentRect.height))},[hn]);const yn=r.useCallback(e=>{if(!hn)return;const t=Math.floor(e.currentTarget.scrollTop/ct)*ct;gn(e=>e===t?e:t)},[hn,ct]),bn=hn?k(mn,dn,ct,Xt.length,ue):{start:0,end:Xt.length,before:0,after:0},vn=Xt.slice(bn.start,bn.end),kn=bt&&null!==Zt&&vn.some(e=>e.key===Zt),[xn,wn]=r.useState(we??{}),Cn=ye??xn,Sn=r.useCallback(e=>{void 0===ye&&wn(e),Ce?.(e)},[ye,Ce]),Mn=r.useRef(new Map),Nn=r.useRef(null),Kn=r.useRef(null),[zn,_n]=r.useState(null),[jn,$n]=r.useState(null);r.useEffect(()=>()=>{Nn.current?.(),Kn.current?.()},[]);const Dn=(e,t)=>{if(0!==t.button)return;const n=t.currentTarget,r=t.clientX;let a=!1;Kn.current=x({target:n,pointerId:t.pointerId,onMove:t=>{if(!a){if(Math.abs(t.clientX-r)<6)return;a=!0,_n(e)}const n=ht.find(e=>{if(e.pinned)return!1;const n=Mn.current.get(e.key);if(!n)return!1;const r=n.getBoundingClientRect();return t.clientX>=r.left&&t.clientX<=r.right});$n(n&&n.key!==e?n.key:null)},onEnd:()=>{Kn.current=null,_n(e=>($n(t=>{if(e&&t&&e!==t){const r=ht.map(e=>e.key),a=r.indexOf(e),l=r.indexOf(t);r.splice(l,0,...r.splice(a,1)),n=r,void 0===be&>(n),ke?.(n)}var n;return null}),null))}})},Pn=r.useCallback(e=>{const t=sn.current;if(!t||!fn)return;const n=le?ut*(yt?2:1):0,r=e*ct;r<t.scrollTop+n?t.scrollTop=Math.max(0,r-n):r+ct>t.scrollTop+t.clientHeight&&(t.scrollTop=r+ct-t.clientHeight)},[fn,le,ut,yt,ct]),Tn=(e,t)=>{const n=nn.current.paged,r=Math.min(Math.max(e,0),n.length-1),a=n[r];a&&(t.preventDefault(),en(a.key),Pn(r),t.shiftKey&&nn.current.multiple?on(a.key,!1):t.ctrlKey||t.metaKey||an(a.key))},Rn=(e,t)=>{const n=sn.current;if(!n||!fn)return;t.preventDefault();const r=Math.max(0,n.scrollHeight-n.clientHeight),a="start"===e?0:"end"===e?r:n.scrollTop+e;n.scrollTop=Math.min(Math.max(a,0),r)};const An=r.useCallback(e=>{const t=cn.current,n=nn.current.paged;if(!t||0===n.length)return null;const r=t.getBoundingClientRect().top,a=Math.floor((e-r)/ct);return Math.min(Math.max(a,0),n.length-1)},[ct]),En=r.useRef(null),In=r.useCallback(e=>{const t=An(e),n=null===t?void 0:nn.current.paged[t];n&&(en(n.key),on(n.key,!1))},[An,on]),Bn=r.useRef(In);Bn.current=In;function Hn(e,t){if(bt&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(un.current?.focus({preventScroll:!0}),en(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&vt?(t.preventDefault(),void on(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&vt?ln(e.key):(an(e.key),vt&&(e=>{const t=un.current;if(En.current||!t)return;const n=e.clientY,r=()=>{const e=En.current,t=sn.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,Bn.current(e.y),e.frame=requestAnimationFrame(r)):e&&(e.frame=null)};let a=()=>{};const l=()=>{const e=En.current;null!=e?.frame&&cancelAnimationFrame(e.frame),En.current=null,a()};En.current={y:n,speed:0,frame:null,stop:l},a=x({target:t,pointerId:e.pointerId,onMove:e=>{const t=En.current,n=sn.current;if(!t)return;if(t.y=e.clientY,Bn.current(t.y),!n||!fn)return;const a=n.getBoundingClientRect(),l=a.top+ct-t.y,o=t.y-(a.bottom-ct);t.speed=l>0?-Math.min(l,40):o>0?Math.min(o,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(r))},onEnd:l,mark:!1})})(t)))}else nn.current.selectedKeys.has(e.key)||an(e.key)}r.useEffect(()=>()=>En.current?.stop(),[]);const Fn=r.useMemo(()=>qt.reduce((e,t)=>Qt.has(t)?e+1:e,0),[qt,Qt]),On=qt.length>0&&Fn===qt.length,Wn=m[Y],Ln=e=>Cn[e.key]??e.width,Xn=(kt?Wn:0)+ht.reduce((e,t)=>e+(Ln(t)??h),0),Vn=ht.length>0&&ht.every(e=>void 0!==Ln(e)),qn=ht.length+(kt?1:0)+(Vn?1:0),Gn=r.useMemo(()=>{const e=[];return ht.forEach((t,n)=>{const r=e[e.length-1];r&&void 0!==r.label&&r.label===t.group?r.span+=1:e.push({label:t.group,span:1,from:n})}),e},[ht]),Un=r.useMemo(()=>{const e=new Map,t=new Map;let n=kt?Wn:0;for(const t of ht)"start"===t.pinned&&(e.set(t.key,n),n+=Ln(t)??g);let r=0;for(let e=ht.length-1;e>=0;e-=1){const n=ht[e];"end"===n.pinned&&(t.set(n.key,r),r+=Ln(n)??g)}return{start:e,end:t}},[ht,Cn,kt,Wn]),Yn=(e,t)=>{if(!e.pinned)return{};const n="start"===e.pinned?Un.start.get(e.key):Un.end.get(e.key);return{position:"sticky",insetInlineStart:"start"===e.pinned?`${n??0}px`:void 0,insetInlineEnd:"end"===e.pinned?`${n??0}px`:void 0,zIndex:t?3:1,backgroundColor:"var(--n-panel-press)",backgroundImage:t?void 0:"linear-gradient(var(--n-row), var(--n-row))"}},Jn={padding:`0 ${dt}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},Qn={...Jn,height:`${ut}px`,backgroundColor:"var(--n-panel-press)"},Zn="odd"===re?0:1,er=r.useMemo(()=>new Intl.NumberFormat(nt),[nt]),tr=Be??"pages"===$e,nr=C(ot.range,{start:er.format(0===Wt?0:("pages"===$e?Lt.start:0)+1),end:er.format("pages"===$e?Lt.end:Wt),total:er.format(Wt)}),rr=e=>{void 0===De&&Rt(e),Te?.(e)},ar=(n,r)=>{const a=Qt.has(n.key),l=Zt===n.key;return t("tr",{id:`${it}-${n.key}`,"aria-selected":bt?a:void 0,"aria-rowindex":hn?r+2:void 0,"data-neba-row":n.key,className:P(H,a?"[--n-row:var(--n-soft-press)]":!1!==re&&r%2===Zn?"[--n-row:var(--n-stripe)]":"",!a&&ae?"hover:[--n-row:var(--n-soft)]":"",l&&bt?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",bt||_e?"cursor-default":""),style:{height:`${ct}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>Hn(n,e),onClick:e=>_e?.(n.row,Vt+r,e),onDoubleClick:()=>je?.(n.row,Vt+r),children:[kt?pr(n):null,ht.map(t=>{const a=cr(t,n.row),l=sr?.key===n.key&&sr.column===t.key;return e("td",{role:bt?"gridcell":void 0,style:{...Jn,...Yn(t,!1),textAlign:t.align??"start",cursor:a&&!l?"cell":void 0},onDoubleClick:a?e=>{e.stopPropagation(),ir({key:n.key,column:t.key})}:void 0,children:l?ur(n,t):t.render?t.render(n.row,Vt+r):n.row[t.key]},t.key)}),Vn?e("td",{"aria-hidden":"true",style:{...Jn,padding:0}}):null]},n.key)},lr=(n,r,a)=>{const l=n.sortable??de,o=n.resizable??he,s=xe&&!n.pinned,i=(c=n.key,Dt.find(e=>e.key===c));var c;const u=i?Dt.findIndex(e=>e.key===n.key)+1:0,d=n.headerAlign??n.align??"start";return t("th",{ref:e=>{e?Mn.current.set(n.key,e):Mn.current.delete(n.key)},scope:"col",rowSpan:a,"aria-sort":i?"asc"===i.direction?"ascending":"descending":void 0,"data-column":n.key,"data-dragging":zn===n.key||void 0,className:P("relative font-semibold select-none",i?"text-(--n-accent)":"text-(--neba-muted-fg)",le?"sticky z-20 [backdrop-filter:var(--neba-blur)]":"",s?"cursor-grab":"",zn===n.key?"opacity-60":"",jn===n.key?"shadow-[inset_2px_0_0_var(--n-accent)]":""),style:{...Qn,...Yn(n,!0),top:le?2!==a&&yt?ut:0:void 0,textAlign:d},onPointerDown:s?e=>Dn(n.key,e):void 0,children:[l?t("button",{type:"button",className:P(O,"end"===d?"justify-end":"center"===d?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const n=y(Dt,e,t&&"multiple"===pe);void 0===me&&$t(n),fe?.(n)})(n.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:n.label??n.key}),e("span",{"aria-hidden":"true",className:P("flex items-center","desc"===i?.direction?"rotate-0":"rotate-180",i?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(z,{})}),u>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:u}):null]}):e("span",{className:"block truncate",children:n.label??n.key}),o&&r<ht.length-1?e("span",{"aria-hidden":"true",className:W,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r={...Cn};for(const e of ht){const t=Mn.current.get(e.key);t&&void 0===r[e.key]&&(r[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(n).direction,l=t.clientX,o=r[e]??g,s=ht.find(t=>t.key===e)?.minWidth??h;Nn.current=x({target:n,pointerId:t.pointerId,onMove:t=>{const n=(t.clientX-l)*(a?-1:1);Sn({...r,[e]:Math.max(s,Math.round(o+n))})},onEnd:()=>{Nn.current=null}})})(n.key,e),onDoubleClick:()=>(e=>{const t={...Cn};delete t[e],Sn(t)})(n.key)}):null]},n.key)},or=(n,r)=>{const a=Bt.has(n),l=Qe,o=r.map(e=>e.row),s=()=>Ht(e=>{const t=new Set(e);return t.has(n)?t.delete(n):t.add(n),t}),i=t("span",{className:"flex min-w-0 items-center gap-1.5",children:[l?e("span",{"aria-hidden":"true",className:P("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",a?"-rotate-90 rtl:rotate-90":""),children:e(z,{})}):null,e("span",{className:"truncate font-semibold",children:""===n?st.title:n}),e("span",{className:"shrink-0 text-(--neba-muted-fg) tabular-nums",children:er.format(r.length)})]});return t("tr",{"data-neba-group":n,style:{height:`${ct}px`,backgroundColor:"var(--n-soft)"},children:[kt?e("td",{style:{...Jn,padding:0}}):null,ht.map((t,n)=>e("td",{colSpan:1,style:{...Jn,...Yn(t,!1),textAlign:0===n?"start":t.align??"start"},children:0===n?l?e("button",{type:"button","aria-expanded":!a,className:"flex w-full min-w-0 items-center text-start [outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",onClick:s,children:i}):i:t.aggregate?e("span",{className:"tabular-nums",children:t.aggregate(o)}):null},t.key)),Vn?e("td",{"aria-hidden":"true",style:{...Jn,padding:0}}):null]})},[sr,ir]=r.useState(null),cr=(e,t)=>void 0!==Ye&&("function"==typeof e.editable?e.editable(t):Boolean(e.editable)),ur=(t,n)=>{const r=n.value?n.value(t.row):t.row[n.key],a=e=>{ir(null);const a="number"===n.editType?Number(e):e;"number"===n.editType&&Number.isNaN(a)||String(a)!==String(r??"")&&Ye?.(t.row,n,a)};return e("input",{autoFocus:!0,type:"number"===n.editType?"number":"text",defaultValue:null==r?"":String(r),"aria-label":"string"==typeof n.label?n.label:n.key,className:"w-full bg-transparent [font:inherit] text-inherit [outline:none]",style:{textAlign:n.align??"start"},onPointerDown:e=>e.stopPropagation(),onBlur:e=>a(e.currentTarget.value),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),a(e.currentTarget.value)),"Escape"===e.key&&(e.stopPropagation(),ir(null))}})},dr=t=>e("span",{className:"flex items-center justify-center",children:t}),pr=t=>e("td",{role:bt?"gridcell":void 0,style:{...Jn,padding:0,overflow:"visible"},children:dr(e(o,{size:Y,color:J,checked:Qt.has(t.key),"aria-label":ot.selectRow,onCheckedChange:()=>{vt?ln(t.key):an(t.key)}}))}),mr=vt?dr(e(o,{size:Y,color:J,checked:On,indeterminate:Fn>0&&!On,"aria-label":ot.selectAll,onCheckedChange:()=>{if(On){const e=new Set(qt);rn([...Qt].filter(t=>!e.has(t)))}else rn([...new Set([...Qt,...qt])])}})):null,gr=Vn?e("th",{"aria-hidden":"true",className:P(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Qn,padding:0}}):null,fr=(t,n)=>n>0?e("tr",{"aria-hidden":"true",style:{height:`${n}px`},children:e("td",{colSpan:qn,style:{padding:0,border:0}})},t):null;return t(a,{variant:U,size:Y,color:J,density:Q,elevation:Z,padded:!1,className:P("flex flex-col overflow-hidden",bt?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",rt),style:{...F,...at},...lt,children:[We||qe||T(Ve)?t("div",{className:"flex items-center gap-2",style:{padding:`${dt} ${dt}`,borderBottom:"1px solid var(--n-line)"},children:[We?e(c,{size:Y,color:J,density:Q,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(L,{}),placeholder:Le??ot.search,"aria-label":Le??ot.search,value:He??wt,onChange:e=>{const t=e.target.value;void 0===He&&Ct(t),rr(1),Oe?.(t)}}):null,qe||T(Ve)?t("div",{className:"ms-auto flex items-center gap-2",children:[Ve,qe?e(l,{size:Y,color:J,density:Q,variant:"outline",onClick:()=>{const e=ht.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),n=Pt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):e.value?e.value(t.row):t.row[e.key])),r=$([t,...n]);Ue?Ue(r):j(r,Ge,"text/csv;charset=utf-8")},children:ot.exportCsv}):null]}):null]}):null,e("div",{ref:sn,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:I(ee),maxHeight:I(te)},onScroll:yn,children:t("table",{ref:un,role:bt?"grid":void 0,"aria-label":se,"aria-multiselectable":vt||void 0,"aria-rowcount":hn?Xt.length+1:void 0,"aria-activedescendant":kn?`${it}-${Zt}`:void 0,tabIndex:bt?0:void 0,className:P("w-full text-start [outline:none]",D[Y],"text-(--neba-fg)",bt?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${Xn}px`},onKeyDown:function(e){if(!bt||e.target!==e.currentTarget)return;const t=nn.current.paged;if(0===t.length)return;const n=null===Zt?-1:nn.current.pagedKeys.indexOf(Zt),r=Math.max(1,Math.floor((dn||10*ct)/ct)-1);switch(e.key){case"ArrowDown":Tn(n+1,e);break;case"ArrowUp":Tn(-1===n?0:n-1,e);break;case"Home":Rn("start",e);break;case"End":Rn("end",e);break;case"PageDown":Rn(r*ct,e);break;case"PageUp":Rn(-r*ct,e);break;case" ":-1!==n&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&vt?ln(t[n].key):an(t[n].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&vt&&(e.preventDefault(),rn(nn.current.pagedKeys));break;case"Escape":e.preventDefault(),rn([]);break;case"Enter":-1!==n&&je&&(e.preventDefault(),je(t[n].row,Vt+n))}},children:[oe?e("caption",{className:P(R[Y],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${dt}`,textAlign:"start"},children:oe}):null,t("colgroup",{children:[kt?e("col",{style:{width:`${Wn}px`}}):null,ht.map(t=>{const n=Ln(t);return e("col",{style:void 0===n?void 0:{width:`${n}px`}},t.key)}),Vn?e("col",{}):null]}),t("thead",{children:[yt?t("tr",{style:{height:`${ut}px`},children:[kt?e("th",{scope:"col",rowSpan:2,className:P(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Qn,padding:0,overflow:"visible"},children:mr}):null,Gn.map(t=>void 0===t.label?lr(ht[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:P("font-semibold text-(--neba-muted-fg) select-none",le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Qn,textAlign:"center"},children:t.label},`group-${t.from}`)),Vn?r.cloneElement(gr,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${ut}px`},children:[kt&&!yt?e("th",{scope:"col",className:P(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Qn,padding:0,overflow:"visible"},children:mr}):null,ht.map((e,t)=>yt&&void 0===e.group?null:lr(e,t)),Vn&&!yt?gr:null]})]}),e("tbody",{ref:cn,children:0===Xt.length?e("tr",{children:e("td",{colSpan:qn,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${dt}`,textAlign:"center"},children:ie??st.title})}):t(n,{children:[fr("before",bn.before),Ft?Ft.order.map(e=>{const n=Ft.byLabel.get(e)??[],a=n.filter(e=>qt.includes(e.key));return t(r.Fragment,{children:[or(e,n),a.map(e=>ar(e,Xt.indexOf(e)))]},e||"\0")}):vn.map((e,t)=>ar(e,bn.start+t)),fr("after",bn.after)]})})]})}),tr?t("div",{className:P("flex flex-wrap items-center gap-3",R[Y]),style:{padding:`0.375rem ${dt}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:nr}),bt&&Qt.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:C(ot.selected,{count:er.format(Qt.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===$e&&Ie.length>0?e(n,{children:e(i,{size:Y,color:J,density:Q,variant:"outline",label:ot.rowsPerPage,items:Ie.map(e=>({value:e})),value:It,onValueChange:e=>{const t=Number(e);void 0===Re&&Et(t),rr(Math.floor(Lt.start/t)+1),Ee?.(t)}})}):null,"pages"===$e?e(s,{size:Y,color:J,count:Lt.pages,page:Lt.page,siblingCount:0,onPageChange:rr}):null]})]}):null,!tr&&hn?e("span",{className:E,"aria-live":"polite",children:nr}):null]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as n,usePickerLabels as o}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as m,isUnitOutside as d,isValidDate as u,localeWeekStart as h,mergeDateAndTime as p,startOfMonth as f,startOfUnit as y,toISODate as b,toISOMonth as g,toISOYear as j,today as x,withPlaceholder as v}from"../../internal/date.js";import{cx as D}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const S={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},z={day:b,month:g,year:j};export const DatePicker=/*@__PURE__*/t.forwardRef(function(b,g){const{value:j,defaultValue:C,onValueChange:k,open:w,defaultOpen:M,onOpenChange:V,granularity:B="day",defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as n,usePickerLabels as o}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as m,isUnitOutside as d,isValidDate as u,localeWeekStart as h,mergeDateAndTime as p,startOfMonth as f,startOfUnit as y,toISODate as b,toISOMonth as g,toISOYear as j,today as x,withPlaceholder as v}from"../../internal/date.js";import{cx as D}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const S={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},z={day:b,month:g,year:j};export const DatePicker=/*@__PURE__*/t.forwardRef(function(b,g){const{value:j,defaultValue:C,onValueChange:k,open:w,defaultOpen:M,onOpenChange:V,granularity:B="day",defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:L,weekStartsOn:N,format:P,placeholder:T,clearable:Y=!1,showTodayButton:q=!0,closeOnSelect:A=!0,labels:G,name:H,size:J="md",color:K="primary",readOnly:Q=!1,disabled:U=!1,startIcon:W,...X}=O(b,["size","locale"]),Z=o(G,L),$=N??h(L),_=P??S[B],[ee,ae]=t.useState(C??null),te=void 0!==j?j:ee,[le,ne]=t.useState(M??!1),oe=w??le,[re,se]=t.useState(()=>f(u(te)?te:I??x()));t.useEffect(()=>{oe&&se(f(u(te)?te:I??x()))},[oe]);const ie=e=>{e&&(Q||U)||(void 0===w&&ne(e),V?.(e))},ce=e=>{void 0===j&&ae(e),k?.(e)},me=e=>{const a=y(e,B),t=u(te)?p(a,te):a;ce(t),se(f(t)),A&&ie(!1)},de=x(),ue=y(de,B),he=d(de,B,R,E)||(F?.(ue)??!1),pe="year"===B?Z.thisYear:"month"===B?Z.thisMonth:Z.today,fe=q||Y,ye=t.useMemo(()=>v(c(L,_),T),[L,_,T]);return e(i,{...X,size:J,color:K,readOnly:Q,disabled:U,triggerRef:g,startIcon:W??e(r,{}),display:u(te)?m(te,L,_):T??"",samples:ye,empty:!u(te),clearable:Y,onClear:()=>ce(null),open:oe,onOpenChange:ie,clearLabel:Z.clear,hiddenValues:H?[{name:H,value:u(te)?z[B](te):""}]:void 0,children:a("div",{className:D("flex flex-col",fe&&"gap-1.5"),children:[e(n,{size:J,color:K,locale:L,weekStartsOn:$,month:re,onMonthChange:se,selected:[te],onSelect:me,granularity:B,minDate:R,maxDate:E,shouldDisableDate:F,labels:Z,autoFocus:!0}),fe?a(s,{size:J,children:[Y?e(l,{variant:"text",size:J,color:K,density:"compact",onClick:()=>{ce(null),ie(!1)},children:Z.clear}):null,q?e(l,{variant:"text",size:J,color:K,density:"compact",disabled:he,onClick:()=>me(de),children:pe}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as f,isValidDate as p,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as S}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";const D={start:null,end:null};export const DateRangePicker=/*@__PURE__*/n.forwardRef(function(O,z){const{value:k,defaultValue:P,onValueChange:B,open:M,defaultOpen:R,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as f,isValidDate as p,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as S}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";const D={start:null,end:null};export const DateRangePicker=/*@__PURE__*/n.forwardRef(function(O,z){const{value:k,defaultValue:P,onValueChange:B,open:M,defaultOpen:R,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:L,locale:q,weekStartsOn:A,format:G={dateStyle:"medium"},monthCount:H=2,startPlaceholder:J,endPlaceholder:K,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:W,name:X,size:Y="md",color:Z="primary",readOnly:$=!1,disabled:_=!1,startIcon:ee,...le}=C(O,["size","locale"]),ne=s(W,q),ae=A??x(q),[te,se]=n.useState(P??D),re=void 0!==k?k??D:te,oe=p(re.start)?re.start:null,ie=p(re.end)?re.end:null,[ce,ue]=n.useState(R??!1),me=M??ce,[de,he]=n.useState(null),[fe,pe]=n.useState(null),[xe,ve]=n.useState(()=>g(oe??E??w()));n.useEffect(()=>{me?ve(g(oe??E??w())):(he(null),pe(null))},[me]);const ge=e=>{e&&($||_)||(void 0===M&&ue(e),V?.(e))},be=e=>{void 0===k&&se(e),B?.(e)},we=de??oe,ye=null!==de?fe:ie,Ne=(l,n)=>p(l)?f(l,q,G):e("span",{className:"text-(--neba-muted-fg)",children:n??""}),je=m(xe,1),Se=2===H,Ce=h(q,G),De=null!==de?ne.end:null===oe?ne.start:null,Oe={size:Y,color:Z,locale:q,weekStartsOn:ae,selected:[oe,ie,de],rangeStart:we,rangeEnd:ye,onSelect:e=>{const l=v(e);if(null===de)return he(l),pe(l),void be({start:l,end:null});const[n,a]=d(l,de)<0?[l,de]:[de,l];he(null),pe(null),be({start:n,end:a}),U&&ge(!1)},onPreviewChange:e=>{null!==de&&pe(e??de)},minDate:I,maxDate:F,shouldDisableDate:L,showOutsideDays:!1,labels:ne};return e(c,{...le,size:Y,color:Z,readOnly:$,disabled:_,triggerRef:z,startIcon:ee??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(oe,J)}),e(u,{samples:y(Ce,J)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(ie,K)}),e(u,{samples:y(Ce,K)})]})]}),empty:null===oe&&null===ie,clearable:T,onClear:()=>be(D),open:me,onOpenChange:ge,clearLabel:ne.clear,hiddenValues:X?[{name:X,value:oe?b(oe):""},{name:X,value:ie?b(ie):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[Y]),children:[Q&&Q.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:Q.map((l,n)=>e(a,{variant:"text",size:Y,color:Z,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),pe(null),be(l),p(l.start)&&ve(g(l.start)),U&&ge(!1)})(l),children:l.label},n))}):null,e(t,{...Oe,month:xe,onMonthChange:ve,showNextButton:!Se,autoFocus:!0}),Se?e(t,{...Oe,month:je,onMonthChange:e=>ve(m(e,-1)),showPreviousButton:!1}):null]}),T||null!==De?l(i,{size:Y,children:[null!==De?e("span",{className:N("me-auto text-(--neba-muted-fg)",S[Y]),children:De}):null,T?e(a,{variant:"text",size:Y,color:Z,density:"compact",onClick:()=>{he(null),pe(null),be(D),ge(!1)},children:ne.clear}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{Calendar as n,TimeGrid as o,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as m,formatDate as u,isDayOutside as p,isHour12 as h,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as y,startOfMonth as D,timeUnitSpan as g,toISODateTime as v,today as x,withPlaceholder as j,withTime as C}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as k}from"../../internal/defaults.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function(O,T){const{value:N,defaultValue:V,onValueChange:B,open:I,defaultOpen:M,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:L,shouldDisableDate:P,shouldDisableTime:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium",timeStyle:"short"},hour12:J,showSeconds:K=!1,hourStep:Q=1,minuteStep:U=1,secondStep:W=1,placeholder:X,clearable:Y=!1,showNowButton:Z=!0,closeOnSelect:$=!1,labels:_,name:ee,size:te="md",color:le="primary",density:ae="default",readOnly:ne=!1,disabled:oe=!1,startIcon:se,...ie}=k(O,["size","density","locale"]),re=s(_,A),ce=G??S(A),de=J??h(A),[me,ue]=l.useState(V??null),pe=void 0!==N?N:me,[he,fe]=l.useState(M??!1),Se=I??he,[be,ye]=l.useState(()=>D(f(pe)?pe:E??x()));l.useEffect(()=>{Se&&ye(D(f(pe)?pe:E??x()))},[Se]);const De=e=>{e&&(ne||oe)||(void 0===I&&fe(e),R?.(e))},ge=e=>{void 0===N&&ue(e),B?.(e)},ve=l.useCallback((e,t)=>{const[l,a]=g(t,e),n=y(e).getTime();return!!(f(F)&&n+1e3*a<F.getTime())||(!!(f(L)&&n+1e3*l>L.getTime())||(q?.(e,t)??!1))},[F,L,q]),xe=new Date,je=C(xe,{seconds:K?xe.getSeconds():0}),Ce=p(je,F,L)||(P?.(je)??!1)||ve(je,"second"),we=j(m(A,H),X);return e(d,{...ie,size:te,color:le,density:ae,readOnly:ne,disabled:oe,triggerRef:T,startIcon:se??e(i,{}),display:f(pe)?u(pe,A,H):X??"",samples:we,empty:!f(pe),clearable:Y,onClear:()=>ge(null),open:Se,onOpenChange:De,clearLabel:re.clear,hiddenValues:ee?[{name:ee,value:f(pe)?v(pe,K):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[te]),children:[e(n,{size:te,color:le,locale:A,weekStartsOn:ce,month:be,onMonthChange:ye,selected:[pe],onSelect:e=>{const t=f(pe)?b(e,pe):y(e);ge(t),ye(D(t)),$&&De(!1)},minDate:F,maxDate:L,shouldDisableDate:P,labels:re,autoFocus:!0}),e(r,{}),e(o,{size:te,density:ae,locale:A,value:f(pe)?pe:null,referenceDate:f(pe)?pe:x(),onChange:ge,hour12:de,showSeconds:K,hourStep:Q,minuteStep:U,secondStep:W,shouldDisableTime:ve,labels:re})]}),t(c,{size:te,children:[Y?e(a,{variant:"text",size:te,color:le,density:"compact",onClick:()=>{ge(null),De(!1)},children:re.clear}):null,Z?e(a,{variant:"text",size:te,color:le,density:"compact",disabled:Ce,onClick:()=>{ge(je),ye(D(je))},children:re.now}):null,e(a,{variant:"solid",size:te,color:le,density:"compact",onClick:()=>De(!1),children:re.done})]})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as n}from"@base-ui/react/dialog";import{boxPaddingXClasses as o,boxPaddingYClasses as a}from"../box/Box.js";import{actionMessages as r,useMessages as s}from"../../internal/i18n.js";import{CloseIcon as i}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,popupFadeClasses as m,radiusClasses as f,sheetBodyClasses as p,sheetHeaderGapClasses as u,sheetSectionGapClasses as x,sheetTitleClasses as b,surfaceClasses as h,surfaceSlots as v}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const w={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},y=[h,"relative flex w-full flex-col overflow-hidden","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]",m].join(" "),j=["fixed inset-0 z-(--neba-z-portal) bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",m].join(" "),N="border-t [border-color:var(--n-line)]";export const DialogClose=n.Close;export function Dialog(m){const{size:h="md",color:k="primary",density:$="default",open:z,defaultOpen:_,onOpenChange:C,trigger:D,title:O,description:P,actions:B,dividers:T=!1,showClose:W=!0,locale:L,closeLabel:R,width:S,fullWidth:V=!0,fullScreen:q=!1,modal:A=!0,dismissible:E=!0,className:F,classNames:G,style:H,children:I,...J}=g(m,["size","density","locale"]),K=s(r,L),M=o[$][h],Q=a[$][h],U=T?`${M} ${Q}`:M,X=c(O)||c(P),Y=c(B);return l(n.Root,{open:z,defaultOpen:_,modal:A,disablePointerDismissal:!E,onOpenChange:(e,l)=>{E||e||"escape-key"!==l.reason?C?.(e):l.cancel()},children:[D?e(n.Trigger,{render:D}):null,l(n.Portal,{children:[e(n.Backdrop,{className:t("neba-portal",j,G?.backdrop)}),e(n.Viewport,{className:t("neba-portal fixed inset-0 z-(--neba-z-portal) flex justify-center",q?"items-stretch":"items-center p-4",G?.viewport),children:l(n.Popup,{className:t(y,p[h],q?"h-full max-w-none rounded-none":`max-h-full ${f[h]} ${void 0===S?w[h]:""}`,q||V?"":"w-auto",T?"":`${Q} ${x[h]}`,F??""),style:{...v(k,3),...void 0===S?null:{maxWidth:"number"==typeof S?`${S}px`:S},...H},...J,children:[X||W?l("div",{className:`flex shrink-0 items-start gap-3 ${U}`,children:[l("div",{className:`flex min-w-0 flex-1 flex-col ${u[h]}`,children:[c(O)?e(n.Title,{className:t("font-semibold",b[h],"m-0",G?.title),children:O}):null,c(P)?e(n.Description,{className:t("m-0 text-(--neba-muted-fg)",d[h],G?.description),children:P}):null]}),W?e(n.Close,{"aria-label":R??K.close,className:t("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",G?.close),children:e(i,{})}):null]}):null,c(I)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",U,T&&(X||W)?N:"",T?"":"py-1 -my-1",G?.body),children:I}):null,Y?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",U,T?N:"",G?.actions),children:B}):null]})})]})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as t,useMessages as o}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{cx as i,hasContent as u,metaTextClasses as b,popupFadeClasses as m,sheetBodyClasses as c,sheetHeaderGapClasses as f,sheetSectionGapClasses as x,sheetTitleClasses as g,surfaceClasses as p,surfaceSlots as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const y={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},w={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},_={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"data-[starting-style]:[translate:-100%_0] data-[ending-style]:[translate:-100%_0]",right:"data-[starting-style]:[translate:100%_0] data-[ending-style]:[translate:100%_0]",top:"data-[starting-style]:[translate:0_-100%] data-[ending-style]:[translate:0_-100%]",bottom:"data-[starting-style]:[translate:0_100%] data-[ending-style]:[translate:0_100%]"},N={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},$=[p,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),k=["fixed inset-0 z-(--neba-z-portal) bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",m].join(" "),z="border-t [border-color:var(--n-line)]",C=["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"].join(" ");export const DrawerClose=l.Close;export function Drawer(m){const{side:p="left",mode:D="overlay",size:O="md",color:P="primary",density:B="default",open:T,defaultOpen:F,onOpenChange:L,trigger:R,title:V,description:q,actions:A,dividers:E=!1,showClose:G,locale:H,closeLabel:I,extent:J,rounded:K=!0,modal:M=!0,dismissible:Q=!0,className:S,style:U,children:W,...X}=v(m,["size","density","locale"]),Y=o(t,H),Z="overlay"===D,ee="left"===p||"right"===p,ae=G??Z,re=n[B][O],le=s[B][O],ne=E?`${re} ${le}`:re,se=u(V)||u(q),te=u(A),oe=void 0===J?null:{[ee?"width":"height"]:"number"==typeof J?`${J}px`:J},de=i($,c[O],_[p],K?w[p][O]:"",Z?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",Z?`[transition:translate_var(--neba-duration)_var(--neba-ease)] ${j[p]}`:"",ee?`h-full max-w-full ${void 0===J?y[O]:""}`:"w-full "+(void 0===J?"max-h-[85%]":""),E?"":`${le} ${x[O]}`,S??""),ie=Z?l.Title:"h2",ue=Z?l.Description:"p",be=a(r,{children:[se||ae?a("div",{className:`flex shrink-0 items-start gap-3 ${ne}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[O]}`,children:[u(V)?e(ie,{className:`m-0 font-semibold ${g[O]}`,children:V}):null,u(q)?e(ue,{className:`m-0 text-(--neba-muted-fg) ${b[O]}`,children:q}):null]}),ae?Z?e(l.Close,{"aria-label":I??Y.close,className:C,children:e(d,{})}):e("button",{type:"button","aria-label":I??Y.close,className:C,onClick:()=>L?.(!1),children:e(d,{})}):null]}):null,u(W)?e("div",{className:i("min-h-0 flex-1 overflow-y-auto overscroll-contain",ne,E&&(se||ae)?z:"",E?"":"py-1 -my-1"),children:W}):null,te?e("div",{className:i("flex shrink-0 flex-wrap items-center justify-end gap-2",ne,E?z:""),children:A}):null]});return Z?a(l.Root,{open:T,defaultOpen:F,modal:M,disablePointerDismissal:!Q,onOpenChange:(e,a)=>{Q||e||"escape-key"!==a.reason?L?.(e):a.cancel()},children:[R?e(l.Trigger,{render:R}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${k}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-(--neba-z-portal) flex ${N[p]}`,children:e(l.Popup,{className:de,style:{...h(P,3),...oe,...U},...X,children:be})})]})]}):T??F??!0?e("div",{className:de,style:{...h(P,0),...oe,...U},...X,children:be}):null}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import type { NebaAlignItems, NebaJustifyContent, NebaOrientation, NebaResponsive } from '../../types.js';
|
|
4
|
+
export interface FlexProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
/**
|
|
6
|
+
* Which way the row runs, in the library's own two words rather than CSS's
|
|
7
|
+
* four — `horizontal` is a row and `vertical` is a column, and `reverse`
|
|
8
|
+
* turns either around.
|
|
9
|
+
*
|
|
10
|
+
* Responsive, and this is the prop the component exists for:
|
|
11
|
+
* `direction={{ xs: 'vertical', md: 'horizontal' }}` is a stack on a phone
|
|
12
|
+
* and a row from 48rem, which is most of what a responsive layout is.
|
|
13
|
+
* @default 'horizontal'
|
|
14
|
+
*/
|
|
15
|
+
direction?: NebaResponsive<NebaOrientation>;
|
|
16
|
+
/**
|
|
17
|
+
* Runs the children the other way along whichever axis `direction` chose —
|
|
18
|
+
* `row-reverse` or `column-reverse`.
|
|
19
|
+
*
|
|
20
|
+
* Not responsive on purpose: it applies to every breakpoint's direction at
|
|
21
|
+
* once, which is what "the same row, backwards" means. It is a visual order
|
|
22
|
+
* only, so the DOM order is still what a screen reader and the tab sequence
|
|
23
|
+
* follow — reverse a row whose order carries meaning and the two disagree.
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
reverse?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* The gutter between children, on Tailwind's spacing scale — `spacing={4}`
|
|
29
|
+
* is `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
|
|
30
|
+
* `0.375rem`.
|
|
31
|
+
*
|
|
32
|
+
* The same prop, the same scale and the same slot a
|
|
33
|
+
* [GridContainer](../grid) uses, so a gutter is one number across the two.
|
|
34
|
+
* @default 0
|
|
35
|
+
*/
|
|
36
|
+
spacing?: NebaResponsive<number>;
|
|
37
|
+
/** The gutter between wrapped lines only. Falls back to `spacing`. */
|
|
38
|
+
rowSpacing?: NebaResponsive<number>;
|
|
39
|
+
/** The gutter along the row only. Falls back to `spacing`. */
|
|
40
|
+
columnSpacing?: NebaResponsive<number>;
|
|
41
|
+
/** How the row distributes the space its children did not use. */
|
|
42
|
+
justifyContent?: NebaJustifyContent;
|
|
43
|
+
/** How the children sit across the axis the row runs on. */
|
|
44
|
+
alignItems?: NebaAlignItems;
|
|
45
|
+
/** Where wrapped lines sit when the box is taller than they are. */
|
|
46
|
+
alignContent?: NebaJustifyContent;
|
|
47
|
+
/**
|
|
48
|
+
* Whether a row that runs out of width continues on the next line.
|
|
49
|
+
*
|
|
50
|
+
* Off by default, which is the opposite of a `GridContainer` and deliberate:
|
|
51
|
+
* a grid is columns and wrapping is what columns do, while a Flex is most
|
|
52
|
+
* often a toolbar or a field row that should stay on one line and let its
|
|
53
|
+
* children shrink.
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
wrap?: boolean;
|
|
57
|
+
/** Lays the box out inline, so it sits in a line of text. @default false */
|
|
58
|
+
inline?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Renders something other than a `<div>`: `render={<nav />}`,
|
|
61
|
+
* `render={<ul />}`. Base UI's own escape hatch.
|
|
62
|
+
*/
|
|
63
|
+
render?: useRender.RenderProp;
|
|
64
|
+
children?: React.ReactNode;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* A row, or a column, and the width at which it changes from one to the other.
|
|
68
|
+
*
|
|
69
|
+
* This is the most common responsive decision there is — a pair of buttons side
|
|
70
|
+
* by side on a desktop and stacked on a phone, a form's label beside its field
|
|
71
|
+
* and then above it — and until now the only way to say it was a
|
|
72
|
+
* [GridContainer](../grid) with a `Grid` around each child, which is two
|
|
73
|
+
* components and a column count to describe a row of two things.
|
|
74
|
+
*
|
|
75
|
+
* `direction` is the whole point and is responsive; `spacing` is the gutter, on
|
|
76
|
+
* the same scale and through the same slot a grid's is, so one number means one
|
|
77
|
+
* length across both. Everything else is the flexbox vocabulary spelled the way
|
|
78
|
+
* the rest of the library spells it.
|
|
79
|
+
*
|
|
80
|
+
* It draws nothing at all — no surface, no padding, not even a gutter unless
|
|
81
|
+
* one is asked for. That is the difference between it and a `GridContainer`,
|
|
82
|
+
* which pads by default because a grid is a page's own arrangement; a Flex is
|
|
83
|
+
* used inside everything, and a wrapper that changed how its children looked
|
|
84
|
+
* would make `direction` a visual decision. Put it in a Box or a Card when a
|
|
85
|
+
* sheet is wanted.
|
|
86
|
+
*
|
|
87
|
+
* The direction and the gutters arrive as inherited custom properties rather
|
|
88
|
+
* than through a context, for the reason `GridContainer` does the same: a media
|
|
89
|
+
* query can change one without React hearing about it, so what is on screen is
|
|
90
|
+
* always what the window is currently worth. A context would have to re-render
|
|
91
|
+
* the tree at every breakpoint to say the same thing.
|
|
92
|
+
*/
|
|
93
|
+
export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|