@vaneui/ui 0.0.19 → 0.1.1

package/dist/components/{theme/themeContext.d.ts → themeContext.d.ts}

@@ -1,19 +1,19 @@
 import React from 'react';
-import { ComponentTheme } from "../ui/theme/common/ComponentTheme";
-import { ButtonTheme } from '../ui/theme/buttonTheme';
-import { BadgeTheme } from '../ui/theme/badgeTheme';
-import { ChipTheme } from '../ui/theme/chipTheme';
-import { TypographyComponentTheme } from '../ui/theme/typographyComponentTheme';
-import { CardTheme } from "../ui/theme/cardTheme";
-import { RowTheme } from "../ui/theme/rowTheme";
-import { DividerTheme } from '../ui/theme/dividerTheme';
-import { ContainerTheme } from '../ui/theme/containerTheme';
-import { ColTheme } from '../ui/theme/colTheme';
-import { StackTheme } from '../ui/theme/stackTheme';
-import { SectionTheme } from "../ui/theme/sectionTheme";
-import { GridTheme } from "../ui/theme/gridTheme";
-import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyComponentProps } from "../ui/props/props";
-import { DeepPartial } from "../utils/deepPartial";
+import { ComponentTheme } from "./ui/theme/common/ComponentTheme";
+import { ButtonTheme } from './ui/theme/buttonTheme';
+import { BadgeTheme } from './ui/theme/badgeTheme';
+import { ChipTheme } from './ui/theme/chipTheme';
+import { TypographyComponentTheme } from './ui/theme/typographyComponentTheme';
+import { CardTheme } from "./ui/theme/cardTheme";
+import { RowTheme } from "./ui/theme/rowTheme";
+import { DividerTheme } from './ui/theme/dividerTheme';
+import { ContainerTheme } from './ui/theme/containerTheme';
+import { ColTheme } from './ui/theme/colTheme';
+import { StackTheme } from './ui/theme/stackTheme';
+import { SectionTheme } from "./ui/theme/sectionTheme";
+import { GridTheme } from "./ui/theme/gridTheme";
+import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyComponentProps } from "./ui/props/props";
+import { DeepPartial } from "./utils/deepPartial";
 export declare const COMPONENT_KEYS: readonly ["button", "badge", "chip", "card", "divider", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem"];
 export type ComponentKey = typeof COMPONENT_KEYS[number];
 export interface ThemeProps extends Record<ComponentKey, ComponentTheme<object, object>> {

package/dist/components/themedComponent.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTheme } from "./ui/theme/common/ComponentTheme";
+import { ComponentProps } from "./ui/props/props";
+export type ThemedComponentProps<P extends ComponentProps, T extends object> = P & {
+    theme: ComponentTheme<P, T>;
+    propsToOmit?: readonly string[];
+};
+export declare function ThemedComponent<P extends ComponentProps, T extends object>({ theme, propsToOmit, ...props }: ThemedComponentProps<P, T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/classes/appearanceClasses.d.ts

@@ -6,7 +6,7 @@ export declare const backgroundAppearanceClasses: Record<TextAppearanceKey, stri
 export declare const hoverBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
 export declare const activeBackgroundAppearanceClasses: Record<TextAppearanceKey, string>;
 export declare const layoutBackgroundAppearanceClasses: Record<AppearanceKey, string>;
-export declare const dividerAppearanceClasses: Record<TextAppearanceKey, string>;
+export declare const bgBorderAppearanceClasses: Record<TextAppearanceKey, string>;
 export declare const borderAppearanceClasses: Record<TextAppearanceKey, string>;
 export declare const filledBorderAppearanceClasses: Record<TextAppearanceKey, string>;
 export declare const ringAppearanceClasses: Record<TextAppearanceKey, string>;

package/dist/components/ui/col.d.ts

@@ -1,10 +1,3 @@
 import { JSX } from 'react';
 import { ColProps } from './props/props';
-/**
- * Column component for vertical layouts.
- * Supports flex-wrap properties for controlling how items wrap.
- * @param props.wrap - Allows items to wrap (flex-wrap)
- * @param props.nowrap - Prevents items from wrapping (flex-nowrap)
- * @param props.wrapReverse - Wraps items onto multiple lines in reverse (flex-wrap-reverse)
- */
 export declare const Col: (props: ColProps) => JSX.Element;

package/dist/components/ui/props/keys.d.ts

@@ -26,7 +26,8 @@ export declare const FLEX_DIRECTION_KEYS: readonly ["row", "column", "rowReverse
 export declare const ITEMS_KEYS: readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"];
 export declare const JUSTIFY_KEYS: readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"];
 export declare const WRAP_KEYS: readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"];
-export declare const EXCLUSIVE_KEY_GROUPS: (readonly ["base", "hover", "active"] | readonly ["xs", "sm", "md", "lg", "xl"] | readonly ["filled", "outline"] | readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link"] | readonly ["sans", "serif", "mono"] | readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"] | readonly ["italic", "notItalic"] | readonly ["underline", "lineThrough", "noUnderline", "overline"] | readonly ["uppercase", "lowercase", "capitalize", "normalCase"] | readonly ["textLeft", "textCenter", "textRight", "textJustify"] | readonly ["border", "noBorder"] | readonly ["shadow", "noShadow"] | readonly ["ring", "noRing"] | readonly ["padding", "noPadding"] | readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"] | readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"] | readonly ["relative", "absolute", "fixed", "sticky", "static"] | readonly ["reverse"] | readonly ["gap", "noGap"] | readonly ["pill", "sharp", "rounded"] | readonly ["row", "column", "rowReverse", "columnReverse"] | readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"] | readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"] | readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"])[];
+export declare const DISPLAY_KEYS: readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
+export declare const EXCLUSIVE_KEY_GROUPS: (readonly ["base", "hover", "active"] | readonly ["xs", "sm", "md", "lg", "xl"] | readonly ["filled", "outline"] | readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link"] | readonly ["sans", "serif", "mono"] | readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"] | readonly ["italic", "notItalic"] | readonly ["underline", "lineThrough", "noUnderline", "overline"] | readonly ["uppercase", "lowercase", "capitalize", "normalCase"] | readonly ["textLeft", "textCenter", "textRight", "textJustify"] | readonly ["border", "noBorder"] | readonly ["shadow", "noShadow"] | readonly ["ring", "noRing"] | readonly ["padding", "noPadding"] | readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"] | readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"] | readonly ["relative", "absolute", "fixed", "sticky", "static"] | readonly ["reverse"] | readonly ["gap", "noGap"] | readonly ["pill", "sharp", "rounded"] | readonly ["row", "column", "rowReverse", "columnReverse"] | readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"] | readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"] | readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"] | readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"])[];
 export type ModeKey = typeof MODE_KEYS[number];
 export type SizeKey = typeof SIZE_KEYS[number];
 export type RingKey = typeof RING_KEYS[number];
@@ -51,29 +52,30 @@ export type FlexDirectionKey = typeof FLEX_DIRECTION_KEYS[number];
 export type ItemsKey = typeof ITEMS_KEYS[number];
 export type JustifyKey = typeof JUSTIFY_KEYS[number];
 export type WrapKey = typeof WRAP_KEYS[number];
-export declare const BASE_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static"];
+export type DisplayKey = typeof DISPLAY_KEYS[number];
+export declare const BASE_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
 export declare const FONT_KEYS: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
-export declare const TYPOGRAPHY_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
+export declare const TYPOGRAPHY_COMPONENT_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify"];
 export type TypographyComponentKey = typeof TYPOGRAPHY_COMPONENT_KEYS[number];
-export declare const BUTTON_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "filled", "outline", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const BUTTON_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "filled", "outline", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type ButtonKey = typeof BUTTON_KEYS[number];
-export declare const GRID_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "gap", "noGap", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const GRID_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "gap", "noGap", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type GridKey = typeof GRID_KEYS[number];
-export declare const ROW_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const ROW_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type RowKey = typeof ROW_KEYS[number];
-export declare const COL_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const COL_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type ColKey = typeof COL_KEYS[number];
-export declare const CARD_KEYS: readonly ["gap", "noGap", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "sharp", "rounded", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "ring", "noRing", "shadow", "noShadow", "padding", "noPadding", "row", "column", "rowReverse", "columnReverse", "xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse"];
+export declare const CARD_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "gap", "noGap", "sharp", "rounded", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "ring", "noRing", "shadow", "noShadow", "padding", "noPadding", "row", "column", "rowReverse", "columnReverse", "reverse", "flexWrap", "flexNoWrap", "flexWrapReverse"];
 export type CardKey = typeof CARD_KEYS[number];
-export declare const STACK_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "row", "column", "rowReverse", "columnReverse", "padding", "noPadding"];
+export declare const STACK_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "flexWrap", "flexNoWrap", "flexWrapReverse", "gap", "noGap", "reverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "row", "column", "rowReverse", "columnReverse", "padding", "noPadding"];
 export type StackKey = typeof STACK_KEYS[number];
-export declare const BADGE_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "filled", "outline", "shadow", "noShadow", "border", "noBorder", "ring", "noRing", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "gap", "noGap", "padding", "noPadding", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const BADGE_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "filled", "outline", "shadow", "noShadow", "border", "noBorder", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type BadgeKey = typeof BADGE_KEYS[number];
-export declare const CHIP_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "filled", "outline", "shadow", "noShadow", "border", "noBorder", "ring", "noRing", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "gap", "noGap", "padding", "noPadding", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const CHIP_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", "italic", "notItalic", "underline", "lineThrough", "noUnderline", "overline", "uppercase", "lowercase", "capitalize", "normalCase", "sans", "serif", "mono", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "muted", "link", "textLeft", "textCenter", "textRight", "textJustify", "pill", "sharp", "rounded", "filled", "outline", "shadow", "noShadow", "border", "noBorder", "ring", "noRing", "gap", "noGap", "padding", "noPadding", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type ChipKey = typeof CHIP_KEYS[number];
-export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
+export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent"];
 export type DividerKey = typeof DIVIDER_KEYS[number];
-export declare const CONTAINER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap"];
+export declare const CONTAINER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap", "pill", "sharp", "rounded"];
 export type ContainerKey = typeof CONTAINER_KEYS[number];
-export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "pill", "sharp", "rounded"];
+export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "relative", "absolute", "fixed", "sticky", "static", "inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden", "row", "column", "rowReverse", "columnReverse", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "pill", "sharp", "rounded"];
 export type SectionKey = typeof SECTION_KEYS[number];

package/dist/components/ui/props/props.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { BadgeKey, ButtonKey, GridKey, RowKey, ColKey, CardKey, StackKey, ChipKey, DividerKey, ContainerKey, SectionKey, TypographyComponentKey } from "./keys";
-export interface TagProps {
+export type ComponentProps = {
     tag?: React.ReactNode | string | any;
-}
-export type ComponentProps = TagProps & React.HTMLProps<HTMLElement>;
+    className?: string;
+    children?: React.ReactNode;
+} & React.HTMLProps<HTMLElement>;
 export type TypographyComponentProps = {
     [K in TypographyComponentKey]?: boolean;
 } & ComponentProps;

package/dist/components/ui/theme/common/ComponentTheme.d.ts

@@ -11,6 +11,8 @@ import { TextDecorationTheme } from "../typography/textDecorationTheme";
 import { TextTransformTheme } from "../typography/textTransformTheme";
 import { TextAlignTheme } from "../typography/textAlignTheme";
 import { DeepPartial } from "../../../utils/deepPartial";
+import { DisplayTheme } from "../layout/displayTheme";
+import { ComponentProps } from "../../props/props";
 type ThemeNode<P> = BaseTheme | ThemeMap<P>;
 export type ThemeMap<P> = {
     [key: string]: ThemeNode<P>;
@@ -20,6 +22,7 @@ export interface DefaultLayoutThemes<P> {
     items: ItemsTheme;
     justify: JustifyTheme;
     position: PositionTheme;
+    display: DisplayTheme;
 }
 export interface DefaultTypographyThemes<P> {
     fontFamily: FontFamilyTheme;
@@ -33,12 +36,17 @@ export interface BaseComponentTheme<P> {
     layout: DefaultLayoutThemes<P>;
     typography: DefaultTypographyThemes<P>;
 }
-export declare class ComponentTheme<P extends object, TThemes extends object> {
+export declare class ComponentTheme<P extends ComponentProps, TTheme extends object> {
     readonly tag: React.ElementType;
     readonly base: string;
-    readonly themes: TThemes;
+    readonly themes: TTheme;
     defaults: Partial<P>;
-    constructor(tag: React.ElementType, base: string, subThemes: DeepPartial<TThemes>, defaults?: Partial<P>);
+    constructor(tag: React.ElementType, base: string, subThemes: DeepPartial<TTheme>, defaults?: Partial<P>);
     getClasses(props: P, defaults?: Partial<P>): string[];
+    getComponentConfig(props: P, propsToOmit?: readonly string[]): {
+        Tag: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+        finalClasses: string;
+        finalProps: Omit<P, "tag" | "className">;
+    };
 }
 export {};

package/dist/components/ui/theme/containerTheme.d.ts

@@ -8,6 +8,7 @@ import { BorderTheme } from "./layout/borderTheme";
 import { RingTheme } from "./layout/ringTheme";
 import { LayoutAppearanceTheme } from "./appearance/layoutAppearanceTheme";
 import { TextAppearanceTheme } from "./appearance/textAppearanceTheme";
+import { RadiusTheme } from "./layout/radiusTheme";
 export interface ContainerTheme<P> extends BaseComponentTheme<P> {
     size: {
         gap: GapTheme;
@@ -18,6 +19,7 @@ export interface ContainerTheme<P> extends BaseComponentTheme<P> {
         direction: DirectionTheme;
         border: BorderTheme;
         ring: RingTheme;
+        radius: RadiusTheme;
     };
     appearance: {
         background: LayoutAppearanceTheme;

package/dist/components/ui/theme/layout/displayTheme.d.ts

@@ -0,0 +1,9 @@
+import { DisplayKey } from "../../props/keys";
+import { BaseTheme } from "../common/baseTheme";
+export interface DisplayTheme extends Record<DisplayKey, string> {
+}
+export declare class DisplayTheme extends BaseTheme {
+    static readonly defaultClasses: Record<DisplayKey, string>;
+    constructor(initialConfig?: Partial<Record<DisplayKey, string>>);
+    getClasses(props: Record<string, boolean>, defaults: Record<string, boolean>): string[];
+}

package/dist/components/utils/componentUtils.d.ts

@@ -1,4 +1,4 @@
 /**
- * Pick the first truthy key from props, then from defaults, then fallback.
+ * Pick the first truthy key from props, then from defaults, then undefined.
  */
 export declare function pickFirstTruthyKey<P, K extends keyof P>(props: Partial<P>, defaults: Partial<P>, keys: readonly K[]): K | undefined;

package/dist/index.d.ts

@@ -4,5 +4,5 @@ export { Divider } from "./components/ui/divider";
 export { Chip } from "./components/ui/chip";
 export { Section, Container, Col, Row, Stack, Grid3, Grid4, Card } from "./components/ui/layout";
 export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";
-export { ThemeProvider, useTheme, type ThemeProps, type ThemeDefaults, type ThemeProviderProps, type PartialTheme, defaultTheme, type ComponentKey, COMPONENT_KEYS } from './components/theme/themeContext';
+export { ThemeProvider, useTheme, type ThemeProps, type ThemeDefaults, type ThemeProviderProps, type PartialTheme, defaultTheme, type ComponentKey, COMPONENT_KEYS } from './components/themeContext';
 export { type ModeKey } from "./components/ui/props/keys";