eglador-ui-react 0.1.0-alpha.3 → 0.1.0-alpha.5

package/README.md

@@ -12,6 +12,8 @@ npm install eglador-ui-react
 
 **Peer dependencies:** `react >= 18` | `react-dom >= 18` | `tailwindcss ^4`
 
+**Optional (for Carousel):** `embla-carousel ^8` | `embla-carousel-react ^8` | plugin packages as needed (`embla-carousel-autoplay`, `embla-carousel-fade`, etc.)
+
 ## Setup
 
 Add the following to your global stylesheet (e.g. `app/globals.css`) so Tailwind can detect the component classes:
@@ -24,7 +26,7 @@ Add the following to your global stylesheet (e.g. `app/globals.css`) so Tailwind
 ## Usage
 
 ```tsx
-import { Button, ButtonGroup, Checkbox, CheckboxGroup } from "eglador-ui-react";
+import { Button, ButtonGroup, Checkbox, CheckboxGroup, Input, InputGroup, Dropdown, Select, MultiSelect, Tabs, Accordion, Modal, MediaImage, MediaVideo, Tooltip, Breadcrumb, Typewriter, Carousel } from "eglador-ui-react";
 ```
 
 ## Components
@@ -35,6 +37,31 @@ import { Button, ButtonGroup, Checkbox, CheckboxGroup } from "eglador-ui-react";
 | **ButtonGroup** | `variant`, `className`, `children` |
 | **Checkbox** | `variant`, `color`, `size`, `checked`, `onChange`, `indeterminate`, `label`, `description`, `disabled`, `name`, `value`, `className` |
 | **CheckboxGroup** | `variant`, `className`, `children` |
+| **Input** | `variant`, `color`, `size`, `shape`, `state`, `icon`, `iconRight`, `loading`, `label`, `errorMessage`, `successMessage`, `disabled`, `wrapperClassName`, `className` |
+| **InputGroup** | `variant`, `className`, `children` |
+| **Dropdown** | `side`, `align`, `width`, `maxHeight`, `scroll`, `autoFlip`, `open`, `onOpenChange`, `className` |
+| **Dropdown.Trigger** | `asChild`, `className`, `children` |
+| **Dropdown.Content** | `className`, `children` |
+| **Select** | `value`, `onChange`, `options`, `placeholder`, `disabled`, `autoFlip`, `maxHeight`, `className` |
+| **MultiSelect** | `value`, `onChange`, `options`, `placeholder`, `disabled`, `autoFlip`, `maxHeight`, `searchable`, `searchPlaceholder`, `maxSelected`, `maxVisibleChips`, `className` |
+| **Tabs** | `value`, `defaultValue`, `onValueChange`, `variant`, `size`, `className` |
+| **Tabs.List** | `className`, `children` |
+| **Tabs.Trigger** | `value`, `icon`, `activeClassName`, `disabled`, `className` |
+| **Tabs.Content** | `value`, `className`, `children` |
+| **Accordion** | `title`, `icon`, `extra`, `defaultOpen`, `open`, `onOpenChange`, `variant`, `size`, `disabled`, `hideChevron`, `className` |
+| **Modal** | `open`, `defaultOpen`, `onOpenChange`, `size`, `closeOnBackdrop`, `closeOnEscape` |
+| **Modal.Trigger** | `asChild`, `className`, `children` |
+| **Modal.Content** | `className`, `children` |
+| **Modal.Header** | `icon`, `hideClose`, `className`, `children` |
+| **Modal.Body** | `className`, `children` |
+| **Modal.Footer** | `className`, `children` |
+| **MediaImage** | `src`, `alt`, `caption`, `ratio`, `size`, `shape`, `objectFit`, `loading`, `hideCaption`, `onError`, `className` |
+| **MediaVideo** | `src`, `caption`, `ratio`, `size`, `shape`, `controls`, `preload`, `autoPlay`, `muted`, `loop`, `poster`, `hideCaption`, `onError`, `className` |
+| **Tooltip** | `content`, `position`, `delay`, `className`, `children` |
+| **Breadcrumb** | `separator`, `className`, `children` |
+| **Breadcrumb.Item** | `href`, `isActive`, `className`, `children` |
+| **Typewriter** | `texts`, `typingSpeed`, `deletingSpeed`, `pauseDuration`, `deleteMode`, `loop`, `startDelay`, `cursor`, `cursorStyle`, `onComplete`, `className` |
+| **Carousel** | `slides`, `slidesPerView`, `align`, `containScroll`, `dragFree`, `loop`, `axis`, `direction`, `plugins`, `showNavigation`, `showPagination`, `scrollToIndex`, `breakpoints`, `className` |
 
 ## Development
 

package/dist/index.d.mts

@@ -1,7 +1,43 @@
-import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { EmblaOptionsType } from 'embla-carousel';
 import { ClassValue } from 'clsx';
 
+type AccordionVariant = "default" | "bordered" | "filled";
+type AccordionSize = "xs" | "sm" | "md";
+interface AccordionProps {
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: AccordionVariant;
+    size?: AccordionSize;
+    disabled?: boolean;
+    hideChevron?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Accordion({ title, icon, extra, defaultOpen, open, onOpenChange, variant, size, disabled, hideChevron, children, className, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbProps {
+    children: React.ReactNode;
+    className?: string;
+    separator?: React.ReactNode;
+}
+interface BreadcrumbItemProps {
+    children: React.ReactNode;
+    href?: string;
+    className?: string;
+    isActive?: boolean;
+}
+declare function BreadcrumbRoot({ children, className, separator }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbItem({ children, href, className, isActive }: BreadcrumbItemProps): react_jsx_runtime.JSX.Element;
+declare const Breadcrumb: typeof BreadcrumbRoot & {
+    Item: typeof BreadcrumbItem;
+};
+
 type ButtonColor = "default" | "black" | "primary" | "danger" | "success" | "warning" | "info";
 type ButtonSize = "xs" | "sm" | "md";
 type ButtonShape = "square" | "rounded" | "circle";
@@ -20,6 +56,46 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+type CarouselBreakpointOptions = EmblaOptionsType & {
+    slidesPerView?: number | "auto";
+};
+interface CarouselProps {
+    slides: React.ReactNode[];
+    slidesPerView?: number | "auto";
+    align?: EmblaOptionsType["align"];
+    containScroll?: EmblaOptionsType["containScroll"];
+    dragFree?: boolean;
+    loop?: boolean;
+    axis?: "x" | "y";
+    direction?: "ltr" | "rtl";
+    autoplay?: boolean | Record<string, unknown>;
+    autoScroll?: boolean | Record<string, unknown>;
+    autoHeight?: boolean | Record<string, unknown>;
+    fade?: boolean | Record<string, unknown>;
+    wheelGestures?: boolean | Record<string, unknown>;
+    classNames?: boolean | Record<string, unknown>;
+    parallax?: boolean;
+    opacity?: boolean;
+    lazyLoad?: boolean;
+    showNavigation?: boolean;
+    showPagination?: boolean;
+    scrollToIndex?: number;
+    breakpoints?: Record<string, CarouselBreakpointOptions>;
+    className?: string;
+    viewportClassName?: string;
+    containerClassName?: string;
+    slideClassName?: string;
+    styles?: {
+        controls?: string;
+        navigation?: string;
+        pagination?: string;
+        prevButton?: string;
+        nextButton?: string;
+        dot?: string;
+    };
+}
+declare function Carousel({ slides, slidesPerView, align, containScroll, dragFree, loop, axis, direction, autoplay, autoScroll, autoHeight, fade: fadeProp, wheelGestures: wheelGesturesProp, classNames: classNamesProp, parallax, opacity, lazyLoad, showNavigation, showPagination, scrollToIndex, breakpoints, className, viewportClassName, containerClassName, slideClassName, styles, }: CarouselProps): react_jsx_runtime.JSX.Element | null;
+
 type ButtonGroupVariant = "bordered" | "segmented";
 interface ButtonGroupProps {
     variant?: ButtonGroupVariant;
@@ -56,6 +132,284 @@ interface CheckboxGroupProps {
 }
 declare function CheckboxGroup({ variant, className, children, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
 
+type DropdownSide = "bottom" | "top" | "right" | "left";
+type DropdownAlign = "left" | "right" | "top" | "bottom" | "start" | "center" | "end";
+type DropdownWidth = number | "trigger" | "auto";
+interface DropdownProps {
+    side?: DropdownSide;
+    align?: DropdownAlign;
+    width?: DropdownWidth;
+    maxHeight?: number;
+    scroll?: boolean;
+    autoFlip?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    children: React.ReactNode;
+}
+interface DropdownTriggerProps {
+    className?: string;
+    children?: React.ReactNode;
+    asChild?: boolean;
+}
+interface DropdownContentProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function DropdownTrigger({ className, children, asChild }: DropdownTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace DropdownTrigger {
+    var displayName: string;
+}
+declare function DropdownContent({ className, children }: DropdownContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace DropdownContent {
+    var displayName: string;
+}
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: typeof DropdownTrigger;
+    Content: typeof DropdownContent;
+};
+
+type InputSize = "xs" | "sm" | "md";
+type InputShape = "square" | "rounded";
+type InputVariant = "default" | "outline" | "ghost";
+type InputColor = "default" | "black" | "primary" | "danger" | "success" | "warning" | "info";
+type InputState = "idle" | "error" | "success";
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    variant?: InputVariant;
+    size?: InputSize;
+    shape?: InputShape;
+    color?: InputColor;
+    state?: InputState;
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    loading?: boolean;
+    label?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    wrapperClassName?: string;
+    className?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+type InputGroupVariant = "bordered" | "stacked";
+interface InputGroupProps {
+    variant?: InputGroupVariant;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function InputGroup({ variant, className, children, }: InputGroupProps): react_jsx_runtime.JSX.Element;
+
+type MediaImageRatio = "1:1" | "16:9" | "4:3" | "1:2" | "free";
+type MediaImageSize = "xs" | "sm" | "md" | "lg";
+type MediaImageShape = "square" | "rounded" | "circle";
+interface MediaImageProps {
+    src: string;
+    alt: string;
+    caption?: string;
+    ratio?: MediaImageRatio;
+    size?: MediaImageSize;
+    shape?: MediaImageShape;
+    children?: React.ReactNode;
+    hideCaption?: boolean;
+    objectFit?: "cover" | "contain" | "fill" | "none";
+    loading?: "lazy" | "eager";
+    onError?: () => void;
+    className?: string;
+}
+declare function MediaImage({ src, alt, caption, ratio, size, shape, children, hideCaption, objectFit, loading, onError, className, }: MediaImageProps): react_jsx_runtime.JSX.Element;
+
+type MediaVideoRatio = "1:1" | "16:9" | "4:3" | "1:2" | "free";
+type MediaVideoSize = "xs" | "sm" | "md";
+type MediaVideoShape = "square" | "rounded" | "circle";
+interface MediaVideoProps {
+    src: string;
+    caption?: string;
+    ratio?: MediaVideoRatio;
+    size?: MediaVideoSize;
+    shape?: MediaVideoShape;
+    children?: React.ReactNode;
+    hideCaption?: boolean;
+    controls?: boolean;
+    preload?: "none" | "metadata" | "auto";
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    poster?: string;
+    onError?: () => void;
+    className?: string;
+}
+declare function MediaVideo({ src, caption, ratio, size, shape, children, hideCaption, controls, preload, autoPlay, muted, loop, poster, onError, className, }: MediaVideoProps): react_jsx_runtime.JSX.Element;
+
+type ModalSize = "sm" | "md" | "lg";
+interface ModalProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    size?: ModalSize;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children: React.ReactNode;
+}
+interface ModalTriggerProps {
+    asChild?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+interface ModalContentProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface ModalHeaderProps {
+    icon?: React.ReactNode;
+    hideClose?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+interface ModalBodyProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface ModalFooterProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare function ModalRoot({ open, defaultOpen, onOpenChange, size, closeOnBackdrop, closeOnEscape, children, }: ModalProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalRoot {
+    var displayName: string;
+}
+declare function ModalTrigger({ asChild, className, children }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalTrigger {
+    var displayName: string;
+}
+declare function ModalContent({ className, children }: ModalContentProps): React.ReactPortal | null;
+declare namespace ModalContent {
+    var displayName: string;
+}
+declare function ModalHeader({ icon, hideClose, className, children }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalHeader {
+    var displayName: string;
+}
+declare function ModalBody({ className, children }: ModalBodyProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalBody {
+    var displayName: string;
+}
+declare function ModalFooter({ className, children }: ModalFooterProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalFooter {
+    var displayName: string;
+}
+declare const Modal: typeof ModalRoot & {
+    Trigger: typeof ModalTrigger;
+    Content: typeof ModalContent;
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+};
+
+interface MultiSelectOption {
+    label: string;
+    value: string;
+    [key: string]: unknown;
+}
+interface MultiSelectProps {
+    value?: string[];
+    onChange?: (values: string[], options?: MultiSelectOption[]) => void;
+    options?: MultiSelectOption[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    autoFlip?: boolean;
+    maxHeight?: number;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    maxSelected?: number;
+    maxVisibleChips?: number;
+    clearLabel?: string;
+    selectedLabel?: string;
+    noResultsLabel?: string;
+    noOptionsLabel?: string;
+}
+declare function MultiSelect({ value, onChange, options, placeholder, className, disabled, autoFlip, maxHeight, searchable, searchPlaceholder, maxSelected, maxVisibleChips, clearLabel, selectedLabel, noResultsLabel, noOptionsLabel, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    label: string;
+    value: string;
+    [key: string]: unknown;
+}
+interface SelectProps {
+    value?: string;
+    onChange?: (value: string, option?: SelectOption) => void;
+    options?: SelectOption[];
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    autoFlip?: boolean;
+    maxHeight?: number;
+}
+declare function Select({ value, onChange, options, placeholder, className, disabled, autoFlip, maxHeight, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+type TabsVariant = "default" | "bordered" | "segmented";
+type TabsSize = "xs" | "sm" | "md";
+interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    className?: string;
+    children: React.ReactNode;
+}
+interface TabsListProps {
+    className?: string;
+    children: React.ReactNode;
+}
+interface TabsTriggerProps {
+    value: string;
+    icon?: React.ReactNode;
+    activeClassName?: string;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+interface TabsContentProps {
+    value: string;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function TabsRoot({ value, defaultValue, onValueChange, variant, size, className, children, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, children }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ value, icon, activeClassName, disabled, className, children }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ value, className, children }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+interface TooltipProps {
+    content: React.ReactNode;
+    position?: TooltipPosition;
+    delay?: number;
+    children: React.ReactElement;
+    className?: string;
+}
+declare function Tooltip({ content, position, delay, children, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface TypewriterProps {
+    texts: string[];
+    typingSpeed?: number;
+    deletingSpeed?: number;
+    pauseDuration?: number;
+    deleteMode?: "backspace" | "clear";
+    loop?: boolean;
+    startDelay?: number;
+    cursor?: boolean;
+    cursorStyle?: "line" | "block" | "underscore";
+    onComplete?: () => void;
+    className?: string;
+}
+declare function Typewriter({ texts, typingSpeed, deletingSpeed, pauseDuration, deleteMode, loop, startDelay, cursor, cursorStyle, onComplete, className, }: TypewriterProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, cn };
+export { Accordion, type AccordionProps, type AccordionSize, type AccordionVariant, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Carousel, type CarouselBreakpointOptions, type CarouselProps, Checkbox, type CheckboxColor, CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupVariant, type CheckboxProps, type CheckboxSize, type CheckboxVariant, Dropdown, type DropdownAlign, type DropdownContentProps, type DropdownProps, type DropdownSide, type DropdownTriggerProps, type DropdownWidth, Input, type InputColor, InputGroup, type InputGroupProps, type InputGroupVariant, type InputProps, type InputShape, type InputSize, type InputState, type InputVariant, MediaImage, type MediaImageProps, type MediaImageRatio, type MediaImageShape, type MediaImageSize, MediaVideo, type MediaVideoProps, type MediaVideoRatio, type MediaVideoShape, type MediaVideoSize, Modal, type ModalBodyProps, type ModalContentProps, type ModalFooterProps, type ModalHeaderProps, type ModalProps, type ModalSize, type ModalTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, Select, type SelectOption, type SelectProps, Tabs, type TabsContentProps, type TabsListProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, Tooltip, type TooltipPosition, type TooltipProps, Typewriter, type TypewriterProps, cn };