@wener/console/src/daisy/Daisy.ts

Base console UI toolkit

export namespace Daisy {
	type SemanticColorType = 'info' | 'success' | 'warning' | 'error';
	type ThemeColorType = 'primary' | 'secondary' | 'accent';
	type StatusModifierType = 'active' | 'disabled' | 'readonly' | 'loading' | 'open';
	type AlignType = 'start' | 'center' | 'end';
	type PositionType = 'top' | 'right' | 'bottom' | 'left';

	const Sizes: Record<
		SizeType,
		{
			[key in ComponentType | 'size' | 'loading' | 'icon']: string;
		} & {
			[key in 'value']: number;
		}
	> = {
		xs: {
			btn: 'btn-xs',
			loading: 'loading-xs',
			input: 'input-xs',
			textarea: 'textarea-xs',
			size: 'size-6',
			checkbox: 'checkbox-xs',
			tabs: 'tabs-xs',
			icon: 'size-4',
			select: 'select-xs',
			badge: 'badge-xs',
			kbd: 'kbd-xs',
			table: 'table-xs',
			'btm-nav': 'btm-nav-xs',
			menu: 'menu-xs',
			'file-input': 'file-input-xs',
			value: 24,
		},
		sm: {
			btn: 'btn-sm',
			loading: 'loading-sm',
			input: 'input-sm',
			textarea: 'textarea-sm',
			checkbox: 'checkbox-sm',
			size: 'size-8',
			tabs: 'tabs-sm',
			icon: 'size-5',
			select: 'select-sm',
			badge: 'badge-sm',
			kbd: 'kbd-sm',
			table: 'table-sm',
			'btm-nav': 'btm-nav-sm',
			menu: 'menu-sm',
			'file-input': 'file-input-sm',
			value: 32,
		},
		md: {
			btn: 'btn-md',
			loading: 'loading',
			input: 'input-md',
			textarea: 'textarea-md',
			checkbox: 'checkbox-md',
			size: 'size-12',
			tabs: 'tabs-md',
			icon: 'size-8',
			select: 'select-md',
			badge: 'badge-md',
			kbd: 'kbd-md',
			table: 'table-md',
			'btm-nav': 'btm-nav-md',
			menu: 'menu-md',
			'file-input': 'file-input-md',
			value: 48,
		},
		lg: {
			btn: 'btn-lg',
			loading: 'loading-lg',
			input: 'input-lg',
			textarea: 'textarea-lg',
			checkbox: 'checkbox-lg',
			size: 'size-16',
			tabs: 'tabs-lg',
			icon: 'size-12',
			badge: 'badge-lg',
			select: 'select-lg',
			kbd: 'kbd-lg',
			table: 'table-lg',
			'btm-nav': 'btm-nav-lg',
			menu: 'menu-lg',
			'file-input': 'file-input-lg',
			value: 64,
		},
	};

	export type SizeType = 'xs' | 'sm' | 'md' | 'lg';

	type ComponentType =
		| 'btn'
		| 'input'
		| 'textarea'
		| 'checkbox'
		| 'tabs'
		| 'select'
		| 'badge'
		| 'kbd'
		| 'table'
		| 'btm-nav'
		| 'menu'
		| 'file-input';

	// radio range rating toggle

	export function getSize(size?: SizeType) {
		return size ? Sizes[size] : undefined;
	}

	function sizeOf(type: ComponentType, size: SizeType = 'md') {
		return size ? Sizes[size][type] : undefined;
	}
}

type ComponentDef = {
	name: string;
	size?: boolean;
	semanticColor?: boolean;
	themeColor?: boolean;
	modifiers?: string[];
};

const Components: ComponentDef[] = [
	{
		name: 'button',
		size: true,
		semanticColor: true,
		themeColor: true,
	},
];