@geekmidas/ui 0.0.1 → 0.2.0

package/dist/theme-BRGSS8qx.cjs

@@ -0,0 +1,135 @@
+
+//#region src/styles/theme.ts
+/**
+* Theme constants for the UI component library.
+* Inspired by Supabase's dark theme design.
+*/
+const theme = {
+	colors: {
+		background: "#171717",
+		surface: "#1c1c1c",
+		surfaceHover: "#262626",
+		surfaceActive: "#2a2a2a",
+		border: "#2e2e2e",
+		borderHover: "#3e3e3e",
+		borderFocus: "#3ecf8e",
+		text: "#fafafa",
+		textMuted: "#a1a1aa",
+		textSubtle: "#71717a",
+		accent: "#3ecf8e",
+		accentHover: "#4ade80",
+		accentMuted: "#22c55e",
+		error: "#ef4444",
+		errorMuted: "#dc2626",
+		warning: "#f59e0b",
+		warningMuted: "#d97706",
+		info: "#3b82f6",
+		infoMuted: "#2563eb",
+		success: "#22c55e",
+		successMuted: "#16a34a"
+	},
+	methods: {
+		GET: "#3b82f6",
+		POST: "#22c55e",
+		PUT: "#f59e0b",
+		PATCH: "#8b5cf6",
+		DELETE: "#ef4444",
+		HEAD: "#6b7280",
+		OPTIONS: "#6b7280"
+	},
+	status: {
+		"1xx": "#6b7280",
+		"2xx": "#22c55e",
+		"3xx": "#3b82f6",
+		"4xx": "#f59e0b",
+		"5xx": "#ef4444"
+	},
+	logLevels: {
+		trace: "#6b7280",
+		debug: "#6b7280",
+		info: "#3b82f6",
+		warn: "#f59e0b",
+		error: "#ef4444",
+		fatal: "#dc2626"
+	},
+	spacing: {
+		xs: "0.25rem",
+		sm: "0.5rem",
+		md: "1rem",
+		lg: "1.5rem",
+		xl: "2rem",
+		"2xl": "3rem"
+	},
+	radius: {
+		sm: "0.25rem",
+		md: "0.375rem",
+		lg: "0.5rem",
+		xl: "0.75rem",
+		full: "9999px"
+	},
+	fontSize: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		base: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem",
+		"2xl": "1.5rem"
+	},
+	transition: {
+		fast: "150ms ease",
+		normal: "200ms ease",
+		slow: "300ms ease"
+	}
+};
+/**
+* Get the color for an HTTP method.
+*/
+function getMethodColor(method) {
+	const upperMethod = method.toUpperCase();
+	return theme.methods[upperMethod] ?? theme.colors.textMuted;
+}
+/**
+* Get the color for an HTTP status code.
+*/
+function getStatusColor(status) {
+	if (status >= 100 && status < 200) return theme.status["1xx"];
+	if (status >= 200 && status < 300) return theme.status["2xx"];
+	if (status >= 300 && status < 400) return theme.status["3xx"];
+	if (status >= 400 && status < 500) return theme.status["4xx"];
+	if (status >= 500) return theme.status["5xx"];
+	return theme.colors.textMuted;
+}
+/**
+* Get the color for a log level.
+*/
+function getLogLevelColor(level) {
+	const lowerLevel = level.toLowerCase();
+	return theme.logLevels[lowerLevel] ?? theme.colors.textMuted;
+}
+
+//#endregion
+Object.defineProperty(exports, 'getLogLevelColor', {
+  enumerable: true,
+  get: function () {
+    return getLogLevelColor;
+  }
+});
+Object.defineProperty(exports, 'getMethodColor', {
+  enumerable: true,
+  get: function () {
+    return getMethodColor;
+  }
+});
+Object.defineProperty(exports, 'getStatusColor', {
+  enumerable: true,
+  get: function () {
+    return getStatusColor;
+  }
+});
+Object.defineProperty(exports, 'theme', {
+  enumerable: true,
+  get: function () {
+    return theme;
+  }
+});
+//# sourceMappingURL=theme-BRGSS8qx.cjs.map

package/dist/theme-BRGSS8qx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-BRGSS8qx.cjs","names":["method: string","status: number","level: string"],"sources":["../src/styles/theme.ts"],"sourcesContent":["/**\n * Theme constants for the UI component library.\n * Inspired by Supabase's dark theme design.\n */\nexport const theme = {\n\tcolors: {\n\t\t// Background colors\n\t\tbackground: '#171717',\n\t\tsurface: '#1c1c1c',\n\t\tsurfaceHover: '#262626',\n\t\tsurfaceActive: '#2a2a2a',\n\n\t\t// Border colors\n\t\tborder: '#2e2e2e',\n\t\tborderHover: '#3e3e3e',\n\t\tborderFocus: '#3ecf8e',\n\n\t\t// Text colors\n\t\ttext: '#fafafa',\n\t\ttextMuted: '#a1a1aa',\n\t\ttextSubtle: '#71717a',\n\n\t\t// Accent colors\n\t\taccent: '#3ecf8e',\n\t\taccentHover: '#4ade80',\n\t\taccentMuted: '#22c55e',\n\n\t\t// Semantic colors\n\t\terror: '#ef4444',\n\t\terrorMuted: '#dc2626',\n\t\twarning: '#f59e0b',\n\t\twarningMuted: '#d97706',\n\t\tinfo: '#3b82f6',\n\t\tinfoMuted: '#2563eb',\n\t\tsuccess: '#22c55e',\n\t\tsuccessMuted: '#16a34a',\n\t},\n\n\t// HTTP method colors\n\tmethods: {\n\t\tGET: '#3b82f6',\n\t\tPOST: '#22c55e',\n\t\tPUT: '#f59e0b',\n\t\tPATCH: '#8b5cf6',\n\t\tDELETE: '#ef4444',\n\t\tHEAD: '#6b7280',\n\t\tOPTIONS: '#6b7280',\n\t} as const,\n\n\t// HTTP status code colors\n\tstatus: {\n\t\t'1xx': '#6b7280',\n\t\t'2xx': '#22c55e',\n\t\t'3xx': '#3b82f6',\n\t\t'4xx': '#f59e0b',\n\t\t'5xx': '#ef4444',\n\t} as const,\n\n\t// Log level colors\n\tlogLevels: {\n\t\ttrace: '#6b7280',\n\t\tdebug: '#6b7280',\n\t\tinfo: '#3b82f6',\n\t\twarn: '#f59e0b',\n\t\terror: '#ef4444',\n\t\tfatal: '#dc2626',\n\t} as const,\n\n\t// Spacing scale\n\tspacing: {\n\t\txs: '0.25rem',\n\t\tsm: '0.5rem',\n\t\tmd: '1rem',\n\t\tlg: '1.5rem',\n\t\txl: '2rem',\n\t\t'2xl': '3rem',\n\t} as const,\n\n\t// Border radius\n\tradius: {\n\t\tsm: '0.25rem',\n\t\tmd: '0.375rem',\n\t\tlg: '0.5rem',\n\t\txl: '0.75rem',\n\t\tfull: '9999px',\n\t} as const,\n\n\t// Font sizes\n\tfontSize: {\n\t\txs: '0.75rem',\n\t\tsm: '0.875rem',\n\t\tbase: '1rem',\n\t\tlg: '1.125rem',\n\t\txl: '1.25rem',\n\t\t'2xl': '1.5rem',\n\t} as const,\n\n\t// Transitions\n\ttransition: {\n\t\tfast: '150ms ease',\n\t\tnormal: '200ms ease',\n\t\tslow: '300ms ease',\n\t} as const,\n} as const;\n\nexport type Theme = typeof theme;\nexport type ThemeColors = typeof theme.colors;\nexport type HttpMethod = keyof typeof theme.methods;\nexport type StatusRange = keyof typeof theme.status;\nexport type LogLevel = keyof typeof theme.logLevels;\n\n/**\n * Get the color for an HTTP method.\n */\nexport function getMethodColor(method: string): string {\n\tconst upperMethod = method.toUpperCase() as HttpMethod;\n\treturn theme.methods[upperMethod] ?? theme.colors.textMuted;\n}\n\n/**\n * Get the color for an HTTP status code.\n */\nexport function getStatusColor(status: number): string {\n\tif (status >= 100 && status < 200) return theme.status['1xx'];\n\tif (status >= 200 && status < 300) return theme.status['2xx'];\n\tif (status >= 300 && status < 400) return theme.status['3xx'];\n\tif (status >= 400 && status < 500) return theme.status['4xx'];\n\tif (status >= 500) return theme.status['5xx'];\n\treturn theme.colors.textMuted;\n}\n\n/**\n * Get the color for a log level.\n */\nexport function getLogLevelColor(level: string): string {\n\tconst lowerLevel = level.toLowerCase() as LogLevel;\n\treturn theme.logLevels[lowerLevel] ?? theme.colors.textMuted;\n}\n"],"mappings":";;;;;;AAIA,MAAa,QAAQ;CACpB,QAAQ;EAEP,YAAY;EACZ,SAAS;EACT,cAAc;EACd,eAAe;EAGf,QAAQ;EACR,aAAa;EACb,aAAa;EAGb,MAAM;EACN,WAAW;EACX,YAAY;EAGZ,QAAQ;EACR,aAAa;EACb,aAAa;EAGb,OAAO;EACP,YAAY;EACZ,SAAS;EACT,cAAc;EACd,MAAM;EACN,WAAW;EACX,SAAS;EACT,cAAc;CACd;CAGD,SAAS;EACR,KAAK;EACL,MAAM;EACN,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,SAAS;CACT;CAGD,QAAQ;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACP;CAGD,WAAW;EACV,OAAO;EACP,OAAO;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACP,OAAO;CACP;CAGD,SAAS;EACR,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACP;CAGD,QAAQ;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACN;CAGD,UAAU;EACT,IAAI;EACJ,IAAI;EACJ,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,OAAO;CACP;CAGD,YAAY;EACX,MAAM;EACN,QAAQ;EACR,MAAM;CACN;AACD;;;;AAWD,SAAgB,eAAeA,QAAwB;CACtD,MAAM,cAAc,OAAO,aAAa;AACxC,QAAO,MAAM,QAAQ,gBAAgB,MAAM,OAAO;AAClD;;;;AAKD,SAAgB,eAAeC,QAAwB;AACtD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,IAAK,QAAO,MAAM,OAAO;AACvC,QAAO,MAAM,OAAO;AACpB;;;;AAKD,SAAgB,iBAAiBC,OAAuB;CACvD,MAAM,aAAa,MAAM,aAAa;AACtC,QAAO,MAAM,UAAU,eAAe,MAAM,OAAO;AACnD"}

package/dist/theme-DAiFBbyM.mjs

@@ -0,0 +1,111 @@
+//#region src/styles/theme.ts
+/**
+* Theme constants for the UI component library.
+* Inspired by Supabase's dark theme design.
+*/
+const theme = {
+	colors: {
+		background: "#171717",
+		surface: "#1c1c1c",
+		surfaceHover: "#262626",
+		surfaceActive: "#2a2a2a",
+		border: "#2e2e2e",
+		borderHover: "#3e3e3e",
+		borderFocus: "#3ecf8e",
+		text: "#fafafa",
+		textMuted: "#a1a1aa",
+		textSubtle: "#71717a",
+		accent: "#3ecf8e",
+		accentHover: "#4ade80",
+		accentMuted: "#22c55e",
+		error: "#ef4444",
+		errorMuted: "#dc2626",
+		warning: "#f59e0b",
+		warningMuted: "#d97706",
+		info: "#3b82f6",
+		infoMuted: "#2563eb",
+		success: "#22c55e",
+		successMuted: "#16a34a"
+	},
+	methods: {
+		GET: "#3b82f6",
+		POST: "#22c55e",
+		PUT: "#f59e0b",
+		PATCH: "#8b5cf6",
+		DELETE: "#ef4444",
+		HEAD: "#6b7280",
+		OPTIONS: "#6b7280"
+	},
+	status: {
+		"1xx": "#6b7280",
+		"2xx": "#22c55e",
+		"3xx": "#3b82f6",
+		"4xx": "#f59e0b",
+		"5xx": "#ef4444"
+	},
+	logLevels: {
+		trace: "#6b7280",
+		debug: "#6b7280",
+		info: "#3b82f6",
+		warn: "#f59e0b",
+		error: "#ef4444",
+		fatal: "#dc2626"
+	},
+	spacing: {
+		xs: "0.25rem",
+		sm: "0.5rem",
+		md: "1rem",
+		lg: "1.5rem",
+		xl: "2rem",
+		"2xl": "3rem"
+	},
+	radius: {
+		sm: "0.25rem",
+		md: "0.375rem",
+		lg: "0.5rem",
+		xl: "0.75rem",
+		full: "9999px"
+	},
+	fontSize: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		base: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem",
+		"2xl": "1.5rem"
+	},
+	transition: {
+		fast: "150ms ease",
+		normal: "200ms ease",
+		slow: "300ms ease"
+	}
+};
+/**
+* Get the color for an HTTP method.
+*/
+function getMethodColor(method) {
+	const upperMethod = method.toUpperCase();
+	return theme.methods[upperMethod] ?? theme.colors.textMuted;
+}
+/**
+* Get the color for an HTTP status code.
+*/
+function getStatusColor(status) {
+	if (status >= 100 && status < 200) return theme.status["1xx"];
+	if (status >= 200 && status < 300) return theme.status["2xx"];
+	if (status >= 300 && status < 400) return theme.status["3xx"];
+	if (status >= 400 && status < 500) return theme.status["4xx"];
+	if (status >= 500) return theme.status["5xx"];
+	return theme.colors.textMuted;
+}
+/**
+* Get the color for a log level.
+*/
+function getLogLevelColor(level) {
+	const lowerLevel = level.toLowerCase();
+	return theme.logLevels[lowerLevel] ?? theme.colors.textMuted;
+}
+
+//#endregion
+export { getLogLevelColor, getMethodColor, getStatusColor, theme };
+//# sourceMappingURL=theme-DAiFBbyM.mjs.map

package/dist/theme-DAiFBbyM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-DAiFBbyM.mjs","names":["method: string","status: number","level: string"],"sources":["../src/styles/theme.ts"],"sourcesContent":["/**\n * Theme constants for the UI component library.\n * Inspired by Supabase's dark theme design.\n */\nexport const theme = {\n\tcolors: {\n\t\t// Background colors\n\t\tbackground: '#171717',\n\t\tsurface: '#1c1c1c',\n\t\tsurfaceHover: '#262626',\n\t\tsurfaceActive: '#2a2a2a',\n\n\t\t// Border colors\n\t\tborder: '#2e2e2e',\n\t\tborderHover: '#3e3e3e',\n\t\tborderFocus: '#3ecf8e',\n\n\t\t// Text colors\n\t\ttext: '#fafafa',\n\t\ttextMuted: '#a1a1aa',\n\t\ttextSubtle: '#71717a',\n\n\t\t// Accent colors\n\t\taccent: '#3ecf8e',\n\t\taccentHover: '#4ade80',\n\t\taccentMuted: '#22c55e',\n\n\t\t// Semantic colors\n\t\terror: '#ef4444',\n\t\terrorMuted: '#dc2626',\n\t\twarning: '#f59e0b',\n\t\twarningMuted: '#d97706',\n\t\tinfo: '#3b82f6',\n\t\tinfoMuted: '#2563eb',\n\t\tsuccess: '#22c55e',\n\t\tsuccessMuted: '#16a34a',\n\t},\n\n\t// HTTP method colors\n\tmethods: {\n\t\tGET: '#3b82f6',\n\t\tPOST: '#22c55e',\n\t\tPUT: '#f59e0b',\n\t\tPATCH: '#8b5cf6',\n\t\tDELETE: '#ef4444',\n\t\tHEAD: '#6b7280',\n\t\tOPTIONS: '#6b7280',\n\t} as const,\n\n\t// HTTP status code colors\n\tstatus: {\n\t\t'1xx': '#6b7280',\n\t\t'2xx': '#22c55e',\n\t\t'3xx': '#3b82f6',\n\t\t'4xx': '#f59e0b',\n\t\t'5xx': '#ef4444',\n\t} as const,\n\n\t// Log level colors\n\tlogLevels: {\n\t\ttrace: '#6b7280',\n\t\tdebug: '#6b7280',\n\t\tinfo: '#3b82f6',\n\t\twarn: '#f59e0b',\n\t\terror: '#ef4444',\n\t\tfatal: '#dc2626',\n\t} as const,\n\n\t// Spacing scale\n\tspacing: {\n\t\txs: '0.25rem',\n\t\tsm: '0.5rem',\n\t\tmd: '1rem',\n\t\tlg: '1.5rem',\n\t\txl: '2rem',\n\t\t'2xl': '3rem',\n\t} as const,\n\n\t// Border radius\n\tradius: {\n\t\tsm: '0.25rem',\n\t\tmd: '0.375rem',\n\t\tlg: '0.5rem',\n\t\txl: '0.75rem',\n\t\tfull: '9999px',\n\t} as const,\n\n\t// Font sizes\n\tfontSize: {\n\t\txs: '0.75rem',\n\t\tsm: '0.875rem',\n\t\tbase: '1rem',\n\t\tlg: '1.125rem',\n\t\txl: '1.25rem',\n\t\t'2xl': '1.5rem',\n\t} as const,\n\n\t// Transitions\n\ttransition: {\n\t\tfast: '150ms ease',\n\t\tnormal: '200ms ease',\n\t\tslow: '300ms ease',\n\t} as const,\n} as const;\n\nexport type Theme = typeof theme;\nexport type ThemeColors = typeof theme.colors;\nexport type HttpMethod = keyof typeof theme.methods;\nexport type StatusRange = keyof typeof theme.status;\nexport type LogLevel = keyof typeof theme.logLevels;\n\n/**\n * Get the color for an HTTP method.\n */\nexport function getMethodColor(method: string): string {\n\tconst upperMethod = method.toUpperCase() as HttpMethod;\n\treturn theme.methods[upperMethod] ?? theme.colors.textMuted;\n}\n\n/**\n * Get the color for an HTTP status code.\n */\nexport function getStatusColor(status: number): string {\n\tif (status >= 100 && status < 200) return theme.status['1xx'];\n\tif (status >= 200 && status < 300) return theme.status['2xx'];\n\tif (status >= 300 && status < 400) return theme.status['3xx'];\n\tif (status >= 400 && status < 500) return theme.status['4xx'];\n\tif (status >= 500) return theme.status['5xx'];\n\treturn theme.colors.textMuted;\n}\n\n/**\n * Get the color for a log level.\n */\nexport function getLogLevelColor(level: string): string {\n\tconst lowerLevel = level.toLowerCase() as LogLevel;\n\treturn theme.logLevels[lowerLevel] ?? theme.colors.textMuted;\n}\n"],"mappings":";;;;;AAIA,MAAa,QAAQ;CACpB,QAAQ;EAEP,YAAY;EACZ,SAAS;EACT,cAAc;EACd,eAAe;EAGf,QAAQ;EACR,aAAa;EACb,aAAa;EAGb,MAAM;EACN,WAAW;EACX,YAAY;EAGZ,QAAQ;EACR,aAAa;EACb,aAAa;EAGb,OAAO;EACP,YAAY;EACZ,SAAS;EACT,cAAc;EACd,MAAM;EACN,WAAW;EACX,SAAS;EACT,cAAc;CACd;CAGD,SAAS;EACR,KAAK;EACL,MAAM;EACN,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,SAAS;CACT;CAGD,QAAQ;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACP;CAGD,WAAW;EACV,OAAO;EACP,OAAO;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACP,OAAO;CACP;CAGD,SAAS;EACR,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACP;CAGD,QAAQ;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACN;CAGD,UAAU;EACT,IAAI;EACJ,IAAI;EACJ,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,OAAO;CACP;CAGD,YAAY;EACX,MAAM;EACN,QAAQ;EACR,MAAM;CACN;AACD;;;;AAWD,SAAgB,eAAeA,QAAwB;CACtD,MAAM,cAAc,OAAO,aAAa;AACxC,QAAO,MAAM,QAAQ,gBAAgB,MAAM,OAAO;AAClD;;;;AAKD,SAAgB,eAAeC,QAAwB;AACtD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,OAAO,SAAS,IAAK,QAAO,MAAM,OAAO;AACvD,KAAI,UAAU,IAAK,QAAO,MAAM,OAAO;AACvC,QAAO,MAAM,OAAO;AACpB;;;;AAKD,SAAgB,iBAAiBC,OAAuB;CACvD,MAAM,aAAa,MAAM,aAAa;AACtC,QAAO,MAAM,UAAU,eAAe,MAAM,OAAO;AACnD"}

package/dist/theme-vpDwDfcR.d.mts

@@ -0,0 +1,103 @@
+//#region src/styles/theme.d.ts
+/**
+ * Theme constants for the UI component library.
+ * Inspired by Supabase's dark theme design.
+ */
+declare const theme: {
+  readonly colors: {
+    readonly background: "#171717";
+    readonly surface: "#1c1c1c";
+    readonly surfaceHover: "#262626";
+    readonly surfaceActive: "#2a2a2a";
+    readonly border: "#2e2e2e";
+    readonly borderHover: "#3e3e3e";
+    readonly borderFocus: "#3ecf8e";
+    readonly text: "#fafafa";
+    readonly textMuted: "#a1a1aa";
+    readonly textSubtle: "#71717a";
+    readonly accent: "#3ecf8e";
+    readonly accentHover: "#4ade80";
+    readonly accentMuted: "#22c55e";
+    readonly error: "#ef4444";
+    readonly errorMuted: "#dc2626";
+    readonly warning: "#f59e0b";
+    readonly warningMuted: "#d97706";
+    readonly info: "#3b82f6";
+    readonly infoMuted: "#2563eb";
+    readonly success: "#22c55e";
+    readonly successMuted: "#16a34a";
+  };
+  readonly methods: {
+    readonly GET: "#3b82f6";
+    readonly POST: "#22c55e";
+    readonly PUT: "#f59e0b";
+    readonly PATCH: "#8b5cf6";
+    readonly DELETE: "#ef4444";
+    readonly HEAD: "#6b7280";
+    readonly OPTIONS: "#6b7280";
+  };
+  readonly status: {
+    readonly '1xx': "#6b7280";
+    readonly '2xx': "#22c55e";
+    readonly '3xx': "#3b82f6";
+    readonly '4xx': "#f59e0b";
+    readonly '5xx': "#ef4444";
+  };
+  readonly logLevels: {
+    readonly trace: "#6b7280";
+    readonly debug: "#6b7280";
+    readonly info: "#3b82f6";
+    readonly warn: "#f59e0b";
+    readonly error: "#ef4444";
+    readonly fatal: "#dc2626";
+  };
+  readonly spacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+  };
+  readonly radius: {
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly full: "9999px";
+  };
+  readonly fontSize: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly base: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+    readonly '2xl': "1.5rem";
+  };
+  readonly transition: {
+    readonly fast: "150ms ease";
+    readonly normal: "200ms ease";
+    readonly slow: "300ms ease";
+  };
+};
+type Theme = typeof theme;
+type ThemeColors = typeof theme.colors;
+type HttpMethod = keyof typeof theme.methods;
+type StatusRange = keyof typeof theme.status;
+type LogLevel = keyof typeof theme.logLevels;
+/**
+ * Get the color for an HTTP method.
+ */
+declare function getMethodColor(method: string): string;
+/**
+ * Get the color for an HTTP status code.
+ */
+declare function getStatusColor(status: number): string;
+/**
+ * Get the color for a log level.
+ */
+declare function getLogLevelColor(level: string): string;
+//# sourceMappingURL=theme.d.ts.map
+//#endregion
+export { HttpMethod, LogLevel, StatusRange, Theme, ThemeColors, getLogLevelColor, getMethodColor, getStatusColor, theme };
+//# sourceMappingURL=theme-vpDwDfcR.d.mts.map

package/dist/theme-vpDwDfcR.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-vpDwDfcR.d.mts","names":[],"sources":["../src/styles/theme.ts"],"sourcesContent":[],"mappings":";;AAIA;AAqGA;AACA;AACY,cAvGC,KAuGS,EAAgB;EAC1B,SAAA,MAAW,EAAA;IACX,SAAQ,UAAgB,EAAA,SAAM;IAK1B,SAAA,OAAc,EAAA,SAAA;IAQd,SAAA,YAAc,EAAA,SAAA;IAYd,SAAA,aAAgB,EAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BpB,KAAA,UAAe;KACf,WAAA,UAAqB,KAAA,CAAM;KAC3B,UAAA,gBAA0B,KAAA,CAAM;KAChC,WAAA,gBAA2B,KAAA,CAAM;KACjC,QAAA,gBAAwB,KAAA,CAAM;;;;iBAK1B,cAAA;;;;iBAQA,cAAA;;;;iBAYA,gBAAA"}

package/package.json

@@ -1,10 +1,50 @@
 {
   "name": "@geekmidas/ui",
-  "version": "0.0.1",
-  "description": "Shared UI build utilities",
+  "version": "0.2.0",
+  "description": "Shared UI component library built on shadcn/ui",
   "type": "module",
-  "bin": {
-    "embed-ui": "./scripts/embed-ui.ts"
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components": {
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/components/ui/index.js",
+      "require": "./dist/components/ui/index.cjs"
+    },
+    "./layout": {
+      "types": "./dist/components/layout/index.d.ts",
+      "import": "./dist/components/layout/index.js",
+      "require": "./dist/components/layout/index.cjs"
+    },
+    "./data-display": {
+      "types": "./dist/components/data-display/index.d.ts",
+      "import": "./dist/components/data-display/index.js",
+      "require": "./dist/components/data-display/index.cjs"
+    },
+    "./feedback": {
+      "types": "./dist/components/feedback/index.d.ts",
+      "import": "./dist/components/feedback/index.js",
+      "require": "./dist/components/feedback/index.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.cjs"
+    },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js",
+      "require": "./dist/lib/utils.cjs"
+    },
+    "./styles": "./src/styles/globals.css",
+    "./theme": {
+      "types": "./dist/styles/theme.d.ts",
+      "import": "./dist/styles/theme.js",
+      "require": "./dist/styles/theme.cjs"
+    }
   },
   "repository": {
     "type": "git",
@@ -14,7 +54,58 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "~1.3.3",
+    "@radix-ui/react-dialog": "~1.1.15",
+    "@radix-ui/react-dropdown-menu": "~2.1.16",
+    "@radix-ui/react-label": "~2.1.8",
+    "@radix-ui/react-popover": "~1.1.15",
+    "@radix-ui/react-scroll-area": "~1.2.10",
+    "@radix-ui/react-select": "~2.2.6",
+    "@radix-ui/react-separator": "~1.1.8",
+    "@radix-ui/react-slot": "~1.2.4",
+    "@radix-ui/react-switch": "~1.2.6",
+    "@radix-ui/react-tabs": "~1.1.13",
+    "@radix-ui/react-tooltip": "~1.2.8",
+    "class-variance-authority": "~0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "~4.1.0",
+    "lucide-react": "~0.562.0",
+    "prism-react-renderer": "~2.4.1",
+    "recharts": "~3.6.0",
+    "tailwind-merge": "~3.4.0"
+  },
   "devDependencies": {
-    "tsx": "~4.19.4"
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^4.0.0",
+    "tsdown": "^0.9.1",
+    "tsx": "~4.19.4",
+    "typescript": "^5.8.2",
+    "vite": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "ts:check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build -o dist/storybook"
   }
 }

package/src/styles/globals.css

@@ -0,0 +1,175 @@
+@import "tailwindcss";
+
+@theme {
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 160 84% 39%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 160 84% 39%;
+		--radius: 0.5rem;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		font-feature-settings:
+			"rlig" 1,
+			"calt" 1;
+	}
+}
+
+/* Force dark mode for dev tools */
+:root {
+	color-scheme: dark;
+}
+
+html {
+	/* Apply dark theme variables directly */
+	--background: 0 0% 9%;
+	--foreground: 0 0% 98%;
+	--card: 0 0% 11%;
+	--card-foreground: 0 0% 98%;
+	--popover: 0 0% 11%;
+	--popover-foreground: 0 0% 98%;
+	--primary: 160 84% 52%;
+	--primary-foreground: 0 0% 9%;
+	--secondary: 0 0% 15%;
+	--secondary-foreground: 0 0% 98%;
+	--muted: 0 0% 15%;
+	--muted-foreground: 0 0% 64%;
+	--accent: 0 0% 15%;
+	--accent-foreground: 0 0% 98%;
+	--destructive: 0 62.8% 50.6%;
+	--destructive-foreground: 0 0% 98%;
+	--border: 0 0% 18%;
+	--input: 0 0% 18%;
+	--ring: 160 84% 52%;
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: hsl(var(--background));
+}
+
+::-webkit-scrollbar-thumb {
+	background: hsl(var(--border));
+	border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Selection styling */
+::selection {
+	background-color: hsl(var(--primary));
+	color: hsl(var(--primary-foreground));
+}
+
+/* Code font */
+code,
+pre {
+	font-family:
+		ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+		monospace;
+}
+
+/* HTTP method colors for badges */
+.method-get {
+	--method-color: 217 91% 60%;
+}
+.method-post {
+	--method-color: 142 71% 45%;
+}
+.method-put {
+	--method-color: 38 92% 50%;
+}
+.method-patch {
+	--method-color: 263 70% 50%;
+}
+.method-delete {
+	--method-color: 0 84% 60%;
+}
+
+/* Status code colors */
+.status-2xx {
+	--status-color: 142 71% 45%;
+}
+.status-3xx {
+	--status-color: 217 91% 60%;
+}
+.status-4xx {
+	--status-color: 38 92% 50%;
+}
+.status-5xx {
+	--status-color: 0 84% 60%;
+}
+
+/* Log level colors */
+.log-debug {
+	--log-color: 0 0% 45%;
+}
+.log-info {
+	--log-color: 217 91% 60%;
+}
+.log-warn {
+	--log-color: 38 92% 50%;
+}
+.log-error {
+	--log-color: 0 84% 60%;
+}