@vaneui/ui 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -75,5 +75,5 @@ export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHi
75
75
  export type DividerKey = typeof DIVIDER_KEYS[number];
76
76
  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"];
77
77
  export type ContainerKey = typeof CONTAINER_KEYS[number];
78
- 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"];
78
+ 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"];
79
79
  export type SectionKey = typeof SECTION_KEYS[number];
@@ -5,15 +5,30 @@ import { WrapTheme } from "./layout/wrapTheme";
5
5
  import { SectionProps } from "../props/props";
6
6
  import { PxTheme } from "./size/pxTheme";
7
7
  import { PyTheme } from "./size/pyTheme";
8
+ import { VariantTheme } from "./appearance/variantTheme";
9
+ import { BorderTheme } from "./layout/borderTheme";
10
+ import { RingTheme } from "./layout/ringTheme";
11
+ import { RadiusTheme } from "./layout/radiusTheme";
12
+ import { ShadowTheme } from "./layout/shadowTheme";
8
13
  export interface SectionTheme<P> extends BaseComponentTheme<P> {
9
14
  size: {
10
15
  px: PxTheme;
11
16
  py: PyTheme;
12
17
  gap: GapTheme;
18
+ shadow: ShadowTheme;
19
+ };
20
+ appearance: {
21
+ background: VariantTheme;
22
+ text: VariantTheme;
23
+ border: VariantTheme;
24
+ ring: VariantTheme;
13
25
  };
14
26
  layout: DefaultLayoutThemes<P> & {
15
27
  wrap: WrapTheme;
16
28
  direction: DirectionTheme;
29
+ border: BorderTheme;
30
+ ring: RingTheme;
31
+ radius: RadiusTheme;
17
32
  };
18
33
  }
19
34
  export declare const defaultSectionTheme: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;
@@ -208,7 +208,11 @@ const TYPOGRAPHY_COMPONENT_KEYS = [
208
208
  ...JUSTIFY_KEYS,
209
209
  ...WRAP_KEYS,
210
210
  ...BREAKPOINT_KEYS,
211
- ...GAP_KEYS
211
+ ...GAP_KEYS,
212
+ ...BORDER_KEYS,
213
+ ...SHADOW_KEYS,
214
+ ...RING_KEYS,
215
+ ...SHAPE_KEYS,
212
216
  ];
213
217
 
214
218
  const rowToColumnBreakpointClasses = {
@@ -1398,7 +1402,7 @@ const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracki
1398
1402
  md: "text-5xl max-lg:text-4xl max-md:text-3xl",
1399
1403
  lg: "text-6xl max-lg:text-5xl max-md:text-4xl",
1400
1404
  xl: "text-7xl max-lg:text-6xl max-md:text-5xl",
1401
- }, { ...typographyThemeDefaults, semibold: true });
1405
+ }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
1402
1406
  // Section title specific theme
1403
1407
  const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", {
1404
1408
  xs: "text-2xl max-lg:text-xl max-md:text-lg",
@@ -1406,7 +1410,7 @@ const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-f
1406
1410
  md: "text-4xl max-lg:text-3xl max-md:text-2xl",
1407
1411
  lg: "text-5xl max-lg:text-4xl max-md:text-3xl",
1408
1412
  xl: "text-6xl max-lg:text-5xl max-md:text-4xl",
1409
- }, { ...typographyThemeDefaults, semibold: true });
1413
+ }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
1410
1414
  // Title specific theme
1411
1415
  const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", {
1412
1416
  xs: "text-lg",
@@ -1414,11 +1418,11 @@ const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", {
1414
1418
  md: "text-2xl",
1415
1419
  lg: "text-3xl",
1416
1420
  xl: "text-4xl",
1417
- }, { ...typographyThemeDefaults, semibold: true });
1421
+ }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
1418
1422
  // Text specific theme
1419
- const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, { ...typographyThemeDefaults, secondary: true });
1423
+ const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, mergeDefaults(typographyThemeDefaults, { secondary: true }));
1420
1424
  // Link specific theme
1421
- const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", textSizeClasses, { ...typographyThemeDefaults, link: true });
1425
+ const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", textSizeClasses, mergeDefaults(typographyThemeDefaults, { link: true }));
1422
1426
  // List item specific theme
1423
1427
  const listItemTheme = createTypographyComponentTheme("li");
1424
1428
  // List specific theme
@@ -1751,10 +1755,30 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
1751
1755
  xl: 'gap-16',
1752
1756
  }
1753
1757
  }),
1758
+ shadow: new ShadowTheme(),
1759
+ },
1760
+ appearance: {
1761
+ background: LayoutAppearanceTheme.createDefaultStyle({
1762
+ base: layoutBackgroundAppearanceClasses,
1763
+ }),
1764
+ text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
1765
+ border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
1766
+ ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
1754
1767
  },
1755
1768
  layout: {
1756
1769
  wrap: new WrapTheme(),
1757
1770
  direction: new DirectionTheme(),
1771
+ border: new BorderTheme(),
1772
+ ring: new RingTheme(),
1773
+ radius: new RadiusTheme({
1774
+ rounded: {
1775
+ xs: 'rounded-md',
1776
+ sm: 'rounded-lg',
1777
+ md: 'rounded-xl',
1778
+ lg: 'rounded-2xl',
1779
+ xl: 'rounded-3xl',
1780
+ }
1781
+ }),
1758
1782
  },
1759
1783
  }, {
1760
1784
  md: true,
@@ -1762,6 +1786,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
1762
1786
  itemsStart: true,
1763
1787
  gap: true,
1764
1788
  padding: true,
1789
+ noBorder: true,
1790
+ noRing: true,
1791
+ noShadow: true,
1792
+ sharp: true,
1765
1793
  });
1766
1794
 
1767
1795
  const gridDefaults = {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -75,5 +75,5 @@ export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHi
75
75
  export type DividerKey = typeof DIVIDER_KEYS[number];
76
76
  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"];
77
77
  export type ContainerKey = typeof CONTAINER_KEYS[number];
78
- 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"];
78
+ 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"];
79
79
  export type SectionKey = typeof SECTION_KEYS[number];
@@ -5,15 +5,30 @@ import { WrapTheme } from "./layout/wrapTheme";
5
5
  import { SectionProps } from "../props/props";
6
6
  import { PxTheme } from "./size/pxTheme";
7
7
  import { PyTheme } from "./size/pyTheme";
8
+ import { VariantTheme } from "./appearance/variantTheme";
9
+ import { BorderTheme } from "./layout/borderTheme";
10
+ import { RingTheme } from "./layout/ringTheme";
11
+ import { RadiusTheme } from "./layout/radiusTheme";
12
+ import { ShadowTheme } from "./layout/shadowTheme";
8
13
  export interface SectionTheme<P> extends BaseComponentTheme<P> {
9
14
  size: {
10
15
  px: PxTheme;
11
16
  py: PyTheme;
12
17
  gap: GapTheme;
18
+ shadow: ShadowTheme;
19
+ };
20
+ appearance: {
21
+ background: VariantTheme;
22
+ text: VariantTheme;
23
+ border: VariantTheme;
24
+ ring: VariantTheme;
13
25
  };
14
26
  layout: DefaultLayoutThemes<P> & {
15
27
  wrap: WrapTheme;
16
28
  direction: DirectionTheme;
29
+ border: BorderTheme;
30
+ ring: RingTheme;
31
+ radius: RadiusTheme;
17
32
  };
18
33
  }
19
34
  export declare const defaultSectionTheme: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;
package/dist/index.esm.js CHANGED
@@ -2937,7 +2937,11 @@ const SECTION_KEYS = [
2937
2937
  ...JUSTIFY_KEYS,
2938
2938
  ...WRAP_KEYS,
2939
2939
  ...BREAKPOINT_KEYS,
2940
- ...GAP_KEYS
2940
+ ...GAP_KEYS,
2941
+ ...BORDER_KEYS,
2942
+ ...SHADOW_KEYS,
2943
+ ...RING_KEYS,
2944
+ ...SHAPE_KEYS,
2941
2945
  ];
2942
2946
 
2943
2947
  const rowToColumnBreakpointClasses = {
@@ -4127,7 +4131,7 @@ const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracki
4127
4131
  md: "text-5xl max-lg:text-4xl max-md:text-3xl",
4128
4132
  lg: "text-6xl max-lg:text-5xl max-md:text-4xl",
4129
4133
  xl: "text-7xl max-lg:text-6xl max-md:text-5xl",
4130
- }, { ...typographyThemeDefaults, semibold: true });
4134
+ }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
4131
4135
  // Section title specific theme
4132
4136
  const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", {
4133
4137
  xs: "text-2xl max-lg:text-xl max-md:text-lg",
@@ -4135,7 +4139,7 @@ const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-f
4135
4139
  md: "text-4xl max-lg:text-3xl max-md:text-2xl",
4136
4140
  lg: "text-5xl max-lg:text-4xl max-md:text-3xl",
4137
4141
  xl: "text-6xl max-lg:text-5xl max-md:text-4xl",
4138
- }, { ...typographyThemeDefaults, semibold: true });
4142
+ }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
4139
4143
  // Title specific theme
4140
4144
  const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", {
4141
4145
  xs: "text-lg",
@@ -4143,11 +4147,11 @@ const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", {
4143
4147
  md: "text-2xl",
4144
4148
  lg: "text-3xl",
4145
4149
  xl: "text-4xl",
4146
- }, { ...typographyThemeDefaults, semibold: true });
4150
+ }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
4147
4151
  // Text specific theme
4148
- const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, { ...typographyThemeDefaults, secondary: true });
4152
+ const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, mergeDefaults(typographyThemeDefaults, { secondary: true }));
4149
4153
  // Link specific theme
4150
- const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", textSizeClasses, { ...typographyThemeDefaults, link: true });
4154
+ const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", textSizeClasses, mergeDefaults(typographyThemeDefaults, { link: true }));
4151
4155
  // List item specific theme
4152
4156
  const listItemTheme = createTypographyComponentTheme("li");
4153
4157
  // List specific theme
@@ -4480,10 +4484,30 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
4480
4484
  xl: 'gap-16',
4481
4485
  }
4482
4486
  }),
4487
+ shadow: new ShadowTheme(),
4488
+ },
4489
+ appearance: {
4490
+ background: LayoutAppearanceTheme.createDefaultStyle({
4491
+ base: layoutBackgroundAppearanceClasses,
4492
+ }),
4493
+ text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
4494
+ border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
4495
+ ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
4483
4496
  },
4484
4497
  layout: {
4485
4498
  wrap: new WrapTheme(),
4486
4499
  direction: new DirectionTheme(),
4500
+ border: new BorderTheme(),
4501
+ ring: new RingTheme(),
4502
+ radius: new RadiusTheme({
4503
+ rounded: {
4504
+ xs: 'rounded-md',
4505
+ sm: 'rounded-lg',
4506
+ md: 'rounded-xl',
4507
+ lg: 'rounded-2xl',
4508
+ xl: 'rounded-3xl',
4509
+ }
4510
+ }),
4487
4511
  },
4488
4512
  }, {
4489
4513
  md: true,
@@ -4491,6 +4515,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
4491
4515
  itemsStart: true,
4492
4516
  gap: true,
4493
4517
  padding: true,
4518
+ noBorder: true,
4519
+ noRing: true,
4520
+ noShadow: true,
4521
+ sharp: true,
4494
4522
  });
4495
4523
 
4496
4524
  const gridDefaults = {