neba 1.10.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.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 +14 -2
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +1 -1
- 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 +1 -1
- 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 +12 -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/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.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.js +1 -1
- package/dist/components/table/Table.d.ts +1 -1
- package/dist/components/table/Table.js +1 -1
- package/dist/components/text-field/TextField.d.ts +12 -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 +1 -1
- 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 +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 +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 +34 -0
- package/package.json +6 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{chatMessages as l,useMessages as r}from"../../internal/i18n.js";import{CheckIcon as i,ClockIcon as t,DangerIcon as s,LinkIcon as o}from"../../internal/icons.js";import{safeRel as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{chatMessages as l,useMessages as r}from"../../internal/i18n.js";import{CheckIcon as i,ClockIcon as t,DangerIcon as s,LinkIcon as o}from"../../internal/icons.js";import{safeRel as d}from"../../internal/link.js";import{controlSlots as c,cx as m,hasContent as p,metaTextClasses as u,radiusClasses as b,sheetBodyClasses as f,sheetHeaderGapClasses as v,srOnlyClasses as x,surfaceClasses as h,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const w={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},k={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},N={solid:[h,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[h,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-(--n-soft) [box-shadow:var(--n-elev)]"};function j(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const _={sending:e(t,{}),sent:e(i,{}),delivered:e(j,{}),read:e(j,{}),failed:e(s,{})},z={sending:"text-(--neba-muted-fg)",sent:"text-(--neba-muted-fg)",delivered:"text-(--neba-muted-fg)",read:"text-(--n-accent)",failed:"text-(--neba-danger-accent)"},C=["block overflow-hidden rounded-(--neba-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),L=["shrink-0 opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const ChatBubble=/*@__PURE__*/a.forwardRef(function(a,i){const{side:t="start",name:s,time:o,avatar:d,status:h,statusLabel:j,typing:C=!1,media:M,preview:R,actions:T,locale:$,variant:q="outline",size:A="md",color:D="primary",density:E="default",elevation:F=0,className:G,style:H,children:I,...J}=y(a,["size","density","variant","locale"]),K=r(l,$),O="end"===t,P=p(s)||p(o),Q=C||p(I)||Boolean(R),S=["flex min-w-0 flex-col overflow-hidden",b[A],k[t],N[q],g].join(" "),U=h?j??K[h]:"";return n("div",{ref:i,className:m("group/bubble flex w-full items-start gap-2",O?"flex-row-reverse":"",G??""),style:{...c(D,F,q),...H},...J,children:[p(d)?e("div",{className:"shrink-0",children:d}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col",v[A],O?"items-end":"items-start"].join(" "),children:[P?n("div",{className:`flex items-baseline gap-2 ${u[A]}`,children:[p(s)?e("span",{className:"font-semibold",children:s}):null,p(o)?e("span",{className:"text-(--neba-muted-fg)",children:o}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(O?"flex-row-reverse":""),children:[n("div",{className:S,children:[p(M)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:M}):null,Q?n("div",{className:[w[E][A],"flex min-w-0 flex-col gap-2",f[A]].join(" "),children:[C?e(B,{label:K.typing}):p(I)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:I}):null,R?e(W,{preview:R}):null]}):null]}),p(T)?e("div",{className:L,children:T}):null]}),h?n("div",{className:["flex items-center gap-1",u[A],z[h],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[_[h],e("span",{className:x,children:U})]}):null]})]})});function B({label:a}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"neba-typing-dot size-[0.45em] rounded-full",style:{"--n-i":n}},n)),e("span",{className:x,children:a})]})}function W({preview:a}){const{url:l,title:r,description:i,image:t,site:s,newTab:c=!1}=a,m=c?"_blank":void 0;return n("a",{href:l,target:m,rel:d(m,void 0),className:C,children:[t?e("img",{src:t,alt:"",loading:"lazy",decoding:"async",className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[p(s)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(o,{}),e("span",{className:"truncate",children:s})]}):null,p(r)?e("span",{className:"font-semibold",children:r}):null,p(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{Checkbox as a}from"@base-ui/react/checkbox";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as t,cx as l,hitAreaClasses as o,metaTextClasses as s,surfaceClasses as c,tickRadiusClasses as d,tickRowLeadingClasses as b,tickSizeClasses as h,transitionClasses as f}from"../../internal/styles.js";const
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{Checkbox as a}from"@base-ui/react/checkbox";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as t,cx as l,hitAreaClasses as o,metaTextClasses as s,surfaceClasses as c,tickRadiusClasses as d,tickRowLeadingClasses as b,tickSizeClasses as h,transitionClasses as f}from"../../internal/styles.js";import{useStyleDefaults as m}from"../../internal/defaults.js";const u=["relative inline-flex shrink-0 items-center justify-center border",o,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),p=[c,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)","data-[indeterminate]:bg-(--n-fill) data-[indeterminate]:text-(--n-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),v=[c,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),g=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)]","text-(--neba-disabled-fg) shadow-none","data-[checked]:bg-(--neba-disabled-bg)","data-[indeterminate]:bg-(--neba-disabled-bg)"].join(" ");function x(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function k(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const Checkbox=/*@__PURE__*/r.forwardRef(function(r,o){const{size:c="md",color:f="primary",label:N,description:j,error:$,invalid:y,disabled:w=!1,readOnly:z=!1,className:C,classNames:L,style:R,...B}=m(r,["size"]),M=null!=$&&!1!==$&&""!==$,O=y??M,W=O?"danger":f,_={"--n-fill":`var(--neba-${W}-fill)`,"--n-fill-hover":`var(--neba-${W}-fill-hover)`,"--n-on-solid":`var(--neba-${W}-on-solid)`,"--n-accent":`var(--neba-${W}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${W}-line)`,"--n-line-hover":`var(--neba-${W}-line-hover)`,"--n-ring":`var(--neba-${W}-ring)`},D=[u,h[c],d[c],w?g:z?v:p].join(" ");return n(i.Root,{disabled:w,invalid:O,className:l("inline-flex flex-col gap-1 align-top",C??""),style:{..._,...R},children:[n("div",{className:`flex items-start gap-2 ${t[c]} ${b}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(a.Root,{ref:o,className:l(D,L?.control),disabled:w,readOnly:z,...B,children:e(a.Indicator,{className:l("flex size-[70%] items-center justify-center",L?.indicator),children:B.indeterminate?e(k,{}):e(x,{})})})}),N||j?n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[N?e(i.Label,{className:l("leading-[1.4]",w?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",L?.label),children:N}):null,j?e(i.Description,{className:l(s[c],"text-(--neba-muted-fg)",L?.description),children:j}):null]}):null]}),e(i.Error,M?{match:!0,className:l(s[c],"text-(--n-accent)",L?.error),children:$}:{className:l(s[c],"text-(--n-accent)",L?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{actionMessages as o,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as r}from"../../internal/icons.js";import{transitionProps as s}from"../../internal/animate.js";import{chipRemoveClasses as a,controlHeightClasses as c,controlSlots as d,controlTextClasses as m,disabledClasses as p,focusRingClasses as b,gapClasses as f,iconClasses as u,paddingXClasses as
|
|
1
|
+
"use client";import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{actionMessages as o,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as r}from"../../internal/icons.js";import{transitionProps as s}from"../../internal/animate.js";import{chipRemoveClasses as a,controlHeightClasses as c,controlSlots as d,controlTextClasses as m,disabledClasses as p,focusRingClasses as b,gapClasses as f,iconClasses as u,paddingXClasses as v,pressTransitionClasses as h,radiusClasses as x,surfaceClasses as g,transitionClasses as j}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const w={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},N={solid:[g,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[g,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},k={solid:"bg-(--n-fill-active)",outline:"bg-(--n-panel-press) [border-color:var(--n-line-hover)]",text:"bg-(--n-soft-press)"},C={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)"},$=["relative inline-flex max-w-full shrink-0 select-none items-center","align-middle font-medium leading-none whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,h,u].join(" "),z=["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",b].join(" ");export const Chip=/*@__PURE__*/l.forwardRef(function(l,b){const{variant:u="outline",size:h="md",color:g="primary",density:j="default",elevation:B=0,startIcon:I,endIcon:D,count:F,onDelete:L,locale:R,deleteLabel:q,transition:A,selected:E=!1,disabled:G=!1,className:H,style:J,children:K,onClick:M,...O}=y(l,["size","density","variant","locale"]),P=i(o,R),Q=Boolean(M)&&!G,S=w[h],T=s(A),U=v[j][S],V=[$,c[S],m[S],f[S],x[S],G?p[u]:N[u],!G&&E?k[u]:"",Q?C[u]:"",Q?"ps-0":U,L?"pe-1":Q?"pe-0":"",T.className,H??""].filter(Boolean).join(" "),W=t(n,{children:[I,null!=K&&!1!==K?e("span",{className:"min-w-0 truncate",children:K}):null,D,null!=F&&!1!==F?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===u?"bg-(--neba-glow-on-fill) text-(--n-on-solid)":"bg-(--n-soft-press) text-(--n-accent)"].join(" "),children:F}):null]});return t("span",{ref:b,className:V,style:{...d(g,B,u),...T.style,...J},"aria-disabled":!(!G||Q)||void 0,...O,children:[Q?e("button",{type:"button","aria-pressed":E,className:`${z} ${f[S]} ${U}`,onClick:M,children:W}):W,L?e("button",{type:"button","aria-label":q??P.remove,disabled:G,className:a,onClick:L,children:e(r,{})}):null]})});
|
|
@@ -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 a,useMessages as i}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 x,srOnlyClasses as f,surfaceSlots as g,toLength as h,transitionClasses as y}from"../../internal/styles.js";export{registerLanguage}from"../../internal/highlight.js";const
|
|
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 a,useMessages as i}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 x,srOnlyClasses as f,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:_="md",color:C="primary",density:F="default",elevation:R=0,highlight:z=!0,toolbar:A=!0,title:H,showLanguage:K=!0,copyable:E=!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=i(a,V),le=n.useMemo(()=>L.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[L]),re=s(M),[ae,ie]=n.useState(!1),[se,ce]=n.useState(null),[de,pe]=n.useState(null),me=z&&!ae&&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]),xe=`${String(I+Math.max(ue.length-1,0)).length}ch`,fe=n.useRef(void 0);n.useEffect(()=>()=>clearTimeout(fe.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)",x.xs,u[_],"[&_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(H)?void 0:re??oe.code,ke=e("div",{role:"region","aria-label":"string"==typeof H?H: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[F][_],"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[F][_]),"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",x[_],"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(C,R),"--n-code-gutter":xe,...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:[A&&(K||E||$||m(H))?t("div",{className:p("flex min-w-0 items-center gap-1 border-b [border-color:var(--n-code-rule)]",k[F][_]),children:[m(H)?e("span",{className:p("min-w-0 truncate font-mono",u[_]),children:H}):null,K&&re?e("span",{className:p("min-w-0 truncate font-mono tracking-wide text-(--n-code-dim) uppercase select-none",u[_]),children:re}):null,e("span",{className:"flex-1"}),$&&z?e("button",{type:"button","aria-pressed":ae,"aria-label":be,title:be,onClick:()=>ie(e=>!e),className:p(we,ae?"text-(--n-code-fg) bg-(--n-code-hover)":""),children:e(l,{})}):null,E?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{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),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}}(le);clearTimeout(fe.current),ce(e),fe.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[_]),children:ke}),e("span",{"aria-live":"polite",className:f,children:null===se?"":se?ve:oe.copyFailed})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Collapsible as t}from"@base-ui/react/collapsible";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{ChevronIcon as r}from"../../internal/icons.js";import{gapClasses as s,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Collapsible as t}from"@base-ui/react/collapsible";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{ChevronIcon as r}from"../../internal/icons.js";import{gapClasses as s,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as f,sheetBodyClasses as m,sheetHeaderGapClasses as p,sheetTitleClasses as b,surfaceClasses as u,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const v={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};export const Collapsible=/*@__PURE__*/a.forwardRef(function(a,u){const{variant:j="outline",size:N="md",color:w="primary",density:y="default",elevation:_=0,open:k,defaultOpen:C=!1,onOpenChange:O,title:$,subtitle:B,startIcon:z,action:F,trigger:M,indicator:R=!0,disabled:T=!1,padded:U=!0,hiddenUntilFound:I=!1,keepMounted:P=!1,className:q,style:A,children:D,...E}=g(a,["size","density","variant"]),G=l[y][N],H=i[y][N];return n(t.Root,{ref:u,open:k,defaultOpen:C,onOpenChange:e=>O?.(e),disabled:T,className:["flex flex-col overflow-hidden",f[N],v[j],x,q??""].filter(Boolean).join(" "),style:{...h(w,_),...A},...E,children:[M?e(t.Trigger,{render:M}):n("div",{className:"flex w-full items-center",children:[n(t.Trigger,{className:["flex min-w-0 flex-1 cursor-pointer items-center text-start",G,H,s[N],x,d,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","hover:bg-(--n-soft)","data-[panel-open]:text-(--n-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" "),children:[o(z)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:z}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${p[N]}`,children:[o($)?e("span",{className:`truncate font-semibold ${b[N]}`,children:$}):null,o(B)?e("span",{className:`truncate text-(--neba-muted-fg) ${c[N]}`,children:B}):null]}),R?e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(r,{})}):null]}),o(F)?e("span",{className:`flex shrink-0 items-center ${G}`,children:F}):null]}),e(t.Panel,{hiddenUntilFound:I,keepMounted:P,className:["h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["min-w-0 text-(--neba-muted-fg)",m[N],U?G:"",U?M?H:"compact"===y?"pb-2":"pb-4":""].filter(Boolean).join(" "),children:D})})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{defaultPickerLabels as l}from"../../internal/calendar.js";import{PickerShell as n}from"../../internal/picker.js";import{CheckIcon as t}from"../../internal/icons.js";import{colorMessages as o,useMessages as s}from"../../internal/i18n.js";import{checkerBackground as i,clamp as d,cssColor as h,defaultSwatches as c,formatColor as u,parseColor as f,readableInk as p}from"../../internal/color.js";import{controlTextClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{defaultPickerLabels as l}from"../../internal/calendar.js";import{PickerShell as n}from"../../internal/picker.js";import{CheckIcon as t}from"../../internal/icons.js";import{colorMessages as o,useMessages as s}from"../../internal/i18n.js";import{checkerBackground as i,clamp as d,cssColor as h,defaultSwatches as c,formatColor as u,parseColor as f,readableInk as p}from"../../internal/color.js";import{controlTextClasses as m,cx as b,focusRingClasses as g,metaTextClasses as v,radiusClasses as x,stackGapClasses as y,surfaceSlots as w}from"../../internal/styles.js";import{useStyleDefaults as N}from"../../internal/defaults.js";const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},C={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},_={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},j={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},z={xs:10,sm:12,md:14,lg:16,xl:18},I=["relative overflow-hidden border","[border-color:var(--neba-border)]","[box-shadow:var(--neba-plate-glass)]"].join(" "),T=["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 A(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:d((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:d((e.clientY-a.top)/a.height,0,1)}}function D(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 M({hsv:r,alphaValue:l,onChange:n,text:o,onTextChange:s,withAlpha:c,swatches:m,editable:y,size:w,inert:N,labels:M}){const O=z[w],P=-O/2,V=h({h:r.h,s:100,v:100}),$=h(r),L=e=>({onPointerDown:a=>{N||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!N&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),S=(e,a,r,l)=>({role:"slider",tabIndex:N?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":N||void 0,onKeyDown:e=>{const a=D(e);!N&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:b("flex flex-col",k[w],j[w]),children:[e("div",{...L(e=>{const{x:a,y:t}=A(e);n({hsv:{h:r.h,s:100*a,v:100*(1-t)},alpha:l})}),role:"slider",tabIndex:N?-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":N||void 0,onKeyDown:e=>{const a=D(e);!N&&a&&(e.preventDefault(),n({hsv:{h:r.h,s:d(r.s+a.x,0,100),v:d(r.v+a.y,0,100)},alpha:l}))},className:b(I,C[w],x[w],g,N?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:V,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:T,style:{width:O,height:O,left:`${r.s}%`,top:100-r.v+"%",marginLeft:P,marginTop:P,backgroundColor:$}})}),e("div",{...L(e=>n({hsv:{...r,h:360*A(e).x},alpha:l})),...S(M.hue,r.h,360,e=>n({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:b(I,_[w],"rounded-full",g,N?"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:T,style:{width:O,height:O,left:r.h/360*100+"%",top:"50%",marginLeft:P,marginTop:P,backgroundColor:V}})}),c?a("div",{...L(e=>n({hsv:r,alpha:A(e).x})),...S(M.alpha,100*l,100,e=>n({hsv:r,alpha:d(l+e/100,0,1)})),className:b(I,_[w],"rounded-full",g,N?"cursor-default":"cursor-pointer touch-none"),style:i,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${h(r,0)}, ${$})`}}),e("span",{className:T,style:{width:O,height:O,left:100*l+"%",top:"50%",marginLeft:P,marginTop:P,backgroundColor:h(r,l)}})]}):null,y?a("div",{className:b("flex items-center",j[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,...i},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:h(r,l)}})}),e("input",{type:"text",value:o,readOnly:N,spellCheck:!1,autoComplete:"off","aria-label":M.value,onChange:e=>s(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)]",x.xs,v[w],"text-(--neba-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1")})]}):null,m&&m.length>0?e("div",{role:"group","aria-label":M.swatches,className:"grid grid-cols-8 gap-1",children:m.map(a=>{const o=f(a),s=null!==o&&u(o.hsv,o.alpha,"hex")===u(r,l,"hex");return e("button",{type:"button",disabled:N,"aria-label":a,"aria-pressed":s,onClick:()=>{o&&n(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)]",g,"[outline:none]",N?"cursor-default":"cursor-pointer hover:[box-shadow:var(--neba-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:s&&o?e("span",{style:{color:p(o.hsv)},children:e(t,{})}):null},a)})}):null]})}function O(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 P={h:217,s:87,v:82};export const ColorPicker=/*@__PURE__*/r.forwardRef(function(t,d){const{value:p,defaultValue:g="#1a58d1",onValueChange:x,format:k="hex",alpha:C=!1,swatches:_=c,inline:j=!1,editable:z=!0,label:I,description:T,error:A,invalid:D,required:V=!1,disabled:$=!1,readOnly:L=!1,fullWidth:S=!1,clearable:q=!1,name:K,open:R,defaultOpen:B=!1,onOpenChange:W,locale:E,labels:U,variant:X="outline",size:Y="md",color:F="primary",density:G="default",elevation:H=0,className:J,style:Q,...Z}=N(t,["size","density","variant","locale"]),ee=s(o,E),ae=r.useMemo(()=>({...ee,...U}),[ee,U]),[re,le]=r.useState(g),ne=p??re,[te,oe]=r.useState(B),se=R??te,[ie,de]=r.useState(()=>f(ne)??{hsv:P,alpha:1}),[he,ce]=r.useState(()=>ne||""),ue=u(ie.hsv,C?ie.alpha:1,k),fe=""===ne;r.useEffect(()=>{const e=f(ne);e?u(e.hsv,C?e.alpha:1,k)!==ue&&(ce(ne),de(e)):ce(ne)},[ne,ue,C,k]);const pe=(e,a)=>{de(e);const r=u(e.hsv,C?e.alpha:1,k);ce(a??r),void 0===p&&le(r),x?.(r)},me=$||L,be=e(M,{hsv:ie.hsv,alphaValue:ie.alpha,onChange:pe,text:he,onTextChange:e=>{ce(e);const a=f(e);a&&pe(a,e)},withAlpha:C,swatches:_,editable:z,size:Y,inert:me,labels:ae}),ge=K?e("input",{type:"hidden",name:K,value:fe?"":ue}):null;if(j){const r=D??Boolean(A)?"danger":F;return a("div",{ref:d,className:b("flex flex-col",y[Y],J),style:{...w(r,H),...Q},...Z,children:[I?e("span",{className:b(v[Y],"font-medium",$?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:I}):null,be,T?e("span",{className:b(v[Y],"text-(--neba-muted-fg)"),children:T}):null,A?e("span",{className:b(v[Y],"text-(--n-accent)"),children:A}):null,ge]})}return e("div",{ref:d,className:S?"w-full":"inline-block",...Z,children:e(n,{variant:X,size:Y,color:F,density:G,elevation:H,style:Q,label:I,description:T,error:A,invalid:D,required:V,disabled:$,readOnly:L,fullWidth:S,className:J,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:i,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:fe?"transparent":h(ie.hsv,C?ie.alpha:1)}})}),display:fe?ae.empty:ue,samples:O(k,C),empty:fe,clearable:q,onClear:()=>{void 0===p&&le(""),ce(""),x?.("")},open:se,onOpenChange:e=>{void 0===R&&oe(e),W?.(e)},labels:{...l,clear:ae.clear},hiddenValues:K?[{name:K,value:fe?"":ue}]:void 0,children:e("div",{className:m[Y],children:be})})})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
|
|
2
|
+
import type { NebaElevation, NebaFieldSlot, NebaShortcuts, NebaSlots, NebaStyleProps } from '../../types.js';
|
|
3
3
|
/**
|
|
4
4
|
* What a Combobox's value may be — the same two types a [Select](../select)
|
|
5
5
|
* submits, and for the same reason: a form control's value is what a form
|
|
@@ -135,6 +135,18 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
|
|
|
135
135
|
* `<input>` itself is `classNames.control`.
|
|
136
136
|
*/
|
|
137
137
|
classNames?: NebaSlots<ComboboxSlot>;
|
|
138
|
+
/**
|
|
139
|
+
* Key combinations to act on, spelled the way
|
|
140
|
+
* [Shortcut](../display/shortcut) draws them — `{ 'Mod+Enter': createAndGo }`.
|
|
141
|
+
*
|
|
142
|
+
* This is the only way in. A Combobox's keystrokes are the list's: the arrows
|
|
143
|
+
* move the highlight, `Escape` closes the popup and `Enter` commits, and the
|
|
144
|
+
* ones the list acts on never reach a plain `onKeyDown` on the root at all.
|
|
145
|
+
* Bound to the `<input>`, and it runs before the list does — but it does not
|
|
146
|
+
* *replace* what the list does, so a shortcut on `Enter` fires alongside the
|
|
147
|
+
* commit rather than instead of it.
|
|
148
|
+
*/
|
|
149
|
+
shortcuts?: NebaShortcuts<HTMLInputElement>;
|
|
138
150
|
}
|
|
139
151
|
/**
|
|
140
152
|
* A field you can type into and also choose from.
|
|
@@ -154,5 +166,5 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
|
|
|
154
166
|
* navigation across both the list and the chips, and the hidden input that
|
|
155
167
|
* makes the whole thing submit with a form.
|
|
156
168
|
*/
|
|
157
|
-
export declare function Combobox<Multiple extends boolean | undefined = false>(
|
|
169
|
+
export declare function Combobox<Multiple extends boolean | undefined = false>(rawProps: ComboboxProps<Multiple>): React.JSX.Element;
|
|
158
170
|
export {};
|
|
@@ -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{chipRemoveClasses as
|
|
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,controlHeightClasses as f,controlTextLeadingClasses as g,cx as x,disabledClasses as v,fieldReadOnlyClasses as y,fieldRestClasses as N,focusWithinRingClasses as w,gapClasses as j,hasContent as C,iconClasses as L,metaTextClasses as I,paddingXClasses as S,radiusClasses as O,stackGapClasses as V,surfaceClasses as z,surfaceSlots as _,transitionClasses as $}from"../../internal/styles.js";import{useStyleDefaults as k}from"../../internal/defaults.js";const A=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",$,"focus-within:[transition-duration:0ms]",w,L].join(" "),M={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]"},R=[z,"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]"].join(" "),T=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",$,"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(" "),q=["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 E(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox(w){const{variant:L="outline",size:z="md",color:$="primary",density:F="default",elevation:P=0,items:B,multiple:D,value:G,defaultValue:H,onValueChange:K,onInputValueChange:W,allowCustom:J=!0,customLabel:Q,clearable:U=!1,locale:X,emptyMessage:Y,limit:Z,placeholder:ee,label:ae,description:le,error:te,invalid:ne,startIcon:ie,fullWidth:re=!1,disabled:se=!1,readOnly:oe=!1,required:ce=!1,name:de,open:me,defaultOpen:ue,onOpenChange:pe,clearLabel:he,removeLabel:be,inputRef:fe,shortcuts:ge,id:xe,className:ve,classNames:ye,style:Ne,...we}=k(w,["size","density","variant","locale"]),je=c(s,X),Ce=c(r,X),Le=be??(e=>o(je.remove,{label:e})),Ie=C(te),Se=ne??Ie,Oe=Se?"danger":$,Ve=!0===D,ze=l.useMemo(()=>B.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[B]),[_e,$e]=l.useState(()=>E(H)),ke=void 0===G?_e:E(G),[Ae,Me]=l.useState(""),Re=l.useMemo(()=>new Map(ze.map(e=>[e.value,e])),[ze]),Te=l.useCallback(e=>Re.get(e)??{value:e,label:String(e),custom:!0},[Re]),qe=Ae.trim(),Ee=qe.toLocaleLowerCase(),Fe=""===qe||ze.some(e=>e.label.toLocaleLowerCase()===Ee||String(e.value).toLocaleLowerCase()===Ee)||ke.some(e=>String(e).toLocaleLowerCase()===Ee),Pe=!J||oe||se||Fe?null:qe,Be=l.useMemo(()=>null===Pe?ze:[...ze,{value:Pe,label:Pe,custom:!0}],[ze,Pe]),De=Ve?ke.map(Te):ke.length>0?Te(ke[0]):null;const Ge=S[F][z],He=[A,g[z],O[z],j[z],Ve?M[z]:f[z],`${Ge} pe-1.5`,se?v[L]:oe?y[L]:N[L],ye?.shell].filter(Boolean).join(" "),Ke=["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",ye?.control].filter(Boolean).join(" "),We=a=>e(t.Input,{ref:fe,onKeyDown:h(ge),placeholder:ee,className:Ve?`${Ke} min-w-16 ${a?"ms-1.5":""}`:Ke});return a(n.Root,{disabled:se,invalid:Se,className:x("flex-col align-top",V[z],re?"flex w-full":"inline-flex",ve??""),style:{..._(Oe,P),...Ne},...we,children:[ae?e(n.Label,{className:x(I[z],"font-medium",se?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ye?.label),children:ae}):null,a(t.Root,{id:xe,name:de,items:Be,multiple:Ve,value:De,onValueChange:e=>{!function(e){void 0===G&&$e(e),K?.(Ve?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Me(e),W?.(e)},open:me,defaultOpen:ue,onOpenChange:e=>pe?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:Z,disabled:se,readOnly:oe,required:ce,children:[a(t.InputGroup,{className:He,children:[ie?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:ie}):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:z,color:Oe,density:"compact",disabled:se,className:ye?.chip,endIcon:oe||se?null:e(t.ChipRemove,{"aria-label":Le(a.label),className:b,children:e(u,{})})}),children:a.label},String(a.value))),We(n.length>0)]})})}):We(!1),U&&!oe?e(t.Clear,{"aria-label":he??Ce.clear,className:q,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof ae?void 0:"Open",className:q,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-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:x(R,O[z],g[z],ye?.popup),style:_(Oe,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:Y??je.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:x(T,ye?.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:Q?Q(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)}`)})]})})})]}),le?e(n.Description,{className:x(I[z],"text-(--neba-muted-fg)",ye?.description),children:le}):null,e(n.Error,Ie?{match:!0,className:x(I[z],"text-(--n-accent)",ye?.error),children:te}:{className:x(I[z],"text-(--n-accent)",ye?.error)})]})}
|
|
@@ -102,4 +102,4 @@ export interface CommandPaletteProps extends Pick<NebaStyleProps, 'size' | 'colo
|
|
|
102
102
|
* its Dialog owns the sheet, the scrim, the focus trap and returning the focus
|
|
103
103
|
* to wherever the reader was.
|
|
104
104
|
*/
|
|
105
|
-
export declare function CommandPalette(
|
|
105
|
+
export declare function CommandPalette(rawProps: CommandPaletteProps): 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{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{Shortcut as r}from"../shortcut/Shortcut.js";import{commandMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}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,radiusClasses as x,surfaceClasses as f,surfaceSlots as b,toLength as g}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const v=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w=[f,"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]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},k={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},j={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},_={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},z=["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 C(e){return c([e.label,e.group,...e.keywords??[]])}export function CommandPalette(c){const{items:f,open:S,defaultOpen:E=!1,onOpenChange:M,onSelect:L,shortcut:O="Mod+K",width:P,maxHeight:V=320,locale:D,placeholder:F,emptyMessage:H,label:I,size:R="md",color:$="primary",density:B="default",className:K,classNames:T}=y(c,["size","density","locale"]),W=i(o,D),[q,A]=a.useState(E),[G,J]=a.useState(""),Q=S??q,U=a.useCallback(e=>{void 0===S&&A(e),M?.(e)},[S,M]);a.useEffect(()=>{if(!1===O)return;const e=e=>{s(e,O)&&(e.preventDefault(),U(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[O,U]);const X=a.useMemo(()=>f.map(C),[f]),Y=a.useMemo(()=>{const e=d(G);return""===e?f:f.filter((t,a)=>X[a].includes(e))},[f,X,G]),Z=g(P),ee=g(V);return e(l.Root,{open:Q,onOpenChange:e=>{e||J(""),U(e)},children:t(l.Portal,{children:[e(l.Backdrop,{className:p("neba-portal",v,T?.backdrop)}),e(l.Viewport,{className:p("neba-portal fixed inset-0 z-50 flex justify-center p-4 pt-[12vh]",T?.viewport),children:e(l.Popup,{"aria-label":I??W.label,className:p(w,x[R],m[R],void 0===Z?N[R]:"","self-start",K),style:{...b($,3),...void 0===Z?null:{maxWidth:Z}},children:t(n.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)] ${_[R]}`,children:e(n.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)",k[R],T?.input)})}),e(n.List,{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",T?.list),style:{maxHeight:ee},children:(l,s)=>t(a.Fragment,{children:[l.group&&l.group!==Y[s-1]?.group?e("div",{role:"presentation",className:p(_[R],"pt-2 pb-1 font-medium text-(--neba-muted-fg)",h[R],T?.group),children:l.group}):null,t(n.Item,{index:s,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),L?.(e),U(!1))})(l),className:p(z,x[R],_[R],j["compact"===B?"xs":R],T?.item),children:[u(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),u(l.description)?e("span",{className:`truncate text-(--neba-muted-fg) ${h[R]}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(n.Empty,{className:p(_[R],"py-6 text-center text-(--neba-muted-fg)",h[R],T?.empty),children:H??W.empty})]})})})]})})}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { NebaColor, NebaSize } from '../../types.js';
|
|
3
|
+
/** What a confirm asks, and how it is dressed. */
|
|
4
|
+
export interface ConfirmOptions {
|
|
5
|
+
/** The question. The dialog's heading, and what a screen reader announces. */
|
|
6
|
+
title?: React.ReactNode;
|
|
7
|
+
/** What answering costs — the consequence, not a restatement of the title. */
|
|
8
|
+
description?: React.ReactNode;
|
|
9
|
+
/** Overrides the confirming button's label. Defaults to the locale's word. */
|
|
10
|
+
confirmLabel?: React.ReactNode;
|
|
11
|
+
/** Overrides the cancelling button's label. */
|
|
12
|
+
cancelLabel?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* The colour family. `danger` for anything that destroys something, which is
|
|
15
|
+
* what most confirms are for.
|
|
16
|
+
*/
|
|
17
|
+
color?: NebaColor;
|
|
18
|
+
size?: NebaSize;
|
|
19
|
+
/**
|
|
20
|
+
* Drops the cancelling button, leaving one way out.
|
|
21
|
+
*
|
|
22
|
+
* For telling rather than asking — a result the reader has to acknowledge.
|
|
23
|
+
* It still resolves, always `true`, so the same `await` works either way.
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
alert?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Whether Escape and a click on the backdrop answer *no*.
|
|
29
|
+
*
|
|
30
|
+
* Off makes a question the reader has to answer with a button. Use it for the
|
|
31
|
+
* ones where an accidental dismissal is the expensive answer, and almost
|
|
32
|
+
* never otherwise: a modal with no way out is the thing people report.
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
dismissible?: boolean;
|
|
36
|
+
/** BCP 47 tag deciding the two default labels. Defaults to the provider's. */
|
|
37
|
+
locale?: string;
|
|
38
|
+
/** How wide the sheet is, passed to Dialog. */
|
|
39
|
+
width?: number | string;
|
|
40
|
+
}
|
|
41
|
+
/** Asks, and resolves to what the reader answered. */
|
|
42
|
+
export type ConfirmFunction = (options: ConfirmOptions | string) => Promise<boolean>;
|
|
43
|
+
export interface ConfirmProviderProps {
|
|
44
|
+
children?: React.ReactNode;
|
|
45
|
+
/** Defaults for every confirm raised under it. Each call can override them. */
|
|
46
|
+
defaults?: Pick<ConfirmOptions, 'color' | 'size' | 'width' | 'locale'>;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Hosts the one dialog every `useConfirm` under it raises.
|
|
50
|
+
*
|
|
51
|
+
* A provider for `ToastProvider`'s reason: what a caller has at the moment a
|
|
52
|
+
* confirmation is warranted is a click handler, not a place in the tree, and
|
|
53
|
+
* `<Dialog open={…}>` with a piece of state per question is the shape this
|
|
54
|
+
* exists to avoid — the state is always the same three fields, and it is always
|
|
55
|
+
* written again.
|
|
56
|
+
*
|
|
57
|
+
* **Questions queue.** Two raised at once are two questions somebody meant to
|
|
58
|
+
* ask, and resolving the older one `false` to make room would be reporting an
|
|
59
|
+
* answer the reader never gave — which reads, at the call site, as "they said
|
|
60
|
+
* no". So the second waits for the first, and no promise is settled by anything
|
|
61
|
+
* but a person.
|
|
62
|
+
*/
|
|
63
|
+
export declare function ConfirmProvider({ children, defaults }: ConfirmProviderProps): React.JSX.Element;
|
|
64
|
+
/**
|
|
65
|
+
* Asks a question and waits for the answer.
|
|
66
|
+
*
|
|
67
|
+
* ```tsx
|
|
68
|
+
* const confirm = useConfirm();
|
|
69
|
+
*
|
|
70
|
+
* if (await confirm({ title: 'Delete the project?', color: 'danger' })) {
|
|
71
|
+
* remove();
|
|
72
|
+
* }
|
|
73
|
+
* ```
|
|
74
|
+
*
|
|
75
|
+
* A promise rather than an `onConfirm` callback, because the code that asks is
|
|
76
|
+
* the code that acts: a callback splits one decision across two functions and
|
|
77
|
+
* leaves the caller to carry whatever it was about to do into the second.
|
|
78
|
+
*
|
|
79
|
+
* Cancelling, Escape and a click on the backdrop all resolve `false`. It never
|
|
80
|
+
* rejects — a question that was answered "no" is an answer, not a failure, and
|
|
81
|
+
* a promise that throws for it turns every call site into a `try`.
|
|
82
|
+
*/
|
|
83
|
+
export declare function useConfirm(): ConfirmFunction;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as o,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{Button as r}from"../button/Button.js";import{Dialog as n}from"../dialog/Dialog.js";import{confirmMessages as s,useMessages as l}from"../../internal/i18n.js";const a=/*@__PURE__*/i.createContext(null);export function ConfirmProvider({children:c,defaults:m}){const[d,u]=i.useState([]),[p,f]=i.useState(void 0),C=d[0];C&&C.options!==p&&f(C.options);const h=i.useCallback(o=>new Promise(e=>{u(t=>[...t,{options:"string"==typeof o?{title:o}:o,settle:e}])}),[]),v=o=>{C&&(C.settle(o),u(o=>o.slice(1)))},b={...m,...p},x=l(s,b.locale);return t(a.Provider,{value:h,children:[c,o(n,{open:void 0!==C,onOpenChange:o=>{o||v(!1)},size:b.size??"sm",color:b.color??"primary",width:b.width,title:b.title,description:b.description,dismissible:b.dismissible??!0,showClose:!1,actions:t(e,{children:[b.alert?null:o(r,{variant:"text",color:"secondary",onClick:()=>v(!1),children:b.cancelLabel??x.cancel}),o(r,{variant:"solid",color:b.color??"primary",onClick:()=>v(!0),autoFocus:!0,children:b.confirmLabel??x.confirm})]})})]})}export function useConfirm(){const o=i.useContext(a);if(!o)throw new Error("neba: useConfirm() needs a <ConfirmProvider> above it.");return o}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{ConfirmProvider,useConfirm}from"./Confirm.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box.js";import{cx as n}from"../../internal/styles.js";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=/*@__PURE__*/e.forwardRef(function({maxWidth:
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box.js";import{cx as n}from"../../internal/styles.js";import{useStyleDefaults as t}from"../../internal/defaults.js";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=/*@__PURE__*/e.forwardRef(function(e,s){const{maxWidth:a="none",padded:i=!0,size:d="md",density:l="default",centered:c=!0,render:f,className:x,children:p,...u}=t(e,["size","density"]),w=n("block w-full","none"===a?"":o[a],c?"mx-auto":"",i?m[l][d]:"",x??"");return r({render:f,ref:s,props:{className:w,children:p,...u}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,Fragment as e,jsxs as n}from"react/jsx-runtime";import*as d from"react";import{controlTextLeadingClasses as a,hasContent as o,metaTextClasses as p,toLength as r}from"../../internal/styles.js";const
|
|
1
|
+
"use client";import{jsx as t,Fragment as e,jsxs as n}from"react/jsx-runtime";import*as d from"react";import{controlTextLeadingClasses as a,hasContent as o,metaTextClasses as p,toLength as r}from"../../internal/styles.js";import{useStyleDefaults as l}from"../../internal/defaults.js";const s=/*@__PURE__*/d.createContext({size:"md",density:"default",orientation:"horizontal"}),i={default:{xs:"gap-x-3",sm:"gap-x-4",md:"gap-x-5",lg:"gap-x-6",xl:"gap-x-8"},compact:{xs:"gap-x-2",sm:"gap-x-2.5",md:"gap-x-3",lg:"gap-x-4",xl:"gap-x-5"}},m={default:{xs:"gap-y-2",sm:"gap-y-2.5",md:"gap-y-3",lg:"gap-y-3.5",xl:"gap-y-4"},compact:{xs:"gap-y-1",sm:"gap-y-1.5",md:"gap-y-2",lg:"gap-y-2",xl:"gap-y-2.5"}},f=["[&>dt:nth-of-type(n+2)]:border-t [&>dd:nth-of-type(n+2)]:border-t","[&>dt]:[border-color:var(--neba-border)] [&>dd]:[border-color:var(--neba-border)]"].join(" "),y={default:{xs:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",sm:"[&>dt:nth-of-type(n+2)]:pt-2.5 [&>dd:nth-of-type(n+2)]:pt-2.5",md:"[&>dt:nth-of-type(n+2)]:pt-3 [&>dd:nth-of-type(n+2)]:pt-3",lg:"[&>dt:nth-of-type(n+2)]:pt-3.5 [&>dd:nth-of-type(n+2)]:pt-3.5",xl:"[&>dt:nth-of-type(n+2)]:pt-4 [&>dd:nth-of-type(n+2)]:pt-4"},compact:{xs:"[&>dt:nth-of-type(n+2)]:pt-1 [&>dd:nth-of-type(n+2)]:pt-1",sm:"[&>dt:nth-of-type(n+2)]:pt-1.5 [&>dd:nth-of-type(n+2)]:pt-1.5",md:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",lg:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",xl:"[&>dt:nth-of-type(n+2)]:pt-2.5 [&>dd:nth-of-type(n+2)]:pt-2.5"}};export function DataListItem({label:r,children:l}){const{size:i,orientation:m}=d.useContext(s);return n(e,{children:[t("dt",{className:["min-w-0 text-(--neba-muted-fg)",p[i],"vertical"===m?"mb-0.5":"py-px"].join(" "),children:r}),t("dd",{className:`m-0 min-w-0 text-(--neba-fg) ${a[i]}`,children:o(l)?l:null})]})}export const DataList=/*@__PURE__*/d.forwardRef(function(e,n){const{orientation:a="horizontal",labelWidth:o,dividers:p=!1,size:x="md",density:c="default",className:h,style:g,children:u,...b}=l(e,["size","density"]),j=d.useMemo(()=>({size:x,density:c,orientation:a}),[x,c,a]),v=r(o);return t(s.Provider,{value:j,children:t("dl",{ref:n,className:["m-0 min-w-0","vertical"===a?"flex flex-col":"grid [grid-template-columns:var(--n-label)_minmax(0,1fr)] items-baseline",i[c][x],m[c][x],p?`${f} ${y[c][x]}`:"",h??""].filter(Boolean).join(" "),style:{"--n-label":v??"max-content",...g},...b,children:u})})});
|
|
@@ -90,6 +90,19 @@ export interface DataTableColumn<Row> {
|
|
|
90
90
|
searchable?: boolean;
|
|
91
91
|
/** Leaves the column out without removing it from the list. */
|
|
92
92
|
hidden?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Freezes the column against one edge while the rest scroll past it.
|
|
95
|
+
*
|
|
96
|
+
* A pinned column needs a `width`: the offsets the sticky cells sit at are
|
|
97
|
+
* the sum of the widths before them, and a column that has not said how wide
|
|
98
|
+
* it is has no number to add. Without one it is measured at the default.
|
|
99
|
+
*
|
|
100
|
+
* Pinning also **moves** the column: everything pinned to the start is drawn
|
|
101
|
+
* first, in the order given, and everything pinned to the end last. A frozen
|
|
102
|
+
* column in the middle of the scrolling ones would be a column that overlaps
|
|
103
|
+
* its neighbours instead of holding still.
|
|
104
|
+
*/
|
|
105
|
+
pinned?: 'start' | 'end';
|
|
93
106
|
/**
|
|
94
107
|
* The value behind the cell: what is sorted, and what the search is matched
|
|
95
108
|
* against. Defaults to `row[key]`.
|
|
@@ -107,6 +120,39 @@ export interface DataTableColumn<Row> {
|
|
|
107
120
|
* running row number.
|
|
108
121
|
*/
|
|
109
122
|
render?: (row: Row, index: number) => React.ReactNode;
|
|
123
|
+
/**
|
|
124
|
+
* What an export writes for this cell.
|
|
125
|
+
*
|
|
126
|
+
* Defaults to `value`, and then to `row[key]`. It is separate from `render`
|
|
127
|
+
* on purpose: a cell that draws a Chip, an Avatar or a progress bar has no
|
|
128
|
+
* text to put in a file, and `render`'s return is a React element rather than
|
|
129
|
+
* something a spreadsheet can hold.
|
|
130
|
+
*/
|
|
131
|
+
exportValue?: (row: Row) => unknown;
|
|
132
|
+
/** Leaves this column out of an export. @default true */
|
|
133
|
+
exportable?: boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Lets a cell in this column be edited in place.
|
|
136
|
+
*
|
|
137
|
+
* A function decides per row — a locked record, a computed field, a row
|
|
138
|
+
* somebody else is holding. `onCellEdit` is what receives the new value; a
|
|
139
|
+
* column with no handler above it is not editable however this is set.
|
|
140
|
+
*/
|
|
141
|
+
editable?: boolean | ((row: Row) => boolean);
|
|
142
|
+
/**
|
|
143
|
+
* What kind of field the editor is. `number` keeps the keypad on a phone and
|
|
144
|
+
* hands back a number rather than a string.
|
|
145
|
+
* @default 'text'
|
|
146
|
+
*/
|
|
147
|
+
editType?: 'text' | 'number';
|
|
148
|
+
/**
|
|
149
|
+
* The one number that stands for a whole group of rows in this column.
|
|
150
|
+
*
|
|
151
|
+
* Called with the rows of one group. There is no `'sum' | 'avg'` shorthand
|
|
152
|
+
* on purpose: the moment a table has one column that needs a weighted mean
|
|
153
|
+
* or a distinct count, half the columns are functions and half are strings.
|
|
154
|
+
*/
|
|
155
|
+
aggregate?: (rows: Row[]) => React.ReactNode;
|
|
110
156
|
}
|
|
111
157
|
export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'onSelect' | 'defaultValue'> {
|
|
112
158
|
/** The columns, in the order they appear. */
|
|
@@ -204,6 +250,26 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
|
|
|
204
250
|
resizable?: boolean;
|
|
205
251
|
/** The widths, keyed by column. Use with `onColumnWidthsChange`. */
|
|
206
252
|
columnWidths?: Readonly<Record<string, number>>;
|
|
253
|
+
/**
|
|
254
|
+
* The order the columns are drawn in, as a list of keys.
|
|
255
|
+
*
|
|
256
|
+
* A key the list does not mention keeps its place behind the ones it does —
|
|
257
|
+
* so an order that names two columns moves those two and leaves the rest
|
|
258
|
+
* alone, and a column added to `columns` later appears without the stored
|
|
259
|
+
* order having to be migrated.
|
|
260
|
+
*/
|
|
261
|
+
columnOrder?: readonly string[];
|
|
262
|
+
defaultColumnOrder?: readonly string[];
|
|
263
|
+
onColumnOrderChange?: (order: string[]) => void;
|
|
264
|
+
/**
|
|
265
|
+
* Lets a header be dragged along the row to move its column.
|
|
266
|
+
*
|
|
267
|
+
* Off by default. It is a real gesture on a real control, and a table whose
|
|
268
|
+
* columns move when a reader meant to press a heading is worse than one whose
|
|
269
|
+
* columns do not move at all.
|
|
270
|
+
* @default false
|
|
271
|
+
*/
|
|
272
|
+
reorderable?: boolean;
|
|
207
273
|
/** What they start as, for an uncontrolled table. */
|
|
208
274
|
defaultColumnWidths?: Readonly<Record<string, number>>;
|
|
209
275
|
onColumnWidthsChange?: (widths: Record<string, number>) => void;
|
|
@@ -273,6 +339,43 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
|
|
|
273
339
|
filter?: (row: Row, index: number) => boolean;
|
|
274
340
|
/** Content at the end of the bar the search field sits in. */
|
|
275
341
|
toolbar?: React.ReactNode;
|
|
342
|
+
/**
|
|
343
|
+
* Adds a button that writes the rows out as a CSV file.
|
|
344
|
+
*
|
|
345
|
+
* **Every row the reader is currently looking at, not the page they are on.**
|
|
346
|
+
* The search and the sort are applied and the paging is not, because a file
|
|
347
|
+
* of page 3 is not a file anybody asked for. A `manual` table exports the
|
|
348
|
+
* rows it was handed, which is the same rule seen from the server's side.
|
|
349
|
+
* @default false
|
|
350
|
+
*/
|
|
351
|
+
exportable?: boolean;
|
|
352
|
+
/** What the downloaded file is called. @default 'table.csv' */
|
|
353
|
+
exportFileName?: string;
|
|
354
|
+
/**
|
|
355
|
+
* Takes the CSV instead of downloading it — to post it somewhere, to open it
|
|
356
|
+
* in a viewer of your own, or to add a sheet around it.
|
|
357
|
+
*/
|
|
358
|
+
onExport?: (csv: string) => void;
|
|
359
|
+
/**
|
|
360
|
+
* Called when an edited cell is committed. Without it, nothing is editable.
|
|
361
|
+
*
|
|
362
|
+
* The table holds no copy of the rows: it hands the new value over and draws
|
|
363
|
+
* whatever comes back in `items`. A table that wrote into its own copy would
|
|
364
|
+
* be a table showing something the application does not know about.
|
|
365
|
+
*/
|
|
366
|
+
onCellEdit?: (row: Row, column: DataTableColumn<Row>, value: string | number) => void;
|
|
367
|
+
/**
|
|
368
|
+
* Groups the rows under a heading row, by whatever this returns.
|
|
369
|
+
*
|
|
370
|
+
* The grouping runs after the search and the sort, so a sorted table stays
|
|
371
|
+
* sorted inside each group and a filtered one groups only what is left.
|
|
372
|
+
* `undefined` from a row puts it in no group at all, above the rest.
|
|
373
|
+
*/
|
|
374
|
+
groupBy?: (row: Row) => string | undefined;
|
|
375
|
+
/** Whether a group can be folded away. @default true */
|
|
376
|
+
collapsibleGroups?: boolean;
|
|
377
|
+
/** Which groups start folded, by the label `groupBy` returned. */
|
|
378
|
+
defaultCollapsedGroups?: readonly string[];
|
|
276
379
|
/**
|
|
277
380
|
* Which stages the caller has already done — for a table whose rows come from
|
|
278
381
|
* a server a page at a time. `true` is all three.
|
|
@@ -320,4 +423,4 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
|
|
|
320
423
|
* is doing it. Both paths render the same, which is what stops a table that
|
|
321
424
|
* starts local and grows remote from becoming a second component.
|
|
322
425
|
*/
|
|
323
|
-
export declare function DataTable<Row>(
|
|
426
|
+
export declare function DataTable<Row>(rawProps: DataTableProps<Row>): React.JSX.Element;
|