@vaneui/ui 0.2.1-alpha.20250813170000.4050860 → 0.2.1-alpha.20250820100624.167a145

package/README.md

@@ -2,11 +2,65 @@
 
 [![npm version](https://img.shields.io/npm/v/%40vaneui/ui.svg?style=flat)](https://www.npmjs.com/package/%40vaneui/ui)
 
-VaneUI is a React + TypeScript component library powered by Tailwind CSS. It uses a boolean-prop API for variants (size, appearance, shape, layout, typography, etc.) and a flexible theme system so you can set defaults, add extra classes, or programmatically override styles.
+VaneUI helps you build beautiful, consistent UIs faster by turning common design decisions into expressive, readable boolean props. Instead of memorizing property names and values, you compose intent: `primary`, `lg`, `outline`, `rounded`. The result is cleaner code, fewer decisions per component, and a smoother path from wireframe to production.
 
-- Boolean prop API: <Button primary lg pill> instead of stringly typed props
-- ThemeProvider with defaults (themeDefaults), extra classes (extraClasses), and programmatic override (themeOverride)
-- Built CSS you can import directly (no Tailwind setup required to consume)
+## How VaneUI works
+
+At its core, VaneUI maps boolean props to thoughtfully curated CSS classes. You write the JSX using booleans like this:
+
+```tsx
+<Button primary lg pill filled>
+  Get started
+</Button>
+```
+The component resolves those booleans to semantic styles:
+- `primary` → semantic color token
+- `lg` → size scale for paddings, border radius, typography size
+- `pill` → shape preset
+- `filled` → variant preset
+
+Tailwind classes and CSS variables power the final styles:
+- Tailwind utilities for performance and composability
+- CSS variables for theming and per-app overrides
+- Each CSS class can be changed using ThemeProvider
+- Each component has a customizable set of default values for boolean props
+
+You can always mix in your own Tailwind classes via className to fine‑tune any edge case:
+```tsx
+<Button primary lg pill filled className="hover:opacity-80">
+  Get started
+</Button>
+```
+
+## Traditional approach vs VaneUI
+
+Instead of writing verbose prop configurations, VaneUI uses intuitive boolean props that make your code cleaner and more readable:
+
+```tsx
+// Traditional approach
+<Button appearance="primary" size="lg" variant="filled" />
+
+// VaneUI approach  
+<Button primary lg filled />
+```
+
+## Prop combinations
+
+Boolean props can be combined naturally to create the exact styling you need:
+
+```tsx
+<Button primary lg pill shadow>
+  Large primary pill button with shadow
+</Button>
+
+<Card secondary padding border rounded>
+  Secondary card with padding, border and rounded corners
+</Card>
+
+<Stack column itemsCenter>
+  Vertical stack with gap and centered items
+</Stack>
+```
 
 ## Installation
 
@@ -53,6 +107,67 @@ export default function App() {
 }
 ```
 
+## Every Class is Customizable
+
+Behind each boolean prop are carefully crafted CSS classes that you can completely override.
+
+### CSS Variables
+
+You can customize the VaneUI by overriding the CSS variables:
+
+```css
+:root {
+  --text-color-primary: #8b5cf6;      /* Primary text color */
+  --ui-border-radius-md: 1rem;        /* Medium UI radius */
+}
+```
+
+### Tailwind Overrides
+
+Each component can be changed by using the regular Tailwind CSS classes:
+
+```tsx
+<Button primary className="bg-purple-600 hover:bg-purple-700">
+  Custom Primary
+</Button>
+```
+
+### Theme Overrides
+
+You can set up default values of all boolean props by providing `themeDefaults` in ThemeProvider:
+
+```tsx
+const defaults: ThemeDefaults = {
+  button: {
+    pill: true,
+    lg: true,
+  },
+};
+
+return (
+  <ThemeProvider themeDefaults={defaults}>
+    <Button>This button is large and pill-shaped</Button>
+  </ThemeProvider>
+);
+```
+
+You can change default CSS classes of all components by providing `themeOverride` in ThemeProvider:
+
+```tsx
+const overrideFunc = (theme: ThemeProps) => {
+  theme.button.themes.appearance.text.outline.default.base = 'text-blue-200';
+  theme.button.themes.appearance.text.outline.default.hover = 'hover:text-blue-700';
+  theme.button.themes.appearance.text.outline.default.active = 'active:text-blue-900';
+  return theme;
+};
+
+return (
+  <ThemeProvider themeOverride={overrideFunc}>
+    <Button>This button has blue colors</Button>
+  </ThemeProvider>
+);
+```
+
 ## Theming
 
 All components work out of the box with defaults. For deeper customization, wrap your app with ThemeProvider.
@@ -91,12 +206,12 @@ export function App() {
 ## Boolean Props Model
 
 Each component exposes optional boolean props generated from category keys. Common examples:
-- Size: xs, sm, md, lg, xl
-- Appearance: default, primary, secondary, tertiary, accent, success, danger, warning, info, transparent
-- Variant: filled, outline
-- Shape: pill, rounded, sharp
-- Typography: sans, serif, mono, thin…black, italic/notItalic, underline/lineThrough/overline, uppercase/lowercase/capitalize
-- Layout: gap/noGap, inline/block/flex/grid, justify*, items*, padding/noPadding, shadow/noShadow, ring/noRing
+- Size: `xs`, `sm`, `md`, `lg`, `xl`
+- Appearance: `default`, `primary`, `secondary`, `tertiary`, `accent`, `success`, `danger`, `warning`, `info`, `transparent`
+- Variant: `filled`, `outline`
+- Shape: `pill`, `rounded`, `sharp`
+- Typography: `sans`, `serif`, `mono`, `thin`…`black`, `italic`/`notItalic`, `underline`/`lineThrough`/`overline`, `uppercase`/`lowercase`/`capitalize`
+- Layout: `gap`/`noGap`, `inline`/`block`/`flex`/`grid`, `justify*`, `items*`, `padding`/`noPadding`, `shadow`/`noShadow`, `ring`/`noRing`
 
 Only the categories relevant to a component are used. The theme maps these booleans to Tailwind utility classes.
 

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

@@ -16,6 +16,7 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     noBorder?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;

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

@@ -19,6 +19,7 @@ export declare const Code: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     noBorder?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;

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

@@ -14,6 +14,7 @@ export declare const Divider: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;
     inlineBlock?: boolean | undefined;

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

@@ -16,6 +16,7 @@ export declare const Img: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     noBorder?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;

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

@@ -6,7 +6,6 @@ export declare const Label: React.ForwardRefExoticComponent<{
     transparent?: boolean | undefined;
     gap?: boolean | undefined;
     reverse?: boolean | undefined;
-    link?: boolean | undefined;
     default?: boolean | undefined;
     accent?: boolean | undefined;
     primary?: boolean | undefined;
@@ -16,6 +15,7 @@ export declare const Label: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;
     inlineBlock?: boolean | undefined;

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

@@ -7,12 +7,11 @@ export declare const VISUAL_DECORATION: readonly ["border", "shadow", "ring"];
 export declare const SHAPE: readonly ["shape"];
 export declare const TYPOGRAPHY_STYLE: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign"];
 export declare const LIST_STYLE: readonly ["listStyle"];
-export declare const LINK: readonly ["link"];
 export declare const VARIANT: readonly ["variant"];
-export declare const COMPONENT_PROPS_CATEGORY: readonly ["appearance", "transparent", "wrap", "gap", "flexDirection", "reverse", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "breakpoint", "link", "padding", "border", "shadow", "ring", "shape", "variant", "mode"];
+export declare const COMPONENT_PROPS_CATEGORY: readonly ["appearance", "transparent", "wrap", "gap", "flexDirection", "reverse", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "breakpoint", "padding", "border", "shadow", "ring", "shape", "variant", "mode"];
 export type ComponentCategoryKey = typeof COMPONENT_PROPS_CATEGORY[number];
 export declare const ComponentKeys: {
-    readonly appearance: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info"];
+    readonly appearance: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "link"];
     readonly border: readonly ["border", "noBorder"];
     readonly breakpoint: readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"];
     readonly display: readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
@@ -24,7 +23,6 @@ export declare const ComponentKeys: {
     readonly hide: readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"];
     readonly items: readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"];
     readonly justify: readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"];
-    readonly link: readonly ["link"];
     readonly listStyle: readonly ["disc", "decimal"];
     readonly mode: readonly ["base", "hover", "active"];
     readonly overflow: readonly ["overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll"];
@@ -52,7 +50,7 @@ export type GapKey = typeof ComponentKeys.gap[number];
 export type VariantKey = typeof ComponentKeys.variant[number];
 export type AppearanceKey = typeof ComponentKeys.appearance[number];
 export type TransparentKey = typeof ComponentKeys.transparent[number];
-export type LinkKey = typeof ComponentKeys.link[number];
+export type LinkKey = 'link';
 export type ListStyleKey = typeof ComponentKeys.listStyle[number];
 export type FontFamilyKey = typeof ComponentKeys.fontFamily[number];
 export type FontWeightKey = typeof ComponentKeys.fontWeight[number];
@@ -71,24 +69,24 @@ export type DisplayKey = typeof ComponentKeys.display[number];
 export type OverflowKey = typeof ComponentKeys.overflow[number];
 export declare const LAYOUT_FULL: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse"];
 export declare const VISUAL_FULL: readonly ["appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const TYPOGRAPHY_FULL: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link"];
+export declare const TYPOGRAPHY_FULL: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign"];
 export declare const INTERACTIVE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const BUTTON_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const BADGE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const CHIP_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const CODE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent"];
-export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
+export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent"];
+export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
 export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
 export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding"];
+export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding"];
 export declare const DIVIDER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
 export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint"];
 export declare const CHECKBOX_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
-export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
+export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
 export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export type CategoryProps = {
     [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];

package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts

@@ -10,6 +10,7 @@ export declare class GenericVariantTheme<T extends BaseTheme> extends BaseTheme
     getClasses(extractedKeys: CategoryProps): string[];
     static createUIElementTextTheme(): GenericVariantTheme<AppearanceTheme>;
     static createUIElementShadowTheme(): GenericVariantTheme<ShadowAppearanceTheme>;
+    static createLayoutShadowTheme(): GenericVariantTheme<ShadowAppearanceTheme>;
     static createBorderAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
     static createUIElementBorderTheme(): GenericVariantTheme<AppearanceTheme>;
     static createUIElementRingTheme(): GenericVariantTheme<AppearanceTheme>;

package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts

@@ -5,7 +5,9 @@ export interface ShadowAppearanceTheme extends Record<AppearanceKey, Record<Size
 }
 export declare class ShadowAppearanceTheme extends BaseTheme {
     private static readonly defaultShadow;
+    private static readonly layoutShadow;
     constructor(initial?: Partial<Record<AppearanceKey, Record<SizeKey, Record<ModeKey, string>> | null>>);
     getClasses(extractedKeys: CategoryProps): string[];
     static createTheme(src?: Partial<Record<AppearanceKey, Record<SizeKey, Record<ModeKey, string>> | null>>): ShadowAppearanceTheme;
+    static createLayoutTheme(src?: Partial<Record<AppearanceKey, Record<SizeKey, Record<ModeKey, string>> | null>>): ShadowAppearanceTheme;
 }

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

@@ -1,5 +1,5 @@
 import { BaseTypographyComponentTheme, ComponentTheme, DefaultLayoutThemes } from "./common/ComponentTheme";
-import { ButtonProps } from "../props/props";
+import { ButtonProps } from "../props";
 import { SizeTheme } from "./size/sizeTheme";
 import { GapTheme } from "./size/gapTheme";
 import { RadiusTheme } from "./layout/radiusTheme";

package/dist/index.esm.js

@@ -18,7 +18,6 @@ const VISUAL_DECORATION = ['border', 'shadow', 'ring'];
 const SHAPE = ['shape'];
 const TYPOGRAPHY_STYLE = ['fontWeight', 'fontStyle', 'textDecoration', 'textTransform', 'fontFamily', 'textAlign'];
 const LIST_STYLE = ['listStyle'];
-const LINK = ['link'];
 const VARIANT = ['variant'];
 const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_CORE,
@@ -27,7 +26,6 @@ const COMPONENT_PROPS_CATEGORY = [
     ...LIST_STYLE,
     ...LAYOUT_CORE,
     ...BREAKPOINT,
-    ...LINK,
     ...PADDING,
     ...VISUAL_DECORATION,
     ...SHAPE,
@@ -35,7 +33,7 @@ const COMPONENT_PROPS_CATEGORY = [
     'mode',
 ];
 const ComponentKeys = {
-    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'],
+    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'link'],
     border: ['border', 'noBorder'],
     breakpoint: ['xsCol', 'smCol', 'mdCol', 'lgCol', 'xlCol'],
     display: ['inline', 'block', 'inlineBlock', 'flex', 'inlineFlex', 'grid', 'inlineGrid', 'contents', 'table', 'tableCell', 'hidden'],
@@ -47,7 +45,6 @@ const ComponentKeys = {
     hide: ['xsHide', 'smHide', 'mdHide', 'lgHide', 'xlHide'],
     items: ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'],
     justify: ['justifyStart', 'justifyEnd', 'justifyCenter', 'justifyBetween', 'justifyAround', 'justifyEvenly', 'justifyStretch', 'justifyBaseline'],
-    link: ['link'],
     listStyle: ['disc', 'decimal'],
     mode: ['base', 'hover', 'active'],
     overflow: ['overflowAuto', 'overflowHidden', 'overflowClip', 'overflowVisible', 'overflowScroll', 'overflowXAuto', 'overflowYAuto', 'overflowXHidden', 'overflowYHidden', 'overflowXClip', 'overflowYClip', 'overflowXVisible', 'overflowYVisible', 'overflowXScroll', 'overflowYScroll'],
@@ -68,7 +65,7 @@ const ComponentKeys = {
 // Composite categories built from core blocks
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
 const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
-const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE, ...LINK];
+const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
 const INTERACTIVE_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...PADDING, ...VARIANT];
 const BUTTON_CATEGORIES = INTERACTIVE_CATEGORIES;
 const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
@@ -3665,26 +3662,21 @@ class AppearanceTheme extends BaseTheme {
         this.linkClassSource = options === null || options === void 0 ? void 0 : options.linkClassSource;
     }
     getClasses(extractedKeys) {
-        var _a, _b;
-        // Check for specific transparent or link styles first
+        var _a;
+        // Check for specific transparent styles first
         if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
             const transparentClass = ((_a = this.transparentClassSource) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
             return [transparentClass];
         }
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.link) {
-            const linkClass = ((_b = this.linkClassSource) === null || _b === void 0 ? void 0 : _b[extractedKeys.link]) || '';
-            return [linkClass];
-        }
-        // Use regular appearance
+        // Use appearance (now includes link as an appearance option)
         const pickedAppearanceKey = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance;
-        if (!pickedAppearanceKey) {
-            return [];
-        }
-        const modes = this[pickedAppearanceKey];
-        if (!modes) {
-            return [];
+        if (pickedAppearanceKey) {
+            const modes = this[pickedAppearanceKey];
+            if (modes) {
+                return ComponentKeys.mode.map(mode => modes[mode] || '');
+            }
         }
-        return ComponentKeys.mode.map(mode => modes[mode] || '');
+        return [];
     }
     static createTheme(src = {}, options) {
         const finalConfig = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
@@ -3777,6 +3769,15 @@ class ShadowAppearanceTheme extends BaseTheme {
     static createTheme(src = {}) {
         return new ShadowAppearanceTheme(src);
     }
+    static createLayoutTheme(src = {}) {
+        const theme = new ShadowAppearanceTheme(src);
+        ComponentKeys.appearance.forEach((key) => {
+            if (theme[key] === ShadowAppearanceTheme.defaultShadow) {
+                theme[key] = ShadowAppearanceTheme.layoutShadow;
+            }
+        });
+        return theme;
+    }
 }
 ShadowAppearanceTheme.defaultShadow = {
     xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "" },
@@ -3785,6 +3786,13 @@ ShadowAppearanceTheme.defaultShadow = {
     lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "" },
     xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "" }
 };
+ShadowAppearanceTheme.layoutShadow = {
+    xs: { base: "shadow-2xs", hover: "", active: "" },
+    sm: { base: "shadow-xs", hover: "", active: "" },
+    md: { base: "shadow-sm", hover: "", active: "" },
+    lg: { base: "shadow-md", hover: "", active: "" },
+    xl: { base: "shadow-lg", hover: "", active: "" }
+};
 
 class GenericVariantTheme extends BaseTheme {
     constructor(variantInstances) {
@@ -3819,6 +3827,12 @@ class GenericVariantTheme extends BaseTheme {
             filled: ShadowAppearanceTheme.createTheme({})
         });
     }
+    static createLayoutShadowTheme() {
+        return new GenericVariantTheme({
+            outline: ShadowAppearanceTheme.createLayoutTheme({}),
+            filled: ShadowAppearanceTheme.createLayoutTheme({})
+        });
+    }
     static createBorderAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
@@ -4032,7 +4046,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4073,7 +4087,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4113,7 +4127,7 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4304,7 +4318,6 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
     layout: defaultLayoutTheme,
 }, {
     link: true,
-    default: true,
     sans: true,
 }, TYPOGRAPHY_CATEGORIES);
 // List specific theme
@@ -4395,7 +4408,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         breakpoint: new BreakpointTheme(),
-        shadow: ShadowAppearanceTheme.createTheme(),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     appearance: {
         background: AppearanceTheme.createLayoutBgTheme(),
@@ -4435,7 +4448,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         background: AppearanceTheme.createLayoutBgTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, {
     row: true,
@@ -4491,7 +4504,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
         border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, {
     noRing: true,
@@ -4520,7 +4533,7 @@ const defaultColTheme = new ComponentTheme("div", "", {
         background: AppearanceTheme.createLayoutBgTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, {
     column: true,
@@ -4553,7 +4566,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         background: AppearanceTheme.createLayoutBgTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, {
     md: true,
@@ -4593,7 +4606,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
         border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
-        shadow: ShadowAppearanceTheme.createTheme(),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4754,7 +4767,7 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
     appearance: {
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     }
 }, {
     rounded: true,
@@ -5030,5 +5043,5 @@ const List = forwardRef(function List(props, ref) {
     return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
 
-export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LINK, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, useTheme };
+export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, useTheme };
 //# sourceMappingURL=index.esm.js.map