@vaneui/ui 0.3.1-alpha.20251223092345.7b8ce70 → 0.3.1-alpha.20251223141057.aeb1ff8

package/dist/index.js

@@ -75,7 +75,7 @@ const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent',
 /** Component property keys mapping categories to their available values */
 const ComponentKeys = {
     /** Color appearance options */
-    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'],
+    appearance: ['primary', 'brand', 'accent', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'],
     /** Border visibility: includes all border variations and noBorder (border, borderT, borderB, etc., noBorder) */
     border: ['border', 'borderT', 'borderB', 'borderL', 'borderR', 'borderX', 'borderY', 'noBorder'],
     /** Column breakpoints for responsive grid layouts */
@@ -3758,7 +3758,7 @@ class AppearanceTheme extends BaseTheme {
 }
 
 const filledTextAppearanceClasses = {
-    default: "text-(--color-text-filled-default)",
+    brand: "text-(--color-text-filled-brand)",
     primary: "text-(--color-text-filled-primary)",
     secondary: "text-(--color-text-filled-secondary)",
     tertiary: "text-(--color-text-filled-tertiary)",
@@ -3770,7 +3770,7 @@ const filledTextAppearanceClasses = {
     transparent: "text-transparent",
 };
 const textAppearanceClasses = {
-    default: "text-(--color-text-default)",
+    brand: "text-(--color-text-brand)",
     primary: "text-(--color-text-primary)",
     secondary: "text-(--color-text-secondary)",
     tertiary: "text-(--color-text-tertiary)",
@@ -3783,7 +3783,7 @@ const textAppearanceClasses = {
 };
 
 const filledBackgroundAppearanceClasses = {
-    default: "bg-(--color-bg-filled-default)",
+    brand: "bg-(--color-bg-filled-brand)",
     primary: "bg-(--color-bg-filled-primary)",
     secondary: "bg-(--color-bg-filled-secondary)",
     tertiary: "bg-(--color-bg-filled-tertiary)",
@@ -3795,7 +3795,7 @@ const filledBackgroundAppearanceClasses = {
     transparent: "bg-transparent",
 };
 const filledHoverBackgroundAppearanceClasses = {
-    default: "hover:bg-(--color-bg-filled-hover-default)",
+    brand: "hover:bg-(--color-bg-filled-hover-brand)",
     primary: "hover:bg-(--color-bg-filled-hover-primary)",
     secondary: "hover:bg-(--color-bg-filled-hover-secondary)",
     tertiary: "hover:bg-(--color-bg-filled-hover-tertiary)",
@@ -3807,7 +3807,7 @@ const filledHoverBackgroundAppearanceClasses = {
     transparent: "hover:bg-transparent",
 };
 const filledActiveBackgroundAppearanceClasses = {
-    default: "active:bg-(--color-bg-filled-active-default)",
+    brand: "active:bg-(--color-bg-filled-active-brand)",
     primary: "active:bg-(--color-bg-filled-active-primary)",
     secondary: "active:bg-(--color-bg-filled-active-secondary)",
     tertiary: "active:bg-(--color-bg-filled-active-tertiary)",
@@ -3819,7 +3819,7 @@ const filledActiveBackgroundAppearanceClasses = {
     transparent: "active:bg-transparent",
 };
 const backgroundAppearanceClasses = {
-    default: "bg-(--color-bg-default)",
+    brand: "bg-(--color-bg-brand)",
     primary: "bg-(--color-bg-primary)",
     secondary: "bg-(--color-bg-secondary)",
     tertiary: "bg-(--color-bg-tertiary)",
@@ -3831,7 +3831,7 @@ const backgroundAppearanceClasses = {
     transparent: "bg-transparent",
 };
 const hoverBackgroundAppearanceClasses = {
-    default: "hover:bg-(--color-bg-hover-default)",
+    brand: "hover:bg-(--color-bg-hover-brand)",
     primary: "hover:bg-(--color-bg-hover-primary)",
     secondary: "hover:bg-(--color-bg-hover-secondary)",
     tertiary: "hover:bg-(--color-bg-hover-tertiary)",
@@ -3843,7 +3843,7 @@ const hoverBackgroundAppearanceClasses = {
     transparent: "hover:bg-transparent",
 };
 const activeBackgroundAppearanceClasses = {
-    default: "active:bg-(--color-bg-active-default)",
+    brand: "active:bg-(--color-bg-active-brand)",
     primary: "active:bg-(--color-bg-active-primary)",
     secondary: "active:bg-(--color-bg-active-secondary)",
     tertiary: "active:bg-(--color-bg-active-tertiary)",
@@ -3855,7 +3855,7 @@ const activeBackgroundAppearanceClasses = {
     transparent: "active:bg-transparent",
 };
 const layoutBackgroundAppearanceClasses = {
-    default: "bg-(--color-bg-layout-default)",
+    brand: "bg-(--color-bg-layout-brand)",
     primary: "bg-(--color-bg-layout-primary)",
     secondary: "bg-(--color-bg-layout-secondary)",
     tertiary: "bg-(--color-bg-layout-tertiary)",
@@ -3867,7 +3867,7 @@ const layoutBackgroundAppearanceClasses = {
     transparent: "bg-transparent",
 };
 const layoutFilledBackgroundAppearanceClasses = {
-    default: "bg-(--color-bg-filled-layout-default)",
+    brand: "bg-(--color-bg-filled-layout-brand)",
     primary: "bg-(--color-bg-filled-layout-primary)",
     secondary: "bg-(--color-bg-filled-layout-secondary)",
     tertiary: "bg-(--color-bg-filled-layout-tertiary)",
@@ -3879,7 +3879,7 @@ const layoutFilledBackgroundAppearanceClasses = {
     transparent: "bg-transparent",
 };
 const bgBorderAppearanceClasses = {
-    default: "bg-(--color-border-default)",
+    brand: "bg-(--color-border-brand)",
     primary: "bg-(--color-border-primary)",
     secondary: "bg-(--color-border-secondary)",
     tertiary: "bg-(--color-border-tertiary)",
@@ -3891,7 +3891,7 @@ const bgBorderAppearanceClasses = {
     transparent: "bg-transparent",
 };
 const borderAppearanceClasses = {
-    default: "border-(--color-border-default)",
+    brand: "border-(--color-border-brand)",
     primary: "border-(--color-border-primary)",
     secondary: "border-(--color-border-secondary)",
     tertiary: "border-(--color-border-tertiary)",
@@ -3903,7 +3903,7 @@ const borderAppearanceClasses = {
     transparent: "border-transparent",
 };
 const filledBorderAppearanceClasses = {
-    default: "border-(--color-border-filled-default)",
+    brand: "border-(--color-border-filled-brand)",
     primary: "border-(--color-border-filled-primary)",
     secondary: "border-(--color-border-filled-secondary)",
     tertiary: "border-(--color-border-filled-tertiary)",
@@ -3915,7 +3915,7 @@ const filledBorderAppearanceClasses = {
     transparent: "border-transparent",
 };
 const ringAppearanceClasses = {
-    default: "ring-(--color-border-default)",
+    brand: "ring-(--color-border-brand)",
     primary: "ring-(--color-border-primary)",
     secondary: "ring-(--color-border-secondary)",
     tertiary: "ring-(--color-border-tertiary)",
@@ -3927,7 +3927,7 @@ const ringAppearanceClasses = {
     transparent: "ring-transparent",
 };
 const filledRingAppearanceClasses = {
-    default: "ring-(--color-border-filled-default)",
+    brand: "ring-(--color-border-filled-brand)",
     primary: "ring-(--color-border-filled-primary)",
     secondary: "ring-(--color-border-filled-secondary)",
     tertiary: "ring-(--color-border-filled-tertiary)",
@@ -3939,7 +3939,7 @@ const filledRingAppearanceClasses = {
     transparent: "ring-transparent",
 };
 const focusVisibleOutlineAppearanceClasses = {
-    default: "focus-visible:outline-(--color-border-default)",
+    brand: "focus-visible:outline-(--color-border-brand)",
     primary: "focus-visible:outline-(--color-border-primary)",
     secondary: "focus-visible:outline-(--color-border-secondary)",
     tertiary: "focus-visible:outline-(--color-border-tertiary)",
@@ -3951,7 +3951,7 @@ const focusVisibleOutlineAppearanceClasses = {
     transparent: "focus-visible:outline-transparent",
 };
 const filledFocusVisibleOutlineAppearanceClasses = {
-    default: "focus-visible:outline-(--color-border-filled-default)",
+    brand: "focus-visible:outline-(--color-border-filled-brand)",
     primary: "focus-visible:outline-(--color-border-filled-primary)",
     secondary: "focus-visible:outline-(--color-border-filled-secondary)",
     tertiary: "focus-visible:outline-(--color-border-filled-tertiary)",
@@ -3963,7 +3963,7 @@ const filledFocusVisibleOutlineAppearanceClasses = {
     transparent: "focus-visible:outline-transparent",
 };
 const accentColorAppearanceClasses = {
-    default: "accent-(--color-bg-default)",
+    brand: "accent-(--color-bg-brand)",
     primary: "accent-(--color-bg-primary)",
     secondary: "accent-(--color-bg-secondary)",
     tertiary: "accent-(--color-bg-tertiary)",
@@ -3975,7 +3975,7 @@ const accentColorAppearanceClasses = {
     transparent: "accent-transparent",
 };
 const filledAccentColorAppearanceClasses = {
-    default: "accent-(--color-bg-filled-default)",
+    brand: "accent-(--color-bg-filled-brand)",
     primary: "accent-(--color-bg-filled-primary)",
     secondary: "accent-(--color-bg-filled-secondary)",
     tertiary: "accent-(--color-bg-filled-tertiary)",
@@ -3987,7 +3987,7 @@ const filledAccentColorAppearanceClasses = {
     transparent: "accent-transparent",
 };
 const checkedBackgroundAppearanceClasses = {
-    default: "checked:bg-(--color-bg-default)",
+    brand: "checked:bg-(--color-bg-brand)",
     primary: "checked:bg-(--color-bg-primary)",
     secondary: "checked:bg-(--color-bg-secondary)",
     tertiary: "checked:bg-(--color-bg-tertiary)",
@@ -3999,7 +3999,7 @@ const checkedBackgroundAppearanceClasses = {
     transparent: "checked:bg-transparent",
 };
 const filledCheckedBackgroundAppearanceClasses = {
-    default: "checked:bg-(--color-bg-filled-default)",
+    brand: "checked:bg-(--color-bg-filled-brand)",
     primary: "checked:bg-(--color-bg-filled-primary)",
     secondary: "checked:bg-(--color-bg-filled-secondary)",
     tertiary: "checked:bg-(--color-bg-filled-tertiary)",
@@ -4020,7 +4020,7 @@ class ShadowAppearanceTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         var _a, _b;
-        const appearance = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance) !== null && _a !== void 0 ? _a : 'default';
+        const appearance = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance) !== null && _a !== void 0 ? _a : 'primary';
         const size = (_b = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _b !== void 0 ? _b : 'md';
         const shadow = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.shadow;
         return shadow === undefined || shadow === 'noShadow'
@@ -4275,7 +4275,7 @@ const themeDefaults = {
         itemsCenter: true,
         justifyCenter: true,
         outline: true,
-        default: true,
+        primary: true,
         rounded: true,
         sans: true,
         semibold: true,
@@ -4290,7 +4290,7 @@ const themeDefaults = {
     card: {
         md: true,
         flex: true,
-        default: true,
+        primary: true,
         rounded: true,
         normal: true,
         column: true,
@@ -4314,7 +4314,7 @@ const themeDefaults = {
     },
     badge: {
         md: true,
-        default: true,
+        primary: true,
         inlineFlex: true,
         outline: true,
         pill: true,
@@ -4339,7 +4339,7 @@ const themeDefaults = {
         md: true,
         flex: true,
         column: true,
-        default: true,
+        primary: true,
         itemsStart: true,
         gap: true,
         padding: true,
@@ -4401,7 +4401,7 @@ const themeDefaults = {
     },
     divider: {
         md: true,
-        default: true,
+        primary: true,
         noPadding: true,
     },
     label: {
@@ -4421,7 +4421,7 @@ const themeDefaults = {
         rounded: true,
         inline: true,
         padding: true,
-        default: true,
+        primary: true,
         ring: true,
     },
     text: {
@@ -4464,7 +4464,7 @@ const themeDefaults = {
     checkbox: {
         input: {
             md: true,
-            default: true,
+            primary: true,
             border: true,
             rounded: true,
             noRing: true,
@@ -4473,7 +4473,7 @@ const themeDefaults = {
             focusVisible: true,
         },
         check: {
-            default: true,
+            primary: true,
             filled: true,
         },
         wrapper: {
@@ -4487,7 +4487,7 @@ const themeDefaults = {
     },
     input: {
         md: true,
-        default: true,
+        primary: true,
         rounded: true,
         outline: true,
         sans: true,
@@ -5649,7 +5649,7 @@ const Checkbox = react.forwardRef(function Checkbox(props, ref) {
     // Size props
     xs, sm, md, lg, xl, 
     // Appearance props
-    default: defaultProp, accent, primary, secondary, tertiary, success, danger, warning, info, transparent, 
+    primary, brand, accent, secondary, tertiary, success, danger, warning, info, transparent, 
     // Variant props
     filled, outline, 
     // Shape props
@@ -5660,7 +5660,7 @@ const Checkbox = react.forwardRef(function Checkbox(props, ref) {
     id, className, tabIndex, 'aria-label': ariaLabel, ...remainingProps } = props;
     const themeProps = {
         xs, sm, md, lg, xl,
-        default: defaultProp, accent, primary, secondary, tertiary, success, danger, warning, info, transparent,
+        primary, brand, accent, secondary, tertiary, success, danger, warning, info, transparent,
         filled, outline,
         pill, sharp, rounded
     };