neba 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -5
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-lighting/AnimateLighting.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/aspect-ratio/AspectRatio.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/avatar-group/AvatarGroup.js +1 -1
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/bar-chart/BarChart.d.ts +1 -1
- package/dist/components/bar-chart/BarChart.js +1 -1
- package/dist/components/blockquote/Blockquote.js +1 -1
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/box/Box.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.js +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button-group/ButtonGroup.js +1 -1
- package/dist/components/calendar/Calendar.d.ts +72 -0
- package/dist/components/calendar/Calendar.js +1 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/card/Card.js +1 -1
- package/dist/components/carousel/Carousel.js +1 -1
- package/dist/components/chat-bubble/ChatBubble.js +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +13 -1
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/collapsible/Collapsible.js +1 -1
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +29 -2
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +19 -2
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/confirm/Confirm.d.ts +83 -0
- package/dist/components/confirm/Confirm.js +1 -0
- package/dist/components/confirm/index.d.ts +2 -0
- package/dist/components/confirm/index.js +1 -0
- package/dist/components/container/Container.js +1 -1
- package/dist/components/data-list/DataList.js +1 -1
- package/dist/components/data-table/DataTable.d.ts +104 -1
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/date-picker/DatePicker.d.ts +40 -8
- 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.d.ts +19 -2
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/divider/Divider.js +1 -1
- package/dist/components/drawer/Drawer.d.ts +1 -1
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/empty/Empty.js +1 -1
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
- package/dist/components/footer/Footer.js +1 -1
- package/dist/components/gauge-chart/GaugeChart.d.ts +1 -1
- package/dist/components/gauge-chart/GaugeChart.js +1 -1
- package/dist/components/grid-container/GridContainer.js +1 -1
- package/dist/components/header/Header.js +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.d.ts +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
- package/dist/components/highlight/Highlight.js +1 -1
- package/dist/components/hover-card/HoverCard.d.ts +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 +70 -0
- package/dist/components/image/Image.js +1 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/image/index.js +1 -0
- package/dist/components/list/List.js +1 -1
- package/dist/components/menubar/Menubar.js +1 -1
- package/dist/components/meter/Meter.js +1 -1
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/number-field/NumberField.d.ts +27 -2
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/otp-field/OtpField.js +1 -1
- package/dist/components/overlay/Overlay.d.ts +1 -1
- package/dist/components/overlay/Overlay.js +1 -1
- package/dist/components/page-layout/PageLayout.js +1 -1
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/pie-chart/PieChart.d.ts +1 -1
- package/dist/components/pie-chart/PieChart.js +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popconfirm/Popconfirm.d.ts +71 -0
- package/dist/components/popconfirm/Popconfirm.js +1 -0
- package/dist/components/popconfirm/index.d.ts +2 -0
- package/dist/components/popconfirm/index.js +1 -0
- package/dist/components/popover/Popover.d.ts +1 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/portal/Portal.d.ts +48 -0
- package/dist/components/portal/Portal.js +1 -0
- package/dist/components/portal/index.d.ts +2 -0
- package/dist/components/portal/index.js +1 -0
- package/dist/components/progress-box/ProgressBox.js +1 -1
- package/dist/components/progress-circular/ProgressCircular.js +1 -1
- package/dist/components/progress-linear/ProgressLinear.js +1 -1
- package/dist/components/provider/NebaProvider.d.ts +99 -0
- package/dist/components/provider/NebaProvider.js +1 -0
- package/dist/components/provider/index.d.ts +3 -0
- package/dist/components/provider/index.js +1 -0
- package/dist/components/radio-group/RadioGroup.d.ts +22 -1
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/rating/Rating.js +1 -1
- package/dist/components/scatter-chart/ScatterChart.d.ts +1 -1
- package/dist/components/scatter-chart/ScatterChart.js +1 -1
- package/dist/components/scroll-area/ScrollArea.js +1 -1
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/select/Select.d.ts +16 -1
- package/dist/components/select/Select.js +1 -1
- package/dist/components/shortcut/Shortcut.d.ts +2 -1
- package/dist/components/shortcut/Shortcut.js +1 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/sidebar/SidebarTrigger.js +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/sparkline/Sparkline.js +1 -1
- package/dist/components/spoiler/Spoiler.js +1 -1
- package/dist/components/statistic/Statistic.js +1 -1
- package/dist/components/switch/Switch.d.ts +13 -1
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/table/Table.d.ts +21 -2
- package/dist/components/table/Table.js +1 -1
- package/dist/components/text-field/TextField.d.ts +27 -1
- package/dist/components/text-field/TextField.js +1 -1
- package/dist/components/text-link/TextLink.js +1 -1
- package/dist/components/time-picker/TimePicker.js +1 -1
- package/dist/components/timeline-chart/TimelineChart.d.ts +1 -1
- package/dist/components/timeline-chart/TimelineChart.js +1 -1
- package/dist/components/toast/Toast.d.ts +17 -2
- package/dist/components/toast/Toast.js +1 -1
- package/dist/components/toggle/Toggle.js +1 -1
- package/dist/components/toggle-group/ToggleGroup.js +1 -1
- package/dist/components/toolbar/Toolbar.js +1 -1
- package/dist/components/tooltip/Tooltip.d.ts +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.d.ts +17 -2
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.d.ts +88 -0
- package/dist/components/tree-select/TreeSelect.js +1 -0
- package/dist/components/tree-select/index.d.ts +2 -0
- package/dist/components/tree-select/index.js +1 -0
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/visually-hidden/VisuallyHidden.d.ts +37 -0
- package/dist/components/visually-hidden/VisuallyHidden.js +1 -0
- package/dist/components/visually-hidden/index.d.ts +2 -0
- package/dist/components/visually-hidden/index.js +1 -0
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/hooks/index.d.ts +10 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useDisclosure.d.ts +21 -0
- package/dist/hooks/useDisclosure.js +1 -0
- package/dist/hooks/useElementSize.d.ts +23 -0
- package/dist/hooks/useElementSize.js +1 -0
- package/dist/hooks/useMediaQuery.d.ts +27 -0
- package/dist/hooks/useMediaQuery.js +1 -0
- package/dist/hooks/useOnScreen.d.ts +24 -0
- package/dist/hooks/useOnScreen.js +1 -0
- package/dist/hooks/useShortcut.d.ts +34 -0
- package/dist/hooks/useShortcut.js +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +1 -1
- package/dist/internal/calendar.d.ts +31 -5
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/csv.d.ts +40 -0
- package/dist/internal/csv.js +1 -0
- package/dist/internal/date.d.ts +39 -1
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +46 -0
- package/dist/internal/defaults.js +1 -0
- package/dist/internal/i18n.d.ts +23 -0
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/keys.d.ts +92 -0
- package/dist/internal/keys.js +1 -0
- package/dist/internal/media.d.ts +27 -0
- package/dist/internal/media.js +1 -1
- package/dist/internal/page-layout.d.ts +7 -0
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +7 -1
- package/dist/internal/picker.js +1 -1
- 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/types.d.ts +73 -0
- package/package.json +6 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as r}from"../../internal/i18n.js";import{MinusIcon as s,PlusIcon as i}from"../../internal/icons.js";import{keyHandler as o}from"../../internal/keys.js";import{controlHeightClasses as c,controlTextLeadingClasses as d,cx as m,disabledClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,focusWithinRingClasses as b,gapClasses as h,hasContent as x,iconClasses as g,metaTextClasses as v,paddingXClasses as N,radiusClasses as j,stackGapClasses as y,surfaceSlots as w,transitionClasses as k}from"../../internal/styles.js";import{useStyleDefaults as S}from"../../internal/defaults.js";const _=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",k,"focus-within:[transition-duration:0ms]",b,g].join(" "),V=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField(b){const{variant:g="outline",size:k="md",color:z="primary",density:C="default",elevation:I=0,value:O,defaultValue:D,onValueChange:L,onValueCommitted:W,min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K=!1,format:$,locale:A,steppers:H="end",incrementLabel:J,decrementLabel:M,label:P,description:Q,error:T,invalid:U,startIcon:X,endIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ne=!1,required:te=!1,name:ae,placeholder:le,id:re,className:se,classNames:ie,shortcuts:oe,style:ce,...de}=S(b,["size","density","variant","locale"]),me=r(l,"string"==typeof A?A:void 0),ue=x(T),pe=U??ue,fe=pe?"danger":z,be=N[C][k],he={end:`${be} pe-1`,split:"px-1",none:be},xe=e(t.Decrement,{"aria-label":M??me.decrease,className:m(V,ie?.stepper),children:e(s,{})}),ge=e(t.Increment,{"aria-label":J??me.increase,className:m(V,ie?.stepper),children:e(i,{})}),ve="none"!==H&&!ne;return n(a.Root,{disabled:ee,invalid:pe,className:m("flex-col align-top",y[k],Z?"flex w-full":"inline-flex",se??""),style:{...w(fe,I),...ce},...de,children:[P?e(a.Label,{className:m(v[k],"font-medium",ee?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ie?.label),children:P}):null,e(t.Root,{id:re,name:ae,className:"contents",value:O,defaultValue:D,onValueChange:e=>L?.(e),onValueCommitted:e=>W?.(e),min:q,max:F,step:R,largeStep:B,smallStep:E,snapOnStep:G,allowWheelScrub:K,format:$,locale:A,disabled:ee,readOnly:ne,required:te,children:n(t.Group,{className:m(_,c[k],d[k],j[k],h[k],ve?he[H]:be,ee?u[g]:ne?p[g]:f[g],ie?.shell),children:[ve&&"split"===H?xe:null,X?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:X}):null,e(t.Input,{onKeyDown:o(oe),placeholder:le,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===H&&ve?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",ie?.control].filter(Boolean).join(" ")}),Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Y}):null,ve&&"end"===H?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[xe,ge]}):null,ve&&"split"===H?ge:null]})}),Q?e(a.Description,{className:m(v[k],"text-(--neba-muted-fg)",ie?.description),children:Q}):null,e(a.Error,ue?{match:!0,className:m(v[k],"text-(--n-accent)",ie?.error),children:T}:{className:m(v[k],"text-(--n-accent)",ie?.error)})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as i,fieldReadOnlyClasses as s,fieldRestClasses as o,metaTextClasses as m,stackGapClasses as d,surfaceSlots as u,transitionClasses as c}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const f={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=/*@__PURE__*/t.forwardRef(function(y,v){const{variant:N="outline",size:V="md",color:w="primary",density:j="default",elevation:C=0,length:F=6,charset:M="numeric",mask:z=!1,groupSize:I,separator:O="–",value:R,defaultValue:S,onValueChange:k,onComplete:q,onValueInvalid:_,autoSubmit:A=!1,label:D,description:E,error:L,invalid:T,name:B,required:G=!1,disabled:H=!1,readOnly:J=!1,autoFocus:K=!1,className:P,style:Q,...U}=p(y,["size","density","variant"]),W=Math.min(12,Math.max(2,Math.round(F))),X=null!=L&&!1!==L&&""!==L,Y=T??X,Z=Y?"danger":w,$=r("text-center font-medium [font-family:inherit]",f[V],g[V],x[V],c,"caret-(--n-accent) selection:bg-(--n-soft-press)","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-1","focus:[transition-duration:0ms]",H?i[N]:J?s[N]:o[N]),ee=I&&I>0?Math.round(I):0;return a(n.Root,{disabled:H,invalid:Y,className:r("inline-flex flex-col align-top",d[V],P),style:{...u(Z,C),...Q},children:[D?e(n.Label,{className:r(m[V],"font-medium",H?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:D}):null,e(l.Root,{ref:v,length:W,validationType:b[M],mask:z,name:B,required:G,disabled:H,readOnly:J,autoSubmit:A,value:R,defaultValue:S,onValueChange:e=>k?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>_?.(e),className:r("flex items-center",h[j][V]),...U,children:Array.from({length:W},(n,i)=>a(t.Fragment,{children:[ee>0&&i>0&&i%ee===0?e("span",{"aria-hidden":"true",className:r("select-none px-0.5 text-(--neba-muted-fg)",g[V]),children:O}):null,e(l.Input,{className:$,autoFocus:K&&0===i})]},i))}),E?e(n.Description,{className:r(m[V],"text-(--neba-muted-fg)"),children:E}):null,e(n.Error,X?{match:!0,className:r(m[V],"text-(--n-accent)"),children:L}:{className:r(m[V],"text-(--n-accent)")})]})});
|
|
@@ -87,4 +87,4 @@ export interface OverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>
|
|
|
87
87
|
* held inside, the page behind going inert, and focus returning to wherever it
|
|
88
88
|
* came from when the overlay closes.
|
|
89
89
|
*/
|
|
90
|
-
export declare function Overlay(
|
|
90
|
+
export declare function Overlay(rawProps: OverlayProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{overlayMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{overlayMessages as t,useMessages as l}from"../../internal/i18n.js";import{cx as n,surfaceSlots as i}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const o={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},c={start:"items-start",center:"items-center",end:"items-end"},m={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},p=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function Overlay(d){const{open:b,defaultOpen:f,onOpenChange:u,tone:x="scrim",dismissible:y=!1,modal:g=!0,align:j="center",size:h="md",color:k="primary",locale:O,label:_,className:v,style:z,children:N,...P}=s(d,["size","locale"]),w=l(t,O);return e(r.Root,{open:b,defaultOpen:f,modal:g,disablePointerDismissal:!y,onOpenChange:(e,a)=>{y||e||"escape-key"!==a.reason?u?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${p} ${o[x]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",c[j],m[h]].join(" "),children:e(r.Popup,{"aria-label":_??w.label,className:n("flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",p,v??""),style:{...i(k,0),...z},...P,children:N})})]})})}
|
|
@@ -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*as o from"react";import{layoutMessages as n,useMessages as t}from"../../internal/i18n.js";import{PageLayoutContext as r,SidebarSideContext as a}from"../../internal/page-layout.js";import{observeResize as s}from"../../internal/observe.js";import{controlSlots as i,cx as u,hasContent as f,toLength as c}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";const p=["header","footer"];export const PageLayout=/*@__PURE__*/o.forwardRef(function(m,h){const{header:v,footer:x,sidebar:y,endSidebar:b,headerSpan:g="full",footerSpan:w="full",scroll:S="page",height:k="viewport",collapseBelow:C="md",sidebarOpen:P,defaultSidebarOpen:j=!1,onSidebarOpenChange:N,endSidebarOpen:O,defaultEndSidebarOpen:$=!1,onEndSidebarOpenChange:R,skipLink:z=!0,skipLabel:E,mainId:L="main",mainProps:B,locale:H,color:M="primary",className:_,style:I,children:T,...q}=d(m,["locale"]),A=t(n,H),[D,F]=o.useState(j),[G,J]=o.useState($),K=o.useMemo(()=>({start:P??D,end:O??G}),[P,D,O,G]),Q=o.useCallback((e,l)=>{if("start"===e)return void 0===P&&F(l),void N?.(l);void 0===O&&J(l),R?.(l)},[P,O,N,R]),U=o.useRef(null),V=o.useCallback(e=>{U.current=e,"function"==typeof h?h(e):h&&(h.current=e)},[h]),W=o.useRef({header:null,footer:null}),X=o.useRef({header:null,footer:null}),Y=o.useCallback(()=>{const e=U.current;if(e)for(const l of p){const o=W.current[l],n="header"===l?g:w;if(!o){e.style.setProperty(`--n-layout-${l}`,"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"0px");continue}const t=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===t||"fixed"===t;e.style.setProperty(`--n-layout-${l}`,a&&"full"===n?r:"0px"),e.style.setProperty(`--n-layout-${l}-inset`,"fixed"===t?r:"0px")}},[g,w]),Z=o.useCallback(()=>{for(const e of p){X.current[e]?.();const l=W.current[e];X.current[e]=l?s(l,()=>Y()):null}Y()},[Y]);o.useEffect(()=>{const e=X.current;return Z(),()=>{for(const l of p)e[l]?.(),e[l]=null}},[Z]);const ee=o.useCallback((e,l)=>{W.current[e]=l,Z()},[Z]),le=o.useMemo(()=>({present:!0,register:ee,collapseBelow:C,open:K,setOpen:Q,scroll:S,locale:H}),[ee,C,K,Q,S,H]),oe="content"===S,ne=c("viewport"===k||"auto"===k?void 0:k),te=void 0!==ne?"":"auto"===k?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=f(v)?v:null,ae=f(x)?x:null;return e(r.Provider,{value:le,children:l("div",{ref:V,className:u("relative flex w-full flex-col",oe?"overflow-hidden":"",te,"full"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","full"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":"",_),style:void 0===ne?I:{...oe?{height:ne}:{minHeight:ne},...I},...q,children:[z?e("a",{href:`#${L}`,className:u("absolute start-3 top-3 z-50 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--neba-radius-md) focus:bg-(--n-fill) focus:px-4 focus:py-2","focus:font-medium focus:text-(--n-on-solid) focus:no-underline","focus:[box-shadow:var(--neba-shadow-2),var(--neba-plate-solid)]","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-2"),style:i(M,2,"solid"),children:E??A.skipToContent}):null,"full"===g?re:null,l("div",{className:u("flex w-full flex-1",oe?"min-h-0":""),children:[f(y)?e(a.Provider,{value:"start",children:y}):null,l("div",{className:u("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===g?"[padding-top:var(--n-layout-header-inset,0px)]":"","content"===w?"[padding-bottom:var(--n-layout-footer-inset,0px)]":""),children:["content"===g?re:null,e("main",{...B,id:L,className:u("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",B?.className),children:T}),"content"===w?ae:null]}),f(b)?e(a.Provider,{value:"end",children:b}):null]}),"full"===w?ae:null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{fillMessage as r,paginationMessages as l,useMessages as i}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as o,cx as m,gapClasses as c,srOnlyClasses as u}from"../../internal/styles.js";function
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button.js";import{fillMessage as r,paginationMessages as l,useMessages as i}from"../../internal/i18n.js";import{ChevronIcon as s}from"../../internal/icons.js";import{controlTextClasses as o,cx as m,gapClasses as c,srOnlyClasses as u}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";function h(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function f(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=/*@__PURE__*/a.forwardRef(function(x,g){const{variant:b="text",size:v="md",color:y="primary",density:M="compact",elevation:j=0,count:w,page:N,defaultPage:L=1,onPageChange:k,siblingCount:C=1,boundaryCount:z=1,showEdges:K=!1,showArrows:P=!0,disabled:S=!1,getPageHref:$,locale:A,label:B,pageLabel:D,previousLabel:E,nextLabel:H,firstLabel:I,lastLabel:R,className:W,children:q,...F}=d(x,["size","density","variant","locale"]),G=i(l,A),J=D??(e=>r(G.page,{page:String(e)})),[O,Q]=a.useState(L),T=Math.min(Math.max(N??O,1),Math.max(w,1));if(w<2)return null;const U=function(e,t,a,n){const r=h(1,Math.min(n,e)),l=h(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),s=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...h(i,s),...s<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(w,T,C,z),V=T<=1,X=T>=w,Y=(t,a,n)=>$&&!a?{render:e("a",{href:$(t),rel:n})}:null,Z=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!k||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),w);t!==T&&(void 0===N&&Q(t),k?.(t))})(t))},_=(t,a,r,l,i,s,o)=>e("li",{className:"flex",children:e(n,{variant:b,size:v,color:y,density:M,elevation:j,disabled:S||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:s}),onClick:e=>Z(e,r),...Y(r,S||l,o)})},t);return t("nav",{ref:g,"aria-label":B??G.label,className:m("flex items-center",W??""),...F,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${c[v]}`,children:[K?_("first",I??G.first,1,V,"rotate-180 rtl:rotate-0",e(f,{})):null,P?_("previous",E??G.previous,T-1,V,"rotate-90 rtl:-rotate-90",e(s,{}),"prev"):null,U.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===T?"solid":b,size:v,color:y,density:M,elevation:j,disabled:S,"aria-label":J(t),"aria-current":t===T?"page":void 0,className:"tabular-nums",onClick:e=>Z(e,t),...Y(t,S||t===T),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",o[v],p[v]].join(" "),children:"…"},`slot-${a}`)),P?_("next",H??G.next,T+1,X,"-rotate-90 rtl:rotate-90",e(s,{}),"next"):null,K?_("last",R??G.last,w,X,"rtl:rotate-180",e(f,{})):null]}),e("span",{className:u,"aria-live":"polite",children:r(G.status,{page:String(T),total:String(w)})}),q]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";const
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{beginPointerDrag as r}from"../../internal/drag.js";import{observeResize as i}from"../../internal/observe.js";import{cx as o,toPixels as a,transitionClasses as l}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const c=/*@__PURE__*/t.createContext({basis:null}),u={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},f={xs:4,sm:6,md:8,lg:10,xl:12};function m(e,n,t){if(null!=e)return"number"==typeof e?n*e/100:a(e,{percentOf:n,relativeTo:t})}export const Panes=/*@__PURE__*/t.forwardRef(function(a,d){const{orientation:h="horizontal",resizable:p=!0,color:g="primary",size:x="md",onResize:v,onResizeEnd:b,className:z,style:w,children:y,...R}=s(a,["size"]),M=t.Children.toArray(y).filter(t.isValidElement),S=M.length,j=t.useRef(null),C=t.useCallback(e=>{j.current=e,"function"==typeof d?d(e):d&&(d.current=e)},[d]),k=t.useRef([]);k.current=M.map(e=>e.props);const[N,$]=t.useState(null),A=N&&N.length===S?N:null,E=t.useRef(null);E.current=A;const D="horizontal"===h,P=f[x]*Math.max(0,S-1);function I(e){const n=j.current,t=E.current;if(!p||!n||!t||void 0===t[e+1])return null;const r=n.getBoundingClientRect(),i=(D?r.width:r.height)-P;if(i<=0)return null;const o=k.current[e],a=k.current[e+1],l=t[e]*i,s=l+t[e+1]*i,c=Math.max(m(o?.minSize,i,n)??0,s-(m(a?.maxSize,i,n)??s)),u=Math.min(m(o?.maxSize,i,n)??s,s-(m(a?.minSize,i,n)??0));return u<c?null:{root:n,current:t,extent:i,start:l,pair:s,resize(n){const r=Math.min(u,Math.max(c,l+n)),o=[...t];return o[e]=r/i,o[e+1]=(s-r)/i,$(o),v?.(o.map(e=>100*e)),o}}}t.useEffect(()=>{const e=j.current;if(!e)return;const n=()=>{const n=e.getBoundingClientRect(),t=(D?n.width:n.height)-P;t<=0||$(n=>n&&n.length===S?n:function(e,n,t){const r=e.map(e=>m(e.defaultSize,n,t)),i=r.reduce((e,n)=>e+(n??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,n-i)/o:0,l=r.map(e=>Math.max(0,e??a)),s=l.reduce((e,n)=>e+n,0);return s<=0?l.map(()=>1/Math.max(1,l.length)):l.map(e=>e/s)}(k.current,t,e))};return n(),i(e,n)},[S,D,P]);const B=t.useRef(null);t.useEffect(()=>()=>B.current?.(),[]);const F=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",u[x],l,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",p?o(D?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:C,className:o("flex h-full w-full",D?"flex-row":"flex-col","min-h-0 min-w-0",z),style:{"--n-accent":`var(--neba-${g}-accent)`,"--n-soft":`var(--neba-${g}-soft)`,"--n-ring":`var(--neba-${g}-ring)`,...w},...R,children:M.map((i,a)=>n(t.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":D?"vertical":"horizontal","aria-valuenow":A?Math.round(100*A[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!p||void 0,tabIndex:p?0:-1,className:F,onPointerDown:e=>{0===e.button&&function(e,n){const t=I(e);if(!t)return;const i=n.currentTarget,o=D?n.clientX:n.clientY,a=D&&"rtl"===getComputedStyle(t.root).direction?-1:1;let l=t.current;B.current=r({target:i,pointerId:n.pointerId,onMove:e=>{const n=D?e.clientX:e.clientY;l=t.resize((n-o)*a)},onEnd:()=>{B.current=null,b?.(l.map(e=>100*e))}})}(a-1,e)},onKeyDown:e=>{const n=D?"ArrowLeft":"ArrowUp",t=D?"ArrowRight":"ArrowDown";e.key!==n&&e.key!==t||(e.preventDefault(),function(e,n){const t=I(e);if(!t)return;const r=t.resize(n);b?.(r.map(e=>100*e))}(a-1,e.key===t?16:-16))},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--neba-border)",l,D?"h-full w-px":"h-px w-full",p?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(c.Provider,{value:{basis:A?`calc((100% - ${P}px) * ${A[a].toFixed(6)})`:null},children:i})]},i.key??a))})});export const Pane=/*@__PURE__*/t.forwardRef(function({defaultSize:n,minSize:r,maxSize:i,className:a,style:l,children:s,...u},f){const{basis:m}=t.useContext(c);return e("div",{ref:f,className:o("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:s})});
|
|
@@ -55,4 +55,4 @@ export interface PieChartProps extends ChartBaseProps {
|
|
|
55
55
|
* A slice's colour follows the slice and not its size, so a chart that is
|
|
56
56
|
* refiltered or resorted keeps every category the colour it had.
|
|
57
57
|
*/
|
|
58
|
-
export declare function PieChart(
|
|
58
|
+
export declare function PieChart(rawProps: PieChartProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as l,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as o,useMeasuredWidth as s,useVisibility as d}from"../../internal/chart-frame.js";import{arcPath as u,categoryAt as m,chartFontSizes as c,compactNumber as h,formatCategory as v,markGap as f,plotHeights as p,seriesColor as b,toValue as x}from"../../internal/chart.js";import{numberFormatter as g}from"../../internal/format.js";import{cx as y,metaTextClasses as M}from"../../internal/styles.js";import{chartMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as l,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as o,useMeasuredWidth as s,useVisibility as d}from"../../internal/chart-frame.js";import{arcPath as u,categoryAt as m,chartFontSizes as c,compactNumber as h,formatCategory as v,markGap as f,plotHeights as p,seriesColor as b,toValue as x}from"../../internal/chart.js";import{numberFormatter as g}from"../../internal/format.js";import{cx as y,metaTextClasses as M}from"../../internal/styles.js";import{chartMessages as j,emptyMessages as N,useMessages as w}from"../../internal/i18n.js";import{useStyleDefaults as z}from"../../internal/defaults.js";const I={pie:0,donut:.62,semi:.62};export function PieChart(P){const{data:k,categories:A,shape:$="pie",startAngle:L=0,center:S,valueLabels:_="none",height:B,format:E,locale:R,label:C,legend:D,tooltip:O,empty:K,size:V="md",variant:W="text",padded:q=!1,className:F,...G}=z(P,["size","variant","locale"]),H=a.useRef(null),J=s(H),Q=w(N,R),T=w(j,R),U=a.useId(),X=a.useCallback(e=>E?g(R,E).format(e):h(e,R),[E,R]),Y=a.useMemo(()=>k.map(x),[k]),Z=a.useMemo(()=>Y.map((e,t)=>({name:v(m(t,A,[Y]),R),data:[k[t]],color:e.color})),[Y,A,k,R]),ee=d(Z),[te,ae]=a.useState(null),ne=Z.map((e,t)=>b(e,t)),le=Y.reduce((e,t,a)=>ee.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),ie="semi"===$,re="number"==typeof B?B:p[V],oe=c[V],se=!1===D?{interactive:!1}:!0===D||void 0===D?{}:D,de=!1!==D&&Z.length>1,ue=se.side??"bottom",me=!1===O?{mode:"none"}:!0===O||void 0===O?{}:O,ce="none"===me.mode,he=J/2,ve=Math.max(0,Math.min(J/2,ie?re:re/2)-2),fe=ie?Math.min(re,re/2+ve/2):re/2,pe=ve*I[$],be=le<=0||ve<=0,xe=ve>0?Math.min(4,f/ve*(180/Math.PI)):0,ge=ie?180:360,ye=[];let Me=ie?-90:L;Y.forEach((e,t)=>{if(!ee.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/le,n=a*ge;ye.push({index:t,start:Me,end:Me+n,value:e.value,share:a}),Me+=n});const je=null===te?[]:[{seriesIndex:te,name:Z[te]?.name,color:Y[te]?.color??ne[te],value:Y[te]?.value??null,formatted:`${X(Y[te]?.value??0)} · ${Math.round(10*(Math.abs(Y[te]?.value??0)/le*100+Number.EPSILON))/10}%`,label:Y[te]?.label}];return t(r,{...G,size:V,variant:W,padded:q,className:F,legendSide:ue,legend:de?e(l,{series:Z,colors:ne,options:se,visibility:ee,size:V,values:se.showValue?Y.map(e=>null===e.value?void 0:X(e.value)):void 0}):null,table:be?null:e(n,{id:U,caption:C,categories:Z.map(e=>e.name??""),series:[{name:C,data:k}],values:[Y],format:X,locale:R}),children:[t("div",{ref:H,role:"img",tabIndex:be?void 0:0,"aria-label":C??T.label,"aria-describedby":be?void 0:U,onPointerLeave:()=>ae(null),onBlur:()=>ae(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=ye.map(e=>e.index);if(0===t.length)return;const a=null===te?-1:t.indexOf(te),n="ArrowRight"===e.key?a+1:a-1;ae(t[(n+t.length)%t.length]),e.preventDefault()},className:y("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:re},children:[be?e("div",{className:y("flex h-full items-center justify-center text-(--neba-muted-fg)",M[V]),children:K??Q.title}):J>0?t("svg",{width:J,height:re,viewBox:`0 0 ${J} ${re}`,"aria-hidden":"true",className:"block",children:[ye.map(t=>{const a=null!==ee.hovered&&ee.hovered!==t.index||null!==te&&te!==t.index,n=t.end-t.start>2*xe?xe/2:0;return e("path",{d:u(he,fe,ve,pe,t.start+n,t.end-n),fill:Y[t.index].color??ne[t.index],opacity:a?.32:1,onPointerEnter:ce?void 0:()=>ae(t.index),className:"[transition:opacity_var(--neba-duration)_var(--neba-ease)]"},t.index)}),"all"===_?ye.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),n=pe>0?(pe+ve)/2:.68*ve,l=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*n<2*oe||ve-pe<1.6*oe?null:e("text",{x:he+n*Math.cos(a),y:fe+n*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:oe,fontWeight:600,fill:"var(--neba-surface)",className:"tabular-nums",children:l},t.index)}):null]}):null,S&&pe>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:he-pe,top:fe-pe,width:2*pe,height:ie?pe:2*pe},children:S}):null,null===te||ce?null:me.render?e("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10",children:me.render({index:te,category:Z[te]?.name??te,items:je})}):e(o,{heading:Z[te]?.name,items:je,x:he,y:8,flip:!1,size:V})]}),ce?null:e(i,{heading:null===te?void 0:Z[te]?.name,items:je})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observeResize as o}from"../../internal/observe.js";import{controlSlots as i,controlTextClasses as r,cx as s,focusRingClasses as a,gapClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observeResize as o}from"../../internal/observe.js";import{controlSlots as i,controlTextClasses as r,cx as s,focusRingClasses as a,gapClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as f,metaTextClasses as x,paddingXClasses as p,pressTransitionClasses as u,sheetBodyClasses as h,surfaceClasses as v,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const w={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${v} text-(--n-accent) bg-(--n-soft)`},j={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},y={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},N={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},k={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},z={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=/*@__PURE__*/l.forwardRef(function(v,$){const{variant:_="solid",size:C="md",color:H="secondary",density:I="default",elevation:R=2,startIcon:B,endIcon:E,title:F,description:P,details:S,expanded:q=!1,position:A="static",side:D="top",className:G,style:J,children:K,onClick:L,...M}=g(v,["size","density","variant"]),O=l.useRef(null),[Q,T]=l.useState(0);l.useEffect(()=>{const e=O.current;if(e)return T(e.scrollHeight),o(e,()=>T(e.scrollHeight))},[S]);const U=Boolean(L),V=p[I][C],W=n(t,{children:[d(B)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${f[C]}`,children:B}):null,d(F)||d(P)||d(K)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",k[I][C]].join(" "),children:[d(F)?e("span",{className:"max-w-full truncate",children:F}):null,d(P)?e("span",{className:`max-w-full truncate font-normal ${x[C]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:P}):null,K]}):null]});return n("div",{ref:$,className:s("inline-flex max-w-full flex-col overflow-hidden align-middle",N[C],"font-medium whitespace-nowrap select-none",r[C],w[_],b,u,m,U?`neba-glow ${j[_]}`:"",z[A][D],G??""),style:{...i(H,R,_),...J},...M,children:[n("div",{className:["flex shrink-0 items-center py-1",y[C],c[C],U?"ps-0":V,d(E)?"pe-1":U?"pe-0":""].join(" "),children:[U?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[C],V,a].join(" "),onClick:L,children:W}):W,d(E)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:E}):null]}),d(S)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:q?Q:0},inert:!q,children:e("div",{ref:O,className:`whitespace-normal ${V} pb-2 ${h[C]}`,children:S})}):null]})});
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { NebaAlign, NebaColor, NebaSide, NebaSize, NebaSlots } from '../../types.js';
|
|
3
|
+
/** The parts a Popconfirm draws behind its root. */
|
|
4
|
+
export type PopconfirmSlot = 'icon' | 'title' | 'description' | 'actions';
|
|
5
|
+
export interface PopconfirmProps {
|
|
6
|
+
/**
|
|
7
|
+
* The control the question hangs off and that raises it. Exactly one element,
|
|
8
|
+
* which must accept a ref and spread props — every Neba component does.
|
|
9
|
+
*/
|
|
10
|
+
trigger?: React.ReactElement;
|
|
11
|
+
/** The question. */
|
|
12
|
+
title?: React.ReactNode;
|
|
13
|
+
/** What answering costs — the consequence, not a restatement of the title. */
|
|
14
|
+
description?: React.ReactNode;
|
|
15
|
+
/** Called when the reader confirms. May return a promise; see `onConfirm`. */
|
|
16
|
+
onConfirm?: () => void | Promise<unknown>;
|
|
17
|
+
/** Called when the reader cancels. Dismissing does not call it. */
|
|
18
|
+
onCancel?: () => void;
|
|
19
|
+
/** Overrides the confirming button's label. Defaults to the locale's word. */
|
|
20
|
+
confirmLabel?: React.ReactNode;
|
|
21
|
+
/** Overrides the cancelling button's label. */
|
|
22
|
+
cancelLabel?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* The colour family. `danger` for anything that destroys something, which is
|
|
25
|
+
* most of what a Popconfirm is for.
|
|
26
|
+
* @default 'danger'
|
|
27
|
+
*/
|
|
28
|
+
color?: NebaColor;
|
|
29
|
+
size?: NebaSize;
|
|
30
|
+
/**
|
|
31
|
+
* Draws the family's own severity mark beside the question.
|
|
32
|
+
*
|
|
33
|
+
* On by default, and it is not decoration: a question that says "this is
|
|
34
|
+
* destructive" only in red says it only to some readers, so the shape has to
|
|
35
|
+
* carry the meaning too. Pass a node for one of your own, or `false` for none.
|
|
36
|
+
* @default true
|
|
37
|
+
*/
|
|
38
|
+
icon?: React.ReactNode | false;
|
|
39
|
+
side?: NebaSide;
|
|
40
|
+
align?: NebaAlign;
|
|
41
|
+
/** Whether the bubble is open. Use with `onOpenChange` to control it. */
|
|
42
|
+
open?: boolean;
|
|
43
|
+
defaultOpen?: boolean;
|
|
44
|
+
onOpenChange?: (open: boolean) => void;
|
|
45
|
+
/** BCP 47 tag deciding the two default labels. Defaults to the browser's. */
|
|
46
|
+
locale?: string;
|
|
47
|
+
/** How wide the bubble is. */
|
|
48
|
+
width?: number | string;
|
|
49
|
+
className?: string;
|
|
50
|
+
classNames?: NebaSlots<PopconfirmSlot>;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* A question asked where the answer will be acted on.
|
|
54
|
+
*
|
|
55
|
+
* The small sibling of [Confirm](./confirm), and the difference is not size. A
|
|
56
|
+
* Confirm takes the page away, which is right when the consequence reaches past
|
|
57
|
+
* what is on screen — deleting the workspace everything else belongs to. A
|
|
58
|
+
* Popconfirm stays anchored to the control that raised it, which is right when
|
|
59
|
+
* the consequence is that control's own row: the reader can still see what they
|
|
60
|
+
* are about to delete, and losing that context is most of what makes a modal
|
|
61
|
+
* feel heavy for a small act.
|
|
62
|
+
*
|
|
63
|
+
* So the rule is about *reach* rather than about danger: one row, a Popconfirm;
|
|
64
|
+
* the page, a Confirm.
|
|
65
|
+
*
|
|
66
|
+
* It closes itself once `onConfirm` settles, so an async handler keeps the
|
|
67
|
+
* bubble up — and its confirming button busy — until the work is actually done.
|
|
68
|
+
* A question that vanished before its answer landed is a question the reader
|
|
69
|
+
* has no way to know was heard.
|
|
70
|
+
*/
|
|
71
|
+
export declare function Popconfirm(rawProps: PopconfirmProps): React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as i from"react";import{Button as o}from"../button/Button.js";import{Popover as t,PopoverClose as l}from"../popover/Popover.js";import{severityIcon as r}from"../../internal/icons.js";import{confirmMessages as a,useMessages as s}from"../../internal/i18n.js";import{cx as c,gapClasses as m}from"../../internal/styles.js";import{useStyleDefaults as d}from"../../internal/defaults.js";export function Popconfirm(p){const{trigger:f,title:u,description:h,onConfirm:x,onCancel:g,confirmLabel:j,cancelLabel:N,color:v="danger",size:C="sm",icon:y=!0,side:b="top",align:w="center",open:z,defaultOpen:k,onOpenChange:O,locale:L,width:P=280,className:S,classNames:B}=d(p,["size","locale"]),q=s(a,L),[A,D]=i.useState(k??!1),E=z??A,[F,G]=i.useState(!1),H=e=>{void 0===z&&D(e),O?.(e)},I=!0===y?r(v):y;return e(t,{trigger:f,open:E,onOpenChange:H,side:b,align:w,size:C,color:v,width:P,showClose:!1,className:S,children:n("div",{className:c("flex",m[C]),children:[I?e("span",{"aria-hidden":"true",className:c("mt-px shrink-0 text-(--n-accent)",B?.icon),children:I}):null,n("div",{className:c("flex min-w-0 flex-1 flex-col",m[C]),children:[u?e("p",{className:c("font-medium text-(--neba-fg)",B?.title),children:u}):null,h?e("p",{className:c("text-(--neba-muted-fg)",B?.description),children:h}):null,n("div",{className:c("flex justify-end gap-1.5 pt-0.5",B?.actions),children:[e(l,{render:e(o,{size:C,variant:"text",color:"secondary",onClick:()=>g?.(),children:N??q.cancel})}),e(o,{size:C,color:v,loading:F,onClick:async()=>{try{G(!0),await(x?.()),H(!1)}finally{G(!1)}},children:j??q.confirm})]})]})]})})}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Popconfirm}from"./Popconfirm.js";
|
|
@@ -112,4 +112,4 @@ export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import("
|
|
|
112
112
|
* the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
|
|
113
113
|
* surface, the width ladder and the header.
|
|
114
114
|
*/
|
|
115
|
-
export declare function Popover(
|
|
115
|
+
export declare function Popover(rawProps: PopoverProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as n,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as l}from"../../internal/icons.js";import{cx as r,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as x,surfaceSlots as b}from"../../internal/styles.js";const
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as t}from"@base-ui/react/popover";import{boxPaddingXClasses as o,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as n,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as l}from"../../internal/icons.js";import{cx as r,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as x,surfaceSlots as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},w=[x,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=t.Close;export function Popover(x){const{size:j="md",color:N="primary",density:_="default",trigger:k,title:O,description:z,children:C,side:P="bottom",align:$="center",sideOffset:B=6,alignOffset:L=0,arrow:M=!1,open:T,defaultOpen:W,onOpenChange:A,modal:D=!1,dismissible:E=!0,showClose:R=!1,locale:q,closeLabel:F,width:G,className:H,style:I,...J}=g(x,["size","density","locale"]),K=i(n,q),Q=o[_][j],S=s[_][j],U=y[j],V=d(O)||d(z);return a(t.Root,{open:T,defaultOpen:W,modal:D,onOpenChange:(e,a)=>{E||e||"escape-key"!==a.reason&&"outside-press"!==a.reason&&"focus-out"!==a.reason?A?.(e):a.cancel()},children:[k?e(t.Trigger,{render:k}):null,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",side:P,align:$,sideOffset:B,alignOffset:L,children:a(t.Popup,{className:r(w,m[j],p[j],u[j],Q,S,void 0===G?v[j]:"",H??""),style:{...b(N,3),...void 0===G?null:{maxWidth:"number"==typeof G?`${G}px`:G},...I},...J,children:[M?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:U,height:U/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,V||R?a("div",{className:"flex shrink-0 items-start gap-3",children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[j]}`,children:[d(O)?e(t.Title,{className:`m-0 font-semibold ${h[j]}`,children:O}):null,d(z)?e(t.Description,{className:`m-0 text-(--neba-muted-fg) ${c[j]}`,children:z}):null]}),R?e(t.Close,{"aria-label":F??K.close,className:["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(" "),children:e(l,{})}):null]}):null,d(C)?e("div",{className:"min-w-0",children:C}):null]})})})]})}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
/**
|
|
5
|
+
* Where the children go. Defaults to `document.body`.
|
|
6
|
+
*
|
|
7
|
+
* A function is called after mount, which is how a portal targets something
|
|
8
|
+
* that is itself rendered by React — `() => document.getElementById('drawer')`
|
|
9
|
+
* finds an element that did not exist when this component's props were built.
|
|
10
|
+
*/
|
|
11
|
+
container?: Element | DocumentFragment | null | (() => Element | DocumentFragment | null);
|
|
12
|
+
/**
|
|
13
|
+
* Render in place instead of portalling.
|
|
14
|
+
*
|
|
15
|
+
* **Decide this once, at mount.** A portalled subtree and an inline one are
|
|
16
|
+
* different children as far as React is concerned, so flipping this remounts
|
|
17
|
+
* everything inside and throws away what was in it — a half-filled form, a
|
|
18
|
+
* scroll position, a video that was playing. That is React's reconciliation
|
|
19
|
+
* rather than a shortcoming here, and no portal implementation escapes it.
|
|
20
|
+
*
|
|
21
|
+
* It is a prop rather than an absence so a caller can decide from something
|
|
22
|
+
* they only know at runtime: a subtree that is already inside a portal, a
|
|
23
|
+
* test that wants the markup where it was written, an embed with no
|
|
24
|
+
* `document.body` worth reaching.
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Children, rendered somewhere else in the DOM.
|
|
31
|
+
*
|
|
32
|
+
* `createPortal` with the two things a library has to add. The first is the
|
|
33
|
+
* class: the wrapper carries `neba-portal`, which is the hook this library's
|
|
34
|
+
* own popups already use and which a scoped stylesheet hangs its reset off — a
|
|
35
|
+
* portalled subtree leaves whatever element the page had scoped its styling to,
|
|
36
|
+
* and the class is how it is found again. That is the reason to reach for this
|
|
37
|
+
* over `createPortal` directly.
|
|
38
|
+
*
|
|
39
|
+
* The second is the server. There is no `document` there, so a portal renders
|
|
40
|
+
* nothing at all until it has mounted, and the markup that ships never contains
|
|
41
|
+
* the portalled subtree. That is not a limitation to work around — it is what a
|
|
42
|
+
* portal *is* — so anything that must be in the server's HTML does not belong
|
|
43
|
+
* in one.
|
|
44
|
+
*
|
|
45
|
+
* The wrapper is a real element rather than a fragment on purpose: it is what
|
|
46
|
+
* carries the class, and it is what a caller styles to place the subtree.
|
|
47
|
+
*/
|
|
48
|
+
export declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as t}from"react/jsx-runtime";import*as e from"react";import{createPortal as r}from"react-dom";import{cx as o}from"../../internal/styles.js";export const Portal=/*@__PURE__*/e.forwardRef(function({children:n,container:s,disabled:a=!1,className:c,...i},l){const[f,m]=e.useState(null);e.useEffect(()=>{if(a)return;const t="function"==typeof s?s():s;m(t??document.body)},[s,a]);const u=t("div",{ref:l,className:o("neba-portal",c),...i,children:n});return a?u:f?r(u,f):null});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Portal}from"./Portal.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{plateGapClasses as t,plateRadiusClasses as r,plateSizeClasses as n,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{plateGapClasses as t,plateRadiusClasses as r,plateSizeClasses as n,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as f}from"../../internal/progress.js";import{cx as u,metaTextClasses as c,stackGapClasses as d}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";export const ProgressBox=/*@__PURE__*/l.forwardRef(function(l,x){const{size:b="md",color:p="primary",count:g=4,value:v=null,min:y=0,max:j=100,label:w,showValue:N=!1,format:M,className:V,style:k,...z}=h(l,["size"]),A=o(v,y,j),R=null===A,T=void 0!==M,$=Math.max(1,Math.floor(g));return a(s.Root,{ref:x,value:v??null,min:y,max:j,format:M,getAriaValueText:i(A,T),className:u("inline-flex flex-col",d[b],V??""),style:{...m(p),...k},...z,children:[w||N?a("div",{className:["flex items-baseline gap-2",w?"justify-between":"justify-end",c[b]].join(" "),children:[w?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:w}):null,N?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>f(A,e,T)}):null]}):null,e(s.Track,{className:`flex ${t[b]}`,children:Array.from({length:$},(a,l)=>e("span",{className:u("relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",n[b],r[b],R?"neba-plate-wave":""),style:R?{"--n-i":l}:void 0,children:R?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--n-fill) [transition:width_var(--neba-duration-fill)_var(--neba-ease)]",style:{width:`${Math.min(100,Math.max(0,100*(A*$-l)))}%`}})},l))})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as n,progressSlots as i,progressText as l,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as n,progressSlots as i,progressText as l,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as f,metaTextClasses as u}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";export const ProgressCircular=/*@__PURE__*/a.forwardRef(function(a,d){const{size:x="md",color:p="primary",value:k=null,min:b=0,max:g=100,label:v,showValue:y=!1,format:$,className:j,style:N,...w}=h(a,["size"]),V=n(k,b,g),z=null===V,D=void 0!==$,L=o[x],P=c[x],R=L/2,W=R-P/2,_=2*Math.PI*W,A=z?`${.28*_} ${_}`:`${_}`,B=z?0:_*(1-V);return r(s.Root,{ref:d,value:k??null,min:b,max:g,format:$,getAriaValueText:t(V,D),className:m("inline-flex items-center",f[x],u[x],j??""),style:{...i(p),...N},...w,children:[r("svg",{className:z?"neba-ring-spin shrink-0":"shrink-0",width:L,height:L,viewBox:`0 0 ${L} ${L}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:R,cy:R,r:W,stroke:"var(--n-soft)",strokeWidth:P}),e("circle",{cx:R,cy:R,r:W,stroke:"var(--n-accent)",strokeWidth:P,strokeLinecap:"round",strokeDasharray:A,strokeDashoffset:B,transform:`rotate(-90 ${R} ${R})`,className:"[transition:stroke-dashoffset_var(--neba-duration-fill)_var(--neba-ease)]"})]}),v?e(s.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:v}):null,y?e(s.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>l(V,e,D)}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as s,progressAriaText as n,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as f}from"../../internal/styles.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function({size:
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as s,progressAriaText as n,progressFraction as t,progressSlots as i,progressText as o}from"../../internal/progress.js";import{cx as m,metaTextClasses as u,stackGapClasses as f}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function(a,d){const{size:b="md",color:p="primary",value:x=null,min:j=0,max:g=100,label:h,showValue:w=!1,format:v,className:N,style:y,...V}=c(a,["size"]),k=t(x,j,g),z=null===k,L=void 0!==v;return l(r.Root,{ref:d,value:x??null,min:j,max:g,format:v,getAriaValueText:n(k,L),className:m("flex w-full flex-col",f[b],N??""),style:{...i(p),...y},...V,children:[h||w?l("div",{className:["flex items-baseline gap-2",h?"justify-between":"justify-end",u[b]].join(" "),children:[h?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:h}):null,w?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(k,e,L)}):null]}):null,e(r.Track,{className:`relative w-full overflow-hidden rounded-full bg-(--n-soft) ${s[b]}`,children:e(r.Indicator,{className:["absolute rounded-full bg-(--n-fill)",z?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type NebaDefaults } from '../../internal/defaults.js';
|
|
3
|
+
/** What a reader asked for. `system` is a deferral, not a third appearance. */
|
|
4
|
+
export type NebaColorScheme = 'light' | 'dark' | 'system';
|
|
5
|
+
/** Which way the document runs. */
|
|
6
|
+
export type NebaDirection = 'ltr' | 'rtl';
|
|
7
|
+
/** What `useColorScheme` hands back. */
|
|
8
|
+
export interface ColorSchemeState {
|
|
9
|
+
/** What was asked for, `system` included. */
|
|
10
|
+
colorScheme: NebaColorScheme;
|
|
11
|
+
/** What that comes out as right now — never `system`. */
|
|
12
|
+
resolvedColorScheme: 'light' | 'dark';
|
|
13
|
+
setColorScheme: (scheme: NebaColorScheme) => void;
|
|
14
|
+
/** Light ↔ dark. From `system`, it goes to the opposite of what is showing. */
|
|
15
|
+
toggleColorScheme: () => void;
|
|
16
|
+
}
|
|
17
|
+
export interface NebaProviderProps {
|
|
18
|
+
children?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Prop values every component under it starts from.
|
|
21
|
+
*
|
|
22
|
+
* `size`, `density`, `variant` and `locale` — the axes whose right value is a
|
|
23
|
+
* property of the product rather than of the control. A call site still wins:
|
|
24
|
+
* the order is the caller, then this, then the component's own default.
|
|
25
|
+
*/
|
|
26
|
+
defaults?: NebaDefaults;
|
|
27
|
+
/** The colour scheme. Use with `onColorSchemeChange` to control it. */
|
|
28
|
+
colorScheme?: NebaColorScheme;
|
|
29
|
+
/** @default 'system' */
|
|
30
|
+
defaultColorScheme?: NebaColorScheme;
|
|
31
|
+
onColorSchemeChange?: (scheme: NebaColorScheme) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Where the choice is remembered, or `false` to forget it between visits.
|
|
34
|
+
* @default 'neba-color-scheme'
|
|
35
|
+
*/
|
|
36
|
+
storageKey?: string | false;
|
|
37
|
+
/**
|
|
38
|
+
* Which element the scheme is written on. The `<html>` element by default,
|
|
39
|
+
* which is what the stylesheet and the browser's own form controls read.
|
|
40
|
+
*
|
|
41
|
+
* A function, called after mount, so it can name an element React itself
|
|
42
|
+
* renders. Returning `null` writes nowhere at all — which is what a preview
|
|
43
|
+
* embedded in someone else's page needs, and why this is not just an element.
|
|
44
|
+
*/
|
|
45
|
+
colorSchemeElement?: () => Element | null;
|
|
46
|
+
/**
|
|
47
|
+
* The writing direction. Left alone when it is not given, so a document that
|
|
48
|
+
* already sets `dir` on `<html>` is not fought over.
|
|
49
|
+
*/
|
|
50
|
+
direction?: NebaDirection;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* The script to run before the first paint, so a remembered dark page does not
|
|
54
|
+
* flash white on the way in.
|
|
55
|
+
*
|
|
56
|
+
* The one thing a provider cannot do for you: React runs after the document has
|
|
57
|
+
* been painted once, and by then the flash has happened. Inline the string this
|
|
58
|
+
* returns in `<head>`, above everything:
|
|
59
|
+
*
|
|
60
|
+
* ```tsx
|
|
61
|
+
* <script dangerouslySetInnerHTML={{ __html: colorSchemeScript() }} />
|
|
62
|
+
* ```
|
|
63
|
+
*
|
|
64
|
+
* It reads the same key and writes the same attribute the provider does, so the
|
|
65
|
+
* two cannot disagree — which is the reason it is here rather than in a
|
|
66
|
+
* documentation snippet somebody copies once and never updates.
|
|
67
|
+
*/
|
|
68
|
+
export declare function colorSchemeScript(options?: {
|
|
69
|
+
storageKey?: string;
|
|
70
|
+
defaultColorScheme?: NebaColorScheme;
|
|
71
|
+
}): string;
|
|
72
|
+
/**
|
|
73
|
+
* One place to set what every Neba component under it starts from.
|
|
74
|
+
*
|
|
75
|
+
* Three jobs, and they are together because all three are properties of the
|
|
76
|
+
* *application* rather than of any control in it: the prop values a product has
|
|
77
|
+
* decided on, the colour scheme a reader has chosen, and the direction the
|
|
78
|
+
* document runs in. Writing `size="sm"` at four hundred call sites is the
|
|
79
|
+
* problem this exists to end.
|
|
80
|
+
*
|
|
81
|
+
* It renders no element of its own. The colour scheme is an attribute on
|
|
82
|
+
* `<html>` — which is where the stylesheet already looks, and where the
|
|
83
|
+
* browser's own form controls and scrollbars look — and the direction is `dir`
|
|
84
|
+
* on the same element plus Base UI's own provider, so its primitives flip their
|
|
85
|
+
* keyboard and their positioning with the page.
|
|
86
|
+
*
|
|
87
|
+
* It is entirely optional. Every component works without it, and a page that
|
|
88
|
+
* has none pays a `useContext` that returns `null` and nothing else.
|
|
89
|
+
*/
|
|
90
|
+
export declare function NebaProvider({ children, defaults, colorScheme: colorSchemeProp, defaultColorScheme, onColorSchemeChange, storageKey, colorSchemeElement, direction }: NebaProviderProps): React.JSX.Element;
|
|
91
|
+
/**
|
|
92
|
+
* The colour scheme, and the two ways to change it.
|
|
93
|
+
*
|
|
94
|
+
* `colorScheme` is what was asked for and `resolvedColorScheme` is what that
|
|
95
|
+
* comes out as — the difference matters for the control that shows it, because
|
|
96
|
+
* a three-way switch has to show `system` as its own position rather than as
|
|
97
|
+
* whichever of the two it currently resolves to.
|
|
98
|
+
*/
|
|
99
|
+
export declare function useColorScheme(): ColorSchemeState;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{DirectionProvider as r}from"@base-ui/react/direction-provider";import{DefaultsContext as o}from"../../internal/defaults.js";import{useMediaQuery as c}from"../../internal/media.js";const n=/*@__PURE__*/t.createContext(null);export function colorSchemeScript(e={}){const t=e.storageKey??"neba-color-scheme",r=e.defaultColorScheme??"system";return`(function(){try{var s=localStorage.getItem(${JSON.stringify(t)})||${JSON.stringify(r)};if(s==='system'){s=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}document.documentElement.setAttribute('data-theme',s)}catch(e){}})()`}export function NebaProvider({children:l,defaults:s,colorScheme:a,defaultColorScheme:i="system",onColorSchemeChange:m,storageKey:u="neba-color-scheme",colorSchemeElement:d,direction:h}){const[f,S]=t.useState(()=>function(e){if(!1===e||"undefined"==typeof localStorage)return null;try{const t=localStorage.getItem(e);return"light"===t||"dark"===t||"system"===t?t:null}catch{return null}}(u)??i),g=a??f,y=c("(prefers-color-scheme: dark)"),p="system"===g?y?"dark":"light":g,C=t.useCallback(e=>{if(void 0===a&&S(e),!1!==u)try{localStorage.setItem(u,e)}catch{}m?.(e)},[a,u,m]);t.useEffect(()=>{const e=d?d():document.documentElement;e&&(e.setAttribute("data-theme",p),e.style.colorScheme=p)},[p,d]),t.useEffect(()=>{h&&document.documentElement.setAttribute("dir",h)},[h]);const b=t.useMemo(()=>({colorScheme:g,resolvedColorScheme:p,setColorScheme:C,toggleColorScheme:()=>C("dark"===p?"light":"dark")}),[g,p,C]);return e(o.Provider,{value:s??null,children:e(n.Provider,{value:b,children:e(r,{direction:h??"ltr",children:l})})})}export function useColorScheme(){const e=t.useContext(n);if(!e)throw new Error("neba: useColorScheme() needs a <NebaProvider> above it.");return e}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{colorSchemeScript,NebaProvider,useColorScheme}from"./NebaProvider.js";
|