mywhy-ui 0.5.2 → 0.6.0

package/dist/index.d.cts

@@ -154,6 +154,25 @@ interface FormControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare function FormControl({ label, description, error, required, helperText, children, className, ...props }: FormControlProps): react_jsx_runtime.JSX.Element;
 
+interface NavbarItem {
+    label: React$1.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    icon?: React$1.ReactNode;
+    disabled?: boolean;
+}
+interface NavbarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    left?: React$1.ReactNode;
+    center?: React$1.ReactNode;
+    right?: React$1.ReactNode;
+    brand?: React$1.ReactNode;
+    items?: NavbarItem[];
+    sticky?: boolean;
+    bordered?: boolean;
+    className?: string;
+}
+declare function Navbar({ left, center, right, brand, items, sticky, bordered, className, ...props }: NavbarProps): react_jsx_runtime.JSX.Element;
+
 interface TabItem {
     label: React$1.ReactNode;
     value: string;
@@ -514,4 +533,4 @@ declare function useToast(): {
     removeToast: (id: string) => void;
 };
 
-export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockLanguage, type CodeBlockProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, type KbdTheme, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberInput, type NumberInputProps, type NumberInputSize, Pagination, type PaginationProps, Progress, type ProgressProps, ROS2Diagnostics, type ROS2DiagnosticsProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };
+export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockLanguage, type CodeBlockProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, type KbdTheme, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarItem, type NavbarProps, NumberInput, type NumberInputProps, type NumberInputSize, Pagination, type PaginationProps, Progress, type ProgressProps, ROS2Diagnostics, type ROS2DiagnosticsProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };

package/dist/index.d.ts

@@ -154,6 +154,25 @@ interface FormControlProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare function FormControl({ label, description, error, required, helperText, children, className, ...props }: FormControlProps): react_jsx_runtime.JSX.Element;
 
+interface NavbarItem {
+    label: React$1.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    icon?: React$1.ReactNode;
+    disabled?: boolean;
+}
+interface NavbarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    left?: React$1.ReactNode;
+    center?: React$1.ReactNode;
+    right?: React$1.ReactNode;
+    brand?: React$1.ReactNode;
+    items?: NavbarItem[];
+    sticky?: boolean;
+    bordered?: boolean;
+    className?: string;
+}
+declare function Navbar({ left, center, right, brand, items, sticky, bordered, className, ...props }: NavbarProps): react_jsx_runtime.JSX.Element;
+
 interface TabItem {
     label: React$1.ReactNode;
     value: string;
@@ -514,4 +533,4 @@ declare function useToast(): {
     removeToast: (id: string) => void;
 };
 
-export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockLanguage, type CodeBlockProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, type KbdTheme, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberInput, type NumberInputProps, type NumberInputSize, Pagination, type PaginationProps, Progress, type ProgressProps, ROS2Diagnostics, type ROS2DiagnosticsProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };
+export { Alert, type AlertProps, type AlertTheme, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarTheme, Badge, type BadgeProps, type BadgeTheme, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTheme, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockLanguage, type CodeBlockProps, ConnectionIcon, ConnectionIndicator, type ConnectionIndicatorProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, FileUploader, type FileUploaderProps, FormControl, type FormControlProps, Input, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, type KbdTheme, Link, type LinkProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarItem, type NavbarProps, NumberInput, type NumberInputProps, type NumberInputSize, Pagination, type PaginationProps, Progress, type ProgressProps, ROS2Diagnostics, type ROS2DiagnosticsProps, Rating, type RatingProps, type RobotStatus, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, Slider, type SliderProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, Toast, ToastContainer, type ToastContainerProps, type ToastEntry, type ToastProps, type ToastType, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, useDisclosure, useToast };

package/dist/index.js

@@ -780,6 +780,58 @@ function FormControl({
     helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light", children: helperText })
   ] });
 }
+function Navbar({
+  left,
+  center,
+  right,
+  brand,
+  items,
+  sticky = false,
+  bordered = true,
+  className = "",
+  ...props
+}) {
+  const classes = [
+    "w-full h-16 bg-surface",
+    bordered ? "border-b border-outline" : "",
+    sticky ? "sticky top-0" : "",
+    "flex items-center px-6 gap-4",
+    "z-40",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("nav", { className: classes, ...props, children: [
+    (brand || left) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 flex-shrink-0", children: [
+      brand && /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-text-primary", children: brand }),
+      left && /* @__PURE__ */ jsx("div", { children: left })
+    ] }),
+    center && /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: center }),
+    items && items.length > 0 && !center && /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-1", children: items.map((item, idx) => /* @__PURE__ */ jsx(NavbarItemComponent, { item }, idx)) }),
+    right && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 flex-shrink-0 ml-auto", children: right })
+  ] });
+}
+function NavbarItemComponent({ item }) {
+  const classes = [
+    "px-4 py-2 rounded-md text-sm font-medium",
+    "transition-colors",
+    item.disabled ? "text-text-muted cursor-not-allowed" : "text-text-secondary hover:bg-surface-hover hover:text-text-primary cursor-pointer"
+  ].join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: item.icon }),
+    item.label
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsx("a", { href: item.href, className: classes, onClick: item.onClick, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: classes,
+      onClick: item.onClick,
+      disabled: item.disabled,
+      children: content
+    }
+  );
+}
 function Tabs({
   tabs,
   activeTab,
@@ -3260,6 +3312,6 @@ function useToast() {
   return { toasts, addToast, removeToast };
 }
 
-export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CodeBlock, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, EmptyState, FileUploader, FormControl, Input, Kbd, Link, MultiSelect, NumberInput, Pagination, Progress, ROS2Diagnostics, Rating, Select_default as Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
+export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CodeBlock, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, EmptyState, FileUploader, FormControl, Input, Kbd, Link, MultiSelect, Navbar, NumberInput, Pagination, Progress, ROS2Diagnostics, Rating, Select_default as Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map