@nubitio/ui 0.5.8 → 0.5.10

package/dist/index.cjs

@@ -2413,7 +2413,8 @@ function TimelineItem({ status, title, timestamp, dateTime, tone = "default", ch
 		})]
 	});
 }
-function Timeline({ variant = "stepper", title, description, children, className, "aria-label": ariaLabel }) {
+function Timeline({ variant = "stepper", orientation = "vertical", title, description, children, className, "aria-label": ariaLabel }) {
+	const resolvedOrientation = variant === "log" ? "vertical" : orientation;
 	const panelClasses = [
 		"nb-timeline-panel",
 		(title != null || description != null) && "nb-timeline-panel--card",
@@ -2433,7 +2434,7 @@ function Timeline({ variant = "stepper", title, description, children, className
 					children: description
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
-				className: `nb-timeline nb-timeline--${variant}`,
+				className: `nb-timeline nb-timeline--${variant} nb-timeline--${resolvedOrientation}`,
 				role: "list",
 				"aria-label": ariaLabel,
 				children

package/dist/index.d.cts

@@ -718,11 +718,18 @@ declare const Drawer: React$1.FC<DrawerProps>;
 //#endregion
 //#region packages/ui/Timeline.d.ts
 type TimelineVariant = 'stepper' | 'log';
+type TimelineOrientation = 'vertical' | 'horizontal';
 type TimelineItemStatus = 'complete' | 'current' | 'pending' | 'error';
 type TimelineItemTone = 'default' | 'success' | 'info' | 'danger' | 'warning';
 interface TimelineProps {
   /** `stepper` — workflow stages with checkmarks; `log` — chronological event log. */
   variant?: TimelineVariant;
+  /**
+   * `horizontal` lays the steps in a row (wizard/checkout style: 1 → 2 → 3)
+   * with labels under the markers. Stepper only — the log variant is
+   * inherently vertical and ignores it.
+   */
+  orientation?: TimelineOrientation;
   title?: ReactNode;
   description?: ReactNode;
   children: ReactNode;
@@ -750,6 +757,7 @@ declare function TimelineItem({
 }: TimelineItemProps): React$1.JSX.Element;
 declare function Timeline({
   variant,
+  orientation,
   title,
   description,
   children,
@@ -818,4 +826,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.d.mts

@@ -718,11 +718,18 @@ declare const Drawer: React$1.FC<DrawerProps>;
 //#endregion
 //#region packages/ui/Timeline.d.ts
 type TimelineVariant = 'stepper' | 'log';
+type TimelineOrientation = 'vertical' | 'horizontal';
 type TimelineItemStatus = 'complete' | 'current' | 'pending' | 'error';
 type TimelineItemTone = 'default' | 'success' | 'info' | 'danger' | 'warning';
 interface TimelineProps {
   /** `stepper` — workflow stages with checkmarks; `log` — chronological event log. */
   variant?: TimelineVariant;
+  /**
+   * `horizontal` lays the steps in a row (wizard/checkout style: 1 → 2 → 3)
+   * with labels under the markers. Stepper only — the log variant is
+   * inherently vertical and ignores it.
+   */
+  orientation?: TimelineOrientation;
   title?: ReactNode;
   description?: ReactNode;
   children: ReactNode;
@@ -750,6 +757,7 @@ declare function TimelineItem({
 }: TimelineItemProps): React$1.JSX.Element;
 declare function Timeline({
   variant,
+  orientation,
   title,
   description,
   children,
@@ -818,4 +826,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.mjs

@@ -2389,7 +2389,8 @@ function TimelineItem({ status, title, timestamp, dateTime, tone = "default", ch
 		})]
 	});
 }
-function Timeline({ variant = "stepper", title, description, children, className, "aria-label": ariaLabel }) {
+function Timeline({ variant = "stepper", orientation = "vertical", title, description, children, className, "aria-label": ariaLabel }) {
+	const resolvedOrientation = variant === "log" ? "vertical" : orientation;
 	const panelClasses = [
 		"nb-timeline-panel",
 		(title != null || description != null) && "nb-timeline-panel--card",
@@ -2409,7 +2410,7 @@ function Timeline({ variant = "stepper", title, description, children, className
 					children: description
 				})]
 			}), /* @__PURE__ */ jsx("ol", {
-				className: `nb-timeline nb-timeline--${variant}`,
+				className: `nb-timeline nb-timeline--${variant} nb-timeline--${resolvedOrientation}`,
 				role: "list",
 				"aria-label": ariaLabel,
 				children

package/dist/style.css

@@ -2728,7 +2728,7 @@ html[data-density=compact] .nb-drawer__footer {
   content: "";
   left: 11px;
   position: absolute;
-  top: 24px;
+  top: 22px;
   width: 2px;
 }
 .nb-timeline__item--complete:not(:last-child)::before {
@@ -2755,19 +2755,25 @@ html[data-density=compact] .nb-drawer__footer {
 .nb-timeline--log .nb-timeline__item:last-child {
   padding-bottom: 0;
 }
-.nb-timeline--log .nb-timeline__item::before {
-  display: none;
+.nb-timeline--log .nb-timeline__item:not(:last-child)::before {
+  background: var(--border-color);
+  left: 7px;
+  top: 18px;
 }
 
 .nb-timeline__marker-col {
-  align-items: flex-start;
+  align-items: center;
   display: flex;
+  height: 20px;
   justify-content: center;
-  padding-top: 2px;
   position: relative;
   z-index: 1;
 }
 
+.nb-timeline--log .nb-timeline__marker-col {
+  height: 18px;
+}
+
 .nb-timeline__marker {
   align-items: center;
   border-radius: 50%;
@@ -2855,6 +2861,8 @@ html[data-density=compact] .nb-drawer__footer {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
+  justify-content: center;
+  min-height: 20px;
 }
 
 .nb-timeline--log .nb-timeline__heading {
@@ -2862,6 +2870,7 @@ html[data-density=compact] .nb-drawer__footer {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-2);
+  min-height: 18px;
 }
 
 .nb-timeline__label {
@@ -2877,3 +2886,33 @@ html[data-density=compact] .nb-drawer__footer {
   font-variant-numeric: tabular-nums;
   line-height: var(--line-height-normal);
 }
+
+.nb-timeline--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.nb-timeline--horizontal .nb-timeline__item {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+  padding-bottom: 0;
+  text-align: center;
+}
+.nb-timeline--horizontal .nb-timeline__item:not(:last-child)::before {
+  bottom: auto;
+  height: 2px;
+  left: calc(50% + 14px);
+  right: calc(-50% + 14px);
+  top: 9px;
+  width: auto;
+}
+.nb-timeline--horizontal .nb-timeline__content {
+  align-items: center;
+}
+.nb-timeline--horizontal .nb-timeline__heading {
+  align-items: center;
+  min-height: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/ui",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "type": "module",
   "description": "Visual primitives and theme system for the Nubit admin stack (dialogs, cards, toolbar, light/dark theme).",
   "license": "MIT",