npm - @octavius2929-personal/design-system - Versions diffs - 0.23.1 → 0.24.0 - Mend

@octavius2929-personal/design-system 0.23.1 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -78,7 +78,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -226,7 +226,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -374,7 +374,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -522,7 +522,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -885,6 +885,20 @@ declare const Container: <E extends ElementType = "div">(props: ContainerProps<E
     ref?: Ref<Element>;
 }) => ReturnType<typeof ContainerImpl>;
+type SurfaceOwnProps<E extends ElementType> = {
+    as?: E;
+    /** Rellena el alto del viewport (min-height: 100dvh). Útil para el canvas de página. */
+    fill?: boolean;
+    /** Segmento de contexto para el data-testid. */
+    testId?: string;
+};
+type SurfaceProps<E extends ElementType = "div"> = SurfaceOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | keyof SurfaceOwnProps<E>>;
+declare function SurfaceInner<E extends ElementType = "div">({ as, fill, testId, ...rest }: SurfaceProps<E>, ref: Ref<HTMLElement>): react.JSX.Element;
+declare const Surface: <E extends ElementType = "div">(props: SurfaceProps<E> & {
+    ref?: Ref<HTMLElement>;
+}) => ReturnType<typeof SurfaceInner>;
 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";
@@ -1527,8 +1541,13 @@ interface ThemeProviderProps {
     storageKey?: string;
     /** Si es false, no persiste ni rehidrata (útil para previews/tests). */
     persist?: boolean;
+    /**
+     * Si es true, el provider pinta el canvas de página en el tema activo: envuelve en
+     * <Surface fill> y pinta el <body> (cubre overscroll). Default false: sin wrapper.
+     */
+    paintRoot?: boolean;
 }
-declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, paintRoot, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 interface TestIdProviderProps {
@@ -1546,4 +1565,4 @@ interface TestIdHandle {
 }
 declare function useTestId(type: string, ownTestId?: string): TestIdHandle;
-export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AtSignIcon, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, BellIcon, BellOffIcon, BookmarkIcon, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, CalendarIcon, CameraIcon, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, ClipboardIcon, ClockIcon, CloudIcon, type ColorTokens, Container, type ContainerProps, CopyIcon, CornerDownRightIcon, CreditCardIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileTextIcon, FilterIcon, FingerprintIcon, FolderIcon, FolderOpenIcon, GiftIcon, GlobeIcon, GridIcon, HeartIcon, HelpCircleIcon, HomeIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, ImageIcon, InboxIcon, InfoIcon, KeyIcon, LayoutIcon, LinkIcon, ListIcon, ListItem, type ListItemProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, Menu, MenuIcon, type MenuItemDef, type MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MinimizeIcon, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PackageIcon, Pagination, type PaginationProps, PaperclipIcon, PasswordField, type PasswordFieldProps, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, PrinterIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, RedoIcon, RefreshCwIcon, SaveIcon, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, SendIcon, SettingsIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, Slider, type SliderProps, SlidersIcon, SmileIcon, Snackbar, type SnackbarProps, StarIcon, type Step, Stepper, type StepperProps, SunIcon, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagIcon, type TestIdHandle, TestIdProvider, type TestIdProviderProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, ThumbsDownIcon, ThumbsUpIcon, Tooltip, type TooltipPlacement, type TooltipProps, TrashIcon, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, UndoIcon, UnlockIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlusIcon, UsersIcon, Volume2Icon, VolumeXIcon, WifiIcon, XIcon, ZapIcon, colorVars, iconCatalog, modeNames, schemaNames, vars as theme, themes, usePrevious, useTestId, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AtSignIcon, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, BellIcon, BellOffIcon, BookmarkIcon, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, CalendarIcon, CameraIcon, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, ClipboardIcon, ClockIcon, CloudIcon, type ColorTokens, Container, type ContainerProps, CopyIcon, CornerDownRightIcon, CreditCardIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileTextIcon, FilterIcon, FingerprintIcon, FolderIcon, FolderOpenIcon, GiftIcon, GlobeIcon, GridIcon, HeartIcon, HelpCircleIcon, HomeIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, ImageIcon, InboxIcon, InfoIcon, KeyIcon, LayoutIcon, LinkIcon, ListIcon, ListItem, type ListItemProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, Menu, MenuIcon, type MenuItemDef, type MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MinimizeIcon, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PackageIcon, Pagination, type PaginationProps, PaperclipIcon, PasswordField, type PasswordFieldProps, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, PrinterIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, RedoIcon, RefreshCwIcon, SaveIcon, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, SendIcon, SettingsIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, Slider, type SliderProps, SlidersIcon, SmileIcon, Snackbar, type SnackbarProps, StarIcon, type Step, Stepper, type StepperProps, SunIcon, Surface, type SurfaceProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagIcon, type TestIdHandle, TestIdProvider, type TestIdProviderProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, ThumbsDownIcon, ThumbsUpIcon, Tooltip, type TooltipPlacement, type TooltipProps, TrashIcon, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, UndoIcon, UnlockIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlusIcon, UsersIcon, Volume2Icon, VolumeXIcon, WifiIcon, XIcon, ZapIcon, colorVars, iconCatalog, modeNames, schemaNames, vars as theme, themes, usePrevious, useTestId, useTheme, useToggle };

package/dist/index.d.ts CHANGED Viewed

@@ -78,7 +78,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -226,7 +226,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -374,7 +374,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -522,7 +522,7 @@ declare const schemas: {
                     readonly letterSpacing: "0.14em";
                 };
                 readonly display: {
-                    readonly size: "5.6rem";
+                    readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
                     readonly lineHeight: "1.05";
                     readonly weight: "600";
                     readonly letterSpacing: "-0.01em";
@@ -885,6 +885,20 @@ declare const Container: <E extends ElementType = "div">(props: ContainerProps<E
     ref?: Ref<Element>;
 }) => ReturnType<typeof ContainerImpl>;
+type SurfaceOwnProps<E extends ElementType> = {
+    as?: E;
+    /** Rellena el alto del viewport (min-height: 100dvh). Útil para el canvas de página. */
+    fill?: boolean;
+    /** Segmento de contexto para el data-testid. */
+    testId?: string;
+};
+type SurfaceProps<E extends ElementType = "div"> = SurfaceOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | keyof SurfaceOwnProps<E>>;
+declare function SurfaceInner<E extends ElementType = "div">({ as, fill, testId, ...rest }: SurfaceProps<E>, ref: Ref<HTMLElement>): react.JSX.Element;
+declare const Surface: <E extends ElementType = "div">(props: SurfaceProps<E> & {
+    ref?: Ref<HTMLElement>;
+}) => ReturnType<typeof SurfaceInner>;
 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";
@@ -1527,8 +1541,13 @@ interface ThemeProviderProps {
     storageKey?: string;
     /** Si es false, no persiste ni rehidrata (útil para previews/tests). */
     persist?: boolean;
+    /**
+     * Si es true, el provider pinta el canvas de página en el tema activo: envuelve en
+     * <Surface fill> y pinta el <body> (cubre overscroll). Default false: sin wrapper.
+     */
+    paintRoot?: boolean;
 }
-declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, paintRoot, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 interface TestIdProviderProps {
@@ -1546,4 +1565,4 @@ interface TestIdHandle {
 }
 declare function useTestId(type: string, ownTestId?: string): TestIdHandle;
-export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AtSignIcon, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, BellIcon, BellOffIcon, BookmarkIcon, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, CalendarIcon, CameraIcon, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, ClipboardIcon, ClockIcon, CloudIcon, type ColorTokens, Container, type ContainerProps, CopyIcon, CornerDownRightIcon, CreditCardIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileTextIcon, FilterIcon, FingerprintIcon, FolderIcon, FolderOpenIcon, GiftIcon, GlobeIcon, GridIcon, HeartIcon, HelpCircleIcon, HomeIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, ImageIcon, InboxIcon, InfoIcon, KeyIcon, LayoutIcon, LinkIcon, ListIcon, ListItem, type ListItemProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, Menu, MenuIcon, type MenuItemDef, type MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MinimizeIcon, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PackageIcon, Pagination, type PaginationProps, PaperclipIcon, PasswordField, type PasswordFieldProps, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, PrinterIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, RedoIcon, RefreshCwIcon, SaveIcon, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, SendIcon, SettingsIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, Slider, type SliderProps, SlidersIcon, SmileIcon, Snackbar, type SnackbarProps, StarIcon, type Step, Stepper, type StepperProps, SunIcon, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagIcon, type TestIdHandle, TestIdProvider, type TestIdProviderProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, ThumbsDownIcon, ThumbsUpIcon, Tooltip, type TooltipPlacement, type TooltipProps, TrashIcon, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, UndoIcon, UnlockIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlusIcon, UsersIcon, Volume2Icon, VolumeXIcon, WifiIcon, XIcon, ZapIcon, colorVars, iconCatalog, modeNames, schemaNames, vars as theme, themes, usePrevious, useTestId, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AtSignIcon, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, BellIcon, BellOffIcon, BookmarkIcon, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, CalendarIcon, CameraIcon, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, ClipboardIcon, ClockIcon, CloudIcon, type ColorTokens, Container, type ContainerProps, CopyIcon, CornerDownRightIcon, CreditCardIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileTextIcon, FilterIcon, FingerprintIcon, FolderIcon, FolderOpenIcon, GiftIcon, GlobeIcon, GridIcon, HeartIcon, HelpCircleIcon, HomeIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, ImageIcon, InboxIcon, InfoIcon, KeyIcon, LayoutIcon, LinkIcon, ListIcon, ListItem, type ListItemProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, Menu, MenuIcon, type MenuItemDef, type MenuProps, MessageCircleIcon, MessageSquareIcon, MicIcon, MinimizeIcon, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PackageIcon, Pagination, type PaginationProps, PaperclipIcon, PasswordField, type PasswordFieldProps, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, PrinterIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, RedoIcon, RefreshCwIcon, SaveIcon, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, SendIcon, SettingsIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, Slider, type SliderProps, SlidersIcon, SmileIcon, Snackbar, type SnackbarProps, StarIcon, type Step, Stepper, type StepperProps, SunIcon, Surface, type SurfaceProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagIcon, type TestIdHandle, TestIdProvider, type TestIdProviderProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, ThumbsDownIcon, ThumbsUpIcon, Tooltip, type TooltipPlacement, type TooltipProps, TrashIcon, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, UndoIcon, UnlockIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlusIcon, UsersIcon, Volume2Icon, VolumeXIcon, WifiIcon, XIcon, ZapIcon, colorVars, iconCatalog, modeNames, schemaNames, vars as theme, themes, usePrevious, useTestId, useTheme, useToggle };