aloha-ui-library 0.2.0 → 0.2.2

package/dist/colors.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Paleta de colores de Aloha UI
+ * Importa estos colores para usarlos en tus componentes
+ *
+ * @example
+ * import { colors, cssVars } from '@srteam-dev/aloha-ui';
+ *
+ * // Usar con valor hexadecimal directo
+ * <div style={{ backgroundColor: colors.olivo }}>
+ *   Contenido
+ * </div>
+ *
+ * // Usar con variable CSS
+ * <div style={{ backgroundColor: cssVars.olivo }}>
+ *   Contenido
+ * </div>
+ */
+export declare const colors: {
+    readonly olivo: "#383517";
+    readonly lima: "#B4DE6E";
+    readonly bosque: "#648C2C";
+    readonly hueso: "#F5F5DC";
+    readonly piedra: "#4A443F";
+    readonly corteza: "#6B5B3E";
+    readonly girasol: "#FFD400";
+    readonly coral: "#FF6F61";
+    readonly aqua: "#66FFCC";
+    readonly lavanda: "#B388D3";
+    readonly electrico: "#0084FF";
+    readonly marmol: "#D8D8C1";
+    readonly ice: "#FEFEFC";
+    readonly koala: "#A69C8A";
+};
+/**
+ * Variables CSS para usar los colores
+ * Usa estas variables para aprovechar las CSS custom properties
+ *
+ * @example
+ * import { cssVars } from '@srteam-dev/aloha-ui';
+ *
+ * <div style={{ backgroundColor: cssVars.olivo }}>
+ *   Contenido con variable CSS
+ * </div>
+ */
+export declare const cssVars: {
+    readonly olivo: "var(--colors-olivo)";
+    readonly lima: "var(--colors-lima)";
+    readonly bosque: "var(--colors-bosque)";
+    readonly hueso: "var(--colors-hueso)";
+    readonly piedra: "var(--colors-piedra)";
+    readonly corteza: "var(--colors-corteza)";
+    readonly girasol: "var(--colors-girasol)";
+    readonly coral: "var(--colors-coral)";
+    readonly aqua: "var(--colors-aqua)";
+    readonly lavanda: "var(--colors-lavanda)";
+    readonly electrico: "var(--colors-electrico)";
+    readonly marmol: "var(--colors-marmol)";
+    readonly ice: "var(--colors-ice)";
+    readonly koala: "var(--colors-koala)";
+};
+export type ColorName = keyof typeof colors;
+export type ColorValue = typeof colors[ColorName];
+/**
+ * Obtiene el valor hexadecimal de un color por su nombre
+ */
+export declare const getColor: (colorName: ColorName) => ColorValue;
+/**
+ * Lista de todos los colores disponibles
+ */
+export declare const colorEntries: [ColorName, ColorValue][];
+/**
+ * Obtiene la variable CSS de un color por su nombre
+ */
+export declare const getCssVar: (colorName: ColorName) => string;
+/**
+ * Variables CSS para el tema (se adaptan automáticamente a modo claro/oscuro)
+ *
+ * Modo claro:
+ * - background: hueso (#F5F5DC)
+ * - text: olivo (#383517)
+ * - highlight: corteza (#6B5B3E)
+ * - primary: lima (#B4DE6E)
+ *
+ * Modo oscuro:
+ * - background: piedra (#4A443F)
+ * - text: hueso (#F5F5DC)
+ * - highlight: corteza (#6B5B3E)
+ * - primary: bosque (#648C2C)
+ *
+ * @example
+ * import { themeVars } from '@srteam-dev/aloha-ui';
+ *
+ * <div style={{
+ *   backgroundColor: themeVars.background,
+ *   color: themeVars.text
+ * }}>
+ *   Este div se adapta automáticamente al tema
+ * </div>
+ */
+export declare const themeVars: {
+    readonly background: "var(--theme-background)";
+    readonly text: "var(--theme-text)";
+    readonly highlight: "var(--theme-highlight)";
+    readonly primary: "var(--theme-primary)";
+};
+export type ThemeName = keyof typeof themeVars;

package/dist/components/Avatar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export { Avatar };

package/dist/components/Badge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/Button.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type ColorName } from '../colors';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    /** Click handler function */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Background color from Aloha palette */
+    color?: ColorName;
+    /** Text color from Aloha palette */
+    textColor?: ColorName;
+    /** Border color from Aloha palette */
+    borderColor?: ColorName;
+    /** Icon or image element to show on the left */
+    icon?: React.ReactNode;
+    /** Border width (1-4px) */
+    borderWidth?: 1 | 2 | 3 | 4;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/Card.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FontFamily, FontWeight, ColorOption } from './Typography';
+export type CardSize = 'full' | 'constrained' | 'auto';
+export type BorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type TitleComponent = 'h1' | 'h2' | 'h3' | 'h4';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: CardSize;
+    borderRadius?: BorderRadius;
+    showBorder?: boolean;
+    backgroundColor?: ColorOption;
+    borderColor?: ColorOption;
+    shadow?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    component?: TitleComponent;
+    font?: FontFamily;
+    weight?: FontWeight;
+    titleColor?: ColorOption;
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    font?: FontFamily;
+    weight?: FontWeight;
+    descriptionColor?: ColorOption;
+    small?: boolean;
+}
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ChatMessage.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type ColorName } from '../colors';
+export type ChatMessageVariant = 'sent' | 'received';
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Texto del mensaje */
+    message: string;
+    /** Nombre del usuario */
+    name: string;
+    /** Hora del mensaje, ej: "16:34" */
+    time: string;
+    /** URL del avatar del usuario (se muestra dentro de la burbuja) */
+    avatarSrc?: string;
+    /** Fallback del avatar si no hay imagen (iniciales) */
+    avatarFallback?: string;
+    /**
+     * 'received' = izquierda, verde lima  |  'sent' = derecha, verde bosque
+     * @default 'received'
+     */
+    variant?: ChatMessageVariant;
+    /** Color de fondo de la burbuja (nombre del color Aloha) */
+    bgColor?: ColorName;
+    /** Color del texto del mensaje */
+    messageColor?: ColorName;
+    /** Color del texto del header (nombre + hora) */
+    headerColor?: ColorName;
+}
+declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatMessage };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/components/ColorPalette.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { colors, ColorName } from '../colors';
+export interface ColorSwatchProps {
+    name: ColorName;
+    value: string;
+    size?: 'sm' | 'md' | 'lg';
+    showHex?: boolean;
+    className?: string;
+}
+export declare const ColorSwatch: React.FC<ColorSwatchProps>;
+export interface ColorPaletteProps {
+    size?: 'sm' | 'md' | 'lg';
+    showHex?: boolean;
+    columns?: 2 | 3 | 4 | 5 | 6;
+    className?: string;
+}
+export declare const ColorPalette: React.FC<ColorPaletteProps>;
+export { colors };

package/dist/components/Emoji.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+declare const emojiMap: {
+    readonly crazy: string;
+    readonly explosion: string;
+    readonly happy: string;
+    readonly hi: string;
+    readonly impact: string;
+    readonly interesting: string;
+    readonly melt: string;
+    readonly mewing: string;
+};
+export type EmojiName = keyof typeof emojiMap;
+export type EmojiSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface EmojiProps extends React.HTMLAttributes<HTMLImageElement> {
+    /** Name of the emoji */
+    name: EmojiName;
+    /** Size of the emoji */
+    size?: EmojiSize;
+    /** Alt text for accessibility */
+    alt?: string;
+}
+declare const Emoji: React.ForwardRefExoticComponent<EmojiProps & React.RefAttributes<HTMLImageElement>>;
+export { Emoji, emojiMap };

package/dist/components/Error.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ErrorProps {
+    title?: string;
+    message?: string;
+    onRetry?: () => void;
+    retryText?: string;
+    className?: string;
+    variant?: 'inline' | 'card';
+    showIcon?: boolean;
+}
+export declare const Error: React.FC<ErrorProps>;

package/dist/components/ErrorFullScreen.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ErrorFullScreenProps {
+    title?: string;
+    message?: string;
+    onRetry?: () => void;
+    retryText?: string;
+    className?: string;
+    background?: 'white' | 'gray' | 'dark' | 'transparent';
+    showIcon?: boolean;
+}
+export declare const ErrorFullScreen: React.FC<ErrorFullScreenProps>;

package/dist/components/FriendListItem.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type ColorName } from '../colors';
+export type FriendItemVariant = 'user' | 'group';
+export interface FriendAvatar {
+    src?: string;
+    fallback?: string;
+}
+export interface FriendListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * 'user'  → avatar + nombre de usuario
+     * 'group' → stack de avatares + nombre del grupo
+     */
+    variant?: FriendItemVariant;
+    /** Nombre del usuario o del grupo */
+    name?: string;
+    avatarSrc?: string;
+    avatarFallback?: string;
+    /** Array de avatares para el stack (variant='group') */
+    avatars?: FriendAvatar[];
+    bgColor?: ColorName;
+    nameColor?: ColorName;
+    chevronColor?: ColorName;
+    /** Color del borde/ring de cada avatar en el stack */
+    avatarRingColor?: ColorName;
+}
+declare const FriendListItem: React.ForwardRefExoticComponent<FriendListItemProps & React.RefAttributes<HTMLButtonElement>>;
+export { FriendListItem };

package/dist/components/FullPage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FullPageProps {
+    children: React.ReactNode;
+    className?: string;
+    centered?: boolean;
+    background?: 'white' | 'gray' | 'dark' | 'transparent';
+}
+export declare const FullPage: React.FC<FullPageProps>;

package/dist/components/Grid.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { type ColorName } from '../colors';
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Number of columns (1-12 for full control) */
+    columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** Number of rows (auto by default) */
+    rows?: 'auto' | number;
+    /** Gap between grid items (in pixels or tailwind spacing) */
+    gap?: number | string;
+    /** Children components */
+    children: React.ReactNode;
+    /** Make grid responsive (auto-adjusts columns on mobile) */
+    responsive?: boolean;
+    /** Minimum column width for auto-fit (e.g., '250px') */
+    autoFit?: string;
+    /** Background color */
+    backgroundColor?: ColorName | 'transparent';
+    /** Padding */
+    padding?: number | string;
+    /** Border radius */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children components */
+    children: React.ReactNode;
+    /** Number of columns to span (1-12) */
+    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full';
+    /** Number of rows to span (1-12) */
+    rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full';
+    /** Column start position (1-12) */
+    colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** Row start position (1-12) */
+    rowStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** Background color */
+    backgroundColor?: ColorName | 'transparent' | string;
+    /** Padding */
+    padding?: number | string;
+    /** Border radius */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Display flex content */
+    flex?: boolean;
+    /** Flex direction */
+    flexDirection?: 'row' | 'col';
+    /** Align items */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify content */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+}
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Icon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ColorOption } from './Typography';
+export type IconName = 'chat' | 'friends' | 'home' | 'lang' | 'location' | 'mail' | 'music' | 'notify' | 'settings' | 'streak';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: IconName;
+    size?: IconSize;
+    color?: ColorOption;
+}
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
+export { Icon };

package/dist/components/Image.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Image source URL */
+    src: string;
+    /** Alternative text for accessibility */
+    alt: string;
+    /** Width of the image */
+    width?: number | string;
+    /** Height of the image */
+    height?: number | string;
+    /** Object fit style */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /** Image loading strategy */
+    loading?: 'lazy' | 'eager';
+    /** Fallback image URL if main image fails to load */
+    fallbackSrc?: string;
+    /** Callback when image fails to load */
+    onError?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;

package/dist/components/Input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    helperText?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/Link.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LinkProps as RouterLinkProps } from 'react-router-dom';
+export type ColorOption = 'olivo' | 'lima' | 'bosque' | 'hueso' | 'piedra' | 'corteza' | 'girasol' | 'coral' | 'aqua' | 'lavanda' | 'electrico' | 'marmol' | 'ice' | 'koala' | 'default';
+export type UnderlineOption = 'none' | 'always' | 'hover';
+type BaseLinkProps = {
+    /** Color del texto del enlace */
+    color?: ColorOption;
+    /** Color del texto en hover (si no se especifica, usa una versión más oscura del color) */
+    hoverColor?: ColorOption;
+    /** Estilo del subrayado */
+    underline?: UnderlineOption;
+    /** Si se abre en una nueva pestaña (solo para enlaces externos con href) */
+    external?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+};
+type RouterLinkVariant = BaseLinkProps & {
+    to: string | Partial<Location>;
+    href?: never;
+} & Omit<RouterLinkProps, 'to' | 'className' | 'children'>;
+type AnchorLinkVariant = BaseLinkProps & {
+    href: string;
+    to?: never;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
+export type LinkProps = RouterLinkVariant | AnchorLinkVariant;
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { Link };

package/dist/components/Loading.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LoadingProps {
+    message?: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    centered?: boolean;
+}
+export declare const Loading: React.FC<LoadingProps>;

package/dist/components/LoadingFullScreen.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LoadingFullScreenProps {
+    message?: string;
+    className?: string;
+    spinnerSize?: 'sm' | 'md' | 'lg' | 'xl';
+    background?: 'white' | 'gray' | 'dark' | 'transparent';
+}
+export declare const LoadingFullScreen: React.FC<LoadingFullScreenProps>;

package/dist/components/Logo.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ColorOption } from './Typography';
+export type LogoVariant = 'horizontal' | 'vertical' | 'icon';
+export type LogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: LogoVariant;
+    size?: LogoSize;
+    color?: ColorOption;
+}
+declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLDivElement>>;
+export { Logo };

package/dist/components/Navbar.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { LogoVariant, LogoSize } from './Logo';
+import { IconName } from './Icon';
+import { ColorOption } from './Typography';
+import { ColorName } from '../colors';
+export type NavbarVariant = 'nologin' | 'onlogin';
+export interface NavItem {
+    /** Icon name */
+    icon: IconName;
+    /** Label text */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Navigation path (for use with router navigate) */
+    to?: string;
+    /** If true, this item is active/selected */
+    active?: boolean;
+}
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Navbar variant */
+    variant?: NavbarVariant;
+    /** Logo variant to display */
+    logoVariant?: LogoVariant;
+    /** Logo size */
+    logoSize?: LogoSize;
+    /** Logo color */
+    logoColor?: ColorOption;
+    /** Background color from Aloha palette (only for nologin) */
+    backgroundColor?: ColorName;
+    /** Text color */
+    textColor?: ColorName;
+    /** Active item indicator color (border around icon) */
+    activeColor?: ColorName;
+    /** Nav items background color (onlogin only) */
+    navItemsBgColor?: ColorName;
+    /** Button background color (nologin only) */
+    buttonColor?: ColorName;
+    /** Button text color (nologin only) */
+    buttonTextColor?: ColorName;
+    /** Button border color (nologin only) */
+    buttonBorderColor?: ColorName;
+    /** Current language label (e.g., "ES", "EN") (nologin only) */
+    currentLanguage?: string;
+    /** Language selector click handler (nologin only) */
+    onLanguageClick?: () => void;
+    /** Action button click handler (nologin only) */
+    onActionClick?: () => void;
+    /** Custom logo element (overrides default Logo component) */
+    customLogo?: React.ReactNode;
+    /** If true, shows "Register" instead of "Login" (nologin only) */
+    isRegister?: boolean;
+    /** Button text (overrides default "Iniciar Sesión" or "Registrarse") (nologin only) */
+    buttonText?: string;
+    /** Navigation items (onlogin only) */
+    navItems?: NavItem[];
+    /** Navigate function from router (onlogin only) */
+    navigate?: (path: string) => void;
+}
+declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
+export { Navbar };

package/dist/components/Notification.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface NotificationProps {
+    id?: string;
+    type: 'like' | 'comment' | 'follow' | 'mention' | 'info';
+    title: string;
+    message: string;
+    timestamp: string;
+    avatar?: string;
+    read?: boolean;
+    onClose?: () => void;
+    onClick?: () => void;
+    className?: string;
+}
+declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;
+export { Notification };

package/dist/components/Pattern.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ColorName } from '../colors';
+declare const patternMap: {
+    readonly face1: string;
+    readonly face2: string;
+    readonly face3: string;
+    readonly face4: string;
+    readonly face5: string;
+    readonly face6: string;
+};
+export type PatternName = keyof typeof patternMap;
+export type PatternSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface PatternProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Name of the pattern */
+    name: PatternName;
+    /** Size of the pattern */
+    size?: PatternSize;
+    /** Primary color (will replace the pattern's main color) */
+    color?: ColorName;
+    /** Background color */
+    backgroundColor?: ColorName | 'transparent';
+    /** If true, the pattern will be used as a repeating background */
+    repeat?: boolean;
+    /** Custom width (only used when repeat is false) */
+    width?: number;
+    /** Custom height (only used when repeat is false) */
+    height?: number;
+    /** Padding around the pattern (in pixels) */
+    padding?: number;
+    /** Border radius (rounded corners) */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+declare const Pattern: React.ForwardRefExoticComponent<PatternProps & React.RefAttributes<HTMLDivElement>>;
+export { Pattern, patternMap };

package/dist/components/PatternFill.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type PatternName } from './Pattern';
+import { type ColorName } from '../colors';
+export interface PatternFillProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Width of the container (px or '100%') */
+    width?: number | string;
+    /** Height of the container (px or '100%') */
+    height?: number | string;
+    /** Size of each pattern (px) */
+    patternSize?: number;
+    /** Gap between patterns (px) */
+    gap?: number;
+    /** Array of patterns to use (if empty, uses all patterns randomly) */
+    patterns?: PatternName[];
+    /** Array of colors to use (if empty, uses random colors) */
+    colors?: ColorName[];
+    /** If true, patterns will be randomly rotated (only 0°, 90°, 180°, 270°) */
+    randomRotation?: boolean;
+    /** If true, patterns will have random scales */
+    randomScale?: boolean;
+    /** If true, patterns will have random opacity */
+    randomOpacity?: boolean;
+    /** Background color of the container */
+    backgroundColor?: ColorName | 'transparent';
+    /** Border radius */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Padding around the container */
+    padding?: number;
+}
+declare const PatternFill: React.ForwardRefExoticComponent<PatternFillProps & React.RefAttributes<HTMLDivElement>>;
+export { PatternFill };