neba 1.13.0 → 1.15.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 +22 -30
- package/dist/a2ui/catalog.json +1466 -0
- package/dist/a2ui/components.d.ts +21 -0
- package/dist/a2ui/components.js +1 -0
- package/dist/a2ui/index.d.ts +62 -0
- package/dist/a2ui/index.js +1 -0
- package/dist/a2ui/schema.d.ts +47 -0
- package/dist/a2ui/schema.js +1 -0
- package/dist/components/accordion/Accordion.d.ts +5 -1
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/agent-steps/AgentSteps.d.ts +80 -0
- package/dist/components/agent-steps/AgentSteps.js +1 -0
- package/dist/components/agent-steps/index.d.ts +2 -0
- package/dist/components/agent-steps/index.js +1 -0
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.d.ts +3 -2
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-appear/AnimateAppear.js +1 -1
- package/dist/components/animate-blink/AnimateBlink.d.ts +3 -0
- package/dist/components/animate-blink/AnimateBlink.js +1 -1
- package/dist/components/animate-counter/AnimateCounter.d.ts +3 -1
- package/dist/components/animate-counter/AnimateCounter.js +1 -1
- package/dist/components/animate-fade/AnimateFade.js +1 -1
- package/dist/components/animate-float/AnimateFloat.js +1 -1
- package/dist/components/animate-grow/AnimateGrow.js +1 -1
- package/dist/components/animate-headline/AnimateHeadline.d.ts +9 -2
- package/dist/components/animate-headline/AnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/AnimateLighting.d.ts +1 -1
- package/dist/components/animate-lighting/AnimateLighting.js +1 -1
- package/dist/components/animate-marquee/AnimateMarquee.d.ts +15 -6
- package/dist/components/animate-marquee/AnimateMarquee.js +1 -1
- package/dist/components/animate-reveal/AnimateReveal.js +1 -1
- package/dist/components/animate-rotate/AnimateRotate.js +1 -1
- package/dist/components/animate-scramble/AnimateScramble.d.ts +5 -3
- package/dist/components/animate-scramble/AnimateScramble.js +1 -1
- package/dist/components/animate-shake/AnimateShake.js +1 -1
- package/dist/components/animate-slide/AnimateSlide.js +1 -1
- package/dist/components/animate-split/AnimateSplit.d.ts +3 -1
- package/dist/components/animate-split/AnimateSplit.js +1 -1
- package/dist/components/animate-typing/AnimateTyping.d.ts +12 -4
- package/dist/components/animate-typing/AnimateTyping.js +1 -1
- package/dist/components/animate-zoom/AnimateZoom.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/approval/Approval.d.ts +115 -0
- package/dist/components/approval/Approval.js +1 -0
- package/dist/components/approval/index.d.ts +2 -0
- package/dist/components/approval/index.js +1 -0
- package/dist/components/area-chart/AreaChart.js +1 -1
- package/dist/components/aspect-ratio/AspectRatio.d.ts +6 -4
- package/dist/components/aspect-ratio/AspectRatio.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/bar-chart/BarChart.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.d.ts +2 -1
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/box/Box.d.ts +5 -0
- package/dist/components/box/Box.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.d.ts +10 -0
- package/dist/components/breadcrumb/Breadcrumb.js +1 -1
- package/dist/components/button/Button.d.ts +11 -0
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button-group/ButtonGroup.js +1 -1
- package/dist/components/calendar/Calendar.js +1 -1
- package/dist/components/card/Card.js +1 -1
- package/dist/components/carousel/Carousel.d.ts +4 -0
- 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.d.ts +3 -1
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/code-block/CodeBlock.d.ts +6 -3
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/collapsible/Collapsible.d.ts +11 -1
- package/dist/components/collapsible/Collapsible.js +1 -1
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +11 -1
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/confirm/Confirm.js +1 -1
- package/dist/components/container/Container.js +1 -1
- package/dist/components/context-window/ContextWindow.d.ts +103 -0
- package/dist/components/context-window/ContextWindow.js +1 -0
- package/dist/components/context-window/index.d.ts +2 -0
- package/dist/components/context-window/index.js +1 -0
- package/dist/components/data-list/DataList.js +1 -1
- package/dist/components/data-table/DataTable.d.ts +12 -1
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/date-picker/DatePicker.js +1 -1
- package/dist/components/date-range-picker/DateRangePicker.js +1 -1
- package/dist/components/date-time-picker/DateTimePicker.js +1 -1
- package/dist/components/dialog/Dialog.d.ts +12 -0
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/divider/Divider.js +1 -1
- package/dist/components/drawer/Drawer.d.ts +7 -0
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/empty/Empty.js +1 -1
- package/dist/components/fieldset/Fieldset.js +1 -1
- package/dist/components/file-picker/FilePicker.d.ts +12 -4
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/flex/Flex.d.ts +8 -2
- package/dist/components/flex/Flex.js +1 -1
- package/dist/components/floating-action-button/FloatingActionButton.d.ts +16 -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.d.ts +8 -0
- package/dist/components/footer/Footer.js +1 -1
- package/dist/components/form/Form.d.ts +4 -2
- package/dist/components/form/Form.js +1 -1
- package/dist/components/gallery/Gallery.d.ts +56 -3
- package/dist/components/gallery/Gallery.js +1 -1
- package/dist/components/gallery/GalleryViewer.js +1 -1
- package/dist/components/gauge-chart/GaugeChart.js +1 -1
- package/dist/components/grid/Grid.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.js +1 -1
- package/dist/components/highlight/Highlight.js +1 -1
- package/dist/components/how-to-steps/HowToSteps.d.ts +26 -1
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/icon/Icon.js +1 -1
- package/dist/components/icon-button/IconButton.d.ts +0 -20
- package/dist/components/icon-button/IconButton.js +1 -1
- package/dist/components/image/Image.d.ts +137 -11
- package/dist/components/image/Image.js +1 -1
- package/dist/components/image/index.d.ts +1 -1
- package/dist/components/inline-citation/InlineCitation.d.ts +53 -0
- package/dist/components/inline-citation/InlineCitation.js +1 -0
- package/dist/components/inline-citation/index.d.ts +2 -0
- package/dist/components/inline-citation/index.js +1 -0
- package/dist/components/list/List.js +1 -1
- package/dist/components/menu/Menu.d.ts +7 -4
- package/dist/components/menu/Menu.js +1 -1
- package/dist/components/menubar/Menubar.js +1 -1
- package/dist/components/meter/Meter.d.ts +6 -0
- package/dist/components/meter/Meter.js +1 -1
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.ts +10 -1
- package/dist/components/navigation-menu/NavigationMenu.js +1 -1
- package/dist/components/number-field/NumberField.d.ts +20 -6
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/otp-field/OtpField.d.ts +7 -0
- 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.d.ts +11 -0
- package/dist/components/page-layout/PageLayout.js +1 -1
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/panes/Panes.d.ts +11 -0
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/pie-chart/PieChart.d.ts +5 -3
- package/dist/components/pie-chart/PieChart.js +1 -1
- package/dist/components/pill/Pill.d.ts +8 -0
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popconfirm/Popconfirm.d.ts +10 -3
- package/dist/components/popconfirm/Popconfirm.js +1 -1
- package/dist/components/popover/Popover.d.ts +8 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/portal/Portal.js +1 -1
- package/dist/components/progress-box/ProgressBox.js +1 -1
- package/dist/components/progress-circular/ProgressCircular.js +1 -1
- package/dist/components/progress-linear/ProgressLinear.js +1 -1
- package/dist/components/prompt-input/PromptInput.d.ts +104 -0
- package/dist/components/prompt-input/PromptInput.js +1 -0
- package/dist/components/prompt-input/index.d.ts +2 -0
- package/dist/components/prompt-input/index.js +1 -0
- package/dist/components/provider/NebaProvider.d.ts +3 -3
- package/dist/components/provider/NebaProvider.js +1 -1
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/rating/Rating.d.ts +4 -1
- package/dist/components/rating/Rating.js +1 -1
- package/dist/components/reasoning/Reasoning.d.ts +78 -0
- package/dist/components/reasoning/Reasoning.js +1 -0
- package/dist/components/reasoning/index.d.ts +2 -0
- package/dist/components/reasoning/index.js +1 -0
- package/dist/components/scatter-chart/ScatterChart.js +1 -1
- package/dist/components/scroll-area/ScrollArea.js +1 -1
- package/dist/components/scroll-zone/ScrollZone.d.ts +10 -0
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/segmented-button/SegmentedButton.js +1 -1
- package/dist/components/select/Select.js +1 -1
- package/dist/components/shortcut/Shortcut.js +1 -1
- package/dist/components/show/Show.d.ts +6 -5
- package/dist/components/show/Show.js +1 -1
- package/dist/components/sidebar/Sidebar.d.ts +7 -5
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/sidebar/SidebarTrigger.js +1 -1
- package/dist/components/skeleton/Skeleton.d.ts +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/slider/Slider.d.ts +13 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/sources/Sources.d.ts +78 -0
- package/dist/components/sources/Sources.js +1 -0
- package/dist/components/sources/index.d.ts +2 -0
- package/dist/components/sources/index.js +1 -0
- package/dist/components/sparkline/Sparkline.js +1 -1
- package/dist/components/spoiler/Spoiler.js +1 -1
- package/dist/components/stack/Stack.d.ts +2 -2
- package/dist/components/stack/Stack.js +1 -1
- package/dist/components/statistic/Statistic.js +1 -1
- package/dist/components/streaming-text/StreamingText.d.ts +75 -0
- package/dist/components/streaming-text/StreamingText.js +1 -0
- package/dist/components/streaming-text/index.d.ts +2 -0
- package/dist/components/streaming-text/index.js +1 -0
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/table/Table.d.ts +8 -2
- package/dist/components/table/Table.js +1 -1
- package/dist/components/tabs/Tabs.js +1 -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/Timeline.d.ts +8 -0
- package/dist/components/timeline/Timeline.js +1 -1
- package/dist/components/timeline-chart/TimelineChart.js +1 -1
- package/dist/components/toast/Toast.d.ts +9 -3
- 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/tool-call/ToolCall.d.ts +104 -0
- package/dist/components/tool-call/ToolCall.js +1 -0
- package/dist/components/tool-call/index.d.ts +2 -0
- package/dist/components/tool-call/index.js +1 -0
- package/dist/components/toolbar/Toolbar.d.ts +8 -0
- package/dist/components/toolbar/Toolbar.js +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.d.ts +2 -0
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.js +1 -1
- package/dist/components/tree-view/TreeView.d.ts +6 -0
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/typography/Typography.js +1 -1
- package/dist/components/visually-hidden/VisuallyHidden.d.ts +9 -7
- package/dist/components/visually-hidden/VisuallyHidden.js +1 -1
- package/dist/components/window-pane/WindowPane.d.ts +2 -2
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/hooks/useElementSize.d.ts +3 -1
- package/dist/hooks/useElementSize.js +1 -1
- package/dist/hooks/useOnScreen.d.ts +3 -0
- package/dist/hooks/useOnScreen.js +1 -1
- package/dist/index.d.ts +9 -0
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +63 -16
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.d.ts +6 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +64 -22
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +55 -4
- package/dist/internal/chart.js +1 -1
- package/dist/internal/children.d.ts +15 -0
- package/dist/internal/children.js +1 -0
- package/dist/internal/color.d.ts +4 -0
- package/dist/internal/color.js +1 -1
- package/dist/internal/csv.d.ts +12 -1
- package/dist/internal/csv.js +1 -1
- package/dist/internal/data-table.d.ts +28 -10
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +12 -5
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +6 -1
- package/dist/internal/defaults.js +1 -1
- package/dist/internal/drag.d.ts +13 -1
- package/dist/internal/drag.js +1 -1
- package/dist/internal/drop.d.ts +61 -0
- package/dist/internal/drop.js +1 -0
- package/dist/internal/fieldset.d.ts +13 -0
- package/dist/internal/fieldset.js +1 -0
- package/dist/internal/glow.d.ts +58 -0
- package/dist/internal/glow.js +1 -0
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/i18n.d.ts +230 -11
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/icons.d.ts +13 -2
- package/dist/internal/icons.js +1 -1
- package/dist/internal/inert.d.ts +13 -0
- package/dist/internal/inert.js +1 -0
- package/dist/internal/initials.d.ts +8 -3
- package/dist/internal/initials.js +1 -1
- package/dist/internal/keys.d.ts +13 -0
- package/dist/internal/keys.js +1 -1
- package/dist/internal/link.d.ts +13 -15
- package/dist/internal/link.js +1 -1
- package/dist/internal/media.d.ts +9 -17
- package/dist/internal/media.js +1 -1
- package/dist/internal/menu.d.ts +6 -1
- package/dist/internal/mockup.d.ts +5 -4
- package/dist/internal/mockup.js +1 -1
- package/dist/internal/observe.d.ts +12 -0
- package/dist/internal/observe.js +1 -1
- package/dist/internal/page-layout.d.ts +10 -8
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +1 -1
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +11 -5
- package/dist/internal/progress.js +1 -1
- package/dist/internal/responsive.d.ts +0 -8
- package/dist/internal/responsive.js +1 -1
- package/dist/internal/run.d.ts +71 -0
- package/dist/internal/run.js +1 -0
- package/dist/internal/screen.d.ts +12 -0
- package/dist/internal/screen.js +1 -0
- package/dist/internal/styles.d.ts +185 -14
- package/dist/internal/styles.js +1 -1
- package/dist/internal/text.d.ts +3 -3
- package/dist/internal/text.js +1 -1
- package/dist/internal/window.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/tailwind.css +501 -53
- package/dist/types.d.ts +34 -7
- package/dist/types.js +0 -8
- package/package.json +43 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Popover as o}from"@base-ui/react/popover";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as n,useMessages as t}from"../../internal/i18n.js";import{CloseIcon as a}from"../../internal/icons.js";import{cx as r,hasContent as d,metaTextClasses as c,popupFadeClasses as m,radiusClasses as f,sheetBodyClasses as p,sheetHeaderGapClasses as u,sheetSectionGapClasses as b,sheetTitleClasses as h,srOnlyClasses as x,surfaceClasses as g,surfaceSlots as v}from"../../internal/styles.js";import{useStyleDefaults as w}from"../../internal/defaults.js";const j={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},N=[g,"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]",m].join(" "),_={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=o.Close;export function Popover(m){const{size:g="md",color:k="primary",density:y="default",trigger:z,title:O,description:C,children:P,side:$="bottom",align:B="center",sideOffset:L=6,alignOffset:M=0,arrow:T=!1,open:W,defaultOpen:A,onOpenChange:D,modal:E=!1,dismissible:R=!0,showClose:q=!1,locale:F,closeLabel:G,width:H,className:I,style:J,...K}=w(m,["size","density","locale"]),Q=t(n,F),S=l[y][g],U=i[y][g],V=_[g],X=d(O)||d(C);return s(o.Root,{open:W,defaultOpen:A,modal:E,onOpenChange:(e,s)=>{R||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?D?.(e):s.cancel()},children:[z?e(o.Trigger,{render:z}):null,e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",side:$,align:B,sideOffset:L,alignOffset:M,children:s(o.Popup,{className:r(N,f[g],p[g],b[g],S,U,void 0===H?j[g]:"",I??""),style:{...v(k,3),...void 0===H?null:{maxWidth:"number"==typeof H?`${H}px`:H},...J},...K,children:[T?e(o.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:s("svg",{width:V,height:V/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,X||q?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${u[g]}`,children:[d(O)?e(o.Title,{className:`m-0 font-semibold ${h[g]}`,children:O}):null,d(C)?e(o.Description,{className:`m-0 text-(--neba-muted-fg) ${c[g]}`,children:C}):null]}),q?e(o.Close,{"aria-label":G??Q.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(a,{})}):null]}):null,d(P)?e("div",{className:"min-w-0",children:P}):null,!1===E||q?null:e(o.Close,{"aria-label":G??Q.close,className:r(x,"end-2 top-2 flex cursor-pointer items-center justify-center rounded-full","bg-(--n-panel-press) text-(--neba-muted-fg) [&_svg]:size-[1.1em] [&_svg]:shrink-0","focus-visible:size-[1.6em] focus-visible:[clip-path:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),children:e(a,{})})]})})})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{createPortal as e}from"react-dom";import{cx as o}from"../../internal/styles.js";export const Portal=/*@__PURE__*/r.forwardRef(function Portal({children:n,container:s,disabled:a=!1,className:c,...i},l){const[f,m]=r.useState(null);r.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?e(u,f):null});
|
|
@@ -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
|
|
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 r,plateRadiusClasses as t,plateSizeClasses as n,progressAriaText as i,progressFraction as o,progressSlots as m,progressText as u}from"../../internal/progress.js";import{cx as f,metaTextClasses as c,stackGapClasses as d}from"../../internal/styles.js";import{useStyleDefaults as x}from"../../internal/defaults.js";export const ProgressBox=/*@__PURE__*/l.forwardRef(function ProgressBox(l,b){const{size:h="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}=x(l,["size"]),A=o(v,y,j),B=null===A,P=void 0!==M,R=Number.isFinite(g)?Math.max(1,Math.floor(g)):1;return a(s.Root,{ref:b,value:B?null:v,min:y,max:j,format:M,getAriaValueText:i(A,P),className:f("inline-flex flex-col",d[h],V??""),style:{...m(p),...k},...z,children:[w||N?a("div",{className:["flex items-baseline gap-2",w?"justify-between":"justify-end",c[h]].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=>u(A,e,P)}):null]}):null,e(s.Track,{className:`flex ${r[h]}`,children:Array.from({length:R},(a,l)=>e("span",{className:f("relative overflow-hidden bg-(--n-soft)","[box-shadow:var(--neba-plate-glass)]",n[h],t[h],B?"neba-plate-wave":""),style:B?{"--n-i":l}:void 0,children:B?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*R-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
|
|
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 l,progressSlots as n,progressText as i,ringDiameters as o,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as u,metaTextClasses as f}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";export const ProgressCircular=/*@__PURE__*/a.forwardRef(function ProgressCircular(a,d){const{size:x="md",color:k="primary",value:p=null,min:g=0,max:b=100,label:v,showValue:y=!1,format:$,locale:j,thickness:N,className:w,style:M,...P}=h(a,["size","locale"]),V=l(p,g,b),z=null===V,C=void 0!==$,D=o[x],L=D/2,R=Math.min(Math.max(N??c[x],.5),L/2),W=L-R/2,_=2*Math.PI*W,A=z?`${.28*_} ${_}`:`${_}`,B=z?0:_*(1-V);return r(s.Root,{ref:d,value:z?null:p,min:g,max:b,format:$,locale:j,getAriaValueText:t(V,C),className:m("inline-flex items-center",u[x],f[x],w??""),style:{...n(k),...M},...P,children:[r("svg",{className:z?"neba-ring-spin shrink-0":"shrink-0",width:D,height:D,viewBox:`0 0 ${D} ${D}`,fill:"none","aria-hidden":"true",children:[e("circle",{cx:L,cy:L,r:W,stroke:"var(--n-soft)",strokeWidth:R}),e("circle",{cx:L,cy:L,r:W,stroke:"var(--n-accent)",strokeWidth:R,strokeLinecap:"round",strokeDasharray:A,strokeDashoffset:B,transform:`rotate(-90 ${L} ${L})`,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=>i(V,e,C)}):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
|
|
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 c}from"../../internal/styles.js";import{useStyleDefaults as f}from"../../internal/defaults.js";export const ProgressLinear=/*@__PURE__*/a.forwardRef(function ProgressLinear(a,d){const{size:b="md",color:p="primary",value:g=null,min:x=0,max:h=100,label:j,showValue:v=!1,format:w,locale:y,thickness:N,className:k,style:L,...V}=f(a,["size","locale"]),z=t(g,x,h),P=null===z,R=void 0!==w;return l(r.Root,{ref:d,value:P?null:g,min:x,max:h,format:w,locale:y,getAriaValueText:n(z,R),className:m("flex w-full flex-col",c[b],k??""),style:{...i(p),...L},...V,children:[j||v?l("div",{className:["flex items-baseline gap-2",j?"justify-between":"justify-end",u[b]].join(" "),children:[j?e(r.Label,{className:"min-w-0 truncate text-(--neba-fg)",children:j}):null,v?e(r.Value,{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:e=>o(z,e,R)}):null]}):null,e(r.Track,{className:`neba-progress-track relative w-full overflow-hidden rounded-full bg-(--n-soft) ${s[b]}`,style:void 0===N?void 0:{height:`${N}px`},children:e(r.Indicator,{className:["neba-progress-indicator absolute rounded-full bg-(--n-fill)",P?"neba-sweep":"top-0 [transition:width_var(--neba-duration-fill)_var(--neba-ease)]"].join(" ")})})]})});
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type PromptMessages } from '../../internal/i18n.js';
|
|
3
|
+
import type { NebaElevation, NebaSlots, NebaStyleProps } from '../../types.js';
|
|
4
|
+
/**
|
|
5
|
+
* The parts a PromptInput draws behind its root.
|
|
6
|
+
*
|
|
7
|
+
* `shell` is the framed box — the thing wearing the border, the fill and the
|
|
8
|
+
* focus ring — and `control` the `<textarea>` inside it. `toolbar` is the row
|
|
9
|
+
* under the text and `send` the one button the component draws itself.
|
|
10
|
+
*/
|
|
11
|
+
export type PromptInputSlot = 'shell' | 'control' | 'toolbar' | 'send';
|
|
12
|
+
/** Which key sends, spelled the way [Shortcut] draws it. */
|
|
13
|
+
export type PromptSubmitKey = 'Enter' | 'Mod+Enter';
|
|
14
|
+
type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'color' | 'size' | 'value' | 'defaultValue' | 'onChange' | 'onSubmit' | 'children'>;
|
|
15
|
+
export interface PromptInputProps extends Pick<NebaStyleProps, 'size' | 'variant' | 'color' | 'density'>, NativeControlProps {
|
|
16
|
+
/** What is in the field. Pass it with `onValueChange` to drive it yourself. */
|
|
17
|
+
value?: string;
|
|
18
|
+
/** What an uncontrolled field starts with. @default '' */
|
|
19
|
+
defaultValue?: string;
|
|
20
|
+
/** Called on every keystroke, with the whole value. */
|
|
21
|
+
onValueChange?: (value: string) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Called with the value when the field is sent — by the key, by the button,
|
|
24
|
+
* or by a form submission. An empty field never sends.
|
|
25
|
+
*
|
|
26
|
+
* It does **not** clear the field. What happens to what was typed is the
|
|
27
|
+
* application's: a message that failed to send should still be there.
|
|
28
|
+
*/
|
|
29
|
+
onSubmit?: (value: string) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Whether an answer is being written. The send button becomes a stop button,
|
|
32
|
+
* and stays pressable — which is the whole reason it is one button and not
|
|
33
|
+
* two: the thing a reader reaches for to stop an answer is exactly where
|
|
34
|
+
* they last pressed to start it.
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
submitting?: boolean;
|
|
38
|
+
/** Called when the stop button is pressed. */
|
|
39
|
+
onStop?: () => void;
|
|
40
|
+
/**
|
|
41
|
+
* Which key sends. `Enter` sends and `Shift+Enter` breaks the line;
|
|
42
|
+
* `Mod+Enter` is the other way round, for a field people write paragraphs in.
|
|
43
|
+
*
|
|
44
|
+
* Neither fires while an input method is composing — a Korean or Japanese
|
|
45
|
+
* reader pressing Enter to accept a candidate is finishing a word, not
|
|
46
|
+
* sending a message.
|
|
47
|
+
* @default 'Enter'
|
|
48
|
+
*/
|
|
49
|
+
submitKey?: PromptSubmitKey;
|
|
50
|
+
/**
|
|
51
|
+
* Passing it makes the shell a drop target. It is called with the files, and
|
|
52
|
+
* what happens to them is the application's.
|
|
53
|
+
*
|
|
54
|
+
* A folder dropped onto a page arrives looking like a zero-byte file, and
|
|
55
|
+
* those are filtered out before this is called — the same check a
|
|
56
|
+
* [FilePicker](../inputs/file-picker) makes.
|
|
57
|
+
*/
|
|
58
|
+
onFiles?: (files: File[]) => void;
|
|
59
|
+
/** The field's accessible name, drawn for a screen reader and nobody else. */
|
|
60
|
+
label?: React.ReactNode;
|
|
61
|
+
/** How many rows the field is at its shortest. @default 1 */
|
|
62
|
+
minRows?: number;
|
|
63
|
+
/**
|
|
64
|
+
* And at its tallest, after which it scrolls. A prompt field that grows
|
|
65
|
+
* without a ceiling pushes the conversation it belongs to off the screen.
|
|
66
|
+
* @default 8
|
|
67
|
+
*/
|
|
68
|
+
maxRows?: number;
|
|
69
|
+
/** Controls at the start of the toolbar under the text — attach, a model Select. */
|
|
70
|
+
start?: React.ReactNode;
|
|
71
|
+
/** Controls at its end, before the send button — a token count, a mode toggle. */
|
|
72
|
+
end?: React.ReactNode;
|
|
73
|
+
/**
|
|
74
|
+
* Drop shadow depth. `0` (the default) is flat.
|
|
75
|
+
* @default 0
|
|
76
|
+
*/
|
|
77
|
+
elevation?: NebaElevation;
|
|
78
|
+
/** Which language the two button labels are written in, as a BCP 47 tag. */
|
|
79
|
+
locale?: string;
|
|
80
|
+
/** Those words, written out. Overrides the `locale`'s. */
|
|
81
|
+
labels?: Partial<PromptMessages>;
|
|
82
|
+
/** Class names for the parts behind the root. */
|
|
83
|
+
classNames?: NebaSlots<PromptInputSlot>;
|
|
84
|
+
/** A strip above the field — the attachments that have been added, a reply-to line. */
|
|
85
|
+
children?: React.ReactNode;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Everything a prompt goes out through: the text, the attach and model
|
|
89
|
+
* controls, and one button that sends and then stops.
|
|
90
|
+
*
|
|
91
|
+
* A [TextField](../inputs/text-field) with `multiline` plus a
|
|
92
|
+
* [Toolbar](../surfaces/toolbar) gets the shell. What it does not get is the
|
|
93
|
+
* three things that are rewritten at every call site: a field that grows with
|
|
94
|
+
* what is typed and then stops growing, a send button that becomes a stop
|
|
95
|
+
* button without moving, and Enter meaning *send* while Shift+Enter means a new
|
|
96
|
+
* line.
|
|
97
|
+
*
|
|
98
|
+
* The composition guard is the part most easily missed and the one that matters
|
|
99
|
+
* most outside English: pressing Enter to accept a candidate from a Korean or
|
|
100
|
+
* Japanese input method is finishing a word, and a field that read it as a
|
|
101
|
+
* send would make the language unusable.
|
|
102
|
+
*/
|
|
103
|
+
export declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
104
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{useDropZone as l}from"../../internal/drop.js";import{spotlightSlot as o,glowClasses as a,trackPointer as i}from"../../internal/glow.js";import{matchesShortcut as s}from"../../internal/keys.js";import{promptMessages as c,useMessages as m}from"../../internal/i18n.js";import{controlTextLeadingClasses as d,cx as u,disabledClasses as f,fieldFocusTransitionClasses as p,fieldReadOnlyClasses as h,fieldRestClasses as g,fieldRingClasses as x,hasContent as v,iconClasses as b,metaTextClasses as w,paddingXClasses as y,radiusClasses as $,srOnlyClasses as j,surfaceSlots as N,transitionClasses as k}from"../../internal/styles.js";import{useStyleDefaults as I}from"../../internal/defaults.js";import{useFieldsetDisabled as S}from"../../internal/fieldset.js";function SendIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M8 13V3.5m0 0L3.75 7.75M8 3.5l4.25 4.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}function StopIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:e("rect",{x:"4",y:"4",width:"8",height:"8",rx:"1.5"})})}const C={xs:`${$.sm} ${d.xs}`,sm:`${$.md} ${d.sm}`,md:`${$.lg} ${d.md}`,lg:`${$.xl} ${d.lg}`,xl:`${$.xl} ${d.xl}`},D={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const PromptInput=/*@__PURE__*/n.forwardRef(function PromptInput(d,$){const{variant:M="outline",size:z="md",color:L="primary",density:P="default",elevation:R=0,value:B,defaultValue:E="",onValueChange:K,onSubmit:V,submitting:F=!1,onStop:O,submitKey:H="Enter",onFiles:T,label:W,minRows:q=1,maxRows:A=8,start:G,end:J,locale:Q,labels:U,classNames:X,disabled:Y,readOnly:Z=!1,onKeyDown:_,className:ee,style:te,children:ne,...re}=I(d,["size","density","variant","locale"]),le=S(Y),oe=!le&&!Z,ae={...m(c,Q),...U},[ie,se]=n.useState(E),ce=void 0!==B,me=ce?B:ie,{over:de,handlers:ue}=l(T),fe=n.useId(),pe=n.useRef(null),he=n.useCallback(e=>{pe.current=e,"function"==typeof $?$(e):$&&($.current=e)},[$]);n.useLayoutEffect(()=>{const e=pe.current;e&&(e.style.height="auto",e.style.height=`${e.scrollHeight}px`)},[me]);const ge=()=>{!me.trim()||le||Z||F||V?.(me)},xe=me.trim().length>0&&!le&&!Z;return t("form",{onSubmit:e=>{e.preventDefault(),ge()},className:u("flex w-full flex-col",ee??""),style:{...N(L,R),...oe?o:void 0,...te},children:[v(W)?e("label",{htmlFor:fe,className:j,children:W}):null,t("div",{"data-dropping":de||void 0,...ue,onPointerMove:i(void 0,oe),onPointerDown:e=>{e.target!==e.currentTarget||le||(e.preventDefault(),pe.current?.focus())},className:u("relative flex w-full flex-col py-2","[-webkit-tap-highlight-color:transparent]",C[z],D[z],y[P][z],k,p,x,b,le?f[M]:Z?h[M]:`${g[M]} ${a}`,de?"[border-color:var(--n-ring)] bg-(--n-soft)":"",X?.shell??""),children:[ne,e("textarea",{ref:he,id:fe,rows:q,value:me,disabled:le,readOnly:Z,onChange:e=>{ce||se(e.target.value),K?.(e.target.value)},className:u("neba-input block w-full resize-none bg-transparent [font:inherit] text-inherit","[outline:none]","min-h-(--n-min-rows) max-h-(--n-max-rows) overflow-y-auto","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",X?.control??""),style:{"--n-min-rows":`calc(${Math.max(q,1)} * 1lh)`,"--n-max-rows":`calc(${Math.max(A,q,1)} * 1lh)`},...re,onKeyDown:e=>{!e.nativeEvent.isComposing&&s(e,H)&&(e.preventDefault(),ge()),_?.(e)}}),t("div",{className:u("flex min-w-0 items-center gap-2",w[z],X?.toolbar??""),children:[v(G)?e("div",{className:"flex min-w-0 items-center gap-1",children:G}):null,t("div",{className:"ms-auto flex shrink-0 items-center gap-2",children:[v(J)?e("div",{className:"flex items-center gap-1",children:J}):null,e(r,{type:F?"button":"submit",size:z,color:L,icon:e(F?StopIcon:SendIcon,{}),label:F?ae.stop:ae.send,disabled:!F&&!xe,onClick:F?O:void 0,className:X?.send})]})]}),de?e("div",{"aria-hidden":"true",className:u("pointer-events-none absolute inset-0 flex items-center justify-center","font-medium text-(--n-accent)",C[z]),children:ae.drop}):null]})]})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PromptInput}from"./PromptInput.js";
|
|
@@ -61,9 +61,9 @@ export interface NebaProviderProps {
|
|
|
61
61
|
* <script dangerouslySetInnerHTML={{ __html: colorSchemeScript() }} />
|
|
62
62
|
* ```
|
|
63
63
|
*
|
|
64
|
-
* It reads the same key and writes the same attribute
|
|
65
|
-
* two cannot disagree — which is the reason it is here
|
|
66
|
-
* documentation snippet somebody copies once and never updates.
|
|
64
|
+
* It reads the same key and writes the same attribute and `color-scheme` the
|
|
65
|
+
* provider does, so the two cannot disagree — which is the reason it is here
|
|
66
|
+
* rather than in a documentation snippet somebody copies once and never updates.
|
|
67
67
|
*/
|
|
68
68
|
export declare function colorSchemeScript(options?: {
|
|
69
69
|
storageKey?: string;
|
|
@@ -1 +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
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{DirectionProvider as r,useDirection as o}from"@base-ui/react/direction-provider";import{DefaultsContext as l}from"../../internal/defaults.js";import{useHydrated as n,useMediaQuery as c}from"../../internal/media.js";const s=/*@__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(${a(t)})||${a(r)};if(s==='system'){s=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}var d=document.documentElement;d.setAttribute('data-theme',s);d.style.colorScheme=s}catch(e){}})()`}function a(e){return JSON.stringify(e).replace(/</g,"\\u003c")}export function NebaProvider({children:a,defaults:i,colorScheme:u,defaultColorScheme:m="system",onColorSchemeChange:d,storageKey:h="neba-color-scheme",colorSchemeElement:f,direction:S}){const g=n(),y=t.useContext(l),v=t.useContext(s),p=o(),[C,b]=t.useState(null),x=t.useMemo(()=>g?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}}(h):null,[g,h]),k=u??C??x??m,E=c("(prefers-color-scheme: dark)"),j="system"===k?E?"dark":"light":k,M=t.useCallback(e=>{if(void 0===u&&b(e),!1!==h)try{localStorage.setItem(h,e)}catch{}d?.(e)},[u,h,d]);t.useEffect(()=>{if(!g)return;const e=f?f():null===v?document.documentElement:null;e&&(e.setAttribute("data-theme",j),e.style.colorScheme=j)},[g,j,f,v]),t.useEffect(()=>{S&&document.documentElement.setAttribute("dir",S)},[S]);const P=t.useMemo(()=>({colorScheme:k,resolvedColorScheme:j,setColorScheme:M,toggleColorScheme:()=>M("dark"===j?"light":"dark")}),[k,j,M]),z=i?.size??y?.size,A=i?.density??y?.density,I=i?.variant??y?.variant,N=i?.locale??y?.locale,w=null!=i||null!==y,K=t.useMemo(()=>w?{size:z,density:A,variant:I,locale:N}:null,[w,z,A,I,N]);return e(l.Provider,{value:K,children:e(s.Provider,{value:P,children:e(r,{direction:S??p,children:a})})})}export function useColorScheme(){const e=t.useContext(s);if(!e)throw new Error("neba: useColorScheme() needs a <NebaProvider> above it.");return e}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as o,cx as t,hitAreaClasses as s,metaTextClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as o,cx as t,hitAreaClasses as s,metaTextClasses as d,surfaceClasses as c,tickDotClasses as b,tickRowLeadingClasses as f,tickSizeClasses as m,transitionClasses as h}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";import{useFieldsetDisabled as u}from"../../internal/fieldset.js";const v=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),g=["relative inline-flex shrink-0 items-center justify-center rounded-full border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),x=[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)"].join(" "),N=[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(" "),y=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),j=["rounded-full bg-current","[transition:width_var(--neba-duration)_var(--neba-ease),height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:size-0 data-[ending-style]:size-0"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function Radio({label:l,description:s,disabled:c,className:h,classNames:p,style:u,...k},z){const R=r.useContext(v),w=k.readOnly??R.readOnly,$=c??R.disabled;return e(i.Root,{disabled:$,className:t("flex flex-col",h??""),style:u,children:a("div",{className:`flex items-start gap-2 ${o[R.size]} ${f}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:z,className:t(g,m[R.size],$?y:w?N:x,p?.control),disabled:$,...k,children:e(n.Indicator,{className:t(j,b[R.size],p?.indicator)})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(i.Label,{className:t("leading-[1.4]",$?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",p?.label),children:l}):null,s?e(i.Description,{className:t(d[R.size],"text-(--neba-muted-fg)",p?.description),children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function RadioGroup(n,o){const{size:s="md",color:c="primary",orientation:b="vertical",label:f,description:m,error:h,invalid:g,disabled:x,readOnly:N=!1,className:y,classNames:j,style:k,children:z,...R}=p(n,["size"]),w=u(x),$=null!=h&&!1!==h&&""!==h,O=g??$,_=O?"danger":c,G={"--n-fill":`var(--neba-${_}-fill)`,"--n-fill-hover":`var(--neba-${_}-fill-hover)`,"--n-on-solid":`var(--neba-${_}-on-solid)`,"--n-accent":`var(--neba-${_}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${_}-line)`,"--n-line-hover":`var(--neba-${_}-line-hover)`,"--n-ring":`var(--neba-${_}-ring)`},C=r.useMemo(()=>({size:s,color:_,readOnly:N,disabled:w}),[s,_,N,w]);return e(v.Provider,{value:C,children:a(i.Root,{disabled:w,invalid:O,className:t("flex flex-col gap-1.5",y??""),style:{...G,...k},children:[f?e(i.Label,{className:t(d[s],"font-medium",w?"text-(--neba-disabled-fg)":"text-(--neba-fg)",j?.label),children:f}):null,m?e(i.Description,{className:t(d[s],"text-(--neba-muted-fg)",j?.description),children:m}):null,e(l,{ref:o,disabled:w,readOnly:N,className:t("flex","horizontal"===b?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",j?.control),...R,children:z}),e(i.Error,$?{match:!0,className:t(d[s],"text-(--n-accent)",j?.error),children:h}:{className:t(d[s],"text-(--n-accent)",j?.error)})]})})});
|
|
@@ -49,7 +49,10 @@ export interface RatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
|
|
|
49
49
|
readOnly?: boolean;
|
|
50
50
|
/** Unavailable. Drops the colour family for neutral grey. */
|
|
51
51
|
disabled?: boolean;
|
|
52
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* Identifies the value when a form is submitted. Without one a Rating
|
|
54
|
+
* submits nothing, and `required` has nothing to hold back.
|
|
55
|
+
*/
|
|
53
56
|
name?: string;
|
|
54
57
|
/** A form will not submit until a star has been chosen. */
|
|
55
58
|
required?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as r}from"../../internal/icons.js";import{fillMessage as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{StarIcon as t,StarOutlineIcon as r}from"../../internal/icons.js";import{fillMessage as i,ratingMessages as l,useMessages as o}from"../../internal/i18n.js";import{controlSlots as s,cx as d,focusWithinRingClasses as m,gapClasses as c,iconSizeClasses as u,radiusClasses as h,srOnlyClasses as f,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as p}from"../../internal/defaults.js";const v="flex items-center justify-center";export const Rating=/*@__PURE__*/n.forwardRef(function Rating(x,y){const{value:g,defaultValue:j=0,onValueChange:M,count:N=5,precision:w=1,icon:k,emptyIcon:S,clearable:C=!0,readOnly:L=!1,disabled:P=!1,name:q,required:I=!1,size:R="md",color:z="warning",locale:A,label:V,valueLabel:_,className:E,style:F,onPointerLeave:O,...$}=p(x,["size","locale"]),B=o(l,A),D=n.useId(),G=q??D,H=void 0===q?`${D}-no-form`:void 0,[J,K]=n.useState(j),Q=void 0!==g,T=Q?g:J,[U,W]=n.useState(null),X=Math.max(1,Math.floor(N)),Y=w>0&&w<=1?w:1,Z=Math.round(1/Y),ee=Math.max(0,Math.min(X,U??T)),ae=n.useCallback(e=>_?_(e,X):e<=0?B.empty:i(B.value,{value:String(Math.round(10*e)/10),max:String(X)}),[_,X,B]),ne=e=>{Q||K(e),M?.(e)},te=Array.from({length:X},(n,i)=>{const l=Math.max(0,Math.min(1,ee-i));return a("span",{className:d("relative inline-flex shrink-0",u[R],h.xs,L||P?"":m),children:[e("span",{className:[v,u[R],P?"text-(--neba-disabled-fg)":"text-(--n-empty)"].join(" "),children:S??e(r,{})}),e("span",{"aria-hidden":"true",className:d("pointer-events-none absolute inset-y-0 start-0 overflow-hidden","[transition:width_var(--neba-duration)_var(--neba-ease)]"),style:{width:100*l+"%"},children:e("span",{className:[v,u[R],P?"text-(--neba-disabled-fg)":"text-(--n-fill)",b].join(" "),children:k??e(t,{})})}),L?null:Array.from({length:Z},(a,n)=>{const t=Number((i+(n+1)*Y).toFixed(4));return e("label",{className:["absolute inset-y-0",P?"cursor-not-allowed":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Z+"%",width:100/Z+"%"},onPointerEnter:()=>{P||W(t)},children:e("input",{type:"radio",className:f,name:G,form:H,value:t,checked:T===t,disabled:P,required:I,"aria-label":ae(t),onChange:()=>ne(t),onClick:()=>{C&&T===t&&ne(0)}})},t)})]},i)}),re=d("inline-flex items-center align-middle",c[R],P?"cursor-not-allowed":"",E??""),ie={...s(z,0,"solid"),"--n-empty":"color-mix(in oklab, var(--neba-muted-fg) 40%, transparent)",...F};return e("div",L?{ref:y,role:"img","aria-label":ae(Math.max(0,Math.min(X,T))),className:re,style:ie,onPointerLeave:O,...$,children:te}:{ref:y,role:"radiogroup","aria-label":V??B.label,"aria-disabled":P||void 0,"aria-required":I||void 0,className:re,style:ie,onPointerLeave:e=>{W(null),O?.(e)},...$,children:te})});
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type ReasoningMessages } from '../../internal/i18n.js';
|
|
3
|
+
import type { NebaElevation, NebaSlots, NebaStyleProps } from '../../types.js';
|
|
4
|
+
/** The two parts a Reasoning draws behind its root: the header, and the panel. */
|
|
5
|
+
export type ReasoningSlot = 'header' | 'body';
|
|
6
|
+
export interface ReasoningProps extends Pick<NebaStyleProps, 'size' | 'variant' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
|
|
7
|
+
/**
|
|
8
|
+
* Whether the thinking is still arriving. It is what the header says, what
|
|
9
|
+
* the mark does, and — unless `autoOpen` is off — whether the panel is open.
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
streaming?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* How long the thinking took, in milliseconds.
|
|
15
|
+
*
|
|
16
|
+
* Left out, the panel counts its own from the moment `streaming` went true
|
|
17
|
+
* and keeps the last figure once it stops — which is where "Thought for 4s"
|
|
18
|
+
* comes from. A stretch shorter than a second never gets a number, and the
|
|
19
|
+
* header says so in words instead.
|
|
20
|
+
*/
|
|
21
|
+
duration?: number;
|
|
22
|
+
/** Whether the panel is showing. Pass it to drive the disclosure yourself. */
|
|
23
|
+
open?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Where an uncontrolled Reasoning starts, before any stream has run.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
defaultOpen?: boolean;
|
|
29
|
+
/** Called when the header, or the stream, opens or closes the panel. */
|
|
30
|
+
onOpenChange?: (open: boolean) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Opens the panel while the stream runs and closes it when the stream ends.
|
|
33
|
+
*
|
|
34
|
+
* On, because that is the whole difference between this and a
|
|
35
|
+
* [Collapsible](../surfaces/collapsible): the reader can watch the thinking
|
|
36
|
+
* as it arrives without asking for it, and is left with a one-line summary
|
|
37
|
+
* rather than a wall of it. Turn it off for a panel that should stay where
|
|
38
|
+
* the reader put it.
|
|
39
|
+
* @default true
|
|
40
|
+
*/
|
|
41
|
+
autoOpen?: boolean;
|
|
42
|
+
/** Replaces what the header says. Otherwise it is the `locale`'s sentence. */
|
|
43
|
+
label?: React.ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* The mark at the start. Defaults to the turning ring while the stream runs
|
|
46
|
+
* and nothing after it; pass `false` to drop it, or a node to replace it.
|
|
47
|
+
*/
|
|
48
|
+
icon?: React.ReactNode | false;
|
|
49
|
+
/**
|
|
50
|
+
* Drop shadow depth. `0` (the default) is flat.
|
|
51
|
+
* @default 0
|
|
52
|
+
*/
|
|
53
|
+
elevation?: NebaElevation;
|
|
54
|
+
/** Which language the header's own sentence is written in, as a BCP 47 tag. */
|
|
55
|
+
locale?: string;
|
|
56
|
+
/** Those sentences, written out. Overrides the `locale`'s. */
|
|
57
|
+
labels?: Partial<ReasoningMessages>;
|
|
58
|
+
/** Class names for the parts behind the root. */
|
|
59
|
+
classNames?: NebaSlots<ReasoningSlot>;
|
|
60
|
+
/** The thinking. */
|
|
61
|
+
children?: React.ReactNode;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* A thinking panel that the stream opens and closes.
|
|
65
|
+
*
|
|
66
|
+
* On a [Spoiler](../surfaces/spoiler) and a
|
|
67
|
+
* [Collapsible](../surfaces/collapsible) the reader owns the open state: they
|
|
68
|
+
* covered it, they uncover it. Here the stream owns it — the panel opens as the
|
|
69
|
+
* thinking starts arriving, stays open while the reader can follow it, and
|
|
70
|
+
* folds itself away into one line when it stops. What is left behind is a
|
|
71
|
+
* record that it happened and how long it took, which is what a reader wants
|
|
72
|
+
* from reasoning they did not need to read.
|
|
73
|
+
*
|
|
74
|
+
* The panel is deliberately **not** a live region. Thinking is long, it is
|
|
75
|
+
* revised as it arrives, and a screen reader reading every revision aloud would
|
|
76
|
+
* bury the answer it is on the way to.
|
|
77
|
+
*/
|
|
78
|
+
export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +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 o,boxPaddingYClasses as r}from"../box/Box.js";import{ChevronIcon as l,SpinnerIcon as s}from"../../internal/icons.js";import{formatDuration as i,useElapsed as c}from"../../internal/run.js";import{fillMessage as d,reasoningMessages as m,useMessages as f}from"../../internal/i18n.js";import{collapsiblePanelClasses as p,cx as u,gapClasses as b,hasContent as h,iconClasses as v,radiusClasses as x,sheetBodyClasses as g,sheetTitleClasses as j,surfaceClasses as N,surfaceSlots as y,transitionClasses as w}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const R={solid:[N,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[N,"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 Reasoning=/*@__PURE__*/a.forwardRef(function Reasoning(N,_){const{variant:k="text",size:C="md",color:z="secondary",density:S="default",elevation:B=0,streaming:P=!1,duration:T,open:q,defaultOpen:A=!1,onOpenChange:D,autoOpen:E=!0,label:F,icon:G,locale:H,labels:I,classNames:J,className:K,style:L,children:M,...Q}=O(N,["size","density","variant","locale"]),U={...f(m,H),...I},[V,W]=a.useState(A||E&&P),[X,Y]=a.useState(P),Z=void 0!==q,$=Z?q:V;X!==P&&(Y(P),E&&!Z&&W(P));const ee=c(P,T),ne=null===ee?null:i(ee,H),ae=h(F)?F:P?U.thinking:null===ne?U.done:d(U.thought,{duration:ne}),te=void 0===G?P?e(s,{}):null:G;return n(t.Root,{ref:_,open:$,onOpenChange:e=>{Z||W(e),D?.(e)},"aria-busy":P||void 0,"data-streaming":P||void 0,className:u("flex flex-col overflow-hidden",x[C],R[k],w,v,K??""),style:{...y(z,B),...L},...Q,children:[n(t.Trigger,{className:u("flex w-full cursor-pointer items-center text-start text-(--neba-muted-fg)",o[S][C],r[S][C],b[C],j[C],w,"hover:bg-(--n-soft) hover:text-(--n-on-tint)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",J?.header??""),children:[h(te)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:te}):null,e("span",{className:"min-w-0 flex-1 truncate font-medium",children:ae}),e("span",{className:["flex h-[1lh] shrink-0 items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(l,{})})]}),e(t.Panel,{className:p,children:e("div",{className:u("min-w-0 border-s-2 text-(--neba-muted-fg) [border-color:var(--n-line)]",o[S][C],"compact"===S?"pb-2":"pb-4",g[C],J?.body??""),children:M})})]})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Reasoning}from"./Reasoning.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as i,formatCategory as s,markerRadii as o,markGap as n,markPath as c,markShapes as u,plotHeights as d,pointX as m}from"../../internal/chart.js";import{numberFormatter as h}from"../../internal/format.js";import{chartMessages as f,useMessages as p}from"../../internal/i18n.js";import{cx as x,srOnlyClasses as b}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";export function ScatterChart(r){const{shape:l="auto",pointRadius:s,maxRadius:n,series:h,categories:f,size:p="md",xAxis:x,...b}=v(r,["size","locale"]),g=s??o[p],z=n??Math.max(g+2,("number"==typeof b.height?b.height:d[p])/12),j=h.reduce((e,r)=>r.color?e:e+1,0),k="auto"===l||"varied"===l?"circle":l,M="varied"===l||"auto"===l&&j>3,S=t.useCallback(e=>M?u[e%u.length]:k,[M,k]),$=t.useCallback(e=>{const r=[];let t=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(t=Math.max(t,e.z))})}),e.values.forEach((a,l)=>{e.visible[l]&&a.forEach((a,s)=>{if(null===a.value)return;const o=m(a,s,f);null!==o&&r.push({series:l,index:s,x:e.categoryValuePx(o),y:e.valuePx(a.value),r:void 0===a.z?g:i(a.z,t,z,2)})})}),r},[f,g,z]);return e(a,{...b,series:h,categories:f,size:p,xScale:"value",xAxis:x,marks:$,markInset:z,includeZero:!1,swatch:(r,t)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:c(S(r),5,5,4),fill:t})}),table:(r,t)=>e(y,{id:r,series:h,categories:f,label:b.label,xLabel:x?.label,yLabel:b.yAxis?.label,locale:b.locale,format:t}),children:r=>e(ScatterMarks,{context:r,shapeOf:S})})}function ScatterMarks({context:r,shapeOf:a}){const{marks:i,values:s,colors:o,hovered:u,activeMark:d}=r,m=t.useMemo(()=>[...i].sort((e,r)=>r.r-e.r),[i]);return e("g",{children:m.map(r=>{const t=s[r.series]?.[r.index],i=null!==u&&u!==r.series,m=d?.series===r.series&&d?.index===r.index;return e("path",{d:c(a(r.series),r.x,r.y,r.r),fill:t?.color??o[r.series],stroke:"var(--neba-chart-gap)",strokeWidth:n,opacity:i?.28:1,className:l,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:String(m&&r.r>0?(r.r+1)/r.r:1)}},`${r.series}-${r.index}`)})})}const y=/*@__PURE__*/t.memo(function ScatterTable({id:t,series:a,categories:l,label:i,xLabel:o,yLabel:n,locale:c,format:u}){const d=p(f,c),m=a.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:t,className:x(b),children:[i?e("caption",{children:i}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:o??"x"}),e("th",{scope:"col",children:n??"y"}),m?e("th",{scope:"col",children:d.size}):null]})}),e("tbody",{children:a.flatMap((t,a)=>t.data.map((i,o)=>{const n="object"==typeof i&&null!==i?i:null,d=n?n.y:"number"==typeof i?i:null,f=n?.x??l?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:t.name??a+1}),e("td",{children:"number"==typeof f?h(c,{}).format(f):s(f,c)}),e("td",{children:null!==d&&Number.isFinite(d)?u(d):""}),m?e("td",{children:void 0===n?.z?"":h(c,{}).format(n.z)}):null]},`${a}-${o}`)}))})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,
|
|
1
|
+
"use client";import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{ScrollArea as n}from"@base-ui/react/scroll-area";import{cx as o,toLength as l}from"../../internal/styles.js";import{useStyleDefaults as t}from"../../internal/defaults.js";const i={xs:"0.25rem",sm:"0.3125rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"},s={xs:"1rem",sm:"1.25rem",md:"1.5rem",lg:"2rem",xl:"2.5rem"},c=["flex touch-none select-none rounded-full p-px","bg-transparent hover:bg-(--n-soft)","opacity-0 transition-[opacity,background-color] duration-(--neba-duration) ease-(--neba-ease)","data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0"].join(" "),m="flex-1 rounded-full bg-(--n-thumb) hover:bg-(--n-thumb-hover)";export const ScrollArea=/*@__PURE__*/a.forwardRef(function ScrollArea(a,h){const{orientation:d="vertical",height:u,maxHeight:b,size:f="md",color:g="primary",fade:p=!1,className:x,style:v,children:y,...N}=t(a,["size"]),j="vertical"===d||"both"===d,w="horizontal"===d||"both"===d;return e(n.Root,{ref:h,className:o("relative overflow-hidden",x??""),style:{"--n-soft":`var(--neba-${g}-soft)`,"--n-ring":`var(--neba-${g}-ring)`,"--n-thumb":`color-mix(in oklab, var(--neba-${g}-accent) 35%, transparent)`,"--n-thumb-hover":`color-mix(in oklab, var(--neba-${g}-accent) 55%, transparent)`,"--n-rail":i[f],"--n-fade":s[f],height:l(u),maxHeight:l(b),...v},...N,children:[r(n.Viewport,{style:{height:"100%",width:"100%",maxHeight:"inherit"},className:o("overscroll-contain","[outline:0_solid_var(--n-ring)] outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]",p?"neba-scroll-fade":""),children:r(n.Content,{className:"min-w-full",children:y})}),j?r(n.Scrollbar,{orientation:"vertical",className:`${c} w-(--n-rail) [margin-block:2px]`,children:r(n.Thumb,{className:m})}):null,w?r(n.Scrollbar,{orientation:"horizontal",className:`${c} h-(--n-rail) [margin-inline:2px]`,children:r(n.Thumb,{className:m})}):null,j&&w?r(n.Corner,{}):null]})});
|
|
@@ -124,6 +124,16 @@ export interface ScrollZoneProps extends NebaStyleProps, Omit<React.ComponentPro
|
|
|
124
124
|
/** Overrides the buttons' own names. */
|
|
125
125
|
previousLabel?: string;
|
|
126
126
|
nextLabel?: string;
|
|
127
|
+
/**
|
|
128
|
+
* A ref to the box that scrolls. `ref` is the root, which also holds the
|
|
129
|
+
* buttons, so this is the one to read or restore a scroll position through.
|
|
130
|
+
*/
|
|
131
|
+
scrollerRef?: React.Ref<HTMLDivElement>;
|
|
132
|
+
/**
|
|
133
|
+
* Called when the strip scrolls. It is the scrolling box's event rather than
|
|
134
|
+
* the root's, because a scroll does not bubble.
|
|
135
|
+
*/
|
|
136
|
+
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
127
137
|
/** What is being laid out. Every top-level child is one item of the strip. */
|
|
128
138
|
children?: React.ReactNode;
|
|
129
139
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{scrollMessages as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{IconButton as r}from"../icon-button/IconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{scrollMessages as l,useMessages as s}from"../../internal/i18n.js";import{ChevronIcon as i}from"../../internal/icons.js";import{queryMatches as a,reducedMotionQuery as c}from"../../internal/media.js";import{observeResize as u}from"../../internal/observe.js";import{cx as d}from"../../internal/styles.js";import{bindAxisWheel as f}from"../../internal/wheel.js";import{useStyleDefaults as m}from"../../internal/defaults.js";const p={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},b={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const ScrollZone=/*@__PURE__*/n.forwardRef(function ScrollZone(v,w){const{orientation:g="horizontal",lines:y=1,spacing:h=2,buttons:x="auto",buttonPlacement:k="inline",mode:E="item",step:L=1,speed:C=900,snap:j=!1,drag:P=!0,wheel:R=!1,scrollbar:S=!1,variant:T="solid",size:N="md",color:A="primary",density:M="default",locale:D,label:z,previousLabel:B,nextLabel:F,scrollerRef:W,onScroll:H,className:I,style:$,children:q,...X}=m(v,["size","density","variant","locale"]),Y=s(l,D),Z="horizontal"===g,_=Math.max(1,Math.round(y)),K=Math.max(1,Math.round(L)),V=n.useRef(null),G=n.useRef(null),J=n.useCallback(e=>{V.current=e,"function"==typeof W?W(e):W&&(W.current=e)},[W]),[O,Q]=n.useState({back:!1,forward:!1}),[U,ee]=n.useState(null),te=n.useCallback(()=>{const e=V.current;if(!e)return;const t=Z?e.clientWidth:e.clientHeight,n=Z?e.scrollWidth:e.scrollHeight,r=Math.abs(Z?e.scrollLeft:e.scrollTop);Q(e=>{const o=r>1,l=n-t-r>1;return e.back===o&&e.forward===l?e:{back:o,forward:l}})},[Z]);n.useEffect(()=>{const e=V.current,t=G.current;if(!e)return;te();const n=[u(e,te),t?u(t,te):null];return()=>{for(const e of n)e?.()}},[te]);const ne=n.useCallback(()=>{const e=V.current;return e&&Z&&"rtl"===getComputedStyle(e).direction?-1:1},[Z]),re=n.useCallback((e,t)=>{const n=V.current;if(!n)return;const r=t?a(c)?"auto":"smooth":"auto";n.scrollBy(Z?{left:e,behavior:r}:{top:e,behavior:r})},[Z]),oe=n.useCallback(()=>{const e=V.current,t=G.current;if(!e||!t)return[];const n=Z&&"rtl"===getComputedStyle(e).direction,r=Z?n?"right":"left":"top",o=n?-1:1,l=e.getBoundingClientRect()[r],s=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-l)*o);s.includes(t)||s.push(t)}return s.sort((e,t)=>e-t)},[Z]),le=n.useCallback((e,t=E)=>{const n=V.current;if(!n)return;const r=ne(),o=Z?n.clientWidth:n.clientHeight;if("page"===t)return void re(o*(e?1:-1)*r,!0);const l=oe(),s=l.filter(e=>e>1),i=l.filter(e=>e<-1),a=e?s[K-1]:i[i.length-K];re(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ne,Z,oe,K,E,re]),se=n.useRef(null);n.useEffect(()=>()=>se.current?.(),[]);const ie=n.useCallback((e,t)=>{if(se.current)return;const n=ne(),r=performance.now();let o=r,l=0;const s=t=>{const r=t-o;o=t,re(C*r/1e3*(e?1:-1)*n,!1),l=requestAnimationFrame(s)};l=requestAnimationFrame(s);const i=()=>{cancelAnimationFrame(l),se.current=null,window.removeEventListener(t,i),window.removeEventListener("pointercancel",i),window.removeEventListener("blur",i),performance.now()-r<140&&le(e,"item")};se.current=i,window.addEventListener(t,i),window.addEventListener("pointercancel",i),window.addEventListener("blur",i)},[le,ne,re,C]),ae=n.useRef(null);function ce(e){return"hold"!==E?{onClick:()=>le(e)}:{onPointerDown:t=>{0===t.button&&ie(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),ie(e,"keyup"))}}}n.useEffect(()=>()=>ae.current?.(),[]),n.useEffect(()=>{const e=V.current;if(e&&R&&Z)return f(e)},[Z,R]);const ue="none"!==x&&("always"===x||O.back||O.forward),de="inline"===k;function fe(t){const n=t?O.forward:O.back,o=t?"forward":"back";if("auto"===x&&!n&&!de&&U!==o)return e("span",{});const l=Z?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180",s=e(r,{variant:T,size:N,color:A,density:M,elevation:1,label:t?F??Y.next:B??Y.previous,disabled:!n,focusableWhenDisabled:!0,onFocus:()=>ee(o),onBlur:()=>ee(e=>e===o?null:e),className:"pointer-events-auto",icon:e("span",{className:d("flex items-center",l),children:e(i,{})}),...ce(t)});return de?e("span",{className:"flex shrink-0 items-center justify-center",children:s}):s}return t("div",{ref:w,className:d("relative flex min-w-0",de&&Z?"flex-row items-stretch":"flex-col",de?b[N]:"",I),style:{"--n-ring":`var(--neba-${A}-ring)`,...$},...X,children:[ue&&de?fe(!1):null,e("div",{ref:J,tabIndex:0,role:"group","aria-label":z??Y.label,className:d("min-h-0 min-w-0 grow",Z?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden","overscroll-contain",j?Z?"snap-x snap-mandatory":"snap-y snap-mandatory":"",S?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",P&&(O.back||O.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"),onScroll:e=>{te(),H?.(e)},onPointerDown:function(e){if(!P||"touch"===e.pointerType||0!==e.button)return;ae.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,l=t.scrollTop;let s=!1;const i=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const i=e.clientX-n,a=e.clientY-r;if(!s){if(Math.abs(Z?i:a)<4)return;s=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none"),j&&(t.style.scrollSnapType="none")}Z?t.scrollLeft=o-i:t.scrollTop=l-a},c=()=>{ae.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,t.style.removeProperty("scroll-snap-type"),i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=s;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};ae.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:G,className:d(j?"[&>*]:snap-start":""),style:{display:"grid",gap:o(h),gridAutoFlow:Z?"column":"row",...Z?{width:"max-content",gridTemplateRows:`repeat(${_}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${_}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:q})}),ue&&de?fe(!0):null,ue&&!de?t("div",{className:d("pointer-events-none absolute inset-0 flex justify-between",Z?"items-center":"flex-col items-center",p[N]),children:[fe(!1),fe(!0)]}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{glowClasses as n,trackPointer as r}from"../../internal/glow.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{observeResize as l}from"../../internal/observe.js";import{controlHeightClasses as i,controlSlots as d,controlTextClasses as u,cx as f,gapClasses as c,hasContent as b,iconClasses as p,paddingXClasses as h,surfaceClasses as m,transitionClasses as g}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const x=/*@__PURE__*/a.createContext({variant:"outline",size:"md",density:"default",fullWidth:!1,disabled:!1}),y={solid:`${m} bg-(--n-panel) p-1 [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,outline:`${m} border bg-(--n-panel) p-1 [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)]`,text:""},w={solid:"bg-transparent p-1",outline:"border bg-transparent p-1 [border-color:var(--neba-disabled-border)]",text:""},j={solid:`${m} bg-(--n-fill) [box-shadow:var(--neba-shadow-1),var(--neba-plate-solid)]`,outline:`${m} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,text:`${m} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`},k="data-[off]:bg-(--neba-disabled-bg) data-[off]:[box-shadow:none]",$={solid:"data-[checked]:text-(--n-on-solid)",outline:"data-[checked]:text-(--n-on-tint)",text:"data-[checked]:text-(--n-on-tint)"};export const Segment=/*@__PURE__*/a.forwardRef(function Segment({value:s,startIcon:l,endIcon:d,disabled:m=!1,className:v,children:y,...w},j){const k=a.useContext(x),{variant:N,size:P,density:R,fullWidth:z}=k,A=m||k.disabled;return t(o.Root,{ref:j,value:s,disabled:m,"data-segment":"",className:f("relative z-10 inline-flex shrink-0 items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",i[P],u[P],c[P],h[R][P],"rounded-full",g,p,A?"cursor-not-allowed text-(--neba-disabled-fg)":f("cursor-pointer text-(--neba-muted-fg) hover:text-(--neba-fg)",$[N],n),"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[readonly]:cursor-default",z?"flex-1":"",v??""),...w,onPointerMove:r(w.onPointerMove,!A),children:[b(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,y,b(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null]})});export const SegmentedButton=/*@__PURE__*/a.forwardRef(function SegmentedButton(n,r){const{variant:o="outline",size:i="md",color:u="primary",density:f="default",elevation:c=0,value:b,defaultValue:p=null,onValueChange:h,disabled:m=!1,readOnly:$=!1,name:N,fullWidth:P=!1,className:R,style:z,children:A,...S}=v(n,["size","density","variant"]),[W,C]=a.useState(p),B=void 0!==b,M=B?b:W,V=a.useRef(null),E=a.useRef(null),I=a.useCallback(e=>{const t=V.current,a=E.current;if(!t||!a)return;const n=t.querySelector("[data-segment][data-checked]");if(a.hidden=!n,!n)return void a.removeAttribute("data-ready");a.toggleAttribute("data-off",n.hasAttribute("data-disabled"));const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--n-seg-x",`${n.offsetLeft}px`),a.style.setProperty("--n-seg-y",`${n.offsetTop}px`),a.style.setProperty("--n-seg-w",`${n.offsetWidth}px`),a.style.setProperty("--n-seg-h",`${n.offsetHeight}px`),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);a.useLayoutEffect(()=>{I(!0)},[I,M,o,i,f,P,m,A]),a.useEffect(()=>{const e=V.current;if(e)return l(e,()=>I(!1))},[I]);const L=a.useMemo(()=>({variant:o,size:i,density:f,fullWidth:P,disabled:m}),[o,i,f,P,m]);return e(x.Provider,{value:L,children:t(s,{ref:e=>{V.current=e,"function"==typeof r?r(e):r&&(r.current=e)},value:M,onValueChange:e=>{const t=e??null;B||C(t),h?.(t)},disabled:m,readOnly:$,name:N,className:["relative items-center rounded-full",m?w[o]:y[o],g,$?"[filter:saturate(0.55)]":"",P?"flex w-full":"inline-flex",R??""].filter(Boolean).join(" "),style:{...d(u,c,o),...z},...S,children:[null!=M?e("span",{ref:E,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","left-(--n-seg-x) top-(--n-seg-y) h-(--n-seg-h) w-(--n-seg-w)",j[o],k,"[transition-property:left,top,width,height]","[transition-timing-function:var(--neba-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--neba-duration)]"].join(" ")}):null,A]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Select as t}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlTextLeadingClasses as o,cx as d,disabledClasses as c,fieldFocusTransitionClasses as m,fieldHeightClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,fieldRingClasses as b,gapClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as N,popupFadeClasses as j,radiusClasses as y,stackGapClasses as w,surfaceClasses as I,surfaceSlots as S,transitionClasses as $}from"../../internal/styles.js";import{useStyleDefaults as z}from"../../internal/defaults.js";import{spotlightSlot as V,glowClasses as k,trackPointer as M}from"../../internal/glow.js";import{useFieldsetDisabled as P}from"../../internal/fieldset.js";const O=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",$,m,b,v].join(" "),R=[I,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-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]",j].join(" "),T=["py-1.5 pe-2 ps-7 font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),q=["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-on-tint)","data-[selected]:text-(--n-on-tint) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/l.forwardRef(function Select(m,b){const{variant:v="outline",size:j="md",color:I="primary",density:$="default",elevation:C=0,items:G,value:L,defaultValue:W,onValueChange:_,placeholder:D,label:E,description:A,error:B,invalid:F,startIcon:H,fullWidth:J=!1,disabled:K,readOnly:Q=!1,required:U=!1,name:X,id:Y,className:Z,classNames:ee,style:ae,"aria-label":le,"aria-labelledby":te,...ne}=z(m,["size","density","variant"]),re=P(K),ie=!re&&!Q,se=null!=B&&!1!==B&&""!==B,oe=F??se,de=oe?"danger":I,ce=l.useMemo(()=>G.map(e=>({label:e.label??String(e.value),value:e.value})),[G]),me=l.useMemo(()=>function(e){const a=[];for(const l of e){const e=a.at(-1);e&&e.label===l.group?e.items.push(l):a.push({label:l.group,items:[l]})}return a}(G),[G]),ue=l.useMemo(()=>[...G.map(e=>e.label??String(e.value)),...g(D)?[D]:[]],[G,D]);return a(n.Root,{disabled:re,invalid:oe,className:d("flex-col align-top",w[j],J?"flex w-full":"inline-flex",Z??""),style:{...S(de,C),...ie?V:void 0,...ae},...ne,children:[E?e(n.Label,{className:d(x[j],"font-medium",re?"text-(--neba-disabled-fg)":"text-(--neba-fg)",ee?.label),children:E}):null,a(t.Root,{id:Y,name:X,items:ce,value:L,defaultValue:W,onValueChange:e=>_?.(e),disabled:re,readOnly:Q,required:U,children:[a(t.Trigger,{ref:b,onPointerMove:M(void 0,ie),"aria-label":le,"aria-labelledby":te,className:d(O,u[j],o[j],y[j],h[j],N[$][j],re?c[v]:Q?`${p[v]} cursor-default`:`${f[v]} ${k}`,ee?.control),children:[H?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:H}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(t.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:D}),e(s,{samples:ue})]}),e(t.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(t.Popup,{className:d(R,y[j],o[j],ee?.popup),style:S(de,3),children:me.map((l,n)=>{const i=l.items.map(l=>a(t.Item,{value:l.value,disabled:l.disabled,className:d(q,ee?.item),children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(t.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)));return void 0===l.label?i:a(t.Group,{children:[e(t.GroupLabel,{className:`${T} ${x[j]}`,children:l.label}),i]},`${l.label}-${n}`)})})})})]}),A?e(n.Description,{className:d(x[j],"text-(--neba-muted-fg)",ee?.description),children:A}):null,e(n.Error,se?{match:!0,className:d(x[j],"text-(--n-accent)",ee?.error),children:B}:{className:d(x[j],"text-(--n-accent)",ee?.error)})]})});
|