@mbao01/common 0.0.48 → 0.0.50

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,20 @@
+import { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbListProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps } from './types';
+declare const Breadcrumb: {
+    ({ children, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    List: import('react').ForwardRefExoticComponent<BreadcrumbListProps & import('react').RefAttributes<HTMLOListElement>>;
+    Item: import('react').ForwardRefExoticComponent<BreadcrumbItemProps & import('react').RefAttributes<HTMLLIElement>>;
+    Link: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & {
+        asChild?: boolean;
+    } & import('react').RefAttributes<HTMLAnchorElement>>;
+    Page: import('react').ForwardRefExoticComponent<BreadcrumbPageProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Separator: {
+        ({ children, className, ...props }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Ellipsis: {
+        ({ className, ...props }: BreadcrumbEllipsisProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Breadcrumb };

package/dist/types/components/Breadcrumb/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const getBreadcrumbListClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbItemClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbLinkClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbPageClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbEllipsisClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/types/components/Breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumb } from './Breadcrumb';

package/dist/types/components/Breadcrumb/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+    separator?: ReactNode;
+};
+export type BreadcrumbListProps = React.HTMLAttributes<HTMLUListElement>;
+export type BreadcrumbItemProps = React.HTMLAttributes<HTMLLIElement>;
+export type BreadcrumbLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+};
+export type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+export type BreadcrumbSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
+export type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;

package/dist/types/components/Command/Command.d.ts

@@ -8,7 +8,7 @@ declare const Command: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
+    }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & {} & React.RefAttributes<HTMLInputElement>>;
@@ -18,7 +18,7 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         label?: string;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Empty: React.ForwardRefExoticComponent<Omit<{
@@ -27,14 +27,14 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode;
     } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string;
         forceMount?: boolean;
@@ -45,7 +45,7 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;
@@ -60,7 +60,7 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    }, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         alwaysRender?: boolean;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/types/components/Form/MultiSelect/MultiSelect.d.ts

@@ -16,7 +16,7 @@ declare const MultiSelect: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    }, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
         label?: string;
     } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
         size?: "xs" | "sm" | "md" | "lg" | undefined;
@@ -27,7 +27,7 @@ declare const MultiSelect: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof import('react').HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    }, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/dist/types/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes } from 'react';
+import { SeparatorProps } from '../Separator/types';
+import { SidebarProps } from './types';
+declare const Sidebar: {
+    ({ side, variant, collapsible, className, children, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Content: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Input: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLProps<HTMLInputElement>, "ref" | "size"> & Omit<{
+        variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+        type?: string | number | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+    }, "type"> & import('react').RefAttributes<HTMLInputElement>>;
+    Inset: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Provider: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        defaultOpen?: boolean;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+        tooltipProvider?: import('@radix-ui/react-tooltip').TooltipProviderProps;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Rail: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Separator: {
+        ({ className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: import('react').ForwardRefExoticComponent<import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+        variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+        isLoading?: boolean | undefined;
+    } & {
+        asChild?: boolean;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export { Sidebar };

package/dist/types/components/Sidebar/SidebarContext.d.ts

@@ -0,0 +1,2 @@
+import { SidebarContextProps } from './types';
+export declare const SidebarContext: import('react').Context<SidebarContextProps | null>;

package/dist/types/components/Sidebar/SidebarGroup.d.ts

@@ -0,0 +1,13 @@
+import { SidebarGroupContentProps, SidebarGroupProps } from './types';
+declare const SidebarGroup: {
+    ({ className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Action: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & Partial<{
+        asChild: boolean;
+    }> & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<SidebarGroupContentProps & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & Partial<{
+        asChild: boolean;
+    }> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { SidebarGroup };

package/dist/types/components/Sidebar/SidebarMenu.d.ts

@@ -0,0 +1,30 @@
+import { SidebarMenuBadgeProps, SidebarMenuItemProps, SidebarMenuProps, SidebarMenuSubItemProps, SidebarMenuSubProps } from './types';
+declare const SidebarMenu: {
+    ({ className, ...props }: SidebarMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Item: import('react').ForwardRefExoticComponent<SidebarMenuItemProps & import('react').RefAttributes<HTMLLIElement>>;
+    Button: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & Partial<{
+        asChild: boolean;
+        isActive: boolean;
+        tooltip: string | import('../Tooltip/types').TooltipContentProps;
+    }> & {
+        variant?: "default" | "outline" | undefined;
+        size?: "default" | "sm" | "lg" | undefined;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    Action: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLButtonElement> & Partial<{
+        asChild: boolean;
+        showOnHover: boolean;
+    }> & import('react').RefAttributes<HTMLButtonElement>>;
+    Badge: import('react').ForwardRefExoticComponent<SidebarMenuBadgeProps & import('react').RefAttributes<HTMLDivElement>>;
+    Skeleton: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & Partial<{
+        showIcon: boolean;
+    }> & import('react').RefAttributes<HTMLDivElement>>;
+    Sub: import('react').ForwardRefExoticComponent<SidebarMenuSubProps & import('react').RefAttributes<HTMLUListElement>>;
+    SubItem: import('react').ForwardRefExoticComponent<SidebarMenuSubItemProps & import('react').RefAttributes<HTMLLIElement>>;
+    SubButton: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & Partial<{
+        asChild: boolean;
+        size: "sm" | "md";
+        isActive: boolean;
+    }> & import('react').RefAttributes<HTMLAnchorElement>>;
+};
+export { SidebarMenu };

package/dist/types/components/Sidebar/constants.d.ts

@@ -0,0 +1,48 @@
+export declare const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+export declare const getSidebarClasses: (props?: ({
+    collapsible?: "none" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getSidebarMobileClasses: (props?: ({
+    isMobile?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getSidebarOuterClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarInnerClasses: (props?: ({
+    side?: "right" | "left" | null | undefined;
+    variant?: "inset" | "floating" | "sidebar" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getSidebarGapClasses: (props?: ({
+    variant?: "inset" | "floating" | "sidebar" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getSidebarTriggerClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarRailClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarInsetClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarInputClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarHeaderClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarFooterClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarContentClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarProviderClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarGroupClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarGroupLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarGroupActionClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarGroupContentClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarMenuClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarMenuItemClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarMenuButtonClasses: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getSidebarMenuActionClasses: (props?: ({
+    showOnHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getSidebarMenuBadgeClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarMenuSkeletonClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarMenuSubClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSidebarMenuSubItemClasses: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Sidebar/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useSidebar } from './useSidebar';

package/dist/types/components/Sidebar/hooks/useSidebar/index.d.ts

@@ -0,0 +1 @@
+export { useSidebar } from './useSidebar';

package/dist/types/components/Sidebar/hooks/useSidebar/useSidebar.d.ts

@@ -0,0 +1 @@
+export declare const useSidebar: () => import('../../types').SidebarContextProps;

package/dist/types/components/Sidebar/index.d.ts

@@ -0,0 +1,4 @@
+export { Sidebar } from './Sidebar';
+export { SidebarGroup } from './SidebarGroup';
+export { SidebarMenu } from './SidebarMenu';
+export { useSidebar } from './hooks/useSidebar';

package/dist/types/components/Sidebar/stories/examples/Sidebar.example.d.ts

@@ -0,0 +1,57 @@
+import { SidebarProps } from '../../types';
+/**
+ * Here's the basic style setup. In your css file e.g tailwind.css, add
+ *
+```css
+\@layer base {
+    :root {
+      --sidebar-background: 0 0% 98%;
+      --sidebar-foreground: 240 5.3% 26.1%;
+      --sidebar-primary: 240 5.9% 10%;
+      --sidebar-primary-foreground: 0 0% 98%;
+      --sidebar-accent: 240 4.8% 95.9%;
+      --sidebar-accent-foreground: 240 5.9% 10%;
+      --sidebar-border: 220 13% 91%;
+      --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+ 
+    .dark {
+      --sidebar-background: 240 5.9% 10%;
+      --sidebar-foreground: 240 4.8% 95.9%;
+      --sidebar-primary: 224.3 76.3% 48%;
+      --sidebar-primary-foreground: 0 0% 100%;
+      --sidebar-accent: 240 3.7% 15.9%;
+      --sidebar-accent-foreground: 240 4.8% 95.9%;
+      --sidebar-border: 240 3.7% 15.9%;
+      --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+}
+```
+ *
+ * then add this config in tailwind.config.ts
+ *
+```js
+{
+    sidebar: {
+      DEFAULT: 'hsl(var(--sidebar-background))',
+      foreground: 'hsl(var(--sidebar-foreground))',
+      primary: 'hsl(var(--sidebar-primary))',
+      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+      accent: 'hsl(var(--sidebar-accent))',
+      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+      border: 'hsl(var(--sidebar-border))',
+      ring: 'hsl(var(--sidebar-ring))',
+    }
+}
+```
+ * @param props
+ * @returns
+ */
+export declare const SidebarExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarWithCollapsibleGroupExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarWithSubMenuExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarWithSecondaryNavigationExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarWithCollapsibleTreeExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarInADialogExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarOnTheRightExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLeftAndRightExample: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Sidebar/stories/examples/components/AppMain.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+import { SidebarProps } from '../../../types';
+export declare const AppMain: ({ side, ...props }: HTMLAttributes<HTMLDivElement> & Pick<SidebarProps, "side">) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Sidebar/stories/examples/components/AppSidebar.d.ts

@@ -0,0 +1,6 @@
+import { SidebarProps } from '../../../types';
+export declare const AppSidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppSidebarWithCollapsibleGroup: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppSidebarWithSubMenu: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppSidebarWithSecondaryNavigation: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppSidebarCollapsibleTree: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Sidebar/stories/examples/components/SearchForm.d.ts

@@ -0,0 +1 @@
+export declare const SearchForm: ({ ...props }: React.ComponentProps<"form">) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Sidebar/stories/examples/components/VersionSwitcher.d.ts

@@ -0,0 +1,4 @@
+export declare const VersionSwitcher: ({ versions, defaultVersion, }: {
+    versions: string[];
+    defaultVersion: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Sidebar/types.d.ts

@@ -0,0 +1,55 @@
+import { TooltipProviderProps } from '@radix-ui/react-tooltip';
+import { HTMLAttributes } from 'react';
+import { VariantProps } from '../../libs';
+import { TooltipContentProps } from '../Tooltip/types';
+import { getSidebarMenuButtonClasses } from './constants';
+export type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+export type SidebarProps = HTMLAttributes<HTMLDivElement> & Partial<{
+    side: "left" | "right";
+    variant: "sidebar" | "floating" | "inset";
+    collapsible: "offcanvas" | "icon" | "none";
+}>;
+export type SidebarProviderProps = HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    tooltipProvider?: TooltipProviderProps;
+};
+export type SidebarGroupProps = HTMLAttributes<HTMLDivElement>;
+export type SidebarGroupLabelProps = HTMLAttributes<HTMLDivElement> & Partial<{
+    asChild: boolean;
+}>;
+export type SidebarGroupActionProps = HTMLAttributes<HTMLButtonElement> & Partial<{
+    asChild: boolean;
+}>;
+export type SidebarGroupContentProps = HTMLAttributes<HTMLDivElement>;
+export type SidebarMenuProps = HTMLAttributes<HTMLUListElement>;
+export type SidebarMenuItemProps = HTMLAttributes<HTMLLIElement>;
+export type SidebarMenuButtonProps = HTMLAttributes<HTMLButtonElement> & Partial<{
+    asChild: boolean;
+    isActive: boolean;
+    tooltip: string | TooltipContentProps;
+}> & VariantProps<typeof getSidebarMenuButtonClasses>;
+export type SidebarMenuActionProps = HTMLAttributes<HTMLButtonElement> & Partial<{
+    asChild: boolean;
+    showOnHover: boolean;
+}>;
+export type SidebarMenuBadgeProps = HTMLAttributes<HTMLDivElement>;
+export type SidebarMenuSkeletonProps = HTMLAttributes<HTMLDivElement> & Partial<{
+    showIcon: boolean;
+}>;
+export type SidebarMenuSubProps = HTMLAttributes<HTMLUListElement>;
+export type SidebarMenuSubItemProps = HTMLAttributes<HTMLLIElement>;
+export type SidebarMenuSubButtonProps = HTMLAttributes<HTMLAnchorElement> & Partial<{
+    asChild: boolean;
+    size: "sm" | "md";
+    isActive: boolean;
+}>;

package/dist/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile';

package/dist/types/hooks/useIsMobile/index.d.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile';

package/dist/types/hooks/useIsMobile/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobile: () => boolean;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 /** actions */
 export * from './components/Anchor';
 export * from './components/Button';
-export * from './components/Breadcrumbs';
+export * from './components/Breadcrumb';
 export * from './components/Menu';
 export * from './components/Pagination';
 export * from './components/ThemeSwitch';
@@ -42,3 +42,5 @@ export * from './components/HoverCard';
 export * from './components/Popover';
 export * from './components/Slot';
 export * from './components/Widget';
+/** molecules */
+export * from './components/Sidebar';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.48",
+  "version": "0.0.50",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -81,7 +81,6 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-hover-card": "^1.1.2",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-navigation-menu": "^1.2.1",
@@ -104,6 +103,7 @@
     "daisyui": "^4.12.13",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.3.0",
+    "lucide-react": "^0.453.0",
     "react-day-picker": "^9.2.0",
     "react-dropzone": "^14.2.10",
     "react-international-phone": "^4.3.0",
@@ -171,5 +171,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "34986ed4f7018e59f157e933f118ba68be32fb98"
+  "gitHead": "1a3e0a5b712ff6dbb8fc8265056caedc28b2c00c"
 }

package/src/components/Anchor/Anchor.tsx

@@ -1,4 +1,4 @@
-import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import { ExternalLinkIcon } from "lucide-react";
 import { cn } from "../../utilities";
 import { getAnchorClasses } from "./constant";
 import { type AnchorProps } from "./types";
@@ -21,7 +21,7 @@ export const Anchor = ({
       {...(isExternal && { rel: "noopener noreferrer" })}
     >
       {children}
-      {isExternal ? <ExternalLinkIcon name="external" className="ml-[2px] inline" /> : null}
+      {isExternal ? <ExternalLinkIcon name="external" className="ml-[2px] inline w-4 h-4" /> : null}
     </a>
   );
 };

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,99 @@
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
+import type {
+  BreadcrumbEllipsisProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getBreadcrumbEllipsisClasses,
+  getBreadcrumbItemClasses,
+  getBreadcrumbLinkClasses,
+  getBreadcrumbListClasses,
+  getBreadcrumbPageClasses,
+  getBreadcrumbSeparatorClasses,
+} from "./constants";
+
+const Breadcrumb = ({ children, ...props }: BreadcrumbProps) => (
+  <nav aria-label="breadcrumb" {...props}>
+    {children}
+  </nav>
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  ({ className, ...props }, ref) => (
+    <ol ref={ref} className={cn(getBreadcrumbListClasses(), className)} {...props} />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn(getBreadcrumbItemClasses(), className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return <Comp ref={ref} className={cn(getBreadcrumbLinkClasses(), className)} {...props} />;
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn(getBreadcrumbPageClasses(), className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: BreadcrumbSeparatorProps) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn(getBreadcrumbSeparatorClasses(), className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: BreadcrumbEllipsisProps) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn(getBreadcrumbEllipsisClasses(), className)}
+    {...props}
+  >
+    <EllipsisIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+Breadcrumb.List = BreadcrumbList;
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Link = BreadcrumbLink;
+Breadcrumb.Page = BreadcrumbPage;
+Breadcrumb.Separator = BreadcrumbSeparator;
+Breadcrumb.Ellipsis = BreadcrumbEllipsis;
+
+export { Breadcrumb };

package/src/components/Breadcrumb/constants.ts

@@ -0,0 +1,15 @@
+import { cva } from "../../libs";
+
+export const getBreadcrumbListClasses = cva(
+  "flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5"
+);
+
+export const getBreadcrumbItemClasses = cva("inline-flex items-center gap-1.5");
+
+export const getBreadcrumbLinkClasses = cva("transition-colors");
+
+export const getBreadcrumbPageClasses = cva("font-normal");
+
+export const getBreadcrumbSeparatorClasses = cva("[&>svg]:w-3.5 [&>svg]:h-3.5");
+
+export const getBreadcrumbEllipsisClasses = cva("flex h-9 w-9 items-center justify-center");

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { Breadcrumb } from "./Breadcrumb";

package/src/components/Breadcrumb/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+export type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+  separator?: ReactNode;
+};
+
+export type BreadcrumbListProps = React.HTMLAttributes<HTMLUListElement>;
+
+export type BreadcrumbItemProps = React.HTMLAttributes<HTMLLIElement>;
+
+export type BreadcrumbLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
+  asChild?: boolean;
+};
+
+export type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+
+export type BreadcrumbSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
+
+export type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;

package/src/components/Calendar/Calendar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { DayPicker } from "react-day-picker";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { cn } from "../../utilities";
 import { getButtonClasses } from "../Button/constants";
 import { type CalendarProps } from "./types";