@woobee/ui 0.2.1 → 0.2.3

package/README.md

@@ -99,6 +99,14 @@ This library uses custom Tailwind color tokens. Add these to your Tailwind CSS c
 | `SortIcon` | `import { SortIcon } from '@woobee/ui'` |
 | `InlinePrompt` | `import { InlinePrompt } from '@woobee/ui'` |
 
+### Navigation
+
+| Component | Import |
+|-----------|--------|
+| `Breadcrumb` | `import { Breadcrumb } from '@woobee/ui'` |
+| `Tab` | `import { Tab } from '@woobee/ui'` |
+| `ButtonGroup` | `import { ButtonGroup } from '@woobee/ui'` |
+
 ### Overlays
 
 | Component | Import |
@@ -154,6 +162,97 @@ import { Button } from '@woobee/ui'
 </Button>
 ```
 
+### Breadcrumb
+
+Breadcrumb navigation component decoupled from the router (e.g. Next.js) using the `linkComponent` and `onBack` props.
+
+```tsx
+import { Breadcrumb } from '@woobee/ui'
+import Link from 'next/link' // or any custom Link component
+
+<Breadcrumb
+  links={[
+    { name: 'Home', href: '/' },
+    { name: 'Projects', href: '/projects' },
+    { name: 'WooBee', href: '/projects/woobee' }
+  ]}
+  onBack={() => window.history.back()}
+  linkComponent={({ href, className, children }) => (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  )}
+/>
+```
+
+### Tab
+
+A navigation/tab component decoupled from the router, supporting redirection using a custom `linkComponent` or state management via `onChange`.
+
+```tsx
+import { Tab } from '@woobee/ui'
+import Link from 'next/link'
+
+<Tab
+  items={[
+    { id: 'overview', label: 'Overview', link: '/overview' },
+    { id: 'settings', label: 'Settings', link: '/settings' }
+  ]}
+  label="label"
+  value="overview"
+  allowRedirect={true}
+  onChange={(item) => console.log('Tab changed:', item.id)}
+  linkComponent={({ href, className, children, onClick }) => (
+    <Link href={href} className={className} onClick={onClick}>
+      {children}
+    </Link>
+  )}
+/>
+```
+
+### ButtonGroup
+
+A versatile group of buttons or navigation links, supporting custom routing via `linkComponent` and nested dropdown menus via `subgroupModal`.
+
+```tsx
+import { ButtonGroup } from '@woobee/ui'
+import Link from 'next/link'
+
+<ButtonGroup
+  buttons={[
+    { id: 'home', label: 'Home', url: '/' },
+    {
+      id: 'settings',
+      label: 'Settings',
+      subgroups: [
+        { id: 'profile', label: 'Profile Settings', url: '/settings/profile' },
+        { id: 'security', label: 'Security', url: '/settings/security' }
+      ]
+    }
+  ]}
+  activeId="home"
+  direction="horizontal"
+  onChange={(id) => console.log('Button clicked:', id)}
+  linkComponent={({ href, children }) => (
+    <Link href={href}>
+      {children}
+    </Link>
+  )}
+  subgroupModal={({ open, label, items, onClose, onChange }) => (
+    // Render custom modal here for subgroups
+    open ? (
+      <div className="subgroup-modal">
+        <h4>{label}</h4>
+        {items?.map(item => (
+          <a key={item.id} href={item.url}>{item.label}</a>
+        ))}
+        <button onClick={onClose}>Close</button>
+      </div>
+    ) : null
+  )}
+/>
+```
+
 ### Modal
 
 ```tsx

package/SKIPPED.md

@@ -6,14 +6,6 @@ They can be added in future iterations once their dependencies are decoupled.
 
 ---
 
-## Components with Next.js / Router Dependencies
-
-| Component | Source File | Blocking Dependency |
-|-----------|-----------|---------------------|
-| **ButtonGroup** | `ui/ButtonGroup.js` | `next/link`, `useRouter`, `NAV_LINKS` constants, `NavigationModal` |
-| **Breadcrumb** | `ui/Breadcrumb/index.js` | `next/link`, `useRouter` |
-| **Tab** | `ui/Tab/index.js` | `next/link` |
-
 ## Components with App Context Dependencies
 
 | Component | Source File | Blocking Dependency |

package/dist/index.d.mts

@@ -199,6 +199,80 @@ interface InlinePromptProps {
 }
 declare function InlinePrompt({ title, onConfirm, className, withText, confirmText, cancelText, opts, }: InlinePromptProps): React.JSX.Element;
 
+interface BreadcrumbLink {
+    name: string;
+    href: string;
+}
+interface BreadcrumbProps {
+    links?: BreadcrumbLink[];
+    onBack?: () => void;
+    linkComponent?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }) => ReactNode;
+}
+declare function Breadcrumb({ links, onBack, linkComponent: LinkComponent, }: BreadcrumbProps): React.JSX.Element;
+
+interface TabItem {
+    id: string;
+    link?: string;
+    [key: string]: any;
+}
+interface TabProps {
+    items: TabItem[];
+    label: string;
+    value?: string | null;
+    defaultValue?: string | null;
+    allowRedirect?: boolean;
+    onChange?: (item: TabItem) => void;
+    rightContent?: ReactNode;
+    linkComponent?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+        onClick?: () => void;
+    }) => ReactNode;
+}
+declare function Tab({ items, label, value, defaultValue, allowRedirect, onChange, rightContent, linkComponent, }: TabProps): React.JSX.Element;
+
+interface ButtonGroupNavLink {
+    url: string;
+    label: string;
+    icon?: ReactNode;
+}
+interface ButtonGroupItem {
+    id: string;
+    label?: string;
+    image?: ReactNode | string;
+    icon?: ReactNode;
+    url?: string;
+    subgroups?: ButtonGroupItem[];
+}
+interface ButtonGroupProps {
+    buttons?: ButtonGroupItem[];
+    direction?: 'horizontal' | 'vertical';
+    iconPosition?: 'front' | 'back';
+    activeId?: string;
+    onChange?: (id: string) => void;
+    className?: string;
+    itemClassName?: string;
+    currentPath?: string;
+    navLinks?: ButtonGroupNavLink[];
+    linkComponent?: (props: {
+        href: string;
+        children: ReactNode;
+    }) => ReactNode;
+    subgroupModal?: (props: {
+        open: boolean;
+        label?: string;
+        items?: ButtonGroupItem[];
+        onClose: () => void;
+        onChange?: (id: string) => void;
+    }) => ReactNode;
+}
+declare function ButtonGroup({ buttons, direction, iconPosition, activeId, onChange, className, itemClassName, currentPath, navLinks, linkComponent, subgroupModal, }: ButtonGroupProps): React.JSX.Element;
+
 interface HTMLHeadingProps {
     id?: string;
     className?: string;
@@ -576,4 +650,4 @@ interface ModalFooterProps {
     darkMode?: boolean;
 }
 
-export { B, type BoldProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxList, type CheckboxListProps, ConfirmationBox, type ConfirmationBoxProps, type ConfirmationType, Coverflow, type CoverflowImage, type CoverflowProps, DataGrid, type DataGridHeaderConfig, type DataGridProps, Dragger, type DraggerProps, Drawer, type DrawerAnimationProps, type DrawerLevel, type DrawerProps, type DrawerTheme, type ExcelColumn, ExcelTable, type ExcelTableProps, H1, H2, H3, H4, type HTMLHeadingProps, InlinePrompt, type InlinePromptProps, Input, type InputProps, type InputType, Label, type LabelProps, Loading, type LoadingLayout, type LoadingProps, Modal, ModalContext, type ModalFooterProps, type ModalOpts, type ModalProps, ModalProvider, type ModalSize, NoData, type NoDataProps, Popover, type PopoverAction, type PopoverActionItem, PopoverContext, type PopoverContextProps, type PopoverProps, PopoverProvider, type PopoverState, type ResizeListenerProps, type ResizeValues, Select, SelectInput, type SelectInputItem, type SelectInputProps, type SelectProps, type SortDirection, SortIcon, type SortIconProps, type TabOption, Table, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, type TagProps, type TagSize, Tbody, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Thead, ThemeContext, type ThemeContextProps, ThemeProvider, ThemeToggle, Toggle, type ToggleProps, type ToggleSize, Tr, Transition, type TransitionProps, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
+export { B, type BoldProps, Breadcrumb, type BreadcrumbLink, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupNavLink, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxList, type CheckboxListProps, ConfirmationBox, type ConfirmationBoxProps, type ConfirmationType, Coverflow, type CoverflowImage, type CoverflowProps, DataGrid, type DataGridHeaderConfig, type DataGridProps, Dragger, type DraggerProps, Drawer, type DrawerAnimationProps, type DrawerLevel, type DrawerProps, type DrawerTheme, type ExcelColumn, ExcelTable, type ExcelTableProps, H1, H2, H3, H4, type HTMLHeadingProps, InlinePrompt, type InlinePromptProps, Input, type InputProps, type InputType, Label, type LabelProps, Loading, type LoadingLayout, type LoadingProps, Modal, ModalContext, type ModalFooterProps, type ModalOpts, type ModalProps, ModalProvider, type ModalSize, NoData, type NoDataProps, Popover, type PopoverAction, type PopoverActionItem, PopoverContext, type PopoverContextProps, type PopoverProps, PopoverProvider, type PopoverState, type ResizeListenerProps, type ResizeValues, Select, SelectInput, type SelectInputItem, type SelectInputProps, type SelectProps, type SortDirection, SortIcon, type SortIconProps, Tab, type TabItem, type TabOption, type TabProps, Table, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, type TagProps, type TagSize, Tbody, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Thead, ThemeContext, type ThemeContextProps, ThemeProvider, ThemeToggle, Toggle, type ToggleProps, type ToggleSize, Tr, Transition, type TransitionProps, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };

package/dist/index.d.ts

@@ -199,6 +199,80 @@ interface InlinePromptProps {
 }
 declare function InlinePrompt({ title, onConfirm, className, withText, confirmText, cancelText, opts, }: InlinePromptProps): React.JSX.Element;
 
+interface BreadcrumbLink {
+    name: string;
+    href: string;
+}
+interface BreadcrumbProps {
+    links?: BreadcrumbLink[];
+    onBack?: () => void;
+    linkComponent?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }) => ReactNode;
+}
+declare function Breadcrumb({ links, onBack, linkComponent: LinkComponent, }: BreadcrumbProps): React.JSX.Element;
+
+interface TabItem {
+    id: string;
+    link?: string;
+    [key: string]: any;
+}
+interface TabProps {
+    items: TabItem[];
+    label: string;
+    value?: string | null;
+    defaultValue?: string | null;
+    allowRedirect?: boolean;
+    onChange?: (item: TabItem) => void;
+    rightContent?: ReactNode;
+    linkComponent?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+        onClick?: () => void;
+    }) => ReactNode;
+}
+declare function Tab({ items, label, value, defaultValue, allowRedirect, onChange, rightContent, linkComponent, }: TabProps): React.JSX.Element;
+
+interface ButtonGroupNavLink {
+    url: string;
+    label: string;
+    icon?: ReactNode;
+}
+interface ButtonGroupItem {
+    id: string;
+    label?: string;
+    image?: ReactNode | string;
+    icon?: ReactNode;
+    url?: string;
+    subgroups?: ButtonGroupItem[];
+}
+interface ButtonGroupProps {
+    buttons?: ButtonGroupItem[];
+    direction?: 'horizontal' | 'vertical';
+    iconPosition?: 'front' | 'back';
+    activeId?: string;
+    onChange?: (id: string) => void;
+    className?: string;
+    itemClassName?: string;
+    currentPath?: string;
+    navLinks?: ButtonGroupNavLink[];
+    linkComponent?: (props: {
+        href: string;
+        children: ReactNode;
+    }) => ReactNode;
+    subgroupModal?: (props: {
+        open: boolean;
+        label?: string;
+        items?: ButtonGroupItem[];
+        onClose: () => void;
+        onChange?: (id: string) => void;
+    }) => ReactNode;
+}
+declare function ButtonGroup({ buttons, direction, iconPosition, activeId, onChange, className, itemClassName, currentPath, navLinks, linkComponent, subgroupModal, }: ButtonGroupProps): React.JSX.Element;
+
 interface HTMLHeadingProps {
     id?: string;
     className?: string;
@@ -576,4 +650,4 @@ interface ModalFooterProps {
     darkMode?: boolean;
 }
 
-export { B, type BoldProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxList, type CheckboxListProps, ConfirmationBox, type ConfirmationBoxProps, type ConfirmationType, Coverflow, type CoverflowImage, type CoverflowProps, DataGrid, type DataGridHeaderConfig, type DataGridProps, Dragger, type DraggerProps, Drawer, type DrawerAnimationProps, type DrawerLevel, type DrawerProps, type DrawerTheme, type ExcelColumn, ExcelTable, type ExcelTableProps, H1, H2, H3, H4, type HTMLHeadingProps, InlinePrompt, type InlinePromptProps, Input, type InputProps, type InputType, Label, type LabelProps, Loading, type LoadingLayout, type LoadingProps, Modal, ModalContext, type ModalFooterProps, type ModalOpts, type ModalProps, ModalProvider, type ModalSize, NoData, type NoDataProps, Popover, type PopoverAction, type PopoverActionItem, PopoverContext, type PopoverContextProps, type PopoverProps, PopoverProvider, type PopoverState, type ResizeListenerProps, type ResizeValues, Select, SelectInput, type SelectInputItem, type SelectInputProps, type SelectProps, type SortDirection, SortIcon, type SortIconProps, type TabOption, Table, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, type TagProps, type TagSize, Tbody, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Thead, ThemeContext, type ThemeContextProps, ThemeProvider, ThemeToggle, Toggle, type ToggleProps, type ToggleSize, Tr, Transition, type TransitionProps, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
+export { B, type BoldProps, Breadcrumb, type BreadcrumbLink, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupNavLink, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxList, type CheckboxListProps, ConfirmationBox, type ConfirmationBoxProps, type ConfirmationType, Coverflow, type CoverflowImage, type CoverflowProps, DataGrid, type DataGridHeaderConfig, type DataGridProps, Dragger, type DraggerProps, Drawer, type DrawerAnimationProps, type DrawerLevel, type DrawerProps, type DrawerTheme, type ExcelColumn, ExcelTable, type ExcelTableProps, H1, H2, H3, H4, type HTMLHeadingProps, InlinePrompt, type InlinePromptProps, Input, type InputProps, type InputType, Label, type LabelProps, Loading, type LoadingLayout, type LoadingProps, Modal, ModalContext, type ModalFooterProps, type ModalOpts, type ModalProps, ModalProvider, type ModalSize, NoData, type NoDataProps, Popover, type PopoverAction, type PopoverActionItem, PopoverContext, type PopoverContextProps, type PopoverProps, PopoverProvider, type PopoverState, type ResizeListenerProps, type ResizeValues, Select, SelectInput, type SelectInputItem, type SelectInputProps, type SelectProps, type SortDirection, SortIcon, type SortIconProps, Tab, type TabItem, type TabOption, type TabProps, Table, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, type TagProps, type TagSize, Tbody, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Thead, ThemeContext, type ThemeContextProps, ThemeProvider, ThemeToggle, Toggle, type ToggleProps, type ToggleSize, Tr, Transition, type TransitionProps, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };