@netoyed/ux4g-design-system-v3-postcss 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,414 @@
+import fg from 'fast-glob';
+import fs from 'fs';
+
+const registry = {
+	// --- Spacing ---
+	'p': { type: 'space', property: 'padding' },
+	'pt': { type: 'space', property: 'padding-top' },
+	'pr': { type: 'space', property: 'padding-right' },
+	'pb': { type: 'space', property: 'padding-bottom' },
+	'pl': { type: 'space', property: 'padding-left' },
+	'px': { type: 'space', property: ['padding-left', 'padding-right'] },
+	'py': { type: 'space', property: ['padding-top', 'padding-bottom'] },
+
+	'm': { type: 'space', property: 'margin' },
+	'mt': { type: 'space', property: 'margin-top' },
+	'mr': { type: 'space', property: 'margin-right' },
+	'mb': { type: 'space', property: 'margin-bottom' },
+	'ml': { type: 'space', property: 'margin-left' },
+	'mx': { type: 'space', property: ['margin-left', 'margin-right'] },
+	'my': { type: 'space', property: ['margin-top', 'margin-bottom'] },
+
+	// --- Colors ---
+	'text': { type: 'color', property: 'color' },
+	'bg': { type: 'color', property: 'background-color' },
+	'border': { type: 'color', property: 'border-color' },
+
+	// --- Typography ---
+	'font': { type: 'fontDetail', property: 'font-weight' },
+	'text-size': { type: 'text', property: 'font-size' },
+	'leading': { type: 'value', property: 'line-height' },
+	'tracking': { type: 'value', property: 'letter-spacing' },
+	'align': { type: 'static', property: 'text-align' }, // text-center
+
+	// --- Layout ---
+	'flex': { type: 'static', property: 'display', value: 'flex' },
+	'inline-flex': { type: 'static', property: 'display', value: 'inline-flex' },
+	'grid': { type: 'static', property: 'display', value: 'grid' },
+	'hidden': { type: 'static', property: 'display', value: 'none' },
+	'block': { type: 'static', property: 'display', value: 'block' },
+	'inline-block': { type: 'static', property: 'display', value: 'inline-block' },
+
+	'items': { type: 'static', property: 'align-items' }, // start, end, center, baseline, stretch
+	'justify': { type: 'static', property: 'justify-content' }, // start, end, center, between, around, evenly
+	'self': { type: 'static', property: 'align-self' },
+
+	'flex-col': { type: 'static', property: 'flex-direction', value: 'column' },
+	'flex-row': { type: 'static', property: 'flex-direction', value: 'row' },
+	'flex-wrap': { type: 'static', property: 'flex-wrap', value: 'wrap' },
+	'flex-nowrap': { type: 'static', property: 'flex-wrap', value: 'nowrap' },
+
+	'gap': { type: 'space', property: 'gap' },
+	'gap-x': { type: 'space', property: 'column-gap' },
+	'gap-y': { type: 'space', property: 'row-gap' },
+
+	// --- Sizing ---
+	'w': { type: 'size', property: 'width' },
+	'h': { type: 'size', property: 'height' },
+	'min-w': { type: 'size', property: 'min-width' },
+	'min-h': { type: 'size', property: 'min-height' },
+	'max-w': { type: 'size', property: 'max-width' },
+	'max-h': { type: 'size', property: 'max-height' },
+
+	// --- Borders & Effects ---
+	'rounded': { type: 'radius', property: 'border-radius' },
+	'shadow': { type: 'shadow', property: 'box-shadow' },
+	'opacity': { type: 'value', property: 'opacity' },
+	'z': { type: 'zIndex', property: 'z-index' },
+
+	// --- Position ---
+	'absolute': { type: 'static', property: 'position', value: 'absolute' },
+	'relative': { type: 'static', property: 'position', value: 'relative' },
+	'fixed': { type: 'static', property: 'position', value: 'fixed' },
+	'top': { type: 'space', property: 'top' },
+	'right': { type: 'space', property: 'right' },
+	'bottom': { type: 'space', property: 'bottom' },
+	'left': { type: 'space', property: 'left' },
+};
+
+function generateUtility(className, config) {
+	let bp = null;
+	let util = className;
+
+	if (className.includes(':')) {
+		[bp, util] = className.split(':');
+	}
+
+	let css = '';
+
+	if (!util.startsWith(config.prefix)) return null;
+	const coreUtil = util.replace(config.prefix, '');
+
+	for (const [key, def] of Object.entries(registry)) {
+		const prefix = `${key}-`;
+		if (coreUtil.startsWith(prefix)) {
+			const value = coreUtil.slice(prefix.length);
+
+			let varName = '';
+
+			if (def.type === 'space') varName = `var(--${config.prefix}space-${value})`;
+			else if (def.type === 'color') varName = `var(--${config.prefix}color-${value})`;
+			else if (def.type === 'radius') varName = `var(--${config.prefix}radius-${value || 'DEFAULT'})`;
+			else if (def.type === 'shadow') varName = `var(--${config.prefix}shadow-${value || 'DEFAULT'})`;
+			else if (def.type === 'zIndex') varName = `var(--${config.prefix}zIndex-${value})`;
+			else if (def.type === 'fontDetail') varName = `var(--${config.prefix}fontWeight-${value})`;
+
+			else if (def.type === 'static') {
+				if (def.value) {
+					if (value !== '' && !def.allowValue) continue;
+					varName = def.value;
+				} else {
+					varName = value;
+				}
+			}
+
+			else if (def.type === 'size') {
+				if (config.theme.spacing[value]) {
+					varName = `var(--${config.prefix}space-${value})`;
+				} else if (value.includes('/')) {
+					const [num, den] = value.split('/');
+					varName = `${(parseInt(num) / parseInt(den)) * 100}%`;
+				} else {
+					continue;
+				}
+			}
+
+			else continue;
+
+			// Generate CSS properties
+			const props = Array.isArray(def.property) ? def.property : [def.property];
+			const decls = (def.type === 'static' && def.value) ? varName : props.map(p => `${p}:${varName}`).join(';');
+
+			css = `.${escape(className)}{${decls};}`;
+			break;
+		}
+	}
+
+	if (!css) return null;
+
+	if (bp) {
+		const size = config.breakpoints[bp];
+		return `@media (min-width:${size}){${css}}`;
+	}
+
+	return css;
+}
+
+function escape(cls) {
+	return cls.replace(/:/g, '\\:');
+}
+
+/**
+ * UX4G Design System – Default Config
+ * DO NOT EDIT (user overrides via ux4g.config.js)
+ */
+
+const defaultConfig = {
+	/**
+	 * --------------------------------------------------
+	 * CORE
+	 * --------------------------------------------------
+	 */
+	prefix: 'ux4g-',
+
+	/**
+	 * dev | build | cdn
+	 * NOTE: CLI command will override this
+	 */
+	mode: 'build',
+
+	/**
+	 * --------------------------------------------------
+	 * CONTENT (used for purge / JIT)
+	 * --------------------------------------------------
+	 */
+	content: [
+		'./index.html',
+		'./src/**/*.{js,ts,jsx,tsx,vue,html}',
+		'./pages/**/*.{js,ts,jsx,tsx}',
+		'./components/**/*.{js,ts,jsx,tsx}',
+		'./**/*.php'
+	],
+
+	/**
+	 * --------------------------------------------------
+	 * THEME (tokens)
+	 * --------------------------------------------------
+	 */
+	theme: {
+		colors: {
+			primary: {
+				50: '#EFF6FF',
+				500: '#3B82F6',
+				700: '#1D4ED8'
+			},
+			secondary: {
+				500: '#9333EA'
+			},
+			danger: {
+				500: '#EF4444'
+			}
+		},
+
+		spacing: {
+			0: '0px',
+			1: '4px',
+			2: '8px',
+			4: '16px',
+			6: '24px',
+			8: '32px'
+		},
+
+		fontSize: {
+			xs: '12px',
+			sm: '14px',
+			md: '16px',
+			lg: '18px',
+			xl: '20px'
+		},
+
+		fontWeight: {
+			regular: 400,
+			medium: 500,
+			bold: 700
+		},
+
+		radius: {
+			sm: '4px',
+			md: '8px',
+			lg: '12px',
+			xl: '16px'
+		},
+
+		shadow: {
+			sm: '0 1px 2px rgba(0,0,0,0.05)',
+			md: '0 4px 6px rgba(0,0,0,0.1)'
+		},
+
+		zIndex: {
+			dropdown: 1000,
+			modal: 1100,
+			toast: 1200
+		}
+	},
+
+	/**
+	 * --------------------------------------------------
+	 * RESPONSIVE
+	 * --------------------------------------------------
+	 */
+	breakpoints: {
+		sm: '640px',
+		md: '768px',
+		lg: '1024px',
+		xl: '1280px'
+	},
+
+	/**
+	 * --------------------------------------------------
+	 * DARK MODE / THEMES
+	 * --------------------------------------------------
+	 */
+	darkMode: {
+		enabled: true,
+		strategy: 'data-attribute', // class | data-attribute
+		attribute: 'data-theme',
+		themes: {
+			light: 'light',
+			dark: 'dark'
+		}
+	},
+
+	/**
+	 * --------------------------------------------------
+	 * SAFELIST (dynamic classes)
+	 * --------------------------------------------------
+	 */
+	safelist: [],
+
+	/**
+	 * --------------------------------------------------
+	 * COMPONENTS
+	 * --------------------------------------------------
+	 */
+	components: {
+		button: true,
+		card: true,
+		input: true,
+		modal: false
+	},
+
+	/**
+	 * --------------------------------------------------
+	 * PLUGINS
+	 * --------------------------------------------------
+	 */
+	plugins: [],
+
+	/**
+	 * --------------------------------------------------
+	 * OUTPUT
+	 * --------------------------------------------------
+	 */
+	output: {
+		dir: 'dist',
+		file: 'ux4g.css',
+		minify: true,
+		sourceMap: false
+	}
+};
+
+const preflight = `
+/* UX4G Preflight (Reset) */
+*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
+html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: system-ui, sans-serif; }
+body { margin: 0; line-height: inherit; }
+hr { height: 0; color: inherit; border-top-width: 1px; }
+abbr:where([title]) { text-decoration: underline dotted; }
+h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
+a { color: inherit; text-decoration: inherit; }
+b, strong { font-weight: bolder; }
+code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
+small { font-size: 80%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
+button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; }
+button, select { text-transform: none; }
+button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
+:-moz-focusring { outline: auto; }
+:-moz-ui-invalid { box-shadow: none; }
+progress { vertical-align: baseline; }
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
+[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
+::-webkit-search-decoration { -webkit-appearance: none; }
+::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
+summary { display: list-item; }
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
+fieldset { margin: 0; padding: 0; }
+legend { padding: 0; }
+ol, ul, menu { list-style: none; margin: 0; padding: 0; }
+textarea { resize: vertical; }
+input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
+button, [role="button"] { cursor: pointer; }
+:disabled { cursor: default; }
+img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
+img, video { max-width: 100%; height: auto; }
+[hidden] { display: none; }
+`;
+
+// Helper to deep merge config (simplified version of CLI one)
+function deepMerge(target, source) {
+	if (typeof source !== 'object' || source === null) return source;
+	const result = { ...target };
+	for (const key of Object.keys(source)) {
+		if (Array.isArray(source[key])) {
+			result[key] = source[key];
+		} else if (typeof source[key] === 'object' && typeof target[key] === 'object') {
+			result[key] = deepMerge(target[key], source[key]);
+		} else {
+			result[key] = source[key];
+		}
+	}
+	return result;
+}
+
+var index = (opts = {}) => {
+	return {
+		postcssPlugin: 'ux4g',
+		async Once(root, { result }) {
+			// 1. Load Config
+			// In a real plugin, we use 'jiti' to load user config synchronously or async.
+			// Here we merge defaults with options passed in postcss.config.js
+			let config = deepMerge(defaultConfig, opts);
+
+			// Try to look for ux4g.config.js if no options passed?
+			// For now, let's rely on the passed options or defaults.
+			config.prefix = 'ux4g-'; // Enforce
+
+			// 2. Scan Files
+			const files = await fg(config.content);
+			const foundClasses = new Set();
+
+			const prefix = config.prefix.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+			const CLASS_REGEX = new RegExp(`(sm:|md:|lg:|xl:)?${prefix}[a-z0-9\\-]+`, 'g');
+
+			for (const file of files) {
+				const content = fs.readFileSync(file, 'utf8');
+				const matches = content.match(CLASS_REGEX);
+				if (matches) matches.forEach(c => foundClasses.add(c));
+			}
+
+			// 3. Generate CSS
+			let utilitiesCSS = '';
+			for (const cls of foundClasses) {
+				const css = generateUtility(cls, config);
+				if (css) utilitiesCSS += css + '\n';
+			}
+
+			// 4. Replace Directives
+			root.walkAtRules('ux4g', (rule) => {
+				if (rule.params === 'base') {
+					rule.replaceWith(preflight);
+				} else if (rule.params === 'utilities') {
+					rule.replaceWith(utilitiesCSS);
+				}
+			});
+		}
+	};
+};
+
+const postcss = true;
+
+export { index as default, postcss };