@vaneui/ui 0.0.13 → 0.0.14

package/dist/vars.css

@@ -0,0 +1,139 @@
+@theme {
+  /* Text Colors */
+  --text-color-default: var(--color-gray-900, #111827);
+  --text-color-primary: var(--color-blue-600, #2563eb);
+  --text-color-secondary: var(--color-gray-600, #4b5563);
+  --text-color-tertiary: var(--color-gray-500, #6b7280);
+  --text-color-muted: var(--color-gray-400, #9ca3af);
+  --text-color-link: var(--color-blue-600, #2563eb);
+  --text-color-accent: var(--color-rose-700, #9333ea);
+  --text-color-success: var(--color-emerald-600, #059669);
+  --text-color-danger: var(--color-red-600, #dc2626);
+  --text-color-warning: var(--color-amber-600, #d97706);
+  --text-color-info: var(--color-cyan-600, #0891b2);
+
+  /* Background Colors */
+  --background-color-default: var(--color-white, #ffffff);
+  --background-color-primary: var(--color-blue-50, #eff6ff);
+  --background-color-secondary: var(--color-gray-50, #f9fafb);
+  --background-color-tertiary: var(--color-gray-100, #f3f4f6);
+  --background-color-accent: var(--color-rose-50, #faf5ff);
+  --background-color-success: var(--color-emerald-50, #ecfdf5);
+  --background-color-danger: var(--color-red-50, #fef2f2);
+  --background-color-warning: var(--color-amber-50, #fffbeb);
+  --background-color-info: var(--color-cyan-50, #ecfeff);
+  --background-color-muted: var(--color-gray-50, #f9fafb);
+  --background-color-link: var(--color-blue-50, #eff6ff);
+
+  /* Background Hover Colors */
+  --background-color-hover-default: var(--color-gray-50, #f3f4f6);
+  --background-color-hover-primary: var(--color-blue-100, #dbeafe);
+  --background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
+  --background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
+  --background-color-hover-accent: var(--color-rose-100, #f5d0fe);
+  --background-color-hover-success: var(--color-emerald-100, #d1fae5);
+  --background-color-hover-danger: var(--color-red-100, #fee2e2);
+  --background-color-hover-warning: var(--color-amber-100, #fef3c7);
+  --background-color-hover-info: var(--color-cyan-100, #cffafe);
+  --background-color-hover-muted: var(--color-gray-100, #f3f4f6);
+  --background-color-hover-link: var(--color-blue-100, #dbeafe);
+
+  /* Background Active Colors */
+  --background-color-active-default: var(--color-gray-100, #e5e7eb);
+  --background-color-active-primary: var(--color-blue-200, #bfdbfe);
+  --background-color-active-secondary: var(--color-gray-200, #e5e7eb);
+  --background-color-active-tertiary: var(--color-gray-300, #d1d5db);
+  --background-color-active-accent: var(--color-rose-200, #fbcfe8);
+  --background-color-active-success: var(--color-emerald-200, #a7f3d0);
+  --background-color-active-danger: var(--color-red-200, #fecaca);
+  --background-color-active-warning: var(--color-amber-200, #fde68a);
+  --background-color-active-info: var(--color-cyan-200, #a5f3fc);
+  --background-color-active-muted: var(--color-gray-200, #e5e7eb);
+  --background-color-active-link: var(--color-blue-200, #bfdbfe);
+
+  /* Filled Button Background Colors */
+  --filled-background-color-default: var(--color-gray-800, #1f2937);
+  --filled-background-color-primary: var(--color-blue-600, #2563eb);
+  --filled-background-color-secondary: var(--color-gray-600, #4b5563);
+  --filled-background-color-tertiary: var(--color-gray-500, #6b7280);
+  --filled-background-color-accent: var(--color-rose-600, #e11d48);
+  --filled-background-color-success: var(--color-emerald-600, #059669);
+  --filled-background-color-danger: var(--color-red-600, #dc2626);
+  --filled-background-color-warning: var(--color-amber-600, #d97706);
+  --filled-background-color-info: var(--color-cyan-600, #0891b2);
+  --filled-background-color-muted: var(--color-gray-500, #6b7280);
+  --filled-background-color-link: var(--color-blue-600, #2563eb);
+
+  /* Filled Button Hover Background Colors */
+  --filled-background-color-hover-default: var(--color-gray-900, #111827);
+  --filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
+  --filled-background-color-hover-secondary: var(--color-gray-700, #374151);
+  --filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
+  --filled-background-color-hover-accent: var(--color-rose-700, #be123c);
+  --filled-background-color-hover-success: var(--color-emerald-700, #047857);
+  --filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
+  --filled-background-color-hover-warning: var(--color-amber-700, #b45309);
+  --filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
+  --filled-background-color-hover-muted: var(--color-gray-600, #4b5563);
+  --filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
+
+  /* Filled Button Active Background Colors */
+  --filled-background-color-active-default: var(--color-gray-950, #030712);
+  --filled-background-color-active-primary: var(--color-blue-800, #1e40af);
+  --filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
+  --filled-background-color-active-tertiary: var(--color-gray-700, #374151);
+  --filled-background-color-active-accent: var(--color-rose-800, #9f1239);
+  --filled-background-color-active-success: var(--color-emerald-800, #065f46);
+  --filled-background-color-active-danger: var(--color-red-800, #991b1b);
+  --filled-background-color-active-warning: var(--color-amber-800, #92400e);
+  --filled-background-color-active-info: var(--color-cyan-800, #155e75);
+  --filled-background-color-active-muted: var(--color-gray-700, #374151);
+  --filled-background-color-active-link: var(--color-blue-800, #1e40af);
+
+  /* Layout Background Colors */
+  --layout-background-default: var(--color-white, #ffffff);
+  --layout-background-primary: var(--color-white, #ffffff);
+  --layout-background-secondary: var(--color-gray-50, #f9fafb);
+  --layout-background-tertiary: var(--color-gray-100, #f3f4f6);
+  --layout-background-accent: var(--color-indigo-50, #eef2ff);
+  --layout-background-success: var(--color-green-50, #f0fdf4);
+  --layout-background-danger: var(--color-red-50, #fef2f2);
+  --layout-background-warning: var(--color-yellow-50, #fefce8);
+  --layout-background-info: var(--color-blue-50, #eff6ff);
+  --layout-background-transparent: transparent;
+  --layout-background-muted: var(--color-gray-50, #f9fafb);
+  --layout-background-link: var(--color-blue-50, #eff6ff);
+
+  /* Border Colors */
+  --border-color-default: var(--color-gray-200, #d1d5db);
+  --border-color-primary: var(--color-blue-200, #93c5fd);
+  --border-color-secondary: var(--color-gray-200, #d1d5db);
+  --border-color-tertiary: var(--color-gray-200, #e5e7eb);
+  --border-color-muted: var(--color-gray-200, #e5e7eb);
+  --border-color-link: var(--color-blue-200, #93c5fd);
+  --border-color-accent: var(--color-rose-200, #d8b4fe);
+  --border-color-success: var(--color-emerald-200, #6ee7b7);
+  --border-color-danger: var(--color-red-200, #fca5a5);
+  --border-color-warning: var(--color-amber-200, #fcd34d);
+  --border-color-info: var(--color-cyan-200, #67e8f9);
+
+  /* Filled Button Border Colors */
+  --filled-border-color-default: var(--color-gray-800, #1f2937);
+  --filled-border-color-primary: var(--color-blue-600, #2563eb);
+  --filled-border-color-secondary: var(--color-gray-600, #4b5563);
+  --filled-border-color-tertiary: var(--color-gray-500, #6b7280);
+  --filled-border-color-accent: var(--color-rose-600, #e11d48);
+  --filled-border-color-success: var(--color-emerald-600, #059669);
+  --filled-border-color-danger: var(--color-red-600, #dc2626);
+  --filled-border-color-warning: var(--color-amber-600, #d97706);
+  --filled-border-color-info: var(--color-cyan-600, #0891b2);
+  --filled-border-color-muted: var(--color-gray-500, #6b7280);
+  --filled-border-color-link: var(--color-blue-600, #2563eb);
+
+  /* Accent / Action Colors */
+  --accent-color-default: var(--color-rose-600, #7c3aed);
+  --accent-color-hover: var(--color-rose-700, #6d28d9);
+
+  /* Additional Colors */
+  --overlay-color: rgba(0, 0, 0, 0.5);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -15,6 +15,10 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./theme": {
+      "import": "./dist/components/theme/index.js",
+      "types": "./dist/components/theme/index.d.ts"
+    },
     "./complex": {
       "import": "./dist/components/complex/index.js",
       "require": "./dist/components/complex/index.js",
@@ -24,6 +28,10 @@
       "import": "./dist/all.css",
       "default": "./dist/all.css"
     },
+    "./css/vars": {
+      "import": "./dist/vars.css",
+      "default": "./dist/vars.css"
+    },
     "./css/ui": {
       "import": "./dist/ui.css",
       "default": "./dist/ui.css"
@@ -35,12 +43,20 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build:js": "npm run clean && rollup -c --bundleConfigAsCjs",
-    "build:css:all": "npx @tailwindcss/cli --input index.css --output ./../../dist/all.css --cwd ./src/components/",
-    "build:css:ui": "npx @tailwindcss/cli --input index.css --output ./../../../dist/ui.css --cwd ./src/components/ui/",
-    "build:css:complex": "npx @tailwindcss/cli --input index.css --output ./../../../dist/complex.css --cwd ./src/components/complex/",
-    "build": "npm run clean && npm run build:js && npm run build:css:all && npm run build:css:ui && npm run build:css:complex",
-    "prepublishOnly": "npm run build"
+    "type-check": "tsc --noEmit",
+    "build:js": "npm run type-check && npm run clean && rollup -c --bundleConfigAsCjs",
+    "build:css:all": "npx @tailwindcss/cli -i ./src/components/index.css -o ./dist/all.css",
+    "build:css:theme": "npx @tailwindcss/cli -i ./src/components/theme/vars.css -o ./dist/vars.css",
+    "build:css:ui": "npx @tailwindcss/cli -i ./src/components/ui/index.css -o ./dist/ui.css",
+    "build:css:complex": "npx @tailwindcss/cli -i ./src/components/complex/index.css -o ./dist/complex.css",
+    "watch:css:all": "npx @tailwindcss/cli --watch -i ./src/components/index.css -o ./dist/all.css",
+    "watch:css:theme": "npx @tailwindcss/cli --watch -i ./src/components/theme/vars.css -o ./dist/vars.css",
+    "watch:css:ui": "npx @tailwindcss/cli --watch -i ./src/components/ui/index.css -o ./dist/ui.css",
+    "watch:css:complex": "npx @tailwindcss/cli --watch -i ./src/components/complex/index.css -o ./dist/complex.css",
+    "build": "npm run type-check && npm run clean && npm run build:js && npm run build:css:all && npm run build:css:theme && npm run build:css:ui && npm run build:css:complex",
+    "watch": "npm run clean && concurrently \"rollup -c --bundleConfigAsCjs -w\" \"npm run watch:css:all\" \"npm run watch:css:theme\" \"npm run watch:css:ui\" \"npm run watch:css:complex\"",
+    "prepublishOnly": "npm run build",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "keywords": [],
   "author": "",
@@ -52,15 +68,22 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@tailwindcss/cli": "^4.0.14",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "concurrently": "^8.2.2",
+    "jest": "^29.7.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^5.0.10",
     "rollup": "^4.34.9",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^4.0.9",
+    "tailwindcss": "^4.0.14",
+    "ts-jest": "^29.3.1",
     "tslib": "^2.8.1",
     "typescript": "^5.8.2"
   }
-}
+}

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

@@ -1,45 +0,0 @@
-export declare const fontWeightClasses: {
-    thin: string;
-    extralight: string;
-    light: string;
-    normal: string;
-    medium: string;
-    semibold: string;
-    bold: string;
-    extrabold: string;
-    black: string;
-};
-export declare const fontStyleClasses: {
-    italic: string;
-    notItalic: string;
-};
-export declare const fontFamilyClasses: {
-    sans: string;
-    serif: string;
-    mono: string;
-};
-export declare const textDecorationClasses: {
-    underline: string;
-    lineThrough: string;
-    noUnderline: string;
-    overline: string;
-};
-export declare const textTransformClasses: {
-    uppercase: string;
-    lowercase: string;
-    capitalize: string;
-    normalCase: string;
-};
-export declare const textAppearanceClasses: {
-    default: string;
-    primary: string;
-    secondary: string;
-    tertiary: string;
-    muted: string;
-    link: string;
-    accent: string;
-    success: string;
-    danger: string;
-    warning: string;
-    info: string;
-};

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

@@ -1,30 +0,0 @@
-import { CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAppearanceProps, TextDecorationProps, TextTransformProps } from "./props/props";
-export type CommonAppearanceSettings = {
-    [key in keyof CommonAppearanceProps]: boolean;
-};
-export type FontFamilySettings = {
-    [key in keyof FontFamilyProps]: boolean;
-};
-export type FontWeightSettings = {
-    [key in keyof FontWeightProps]: boolean;
-};
-export type FontStyleSettings = {
-    [key in keyof FontStyleProps]: boolean;
-};
-export type TextAppearanceSettings = {
-    [key in keyof TextAppearanceProps & CommonAppearanceProps]: boolean;
-};
-export type TextDecorationSettings = {
-    [key in keyof TextDecorationProps]: boolean;
-};
-export type TextTransformSettings = {
-    [key in keyof TextTransformProps]: boolean;
-};
-export type TypographySettings = {
-    fontFamily?: FontFamilySettings;
-    fontWeight?: FontWeightSettings;
-    fontStyle?: FontStyleSettings;
-    textAppearance?: TextAppearanceSettings;
-    textDecoration?: TextDecorationSettings;
-    textTransform?: TextTransformSettings;
-};

package/dist/components/utils/componentBuilder.d.ts

@@ -1,23 +0,0 @@
-import { BaseComponentProps, BreakpointProps, ItemsProps, CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, GapProps, HideProps, PositionProps, ReverseProps, TextAppearanceProps, TextDecorationProps, TextTransformProps, SizeProps } from "../ui/props/props";
-import { CommonAppearanceSettings, FontFamilySettings, FontStyleSettings, FontWeightSettings, TextAppearanceSettings, TextDecorationSettings, TextTransformSettings, TypographySettings } from "../ui/settings";
-export declare function componentBuilder(baseProps: BaseComponentProps, defaultTag: string, baseClasses?: string): {
-    withBooleanProps: <T extends Record<string, string>>(propMap: Record<keyof T, string>, fallbackKey?: keyof T, settings?: {
-        [key: string]: boolean;
-    }) => /*elided*/ any;
-    withSizes: (sizeMap: Record<keyof SizeProps, string>) => /*elided*/ any;
-    withBreakpoints: (breakpointMap: Record<keyof BreakpointProps, string>) => /*elided*/ any;
-    withReverse: (reverseMap: Record<keyof ReverseProps, string>) => /*elided*/ any;
-    withItems: (itemsMap: Record<keyof ItemsProps, string>) => /*elided*/ any;
-    withHide: (hideMap: Record<keyof HideProps, string>) => /*elided*/ any;
-    withPosition: (positionMap: Record<keyof PositionProps, string>) => /*elided*/ any;
-    withFontWeight: (fontWeight: Record<keyof FontWeightProps, string>, settings: FontWeightSettings) => /*elided*/ any;
-    withFontStyle: (fontStyle: Record<keyof FontStyleProps, string>, settings: FontStyleSettings) => /*elided*/ any;
-    withFontFamily: (fontFamily: Record<keyof FontFamilyProps, string>, settings: FontFamilySettings) => /*elided*/ any;
-    withTextDecoration: (textDecoration: Record<keyof TextDecorationProps, string>, settings: TextDecorationSettings) => /*elided*/ any;
-    withTextTransform: (textTransform: Record<keyof TextTransformProps, string>, settings: TextTransformSettings) => /*elided*/ any;
-    withTextAppearance: (appearance: Record<keyof TextAppearanceProps & CommonAppearanceProps, string>, settings: TextAppearanceSettings) => /*elided*/ any;
-    withGaps: (gapMap: Record<keyof GapProps, string>, sizeMap: Record<keyof SizeProps, string>) => /*elided*/ any;
-    withTypography: (settings: TypographySettings) => /*elided*/ any;
-    withAppearance: (appearance: Record<keyof CommonAppearanceProps, string>, settings: CommonAppearanceSettings) => /*elided*/ any;
-    build(): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-};