@removify/tailwind-preset 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -0,0 +1,468 @@
+import animation$1 from "tailwindcss-animate";
+//#region src/plugins/index.ts
+const plugins = [animation$1];
+//#endregion
+//#region src/theme/animation.ts
+const uiAnimation = {
+	"radix-accordion-down": "radix-accordion-down 0.1s ease-out",
+	"radix-accordion-up": "radix-accordion-up 0.1s ease-out",
+	"radix-collapsible-down": "radix-collapsible-down 0.1s ease-in-out",
+	"radix-collapsible-up": "radix-collapsible-up 0.1s ease-in-out",
+	"reka-accordion-down": "reka-accordion-down 0.1s ease-out",
+	"reka-accordion-up": "reka-accordion-up 0.1s ease-out",
+	"reka-collapsible-down": "reka-collapsible-down 0.1s ease-in-out",
+	"reka-collapsible-up": "reka-collapsible-up 0.1s ease-in-out",
+	"accordion-down": "accordion-down 0.2s ease-out",
+	"accordion-up": "accordion-up 0.2s ease-out",
+	"collapsible-down": "collapsible-down 0.2s ease-in-out",
+	"collapsible-up": "collapsible-up 0.2s ease-in-out"
+};
+const uiKeyframes = {
+	"radix-accordion-down": {
+		from: { height: "0" },
+		to: { height: "var(--radix-accordion-content-height)" }
+	},
+	"radix-accordion-up": {
+		from: { height: "var(--radix-accordion-content-height)" },
+		to: { height: "0" }
+	},
+	"radix-collapsible-down": {
+		from: { height: "0" },
+		to: { height: "var(--radix-collapsible-content-height)" }
+	},
+	"radix-collapsible-up": {
+		from: { height: "var(--radix-collapsible-content-height)" },
+		to: { height: "0" }
+	},
+	"reka-accordion-down": {
+		from: { height: "0" },
+		to: { height: "var(--reka-accordion-content-height)" }
+	},
+	"reka-accordion-up": {
+		from: { height: "var(--reka-accordion-content-height)" },
+		to: { height: "0" }
+	},
+	"reka-collapsible-down": {
+		from: { height: "0" },
+		to: { height: "var(--reka-collapsible-content-height)" }
+	},
+	"reka-collapsible-up": {
+		from: { height: "var(--reka-collapsible-content-height)" },
+		to: { height: "0" }
+	},
+	"accordion-down": {
+		from: { height: "0" },
+		to: { height: "var(--radix-accordion-content-height)" }
+	},
+	"accordion-up": {
+		from: { height: "var(--radix-accordion-content-height)" },
+		to: { height: "0" }
+	},
+	"collapsible-down": {
+		from: { height: "0" },
+		to: { height: "var(--radix-collapsible-content-height)" }
+	},
+	"collapsible-up": {
+		from: { height: "var(--radix-collapsible-content-height)" },
+		to: { height: "0" }
+	}
+};
+const animation = { ...uiAnimation };
+const keyframes = { ...uiKeyframes };
+//#endregion
+//#region src/theme/colors.ts
+const mainColors = {
+	inherit: "inherit",
+	current: "currentColor",
+	transparent: "transparent",
+	danger: "#EA3529",
+	warning: "#F97316",
+	success: "#15A46E",
+	info: "#3EC2C9",
+	special: "#686DF4",
+	black: "#000000",
+	white: "#FFFFFF",
+	bateau: {
+		DEFAULT: "#1C749F",
+		50: "#F2F5F7",
+		100: "#E7ECF0",
+		200: "#CCD7E1",
+		300: "#ADC0D0",
+		400: "#6390B0",
+		500: "#1C749F",
+		600: "#1B6F98",
+		700: "#186388",
+		800: "#155675",
+		900: "#114660",
+		950: "#0C3144"
+	},
+	pompelmo: {
+		DEFAULT: "#FF6663",
+		50: "#FFF4F4",
+		100: "#FFEBEA",
+		200: "#FFD4D4",
+		300: "#FFBCBB",
+		400: "#FF9F9E",
+		500: "#FF6663",
+		600: "#F3615E",
+		700: "#DA5754",
+		800: "#BC4B49",
+		900: "#9A3E3C",
+		950: "#6D2C2A"
+	},
+	neutral: {
+		DEFAULT: "#BEC7D1",
+		50: "#F9FAFB",
+		100: "#F4F6F7",
+		200: "#E9ECEF",
+		300: "#DEE2E7",
+		400: "#D2D8DE",
+		500: "#BEC7D1",
+		600: "#B5BEC7",
+		700: "#A2AAB2",
+		800: "#8C939A",
+		900: "#73787E",
+		950: "#515559"
+	},
+	orange: {
+		DEFAULT: "#F97316",
+		50: "#FEF5F2",
+		100: "#FEECE7",
+		200: "#FDD7CC",
+		300: "#FCC0AD",
+		400: "#FBA586",
+		500: "#F97316",
+		600: "#EE6E15",
+		700: "#D46213",
+		800: "#B85510",
+		900: "#96450D",
+		950: "#6A3109"
+	},
+	amber: {
+		DEFAULT: "#FBBF24",
+		50: "#FFF9F2",
+		100: "#FEF5E7",
+		200: "#FEEACD",
+		300: "#FDDEAE",
+		400: "#FCD288",
+		500: "#FBBF24",
+		600: "#EFB622",
+		700: "#D6A31F",
+		800: "#B98D1B",
+		900: "#977316",
+		950: "#6B510F"
+	},
+	indigo: {
+		DEFAULT: "#686DF4",
+		50: "#F4F4FE",
+		100: "#EBEBFD",
+		200: "#D5D6FB",
+		300: "#BCBEF9",
+		400: "#A0A2F7",
+		500: "#686DF4",
+		600: "#6368E9",
+		700: "#595DD0",
+		800: "#4D51B4",
+		900: "#3F4293",
+		950: "#2C2F68"
+	},
+	seafoam: {
+		DEFAULT: "#3EC2C9",
+		50: "#F3FAFA",
+		100: "#E8F5F6",
+		200: "#CFEBED",
+		300: "#B2E0E3",
+		400: "#8FD4D9",
+		500: "#3EC2C9",
+		600: "#3BB9C0",
+		700: "#35A6AB",
+		800: "#2E8F95",
+		900: "#257579",
+		950: "#1A5356"
+	},
+	green: {
+		DEFAULT: "#15A46E",
+		50: "#F2F7F4",
+		100: "#E7F1EB",
+		200: "#CCE2D6",
+		300: "#ADD2BE",
+		400: "#86C1A3",
+		500: "#15A46E",
+		600: "#149C69",
+		700: "#128C5E",
+		800: "#107951",
+		900: "#0D6342",
+		950: "#09462F"
+	},
+	fuchsia: {
+		DEFAULT: "#C53DE7",
+		50: "#FAF3FD",
+		100: "#F5E8FB",
+		200: "#ECCFF7",
+		300: "#E1B2F2",
+		400: "#D68FEE",
+		500: "#C53DE7",
+		600: "#BC3ADC",
+		700: "#A834C5",
+		800: "#922DAB",
+		900: "#77258B",
+		950: "#541A63"
+	},
+	red: {
+		DEFAULT: "#EA3529",
+		50: "#FDF2F2",
+		100: "#FBE8E7",
+		200: "#F8CECD",
+		300: "#F4B0AE",
+		400: "#F08C8A",
+		500: "#EA3529",
+		600: "#DF3327",
+		700: "#C82D23",
+		800: "#AD271E",
+		900: "#8D2019",
+		950: "#641711"
+	},
+	rating: {
+		"high": "#15A46E",
+		"medium": "#EC5818",
+		"low": "#EA3529",
+		"high-star": "#86C1A3",
+		"medium-star": "#FCD288",
+		"low-star": "#F08C8A"
+	},
+	table: { border: "#e8e9ed" }
+};
+const colors = {
+	...mainColors,
+	primary: mainColors.bateau,
+	secondary: mainColors.pompelmo
+};
+const customFontFamily = { sans: ["DM Sans", ...[
+	"ui-sans-serif",
+	"system-ui",
+	"sans-serif",
+	"\"Apple Color Emoji\"",
+	"\"Segoe UI Emoji\"",
+	"\"Segoe UI Symbol\"",
+	"\"Noto Color Emoji\""
+]] };
+//#endregion
+//#region src/theme/fontSize.ts
+const fontSize = {
+	"2xs": ["0.6875rem", "1rem"],
+	"xs": ["0.75rem", "1rem"],
+	"sm": ["0.875rem", "1.25rem"],
+	"base": ["1rem", "1.5rem"],
+	"md": ["1.125rem", "1.5rem"],
+	"lg": ["1.25rem", "1.625rem"],
+	"display1": ["3.75rem", {
+		fontWeight: 700,
+		lineHeight: "5rem",
+		letterSpacing: "-0.0625rem"
+	}],
+	"display2": ["3.25rem", {
+		fontWeight: 700,
+		lineHeight: "4.25rem",
+		letterSpacing: "-0.05rem"
+	}],
+	"display3": ["2.75rem", {
+		fontWeight: 700,
+		lineHeight: "3.625rem",
+		letterSpacing: "-0.0375rem"
+	}],
+	"h1": ["3rem", {
+		fontWeight: 700,
+		lineHeight: "3.75rem",
+		letterSpacing: "-0.0125rem"
+	}],
+	"h2": ["2.5rem", {
+		fontWeight: 700,
+		lineHeight: "3.25rem",
+		letterSpacing: "-0.0125rem"
+	}],
+	"h3": ["2.25rem", {
+		fontWeight: 700,
+		lineHeight: "3rem",
+		letterSpacing: "-0.0125rem"
+	}],
+	"h4": ["2rem", {
+		fontWeight: 700,
+		lineHeight: "2.625rem",
+		letterSpacing: "-0.0125rem"
+	}],
+	"h5": ["1.5rem", {
+		fontWeight: 700,
+		lineHeight: "2rem",
+		letterSpacing: "-0.0125rem"
+	}],
+	"h6": ["1.25rem", {
+		fontWeight: 700,
+		lineHeight: "1.625rem",
+		letterSpacing: "-0.0125rem"
+	}]
+};
+//#endregion
+//#region src/theme/screen.ts
+const screensNumber = {
+	"xs": 480,
+	"sm": 640,
+	"md": 768,
+	"lg": 1024,
+	"xl": 1280,
+	"2xl": 1536,
+	"tablet": 640,
+	"tablet-lg": 960,
+	"laptop": 1024,
+	"desktop": 1280
+};
+const screens = {
+	"xs": `${screensNumber.xs}px`,
+	"sm": `${screensNumber.sm}px`,
+	"md": `${screensNumber.md}px`,
+	"lg": `${screensNumber.lg}px`,
+	"xl": `${screensNumber.xl}px`,
+	"2xl": `${screensNumber["2xl"]}px`,
+	"tablet": `${screensNumber.tablet}px`,
+	"tablet-lg": `${screensNumber["tablet-lg"]}px`,
+	"laptop": `${screensNumber.laptop}px`,
+	"desktop": `${screensNumber.desktop}px`
+};
+//#endregion
+//#region src/theme/shadows.ts
+const boxShadow = {
+	"elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
+	"elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
+	"elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
+	"elevation-3": "0 6px 12px 0 rgba(0, 0, 0, 0.10)",
+	"elevation-4": "0 8px 16px 0 rgba(0, 0, 0, 0.10)",
+	"elevation-5": "0 12px 24px 0 rgba(0, 0, 0, 0.10)"
+};
+//#endregion
+//#region src/theme/index.ts
+function buildTheme(object, option = {}) {
+	const { enabled = true, prefix = "" } = option;
+	if (!enabled) return null;
+	if (prefix) return Object.fromEntries(Object.entries(object).map(([k, v]) => [`${prefix}${k}`, v]));
+	return object;
+}
+function factory(options = {}) {
+	const theme = {};
+	if (options.colors?.enabled !== false) {
+		const _colors = buildTheme(colors, options.colors);
+		if (_colors != null) theme.colors = _colors;
+	}
+	if (options.boxShadow?.enabled !== false) {
+		const _boxShadow = buildTheme(boxShadow, options.boxShadow);
+		if (_boxShadow != null) theme.boxShadow = _boxShadow;
+	}
+	if (options.fontSize?.enabled !== false) {
+		const _fontSize = buildTheme(fontSize, options.fontSize);
+		if (_fontSize != null) theme.fontSize = _fontSize;
+	}
+	if (options.fontFamily?.enabled !== false) {
+		const _fontFamily = buildTheme(customFontFamily, options.fontFamily);
+		if (_fontFamily != null) theme.fontFamily = _fontFamily;
+	}
+	if (options.animation?.enabled !== false) {
+		const _animation = buildTheme(animation, options.animation);
+		if (_animation != null) theme.animation = _animation;
+	}
+	if (options.keyframes?.enabled !== false) {
+		const _keyframes = buildTheme(keyframes, options.keyframes);
+		if (_keyframes != null) theme.keyframes = _keyframes;
+	}
+	if (options.screens?.enabled !== false) {
+		const _screens = buildTheme(screens, options.screens);
+		if (_screens != null) theme.screens = _screens;
+	}
+	return theme;
+}
+const defaultTheme = {
+	colors,
+	boxShadow,
+	fontSize,
+	fontFamily: customFontFamily,
+	animation,
+	keyframes,
+	screens
+};
+//#endregion
+//#region src/constant/index.ts
+const colorsNames = [
+	"primary",
+	"bateau",
+	"secondary",
+	"pompelmo",
+	"green",
+	"fuchsia",
+	"indigo",
+	"neutral",
+	"orange",
+	"red",
+	"amber",
+	"seafoam"
+];
+//#endregion
+//#region src/types/color.ts
+const ratingColorVariations = [
+	"low",
+	"high",
+	"medium",
+	"low-star",
+	"high-star",
+	"medium-star"
+];
+//#endregion
+//#region src/types/factory.ts
+const configuredThemes = [
+	"colors",
+	"boxShadow",
+	"fontSize",
+	"fontFamily",
+	"animation",
+	"keyframes",
+	"screens"
+];
+//#endregion
+//#region src/types/fontSize.ts
+function isDetailFont(value) {
+	return Array.isArray(value) && typeof value[1] === "object";
+}
+//#endregion
+//#region src/types/screen.ts
+const screenSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"tablet",
+	"tablet-lg",
+	"laptop",
+	"desktop"
+];
+//#endregion
+//#region src/types/shadow.ts
+const shadowVariations = [
+	"elevation-0",
+	"elevation-1",
+	"elevation-2",
+	"elevation-3",
+	"elevation-4",
+	"elevation-5"
+];
+//#endregion
+//#region src/index.ts
+function buildPreset(extend = true, buildOptions = {}) {
+	if (extend === false) return {
+		theme: factory(buildOptions),
+		plugins
+	};
+	return {
+		theme: { extend: factory(buildOptions) },
+		plugins
+	};
+}
+//#endregion
+export { animation, boxShadow, buildPreset, buildTheme, colors, colorsNames, configuredThemes, defaultTheme, factory, customFontFamily as fontFamily, fontSize, isDetailFont, keyframes, ratingColorVariations, screenSizes, screens, screensNumber, shadowVariations };

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@removify/tailwind-preset",
   "type": "module",
-  "version": "1.0.7",
-  "packageManager": "pnpm@10.13.1",
+  "version": "1.0.9",
   "description": "Tailwind CSS preset for Removify",
   "keywords": [
     "tailwind"
@@ -10,7 +9,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
     "./index.css": {
@@ -32,57 +31,51 @@
   "engines": {
     "node": ">=22"
   },
-  "scripts": {
-    "start": "pnpm exec tsx ./src/index.ts",
-    "build": "rimraf dist && tsup src/index.ts --format esm,cjs --clean --dts && pnpm generate:tailwind-v4",
-    "generate:tailwind-v4": "tsx ./scripts/generate-tailwind-v4.ts",
-    "update-animation:v4": "curl https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css > ./tailwind-dist/tailwindcss-animate.css",
-    "typecheck": "tsc --noEmit",
-    "prepack": "pnpm build",
-    "watch": "tsup --format esm,cjs --watch",
-    "dev": "tsx watch ./src/index.ts",
-    "dev:playground": "pnpm --filter playground dev",
-    "test": "vitest",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "husky:install": "husky",
-    "release": "bumpp && pnpm publish --access=public",
-    "tailwind-config-viewer": "tailwind-config-viewer -o -c tailwind.config.js",
-    "tailwind-config-viewer:build": "pnpm build && tailwind-config-viewer export tailwind-dist -c tailwind.config.js"
-  },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0"
   },
   "dependencies": {
-    "string-ts": "^2.2.1",
+    "string-ts": "^2.3.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@removify/eslint-config": "^3.1.2",
-    "@removify/tailwind-preset": "workspace:*",
-    "@types/node": "^22.16.5",
-    "bumpp": "^10.2.0",
-    "eslint": "^9.31.0",
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@removify/eslint-config": "^5.1.0",
+    "@types/node": "^25.5.0",
+    "bumpp": "^11.0.1",
+    "eslint": "^10.0.3",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
-    "rimraf": "^6.0.1",
+    "lint-staged": "^16.4.0",
+    "rimraf": "^6.1.3",
     "tailwind-config-viewer": "^2.0.4",
-    "tailwindcss": "^4.0.0",
-    "tsup": "^8.5.0",
-    "tsx": "^4.20.3",
-    "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
-  },
-  "pnpm": {
-    "overrides": {
-      "koa": ">=3.0.1"
-    }
+    "tailwindcss": "^4.2.1",
+    "tsdown": "^0.21.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.0",
+    "@removify/tailwind-preset": "1.0.9"
   },
   "lint-staged": {
     "**/*.{js,ts,vue,html}": [
       "pnpm lint:fix"
     ]
+  },
+  "scripts": {
+    "start": "pnpm exec tsx ./src/index.ts",
+    "build": "rimraf dist && tsdown src/index.ts --format esm,cjs --clean --dts && pnpm generate:tailwind-v4",
+    "generate:tailwind-v4": "tsx ./scripts/generate-tailwind-v4.ts",
+    "update-animation:v4": "curl https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css > ./tailwind-dist/tailwindcss-animate.css",
+    "typecheck": "tsc --noEmit",
+    "watch": "tsdown --format esm,cjs --watch",
+    "dev": "tsx watch ./src/index.ts",
+    "dev:playground": "pnpm --filter playground dev",
+    "test": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "husky:install": "husky",
+    "release": "bumpp && pnpm publish --access=public",
+    "tailwind-config-viewer": "tailwind-config-viewer -o -c tailwind.config.js",
+    "tailwind-config-viewer:build": "pnpm build && tailwind-config-viewer export tailwind-dist -c tailwind.config.js"
   }
-}
+}