tw-react-components 0.0.134 → 0.0.137

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.134",
+  "version": "0.0.137",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {
@@ -23,7 +23,10 @@
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     },
-    "./tailwindcss-plugin.cjs": {
+    "./css": {
+      "default": "./index.css"
+    },
+    "./config": {
       "default": "./tailwindcss-plugin.cjs"
     },
     "./package.json": "./package.json"

package/src/components/Form/controls/custom/date-time/DateSelector.d.ts

@@ -3,8 +3,8 @@ export type View = 'days' | 'months' | 'years';
 type DateSelectorProps = {
     date: Date;
     value?: string | Date | null;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     locale?: string;
     calendarView: View;
     setCalendarView: (view: View) => void;

package/src/components/Form/controls/custom/date-time/DaysView.d.ts

@@ -4,8 +4,8 @@ type DaysViewProps = {
     value?: string | Date | null;
     month: number;
     year: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     locale?: string;
     setNewDate: (date: Date) => void;
 };

package/src/components/Form/controls/custom/date-time/MonthsView.d.ts

@@ -3,8 +3,8 @@ type MonthsViewProps = {
     date: Date;
     value?: string | Date | null;
     year: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     locale?: string;
     selectMonth: (month: number) => () => void;
 };

package/src/components/Form/controls/custom/date-time/TimeSelector.d.ts

@@ -2,8 +2,8 @@ import { FC } from 'react';
 type TimeSelectorProps = {
     date: Date;
     step?: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     setNewDate: (date: Date) => void;
 };
 export declare const TimeSelector: FC<TimeSelectorProps>;

package/src/components/Form/controls/custom/date-time/YearsView.d.ts

@@ -3,8 +3,8 @@ type YearsViewProps = {
     date: Date;
     value?: string | Date | null;
     years: number[];
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     selectYear: (month: number) => () => void;
 };
 export declare const YearsView: FC<YearsViewProps>;

package/src/components/Form/controls/custom/date-time/index.d.ts

@@ -6,8 +6,8 @@ export type DateTimeInputProps = {
     hasErrors?: boolean;
     clearable?: boolean;
     step?: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     displayFormat?: string;
     displayLocale?: string;
     onChange?: (date?: Date | null) => void;
@@ -18,8 +18,8 @@ export declare const DateTimeInput: import("react").ForwardRefExoticComponent<{
     hasErrors?: boolean;
     clearable?: boolean;
     step?: number;
-    minDate?: Date;
-    maxDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
     displayFormat?: string;
     displayLocale?: string;
     onChange?: (date?: Date | null) => void;

package/src/components/Form/controls/custom/file.d.ts

@@ -0,0 +1,11 @@
+import { BasicInputProps } from '../primitive';
+export type FileInputProps = {
+    value?: string | null;
+    onChange?: (item?: string) => void;
+    onFileChange?: (file?: File) => void;
+} & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'name' | 'label' | 'placeholder' | 'description' | 'size' | 'accept' | 'required' | 'hasErrors' | 'disabled'>;
+export declare const FileInput: import("react").ForwardRefExoticComponent<{
+    value?: string | null;
+    onChange?: (item?: string) => void;
+    onFileChange?: (file?: File) => void;
+} & Pick<BasicInputProps<"text">, "size" | "label" | "accept" | "disabled" | "name" | "placeholder" | "required" | "className" | "inputClassName" | "extensionClassName" | "description" | "hasErrors"> & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/custom/index.d.ts

@@ -1,2 +1,3 @@
 export * from './date-time';
 export * from './select';
+export * from './file';

package/src/components/Form/controls/custom/select/index.d.ts

@@ -30,7 +30,7 @@ export type SelectInputProps<T = any> = {
     multiple: true;
     value: T[];
     onChange?: (item?: T[]) => void;
-}) & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'name' | 'label' | 'size' | 'placeholder' | 'required' | 'hasErrors' | 'disabled' | 'readOnly'>;
+}) & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'name' | 'label' | 'description' | 'size' | 'placeholder' | 'required' | 'hasErrors' | 'disabled' | 'readOnly'>;
 export declare const SelectInput: (<T>(props: SelectInputProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => JSX.Element) & {

package/src/components/Form/controls/primitive/BasicInput.d.ts

@@ -1,4 +1,3 @@
-import { LucideIcon } from 'lucide-react';
 import { ComponentProps, FC, MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { Size } from '../../../types';
 export type InputType = ComponentProps<'input'>['type'] | 'textarea';
@@ -11,7 +10,7 @@ export type BasicInputProps<Type extends InputType> = {
     size?: Size;
     hasErrors?: boolean;
     clearable?: boolean;
-    suffixIcon?: LucideIcon;
+    suffixIcon?: FC<ComponentProps<'svg'>>;
     onClear?: () => void;
     onSuffixIconClick?: (event: MouseEvent<HTMLDivElement>) => void;
 } & Omit<Type extends 'textarea' ? ComponentProps<'textarea'> : ComponentProps<'input'>, 'id' | 'ref' | 'size'>;
@@ -24,7 +23,7 @@ export declare const BasicInput: import("react").ForwardRefExoticComponent<{
     size?: Size;
     hasErrors?: boolean;
     clearable?: boolean;
-    suffixIcon?: LucideIcon;
+    suffixIcon?: FC<ComponentProps<"svg">>;
     onClear?: () => void;
     onSuffixIconClick?: (event: MouseEvent<HTMLDivElement>) => void;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "id" | "ref" | "size"> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/src/components/Form/controls/primitive/NumberInput.d.ts

@@ -1,3 +1,8 @@
+import { ReactNode } from 'react';
 import { BasicInputProps } from './BasicInput';
-export type NumberInputProps = Omit<BasicInputProps<'number'>, 'type'>;
-export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export type NumberInputProps = Omit<BasicInputProps<'number'>, 'type'> & {
+    unit?: ReactNode;
+};
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<BasicInputProps<"number">, "type"> & {
+    unit?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/with-form.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent } from 'react';
 import { ControllerRenderProps, Validate } from 'react-hook-form';
-import { DateTimeInputProps, DateTimeInputType, SelectInputProps, SelectInputType } from './custom';
+import { DateTimeInputProps, DateTimeInputType, FileInputProps, SelectInputProps, SelectInputType } from './custom';
 import { BasicInputProps, CheckboxInputProps, EmailInputProps, InputType, NumberInputProps, PasswordInputProps, TextInputProps, TextareaInputProps } from './primitive';
 export type WithFormProps<Type extends InputType | SelectInputType, Props = Type extends DateTimeInputType ? DateTimeInputProps : Type extends SelectInputType ? SelectInputProps : Omit<BasicInputProps<Type>, 'type'>> = {
     name: string;
@@ -48,4 +48,9 @@ export declare const FormInputs: {
         pattern?: RegExp;
         validate?: Validate<any, any> | undefined;
     } & Omit<SelectInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
+    File: ForwardRefExoticComponent<{
+        name: string;
+        pattern?: RegExp;
+        validate?: Validate<string, any> | undefined;
+    } & Omit<FileInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
 };

package/src/components/Layout/index.d.ts

@@ -1,6 +1,27 @@
-import { FC, PropsWithChildren } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 import { NavbarProps } from '../Navbar';
-import { SidebarProps } from '../Sidebar';
+import { Sidebar } from '../Sidebar';
+export type SidebarItem = {
+    pathname: string;
+    title: string;
+    Icon?: LucideIcon;
+    hidden?: boolean;
+    items?: SidebarItem[];
+};
+export type SidebarProps = {
+    root?: ComponentProps<typeof Sidebar>;
+    basePath?: string;
+    smallLogo?: ReactNode;
+    fullLogo?: ReactNode;
+    items: (({
+        type: 'item';
+    } & SidebarItem) | {
+        type: 'group';
+        title?: string;
+        items: SidebarItem[];
+    })[];
+};
 type Props = {
     className?: string;
     sidebarProps: SidebarProps;

package/src/components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/src/components/Sheet/index.d.ts

@@ -0,0 +1,26 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const sheetVariants: (props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+export declare const Sheet: React.FC<SheetPrimitive.DialogProps> & {
+    Portal: React.FC<SheetPrimitive.DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Close: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+};
+export {};

package/src/components/Sidebar/index.d.ts

@@ -1,26 +1,85 @@
-import { LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-export type SidebarSeparator = {
-    type: 'separator';
-    title?: string;
-    hidden?: boolean;
+import { type VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+import { Tooltip } from '../Tooltip';
+export type SidebarContext = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
 };
-export type SidebarItem = {
-    type?: 'item';
-    pathname: string;
-    title: string;
-    label?: ReactNode;
-    Icon: LucideIcon;
-    hidden?: boolean;
-    items?: SidebarItem[];
-};
-export type SidebarProps = {
+export declare const SidebarContext: import("react").Context<SidebarContext | null>;
+export declare function useSidebar(): SidebarContext;
+export declare const SidebarContextProvider: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
     open?: boolean;
-    className?: string;
-    items: (SidebarItem | SidebarSeparator)[];
-    basePath?: string;
-    smallLogo?: ReactNode;
-    fullLogo?: ReactNode;
-    footer?: ReactNode;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupAction: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        asChild?: boolean;
+    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    GroupContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        asChild?: boolean;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<{
+        inputClassName?: string;
+        extensionClassName?: string;
+        type?: import("../Form").InputType;
+        label?: string;
+        description?: import("react").ReactNode;
+        size?: import("..").Size;
+        hasErrors?: boolean;
+        clearable?: boolean;
+        suffixIcon?: import("react").FC<ComponentProps<"svg">>;
+        onClear?: () => void;
+        onSuffixIconClick?: (event: import("react").MouseEvent<HTMLDivElement>) => void;
+    } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref" | "id" | "size"> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+    Inset: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Menu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    MenuAction: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        asChild?: boolean;
+        showOnHover?: boolean;
+    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    MenuBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    MenuButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        asChild?: boolean;
+        isActive?: boolean;
+        tooltip?: string | ComponentProps<typeof Tooltip>;
+    } & VariantProps<(props?: ({
+        variant?: "default" | "outline" | null | undefined;
+        size?: "default" | "sm" | "lg" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    MenuItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    MenuSkeleton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        showIcon?: boolean;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        asChild?: boolean;
+        size?: "sm" | "md";
+        isActive?: boolean;
+    }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Rail: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        size?: import("..").Size;
+        color?: import("..").Color;
+        variant?: import("../Button").ButtonVariant;
+        rounded?: boolean;
+        prefixIcon?: import("lucide-react").LucideIcon;
+        suffixIcon?: import("lucide-react").LucideIcon;
+    } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
-export declare const Sidebar: import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLDivElement>>;

package/src/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const Skeleton: FC<HTMLAttributes<HTMLDivElement>>;

package/src/components/index.d.ts

@@ -14,7 +14,10 @@ export * from './ListSorter';
 export * from './Navbar';
 export * from './Pagination';
 export * from './Popover';
+export * from './Separator';
+export * from './Sheet';
 export * from './Sidebar';
+export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
 export * from './Table';

package/src/contexts/LayoutContext.d.ts

@@ -1,13 +1,10 @@
 import { FC, PropsWithChildren } from 'react';
 export type LayoutContext = {
     theme: ThemeState;
-    sidebarOpen: boolean;
     toggleTheme: () => void;
-    setSidebarOpen: (open: boolean) => void;
 };
 export declare const LayoutContext: import("react").Context<LayoutContext | undefined>;
 export declare const LayoutContextProvider: FC<PropsWithChildren>;
 export declare function useLayoutContext(): LayoutContext;
 export type ThemeState = 'dark' | 'light';
 export declare const THEME_KEY = "tw-react-components__theme";
-export declare const SIDEBAR_KEY = "tw-react-components__sidebar";

package/src/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useDays';
+export * from './useIsMobile';
 export * from './useLongPress';
 export * from './useMonths';
 export * from './useOnSwipe';

package/src/hooks/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/tailwindcss-plugin.cjs

@@ -0,0 +1,88 @@
+const { fontFamily } = require('tailwindcss/defaultTheme');
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+  () => {
+    // do nothing
+  },
+  {
+    theme: {
+      container: {
+        center: true,
+        padding: '2rem',
+        screens: {
+          '2xl': '1400px',
+        },
+      },
+      extend: {
+        colors: {
+          border: 'hsl(var(--border))',
+          input: 'hsl(var(--input))',
+          ring: 'hsl(var(--ring))',
+          background: 'hsl(var(--background))',
+          foreground: 'hsl(var(--foreground))',
+          primary: {
+            DEFAULT: 'hsl(var(--primary))',
+            foreground: 'hsl(var(--primary-foreground))',
+          },
+          secondary: {
+            DEFAULT: 'hsl(var(--secondary))',
+            foreground: 'hsl(var(--secondary-foreground))',
+          },
+          destructive: {
+            DEFAULT: 'hsl(var(--destructive))',
+            foreground: 'hsl(var(--destructive-foreground))',
+          },
+          muted: {
+            DEFAULT: 'hsl(var(--muted))',
+            foreground: 'hsl(var(--muted-foreground))',
+          },
+          accent: {
+            DEFAULT: 'hsl(var(--accent))',
+            foreground: 'hsl(var(--accent-foreground))',
+          },
+          popover: {
+            DEFAULT: 'hsl(var(--popover))',
+            foreground: 'hsl(var(--popover-foreground))',
+          },
+          card: {
+            DEFAULT: 'hsl(var(--card))',
+            foreground: 'hsl(var(--card-foreground))',
+          },
+          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))',
+          },
+        },
+        borderRadius: {
+          lg: `var(--radius)`,
+          md: `calc(var(--radius) - 2px)`,
+          sm: 'calc(var(--radius) - 4px)',
+        },
+        fontFamily: {
+          sans: ['var(--font-sans)', ...fontFamily.sans],
+        },
+        keyframes: {
+          'accordion-down': {
+            from: { height: '0' },
+            to: { height: 'var(--radix-accordion-content-height)' },
+          },
+          'accordion-up': {
+            from: { height: 'var(--radix-accordion-content-height)' },
+            to: { height: '0' },
+          },
+        },
+        animation: {
+          'accordion-down': 'accordion-down 0.2s ease-out',
+          'accordion-up': 'accordion-up 0.2s ease-out',
+        },
+      },
+    },
+  },
+);

package/src/components/Sidebar/SidebarItem.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { type SidebarItem } from '.';
-export type SidebarItemProps = SidebarItem & {
-    active?: boolean;
-    isChild?: boolean;
-    basePath: string;
-    sidebarOpen: boolean;
-    onClick?: () => void;
-};
-export declare const SidebarItemComp: FC<SidebarItemProps>;