@mbao01/common 0.0.48 → 0.0.49

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

@@ -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.49",
   "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": "86697af331eb24f58fb8689ebd8ca76d302ad387"
 }

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/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";

package/src/components/Carousel/Carousel.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef, useCallback, useEffect, useState } from "react";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import type { CarouselApi, CarouselProps } from "./types";
 import { cn } from "../../utilities";
 import { Button } from "../Button";

package/src/components/Chart/stories/examples/LineChart.tsx

@@ -1,5 +1,5 @@
 import { type SVGProps } from "react";
-import { DrawingPinIcon } from "@radix-ui/react-icons";
+import { MapPinIcon } from "lucide-react";
 import { CartesianGrid, LabelList, Line, LineChart, XAxis, YAxis } from "recharts";
 import { Chart } from "../../Chart";
 import {
@@ -85,7 +85,7 @@ export const CustomDotLineChartExample = (props: LineChartProps) => {
           }: SVGProps<SVGSVGElement> & { payload: Record<string, string> }) => {
             const r = 24;
             return (
-              <DrawingPinIcon
+              <MapPinIcon
                 key={payload.month}
                 x={Number(cx) - r / 4}
                 y={Number(cy) - r / 4}

package/src/components/Combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 import type { ComboboxProps, Item } from "./types";
 import { cn } from "../../utilities";
 import { Button } from "../Button";
@@ -34,7 +34,7 @@ export const Combobox = <T extends Item>({
           className={cn("justify-between", classes?.trigger)}
         >
           {value && currentItem ? getItemLabel(currentItem) : label}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </Popover.Trigger>
       <Popover.Content className={cn("w-[200px] p-0", classes?.popoverContent)}>

package/src/components/Command/Command.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
 import type { CommandDialogProps, CommandInputProps, CommandProps } from "./types";
 import { cn } from "../../utilities";
 import { Dialog } from "../Dialog";
@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
 >(({ className, ...props }, ref) => (
   // eslint-disable-next-line react/no-unknown-property
   <div className={cn(getCommandInputWrapperClasses())} cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(getCommandInputClasses(), className)}

package/src/components/DatePicker/DatePicker.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { CalendarIcon } from "@radix-ui/react-icons";
 import { format } from "date-fns";
+import { CalendarDaysIcon } from "lucide-react";
 import { cn } from "../../utilities";
 import { Button } from "../Button";
 import { Calendar } from "../Calendar";
@@ -54,7 +54,7 @@ export const DatePicker = ({
           value={dateValue}
         >
           {dateLabel ?? <span>{label ?? "Pick a date"}</span>}
-          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+          <CalendarDaysIcon className="ml-auto h-4 w-4 opacity-50" />
         </Button>
       </Popover.Trigger>
       <Popover.Content

package/src/components/DatePicker/DateRangePicker.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import { type DateRange } from "react-day-picker";
-import { CalendarIcon } from "@radix-ui/react-icons";
 import { format } from "date-fns";
+import { CalendarDaysIcon } from "lucide-react";
 import { cn } from "../../utilities";
 import { Button } from "../Button";
 import { Calendar } from "../Calendar";
@@ -74,7 +74,7 @@ export const DateRangePicker = ({
           <span className="text-left text-ellipsis overflow-hidden text-nowrap">
             {rangeLabel ?? label ?? "Pick a range"}
           </span>
-          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+          <CalendarDaysIcon className="ml-auto h-4 w-4 opacity-50" />
         </Button>
       </Popover.Trigger>
       <Popover.Content className="w-auto p-0">

package/src/components/DatePicker/MultipleDatesPicker.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { CalendarIcon } from "@radix-ui/react-icons";
 import { format } from "date-fns";
+import { CalendarDaysIcon } from "lucide-react";
 import { cn } from "../../utilities";
 import { Button } from "../Button";
 import { Calendar } from "../Calendar";
@@ -58,7 +58,7 @@ export const MultipleDatesPicker = ({
           <span className="text-left text-ellipsis overflow-hidden text-nowrap">
             {rangeLabel ?? label ?? "Pick one or more dates"}
           </span>
-          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+          <CalendarDaysIcon className="ml-auto h-4 w-4 opacity-50" />
         </Button>
       </Popover.Trigger>
       <Popover.Content className="w-auto p-0">

package/src/components/Dialog/Dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";
 import type {
   DialogContentProps,
   DialogDescriptionProps,
@@ -72,7 +72,7 @@ const DialogContent = React.forwardRef<
             {...closeProps}
             className={cn(getDialogCloseClasses(), closeProps?.className)}
           >
-            <Cross2Icon className="h-4 w-4" />
+            <XIcon className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         ) : null}

package/src/components/FileUploader/FileUploader.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { FileRejection, useDropzone } from "react-dropzone";
-import { TrashIcon } from "@radix-ui/react-icons";
+import { DeleteIcon } from "lucide-react";
 import { toast } from "sonner";
 import type { DirectionOptions, FileUploaderInputProps, FileUploaderProps } from "./types";
 import { cn } from "../../utilities";
@@ -268,7 +268,7 @@ const FileUploaderItem = forwardRef<
         onClick={() => removeFileFromSet(index)}
       >
         <span className="sr-only">remove item {index}</span>
-        <TrashIcon
+        <DeleteIcon
           className={cn("w-4 h-4 shrink-0 hover:stroke-destructive duration-200 ease-in-out", {
             "text-error": isSelected,
           })}

package/src/components/Form/DatetimeInput/DatetimeCalendar.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { CalendarIcon } from "@radix-ui/react-icons";
+import { CalendarDaysIcon } from "lucide-react";
 import { cn } from "../../../utilities";
 import { Button } from "../../Button";
 import { Calendar } from "../../Calendar";
@@ -43,7 +43,7 @@ export const DatetimeCalendar = ({
           disabled={disabled}
           className={cn(getDatetimeCalendarTriggerClasses({ size }))}
         >
-          <CalendarIcon className={getDatetimeCalendarIconClasses({ size })} />
+          <CalendarDaysIcon className={getDatetimeCalendarIconClasses({ size })} />
           <span className="sr-only">calendar</span>
         </Button>
       </Popover.Trigger>