@bubo-squared/ui-framework 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,421 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    suffixIcon?: React$1.ReactNode;
+    prefixIcon?: React$1.ReactNode;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+
+declare const iconButtonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    asChild?: boolean;
+    icon: React$1.ReactNode;
+}
+declare const IconButton: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type IconButtonSize = ButtonProps["size"];
+interface IconButtonGroupItem {
+    icon: React$1.ReactNode;
+    ariaLabel: string;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+}
+interface IconButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Icons to render as a segmented group. */
+    items: IconButtonGroupItem[];
+    /** Shared size for all icon buttons. */
+    size?: IconButtonSize;
+}
+declare const IconButtonGroup: React$1.FC<IconButtonGroupProps>;
+
+declare const linkButtonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LinkButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof linkButtonVariants> {
+    asChild?: boolean;
+    suffixIcon?: React$1.ReactNode;
+    prefixIcon?: React$1.ReactNode;
+}
+declare const LinkButton: React$1.ForwardRefExoticComponent<LinkButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type MessageButtonProps = Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    onClick?: () => void | Promise<void>;
+    idleLabel?: string;
+    loadingLabel?: string;
+    successLabel?: string;
+    errorLabel?: string;
+    feedbackDuration?: number;
+    icon?: React$1.ReactNode;
+};
+declare const MessageButton: React$1.FC<MessageButtonProps>;
+
+type AvatarVariant = "initial" | "icon" | "image";
+declare const avatarVariants: (props?: ({
+    size?: "20" | "24" | "32" | "40" | "48" | "56" | "64" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof avatarVariants> {
+    /**
+     * Visual variant: initials, icon or image.
+     */
+    variant?: AvatarVariant;
+    /**
+     * Text rendered when variant="initial".
+     */
+    initials?: string;
+    /**
+     * Image source when variant="image".
+     */
+    src?: string;
+    /**
+     * Accessible alt text for the image.
+     */
+    alt?: string;
+    /**
+     * Render as child via Radix Slot. When true, Avatar will not render a native
+     * button element, but instead pass props to the child component.
+     */
+    asChild?: boolean;
+}
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "primary" | "secondary" | "disabled" | "success" | "error" | "active" | "informal" | "warning" | "double-default" | "double-current" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled" | "active";
+type BadgeSize = "sm" | "md" | "lg" | "xl";
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+    label: string;
+    value?: string;
+    className?: string;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+}
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const badgeDigitVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    variant?: "primary" | "secondary" | "disabled" | "success" | "error" | "informal" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeDigitSize = "sm" | "md";
+type BadgeDigitVariant = "primary" | "secondary" | "informal" | "success" | "warning" | "error" | "disabled";
+interface BadgeDigitProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeDigitVariants> {
+    /** The numeric value to display inside the badge. */
+    value: string | number;
+    size?: BadgeDigitSize;
+    variant?: BadgeDigitVariant;
+}
+declare const BadgeDigit: React$1.ForwardRefExoticComponent<BadgeDigitProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const badgeDotVariants: (props?: ({
+    status?: "disabled" | "error" | "informal" | "warning" | "success/online" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
+    className?: string;
+}
+declare const BadgeDot: React$1.FC<BadgeDotProps>;
+
+interface BadgeStatusProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    active?: boolean;
+    dotClassName?: string;
+}
+declare const BadgeStatus: React$1.ForwardRefExoticComponent<BadgeStatusProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type DividerType = "line" | "text-lines" | "icon-lines" | "icon-group-lines" | "button-lines";
+type SimpleDividerType = Exclude<DividerType, "button-lines" | "icon-lines" | "icon-group-lines">;
+interface BaseDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type?: SimpleDividerType;
+    /** Label shown for text variant (e.g. "OR"). */
+    label?: string;
+}
+type ButtonVariant = ButtonProps$1["variant"];
+type IconButtonVariant = ButtonProps["variant"];
+type IconGroupSize = IconButtonGroupProps["size"];
+interface IconLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type: "icon-lines";
+    /** Icon rendered between the lines. */
+    icon: React$1.ReactNode;
+    /** Variant for the icon button between the lines. */
+    iconButtonVariant?: IconButtonVariant;
+    /** Click handler for the icon button between the lines. */
+    onIconClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    /** Accessible label for the icon button. Falls back to "More options". */
+    ariaLabel?: string;
+}
+interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type: "button-lines";
+    /** Text inside the button between the lines. */
+    buttonLabel: string;
+    /** onClick handler for the button between the lines. */
+    onButtonClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    /** Variant for the button between the lines. */
+    buttonVariant?: ButtonVariant;
+}
+interface IconGroupLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type: "icon-group-lines";
+    /** Items rendered as a segmented icon group between the lines. */
+    iconGroupItems: IconButtonGroupItem[];
+    /** Shared size for the icon group; defaults to IconButtonGroup default. */
+    iconGroupSize?: IconGroupSize;
+}
+type DividerProps = BaseDividerProps | IconLinesDividerProps | IconGroupLinesDividerProps | ButtonLinesDividerProps;
+declare const Divider: React$1.FC<DividerProps>;
+
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Current value, from 0 to 100. */
+    value: number;
+    /** Optional label shown above the bar with the percentage on the right. */
+    label?: string;
+    /** Optional hint text shown below the bar. */
+    hint?: string;
+    /** Controls whether the label/percentage row is rendered. */
+    showLabel?: boolean;
+    /** Controls whether the hint text is rendered. */
+    showHint?: boolean;
+    /** Visual height of the bar. */
+    size?: ProgressSize;
+}
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type StatusAvatarVariant = "verified" | "bookmark" | "favorite" | "add" | "remove" | "offline" | "online" | "away" | "busy";
+interface StatusAvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual style of the status badge.
+     */
+    variant?: StatusAvatarVariant;
+}
+declare const StatusAvatar: React$1.ForwardRefExoticComponent<StatusAvatarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const tagVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends VariantProps<typeof tagVariants> {
+    asChild?: boolean;
+    label: string;
+    value?: string;
+    className?: string;
+    leadingIcon?: React$1.ReactElement<{
+        disabled?: boolean;
+    }>;
+    trailingIcon?: React$1.ReactElement<{
+        disabled?: boolean;
+    }>;
+    size: "sm" | "md";
+    disabled?: boolean;
+}
+declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    label?: string;
+}
+declare function Checkbox({ label, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+type DropdownStatus = "default" | "success" | "error";
+interface DropdownOption {
+    label: string;
+    value: string;
+}
+declare const dropdownTriggerVariants: (props?: ({
+    size?: "large" | "extra-large" | null | undefined;
+    status?: "success" | "error" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DropdownProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof dropdownTriggerVariants> {
+    label?: string;
+    showLabel?: boolean;
+    hint?: string;
+    showHint?: boolean;
+    placeholder?: string;
+    status?: DropdownStatus;
+    options: DropdownOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Force the menu open (used mainly for docs/Storybook states). */
+    showMenu?: boolean;
+}
+declare const Dropdown: React$1.FC<DropdownProps>;
+
+type PasswordInputSize = "large" | "extra-large";
+type PasswordInputStatus = "default" | "success" | "error";
+type PasswordInputVariant = "icons" | "action";
+interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "disabled"> {
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    status?: PasswordInputStatus;
+    size?: PasswordInputSize;
+    variant?: PasswordInputVariant;
+    leadingIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    disabled?: boolean;
+}
+declare const PasswordInput: React$1.FC<PasswordInputProps>;
+
+type RadioGroupOrientation = "vertical" | "horizontal";
+interface RadioGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, "children" | "orientation" | "onValueChange"> {
+    label?: string;
+    hint?: string;
+    orientation?: RadioGroupOrientation;
+    options: RadioGroupOption[];
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+}
+declare const RadioGroup: React$1.FC<RadioGroupProps>;
+
+type SearchInputSize = "large" | "extra-large";
+interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
+    placeholder?: string;
+    leadingIcon?: React$1.ReactNode;
+    showLeadingIcon?: boolean;
+    size?: SearchInputSize;
+    disabled?: boolean;
+}
+declare const SearchInput: React$1.FC<SearchInputProps>;
+
+type SliderDisplay = "flat" | "numeric" | "tooltip";
+type SliderType = "single" | "multi";
+type SliderTooltipPlacement = "top" | "bottom";
+interface SliderProps {
+    display?: SliderDisplay;
+    type?: SliderType;
+    tooltipPlacement?: SliderTooltipPlacement;
+    /**
+     * Custom formatter for tooltip / numeric / accessibility text.
+     * Receives the current slider value and should return a display string.
+     * If provided, it takes precedence over `showPercentage`.
+     */
+    tooltipFormatter?: (value: number) => string;
+    /**
+     * When true (default), values are rendered as percentages (e.g. "30%").
+     * When false, raw numbers are shown instead.
+     * Ignored when `tooltipFormatter` is provided.
+     */
+    showPercentage?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /**
+     * Current value(s). For `type="single"`, use a single-element array, e.g. `[30]`.
+     * For `type="multi"`, use two values, e.g. `[0, 25]`.
+     */
+    value?: number[];
+    /**
+     * Initial value(s) for uncontrolled usage.
+     */
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+    className?: string;
+}
+declare const Slider: React$1.FC<SliderProps>;
+
+type TextInputSize = "large" | "extra-large";
+type TextInputStatus = "default" | "success" | "error";
+interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    status?: TextInputStatus;
+    size?: TextInputSize;
+    disabled?: boolean;
+    leadingIcon?: React$1.ReactNode | null;
+    trailingIcon?: React$1.ReactNode | null;
+}
+declare const TextInput: React$1.FC<TextInputProps>;
+
+type TextAreaType = "responsive" | "character-limit";
+interface TextAreaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled"> {
+    label?: string;
+    hint?: string;
+    status?: TextInputStatus;
+    /**
+     * Visual/behavioural variant.
+     * - "responsive": regular textarea.
+     * - "character-limit": shows character counter, expects maxLength.
+     */
+    type?: TextAreaType;
+    /**
+     * Maximum number of characters allowed. Used by "character-limit" variant
+     * and passed through to the underlying <textarea> as maxLength.
+     */
+    maxLength?: number;
+    /**
+     * Optional trailing icon rendered in the top-right corner of the field.
+     */
+    disabled?: boolean;
+}
+declare const TextArea: React$1.FC<TextAreaProps>;
+
+interface ToggleProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+}
+declare const Toggle: React$1.FC<ToggleProps>;
+
+type WebsiteInputHierarchy = "prefix" | "suffix";
+interface WebsiteInputProps extends Omit<TextInputProps, "leadingIcon" | "trailingIcon"> {
+    /**
+     * Position of the protocol add-on (label + icon).
+     * - "prefix": add-on on the left side of the field
+     * - "suffix": add-on on the right side of the field
+     */
+    hierarchy?: WebsiteInputHierarchy;
+    /**
+     * Text shown inside the protocol add-on (e.g. "http://", "https://").
+     */
+    protocolLabel?: string;
+    /**
+     * Optional icon shown next to the protocol label".
+     */
+    icon?: React$1.ReactNode | null;
+}
+declare const WebsiteInput: React$1.FC<WebsiteInputProps>;
+
+declare const LogoIconExtraLarge: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoIconExtraSmall: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoIconLarge: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoIconMedium: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoIconSmall: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoInline$1: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoInline: () => react_jsx_runtime.JSX.Element;
+
+declare const LogoMultiline: () => react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Avatar, Badge, BadgeDigit, BadgeDot, BadgeStatus, Button, ButtonGroup, Checkbox, Divider, Dropdown, IconButton, IconButtonGroup, LinkButton, LogoIconExtraLarge, LogoIconExtraSmall, LogoIconLarge, LogoIconMedium, LogoIconSmall, LogoInline$1 as LogoInline, LogoInline as LogoInlineSmall, LogoMultiline, MessageButton, PasswordInput, Progress, RadioGroup, SearchInput, Slider, StatusAvatar, Tag, TextArea, TextInput, Toggle, WebsiteInput, cn };