@vaneui/ui 0.1.3 → 0.1.4

package/dist/index.js

@@ -14,8 +14,9 @@ class BaseTheme {
 const MODE_KEYS = ['base', 'hover', 'active'];
 const SIZE_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'];
 const VARIANT_KEYS = ['filled', 'outline'];
-const APPEARANCE_KEYS = ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'transparent'];
-const TEXT_APPEARANCE_KEYS = [...APPEARANCE_KEYS, 'muted', 'link'];
+const UI_APPEARANCE_KEYS = ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'];
+const BG_APPEARANCE_KEYS = [...UI_APPEARANCE_KEYS, 'transparent'];
+const TEXT_APPEARANCE_KEYS = [...UI_APPEARANCE_KEYS, 'muted', 'link'];
 const FONT_FAMILY_KEYS = ['sans', 'serif', 'mono'];
 const FONT_WEIGHT_KEYS = ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'];
 const FONT_STYLE_KEYS = ['italic', 'notItalic'];
@@ -45,6 +46,8 @@ const EXCLUSIVE_KEY_GROUPS = [
     MODE_KEYS,
     SIZE_KEYS,
     TEXT_APPEARANCE_KEYS,
+    BG_APPEARANCE_KEYS,
+    UI_APPEARANCE_KEYS,
     VARIANT_KEYS,
     FONT_FAMILY_KEYS,
     FONT_WEIGHT_KEYS,
@@ -102,13 +105,13 @@ const BUTTON_KEYS = [
     ...GAP_KEYS,
     ...PADDING_KEYS,
     ...VARIANT_KEYS,
-    ...APPEARANCE_KEYS
+    ...TEXT_APPEARANCE_KEYS
 ];
 // Grid keys
 const GRID_KEYS = [
     ...BASE_COMPONENT_KEYS,
     ...GAP_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Row keys
 const ROW_KEYS = [
@@ -117,7 +120,7 @@ const ROW_KEYS = [
     ...GAP_KEYS,
     ...DIRECTION_REVERSE_KEYS,
     ...BREAKPOINT_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Col keys
 const COL_KEYS = [
@@ -125,7 +128,7 @@ const COL_KEYS = [
     ...WRAP_KEYS,
     ...GAP_KEYS,
     ...DIRECTION_REVERSE_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Card keys
 const CARD_KEYS = [
@@ -134,7 +137,7 @@ const CARD_KEYS = [
     ...SHARP_KEYS,
     ...ROUNDED_KEYS,
     ...BREAKPOINT_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...BORDER_KEYS,
     ...RING_KEYS,
     ...SHADOW_KEYS,
@@ -150,7 +153,7 @@ const STACK_KEYS = [
     ...GAP_KEYS,
     ...DIRECTION_REVERSE_KEYS,
     ...BREAKPOINT_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...FLEX_DIRECTION_KEYS,
     ...PADDING_KEYS
 ];
@@ -164,7 +167,7 @@ const BADGE_KEYS = [
     ...RING_KEYS,
     ...GAP_KEYS,
     ...PADDING_KEYS,
-    ...APPEARANCE_KEYS
+    ...TEXT_APPEARANCE_KEYS
 ];
 // Chip keys
 const CHIP_KEYS = [
@@ -176,17 +179,17 @@ const CHIP_KEYS = [
     ...RING_KEYS,
     ...GAP_KEYS,
     ...PADDING_KEYS,
-    ...APPEARANCE_KEYS
+    ...TEXT_APPEARANCE_KEYS
 ];
 // Divider keys
 const DIVIDER_KEYS = [
     ...BASE_COMPONENT_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Container keys
 const CONTAINER_KEYS = [
     ...BASE_COMPONENT_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...BORDER_KEYS,
     ...SHADOW_KEYS,
     ...RING_KEYS,
@@ -197,7 +200,7 @@ const CONTAINER_KEYS = [
 const SECTION_KEYS = [
     ...BASE_COMPONENT_KEYS,
     ...FLEX_DIRECTION_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...PADDING_KEYS,
     ...DIRECTION_REVERSE_KEYS,
     ...WRAP_KEYS,
@@ -3548,7 +3551,6 @@ PyTheme.defaultClasses = {
     noPadding: "py-0"
 };
 
-// Text appearance classes for filled buttons (all white text)
 const filledTextAppearanceClasses = {
     default: "text-white",
     primary: "text-white",
@@ -3561,9 +3563,7 @@ const filledTextAppearanceClasses = {
     danger: "text-white",
     warning: "text-white",
     info: "text-white",
-    transparent: "text-transparent",
 };
-// Default text appearance classes (for non-button components)
 const textAppearanceClasses = {
     default: "text-(--text-color-default)",
     primary: "text-(--text-color-primary)",
@@ -3576,9 +3576,7 @@ const textAppearanceClasses = {
     danger: "text-(--text-color-danger)",
     warning: "text-(--text-color-warning)",
     info: "text-(--text-color-info)",
-    transparent: "text-transparent",
 };
-// Text size classes
 const textSizeClasses = {
     xs: "text-xs",
     sm: "text-sm",
@@ -3639,7 +3637,6 @@ TextAppearanceTheme.defaultFullConfig = (() => {
     return config;
 })();
 
-// Background classes for filled buttons
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--filled-background-color-default)",
     primary: "bg-(--filled-background-color-primary)",
@@ -3651,10 +3648,7 @@ const filledBackgroundAppearanceClasses = {
     warning: "bg-(--filled-background-color-warning)",
     info: "bg-(--filled-background-color-info)",
     transparent: "bg-transparent",
-    muted: "bg-(--filled-background-color-muted)",
-    link: "bg-(--filled-background-color-link)",
 };
-// Hover background classes for filled buttons
 const filledHoverBackgroundAppearanceClasses = {
     default: "hover:bg-(--filled-background-color-hover-default)",
     primary: "hover:bg-(--filled-background-color-hover-primary)",
@@ -3666,10 +3660,7 @@ const filledHoverBackgroundAppearanceClasses = {
     warning: "hover:bg-(--filled-background-color-hover-warning)",
     info: "hover:bg-(--filled-background-color-hover-info)",
     transparent: "hover:bg-transparent",
-    muted: "hover:bg-(--filled-background-color-hover-muted)",
-    link: "hover:bg-(--filled-background-color-hover-link)",
 };
-// Active background classes for filled buttons
 const filledActiveBackgroundAppearanceClasses = {
     default: "active:bg-(--filled-background-color-active-default)",
     primary: "active:bg-(--filled-background-color-active-primary)",
@@ -3681,10 +3672,7 @@ const filledActiveBackgroundAppearanceClasses = {
     warning: "active:bg-(--filled-background-color-active-warning)",
     info: "active:bg-(--filled-background-color-active-info)",
     transparent: "active:bg-transparent",
-    muted: "active:bg-(--filled-background-color-active-muted)",
-    link: "active:bg-(--filled-background-color-active-link)",
 };
-// Default background appearance classes (for non-button components)
 const backgroundAppearanceClasses = {
     default: "bg-(--background-color-default)",
     primary: "bg-(--background-color-primary)",
@@ -3696,10 +3684,7 @@ const backgroundAppearanceClasses = {
     warning: "bg-(--background-color-warning)",
     info: "bg-(--background-color-info)",
     transparent: "bg-transparent",
-    muted: "bg-(--background-color-muted)",
-    link: "bg-(--background-color-link)",
 };
-// Hover background appearance classes for outline buttons
 const hoverBackgroundAppearanceClasses = {
     default: "hover:bg-(--background-color-hover-default)",
     primary: "hover:bg-(--background-color-hover-primary)",
@@ -3711,10 +3696,7 @@ const hoverBackgroundAppearanceClasses = {
     warning: "hover:bg-(--background-color-hover-warning)",
     info: "hover:bg-(--background-color-hover-info)",
     transparent: "hover:bg-transparent",
-    muted: "hover:bg-(--background-color-hover-muted)",
-    link: "hover:bg-(--background-color-hover-link)",
 };
-// Active background appearance classes for outline buttons
 const activeBackgroundAppearanceClasses = {
     default: "active:bg-(--background-color-active-default)",
     primary: "active:bg-(--background-color-active-primary)",
@@ -3726,8 +3708,6 @@ const activeBackgroundAppearanceClasses = {
     warning: "active:bg-(--background-color-active-warning)",
     info: "active:bg-(--background-color-active-info)",
     transparent: "active:bg-transparent",
-    muted: "active:bg-(--background-color-active-muted)",
-    link: "active:bg-(--background-color-active-link)",
 };
 const layoutBackgroundAppearanceClasses = {
     default: "bg-(--layout-background-default)",
@@ -3751,7 +3731,6 @@ const bgBorderAppearanceClasses = {
     danger: "bg-(--border-color-danger)",
     warning: "bg-(--border-color-warning)",
     info: "bg-(--border-color-info)",
-    transparent: "bg-transparent",
     muted: "bg-(--border-color-muted)",
     link: "bg-(--border-color-link)",
 };
@@ -3765,11 +3744,9 @@ const borderAppearanceClasses = {
     danger: "border-(--border-color-danger)",
     warning: "border-(--border-color-warning)",
     info: "border-(--border-color-info)",
-    transparent: "border-transparent",
     muted: "border-(--border-color-muted)",
     link: "border-(--border-color-link)",
 };
-// Border classes for filled elements
 const filledBorderAppearanceClasses = {
     default: "border-(--filled-border-color-default)",
     primary: "border-(--filled-border-color-primary)",
@@ -3780,7 +3757,6 @@ const filledBorderAppearanceClasses = {
     danger: "border-(--filled-border-color-danger)",
     warning: "border-(--filled-border-color-warning)",
     info: "border-(--filled-border-color-info)",
-    transparent: "border-transparent",
     muted: "border-(--filled-border-color-muted)",
     link: "border-(--filled-border-color-link)",
 };
@@ -3794,11 +3770,9 @@ const ringAppearanceClasses = {
     danger: "ring-(--border-color-danger)",
     warning: "ring-(--border-color-warning)",
     info: "ring-(--border-color-info)",
-    transparent: "ring-transparent",
     muted: "ring-(--border-color-muted)",
     link: "ring-(--border-color-link)",
 };
-// Ring classes for filled elements
 const filledRingAppearanceClasses = {
     default: "ring-(--filled-border-color-default)",
     primary: "ring-(--filled-border-color-primary)",
@@ -3809,7 +3783,6 @@ const filledRingAppearanceClasses = {
     danger: "ring-(--filled-border-color-danger)",
     warning: "ring-(--filled-border-color-warning)",
     info: "ring-(--filled-border-color-info)",
-    transparent: "ring-transparent",
     muted: "ring-(--filled-border-color-muted)",
     link: "ring-(--filled-border-color-link)",
 };
@@ -4216,7 +4189,7 @@ const commonGaps = {
 class LayoutAppearanceTheme extends BaseTheme {
     constructor(initialOverrides) {
         super();
-        APPEARANCE_KEYS.forEach((textKey) => {
+        BG_APPEARANCE_KEYS.forEach((textKey) => {
             const defaultModesForKey = LayoutAppearanceTheme.defaultFullConfig[textKey];
             const overrideModesForKey = initialOverrides === null || initialOverrides === void 0 ? void 0 : initialOverrides[textKey];
             this[textKey] = {
@@ -4226,7 +4199,7 @@ class LayoutAppearanceTheme extends BaseTheme {
         });
     }
     getClasses(props, defaults) {
-        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, APPEARANCE_KEYS) || 'default';
+        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, BG_APPEARANCE_KEYS) || 'default';
         const modesForAppearance = this[pickedAppearanceKey];
         if (!modesForAppearance) {
             return MODE_KEYS.map(() => '');
@@ -4235,7 +4208,7 @@ class LayoutAppearanceTheme extends BaseTheme {
     }
     static createDefaultStyle(src = {}) {
         const initialOverridesForConstructor = {};
-        APPEARANCE_KEYS.forEach((textKey) => {
+        BG_APPEARANCE_KEYS.forEach((textKey) => {
             const modesForCurrentTextKey = {};
             let keyHasDataInSrc = false;
             MODE_KEYS.forEach((modeKey) => {
@@ -4255,9 +4228,9 @@ class LayoutAppearanceTheme extends BaseTheme {
 }
 LayoutAppearanceTheme.defaultFullConfig = (() => {
     const config = {};
-    APPEARANCE_KEYS.forEach((key) => {
+    BG_APPEARANCE_KEYS.forEach((key) => {
         config[key] = {
-            base: textAppearanceClasses[key] || '',
+            base: backgroundAppearanceClasses[key] || '',
             hover: '',
             active: '',
         };
@@ -4715,9 +4688,9 @@ const List = (props) => {
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.list, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
 };
 
-exports.APPEARANCE_KEYS = APPEARANCE_KEYS;
 exports.BADGE_KEYS = BADGE_KEYS;
 exports.BASE_COMPONENT_KEYS = BASE_COMPONENT_KEYS;
+exports.BG_APPEARANCE_KEYS = BG_APPEARANCE_KEYS;
 exports.BORDER_KEYS = BORDER_KEYS;
 exports.BREAKPOINT_KEYS = BREAKPOINT_KEYS;
 exports.BUTTON_KEYS = BUTTON_KEYS;
@@ -4778,6 +4751,7 @@ exports.TYPOGRAPHY_COMPONENT_KEYS = TYPOGRAPHY_COMPONENT_KEYS;
 exports.Text = Text;
 exports.ThemeProvider = ThemeProvider;
 exports.Title = Title;
+exports.UI_APPEARANCE_KEYS = UI_APPEARANCE_KEYS;
 exports.VARIANT_KEYS = VARIANT_KEYS;
 exports.WRAP_KEYS = WRAP_KEYS;
 exports.defaultTheme = defaultTheme;