@e-burgos/tucu-ui 1.0.0

package/libs/framer-motion/fade-in-bottom.d.ts

@@ -0,0 +1,18 @@
+export declare function fadeInBottom(type?: string, duration?: number, translateY?: number): {
+    enter: {
+        y: number;
+        opacity: number;
+        transition: {
+            type: string;
+            duration: number;
+        };
+    };
+    exit: {
+        y: number;
+        opacity: number;
+        transition: {
+            type: string;
+            duration: number;
+        };
+    };
+};

package/libs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './range-map';
+export * from './framer-motion/fade-in-bottom';
+export * from './local-storage';

package/libs/local-storage/index.d.ts

@@ -0,0 +1,7 @@
+export declare const isClient: () => boolean;
+export declare const storage: {
+    get: (key: string) => any;
+    set: (key: string, value: any) => void;
+    remove: (key: string) => void;
+    clear: () => void;
+};

package/libs/range-map.d.ts

@@ -0,0 +1 @@
+export default function rangeMap(n: number, fn: (i: number) => any): any[];

package/lucide-react/index.d.ts

@@ -0,0 +1 @@
+export * from 'lucide-react';

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@e-burgos/tucu-ui",
+  "description": "Tucu UI Library",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "style": "./index.css",
+  "author": "Esteban Burgos",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/e-burgos/tucu-ui"
+  },
+  "keywords": [
+    "ui",
+    "tucu-ui",
+    "e-burgos",
+    "tailwind",
+    "components",
+    "library",
+    "react",
+    "zustand"
+  ],
+  "homepage": "https://tucu-ui.netlify.app",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "style": "./index.css",
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./styles": "./index.css"
+  },
+  "files": [
+    "**/*"
+  ],
+  "sideEffects": true,
+  "scripts": {
+    "storybook": "storybook dev --initial-path=/docs/1-documentation-1-introduction--documentation -p 6006",
+    "build-storybook": "storybook build --output-dir ../../dist/ui/storybook-tucu-ui",
+    "publish-storybook": "pnpm dlx chromatic --project-token --force-rebuild --exit-zero-on-changes --auto-accept-changes",
+    "serve-storybook": "serve ../../dist/ui/storybook-tucu-ui -p 8080",
+    "chromatic": "pnpm dlx chromatic --project-token --force-rebuild",
+    "storybook-doctor": "pnpm dlx storybook doctor",
+    "publish:lib": "cd ../../dist/ui/tucu-ui && pnpm npm publish --access public --no-git-checks",
+    "install:lib": "cd ../../ui/tucu-ui && pnpm install"
+  },
+  "dependencies": {
+    "@headlessui/react": "2.2.4",
+    "@tailwindcss/typography": "0.0.0-insiders.0339c42",
+    "classnames": "^2.5.1",
+    "framer-motion": "12.23.3",
+    "lucide-react": "^0.460.0",
+    "react-dropzone": "14.3.8",
+    "react-hook-form": "7.60.0",
+    "react-router-dom": "7.9.1",
+    "react-router": "7.9.1",
+    "react-use": "^17.6.0",
+    "recharts": "3.0.0",
+    "swiper": "11.2.8",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.10",
+    "postcss": "^8.5.6",
+    "prismjs": "^1.30.0",
+    "@types/prismjs": "^1.26.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  }
+}

package/react-router-dom/index.d.ts

@@ -0,0 +1 @@
+export * from 'react-router-dom';

package/storybook/components/StoryContainer.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare const StoryContainer: ({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StoryContainer;

package/storybook/components/pages/Accessibility.d.ts

@@ -0,0 +1 @@
+export declare function Accessibility(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/pages/Introduction.d.ts

@@ -0,0 +1 @@
+export declare function Introduction(): import("react/jsx-runtime").JSX.Element;

package/storybook/hooks/useDummy.d.ts

@@ -0,0 +1,34 @@
+export declare const menuItems: ({
+    name: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    href: string;
+    component: import("react/jsx-runtime").JSX.Element;
+    dropdownItems?: undefined;
+} | {
+    name: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    href: string;
+    component: import("react/jsx-runtime").JSX.Element;
+    dropdownItems: {
+        name: string;
+        href: string;
+        component: import("react/jsx-runtime").JSX.Element;
+    }[];
+})[];
+export declare const menuItemsWithDropdown: ({
+    name: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    href: string;
+    component: import("react/jsx-runtime").JSX.Element;
+    dropdownItems?: undefined;
+} | {
+    name: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    href: string;
+    component: import("react/jsx-runtime").JSX.Element;
+    dropdownItems: {
+        name: string;
+        href: string;
+        component: import("react/jsx-runtime").JSX.Element;
+    }[];
+})[];

package/swiper-react/index.d.ts

@@ -0,0 +1,2 @@
+export * from 'swiper/react';
+export * from 'swiper/modules';

package/themes/components/pages/not-found.d.ts

@@ -0,0 +1,2 @@
+export declare const NotFoundPage: () => import("react/jsx-runtime").JSX.Element;
+export default NotFoundPage;

package/themes/components/theme-provider/app-routes.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { IMenuItem } from '../../../components/common/menu-item';
+type AppRouteType = {
+    key: string;
+    path: string;
+    element: JSX.Element;
+};
+interface AppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+    component: JSX.Element;
+    dropdownItems?: AppRoutesMenuItem[];
+}
+interface AppRoutesProps {
+    menuItems: AppRoutesMenuItem[];
+}
+export declare const AppRoutes: FC<AppRoutesProps>;
+export default AppRoutes;
+export type { AppRoutesMenuItem, AppRoutesProps, AppRouteType };

package/themes/components/theme-provider/index.d.ts

@@ -0,0 +1,26 @@
+import { Routes } from 'react-router-dom';
+import { AppRoutesMenuItem } from './app-routes';
+import { ISettingAction, MODE, PresetColorType } from '../../config';
+import { LayoutTypeProps } from '../../../components/layouts/root-layout';
+interface ThemeProviderProps extends Omit<LayoutTypeProps, 'menuItems'> {
+    menuItems: AppRoutesMenuItem[];
+    brandColor?: PresetColorType;
+    customPaletteColor?: {
+        primary?: PresetColorType | string;
+        secondary?: PresetColorType | string;
+        accent?: PresetColorType | string;
+        dark?: PresetColorType | string;
+        light?: PresetColorType | string;
+    };
+    showSettings?: boolean;
+    mode?: MODE;
+    settingActions?: ISettingAction;
+    customRoutes?: React.ReactElement<typeof Routes>;
+    withRouterProvider?: boolean;
+    headerClassName?: string;
+    contentClassName?: string;
+    fullWidth?: boolean;
+}
+export declare function ThemeProvider({ logo, rightButton, brandColor, customPaletteColor, showSettings, customRoutes, className, headerClassName, contentClassName, fullWidth, mode: appMode, menuItems: appMenuItems, layout: appLayout, settingActions, withRouterProvider, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export default ThemeProvider;
+export type { ThemeProviderProps };

package/themes/components/theme-provider/settings-button.d.ts

@@ -0,0 +1,2 @@
+export declare function SettingsButton(): import("react/jsx-runtime").JSX.Element | null;
+export default SettingsButton;

package/themes/components/theme-provider/settings-drawer.d.ts

@@ -0,0 +1,3 @@
+export declare function RestoreDefaults(): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsDrawer(): import("react/jsx-runtime").JSX.Element;
+export default SettingsDrawer;

package/themes/config.d.ts

@@ -0,0 +1,106 @@
+import { LogoPropTypes } from '../components/logos/logo';
+export interface IThemeItem {
+    label: string;
+    value: string;
+}
+export interface ISettingAction {
+    disabledMode?: boolean;
+    disabledLayout?: boolean;
+    disabledDirection?: boolean;
+    disabledPreset?: boolean;
+    disabledSecondary?: boolean;
+    disabledAccent?: boolean;
+    disabledDark?: boolean;
+    disabledLight?: boolean;
+}
+export type MODE = 'light' | 'dark';
+export type DIRECTION = 'ltr' | 'rtl';
+export type LogoType = LogoPropTypes;
+export declare enum LAYOUT_OPTIONS {
+    NONE = "none",
+    MINIMAL = "minimal",
+    CLASSIC = "classic"
+}
+export type LayoutOptionType = 'none' | 'minimal' | 'classic';
+export declare const LayoutOptions: IThemeItem[];
+export type PresetColorType = 'Green' | 'Black' | 'Blue' | 'Red' | 'Purple' | 'Orange' | 'Rose' | 'Pink' | 'Yellow' | 'Lime' | 'Teal' | 'Cyan' | 'Navy' | 'Maroon' | 'Brown' | 'Gray' | 'Silver' | 'Gold' | 'Coral' | 'Salmon' | 'Chocolate' | 'Tan' | 'Beige' | 'Mint' | 'Lavender' | 'Violet' | 'Bufus' | 'BufusBlue' | 'BufusDark' | 'BufusAccent' | 'ThemeLight' | 'ThemeDark';
+export declare enum PRESET_LABEL_COLORS {
+    GREEN = "Green",
+    BLACK = "Black",
+    BLUE = "Blue",
+    RED = "Red",
+    PURPLE = "Purple",
+    ORANGE = "Orange",
+    ROSE = "Rose",
+    PINK = "Pink",
+    YELLOW = "Yellow",
+    LIME = "Lime",
+    TEAL = "Teal",
+    CYAN = "Cyan",
+    NAVY = "Navy",
+    MAROON = "Maroon",
+    BROWN = "Brown",
+    GRAY = "Gray",
+    SILVER = "Silver",
+    GOLD = "Gold",
+    CORAL = "Coral",
+    SALMON = "Salmon",
+    CHOCOLATE = "Chocolate",
+    TAN = "Tan",
+    BEIGE = "Beige",
+    MINT = "Mint",
+    LAVENDER = "Lavender",
+    VIOLET = "Violet",
+    BUFUS = "Bufus",
+    BUFUS_BLUE = "BufusBlue",
+    BUFUS_DARK = "BufusDark",
+    BUFUS_ACCENT = "BufusAccent",
+    THEME_LIGHT = "ThemeLight",
+    THEME_DARK = "ThemeDark"
+}
+export declare enum PRESET_COLORS {
+    GREEN = "#009e60",
+    BLACK = "#323743",
+    BLUE = "#2a52be",
+    RED = "#e34234",
+    PURPLE = "#9370DB",
+    ORANGE = "#ffa500",
+    ROSE = "#ff1493",
+    PINK = "#ffc0cb",
+    YELLOW = "#ffff00",
+    LIME = "#00ff00",
+    TEAL = "#008080",
+    CYAN = "#00ffff",
+    NAVY = "#000080",
+    MAROON = "#800000",
+    BROWN = "#a52a2a",
+    GRAY = "#808080",
+    SILVER = "#c0c0c0",
+    GOLD = "#ffd700",
+    CORAL = "#ff7f50",
+    SALMON = "#fa8072",
+    CHOCOLATE = "#d2691e",
+    TAN = "#d2b48c",
+    BEIGE = "#f5f5dc",
+    MINT = "#98ff98",
+    LAVENDER = "#e6e6fa",
+    VIOLET = "#ee82ee",
+    BUFUS = "#00D6F2",
+    BUFUS_BLUE = "#0184BF",
+    BUFUS_DARK = "#273240",
+    BUFUS_ACCENT = "#F26522",
+    THEME_LIGHT = "#fcfcfc",
+    THEME_DARK = "#0d1321"
+}
+export declare const ColorPreset: IThemeItem[];
+export declare const Direction: IThemeItem[];
+export declare const defaultLogo: LogoType;
+export declare const defaultSettingActions: ISettingAction;
+export declare const defaultLayout = LAYOUT_OPTIONS.CLASSIC;
+export declare const defaultColorPreset: IThemeItem;
+export declare const defaultSecondaryPreset: IThemeItem;
+export declare const defaultAccentPreset: IThemeItem;
+export declare const defaultDarkPreset: IThemeItem;
+export declare const defaultLightPreset: IThemeItem;
+export declare const defaultDirection = "ltr";
+export declare const defaultMode = "dark";

package/themes/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components/pages/not-found';
+export * from './components/theme-provider/app-routes';
+export * from './components/theme-provider/index';
+export * from './components/theme-provider/settings-button';
+export * from './components/theme-provider/settings-drawer';
+export * from './config';
+export * from './use-direction';
+export * from './use-theme-color';
+export * from './use-theme';

package/themes/use-direction.d.ts

@@ -0,0 +1 @@
+export declare function useDirection(layout: string): void;

package/themes/use-theme-color.d.ts

@@ -0,0 +1,10 @@
+export declare function hexToRGB(hex: string): string;
+interface IUseThemeColorProps {
+    brandColor: string;
+    secondaryColor: string;
+    accentColor: string;
+    darkColor: string;
+    lightColor: string;
+}
+export declare function useThemeColor({ brandColor, secondaryColor, accentColor, darkColor, lightColor, }: IUseThemeColorProps): void;
+export {};

package/themes/use-theme.d.ts

@@ -0,0 +1,83 @@
+import { DIRECTION, IThemeItem, LogoType, LAYOUT_OPTIONS, MODE, ISettingAction } from './config';
+export interface ITheme {
+    preset: IThemeItem;
+    secondaryPreset: IThemeItem;
+    accentPreset: IThemeItem;
+    darkPreset: IThemeItem;
+    lightPreset: IThemeItem;
+    direction: DIRECTION;
+    layout: LAYOUT_OPTIONS;
+    mode: MODE;
+    logo: LogoType;
+    isSettingsOpen: boolean;
+    showSettings: boolean;
+    settingActions: ISettingAction;
+    setPreset: (preset: IThemeItem) => void;
+    setSecondaryPreset: (secondaryPreset: IThemeItem) => void;
+    setAccentPreset: (accentPreset: IThemeItem) => void;
+    setDarkPreset: (darkPreset: IThemeItem) => void;
+    setLightPreset: (lightPreset: IThemeItem) => void;
+    setDirection: (direction: DIRECTION) => void;
+    setLayout: (layout: LAYOUT_OPTIONS) => void;
+    setMode: (mode: MODE) => void;
+    setLogo: (logo: LogoType) => void;
+    setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+    setShowSettings: (showSettings: boolean) => void;
+    setSettingActions: (settingActions: ISettingAction) => void;
+    restoreDefaultColors: () => void;
+}
+export declare const useTheme: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<ITheme>, "setState" | "persist"> & {
+    setState(partial: ITheme | Partial<ITheme> | ((state: ITheme) => ITheme | Partial<ITheme>), replace?: false | undefined): unknown;
+    setState(state: ITheme | ((state: ITheme) => ITheme), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<ITheme, {
+            preset: IThemeItem;
+            secondaryPreset: IThemeItem;
+            accentPreset: IThemeItem;
+            darkPreset: IThemeItem;
+            lightPreset: IThemeItem;
+            direction: DIRECTION;
+            layout: LAYOUT_OPTIONS;
+            mode: MODE;
+            logo: {
+                logo: null;
+                name: string;
+                secondName?: string;
+                path?: string;
+                preset?: import('./config').PRESET_LABEL_COLORS;
+                className?: string;
+                size?: "small" | "medium" | "large" | "xlarge";
+                isoType?: boolean;
+            };
+            showSettings: boolean;
+            settingActions: ISettingAction;
+        }, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ITheme) => void) => () => void;
+        onFinishHydration: (fn: (state: ITheme) => void) => () => void;
+        getOptions: () => Partial<import('zustand/middleware').PersistOptions<ITheme, {
+            preset: IThemeItem;
+            secondaryPreset: IThemeItem;
+            accentPreset: IThemeItem;
+            darkPreset: IThemeItem;
+            lightPreset: IThemeItem;
+            direction: DIRECTION;
+            layout: LAYOUT_OPTIONS;
+            mode: MODE;
+            logo: {
+                logo: null;
+                name: string;
+                secondName?: string;
+                path?: string;
+                preset?: import('./config').PRESET_LABEL_COLORS;
+                className?: string;
+                size?: "small" | "medium" | "large" | "xlarge";
+                isoType?: boolean;
+            };
+            showSettings: boolean;
+            settingActions: ISettingAction;
+        }, unknown>>;
+    };
+}>;