@axzydev/axzy_ui_system 1.7.4 → 1.8.1
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/dist/index.cjs +224 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +22 -5
- package/dist/index.d.ts +22 -5
- package/dist/index.js +220 -107
- package/dist/index.js.map +1 -1
- package/dist/layered.css +1 -1
- package/package.json +1 -1
- package/src/components/atoms/button/button.tsx +7 -0
- package/src/components/atoms/input/input.tsx +5 -0
- package/src/components/atoms/segmented-control/segmented-control.tsx +22 -5
- package/src/components/molecules/card/card.props.ts +12 -0
- package/src/components/molecules/card/card.tsx +52 -22
- package/src/components/molecules/chip-input/chip-input.tsx +2 -0
- package/src/components/molecules/multi-select/multi-select.tsx +2 -0
- package/src/components/molecules/tabs/tabs.tsx +22 -8
- package/src/components/organisms/data-table/dataTable.tsx +29 -3
- package/src/components/organisms/page-header/page-header.tsx +22 -6
- package/src/components/organisms/sidebar/sidebar.tsx +8 -5
- package/src/components/organisms/topbar/topbar.props.ts +2 -0
- package/src/components/organisms/topbar/topbar.tsx +56 -34
- package/src/components/templates/layout/layout.tsx +3 -2
- package/src/components/theme-provider/themeProvider.props.ts +1 -1
- package/src/components/theme-provider/themeProvider.tsx +54 -1
- package/src/index.ts +4 -4
- package/src/json-renderer/catalog/axzyCatalog.ts +5 -0
- package/src/sandbox/axzyConfig.test.ts +4 -0
- package/src/sandbox/axzyConfig.ts +1 -1
- package/src/sandbox/i18n.ts +6 -0
- package/src/showcases/FeedbackShowcases.tsx +2 -1
- package/src/showcases/StructureShowcases.tsx +17 -2
- package/src/theme/theme-context.ts +10 -2
- package/src/theme/theme.ts +1 -1
- package/src/theme/theme.types.ts +2 -1
package/dist/index.d.cts
CHANGED
|
@@ -758,7 +758,11 @@ interface ITCalendarProps {
|
|
|
758
758
|
*/
|
|
759
759
|
declare const ITCalendar: React__default.FC<ITCalendarProps>;
|
|
760
760
|
|
|
761
|
+
/** Pastel tint applied to a card through the `--color-<tone>-soft` token. */
|
|
762
|
+
type ITCardTone = "primary" | "secondary" | "ternary" | "success" | "info" | "warning" | "danger";
|
|
761
763
|
interface ITCardProps {
|
|
764
|
+
/** Pastel tile: tints the card background with the `--color-<tone>-soft` token of the palette, overriding the default white surface. In `soft`/`flat` appearances it also uses `--color-<tone>-soft-border` for the border; in `bento` the card stays borderless. Works in every appearance and in dark mode. Omit it for the regular surface. */
|
|
765
|
+
tone?: ITCardTone;
|
|
762
766
|
/** Click handler. When provided, the card becomes interactive with hover shadow effect. */
|
|
763
767
|
onClick?: () => void;
|
|
764
768
|
/** Card title displayed in the header area. */
|
|
@@ -786,7 +790,8 @@ interface ITCardProps {
|
|
|
786
790
|
}
|
|
787
791
|
|
|
788
792
|
/**
|
|
789
|
-
* Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states
|
|
793
|
+
* Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states
|
|
794
|
+
* and pastel `tone` tiles. Follows the provider `appearance` (`soft`, `flat`, `bento`).
|
|
790
795
|
*
|
|
791
796
|
* @example
|
|
792
797
|
* <ITCard title="Welcome" image="/hero.jpg" actions={<ITButton label="Learn more" />}>
|
|
@@ -794,11 +799,14 @@ interface ITCardProps {
|
|
|
794
799
|
* </ITCard>
|
|
795
800
|
*
|
|
796
801
|
* @example
|
|
802
|
+
* <ITCard tone="success" title="Revenue">+12.4%</ITCard>
|
|
803
|
+
*
|
|
804
|
+
* @example
|
|
797
805
|
* <ITCard onClick={() => {}} className="max-w-sm">
|
|
798
806
|
* Clickable card with hover shadow.
|
|
799
807
|
* </ITCard>
|
|
800
808
|
*/
|
|
801
|
-
declare function ITCard({ title, headerActions, image, alt, children, actions, className, imageClassName, titleClassName, contentClassName, actionClassName, onClick, }: ITCardProps): react_jsx_runtime.JSX.Element;
|
|
809
|
+
declare function ITCard({ title, tone, headerActions, image, alt, children, actions, className, imageClassName, titleClassName, contentClassName, actionClassName, onClick, }: ITCardProps): react_jsx_runtime.JSX.Element;
|
|
802
810
|
|
|
803
811
|
interface ITCheckboxProps {
|
|
804
812
|
/** Controlled checked state. @default false */
|
|
@@ -3694,6 +3702,7 @@ interface ITTabsProps {
|
|
|
3694
3702
|
/**
|
|
3695
3703
|
* Tabbed navigation component with "line" and "pill" visual variants.
|
|
3696
3704
|
* Manages its own active state internally via a defaultActiveId.
|
|
3705
|
+
* With `appearance="bento"` the "pill" variant becomes a rounded track with an ink active pill.
|
|
3697
3706
|
*
|
|
3698
3707
|
* @example
|
|
3699
3708
|
* <ITTabs
|
|
@@ -5149,6 +5158,8 @@ interface ITTopBarNavItem {
|
|
|
5149
5158
|
label: string;
|
|
5150
5159
|
/** Optional icon element rendered beside the label. */
|
|
5151
5160
|
icon?: any;
|
|
5161
|
+
/** Marks the item as the current one. Sets `aria-current="page"`; with `appearance="bento"` it renders as the ink pill (dark fill, white text), in the other appearances as a subtle highlight. @default false */
|
|
5162
|
+
isActive?: boolean;
|
|
5152
5163
|
/** Click handler for this navigation item (legacy, prefer onNavItemClick). */
|
|
5153
5164
|
action: () => void;
|
|
5154
5165
|
}
|
|
@@ -5372,8 +5383,9 @@ type ColorScale = {
|
|
|
5372
5383
|
* Visual language of the whole system.
|
|
5373
5384
|
* - `"soft"`: soft depth — floating cards, tinted shadows, glass sidebar and top bar (default).
|
|
5374
5385
|
* - `"flat"`: flat surfaces — hairline borders instead of shadows, plain sidebar and top bar, compact page headers.
|
|
5386
|
+
* - `"bento"`: modern pastel "bento" dashboards — light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill controls (buttons, inputs), ink-pill navigation and pastel tiles via `ITCard` `tone`.
|
|
5375
5387
|
*/
|
|
5376
|
-
type ITThemeAppearance = "soft" | "flat";
|
|
5388
|
+
type ITThemeAppearance = "soft" | "flat" | "bento";
|
|
5377
5389
|
interface ITThemePalette$1 {
|
|
5378
5390
|
/** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
|
|
5379
5391
|
primary: string;
|
|
@@ -5553,7 +5565,7 @@ interface ITThemeProviderProps {
|
|
|
5553
5565
|
radius?: number;
|
|
5554
5566
|
/** 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) */
|
|
5555
5567
|
shadow?: number;
|
|
5556
|
-
/** 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" */
|
|
5568
|
+
/** 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. `"bento"` gives a modern pastel dashboard: light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill buttons and inputs, an ink-pill active item in `ITTopBar` and a neutral-pill one in `ITSidebar`, a large `ITPageHeader` title and pastel tiles through `ITCard` `tone`; an explicit `radius`/`shadow` prop wins over the bento defaults. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
|
|
5557
5569
|
appearance?: ITThemeAppearance;
|
|
5558
5570
|
}
|
|
5559
5571
|
|
|
@@ -5581,6 +5593,11 @@ declare const useITTheme: () => ITThemeContextType;
|
|
|
5581
5593
|
* si se usa fuera de ITThemeProvider (no lanza error).
|
|
5582
5594
|
*/
|
|
5583
5595
|
declare const useITThemeSafe: () => ITThemeContextType | undefined;
|
|
5596
|
+
/**
|
|
5597
|
+
* Lenguaje visual activo (`"soft"` | `"flat"` | `"bento"`).
|
|
5598
|
+
* Fuera de un ITThemeProvider devuelve `"soft"` (aspecto por defecto).
|
|
5599
|
+
*/
|
|
5600
|
+
declare const useITAppearance: () => ITThemeAppearance;
|
|
5584
5601
|
/**
|
|
5585
5602
|
* `true` cuando el provider pide el lenguaje visual plano (`appearance="flat"`).
|
|
5586
5603
|
* Fuera de un ITThemeProvider devuelve `false` (aspecto por defecto).
|
|
@@ -5766,4 +5783,4 @@ declare const es: ITMessages;
|
|
|
5766
5783
|
*/
|
|
5767
5784
|
declare const en: ITMessages;
|
|
5768
5785
|
|
|
5769
|
-
export { AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES, type ActionSchema, type BindingResolver, type BindingScope, CURRENT_SCHEMA_VERSION, type Catalog, type CatalogEntry, type Column, type ColumnFilterMode, type ColumnFilterValue, type ColumnFilters, type ComponentContract, DEFAULT_LIMITS, DEFAULT_MIGRATIONS, type DataHandler, type DataLoader, type DataSourceSchema, type EffectRegistry, type EffectSchema, type EngineLimits, type FieldConfig, type FieldConfigV2, FileTypeEnum, type FlatRoute, GLOBALLY_FORBIDDEN_PROPS, 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, ITI18nProvider, type ITI18nProviderProps, type ITI18nValue, ITImage, type ITImageProps, ITInput, ITInputNumber, type ITInputNumberProps, type ITInputProps, ITJSONEditor, type ITJSONEditorProps, type ITJsonRenderEngineProps, ITJsonRenderer, type ITJsonRendererProps, ITLayout, type ITLayoutProps, ITLineBarChart, type ITLineBarChartProps, type ITLineBarDatum, ITLoader, type LoaderProps as ITLoaderProps, type ITLocale, ITMaskedInput, type ITMaskedInputProps, type ITMessages, type ITMessagesByLocale, 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, ITSchemaRenderer, 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 JsonComponentNode, type JsonComponentType, type JsonEngineCode, JsonEngineError, type JsonEngineIssue, type JsonEngineSeverity, type LimitTracker, type MigrationRegistry, type MigrationResult, type NavNode, NodeBoundary, type NodeSchema, type NodeStatus, type PartialParseResult, type PathSegment, type PropContract, type PropKind, type PropSpec, type ResolvedNode, type RouteMatch, type RouteNavSchema, type RouteSchema, type RoutesSchema, type SchemaMigration, type SchemaPath, type SchemaReference, type SchemaValue, type ScreenSchema, type SlotComponent, type SlotRegistry, type StreamSource, type StreamState, type TableColors, type TableDensity, type TableDesign, type TableDesignProps, type TableDesignSlot, type ToastVariant, type UnresolvedNode, UploadStatus, type UseTableStateOptions, type UseTableStateResult, type ValidateOptions, type ValidationReport, type ValidationVerdict, type VocabularyContract, type WhenSchema, auditTree, axzyCatalog, axzyCatalogTypes, buildNavigationTree, buildVocabularyContract, countPendingNodes, createBindingResolver, createCatalog, createLimitTracker, createValidationSchema, en as enMessages, es as esMessages, flattenRoutes, formatPath, formatVocabularyForPrompt, getCatalogEntry, getContrastTextColor, getExclusionReason, hasPath, isExcludedType, isLightColor, isNodePending, issue, joinRoutePath, matchRoute, migrateSchema, navContainsRoute, parsePartialSchema, parsePath, propPath, pushPath, readPath, renderNode, resolveCssColor, resolveLimits, resolveNode, routeHref, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITFlatAppearance, useITTheme, useITThemeSafe, useITTranslation, useJsonRender, useSchemaStream, useTableState, validateRoutes, validateSchema };
|
|
5786
|
+
export { AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES, type ActionSchema, type BindingResolver, type BindingScope, CURRENT_SCHEMA_VERSION, type Catalog, type CatalogEntry, type Column, type ColumnFilterMode, type ColumnFilterValue, type ColumnFilters, type ComponentContract, DEFAULT_LIMITS, DEFAULT_MIGRATIONS, type DataHandler, type DataLoader, type DataSourceSchema, type EffectRegistry, type EffectSchema, type EngineLimits, type FieldConfig, type FieldConfigV2, FileTypeEnum, type FlatRoute, GLOBALLY_FORBIDDEN_PROPS, 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, type ITCardTone, 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, ITI18nProvider, type ITI18nProviderProps, type ITI18nValue, ITImage, type ITImageProps, ITInput, ITInputNumber, type ITInputNumberProps, type ITInputProps, ITJSONEditor, type ITJSONEditorProps, type ITJsonRenderEngineProps, ITJsonRenderer, type ITJsonRendererProps, ITLayout, type ITLayoutProps, ITLineBarChart, type ITLineBarChartProps, type ITLineBarDatum, ITLoader, type LoaderProps as ITLoaderProps, type ITLocale, ITMaskedInput, type ITMaskedInputProps, type ITMessages, type ITMessagesByLocale, 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, ITSchemaRenderer, 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 JsonComponentNode, type JsonComponentType, type JsonEngineCode, JsonEngineError, type JsonEngineIssue, type JsonEngineSeverity, type LimitTracker, type MigrationRegistry, type MigrationResult, type NavNode, NodeBoundary, type NodeSchema, type NodeStatus, type PartialParseResult, type PathSegment, type PropContract, type PropKind, type PropSpec, type ResolvedNode, type RouteMatch, type RouteNavSchema, type RouteSchema, type RoutesSchema, type SchemaMigration, type SchemaPath, type SchemaReference, type SchemaValue, type ScreenSchema, type SlotComponent, type SlotRegistry, type StreamSource, type StreamState, type TableColors, type TableDensity, type TableDesign, type TableDesignProps, type TableDesignSlot, type ToastVariant, type UnresolvedNode, UploadStatus, type UseTableStateOptions, type UseTableStateResult, type ValidateOptions, type ValidationReport, type ValidationVerdict, type VocabularyContract, type WhenSchema, auditTree, axzyCatalog, axzyCatalogTypes, buildNavigationTree, buildVocabularyContract, countPendingNodes, createBindingResolver, createCatalog, createLimitTracker, createValidationSchema, en as enMessages, es as esMessages, flattenRoutes, formatPath, formatVocabularyForPrompt, getCatalogEntry, getContrastTextColor, getExclusionReason, hasPath, isExcludedType, isLightColor, isNodePending, issue, joinRoutePath, matchRoute, migrateSchema, navContainsRoute, parsePartialSchema, parsePath, propPath, pushPath, readPath, renderNode, resolveCssColor, resolveLimits, resolveNode, routeHref, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITAppearance, useITFlatAppearance, useITTheme, useITThemeSafe, useITTranslation, useJsonRender, useSchemaStream, useTableState, validateRoutes, validateSchema };
|
package/dist/index.d.ts
CHANGED
|
@@ -758,7 +758,11 @@ interface ITCalendarProps {
|
|
|
758
758
|
*/
|
|
759
759
|
declare const ITCalendar: React__default.FC<ITCalendarProps>;
|
|
760
760
|
|
|
761
|
+
/** Pastel tint applied to a card through the `--color-<tone>-soft` token. */
|
|
762
|
+
type ITCardTone = "primary" | "secondary" | "ternary" | "success" | "info" | "warning" | "danger";
|
|
761
763
|
interface ITCardProps {
|
|
764
|
+
/** Pastel tile: tints the card background with the `--color-<tone>-soft` token of the palette, overriding the default white surface. In `soft`/`flat` appearances it also uses `--color-<tone>-soft-border` for the border; in `bento` the card stays borderless. Works in every appearance and in dark mode. Omit it for the regular surface. */
|
|
765
|
+
tone?: ITCardTone;
|
|
762
766
|
/** Click handler. When provided, the card becomes interactive with hover shadow effect. */
|
|
763
767
|
onClick?: () => void;
|
|
764
768
|
/** Card title displayed in the header area. */
|
|
@@ -786,7 +790,8 @@ interface ITCardProps {
|
|
|
786
790
|
}
|
|
787
791
|
|
|
788
792
|
/**
|
|
789
|
-
* Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states
|
|
793
|
+
* Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states
|
|
794
|
+
* and pastel `tone` tiles. Follows the provider `appearance` (`soft`, `flat`, `bento`).
|
|
790
795
|
*
|
|
791
796
|
* @example
|
|
792
797
|
* <ITCard title="Welcome" image="/hero.jpg" actions={<ITButton label="Learn more" />}>
|
|
@@ -794,11 +799,14 @@ interface ITCardProps {
|
|
|
794
799
|
* </ITCard>
|
|
795
800
|
*
|
|
796
801
|
* @example
|
|
802
|
+
* <ITCard tone="success" title="Revenue">+12.4%</ITCard>
|
|
803
|
+
*
|
|
804
|
+
* @example
|
|
797
805
|
* <ITCard onClick={() => {}} className="max-w-sm">
|
|
798
806
|
* Clickable card with hover shadow.
|
|
799
807
|
* </ITCard>
|
|
800
808
|
*/
|
|
801
|
-
declare function ITCard({ title, headerActions, image, alt, children, actions, className, imageClassName, titleClassName, contentClassName, actionClassName, onClick, }: ITCardProps): react_jsx_runtime.JSX.Element;
|
|
809
|
+
declare function ITCard({ title, tone, headerActions, image, alt, children, actions, className, imageClassName, titleClassName, contentClassName, actionClassName, onClick, }: ITCardProps): react_jsx_runtime.JSX.Element;
|
|
802
810
|
|
|
803
811
|
interface ITCheckboxProps {
|
|
804
812
|
/** Controlled checked state. @default false */
|
|
@@ -3694,6 +3702,7 @@ interface ITTabsProps {
|
|
|
3694
3702
|
/**
|
|
3695
3703
|
* Tabbed navigation component with "line" and "pill" visual variants.
|
|
3696
3704
|
* Manages its own active state internally via a defaultActiveId.
|
|
3705
|
+
* With `appearance="bento"` the "pill" variant becomes a rounded track with an ink active pill.
|
|
3697
3706
|
*
|
|
3698
3707
|
* @example
|
|
3699
3708
|
* <ITTabs
|
|
@@ -5149,6 +5158,8 @@ interface ITTopBarNavItem {
|
|
|
5149
5158
|
label: string;
|
|
5150
5159
|
/** Optional icon element rendered beside the label. */
|
|
5151
5160
|
icon?: any;
|
|
5161
|
+
/** Marks the item as the current one. Sets `aria-current="page"`; with `appearance="bento"` it renders as the ink pill (dark fill, white text), in the other appearances as a subtle highlight. @default false */
|
|
5162
|
+
isActive?: boolean;
|
|
5152
5163
|
/** Click handler for this navigation item (legacy, prefer onNavItemClick). */
|
|
5153
5164
|
action: () => void;
|
|
5154
5165
|
}
|
|
@@ -5372,8 +5383,9 @@ type ColorScale = {
|
|
|
5372
5383
|
* Visual language of the whole system.
|
|
5373
5384
|
* - `"soft"`: soft depth — floating cards, tinted shadows, glass sidebar and top bar (default).
|
|
5374
5385
|
* - `"flat"`: flat surfaces — hairline borders instead of shadows, plain sidebar and top bar, compact page headers.
|
|
5386
|
+
* - `"bento"`: modern pastel "bento" dashboards — light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill controls (buttons, inputs), ink-pill navigation and pastel tiles via `ITCard` `tone`.
|
|
5375
5387
|
*/
|
|
5376
|
-
type ITThemeAppearance = "soft" | "flat";
|
|
5388
|
+
type ITThemeAppearance = "soft" | "flat" | "bento";
|
|
5377
5389
|
interface ITThemePalette$1 {
|
|
5378
5390
|
/** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
|
|
5379
5391
|
primary: string;
|
|
@@ -5553,7 +5565,7 @@ interface ITThemeProviderProps {
|
|
|
5553
5565
|
radius?: number;
|
|
5554
5566
|
/** 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) */
|
|
5555
5567
|
shadow?: number;
|
|
5556
|
-
/** 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" */
|
|
5568
|
+
/** 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. `"bento"` gives a modern pastel dashboard: light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill buttons and inputs, an ink-pill active item in `ITTopBar` and a neutral-pill one in `ITSidebar`, a large `ITPageHeader` title and pastel tiles through `ITCard` `tone`; an explicit `radius`/`shadow` prop wins over the bento defaults. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
|
|
5557
5569
|
appearance?: ITThemeAppearance;
|
|
5558
5570
|
}
|
|
5559
5571
|
|
|
@@ -5581,6 +5593,11 @@ declare const useITTheme: () => ITThemeContextType;
|
|
|
5581
5593
|
* si se usa fuera de ITThemeProvider (no lanza error).
|
|
5582
5594
|
*/
|
|
5583
5595
|
declare const useITThemeSafe: () => ITThemeContextType | undefined;
|
|
5596
|
+
/**
|
|
5597
|
+
* Lenguaje visual activo (`"soft"` | `"flat"` | `"bento"`).
|
|
5598
|
+
* Fuera de un ITThemeProvider devuelve `"soft"` (aspecto por defecto).
|
|
5599
|
+
*/
|
|
5600
|
+
declare const useITAppearance: () => ITThemeAppearance;
|
|
5584
5601
|
/**
|
|
5585
5602
|
* `true` cuando el provider pide el lenguaje visual plano (`appearance="flat"`).
|
|
5586
5603
|
* Fuera de un ITThemeProvider devuelve `false` (aspecto por defecto).
|
|
@@ -5766,4 +5783,4 @@ declare const es: ITMessages;
|
|
|
5766
5783
|
*/
|
|
5767
5784
|
declare const en: ITMessages;
|
|
5768
5785
|
|
|
5769
|
-
export { AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES, type ActionSchema, type BindingResolver, type BindingScope, CURRENT_SCHEMA_VERSION, type Catalog, type CatalogEntry, type Column, type ColumnFilterMode, type ColumnFilterValue, type ColumnFilters, type ComponentContract, DEFAULT_LIMITS, DEFAULT_MIGRATIONS, type DataHandler, type DataLoader, type DataSourceSchema, type EffectRegistry, type EffectSchema, type EngineLimits, type FieldConfig, type FieldConfigV2, FileTypeEnum, type FlatRoute, GLOBALLY_FORBIDDEN_PROPS, 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, ITI18nProvider, type ITI18nProviderProps, type ITI18nValue, ITImage, type ITImageProps, ITInput, ITInputNumber, type ITInputNumberProps, type ITInputProps, ITJSONEditor, type ITJSONEditorProps, type ITJsonRenderEngineProps, ITJsonRenderer, type ITJsonRendererProps, ITLayout, type ITLayoutProps, ITLineBarChart, type ITLineBarChartProps, type ITLineBarDatum, ITLoader, type LoaderProps as ITLoaderProps, type ITLocale, ITMaskedInput, type ITMaskedInputProps, type ITMessages, type ITMessagesByLocale, 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, ITSchemaRenderer, 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 JsonComponentNode, type JsonComponentType, type JsonEngineCode, JsonEngineError, type JsonEngineIssue, type JsonEngineSeverity, type LimitTracker, type MigrationRegistry, type MigrationResult, type NavNode, NodeBoundary, type NodeSchema, type NodeStatus, type PartialParseResult, type PathSegment, type PropContract, type PropKind, type PropSpec, type ResolvedNode, type RouteMatch, type RouteNavSchema, type RouteSchema, type RoutesSchema, type SchemaMigration, type SchemaPath, type SchemaReference, type SchemaValue, type ScreenSchema, type SlotComponent, type SlotRegistry, type StreamSource, type StreamState, type TableColors, type TableDensity, type TableDesign, type TableDesignProps, type TableDesignSlot, type ToastVariant, type UnresolvedNode, UploadStatus, type UseTableStateOptions, type UseTableStateResult, type ValidateOptions, type ValidationReport, type ValidationVerdict, type VocabularyContract, type WhenSchema, auditTree, axzyCatalog, axzyCatalogTypes, buildNavigationTree, buildVocabularyContract, countPendingNodes, createBindingResolver, createCatalog, createLimitTracker, createValidationSchema, en as enMessages, es as esMessages, flattenRoutes, formatPath, formatVocabularyForPrompt, getCatalogEntry, getContrastTextColor, getExclusionReason, hasPath, isExcludedType, isLightColor, isNodePending, issue, joinRoutePath, matchRoute, migrateSchema, navContainsRoute, parsePartialSchema, parsePath, propPath, pushPath, readPath, renderNode, resolveCssColor, resolveLimits, resolveNode, routeHref, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITFlatAppearance, useITTheme, useITThemeSafe, useITTranslation, useJsonRender, useSchemaStream, useTableState, validateRoutes, validateSchema };
|
|
5786
|
+
export { AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES, type ActionSchema, type BindingResolver, type BindingScope, CURRENT_SCHEMA_VERSION, type Catalog, type CatalogEntry, type Column, type ColumnFilterMode, type ColumnFilterValue, type ColumnFilters, type ComponentContract, DEFAULT_LIMITS, DEFAULT_MIGRATIONS, type DataHandler, type DataLoader, type DataSourceSchema, type EffectRegistry, type EffectSchema, type EngineLimits, type FieldConfig, type FieldConfigV2, FileTypeEnum, type FlatRoute, GLOBALLY_FORBIDDEN_PROPS, 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, type ITCardTone, 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, ITI18nProvider, type ITI18nProviderProps, type ITI18nValue, ITImage, type ITImageProps, ITInput, ITInputNumber, type ITInputNumberProps, type ITInputProps, ITJSONEditor, type ITJSONEditorProps, type ITJsonRenderEngineProps, ITJsonRenderer, type ITJsonRendererProps, ITLayout, type ITLayoutProps, ITLineBarChart, type ITLineBarChartProps, type ITLineBarDatum, ITLoader, type LoaderProps as ITLoaderProps, type ITLocale, ITMaskedInput, type ITMaskedInputProps, type ITMessages, type ITMessagesByLocale, 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, ITSchemaRenderer, 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 JsonComponentNode, type JsonComponentType, type JsonEngineCode, JsonEngineError, type JsonEngineIssue, type JsonEngineSeverity, type LimitTracker, type MigrationRegistry, type MigrationResult, type NavNode, NodeBoundary, type NodeSchema, type NodeStatus, type PartialParseResult, type PathSegment, type PropContract, type PropKind, type PropSpec, type ResolvedNode, type RouteMatch, type RouteNavSchema, type RouteSchema, type RoutesSchema, type SchemaMigration, type SchemaPath, type SchemaReference, type SchemaValue, type ScreenSchema, type SlotComponent, type SlotRegistry, type StreamSource, type StreamState, type TableColors, type TableDensity, type TableDesign, type TableDesignProps, type TableDesignSlot, type ToastVariant, type UnresolvedNode, UploadStatus, type UseTableStateOptions, type UseTableStateResult, type ValidateOptions, type ValidationReport, type ValidationVerdict, type VocabularyContract, type WhenSchema, auditTree, axzyCatalog, axzyCatalogTypes, buildNavigationTree, buildVocabularyContract, countPendingNodes, createBindingResolver, createCatalog, createLimitTracker, createValidationSchema, en as enMessages, es as esMessages, flattenRoutes, formatPath, formatVocabularyForPrompt, getCatalogEntry, getContrastTextColor, getExclusionReason, hasPath, isExcludedType, isLightColor, isNodePending, issue, joinRoutePath, matchRoute, migrateSchema, navContainsRoute, parsePartialSchema, parsePath, propPath, pushPath, readPath, renderNode, resolveCssColor, resolveLimits, resolveNode, routeHref, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITAppearance, useITFlatAppearance, useITTheme, useITThemeSafe, useITTranslation, useJsonRender, useSchemaStream, useTableState, validateRoutes, validateSchema };
|