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
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ReactComponentImplementation } from '@a2ui/react/v0_9';
|
|
2
|
+
export declare const A2uiFlex: ReactComponentImplementation;
|
|
3
|
+
export declare const A2uiCard: ReactComponentImplementation;
|
|
4
|
+
export declare const A2uiDivider: ReactComponentImplementation;
|
|
5
|
+
export declare const A2uiAlert: ReactComponentImplementation;
|
|
6
|
+
export declare const A2uiTypography: ReactComponentImplementation;
|
|
7
|
+
export declare const A2uiImage: ReactComponentImplementation;
|
|
8
|
+
export declare const A2uiChip: ReactComponentImplementation;
|
|
9
|
+
export declare const A2uiAvatar: ReactComponentImplementation;
|
|
10
|
+
export declare const A2uiStatistic: ReactComponentImplementation;
|
|
11
|
+
export declare const A2uiDataList: ReactComponentImplementation;
|
|
12
|
+
export declare const A2uiButton: ReactComponentImplementation;
|
|
13
|
+
export declare const A2uiTextField: ReactComponentImplementation;
|
|
14
|
+
export declare const A2uiNumberField: ReactComponentImplementation;
|
|
15
|
+
export declare const A2uiCheckbox: ReactComponentImplementation;
|
|
16
|
+
export declare const A2uiSwitch: ReactComponentImplementation;
|
|
17
|
+
export declare const A2uiRadioGroup: ReactComponentImplementation;
|
|
18
|
+
export declare const A2uiSelect: ReactComponentImplementation;
|
|
19
|
+
export declare const A2uiSlider: ReactComponentImplementation;
|
|
20
|
+
/** Every implementation, in the order the catalog lists them. */
|
|
21
|
+
export declare const nebaComponents: ReactComponentImplementation[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,Fragment as i}from"react/jsx-runtime";import*as t from"react";import{createComponentImplementation as r}from"@a2ui/react/v0_9";import{Alert as o}from"../components/alert/Alert.js";import{Avatar as n}from"../components/avatar/Avatar.js";import{Button as l}from"../components/button/Button.js";import{Card as s}from"../components/card/Card.js";import{Checkbox as a}from"../components/checkbox/Checkbox.js";import{Chip as d}from"../components/chip/Chip.js";import{DataList as c,DataListItem as p}from"../components/data-list/DataList.js";import{Divider as u}from"../components/divider/Divider.js";import{Flex as m}from"../components/flex/Flex.js";import{Image as h}from"../components/image/Image.js";import{NumberField as b}from"../components/number-field/NumberField.js";import{Radio as v,RadioGroup as A}from"../components/radio-group/RadioGroup.js";import{Select as x}from"../components/select/Select.js";import{Slider as f}from"../components/slider/Slider.js";import{Statistic as g}from"../components/statistic/Statistic.js";import{Switch as y}from"../components/switch/Switch.js";import{TextField as C}from"../components/text-field/TextField.js";import{Typography as z}from"../components/typography/Typography.js";import j from"./catalog.json"with{type:"json"};import{componentSchema as S}from"./schema.js";function Children({list:r,buildChild:o}){return Array.isArray(r)?e(i,{children:r.map((i,r)=>"string"==typeof i?e(t.Fragment,{children:o(i)},`${i}-${r}`):e(t.Fragment,{children:o(i.id,i.basePath)},`${i.id}-${r}`))}):null}function F(e){return e.validationErrors?.[0]}function k(e,i){const t={name:e,schema:S(e,j.components[e])};return r(t,i)}export const A2uiFlex=k("Flex",({props:i,buildChild:t})=>{const r=i;return e(m,{direction:r.direction,spacing:r.spacing,justifyContent:r.justifyContent,alignItems:r.alignItems,wrap:r.wrap,children:e(Children,{list:r.children,buildChild:t})})});export const A2uiCard=k("Card",({props:i,buildChild:t})=>{const r=i;return e(s,{title:r.title,subtitle:r.subtitle,variant:r.variant,size:r.size,color:r.color,density:r.density,elevation:r.elevation,children:r.child?t(r.child):null})});export const A2uiDivider=k("Divider",({props:i})=>{const t=i;return e(u,{orientation:t.orientation,size:t.size,children:t.label})});export const A2uiAlert=k("Alert",({props:i,buildChild:t})=>{const r=i;return e(o,{title:r.title,color:r.color,variant:r.variant,size:r.size,density:r.density,children:r.child?t(r.child):null})});export const A2uiTypography=k("Typography",({props:i})=>{const t=i;return e(z,{level:t.level,weight:t.weight,align:t.align,color:t.color,lines:t.lines,children:t.text})});export const A2uiImage=k("Image",({props:i})=>{const t=i;return e(h,{src:t.src??"",alt:t.alt??"",ratio:t.ratio,fit:t.fit,rounded:t.rounded})});export const A2uiChip=k("Chip",({props:i})=>{const t=i;return e(d,{variant:t.variant,size:t.size,color:t.color,count:t.count,selected:t.selected,children:t.text})});export const A2uiAvatar=k("Avatar",({props:i})=>{const t=i;return e(n,{src:t.src,name:t.name,shape:t.shape,size:t.size,color:t.color})});export const A2uiStatistic=k("Statistic",({props:i})=>{const t=i;return e(g,{label:t.label,value:t.value??"",unit:t.unit,caption:t.caption,previousValue:t.previousValue,delta:t.delta,betterWhen:t.betterWhen,size:t.size,align:t.align})});export const A2uiDataList=k("DataList",({props:i})=>{const t=i;return e(c,{orientation:t.orientation,dividers:t.dividers,size:t.size,density:t.density,children:(t.items??[]).map((i,t)=>e(p,{label:i.label,children:i.value},`${i.label}-${t}`))})});export const A2uiButton=k("Button",({props:i})=>{const t=i;return e(l,{onClick:t.action,variant:t.variant,size:t.size,color:t.color,density:t.density,elevation:t.elevation,loading:t.loading,disabled:t.disabled||!1===t.isValid,fullWidth:t.fullWidth,children:t.text})});export const A2uiTextField=k("TextField",({props:i})=>{const t=i;return e(C,{label:t.label,value:t.value??"",onChange:e=>t.setValue?.(e.target.value),placeholder:t.placeholder,description:t.description,error:F(t),multiline:t.multiline,rows:t.rows,variant:t.variant,size:t.size,color:t.color,density:t.density,required:t.required,disabled:t.disabled,readOnly:t.readOnly,fullWidth:t.fullWidth})});export const A2uiNumberField=k("NumberField",({props:i})=>{const t=i;return e(b,{label:t.label,value:t.value??null,onValueChange:e=>t.setValue?.(e),description:t.description,error:F(t),min:t.min,max:t.max,step:t.step,variant:t.variant,size:t.size,color:t.color,density:t.density,required:t.required,disabled:t.disabled,readOnly:t.readOnly})});export const A2uiCheckbox=k("Checkbox",({props:i})=>{const t=i;return e(a,{label:t.label,checked:t.checked??!1,onCheckedChange:e=>t.setChecked?.(e),description:t.description,error:F(t),size:t.size,color:t.color,required:t.required,disabled:t.disabled})});export const A2uiSwitch=k("Switch",({props:i})=>{const t=i;return e(y,{label:t.label,checked:t.checked??!1,onCheckedChange:e=>t.setChecked?.(e),description:t.description,size:t.size,color:t.color,disabled:t.disabled})});export const A2uiRadioGroup=k("RadioGroup",({props:i})=>{const t=i;return e(A,{label:t.label,value:t.value??null,onValueChange:e=>t.setValue?.(String(e)),description:t.description,error:F(t),orientation:t.orientation,size:t.size,color:t.color,required:t.required,disabled:t.disabled,children:(t.options??[]).map(i=>e(v,{value:i.value,label:i.label??i.value,description:i.description,disabled:i.disabled},i.value))})});export const A2uiSelect=k("Select",({props:i})=>{const t=i;return e(x,{label:t.label,value:t.value??null,onValueChange:e=>t.setValue?.(String(e??"")),placeholder:t.placeholder,items:(t.options??[]).map(e=>({value:e.value,label:e.label,group:e.group,disabled:e.disabled})),description:t.description,error:F(t),variant:t.variant,size:t.size,color:t.color,density:t.density,required:t.required,disabled:t.disabled,fullWidth:t.fullWidth})});export const A2uiSlider=k("Slider",({props:i})=>{const t=i;return e(f,{label:t.label,value:t.value??t.min??0,onValueChange:e=>t.setValue?.(Array.isArray(e)?e[0]:e),min:t.min,max:t.max,step:t.step,description:t.description,size:t.size,color:t.color,disabled:t.disabled})});export const nebaComponents=[A2uiFlex,A2uiCard,A2uiDivider,A2uiTypography,A2uiImage,A2uiChip,A2uiAvatar,A2uiStatistic,A2uiDataList,A2uiAlert,A2uiButton,A2uiTextField,A2uiNumberField,A2uiCheckbox,A2uiSwitch,A2uiRadioGroup,A2uiSelect,A2uiSlider];
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The renderer half of the A2UI support: `neba/a2ui`.
|
|
3
|
+
*
|
|
4
|
+
* `neba/a2ui/catalog.json` is what an agent is handed. This is what draws what
|
|
5
|
+
* the agent writes back — a `Catalog` for `@a2ui/react`'s v0.9 surface, with
|
|
6
|
+
* the eighteen components implemented against this library and the protocol's
|
|
7
|
+
* own fourteen functions.
|
|
8
|
+
*
|
|
9
|
+
* **The three packages it needs are optional peers**, and that is safe here for
|
|
10
|
+
* a reason worth stating, because it is not safe everywhere: this module is not
|
|
11
|
+
* re-exported from `src/index.ts`. A bundler walking `neba` never reaches it,
|
|
12
|
+
* so a project that imports `Button` and has never heard of A2UI resolves
|
|
13
|
+
* nothing new. (`highlight.js` is a real dependency for the opposite reason —
|
|
14
|
+
* `CodeBlock` *is* on the barrel, and an unresolvable specifier there fails the
|
|
15
|
+
* whole build.) Only `import … from 'neba/a2ui'` pulls this in, and anyone
|
|
16
|
+
* writing that line has installed them:
|
|
17
|
+
*
|
|
18
|
+
* ```bash
|
|
19
|
+
* npm install @a2ui/react @a2ui/web_core zod
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* ## Versions
|
|
23
|
+
*
|
|
24
|
+
* The catalog is written against **A2UI v1.0** and `@a2ui/react` 0.11's newest
|
|
25
|
+
* renderer is **v0.9**, so this registers with `@a2ui/react/v0_9`. The eighteen
|
|
26
|
+
* components only use constructs the two versions share, which is what makes
|
|
27
|
+
* the bridge a rename rather than a translation, and the two differences that
|
|
28
|
+
* exist are both harmless: v1.0 moved `accessibility` from the catalog entry to
|
|
29
|
+
* the envelope, which `schema.ts` puts back, and v1.0's `Action` gained a
|
|
30
|
+
* `userMessage` that the v0.9 schema strips rather than rejects.
|
|
31
|
+
*
|
|
32
|
+
* There is no v1.0 React renderer to register with yet. When there is, what
|
|
33
|
+
* changes is this file's import and nothing in `catalog.json`.
|
|
34
|
+
*/
|
|
35
|
+
import { Catalog, type FunctionImplementation } from '@a2ui/web_core/v0_9';
|
|
36
|
+
import { nebaComponents } from './components.js';
|
|
37
|
+
export { nebaComponents } from './components.js';
|
|
38
|
+
export { componentSchema, type CatalogSchema } from './schema.js';
|
|
39
|
+
/**
|
|
40
|
+
* The catalog, ready to hand to a `MessageProcessor`.
|
|
41
|
+
*
|
|
42
|
+
* A function rather than a constant, because building it evaluates eighteen Zod
|
|
43
|
+
* schemas and a project that never renders a surface should not pay for that on
|
|
44
|
+
* import. Call it once and keep what it gives you: a `Catalog` is immutable and
|
|
45
|
+
* the `MessageProcessor` holds on to it.
|
|
46
|
+
*
|
|
47
|
+
* ```tsx
|
|
48
|
+
* import { MessageProcessor } from '@a2ui/web_core/v0_9';
|
|
49
|
+
* import { A2uiSurface } from '@a2ui/react/v0_9';
|
|
50
|
+
* import { createNebaCatalog } from 'neba/a2ui';
|
|
51
|
+
*
|
|
52
|
+
* const catalog = createNebaCatalog();
|
|
53
|
+
* const processor = new MessageProcessor([catalog]);
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* The `catalogId` is the one in `catalog.json`, which is also the URL the file
|
|
57
|
+
* is served from — so the id a surface names and the schema an agent was given
|
|
58
|
+
* are the same string without anybody having to keep them in step.
|
|
59
|
+
*/
|
|
60
|
+
export declare function createNebaCatalog(): Catalog<(typeof nebaComponents)[number], FunctionImplementation>;
|
|
61
|
+
/** The catalog's own id, for a `createSurface` message written by hand. */
|
|
62
|
+
export declare const nebaCatalogId: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Catalog as o}from"@a2ui/web_core/v0_9";import{BASIC_FUNCTIONS as e}from"@a2ui/web_core/v0_9";import t from"./catalog.json"with{type:"json"};import{nebaComponents as n}from"./components.js";export{nebaComponents}from"./components.js";export{componentSchema}from"./schema.js";export function createNebaCatalog(){return new o(t.catalogId,n,function(){const o=new Set(Object.keys(t.functions)),n=e.filter(e=>o.has(e.name));if(n.length!==o.size){const t=[...o].filter(o=>!e.some(e=>e.name===o));throw new Error(`neba/a2ui: the catalog declares ${t.join(", ")}, which @a2ui/web_core does not implement`)}return n}())}export const nebaCatalogId=t.catalogId;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The catalog's JSON Schema, as the Zod the renderer wants.
|
|
3
|
+
*
|
|
4
|
+
* `catalog.json` is what an **agent** is handed; a `ComponentApi` carries a Zod
|
|
5
|
+
* schema, which is what the **renderer** binds and validates against. Writing
|
|
6
|
+
* both by hand is writing the eighteen components twice, and the copy that
|
|
7
|
+
* drifts is the one the agent was never told about — a model writing exactly
|
|
8
|
+
* what the JSON allows, and a renderer rejecting it. So the JSON is the source
|
|
9
|
+
* and this is the derivation.
|
|
10
|
+
*
|
|
11
|
+
* It handles the subset `catalog.json` actually uses and nothing more. That is
|
|
12
|
+
* deliberate: a general JSON-Schema-to-Zod converter is a dependency, and a
|
|
13
|
+
* partial one that quietly returns `z.any()` for a construct it has not met is
|
|
14
|
+
* how a prop stops being validated without anybody noticing. Anything
|
|
15
|
+
* unrecognised throws, and `test/package/a2ui.test.ts` converts every component
|
|
16
|
+
* in the catalog so the throw happens here rather than in someone's renderer.
|
|
17
|
+
*
|
|
18
|
+
* The `$ref`s are the load-bearing part. `componentId()` and `childList()` are
|
|
19
|
+
* not decoration over `z.string()`: the node layer reads a marker off those
|
|
20
|
+
* schemas to work out which props are child references, so a `Card.child` built
|
|
21
|
+
* from a bare string is a card that never resolves its child.
|
|
22
|
+
*/
|
|
23
|
+
import { z } from 'zod';
|
|
24
|
+
/** As much of JSON Schema as the catalog is written in. */
|
|
25
|
+
export interface CatalogSchema {
|
|
26
|
+
$ref?: string;
|
|
27
|
+
type?: string;
|
|
28
|
+
enum?: readonly string[];
|
|
29
|
+
const?: string;
|
|
30
|
+
default?: unknown;
|
|
31
|
+
description?: string;
|
|
32
|
+
properties?: Record<string, CatalogSchema>;
|
|
33
|
+
required?: readonly string[];
|
|
34
|
+
items?: CatalogSchema;
|
|
35
|
+
allOf?: readonly CatalogSchema[];
|
|
36
|
+
minimum?: number;
|
|
37
|
+
additionalProperties?: boolean;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* One component's entry, as the schema a `ComponentApi` carries.
|
|
41
|
+
*
|
|
42
|
+
* `accessibility` is added rather than read, because v1.0 moved it out of the
|
|
43
|
+
* catalog and into the envelope while the renderer this adapter registers with
|
|
44
|
+
* still expects a component to declare it. It is the one place the two versions
|
|
45
|
+
* are bridged rather than mapped.
|
|
46
|
+
*/
|
|
47
|
+
export declare function componentSchema(name: string, definition: CatalogSchema): z.ZodTypeAny;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{z as e}from"zod";import{childList as t,CommonSchemas as r,componentId as o}from"@a2ui/web_core/v0_9";const n="https://a2ui.org/specification/v1_0/common_types.json#/$defs/",i={Action:()=>r.Action,Child:()=>o(),ChildList:()=>t(),DynamicBoolean:()=>r.DynamicBoolean,DynamicNumber:()=>r.DynamicNumber,DynamicString:()=>r.DynamicString};function a(t,r){if(t.$ref){const e=t.$ref.startsWith(n)?t.$ref.slice(61):"",o=i[e];if(!o)throw new Error(`a2ui: ${r} refers to ${t.$ref}, which this adapter does not know`);return o()}if(t.enum)return e.enum(t.enum);switch(t.type){case"string":return e.string();case"number":case"integer":return e.number();case"boolean":return e.boolean();case"array":if(!t.items)throw new Error(`a2ui: ${r} is an array with no items`);return e.array(a(t.items,`${r}[]`));case"object":return c(t,r);default:throw new Error(`a2ui: ${r} has a type this adapter does not know`)}}function c(t,r){const o=new Set(t.required??[]),n={};for(const[e,i]of Object.entries(t.properties??{})){if("component"===e)continue;const t=a(i,`${r}.${e}`);n[e]=void 0===i.default?o.has(e)?t:t.optional():t.default(i.default).optional()}return e.object(n)}export function componentSchema(t,o){const i=o.allOf??[o];let a=e.object({accessibility:r.AccessibilityAttributes.optional()});for(const e of i)if(e.$ref!==`${n}Checkable`){if(e.$ref)throw new Error(`a2ui: ${t} is composed with ${e.$ref}, which this adapter cannot merge`);a=a.merge(c(e,t))}else a=a.merge(r.Checkable);return a}
|
|
@@ -46,7 +46,11 @@ export interface AccordionProps extends NebaStyleProps, Omit<React.ComponentProp
|
|
|
46
46
|
/**
|
|
47
47
|
* Keeps closed panels in the DOM so the browser's own page search can find and
|
|
48
48
|
* open them. Overrides `keepMounted`.
|
|
49
|
-
*
|
|
49
|
+
*
|
|
50
|
+
* On by default, because a closed answer that is not in the markup is not in
|
|
51
|
+
* a server render either, and a crawler reads the server render. Turn it off
|
|
52
|
+
* for panels that are expensive to build and only need to exist when open.
|
|
53
|
+
* @default true
|
|
50
54
|
*/
|
|
51
55
|
hiddenUntilFound?: boolean;
|
|
52
56
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{ChevronIcon as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as i}from"../box/Box.js";import{ChevronIcon as s}from"../../internal/icons.js";import{accordionPanelClasses as r,clampClasses as d,clampSlot as o,cx as c,focusRingClasses as m,gapClasses as f,hasContent as u,iconClasses as x,metaTextClasses as b,radiusClasses as h,ringRestClasses as v,sheetBodyClasses as p,sheetHeaderGapClasses as g,sheetTitleClasses as N,surfaceClasses as j,surfaceSlots as y,transitionClasses as w}from"../../internal/styles.js";import{useStyleDefaults as k}from"../../internal/defaults.js";const z=/*@__PURE__*/a.createContext({size:"md",density:"default",dividers:!0,headingLevel:3,disabled:!1}),A={solid:[j,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[j,"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"},C={xs:h.xs,sm:h.xs,md:h.sm,lg:h.sm,xl:h.md},I=`${v} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const Accordion=/*@__PURE__*/a.forwardRef(function Accordion(n,l){const{variant:i="outline",size:s="md",color:r="primary",density:d="default",elevation:o=0,multiple:m=!1,value:f,defaultValue:u,onValueChange:x,dividers:b=!0,headingLevel:v=3,disabled:p=!1,hiddenUntilFound:g=!0,keepMounted:N=!1,className:j,style:C,children:I,...L}=k(n,["size","density","variant"]),V=a.useMemo(()=>({size:s,density:d,dividers:b,headingLevel:v,disabled:p}),[s,d,b,v,p]),$=c("flex flex-col",h[s],A[i],w,b?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--n-line)]":"p-1",j??"");return e(z.Provider,{value:V,children:e(t.Root,{ref:l,multiple:m,value:f,defaultValue:u,onValueChange:e=>x?.(e),disabled:p,hiddenUntilFound:g,keepMounted:N,className:$,style:{...y(r,o),...C},...L,children:I})})});export const AccordionItem=/*@__PURE__*/a.forwardRef(function AccordionItem({value:h,title:v,subtitle:j,startIcon:y,action:k,lines:A,disabled:L=!1,className:V,children:$,..._},M){const R=a.useContext(z),{size:F,density:P,dividers:U,headingLevel:B}=R,E=L||R.disabled,H=A?d(A):"",T=o(A),q=l[P][F],D=i[P][F];return n(t.Item,{ref:M,value:h,disabled:L,className:c("flex flex-col",V??""),..._,children:[n("div",{className:"flex w-full items-center",children:[e(t.Header,{className:"neba-heading flex min-w-0 flex-1 items-center [&.neba-heading]:m-0 [&.neba-heading]:[font:inherit]",render:a.createElement(`h${B}`),children:n(t.Trigger,{className:c("flex min-w-0 flex-1 items-center text-start",E?"":"cursor-pointer",q,D,f[F],w,x,U?I:m,U?"":C[F],E?"cursor-not-allowed bg-transparent text-(--neba-disabled-fg)":"hover:bg-(--n-soft) data-[panel-open]:text-(--n-on-tint)"),children:[u(y)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:y}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${g[F]}`,children:[u(v)?e("span",{className:c("font-semibold",N[F],H),style:T,children:v}):null,u(j)?e("span",{className:c("text-(--neba-muted-fg)",b[F],H),style:T,children:j}):null]}),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(s,{})})]})}),u(k)?e("span",{className:`flex shrink-0 items-center ${q}`,children:k}):null]}),e(t.Panel,{className:r,children:e("div",{className:["text-(--neba-muted-fg)",p[F],q,"compact"===P?"pb-2":"pb-4"].join(" "),children:$})})]})});
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import { type RunMessages } from '../../internal/i18n.js';
|
|
4
|
+
import type { NebaColor, NebaRunStatus, NebaStyleProps } from '../../types.js';
|
|
5
|
+
export interface AgentStepsProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
|
|
6
|
+
/**
|
|
7
|
+
* That there is more to come, drawn as one more marker under the last step.
|
|
8
|
+
*
|
|
9
|
+
* `true` draws the marker with no label at all — the status is read out
|
|
10
|
+
* either way, and a visible "Running" beside it would say nothing a turning
|
|
11
|
+
* ring has not already said. A node labels it: "Deciding what to do next" is
|
|
12
|
+
* worth the line when the plan is being written as it goes.
|
|
13
|
+
*
|
|
14
|
+
* It is a prop rather than one more `AgentStep` because the whole point is
|
|
15
|
+
* that the step has no name yet: a chain that grows while it runs spends most
|
|
16
|
+
* of its life not knowing what comes next.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
running?: React.ReactNode | boolean;
|
|
20
|
+
/** Which language a step's status is read out in, as a BCP 47 tag. */
|
|
21
|
+
locale?: string;
|
|
22
|
+
/** Those four words, written out. Overrides the `locale`'s. */
|
|
23
|
+
labels?: Partial<RunMessages>;
|
|
24
|
+
/** Renders something other than an `<ol>` — Base UI's own escape hatch. */
|
|
25
|
+
render?: useRender.RenderProp;
|
|
26
|
+
/** The steps. */
|
|
27
|
+
children?: React.ReactNode;
|
|
28
|
+
}
|
|
29
|
+
export interface AgentStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'title'> {
|
|
30
|
+
/** What the step is. */
|
|
31
|
+
title?: React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* How far it has got.
|
|
34
|
+
* @default 'success'
|
|
35
|
+
*/
|
|
36
|
+
status?: NebaRunStatus;
|
|
37
|
+
/**
|
|
38
|
+
* How long it took, in milliseconds. Left out, a `running` step counts its
|
|
39
|
+
* own from the second it starts, exactly as a
|
|
40
|
+
* [ToolCall](./tool-call) does.
|
|
41
|
+
*/
|
|
42
|
+
duration?: number;
|
|
43
|
+
/** Anything else on the title line — a file name, a count, a model. */
|
|
44
|
+
meta?: React.ReactNode;
|
|
45
|
+
/** Replaces the status mark. The status is still read out. */
|
|
46
|
+
icon?: React.ReactNode | false;
|
|
47
|
+
/** Overrides the chain's family for this one step. */
|
|
48
|
+
color?: NebaColor;
|
|
49
|
+
/**
|
|
50
|
+
* What the step did, under the title: a search query, a file that was read, a
|
|
51
|
+
* [ToolCall](./tool-call) of its own.
|
|
52
|
+
*/
|
|
53
|
+
children?: React.ReactNode;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* One step of a chain.
|
|
57
|
+
*
|
|
58
|
+
* Its place in the list is not a prop and cannot be: the only thing a step has
|
|
59
|
+
* to know about its neighbours is whether the line under it would run into
|
|
60
|
+
* nothing, and a caller appending steps as they happen should not have to keep
|
|
61
|
+
* that right.
|
|
62
|
+
*/
|
|
63
|
+
export declare const AgentStep: React.ForwardRefExoticComponent<AgentStepProps & React.RefAttributes<HTMLLIElement>>;
|
|
64
|
+
/**
|
|
65
|
+
* A chain of steps that grows as it runs.
|
|
66
|
+
*
|
|
67
|
+
* A [Timeline](../display/timeline) and a
|
|
68
|
+
* [HowToSteps](../surfaces/how-to-steps) draw a list that is known in advance:
|
|
69
|
+
* five stages of a checkout, four things to do in order. This one does not know
|
|
70
|
+
* how many items it has. Steps are appended as they happen, the one at the
|
|
71
|
+
* bottom is usually still running, and each can hold whatever it did —
|
|
72
|
+
* including a [ToolCall](./tool-call) of its own.
|
|
73
|
+
*
|
|
74
|
+
* It is an `<ol>` for the reason it exists at all: the order *is* the content.
|
|
75
|
+
* There is no Base UI primitive under it and there should not be — a chain of
|
|
76
|
+
* steps has no selection, no roving focus and no keyboard contract, and
|
|
77
|
+
* reaching for a composite primitive would hand a record of what happened the
|
|
78
|
+
* semantics of a widget.
|
|
79
|
+
*/
|
|
80
|
+
export declare const AgentSteps: React.ForwardRefExoticComponent<AgentStepsProps & React.RefAttributes<HTMLOListElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useRender as l}from"@base-ui/react/use-render";import{childKey as s}from"../../internal/children.js";import{formatDuration as a,runColor as i,runIcon as c,useElapsed as o}from"../../internal/run.js";import{runMessages as m,useMessages as d}from"../../internal/i18n.js";import{cx as u,hasContent as p,metaTextClasses as f,sheetBodyClasses as x,sheetTitleClasses as g,srOnlyClasses as b,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";const N=/*@__PURE__*/t.createContext(null),j=/*@__PURE__*/t.createContext({last:!0}),w={xs:"0.875rem",sm:"1rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"},z={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},k={default:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"},compact:{xs:"pb-1.5",sm:"pb-2",md:"pb-2.5",lg:"pb-3",xl:"pb-3.5"}},A={pending:"text-(--neba-muted-fg)",running:"text-(--n-accent)",success:"text-(--neba-fg)",error:"text-(--n-accent)"};export const AgentStep=/*@__PURE__*/t.forwardRef(function AgentStep({title:r,status:l="success",duration:s,meta:y,icon:C,color:S,className:P,style:_,children:M,...R},F){const q=t.useContext(N),{last:B}=t.useContext(j),D=q?.size??"md",E=q?.density??"default",G=d(m),H=q?.labels??G,I=i(l,S??q?.color??"primary"),J=o("running"===l,s),K=void 0===C?c(l):C;return n("li",{ref:F,"aria-current":"running"===l?"step":void 0,"data-status":l,className:u("relative flex",z[D],B?"":k[E][D],P),style:{"--n-mark":w[D],...h(I,0),..._},...R,children:[B?null:e("span",{"aria-hidden":"true",className:u("pointer-events-none absolute start-[calc(var(--n-mark)/2_-_1px)] top-(--n-mark)","bottom-0 border-s-2 [border-color:var(--neba-border)]")}),e("span",{"aria-hidden":"true",className:u("relative z-10 flex size-(--n-mark) shrink-0 items-center justify-center","rounded-full bg-(--neba-surface) text-(--n-accent)","[&_svg]:size-full",v),children:K}),n("div",{className:"flex min-w-0 flex-1 flex-col gap-0.5",children:[n("div",{className:"flex min-w-0 items-baseline gap-2",children:[e("span",{className:b,children:H[l]}),p(r)?e("span",{className:u("min-w-0 font-medium",g[D],A[l],v),children:r}):null,p(y)?e("span",{className:u("min-w-0 truncate text-(--neba-muted-fg)",f[D]),children:y}):null,null===J?null:e("span",{className:u("ms-auto shrink-0 tabular-nums text-(--neba-muted-fg)",f[D]),children:a(J,q?.locale)})]}),p(M)?e("div",{className:u("min-w-0 text-(--neba-muted-fg)",x[D]),children:M}):null]})]})});export const AgentSteps=/*@__PURE__*/t.forwardRef(function AgentSteps(a,i){const{size:c="md",color:o="primary",density:p="default",running:f=!1,locale:x,labels:g,render:b,className:v,style:w,children:z,...k}=y(a,["size","density","locale"]),A=d(m,x),C=t.useMemo(()=>({...A,...g}),[A,g?.pending,g?.running,g?.success,g?.error]),S=t.Children.toArray(z),P=!1!==f&&null!=f,_=S.length+(P?1:0),M=t.useMemo(()=>({size:c,density:p,color:o,locale:x,labels:C}),[c,p,o,x,C]),R=l({render:b??e("ol",{}),ref:i,props:{role:"list",className:u("flex flex-col",v),style:{...h(o,0),...w},children:n(r,{children:[S.map((n,r)=>e(j.Provider,{value:{last:r===_-1},children:n},s(n,r))),P?e(j.Provider,{value:{last:!0},children:e(AgentStep,{status:"running",title:!0===f?void 0:f})}):null]}),...k}});return e(N.Provider,{value:M,children:R})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{AgentStep,AgentSteps}from"./AgentSteps.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as l}from"../box/Box.js";import{actionMessages as i,useMessages as s}from"../../internal/i18n.js";import{CloseIcon as a,severityIcon as o}from"../../internal/icons.js";import{transitionProps as r}from"../../internal/animate.js";import{controlSlots as c,cx as d,hasContent as m,hitAreaClasses as f,iconClasses as u,radiusClasses as x,sheetBodyClasses as b,sheetHeaderGapClasses as v,sheetSectionGapClasses as p,sheetTitleClasses as h,surfaceClasses as y,transitionClasses as j}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const N={solid:[y,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[y,"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)"},w={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"},k={solid:"",outline:"text-(--neba-muted-fg)",text:"text-(--neba-muted-fg)"},$={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const Alert=/*@__PURE__*/n.forwardRef(function Alert(n,y){const{variant:_="outline",size:z="md",color:A="info",density:C="default",elevation:B=0,title:L,icon:R,action:q,onClose:D,locale:E,closeLabel:F,transition:G,className:H,style:I,children:J,...K}=g(n,["size","density","variant","locale"]),M=s(i,E),O=void 0===R?o(A):R,P=w[_],Q=m(L),S=r(G);return t("div",{ref:y,role:$[A],className:d("flex w-full items-start",l[C][z],x[z],p[z],b[z],j,N[_],u,S.className,H??""),style:{...c(A,B,_),...S.style,...I},...K,children:[m(O)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${P}`,children:O}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${v[z]}`,children:[Q?e("div",{className:`neba-title font-semibold ${h[z]} ${P}`,children:L}):null,m(J)?e("div",{className:Q?k[_]:void 0,children:J}):null]}),m(q)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:q}):null,D?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e("button",{type:"button","aria-label":F??M.dismiss,onClick:D,className:["relative inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full",f,"opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(a,{})})}):null]})});
|
|
@@ -21,8 +21,9 @@ export interface AnchorProps extends Omit<React.ComponentPropsWithoutRef<'nav'>,
|
|
|
21
21
|
/** The headings, in the order they appear on the page. */
|
|
22
22
|
items: readonly AnchorItem[];
|
|
23
23
|
/**
|
|
24
|
-
* Which row is marked, by its `href`. Given, the list
|
|
25
|
-
* scroll
|
|
24
|
+
* Which row is marked, by its `href`. Given, the list marks what it is told,
|
|
25
|
+
* and keeps tracking the scroll so `onActiveChange` still reports where the
|
|
26
|
+
* reader is.
|
|
26
27
|
*/
|
|
27
28
|
activeHref?: string | null;
|
|
28
29
|
/** Called whenever the row the reader is in changes. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{safeHref as n}from"../../internal/link.js";import{anchorMessages as r,useMessages as o}from"../../internal/i18n.js";import{controlTextLeadingClasses as l,cx as i,focusRingClasses as c,transitionClasses as a}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const d={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-1.5",xl:"py-2"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1"}},u={xs:8,sm:10,md:12,lg:14,xl:16},m=["block min-w-0 truncate no-underline","text-(--neba-muted-fg)",a,c,"hover:text-(--neba-fg)","aria-[current=location]:font-medium aria-[current=location]:text-(--n-accent)"].join(" "),f=["border-s [border-color:transparent]","[transition:border-color_var(--neba-duration)_var(--neba-ease)]","aria-[current=location]:[border-color:var(--n-accent)]"].join(" ");function p(e,t){const n=t.get(e);if(n?.isConnected)return n;const r=document.getElementById(e.replace(/^#/,""));return r?t.set(e,r):t.delete(e),r}export const Anchor=/*@__PURE__*/t.forwardRef(function Anchor(c,a){const{items:h,activeHref:g,onActiveChange:b,offset:v=0,container:y,rail:x=!0,size:w="md",color:E="primary",density:j="default",locale:H,label:A,className:C,style:R,...B}=s(c,["size","density","locale"]),N=o(r,H),[z,I]=t.useState(null),K=void 0!==g?g:z,L=t.useRef(b),S=t.useRef(h);t.useEffect(()=>{L.current=b,S.current=h});const $=h.map(e=>e.href).join("\0");return t.useEffect(()=>{const e=y?.current??window,t=new Map;let n=0,r=null;const o=()=>{n=0;const e=function(e,t,n,r){const o=(n?n.getBoundingClientRect().top:0)+t+1;let l=null;for(const t of e){const e=p(t.href,r);e&&e.getBoundingClientRect().top<=o&&(l=t.href)}if((n?n.scrollHeight-n.clientHeight:document.documentElement.scrollHeight-window.innerHeight)<=2){const t=e[0];return t&&p(t.href,r)?t.href:l}return(n?n.scrollTop+n.clientHeight>=n.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:l}(S.current,v,y?.current??null,t);e!==r&&(r=e,I(e),L.current?.(e))},l=()=>{0===n&&(n=requestAnimationFrame(o))};return o(),e.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l,{passive:!0}),()=>{0!==n&&cancelAnimationFrame(n),e.removeEventListener("scroll",l),window.removeEventListener("resize",l)}},[$,v,y]),e("nav",{ref:a,"aria-label":A??N.label,className:i("min-w-0",C??""),style:{"--n-accent":`var(--neba-${E}-accent)`,"--n-ring":`var(--neba-${E}-ring)`,...R},...B,children:e("ul",{className:i("m-0 flex list-none flex-col p-0",x?"border-s [border-color:var(--neba-border)]":""),children:h.map(t=>e("li",{className:x?"[margin-inline-start:-1px]":"",children:e("a",{href:n(t.href),"aria-current":K===t.href?"location":void 0,onClick:e=>function(e,t,n,r){if(!n||e.defaultPrevented||0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;const o=document.getElementById(t.replace(/^#/,""));if(!o)return;e.preventDefault();const l=n.scrollTop+o.getBoundingClientRect().top-n.getBoundingClientRect().top-r;n.scrollTo({top:l}),o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),o.focus({preventScroll:!0})}(e,t.href,y?.current??null,v),className:i(m,l[w],d[j][w],x?`${f} ps-3`:""),style:t.depth?x?{paddingInlineStart:`calc(0.75rem + ${t.depth*u[w]}px)`}:{marginInlineStart:t.depth*u[w]}:void 0,children:t.label})},t.href))})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as
|
|
1
|
+
"use client";import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{animBaseClass as r,animationClasses as t,childAnimations as n,isInfinite as i,slideOffsets as s,staggerChildren as o,useAnimationRun as d}from"../../internal/animate.js";export const AnimateAppear=/*@__PURE__*/e.forwardRef(function AnimateAppear({duration:e=420,delay:l=0,easing:p,repeat:m=1,alternate:c,paused:g,trigger:u="mount",play:f,once:y=!0,threshold:h=.2,stagger:A=80,durationStep:b=0,reverse:v=!1,timeline:x,range:w,from:N="bottom",distance:S="0.75rem",fade:$=!0,render:j,className:R,style:k,children:q,...z},B){const C=d({caller:z,parts:n,trigger:u,play:f,once:y,threshold:h,paused:g,infinite:i(m)}),{x:D,y:E}=s(N,S),F="view"===x?"running":C.state,G=o(q,`${r} ${t.slide}`,{duration:e,delay:l,easing:p,repeat:m,alternate:c,x:D,y:E,opacity:$?0:1,timeline:x,range:w},{stagger:A,durationStep:b,reverse:v});return a({render:j,ref:[B,C.ref],props:{...z,className:R,style:{"--n-anim-state":F,...k},...C.handlers,"data-neba-animation":"appear","data-state":F,children:G}})});
|
|
@@ -27,5 +27,8 @@ export interface AnimateBlinkProps extends NebaAnimateProps, NebaStaggerProps, N
|
|
|
27
27
|
* reduced-motion preference will see none of it — so `min` is a dimming, never
|
|
28
28
|
* the only thing carrying the message. If it is urgent, say so in words as
|
|
29
29
|
* well.
|
|
30
|
+
*
|
|
31
|
+
* `duration` is one blink, and it is never shorter than 334ms: three blinks a
|
|
32
|
+
* second is the fastest a flash may safely go.
|
|
30
33
|
*/
|
|
31
34
|
export declare const AnimateBlink: React.ForwardRefExoticComponent<AnimateBlinkProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";import{cx as
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,MIN_BLINK_DURATION as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateBlink=/*@__PURE__*/e.forwardRef(function AnimateBlink({duration:e=900,delay:s=0,easing:l,repeat:o="infinite",alternate:m,paused:c,trigger:d="mount",play:p,once:f=!0,threshold:g=.2,stagger:u=0,durationStep:h=0,reverse:y=!1,timeline:k,range:N,min:b=0,render:j,className:v,style:x,children:A,...B},S){const w=n({caller:B,effect:"blink",duration:Math.max(e,a),delay:s,easing:l,repeat:o,alternate:m,opacity:b,trigger:d,play:p,once:f,threshold:g,paused:c,infinite:t(o),timeline:k,range:N,children:A,stagger:u,durationStep:h,reverse:y});return r({render:j,ref:[S,w.ref],props:{...B,className:i(w.className,v),style:{...w.style,...x},...w.props,children:w.children}})});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useRender } from '@base-ui/react/use-render';
|
|
3
3
|
import type { NebaAnimateProps } from '../../types.js';
|
|
4
|
-
export interface AnimateCounterProps extends Omit<NebaAnimateProps, 'easing' | 'repeat' | 'alternate'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
4
|
+
export interface AnimateCounterProps extends Omit<NebaAnimateProps, 'easing' | 'repeat' | 'alternate' | 'paused'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
5
5
|
/** Where it lands. */
|
|
6
6
|
value: number;
|
|
7
7
|
/**
|
|
@@ -17,6 +17,8 @@ export interface AnimateCounterProps extends Omit<NebaAnimateProps, 'easing' | '
|
|
|
17
17
|
/**
|
|
18
18
|
* How the number is written — `Intl.NumberFormat` options, so a currency, a
|
|
19
19
|
* percentage or a compact `1.2M` is a prop rather than a `format` callback.
|
|
20
|
+
* While it counts, the number keeps the decimal places of `value` or `from`,
|
|
21
|
+
* whichever has more.
|
|
20
22
|
*/
|
|
21
23
|
format?: Intl.NumberFormatOptions;
|
|
22
24
|
/** Which language it is written in. Defaults to the reader's own. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useRender as a}from"@base-ui/react/use-render";import{useAnimationRun as i,usePrefersReducedMotion as s}from"../../internal/animate.js";import{numberFormatter as o}from"../../internal/format.js";import{cx as u,srOnlyClasses as m}from"../../internal/styles.js";import{useStyleDefaults as c}from"../../internal/defaults.js";function l(r){if(!Number.isFinite(r))return 0;const[e,t="0"]=String(Math.abs(r)).split("e"),n=(e.split(".")[1]?.length??0)-Number(t);return Math.min(20,Math.max(0,n))}export const AnimateCounter=/*@__PURE__*/n.forwardRef(function AnimateCounter(f,d){const{value:h,from:p=0,duration:g=1200,delay:j=0,trigger:y="mount",play:M,once:b=!0,threshold:x=.2,format:A,locale:F,render:N,className:v,style:q,...R}=c(f,["locale"]),S=i({caller:R,trigger:y,play:M,once:b,threshold:x,infinite:!1}),C=s(),[w,E]=n.useState(p),J=void 0===A?"":JSON.stringify(A),O=n.useMemo(()=>o(F,A),[F,J]),k=n.useRef(p),z=n.useRef(!1);n.useEffect(()=>{if(!S.started&&!C)return z.current=!1,k.current=p,void E(p);if(C||g<=0)return k.current=h,void E(h);const r=z.current?k.current:p,e=z.current?0:j;z.current=!0;let t=0,n=null;const a=i=>{null===n&&(n=i);const s=i-n-e;if(s<0)return void(t=requestAnimationFrame(a));const o=Math.min(1,s/g),u=r+(h-r)*function(r){return 1-(1-r)**3}(o);k.current=u,E(u),o<1&&(t=requestAnimationFrame(a))};return k.current=r,E(r),t=requestAnimationFrame(a),()=>cancelAnimationFrame(t)},[S.started,C,h,p,g,j]);const B=Math.max(l(h),l(p)),D=Math.round(w*10**B)/10**B;return a({render:N,ref:[d,S.ref],props:{...R,className:u("tabular-nums",v),style:q,"data-neba-animation":"counter","data-state":S.state,...S.handlers,children:t(e,{children:[r("span",{className:m,children:O.format(h)}),r("span",{"aria-hidden":"true",children:O.format(C?h:D)})]})}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/e.forwardRef(function({duration:e=320,delay:i=0,easing:s,repeat:o=1,alternate:l,paused:d,trigger:m="mount",play:
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateFade=/*@__PURE__*/e.forwardRef(function AnimateFade({duration:e=320,delay:i=0,easing:s,repeat:o=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:N,mode:j="in",from:v=0,render:A,className:F,style:S,children:b,...w},x){const R=a({caller:w,effect:"fade",duration:e,delay:i,easing:s,repeat:o,alternate:l,mode:j,opacity:v,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(o),timeline:h,range:N,children:b,stagger:g,durationStep:u,reverse:y});return r({render:A,ref:[x,R.ref],props:{...w,className:n(R.className,F),style:{...R.style,...S},...R.props,children:R.children}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateFloat=/*@__PURE__*/e.forwardRef(function({duration:e=3200,delay:s=0,easing:l="ease-in-out",repeat:o="infinite",alternate:m=!0,paused:
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateFloat=/*@__PURE__*/e.forwardRef(function AnimateFloat({duration:e=3200,delay:s=0,easing:l="ease-in-out",repeat:o="infinite",alternate:m=!0,paused:c,trigger:d="mount",play:f,once:p=!0,threshold:u=.2,stagger:g=0,durationStep:y=0,reverse:h=!1,timeline:x,range:N,from:b="top",distance:j="0.5rem",render:v,className:A,style:F,children:S,...w},C){const{x:R,y:k}=a(b,j),q=n({caller:w,effect:null,effectClass:"neba-anim-float",name:"float",duration:e,delay:s,easing:l,repeat:o,alternate:m,x:R,y:k,trigger:d,play:f,once:p,threshold:u,paused:c,infinite:t(o),timeline:x,range:N,children:S,stagger:g,durationStep:y,reverse:h});return r({render:v,ref:[C,q.ref],props:{...w,className:i(q.className,A),style:{...q.style,...F},...q.props,children:q.children}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e=340,delay:i=0,easing:
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const AnimateGrow=/*@__PURE__*/e.forwardRef(function AnimateGrow({duration:e=340,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u=0,reverse:y=!1,timeline:h,range:w,mode:N="in",from:j=.8,origin:v="center",fade:A=!0,render:G,className:S,style:b,children:x,...O},R){const k=a({caller:O,effect:"grow",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:N,scale:j,opacity:A?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s),timeline:h,range:w,children:x,stagger:g,durationStep:u,reverse:y});return r({render:G,ref:[R,k.ref],props:{...O,className:n(k.className,S),style:{transformOrigin:v,...k.style,...b},...k.props,children:k.children}})});
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
3
|
import type { NebaAnimateProps } from '../../types.js';
|
|
3
|
-
export interface AnimateHeadlineProps extends Omit<NebaAnimateProps, 'alternate' | 'mode'>, React.ComponentPropsWithoutRef<'
|
|
4
|
+
export interface AnimateHeadlineProps extends Omit<NebaAnimateProps, 'alternate' | 'mode'>, React.ComponentPropsWithoutRef<'span'> {
|
|
5
|
+
/**
|
|
6
|
+
* Renders something other than a `<span>`, such as `render={<h1 />}`. A
|
|
7
|
+
* `<span>` by default, with a block display, so the component can sit inside a
|
|
8
|
+
* paragraph. Base UI's own escape hatch.
|
|
9
|
+
*/
|
|
10
|
+
render?: useRender.RenderProp;
|
|
4
11
|
/**
|
|
5
12
|
* How long each line is held before the next one comes up, in milliseconds.
|
|
6
13
|
* Counted from the moment a line arrives, so it is reading time rather than a
|
|
@@ -52,4 +59,4 @@ export interface AnimateHeadlineProps extends Omit<NebaAnimateProps, 'alternate'
|
|
|
52
59
|
* are looking during the two seconds it is up, and a screen reader is given the
|
|
53
60
|
* line that happens to be showing rather than the set.
|
|
54
61
|
*/
|
|
55
|
-
export declare const AnimateHeadline: React.ForwardRefExoticComponent<AnimateHeadlineProps & React.RefAttributes<
|
|
62
|
+
export declare const AnimateHeadline: React.ForwardRefExoticComponent<AnimateHeadlineProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{isInfinite as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{isInfinite as a,lengthValue as r,useAnimationRun as i,usePrefersReducedMotion as s}from"../../internal/animate.js";import{cx as l}from"../../internal/styles.js";export const AnimateHeadline=/*@__PURE__*/t.forwardRef(function AnimateHeadline({duration:o=480,delay:u=0,easing:c,repeat:m="infinite",paused:d,trigger:f="mount",play:p,once:h=!0,threshold:g=.2,interval:y=2600,index:v,defaultIndex:b=0,onIndexChange:x,loop:N=!0,rise:j="100%",render:C,className:E,style:T,children:k,...A},S){const H=i({caller:A,trigger:f,play:p,once:h,threshold:g,paused:d,infinite:a(m)}),I=s(),M=t.Children.toArray(k),R=M.length,[w,V]=t.useState(b),$=Math.min(v??w,Math.max(R-1,0)),[q,z]=t.useState(null),[B,D]=t.useState($);B!==$&&(D($),z(B)),t.useEffect(()=>{if(null===q)return;const e=setTimeout(()=>z(null),o);return()=>clearTimeout(e)},[q,o]);const F=t.useCallback(()=>{const e=$+1;if(e>=R){if(!N)return;return void 0===v&&V(0),void x?.(0)}void 0===v&&V(e),x?.(e)},[$,R,N,v,x]),G=t.useRef(!1);t.useEffect(()=>{if(void 0!==v||R<2||"running"!==H.state||I)return;if(!N&&$===R-1)return;const e=setTimeout(()=>{G.current=!0,F()},o+y+(G.current?0:u));return()=>clearTimeout(e)},[v,R,H.state,o,y,u,F,N,$,I]);const J=H.ref,K=t.useCallback(e=>{J(e),"function"==typeof S?S(e):S&&(S.current=e)},[S,J]);return n({render:C??e("span",{}),ref:K,props:{className:l("neba-headline",E),style:{"--n-anim-duration":`${o}ms`,"--n-anim-rise":r(j),...c?{"--n-anim-ease":c}:{},"--n-anim-state":H.state,...T},"data-neba-animation":"headline","data-state":H.state,...A,...H.handlers,children:M.map((n,a)=>{const r=a===$?"active":a!==q||I?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"neba-headline-item","data-state":r,children:n},a);const i=n.props;return t.cloneElement(n,{key:a,className:l("neba-headline-item",i.className),"data-state":r})})}})});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useRender } from '@base-ui/react/use-render';
|
|
3
3
|
import type { NebaAnimateProps, NebaColor, NebaSize } from '../../types.js';
|
|
4
|
-
export interface AnimateLightingProps extends NebaAnimateProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
|
|
4
|
+
export interface AnimateLightingProps extends Omit<NebaAnimateProps, 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
|
|
5
5
|
/**
|
|
6
6
|
* Which family the light is drawn in.
|
|
7
7
|
* @default 'primary'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as n,useAnimateElement as a}from"../../internal/animate.js";import{cx as t,radiusClasses as i}from"../../internal/styles.js";import{useStyleDefaults as
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as n,useAnimateElement as a}from"../../internal/animate.js";import{cx as t,radiusClasses as i}from"../../internal/styles.js";import{useStyleDefaults as l}from"../../internal/defaults.js";export const AnimateLighting=/*@__PURE__*/e.forwardRef(function AnimateLighting(e,o){const{duration:s=3e3,delay:m=0,repeat:d="infinite",alternate:p,paused:c,trigger:g="mount",play:f,once:u=!0,threshold:h=.2,color:y="primary",glow:w,size:b="md",spread:$=3,arc:j=50,blur:x=4,reverse:v=!1,render:z,className:A,style:L,children:N,...R}=l(e,["size"]),k=a({caller:R,effect:null,duration:s,delay:m,repeat:d,alternate:p,mode:v?"out":"in",trigger:g,play:f,once:u,threshold:h,paused:c,infinite:n(d)});return r({render:z,ref:[o,k.ref],props:{...R,className:t("neba-anim-lighting",i[b],A),style:{...k.style,"--n-anim-glow":w??`var(--neba-${y}-accent)`,"--n-anim-glow-width":`${$}px`,"--n-anim-glow-arc":`${j}deg`,"--n-anim-glow-blur":`${x}px`,...L},...k.props,"data-neba-animation":"lighting",children:N}})});
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
3
|
import type { NebaAnimateProps, NebaOrientation } from '../../types.js';
|
|
3
|
-
export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'
|
|
4
|
+
export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'span'> {
|
|
5
|
+
/**
|
|
6
|
+
* Renders something other than a `<span>`, such as `render={<ul />}`. A
|
|
7
|
+
* `<span>` by default, with a block display, so the component can sit inside a
|
|
8
|
+
* paragraph. Base UI's own escape hatch.
|
|
9
|
+
*/
|
|
10
|
+
render?: useRender.RenderProp;
|
|
4
11
|
/**
|
|
5
12
|
* Which way the strip runs.
|
|
6
13
|
* @default 'horizontal'
|
|
@@ -33,7 +40,8 @@ export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPr
|
|
|
33
40
|
copies?: number;
|
|
34
41
|
/**
|
|
35
42
|
* Stops while the pointer is on it, or while the focus is inside it, so
|
|
36
|
-
* something scrolling past can actually be read, clicked or tabbed to.
|
|
43
|
+
* something scrolling past can actually be read, clicked or tabbed to. Not
|
|
44
|
+
* applied with `trigger="hover"`, where those two are what start it.
|
|
37
45
|
* @default true
|
|
38
46
|
*/
|
|
39
47
|
pauseOnHover?: boolean;
|
|
@@ -60,8 +68,9 @@ export interface AnimateMarqueeProps extends NebaAnimateProps, React.ComponentPr
|
|
|
60
68
|
* pointer, or the same link would be unreachable to whoever tabs to it — the
|
|
61
69
|
* strip would be carrying it off the screen while it was being read.
|
|
62
70
|
*
|
|
63
|
-
* Only the first copy is read out. The rest carry `aria-hidden
|
|
64
|
-
* reader would announce everything on the strip as
|
|
65
|
-
* down
|
|
71
|
+
* Only the first copy is read out and reached. The rest carry `aria-hidden`
|
|
72
|
+
* and `inert`, or a screen reader would announce everything on the strip as
|
|
73
|
+
* many times as it was laid down, and a keyboard would stop at every link in
|
|
74
|
+
* it as many times too.
|
|
66
75
|
*/
|
|
67
|
-
export declare const AnimateMarquee: React.ForwardRefExoticComponent<AnimateMarqueeProps & React.RefAttributes<
|
|
76
|
+
export declare const AnimateMarquee: React.ForwardRefExoticComponent<AnimateMarqueeProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{isInfinite as t,lengthValue as n,useAnimationRun as i}from"../../internal/animate.js";import{inertValue as s}from"../../internal/inert.js";import{usePrefersReducedMotion as o}from"../../internal/media.js";import{observeResize as m}from"../../internal/observe.js";import{cx as l}from"../../internal/styles.js";export const AnimateMarquee=/*@__PURE__*/r.forwardRef(function AnimateMarquee({duration:u,delay:c=0,repeat:p="infinite",alternate:d,paused:f,trigger:h="mount",play:v,once:g=!0,threshold:y=.2,easing:b,orientation:j="horizontal",reverse:q=!1,speed:x=60,gap:M="2rem",copies:k=2,pauseOnHover:A=!0,render:N,className:R,style:S,children:w,...C},G){const H=i({caller:C,parts:":scope > .neba-marquee-track",trigger:h,play:v,once:g,threshold:y,paused:f,infinite:t(p)}),$=r.useRef(null),z=r.useRef(null),[E,F]=r.useState(0),O="vertical"===j,W=o();r.useEffect(()=>{const e=$.current,r=z.current;if(!e||!r)return;const a=()=>{const a=getComputedStyle(e),t=parseFloat(O?a.rowGap:a.columnGap)||0,n=O?r.offsetHeight:r.offsetWidth;F(n+t)};a();const t=m(r,a),n=m(e,a);return()=>{t(),n()}},[O,M]);const B=u??(E>0?E/x*1e3:12e3),D=H.ref,I=r.useCallback(e=>{$.current=e,D(e),"function"==typeof G?G(e):G&&(G.current=e)},[G,D]);return a({render:N??e("span",{}),ref:I,props:{className:l("neba-marquee",O&&"neba-marquee-vertical",R),style:{"--n-anim-gap":n(M),...b?{"--n-anim-ease":b}:{},"--n-anim-duration":`${Math.round(B)}ms`,"--n-anim-delay":`${c}ms`,"--n-anim-repeat":"infinite"===p?"infinite":String(p),"--n-anim-direction":q?d?"alternate-reverse":"reverse":d?"alternate":"normal","--n-anim-state":H.state,...S},"data-neba-animation":"marquee","data-state":H.state,"data-pause-on-hover":A&&"hover"!==h?"":void 0,...C,...H.handlers,children:Array.from({length:W?1:Math.max(1,k)},(r,a)=>(r=>e("span",{ref:0===r?z:void 0,className:"neba-marquee-track","aria-hidden":0===r?void 0:"true",inert:s(0!==r),children:w},r))(a))}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,revealClip as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateReveal=/*@__PURE__*/e.forwardRef(function({duration:e=620,delay:s=0,easing:l,repeat:o=1,alternate:d,paused:m,trigger:
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,revealClip as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const AnimateReveal=/*@__PURE__*/e.forwardRef(function AnimateReveal({duration:e=620,delay:s=0,easing:l,repeat:o=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:g=.2,stagger:u=0,durationStep:y=0,reverse:h=!1,timeline:v,range:N,mode:R="in",side:j="left",from:A=1,render:S,className:b,style:w,children:x,...k},q){const z=n({caller:k,effect:"reveal",duration:e,delay:s,easing:l,repeat:o,alternate:d,mode:R,opacity:A,clip:a(j),trigger:c,play:p,once:f,threshold:g,paused:m,infinite:t(o),timeline:v,range:N,children:x,stagger:u,durationStep:y,reverse:h});return r({render:S,ref:[q,z.ref],props:{...k,className:i(z.className,b),style:{...z.style,...w},...z.props,children:z.children}})});
|