@axzydev/axzy_ui_system 1.4.1 → 1.4.3
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.
- package/README.md +2 -2
- package/dist/index.cjs +422 -259
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +169 -70
- package/dist/index.d.ts +169 -70
- package/dist/index.js +324 -162
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +3 -0
- package/src/components/molecules/card/card.tsx +22 -9
- package/src/components/organisms/page-header/page-header.tsx +14 -3
- package/src/components/organisms/sidebar/sidebar.doc.mdx +48 -2
- package/src/components/organisms/sidebar/sidebar.props.ts +58 -3
- package/src/components/organisms/sidebar/sidebar.stories.tsx +59 -1
- package/src/components/organisms/sidebar/sidebar.tsx +141 -25
- package/src/components/organisms/topbar/topbar.props.ts +7 -0
- package/src/components/organisms/topbar/topbar.tsx +31 -8
- package/src/components/templates/layout/layout.props.ts +8 -0
- package/src/components/templates/layout/layout.tsx +101 -54
- package/src/components/theme-provider/themeProvider.doc.mdx +1 -0
- package/src/components/theme-provider/themeProvider.props.ts +6 -0
- package/src/components/theme-provider/themeProvider.tsx +11 -1
- package/src/index.ts +6 -5
- package/src/sandbox/LandingShowcase.tsx +1 -1
- package/src/sandbox/navigation.ts +1 -0
- package/src/showcases/HelpShowcase.tsx +497 -0
- package/src/showcases/StructureShowcases.tsx +58 -5
- package/src/theme/theme-context.ts +11 -1
- package/src/theme/theme.types.ts +7 -0
package/dist/index.d.ts
CHANGED
|
@@ -3052,8 +3052,47 @@ interface ITNavigationItem {
|
|
|
3052
3052
|
* The field `items` is reserved for {@link ITNavigationSubItemGroup}.
|
|
3053
3053
|
*/
|
|
3054
3054
|
subitems?: ITNavigationSubItemEntry[];
|
|
3055
|
-
/**
|
|
3056
|
-
|
|
3055
|
+
/**
|
|
3056
|
+
* Notification badge content rendered with the {@link ITBadget} atom
|
|
3057
|
+
* (e.g. an unread count). Omit it to render no badge.
|
|
3058
|
+
*/
|
|
3059
|
+
badge?: number | string;
|
|
3060
|
+
/**
|
|
3061
|
+
* Styling forwarded to the `ITBadget` rendered for {@link ITNavigationItem.badge}.
|
|
3062
|
+
* `color`, `size`, `variant` and `className` are supported; use `className`
|
|
3063
|
+
* to tweak the badge padding/positioning.
|
|
3064
|
+
*/
|
|
3065
|
+
badgeProps?: ITBadgetProps;
|
|
3066
|
+
}
|
|
3067
|
+
/**
|
|
3068
|
+
* Notification row pinned above the navigation in {@link ITSidebarProps}. It
|
|
3069
|
+
* renders an optional icon, a label and an `ITBadget` counter — e.g. a bell with
|
|
3070
|
+
* a number. When the rail is collapsed only the icon + counter are shown.
|
|
3071
|
+
*/
|
|
3072
|
+
interface ITSidebarNotification {
|
|
3073
|
+
/** Count displayed inside the notification `ITBadget`. */
|
|
3074
|
+
count: number;
|
|
3075
|
+
/** Icon rendered left of the label (e.g. a bell). Omit for a count-only pill. */
|
|
3076
|
+
icon?: React.ReactNode;
|
|
3077
|
+
/** Accessible label and tooltip for the notification button. @default "Notificaciones" */
|
|
3078
|
+
label?: string;
|
|
3079
|
+
/** Click handler for the notification button. */
|
|
3080
|
+
onClick?: () => void;
|
|
3081
|
+
/**
|
|
3082
|
+
* Styling forwarded to the internal `ITBadget`. Defaults to `color: "danger"`
|
|
3083
|
+
* and `size: "sm"`; override `color`/`variant`/`size` or use `className` for padding.
|
|
3084
|
+
*/
|
|
3085
|
+
badgeProps?: ITBadgetProps;
|
|
3086
|
+
}
|
|
3087
|
+
/**
|
|
3088
|
+
* Brand block pinned at the top of {@link ITSidebarProps}. The logo stays
|
|
3089
|
+
* visible while the rail is collapsed; the text only shows when expanded.
|
|
3090
|
+
*/
|
|
3091
|
+
interface ITSidebarBrand {
|
|
3092
|
+
/** Logo element (e.g. an `<img>` or an SVG mark). Always visible. */
|
|
3093
|
+
logo?: React.ReactNode;
|
|
3094
|
+
/** Wordmark rendered next to the logo. Hidden while the sidebar is collapsed. */
|
|
3095
|
+
text?: string;
|
|
3057
3096
|
}
|
|
3058
3097
|
/** Props for the ITSidebar vertical navigation component. */
|
|
3059
3098
|
interface ITSidebarProps {
|
|
@@ -3078,6 +3117,19 @@ interface ITSidebarProps {
|
|
|
3078
3117
|
* Hidden while the sidebar is collapsed, so it only shows on hover.
|
|
3079
3118
|
*/
|
|
3080
3119
|
header?: React.ReactNode;
|
|
3120
|
+
/**
|
|
3121
|
+
* Optional notification entry pinned above the navigation (icon + label +
|
|
3122
|
+
* `ITBadget` counter). Unlike {@link ITSidebarProps.header} it stays visible
|
|
3123
|
+
* while collapsed, showing just the icon and the counter.
|
|
3124
|
+
*/
|
|
3125
|
+
notification?: ITSidebarNotification;
|
|
3126
|
+
/**
|
|
3127
|
+
* Brand (logo + wordmark) pinned at the very top of the sidebar, in a 64px
|
|
3128
|
+
* row that lines up with the top bar. Unlike {@link ITSidebarProps.header}
|
|
3129
|
+
* the logo stays visible while collapsed. `ITLayout` fills it from
|
|
3130
|
+
* `topBar.logo` / `topBar.logoText` when `sidebarFullHeight` is set.
|
|
3131
|
+
*/
|
|
3132
|
+
brand?: ITSidebarBrand;
|
|
3081
3133
|
}
|
|
3082
3134
|
|
|
3083
3135
|
/**
|
|
@@ -3097,12 +3149,19 @@ interface ITSidebarProps {
|
|
|
3097
3149
|
* { id: "billing", label: "Billing", isActive: true },
|
|
3098
3150
|
* ],
|
|
3099
3151
|
* },
|
|
3152
|
+
* { id: "inbox", label: "Inbox", icon: <FaEnvelope />, badge: 12 },
|
|
3100
3153
|
* ]}
|
|
3154
|
+
* notification={{
|
|
3155
|
+
* count: 5,
|
|
3156
|
+
* icon: <FaBell />,
|
|
3157
|
+
* label: "Notificaciones",
|
|
3158
|
+
* onClick: () => navigate("/notifications"),
|
|
3159
|
+
* }}
|
|
3101
3160
|
* isCollapsed
|
|
3102
3161
|
* />
|
|
3103
3162
|
* ```
|
|
3104
3163
|
*/
|
|
3105
|
-
declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
|
|
3164
|
+
declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, notification, brand, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
|
|
3106
3165
|
|
|
3107
3166
|
/** Skeleton shape variant: "text" (line) | "circular" (avatar/icon) | "rectangular" (card/image). */
|
|
3108
3167
|
type SkeletonVariant = "text" | "circular" | "rectangular";
|
|
@@ -3723,6 +3782,13 @@ interface ITTopBarProps {
|
|
|
3723
3782
|
showMobileMenuButton?: boolean;
|
|
3724
3783
|
/** Callback fired when the mobile menu toggle button is clicked. */
|
|
3725
3784
|
onToggleMobileMenu?: () => void;
|
|
3785
|
+
/**
|
|
3786
|
+
* Hides the logo and `logoText` from the `lg` breakpoint up and left-aligns
|
|
3787
|
+
* `centerContent`. Use it when the brand already lives somewhere else (e.g.
|
|
3788
|
+
* at the top of a full-height sidebar); `ITLayout` sets it for you when
|
|
3789
|
+
* `sidebarFullHeight` is on. Below `lg` the logo is still shown. @default false
|
|
3790
|
+
*/
|
|
3791
|
+
hideBrandOnDesktop?: boolean;
|
|
3726
3792
|
}
|
|
3727
3793
|
|
|
3728
3794
|
interface ITLayoutProps {
|
|
@@ -3736,6 +3802,14 @@ interface ITLayoutProps {
|
|
|
3736
3802
|
className?: string;
|
|
3737
3803
|
/** Additional CSS classes for the content container */
|
|
3738
3804
|
contentClassName?: string;
|
|
3805
|
+
/**
|
|
3806
|
+
* App-shell arrangement. `false` (default): the top bar spans the full width
|
|
3807
|
+
* and the sidebar sits below it. `true`: the sidebar spans the full viewport
|
|
3808
|
+
* height and shows the brand (`topBar.logo` + `topBar.logoText`) at its top,
|
|
3809
|
+
* while the top bar covers only the content column and drops the logo from
|
|
3810
|
+
* the `lg` breakpoint up. Mobile is unchanged. @default false
|
|
3811
|
+
*/
|
|
3812
|
+
sidebarFullHeight?: boolean;
|
|
3739
3813
|
}
|
|
3740
3814
|
|
|
3741
3815
|
/**
|
|
@@ -3760,8 +3834,18 @@ interface ITLayoutProps {
|
|
|
3760
3834
|
* >
|
|
3761
3835
|
* <SettingsPage />
|
|
3762
3836
|
* </ITLayout>
|
|
3837
|
+
*
|
|
3838
|
+
* @example
|
|
3839
|
+
* // Full-height sidebar with the brand on top; the top bar covers only the content.
|
|
3840
|
+
* <ITLayout
|
|
3841
|
+
* sidebarFullHeight
|
|
3842
|
+
* topBar={{ logo: <Logo />, logoText: "Acme", centerContent: <SearchBox /> }}
|
|
3843
|
+
* sidebar={{ navigationItems, isCollapsed: false }}
|
|
3844
|
+
* >
|
|
3845
|
+
* <Dashboard />
|
|
3846
|
+
* </ITLayout>
|
|
3763
3847
|
*/
|
|
3764
|
-
declare function ITLayout({ topBar, sidebar, children, className, contentClassName, }: ITLayoutProps): react_jsx_runtime.JSX.Element;
|
|
3848
|
+
declare function ITLayout({ topBar, sidebar, children, className, contentClassName, sidebarFullHeight, }: ITLayoutProps): react_jsx_runtime.JSX.Element;
|
|
3765
3849
|
|
|
3766
3850
|
type LoaderSize = "sm" | "md" | "lg" | "xl";
|
|
3767
3851
|
type LoaderVariant = "spinner" | "dots" | "bar" | "pulse";
|
|
@@ -3854,63 +3938,6 @@ interface ITStepperProps {
|
|
|
3854
3938
|
*/
|
|
3855
3939
|
declare function ITStepper({ steps, currentStep, onFinish, onStepChange, allowClickToJump, useIcons, disableNext, containerClassName, stepClassName, scrollableContent, maxContentHeight, color, }: ITStepperProps): react_jsx_runtime.JSX.Element;
|
|
3856
3940
|
|
|
3857
|
-
interface ITThemePalette$1 {
|
|
3858
|
-
/** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
|
|
3859
|
-
primary: string;
|
|
3860
|
-
/** Secondary/neutral accent color (hex). Used for less prominent actions and secondary badges/buttons. @default "#6b7280" */
|
|
3861
|
-
secondary: string;
|
|
3862
|
-
/** Tertiary accent color (hex), used for a third level of emphasis (e.g. alternate badges, chart accents). @default "#8b5cf6" */
|
|
3863
|
-
ternary: string;
|
|
3864
|
-
/** Semantic color for destructive/error states (hex): delete buttons, error badges, invalid form fields. @default "#ef4444" */
|
|
3865
|
-
danger: string;
|
|
3866
|
-
/** Semantic color for success/confirmation states (hex): success badges, completed steps, positive stats. @default "#22c55e" */
|
|
3867
|
-
success: string;
|
|
3868
|
-
/** Semantic color for informational states (hex): info banners/badges, neutral notices. @default "#3b82f6" */
|
|
3869
|
-
info: string;
|
|
3870
|
-
/** Semantic color for alert/caution states (hex), distinct from `warning`. Used by components that need a stronger visual cue than warning. @default "#f97316" */
|
|
3871
|
-
alert: string;
|
|
3872
|
-
/** Semantic color for warning states (hex): warning badges/banners, pending states. @default "#eab308" */
|
|
3873
|
-
warning: string;
|
|
3874
|
-
/** Colors for the app shell's sidebar and top navbar (ITSidebar, ITNavbar, ITTopbar, ITLayout). */
|
|
3875
|
-
layout: {
|
|
3876
|
-
/** Background color of the sidebar (hex). @default "#ffffff" */
|
|
3877
|
-
sidebarBg: string;
|
|
3878
|
-
/** Text/icon color used on the sidebar. @default "#334155" */
|
|
3879
|
-
sidebarText: string;
|
|
3880
|
-
/** Background color of the top navigation bar (hex). @default "#ffffff" */
|
|
3881
|
-
navbarBg: string;
|
|
3882
|
-
/** Text/icon color used on the top navigation bar. @default "#1e293b" */
|
|
3883
|
-
navbarText: string;
|
|
3884
|
-
};
|
|
3885
|
-
/** Colors for ITTable/ITDataTable/ITSearchTable header and rows. */
|
|
3886
|
-
table: {
|
|
3887
|
-
/** Background color of the table header row (hex). @default "#f8fafc" */
|
|
3888
|
-
headerBg: string;
|
|
3889
|
-
/** Text color of the table header row. @default "#334155" */
|
|
3890
|
-
headerText: string;
|
|
3891
|
-
/** Background color of table body rows (hex). @default "#ffffff" */
|
|
3892
|
-
rowBg: string;
|
|
3893
|
-
/** Text color of table body rows. @default "#1e293b" */
|
|
3894
|
-
rowText: string;
|
|
3895
|
-
/** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
|
|
3896
|
-
rowHover: string;
|
|
3897
|
-
};
|
|
3898
|
-
}
|
|
3899
|
-
interface ITThemeProviderProps {
|
|
3900
|
-
/** Partial palette overrides merged (deep merge) with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. Persisted to `localStorage` under `"it-theme-palette"` once the user edits it via the FAB/drawer. */
|
|
3901
|
-
theme?: Partial<ITThemePalette$1>;
|
|
3902
|
-
/** The subtree that receives the theme context and CSS variables. Must wrap your entire app (or the portion that uses AXZY UI System components) once, near the root. */
|
|
3903
|
-
children: React.ReactNode;
|
|
3904
|
-
/** Whether to render the floating action button (bottom-right) that opens the live theme-designer drawer, letting end users tweak colors and persist their choice. Set to `false` to hide the FAB in production and only theme via the `theme` prop. @default true */
|
|
3905
|
-
showFab?: boolean;
|
|
3906
|
-
/** Global density/compactness factor. Values below 1 shrink the UI's base sizes, above 1 grow them (e.g. `0.8` = 80%: smaller fonts, paddings, gaps, spacing). Applied by scaling the root font-size so every `rem`-based token in Tailwind components compacts together, keeping the layout fluid (no empty margins, unlike CSS zoom). Clamped to `0.5`–`1.5`. @default 1 */
|
|
3907
|
-
density?: number;
|
|
3908
|
-
/** Global border radius in pixels applied to the entire rounding scale (`rounded-sm/md/lg/xl/2xl/…`). `radius={2}` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ completely square. Every `rounded-*` utility resolves to a `--radius-*` variable, so this reshapes inputs, buttons, cards, dialogs and tables system-wide with no per-component changes. @default 0 (no override, Tailwind defaults) */
|
|
3909
|
-
radius?: number;
|
|
3910
|
-
/** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
|
|
3911
|
-
shadow?: number;
|
|
3912
|
-
}
|
|
3913
|
-
|
|
3914
3941
|
type ColorScale = {
|
|
3915
3942
|
50: string;
|
|
3916
3943
|
100: string;
|
|
@@ -3924,7 +3951,13 @@ type ColorScale = {
|
|
|
3924
3951
|
900: string;
|
|
3925
3952
|
950?: string;
|
|
3926
3953
|
};
|
|
3927
|
-
|
|
3954
|
+
/**
|
|
3955
|
+
* Visual language of the whole system.
|
|
3956
|
+
* - `"soft"`: soft depth — floating cards, tinted shadows, glass sidebar and top bar (default).
|
|
3957
|
+
* - `"flat"`: flat surfaces — hairline borders instead of shadows, plain sidebar and top bar, compact page headers.
|
|
3958
|
+
*/
|
|
3959
|
+
type ITThemeAppearance = "soft" | "flat";
|
|
3960
|
+
interface ITThemePalette$1 {
|
|
3928
3961
|
/** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
|
|
3929
3962
|
primary: string;
|
|
3930
3963
|
/** Secondary/neutral accent color (hex). Used for less prominent actions and secondary badges/buttons. @default "#6b7280" */
|
|
@@ -4048,21 +4081,82 @@ interface ITThemeConfig {
|
|
|
4048
4081
|
};
|
|
4049
4082
|
}
|
|
4050
4083
|
|
|
4084
|
+
interface ITThemePalette {
|
|
4085
|
+
/** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
|
|
4086
|
+
primary: string;
|
|
4087
|
+
/** Secondary/neutral accent color (hex). Used for less prominent actions and secondary badges/buttons. @default "#6b7280" */
|
|
4088
|
+
secondary: string;
|
|
4089
|
+
/** Tertiary accent color (hex), used for a third level of emphasis (e.g. alternate badges, chart accents). @default "#8b5cf6" */
|
|
4090
|
+
ternary: string;
|
|
4091
|
+
/** Semantic color for destructive/error states (hex): delete buttons, error badges, invalid form fields. @default "#ef4444" */
|
|
4092
|
+
danger: string;
|
|
4093
|
+
/** Semantic color for success/confirmation states (hex): success badges, completed steps, positive stats. @default "#22c55e" */
|
|
4094
|
+
success: string;
|
|
4095
|
+
/** Semantic color for informational states (hex): info banners/badges, neutral notices. @default "#3b82f6" */
|
|
4096
|
+
info: string;
|
|
4097
|
+
/** Semantic color for alert/caution states (hex), distinct from `warning`. Used by components that need a stronger visual cue than warning. @default "#f97316" */
|
|
4098
|
+
alert: string;
|
|
4099
|
+
/** Semantic color for warning states (hex): warning badges/banners, pending states. @default "#eab308" */
|
|
4100
|
+
warning: string;
|
|
4101
|
+
/** Colors for the app shell's sidebar and top navbar (ITSidebar, ITNavbar, ITTopbar, ITLayout). */
|
|
4102
|
+
layout: {
|
|
4103
|
+
/** Background color of the sidebar (hex). @default "#ffffff" */
|
|
4104
|
+
sidebarBg: string;
|
|
4105
|
+
/** Text/icon color used on the sidebar. @default "#334155" */
|
|
4106
|
+
sidebarText: string;
|
|
4107
|
+
/** Background color of the top navigation bar (hex). @default "#ffffff" */
|
|
4108
|
+
navbarBg: string;
|
|
4109
|
+
/** Text/icon color used on the top navigation bar. @default "#1e293b" */
|
|
4110
|
+
navbarText: string;
|
|
4111
|
+
};
|
|
4112
|
+
/** Colors for ITTable/ITDataTable/ITSearchTable header and rows. */
|
|
4113
|
+
table: {
|
|
4114
|
+
/** Background color of the table header row (hex). @default "#f8fafc" */
|
|
4115
|
+
headerBg: string;
|
|
4116
|
+
/** Text color of the table header row. @default "#334155" */
|
|
4117
|
+
headerText: string;
|
|
4118
|
+
/** Background color of table body rows (hex). @default "#ffffff" */
|
|
4119
|
+
rowBg: string;
|
|
4120
|
+
/** Text color of table body rows. @default "#1e293b" */
|
|
4121
|
+
rowText: string;
|
|
4122
|
+
/** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
|
|
4123
|
+
rowHover: string;
|
|
4124
|
+
};
|
|
4125
|
+
}
|
|
4126
|
+
interface ITThemeProviderProps {
|
|
4127
|
+
/** Partial palette overrides merged (deep merge) with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. Persisted to `localStorage` under `"it-theme-palette"` once the user edits it via the FAB/drawer. */
|
|
4128
|
+
theme?: Partial<ITThemePalette>;
|
|
4129
|
+
/** The subtree that receives the theme context and CSS variables. Must wrap your entire app (or the portion that uses AXZY UI System components) once, near the root. */
|
|
4130
|
+
children: React.ReactNode;
|
|
4131
|
+
/** Whether to render the floating action button (bottom-right) that opens the live theme-designer drawer, letting end users tweak colors and persist their choice. Set to `false` to hide the FAB in production and only theme via the `theme` prop. @default true */
|
|
4132
|
+
showFab?: boolean;
|
|
4133
|
+
/** Global density/compactness factor. Values below 1 shrink the UI's base sizes, above 1 grow them (e.g. `0.8` = 80%: smaller fonts, paddings, gaps, spacing). Applied by scaling the root font-size so every `rem`-based token in Tailwind components compacts together, keeping the layout fluid (no empty margins, unlike CSS zoom). Clamped to `0.5`–`1.5`. @default 1 */
|
|
4134
|
+
density?: number;
|
|
4135
|
+
/** Global border radius in pixels applied to the entire rounding scale (`rounded-sm/md/lg/xl/2xl/…`). `radius={2}` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ completely square. Every `rounded-*` utility resolves to a `--radius-*` variable, so this reshapes inputs, buttons, cards, dialogs and tables system-wide with no per-component changes. @default 0 (no override, Tailwind defaults) */
|
|
4136
|
+
radius?: number;
|
|
4137
|
+
/** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
|
|
4138
|
+
shadow?: number;
|
|
4139
|
+
/** Visual language of the whole system. `"soft"` keeps the current look (floating cards, tinted shadows, glass sidebar/top bar). `"flat"` switches the app shell and surfaces to flat ones: hairline borders instead of shadows on `ITCard`, a plain `ITSidebar` (no glow, no accent bar, narrower), a plain `ITTopBar` (no shadow, initials avatar) and a compact `ITPageHeader` without the icon tile. It also sets `data-it-appearance` on `<html>` so app CSS can follow it. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
|
|
4140
|
+
appearance?: ITThemeAppearance;
|
|
4141
|
+
}
|
|
4142
|
+
|
|
4051
4143
|
/**
|
|
4052
4144
|
* Contexto de theming compartido por ITThemeProvider y componentes que lo
|
|
4053
4145
|
* consumen (p.ej. ITFormHeader). Vive en @/theme para que ninguna capa
|
|
4054
4146
|
* atómica dependa de otra a través del provider.
|
|
4055
4147
|
*/
|
|
4056
4148
|
interface ITThemeContextType {
|
|
4057
|
-
palette: ITThemePalette;
|
|
4058
|
-
colors: ITThemePalette;
|
|
4059
|
-
setPalette: (newPalette: ITThemePalette) => void;
|
|
4149
|
+
palette: ITThemePalette$1;
|
|
4150
|
+
colors: ITThemePalette$1;
|
|
4151
|
+
setPalette: (newPalette: ITThemePalette$1) => void;
|
|
4060
4152
|
updateColor: (key: string, value: string) => void;
|
|
4061
4153
|
resetTheme: () => void;
|
|
4062
|
-
applyPreset: (colors: ITThemePalette) => void;
|
|
4154
|
+
applyPreset: (colors: ITThemePalette$1) => void;
|
|
4063
4155
|
resolvedTheme: "light" | "dark";
|
|
4064
4156
|
darkModeMode: "light" | "dark" | "system";
|
|
4065
4157
|
setDarkModeMode: (mode: "light" | "dark" | "system") => void;
|
|
4158
|
+
/** Visual language chosen on the provider (`"soft"` unless `appearance` says otherwise). */
|
|
4159
|
+
appearance: ITThemeAppearance;
|
|
4066
4160
|
}
|
|
4067
4161
|
declare const useITTheme: () => ITThemeContextType;
|
|
4068
4162
|
/**
|
|
@@ -4070,6 +4164,11 @@ declare const useITTheme: () => ITThemeContextType;
|
|
|
4070
4164
|
* si se usa fuera de ITThemeProvider (no lanza error).
|
|
4071
4165
|
*/
|
|
4072
4166
|
declare const useITThemeSafe: () => ITThemeContextType | undefined;
|
|
4167
|
+
/**
|
|
4168
|
+
* `true` cuando el provider pide el lenguaje visual plano (`appearance="flat"`).
|
|
4169
|
+
* Fuera de un ITThemeProvider devuelve `false` (aspecto por defecto).
|
|
4170
|
+
*/
|
|
4171
|
+
declare const useITFlatAppearance: () => boolean;
|
|
4073
4172
|
|
|
4074
4173
|
/**
|
|
4075
4174
|
* Root theme context provider that injects CSS custom properties for all components,
|
|
@@ -4085,7 +4184,7 @@ declare const useITThemeSafe: () => ITThemeContextType | undefined;
|
|
|
4085
4184
|
* <Dashboard />
|
|
4086
4185
|
* </ITThemeProvider>
|
|
4087
4186
|
*/
|
|
4088
|
-
declare function ITThemeProvider({ children, theme, showFab, density, radius, shadow, }: ITThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
4187
|
+
declare function ITThemeProvider({ children, theme, showFab, density, radius, shadow, appearance, }: ITThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
4089
4188
|
|
|
4090
4189
|
interface ITTimePickerProps {
|
|
4091
4190
|
/** Form field name attribute and key for the change event. */
|
|
@@ -4154,10 +4253,10 @@ declare const isLightColor: (hex: string) => boolean;
|
|
|
4154
4253
|
/**
|
|
4155
4254
|
* Traduce un valor de color de CSS (hexadecimal o variable var(--...)) a hexadecimal absoluto.
|
|
4156
4255
|
*/
|
|
4157
|
-
declare const resolveCssColor: (colorStr: string, palette?: ITThemePalette
|
|
4256
|
+
declare const resolveCssColor: (colorStr: string, palette?: ITThemePalette, isDarkMode?: boolean) => string;
|
|
4158
4257
|
/**
|
|
4159
4258
|
* Obtiene la clase de color de texto óptima (blanca o gris oscuro) basado en el fondo.
|
|
4160
4259
|
*/
|
|
4161
|
-
declare const getContrastTextColor: (bgColor: string, palette?: ITThemePalette
|
|
4260
|
+
declare const getContrastTextColor: (bgColor: string, palette?: ITThemePalette, isDarkMode?: boolean) => "text-white" | "text-slate-800";
|
|
4162
4261
|
|
|
4163
|
-
export { type Column, type ColumnFilterMode, type ColumnFilterValue, type ColumnFilters, type FieldConfig, type FieldConfigV2, FileTypeEnum, ITAccordion, type ITAccordionItem, type ITAccordionProps, ITAlert, type ITAlertProps, ITAvatar, type ITAvatarProps, ITBadget, type ITBadgetProps, type ITBreadcrumbItem, ITBreadcrumbs, type ITBreadcrumbsProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITCheckbox, type ITCheckboxProps, ITChip, ITChipInput, type ITChipInputProps, type ITChipProps, ITConfirmDialog, type ITConfirmDialogProps, ITDataTable, type ITDataTableFetchParams, type ITDataTableProps, type ITDataTableResponse, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDivider, type ITDividerProps, ITDrawer, type ITDrawerProps, ITDropdownMenu, type ITDropdownMenuItem, type ITDropdownMenuProps, ITDropfile, ITEmptyState, type ITEmptyStateProps, ITField, type ITFieldProps, ITFlex, type ITFlexProps, ITFormBuilder, type ITFormBuilderProps, ITFormHeader, type ITFormHeaderProps, ITGrid, type ITGridProps, ITImage, type ITImageProps, ITInput, ITInputNumber, type ITInputNumberProps, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, type LoaderProps as ITLoaderProps, ITMaskedInput, type ITMaskedInputProps, ITMultiSelect, type ITMultiSelectOption, type ITMultiSelectProps, ITNavbar, type ITNavbarProps, type ITNavigationItem, type ITNavigationSubItem, type ITNavigationSubItemEntry, type ITNavigationSubItemGroup, ITPage, ITPageHeader, type ITPageHeaderProps, type ITPageProps, ITPagination, type ITPaginationProps, ITPopover, type ITPopoverProps, ITProgress, type ITProgressProps, ITRadioGroup, type ITRadioGroupProps, type ITRadioOption, ITSearchSelect, type ITSearchSelectProps, ITSearchTable, type ITSearchTableProps, ITSegmentedControl, type ITSegmentedControlProps, ITSelect, type ITSelectProps, ITSidebar, type ITSidebarProps, ITSkeleton, type ITSkeletonProps, ITSlideToggle, type ITSlideToggleProps, ITSlider, type ITSliderProps, ITStack, type ITStackProps, ITStatCard, type ITStatCardProps, ITStepper, type ITStepperProps, type ITTabItem, ITTable, type ITTableProps, ITTabs, type ITTabsProps, ITText, type ITTextProps, ITTextarea, type ITTextareaProps, type
|
|
4262
|
+
export { type Column, type ColumnFilterMode, type ColumnFilterValue, type ColumnFilters, type FieldConfig, type FieldConfigV2, FileTypeEnum, ITAccordion, type ITAccordionItem, type ITAccordionProps, ITAlert, type ITAlertProps, ITAvatar, type ITAvatarProps, ITBadget, type ITBadgetProps, type ITBreadcrumbItem, ITBreadcrumbs, type ITBreadcrumbsProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITCheckbox, type ITCheckboxProps, ITChip, ITChipInput, type ITChipInputProps, type ITChipProps, ITConfirmDialog, type ITConfirmDialogProps, ITDataTable, type ITDataTableFetchParams, type ITDataTableProps, type ITDataTableResponse, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDivider, type ITDividerProps, ITDrawer, type ITDrawerProps, ITDropdownMenu, type ITDropdownMenuItem, type ITDropdownMenuProps, ITDropfile, ITEmptyState, type ITEmptyStateProps, ITField, type ITFieldProps, ITFlex, type ITFlexProps, ITFormBuilder, type ITFormBuilderProps, ITFormHeader, type ITFormHeaderProps, ITGrid, type ITGridProps, ITImage, type ITImageProps, ITInput, ITInputNumber, type ITInputNumberProps, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, type LoaderProps as ITLoaderProps, ITMaskedInput, type ITMaskedInputProps, ITMultiSelect, type ITMultiSelectOption, type ITMultiSelectProps, ITNavbar, type ITNavbarProps, type ITNavigationItem, type ITNavigationSubItem, type ITNavigationSubItemEntry, type ITNavigationSubItemGroup, ITPage, ITPageHeader, type ITPageHeaderProps, type ITPageProps, ITPagination, type ITPaginationProps, ITPopover, type ITPopoverProps, ITProgress, type ITProgressProps, ITRadioGroup, type ITRadioGroupProps, type ITRadioOption, ITSearchSelect, type ITSearchSelectProps, ITSearchTable, type ITSearchTableProps, ITSegmentedControl, type ITSegmentedControlProps, ITSelect, type ITSelectProps, ITSidebar, type ITSidebarBrand, type ITSidebarNotification, type ITSidebarProps, ITSkeleton, type ITSkeletonProps, ITSlideToggle, type ITSlideToggleProps, ITSlider, type ITSliderProps, ITStack, type ITStackProps, ITStatCard, type ITStatCardProps, ITStepper, type ITStepperProps, type ITTabItem, ITTable, type ITTableProps, ITTabs, type ITTabsProps, ITText, type ITTextProps, ITTextarea, type ITTextareaProps, type ITThemeAppearance, type ITThemeConfig, type ITThemePalette, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, ITTripleFilter, type ITTripleFilterOption, type ITTripleFilterProps, ITWysiwyg, type ITWysiwygProps, type TableDensity, UploadStatus, type UseTableStateOptions, type UseTableStateResult, createValidationSchema, getContrastTextColor, isLightColor, resolveCssColor, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITFlatAppearance, useITTheme, useITThemeSafe, useTableState };
|