@raydenui/ui 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,206 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+
+type ButtonVariant = "primary" | "secondary" | "grey" | "destructive" | "text" | "success" | "warning" | "info";
+type ButtonAppearance = "solid" | "outlined";
+type ButtonSize = "sm" | "lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    icon?: ReactNode;
+    iconPosition?: "none" | "leading" | "trailing" | "icon-only";
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function ButtonGroup({ children, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    active?: boolean;
+}
+declare const ButtonGroupItem: react.ForwardRefExoticComponent<ButtonGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+type InputSize = "sm" | "lg";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Input size variant */
+    size?: InputSize;
+    /** Label text above the input */
+    label?: string;
+    /** Helper text below the input */
+    helperText?: string;
+    /** Error message or boolean. Overrides helperText styling. */
+    error?: string | boolean;
+    /** Success message or boolean. Overrides helperText styling. */
+    success?: string | boolean;
+    /** Icon on the left side of the input */
+    leadingIcon?: ReactNode;
+    /** Icon on the right side of the input */
+    trailingIcon?: ReactNode;
+    /** Text addon on the right side */
+    addonRight?: string;
+    /** Wrapper className */
+    wrapperClassName?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type TabsVariant = "line" | "pill";
+interface TabsProps {
+    variant?: TabsVariant;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ variant, value, defaultValue, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TabProps {
+    value: string;
+    icon?: ReactNode;
+    badge?: number | string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tab({ value, icon, badge, disabled, children, className, }: TabProps): react_jsx_runtime.JSX.Element;
+
+interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "input" | "filter";
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClose?: () => void;
+    onDropdown?: () => void;
+}
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
+
+type ProgressBarSize = "sm" | "lg";
+interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    size?: ProgressBarSize;
+    label?: string;
+    metadata?: string;
+    showPercentage?: boolean;
+}
+declare function ProgressBar({ value, size, label, metadata, showPercentage, className, ...rest }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+type ProgressCircleSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    size?: ProgressCircleSize;
+    showText?: boolean;
+}
+declare function ProgressCircle({ value, size, showText, className, ...rest }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
+
+type BadgeColor = "orange" | "blue" | "success" | "warning" | "error" | "neutral" | "disabled";
+type BadgeType = "filled" | "accent" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: BadgeColor;
+    type?: BadgeType;
+    size?: BadgeSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+declare function Badge({ color, type, size, leadingIcon, trailingIcon, className, children, ...rest }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = "toast" | "banner";
+type AlertState = "information" | "success" | "warning" | "error";
+interface AlertAction {
+    label: string;
+    onClick: () => void;
+}
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+    state?: AlertState;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    onClose?: () => void;
+    primaryAction?: AlertAction;
+    secondaryAction?: AlertAction;
+}
+declare function Alert({ variant, state, title, description, icon, showIcon, onClose, primaryAction, secondaryAction, className, ...rest }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type DividerVariant = "default" | "with-icon" | "with-label" | "with-title" | "with-button" | "with-title-and-button";
+interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: DividerVariant;
+    label?: string;
+    icon?: ReactNode;
+    buttonLabel?: string;
+    buttonIcon?: ReactNode;
+    onButtonClick?: () => void;
+}
+declare function Divider({ variant, label, icon, buttonLabel, buttonIcon, onButtonClick, className, ...rest }: DividerProps): react_jsx_runtime.JSX.Element;
+
+type TooltipPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom";
+type TooltipTheme = "light" | "dark";
+interface TooltipAction {
+    label: string;
+    onClick: () => void;
+}
+interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: TooltipTheme;
+    position?: TooltipPosition;
+    title?: string;
+    content: string;
+    onClose?: () => void;
+    primaryAction?: TooltipAction;
+    secondaryAction?: TooltipAction;
+}
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    showPrevNext?: boolean;
+    siblingCount?: number;
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, showPrevNext, siblingCount, className, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    position?: "left" | "right";
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    position?: "left" | "right";
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    position?: "left" | "right";
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    active?: boolean;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+}
+declare function Breadcrumb({ items, separator, className, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, Divider, type DividerProps, type DividerVariant, Input, type InputProps, type InputSize, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, Tab, type TabProps, Tabs, type TabsProps, type TabsVariant, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, cn };

package/dist/index.d.ts

@@ -0,0 +1,206 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+
+type ButtonVariant = "primary" | "secondary" | "grey" | "destructive" | "text" | "success" | "warning" | "info";
+type ButtonAppearance = "solid" | "outlined";
+type ButtonSize = "sm" | "lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    icon?: ReactNode;
+    iconPosition?: "none" | "leading" | "trailing" | "icon-only";
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function ButtonGroup({ children, className }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    active?: boolean;
+}
+declare const ButtonGroupItem: react.ForwardRefExoticComponent<ButtonGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+type InputSize = "sm" | "lg";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Input size variant */
+    size?: InputSize;
+    /** Label text above the input */
+    label?: string;
+    /** Helper text below the input */
+    helperText?: string;
+    /** Error message or boolean. Overrides helperText styling. */
+    error?: string | boolean;
+    /** Success message or boolean. Overrides helperText styling. */
+    success?: string | boolean;
+    /** Icon on the left side of the input */
+    leadingIcon?: ReactNode;
+    /** Icon on the right side of the input */
+    trailingIcon?: ReactNode;
+    /** Text addon on the right side */
+    addonRight?: string;
+    /** Wrapper className */
+    wrapperClassName?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type TabsVariant = "line" | "pill";
+interface TabsProps {
+    variant?: TabsVariant;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tabs({ variant, value, defaultValue, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TabProps {
+    value: string;
+    icon?: ReactNode;
+    badge?: number | string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function Tab({ value, icon, badge, disabled, children, className, }: TabProps): react_jsx_runtime.JSX.Element;
+
+interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "input" | "filter";
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClose?: () => void;
+    onDropdown?: () => void;
+}
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
+
+type ProgressBarSize = "sm" | "lg";
+interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    size?: ProgressBarSize;
+    label?: string;
+    metadata?: string;
+    showPercentage?: boolean;
+}
+declare function ProgressBar({ value, size, label, metadata, showPercentage, className, ...rest }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+type ProgressCircleSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    size?: ProgressCircleSize;
+    showText?: boolean;
+}
+declare function ProgressCircle({ value, size, showText, className, ...rest }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
+
+type BadgeColor = "orange" | "blue" | "success" | "warning" | "error" | "neutral" | "disabled";
+type BadgeType = "filled" | "accent" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: BadgeColor;
+    type?: BadgeType;
+    size?: BadgeSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+declare function Badge({ color, type, size, leadingIcon, trailingIcon, className, children, ...rest }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = "toast" | "banner";
+type AlertState = "information" | "success" | "warning" | "error";
+interface AlertAction {
+    label: string;
+    onClick: () => void;
+}
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+    state?: AlertState;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    onClose?: () => void;
+    primaryAction?: AlertAction;
+    secondaryAction?: AlertAction;
+}
+declare function Alert({ variant, state, title, description, icon, showIcon, onClose, primaryAction, secondaryAction, className, ...rest }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type DividerVariant = "default" | "with-icon" | "with-label" | "with-title" | "with-button" | "with-title-and-button";
+interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: DividerVariant;
+    label?: string;
+    icon?: ReactNode;
+    buttonLabel?: string;
+    buttonIcon?: ReactNode;
+    onButtonClick?: () => void;
+}
+declare function Divider({ variant, label, icon, buttonLabel, buttonIcon, onButtonClick, className, ...rest }: DividerProps): react_jsx_runtime.JSX.Element;
+
+type TooltipPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom";
+type TooltipTheme = "light" | "dark";
+interface TooltipAction {
+    label: string;
+    onClick: () => void;
+}
+interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: TooltipTheme;
+    position?: TooltipPosition;
+    title?: string;
+    content: string;
+    onClose?: () => void;
+    primaryAction?: TooltipAction;
+    secondaryAction?: TooltipAction;
+}
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    showPrevNext?: boolean;
+    siblingCount?: number;
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, showPrevNext, siblingCount, className, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    position?: "left" | "right";
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    position?: "left" | "right";
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    position?: "left" | "right";
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    active?: boolean;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+}
+declare function Breadcrumb({ items, separator, className, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, Divider, type DividerProps, type DividerVariant, Input, type InputProps, type InputSize, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, Tab, type TabProps, Tabs, type TabsProps, type TabsVariant, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, cn };