@bubo-squared/ui-framework 0.1.5 → 0.1.8

package/dist/index.d.cts

@@ -1,8 +1,10 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
+import { FC } 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 RPNInput from 'react-phone-number-input';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
@@ -258,6 +260,17 @@ interface DropdownProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElem
 }
 declare const Dropdown: React$1.FC<DropdownProps>;
 
+type FieldStatus = "default" | "success" | "error";
+interface FieldProps {
+    label?: string;
+    hint?: string;
+    status?: FieldStatus;
+    disabled?: boolean | null;
+    className?: string;
+    children: React$1.ReactNode;
+}
+declare const Field: React$1.FC<FieldProps>;
+
 type PasswordInputSize = "large" | "extra-large";
 type PasswordInputStatus = "default" | "success" | "error";
 type PasswordInputVariant = "icons" | "action";
@@ -276,6 +289,33 @@ interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputE
 }
 declare const PasswordInput: React$1.FC<PasswordInputProps>;
 
+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 PhoneInputProps = Omit<React$1.ComponentProps<"input">, "onChange" | "value" | "ref"> & Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+    onChange?: (value: RPNInput.Value) => void;
+} & {
+    className?: string;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    status?: TextInputStatus;
+    size?: TextInputSize;
+};
+declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps>;
+
 type RadioGroupOrientation = "vertical" | "horizontal";
 interface RadioGroupOption {
     value: string;
@@ -339,20 +379,6 @@ interface SliderProps {
 }
 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;
@@ -400,22 +426,66 @@ interface WebsiteInputProps extends Omit<TextInputProps, "leadingIcon" | "traili
 }
 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;
+type PopoverPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
+interface PopoverProps {
+    children: React$1.ReactNode;
+    strapline?: string;
+    title: string;
+    description?: string;
+    onOk?: () => void;
+    okText?: string;
+    onCancel?: () => void;
+    cancelText?: string;
+    showArrow?: boolean;
+    className?: string;
+    /**
+     * Controls where the popover appears relative to the trigger.
+     * Examples: "bottomRight", "top", "left".
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Distance between the trigger and the popover.
+     * This is forwarded to Radix's `sideOffset`, useful when adjusting
+     * the arrow size so the content clears the trigger.
+     */
+    offset?: number;
+}
+declare const Popover: React$1.FC<PopoverProps>;
 
-declare const LogoIconSmall: () => react_jsx_runtime.JSX.Element;
+interface BreadcrumbProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "flat" | "colored";
+    asChild?: boolean;
+    /** Label text shown in the breadcrumb item. */
+    label?: string;
+    /** Whether to render the leading chevron icon. */
+    showIcon?: boolean;
+    /** Optional custom icon to use instead of the default chevron. */
+    icon?: React$1.ReactNode;
+    /** Whether to render the label text. */
+    showText?: boolean;
+}
+declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const LogoInline$1: () => react_jsx_runtime.JSX.Element;
+interface LogoBaseProps {
+    className?: string;
+}
+type LogoTextColor = "light" | "dark";
+interface LogoTextProps extends LogoBaseProps {
+    textColor?: LogoTextColor;
+}
+type LogoVariant = "inline" | "inlineSmall" | "multiline";
+interface LogoProps extends LogoTextProps {
+    variant?: LogoVariant;
+}
+type LogoIconSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface LogoIconProps extends LogoBaseProps {
+    size?: LogoIconSize;
+}
 
-declare const LogoInline: () => react_jsx_runtime.JSX.Element;
+declare const LogoIcon: FC<LogoIconProps>;
 
-declare const LogoMultiline: () => react_jsx_runtime.JSX.Element;
+declare const Logo: FC<LogoProps>;
 
 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 };
+export { Avatar, Badge, BadgeDigit, BadgeDot, BadgeStatus, Breadcrumb, Button, ButtonGroup, Checkbox, Divider, Dropdown, Field, IconButton, IconButtonGroup, LinkButton, Logo, LogoIcon, MessageButton, PasswordInput, PhoneInput, Popover, Progress, RadioGroup, SearchInput, Slider, StatusAvatar, Tag, TextArea, TextInput, Toggle, WebsiteInput, cn };

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
+import { FC } 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 RPNInput from 'react-phone-number-input';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
@@ -258,6 +260,17 @@ interface DropdownProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElem
 }
 declare const Dropdown: React$1.FC<DropdownProps>;
 
+type FieldStatus = "default" | "success" | "error";
+interface FieldProps {
+    label?: string;
+    hint?: string;
+    status?: FieldStatus;
+    disabled?: boolean | null;
+    className?: string;
+    children: React$1.ReactNode;
+}
+declare const Field: React$1.FC<FieldProps>;
+
 type PasswordInputSize = "large" | "extra-large";
 type PasswordInputStatus = "default" | "success" | "error";
 type PasswordInputVariant = "icons" | "action";
@@ -276,6 +289,33 @@ interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputE
 }
 declare const PasswordInput: React$1.FC<PasswordInputProps>;
 
+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 PhoneInputProps = Omit<React$1.ComponentProps<"input">, "onChange" | "value" | "ref"> & Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+    onChange?: (value: RPNInput.Value) => void;
+} & {
+    className?: string;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    status?: TextInputStatus;
+    size?: TextInputSize;
+};
+declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps>;
+
 type RadioGroupOrientation = "vertical" | "horizontal";
 interface RadioGroupOption {
     value: string;
@@ -339,20 +379,6 @@ interface SliderProps {
 }
 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;
@@ -400,22 +426,66 @@ interface WebsiteInputProps extends Omit<TextInputProps, "leadingIcon" | "traili
 }
 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;
+type PopoverPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
+interface PopoverProps {
+    children: React$1.ReactNode;
+    strapline?: string;
+    title: string;
+    description?: string;
+    onOk?: () => void;
+    okText?: string;
+    onCancel?: () => void;
+    cancelText?: string;
+    showArrow?: boolean;
+    className?: string;
+    /**
+     * Controls where the popover appears relative to the trigger.
+     * Examples: "bottomRight", "top", "left".
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Distance between the trigger and the popover.
+     * This is forwarded to Radix's `sideOffset`, useful when adjusting
+     * the arrow size so the content clears the trigger.
+     */
+    offset?: number;
+}
+declare const Popover: React$1.FC<PopoverProps>;
 
-declare const LogoIconSmall: () => react_jsx_runtime.JSX.Element;
+interface BreadcrumbProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "flat" | "colored";
+    asChild?: boolean;
+    /** Label text shown in the breadcrumb item. */
+    label?: string;
+    /** Whether to render the leading chevron icon. */
+    showIcon?: boolean;
+    /** Optional custom icon to use instead of the default chevron. */
+    icon?: React$1.ReactNode;
+    /** Whether to render the label text. */
+    showText?: boolean;
+}
+declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const LogoInline$1: () => react_jsx_runtime.JSX.Element;
+interface LogoBaseProps {
+    className?: string;
+}
+type LogoTextColor = "light" | "dark";
+interface LogoTextProps extends LogoBaseProps {
+    textColor?: LogoTextColor;
+}
+type LogoVariant = "inline" | "inlineSmall" | "multiline";
+interface LogoProps extends LogoTextProps {
+    variant?: LogoVariant;
+}
+type LogoIconSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface LogoIconProps extends LogoBaseProps {
+    size?: LogoIconSize;
+}
 
-declare const LogoInline: () => react_jsx_runtime.JSX.Element;
+declare const LogoIcon: FC<LogoIconProps>;
 
-declare const LogoMultiline: () => react_jsx_runtime.JSX.Element;
+declare const Logo: FC<LogoProps>;
 
 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 };
+export { Avatar, Badge, BadgeDigit, BadgeDot, BadgeStatus, Breadcrumb, Button, ButtonGroup, Checkbox, Divider, Dropdown, Field, IconButton, IconButtonGroup, LinkButton, Logo, LogoIcon, MessageButton, PasswordInput, PhoneInput, Popover, Progress, RadioGroup, SearchInput, Slider, StatusAvatar, Tag, TextArea, TextInput, Toggle, WebsiteInput, cn };