@vaneui/ui 0.0.16 → 0.0.18

package/dist/complex.css

@@ -72,7 +72,7 @@
     --color-gray-950: oklch(13% 0.028 261.692);
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-3xs: 16rem;
+    --container-xs: 20rem;
     --container-xl: 36rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
@@ -453,12 +453,6 @@
   .mt-\[calc\(36px\+\(var\(--spacing\)\*6\)\)\] {
     margin-top: calc(36px + (var(--spacing) * 6));
   }
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
-  }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -486,6 +480,26 @@
   .inline-flex {
     display: inline-flex;
   }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -525,8 +539,8 @@
   .w-44 {
     width: calc(var(--spacing) * 44);
   }
-  .w-\[36px\] {
-    width: 36px;
+  .w-\[48px\] {
+    width: 48px;
   }
   .w-fit {
     width: fit-content;
@@ -558,15 +572,15 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
-  .min-w-3xs {
-    min-width: var(--container-3xs);
-  }
   .min-w-44 {
     min-width: calc(var(--spacing) * 44);
   }
   .min-w-full {
     min-width: 100%;
   }
+  .min-w-xs {
+    min-width: var(--container-xs);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -791,9 +805,9 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-l {
+  .border-l-2 {
     border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
+    border-left-width: 2px;
   }
   .border-none {
     --tw-border-style: none;
@@ -1015,6 +1029,9 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
   .bg-indigo-50 {
     background-color: var(--color-indigo-50);
   }
@@ -1124,6 +1141,9 @@
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1133,6 +1153,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -1151,6 +1174,9 @@
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
@@ -1169,9 +1195,6 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
-  .pl-2\.5 {
-    padding-left: calc(var(--spacing) * 2.5);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -1181,6 +1204,9 @@
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
+  .pl-\[calc\(var\(--spacing\)\*2\.5-1px\)\] {
+    padding-left: calc(var(--spacing) * 2.5 - 1px);
+  }
   .text-center {
     text-align: center;
   }
@@ -1234,34 +1260,18 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
-  .text-lg\/6 {
-    font-size: var(--text-lg);
-    line-height: calc(var(--spacing) * 6);
-  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-sm\/5 {
-    font-size: var(--text-sm);
-    line-height: calc(var(--spacing) * 5);
-  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .text-xl\/6 {
-    font-size: var(--text-xl);
-    line-height: calc(var(--spacing) * 6);
-  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-xs\/5 {
-    font-size: var(--text-xs);
-    line-height: calc(var(--spacing) * 5);
-  }
   .font-black {
     --tw-font-weight: var(--font-weight-black);
     font-weight: var(--font-weight-black);
@@ -1409,6 +1419,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xs {
+    --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1728,10 +1742,10 @@
       }
     }
   }
-  .hover\:bg-gray-50 {
+  .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-50);
+        background-color: var(--color-gray-100);
       }
     }
   }
@@ -1793,14 +1807,6 @@
       }
     }
   }
-  .hover\:shadow-2xl {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .hover\:shadow-lg {
     &:hover {
       @media (hover: hover) {
@@ -1841,6 +1847,14 @@
       }
     }
   }
+  .hover\:shadow-xs {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:ring {
     &:hover {
       @media (hover: hover) {
@@ -2001,12 +2015,6 @@
       color: var(--color-gray-400);
     }
   }
-  .active\:shadow-2xl {
-    &:active {
-      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
   .active\:shadow-lg {
     &:active {
       --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -2037,6 +2045,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .active\:shadow-xs {
+    &:active {
+      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .active\:ring {
     &:active {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2261,9 +2275,14 @@
       padding-inline: calc(var(--spacing) * 7);
     }
   }
-  .max-md\:py-5 {
+  .max-md\:py-3 {
+    @media (width < 48rem) {
+      padding-block: calc(var(--spacing) * 3);
+    }
+  }
+  .max-md\:py-6 {
     @media (width < 48rem) {
-      padding-block: calc(var(--spacing) * 5);
+      padding-block: calc(var(--spacing) * 6);
     }
   }
   .max-md\:py-12 {

package/dist/components/theme/components/theme/themeContext.d.ts

@@ -12,9 +12,11 @@ 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 { ButtonProps, GridProps, TypographyComponentProps, CardProps, RowProps, ColProps, StackProps, BadgeProps, ChipProps, DividerProps, ContainerProps, SectionProps } from "../ui/props/props";
+import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyComponentProps } from "../ui/props/props";
 import { DeepPartial } from "../utils/deepPartial";
-export interface ThemeProps {
+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>> {
     button: ComponentTheme<ButtonProps, ButtonTheme<ButtonProps>>;
     badge: ComponentTheme<BadgeProps, BadgeTheme<BadgeProps>>;
     chip: ComponentTheme<ChipProps, ChipTheme<ChipProps>>;
@@ -32,15 +34,17 @@ export interface ThemeProps {
     title: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
     text: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
     link: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
-    listItem: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
     list: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    listItem: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
 }
 export type PartialTheme = DeepPartial<ThemeProps>;
 export declare const defaultTheme: ThemeProps;
+export type ThemeDefaults = Partial<Record<ComponentKey, Record<string, boolean>>>;
 export interface ThemeProviderProps {
     children: React.ReactNode;
     theme?: PartialTheme;
+    themeDefaults?: ThemeDefaults;
     themeOverride?: (theme: ThemeProps) => ThemeProps;
 }
-export declare function ThemeProvider({ children, theme: themeObject, themeOverride }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, theme: themeObject, themeDefaults, themeOverride }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeProps;

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

@@ -75,5 +75,5 @@ export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHi
 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 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"];
+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 type SectionKey = typeof SECTION_KEYS[number];

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

@@ -4,9 +4,9 @@ import { HideTheme } from "../layout/hideTheme";
 import { ItemsTheme } from "../layout/itemsTheme";
 import { JustifyTheme } from "../layout/justifyTheme";
 import { PositionTheme } from "../layout/positionTheme";
+import { FontStyleTheme } from "../typography/fontStyleTheme";
 import { FontFamilyTheme } from "../typography/fontFamilyTheme";
 import { FontWeightTheme } from "../typography/fontWeightTheme";
-import { FontStyleTheme } from "../typography/fontStyleTheme";
 import { TextDecorationTheme } from "../typography/textDecorationTheme";
 import { TextTransformTheme } from "../typography/textTransformTheme";
 import { TextAlignTheme } from "../typography/textAlignTheme";
@@ -36,8 +36,8 @@ export interface BaseComponentTheme<P> {
 export declare class ComponentTheme<P extends object, TThemes extends object> {
     readonly tag: React.ElementType;
     readonly base: string;
-    readonly defaults: Partial<P>;
     readonly themes: TThemes;
+    defaults: Partial<P>;
     constructor(tag: React.ElementType, base: string, subThemes: DeepPartial<TThemes>, defaults?: Partial<P>);
     getClasses(props: P, defaults?: Partial<P>): string[];
 }

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

@@ -5,15 +5,30 @@ import { WrapTheme } from "./layout/wrapTheme";
 import { SectionProps } from "../props/props";
 import { PxTheme } from "./size/pxTheme";
 import { PyTheme } from "./size/pyTheme";
+import { VariantTheme } from "./appearance/variantTheme";
+import { BorderTheme } from "./layout/borderTheme";
+import { RingTheme } from "./layout/ringTheme";
+import { RadiusTheme } from "./layout/radiusTheme";
+import { ShadowTheme } from "./layout/shadowTheme";
 export interface SectionTheme<P> extends BaseComponentTheme<P> {
     size: {
         px: PxTheme;
         py: PyTheme;
         gap: GapTheme;
+        shadow: ShadowTheme;
+    };
+    appearance: {
+        background: VariantTheme;
+        text: VariantTheme;
+        border: VariantTheme;
+        ring: VariantTheme;
     };
     layout: DefaultLayoutThemes<P> & {
         wrap: WrapTheme;
         direction: DirectionTheme;
+        border: BorderTheme;
+        ring: RingTheme;
+        radius: RadiusTheme;
     };
 }
 export declare const defaultSectionTheme: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;