@octavius2929-personal/design-system 0.5.1 → 0.7.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
+import { ElementType, ComponentPropsWithoutRef, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
 
 declare const tintaSchema: {
     light: {
@@ -758,6 +758,19 @@ declare function usePrevious<T>(value: T, initial?: T): T | undefined;
 
 declare function useToggle(initial?: boolean): readonly [boolean, () => void, (value: boolean) => void];
 
+type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "eyebrow" | "code" | "blackletter";
+type TypographyColor = "fg1" | "fg2" | "fg3" | "accent" | "danger" | "ok" | "warn" | "info";
+type TypographyAlign = "left" | "center" | "right";
+type TypographyOwnProps<E extends ElementType> = {
+    variant: TypographyVariant;
+    as?: E;
+    color?: TypographyColor;
+    align?: TypographyAlign;
+};
+type TypographyProps<E extends ElementType = "span"> = TypographyOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | "color" | keyof TypographyOwnProps<E>>;
+
+declare function Typography<E extends ElementType = "span">({ variant, as, color, align, ...rest }: TypographyProps<E>): react.JSX.Element;
+
 interface IconProps extends SVGProps<SVGSVGElement> {
     /** Lado del cuadro en px. Por defecto 20. */
     size?: number;
@@ -861,7 +874,34 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "on
     onChange?: (value: string) => void;
 }
 
-declare function TextField({ label, help, error, startIcon: StartIcon, multiline, rows, type, onChange, className, id, ...rest }: TextFieldProps): react.JSX.Element;
+declare function TextField({ label, help, error, startIcon, multiline, rows, type, onChange, className, id, ...rest }: TextFieldProps): react.JSX.Element;
+
+interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: boolean;
+    startIcon?: Icon;
+    onChange?: (value: string) => void;
+}
+
+declare function PasswordField({ label, help, error, startIcon, onChange, id, className, ...rest }: PasswordFieldProps): react.JSX.Element;
+
+interface MoneyFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "type"> {
+    /** Valor numérico controlado. `null`/omitido representa "sin valor". */
+    value?: number | null;
+    /** Callback con el valor parseado al hacer blur. */
+    onChange?: (value: number | null) => void;
+    /** Código ISO de moneda para Intl.NumberFormat (default "USD"). */
+    currency?: string;
+    /** Locale para Intl.NumberFormat (default "en-US"). */
+    locale?: string;
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: boolean;
+    startIcon?: Icon;
+}
+
+declare function MoneyField({ value, onChange, currency, locale, label, help, error, startIcon, id, className, onFocus, onBlur, ...rest }: MoneyFieldProps): react.JSX.Element;
 
 type IconButtonTone = "ink" | "accent";
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
@@ -1120,4 +1160,4 @@ interface ThemeProviderProps {
 declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type ColorTokens, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, type ModePreference, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, colorVars, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type ColorTokens, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoreHorizontalIcon, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, XIcon, colorVars, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
+import { ElementType, ComponentPropsWithoutRef, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
 
 declare const tintaSchema: {
     light: {
@@ -758,6 +758,19 @@ declare function usePrevious<T>(value: T, initial?: T): T | undefined;
 
 declare function useToggle(initial?: boolean): readonly [boolean, () => void, (value: boolean) => void];
 
+type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "eyebrow" | "code" | "blackletter";
+type TypographyColor = "fg1" | "fg2" | "fg3" | "accent" | "danger" | "ok" | "warn" | "info";
+type TypographyAlign = "left" | "center" | "right";
+type TypographyOwnProps<E extends ElementType> = {
+    variant: TypographyVariant;
+    as?: E;
+    color?: TypographyColor;
+    align?: TypographyAlign;
+};
+type TypographyProps<E extends ElementType = "span"> = TypographyOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | "color" | keyof TypographyOwnProps<E>>;
+
+declare function Typography<E extends ElementType = "span">({ variant, as, color, align, ...rest }: TypographyProps<E>): react.JSX.Element;
+
 interface IconProps extends SVGProps<SVGSVGElement> {
     /** Lado del cuadro en px. Por defecto 20. */
     size?: number;
@@ -861,7 +874,34 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "on
     onChange?: (value: string) => void;
 }
 
-declare function TextField({ label, help, error, startIcon: StartIcon, multiline, rows, type, onChange, className, id, ...rest }: TextFieldProps): react.JSX.Element;
+declare function TextField({ label, help, error, startIcon, multiline, rows, type, onChange, className, id, ...rest }: TextFieldProps): react.JSX.Element;
+
+interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: boolean;
+    startIcon?: Icon;
+    onChange?: (value: string) => void;
+}
+
+declare function PasswordField({ label, help, error, startIcon, onChange, id, className, ...rest }: PasswordFieldProps): react.JSX.Element;
+
+interface MoneyFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "type"> {
+    /** Valor numérico controlado. `null`/omitido representa "sin valor". */
+    value?: number | null;
+    /** Callback con el valor parseado al hacer blur. */
+    onChange?: (value: number | null) => void;
+    /** Código ISO de moneda para Intl.NumberFormat (default "USD"). */
+    currency?: string;
+    /** Locale para Intl.NumberFormat (default "en-US"). */
+    locale?: string;
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: boolean;
+    startIcon?: Icon;
+}
+
+declare function MoneyField({ value, onChange, currency, locale, label, help, error, startIcon, id, className, onFocus, onBlur, ...rest }: MoneyFieldProps): react.JSX.Element;
 
 type IconButtonTone = "ink" | "accent";
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
@@ -1120,4 +1160,4 @@ interface ThemeProviderProps {
 declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type ColorTokens, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, type ModePreference, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, colorVars, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type ColorTokens, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoreHorizontalIcon, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, XIcon, colorVars, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };