@sidekick-coder/zenith-kit 0.3.6 → 0.3.8

package/dist/components/src/shared/services/ValidatorService.d.ts

@@ -0,0 +1,25 @@
+import * as v from 'valibot';
+import * as extras from '../validators/index.ts';
+export type Valibot = typeof v & {
+    extras: typeof extras;
+};
+export type ValibotSchema = v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
+export type ValibotObjectSchema = v.ObjectSchema<any, any>;
+export type ValibotSchemaAsync = v.BaseSchemaAsync<unknown, unknown, v.BaseIssue<unknown>>;
+export interface ValidatorCallback<T extends ValibotSchema> {
+    (_v: Valibot): T;
+}
+export type ValidatorCallbackAsync<T extends ValibotSchemaAsync> = {
+    (_v: Valibot): T;
+};
+export type ValidatorResult<T extends v.BaseSchema<any, any, any>> = v.InferOutput<T>;
+export type ValidatePayload<T extends ValibotSchema = ValibotSchema> = ValidatorCallback<T> | T;
+export type ValidateResult<T extends ValidatePayload> = T extends ValibotSchema ? v.InferOutput<T> : T extends ValidatorCallback<infer U> ? v.InferOutput<U> : unknown;
+export default class ValidatorService {
+    static __container_entry_key: string;
+    v: Valibot;
+    create<T extends ValibotSchema>(cb: ValidatorCallback<T>): T;
+    validate<T extends ValibotSchema>(payload: any, cb: ValidatePayload<T>): v.InferOutput<T>;
+    validateAsync<T extends ValibotSchemaAsync>(payload: any, cb: ValidatorCallbackAsync<T> | T): Promise<v.InferOutput<T>>;
+    isValid<T extends ValibotSchema>(payload: any, cb: ValidatePayload<T>): boolean;
+}

package/dist/components/src/shared/utils/compose.d.ts

@@ -0,0 +1,39 @@
+import { UnionToIntersection } from './typing.ts';
+export type AnyClass = new (...args: any[]) => any;
+export type Constructor<T = {}> = new (...args: any[]) => T;
+export type Mixin<T> = (base: Constructor) => Constructor<T>;
+/**
+ * Composes multiple mixins into a single class that can be extended.
+ * Allows for multiple inheritance-like behavior by applying mixins sequentially.
+ *
+ * @param mixins - Array of mixin functions to compose
+ * @returns A class constructor that includes all mixin functionality
+ *
+ * @example
+ * ```typescript
+ * class User extends compose(Timestamp, SoftDelete) {
+ *   constructor(public name: string) {
+ *     super()
+ *   }
+ * }
+ * ```
+ */
+export declare function compose<M extends Array<(base: Constructor<any>) => Constructor<any>>>(...mixins: M): UnionToIntersection<ReturnType<M[number]>>;
+/**
+ * Alternative compose function that starts with a base class
+ *
+ * @param baseClass - The base class to start with
+ * @param mixins - Array of mixin functions to apply
+ * @returns A class constructor that extends the base class with all mixin functionality
+ *
+ * @example
+ * ```typescript
+ * class User extends composeWith(BaseEntity, Timestamp, SoftDelete) {
+ *   constructor(public name: string) {
+ *     super()
+ *   }
+ * }
+ * ```
+ */
+export declare function composeWith<TBase extends Constructor, M extends Array<(base: Constructor) => Constructor<any>>>(baseClass: TBase, ...mixins: M): TBase & UnionToIntersection<ReturnType<M[number]>>;
+export declare function mixin<TBase extends Constructor>(Source: TBase): <TTarget extends Constructor>(Target: TTarget) => TTarget & TBase;

package/dist/components/src/shared/utils/createId.d.ts

@@ -0,0 +1 @@
+export declare function createId(prefix?: string): string;

package/dist/components/src/shared/utils/flatten.d.ts

@@ -0,0 +1,2 @@
+export declare function flatten(obj: any, prefix?: string, res?: any): Record<string, any>;
+export declare function unflatten(obj: any): Record<string, any>;

package/dist/components/src/shared/utils/flatten.unit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/src/shared/utils/formatBytes.d.ts

@@ -0,0 +1 @@
+export declare function formatBytes(bytes: number, decimals?: number): string;

package/dist/components/src/shared/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './compose.ts';
+export * from './formatBytes.ts';
+export * from './flatten.ts';
+export * from './tryCatch.ts';
+export * from './typing.ts';
+export * from './createId.ts';

package/dist/components/src/shared/utils/matchPaths.d.ts

@@ -0,0 +1 @@
+export declare function matchPath(pattern: string, path: string): boolean;

package/dist/components/src/shared/utils/parseRouteUrl.d.ts

@@ -0,0 +1,2 @@
+export declare function parseUrlParams(routePath: string, requestPath: string): Record<string, string>;
+export declare function parseUrlQuery(requestPath: string): Record<string, any>;

package/dist/components/src/shared/utils/safeJson.d.ts

@@ -0,0 +1,2 @@
+export declare function safeJsonParse<T>(jsonString: string): T | null;
+export declare function safeJsonStringify<T>(value: T): string | null;

package/dist/components/src/shared/utils/tryCatch.d.ts

@@ -0,0 +1,13 @@
+interface Tryer {
+    (...args: any[]): any;
+}
+interface TryerAsync {
+    (...args: any[]): Promise<any> | any;
+}
+type TryCatchResult<T extends Tryer> = [null, ReturnType<T>] | [Error, null];
+type TryCatchAsyncResult<T extends TryerAsync> = [null, Awaited<ReturnType<T>>] | [Error, null];
+export declare function tryCatch<T extends TryerAsync>(tryer: T): Promise<TryCatchAsyncResult<T>>;
+export declare namespace tryCatch {
+    var sync: <T extends Tryer>(tryer: T) => TryCatchResult<T>;
+}
+export {};

package/dist/components/src/shared/utils/typing.d.ts

@@ -0,0 +1,5 @@
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export type PublicData<T> = {
+    [K in keyof T as T[K] extends Function ? never : K]: T[K];
+};

package/dist/components/src/shared/validators/index.d.ts

@@ -0,0 +1,3 @@
+export * from './urlValidator.ts';
+export * from './keyValueValidator.ts';
+export * from './paginationValidator.ts';

package/dist/components/src/shared/validators/keyValueValidator.d.ts

@@ -0,0 +1,2 @@
+import * as v from 'valibot';
+export declare const keyValue: () => v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.TransformAction<string, Record<string, any>>]>;

package/dist/components/src/shared/validators/paginationValidator.d.ts

@@ -0,0 +1,25 @@
+import * as v from 'valibot';
+export interface PaginationParams {
+    maxLimit?: number;
+    orderFields?: string[];
+}
+export declare const base: (options?: PaginationParams) => v.ObjectSchema<{
+    readonly page: v.OptionalSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>, 1>;
+    readonly limit: v.OptionalSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>, number>;
+    readonly orderBy: v.NullishSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.PicklistSchema<string[], undefined>, undefined>]> | v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.StringSchema<undefined>, undefined>]>, readonly []>;
+    readonly orderDirection: v.NullishSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.UnionSchema<[v.LiteralSchema<"asc", undefined>, v.LiteralSchema<"desc", undefined>], undefined>, undefined>]>, readonly []>;
+}, undefined>;
+export declare function pagination(options?: PaginationParams): v.ObjectSchema<{
+    readonly page: v.OptionalSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>, 1>;
+    readonly limit: v.OptionalSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>, number>;
+    readonly orderBy: v.NullishSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.PicklistSchema<string[], undefined>, undefined>]> | v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.StringSchema<undefined>, undefined>]>, readonly []>;
+    readonly orderDirection: v.NullishSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.UnionSchema<[v.LiteralSchema<"asc", undefined>, v.LiteralSchema<"desc", undefined>], undefined>, undefined>]>, readonly []>;
+}, undefined>;
+export declare namespace pagination {
+    var base: (options?: PaginationParams) => v.ObjectSchema<{
+        readonly page: v.OptionalSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>, 1>;
+        readonly limit: v.OptionalSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>, number>;
+        readonly orderBy: v.NullishSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.PicklistSchema<string[], undefined>, undefined>]> | v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.StringSchema<undefined>, undefined>]>, readonly []>;
+        readonly orderDirection: v.NullishSchema<v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.UnionSchema<[v.LiteralSchema<"asc", undefined>, v.LiteralSchema<"desc", undefined>], undefined>, undefined>]>, readonly []>;
+    }, undefined>;
+}

package/dist/components/src/shared/validators/urlValidator.d.ts

@@ -0,0 +1,36 @@
+import * as v from 'valibot';
+export declare const number: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>;
+export declare const boolean: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.BooleanSchema<undefined>], undefined>, v.TransformAction<string | boolean, boolean>]>;
+export declare const date: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.DateSchema<undefined>], undefined>, v.TransformAction<string | Date, Date>, v.TransformAction<Date, string>]>;
+export declare const datetime: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.DateSchema<undefined>], undefined>, v.TransformAction<string | Date, string | null>]>;
+export declare const array: <T extends v.BaseSchema<any, any, any>>(schema?: T) => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<T, undefined>]>;
+export declare const arrayNumber: () => v.SchemaWithPipe<readonly [v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.BaseSchema<any, any, any>, undefined>]>, v.TransformAction<any[], number[]>]>;
+export declare const object: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.RecordSchema<v.StringSchema<undefined>, v.AnySchema, undefined>], undefined>, v.TransformAction<string | {
+    [x: string]: any;
+}, {
+    [x: string]: any;
+}>, v.TransformAction<{
+    [x: string]: any;
+}, Record<string, any>>]>;
+export declare function url(): v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.RecordSchema<v.StringSchema<undefined>, v.AnySchema, undefined>], undefined>, v.TransformAction<string | {
+    [x: string]: any;
+}, {
+    [x: string]: any;
+}>, v.TransformAction<{
+    [x: string]: any;
+}, Record<string, any>>]>;
+export declare namespace url {
+    var number: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.NumberSchema<undefined>], undefined>, v.TransformAction<any, number>, v.IntegerAction<number, undefined>]>;
+    var boolean: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.BooleanSchema<undefined>], undefined>, v.TransformAction<string | boolean, boolean>]>;
+    var date: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.DateSchema<undefined>], undefined>, v.TransformAction<string | Date, Date>, v.TransformAction<Date, string>]>;
+    var datetime: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.DateSchema<undefined>], undefined>, v.TransformAction<string | Date, string | null>]>;
+    var array: <T extends v.BaseSchema<any, any, any>>(schema?: T) => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<T, undefined>]>;
+    var arrayNumber: () => v.SchemaWithPipe<readonly [v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.ArraySchema<v.StringSchema<undefined>, undefined>], undefined>, v.TransformAction<string | string[], string[]>, v.ArraySchema<v.BaseSchema<any, any, any>, undefined>]>, v.TransformAction<any[], number[]>]>;
+    var object: () => v.SchemaWithPipe<readonly [v.UnionSchema<[v.StringSchema<undefined>, v.RecordSchema<v.StringSchema<undefined>, v.AnySchema, undefined>], undefined>, v.TransformAction<string | {
+        [x: string]: any;
+    }, {
+        [x: string]: any;
+    }>, v.TransformAction<{
+        [x: string]: any;
+    }, Record<string, any>>]>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sidekick-coder/zenith-kit",
-    "version": "0.3.6",
+    "version": "0.3.8",
     "license": "MIT",
     "description": "Package to use with zenith framework",
     "author": "Henrique Oliveira <henriqueoliwork@gmail.com>",
@@ -103,7 +103,6 @@
         "@inquirer/prompts": "^8.4.3",
         "@rollup/pluginutils": "^5.3.0",
         "@tailwindcss/vite": "^4.2.4",
-        "@tanstack/vue-table": "^9.1.2",
         "@types/express": "^5.0.6",
         "@types/js-yaml": "^4.0.9",
         "@types/lodash-es": "^4.17.12",

package/src/build/vite.ts

@@ -0,0 +1,122 @@
+import { createFilter } from '@rollup/pluginutils'
+import MagicString from 'magic-string'
+import * as acorn from 'acorn'
+import type { Plugin } from 'vite'
+
+
+export interface Options {
+    imports?: string[]
+    include?: string | string[]
+    exclude?: string | string[]
+}
+
+export function importReplacer(options: Options): Plugin {
+    const include = options.include || '**/*.{js,ts,vue}'
+    const exclude = options.exclude || 'node_modules/**'
+    const imports = options.imports || []
+
+    const filter = createFilter(include, exclude)
+
+    return {
+        name: 'zenith',
+        enforce: 'post',
+        transform(code: string, id: any) {
+            if (!filter(id)) return null
+            
+            if (!code.includes('import')) return null
+
+            const s = new MagicString(code)
+            let hasChanges = false
+            
+            const ast = acorn.parse(code, {
+                sourceType: 'module',
+                ecmaVersion: 2022
+            }) as any
+
+            const modulesFromList = imports
+
+            function shouldReplaceImport(importSource: string): boolean {
+                const isExternalModule = modulesFromList.includes(importSource)
+                const isExternalModuleSubpath = modulesFromList.some(baseModule => 
+                    importSource.startsWith(baseModule + '/') && importSource !== baseModule
+                )
+
+                return isExternalModule || isExternalModuleSubpath
+            }
+
+            function walkNode(node: any) {
+                if (!node || typeof node !== 'object') return
+
+                if (node.type === 'ImportExpression' && node.source?.value) {
+                    const importSource = node.source.value
+                    
+                    if (shouldReplaceImport(importSource)) {
+                        const replacement = `globalThis.importAsync("${importSource}")`
+                        s.overwrite(node.start, node.end, replacement)
+                        hasChanges = true
+                    }
+                }
+
+                for (const key in node) {
+                    if (key === 'start' || key === 'end' || key === 'type') continue
+                    const child = node[key]
+                    if (Array.isArray(child)) {
+                        child.forEach(walkNode)
+                    } else {
+                        walkNode(child)
+                    }
+                }
+            }
+
+            walkNode(ast)
+
+            const importNodes = ast.body.filter((node: any) => node.type === 'ImportDeclaration').reverse()
+
+            for (const node of importNodes) {
+                const importSource = node.source.value
+                    
+                if (shouldReplaceImport(importSource)) {
+                    if (node.specifiers.length === 0) {
+                        const replacement = `await globalThis.importAsync("${importSource}");`
+                        s.overwrite(node.start, node.end, replacement)
+                        hasChanges = true
+                    } else {
+                        const replacements = node.specifiers.map((spec: any) => {
+                            const localName = spec.local.name
+                            let replacement = ''
+
+                            if (spec.type === 'ImportSpecifier') {
+                                const importedName = spec.imported.name
+                                replacement = `const { ${importedName}: ${localName} } = await globalThis.importAsync("${importSource}");`
+                            } 
+                            
+                            if (spec.type === 'ImportDefaultSpecifier') {
+                                const moduleVarName = `__module__${localName}__`
+                                replacement = `const ${moduleVarName} = await globalThis.importAsync("${importSource}"); const ${localName} = ${moduleVarName}.default || ${moduleVarName};`
+                            } 
+                            
+                            if (spec.type === 'ImportNamespaceSpecifier') {
+                                replacement = `const ${localName} = await globalThis.importAsync("${importSource}");`
+                            }
+                            
+                            return replacement
+                        }).filter(Boolean)
+                            .join('\n')
+
+                        if (replacements) {
+                            s.overwrite(node.start, node.end, replacements)
+                            hasChanges = true
+                        }
+                    }
+                }
+            }
+
+            if (!hasChanges) return null
+
+            return {
+                code: s.toString(),
+                map: s.generateMap({ hires: true }),
+            }
+        },
+    }
+}

package/src/client/components/ClientOnly.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+defineOptions({
+    inheritAttrs: false
+})
+
+const show = ref(false)
+
+onMounted(() => {
+    show.value = true
+})
+</script>
+<template>
+    <slot v-if="show" />
+    <slot v-else name="fallback" />
+</template>

package/src/client/components/ColorPicker.vue

@@ -0,0 +1,229 @@
+<script lang="ts">
+export const defaultPresets = [
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#eab308',
+    '#84cc16',
+    '#22c55e',
+    '#10b981',
+    '#14b8a6',
+    '#06b6d4',
+    '#0ea5e9',
+    '#3b82f6',
+    '#6366f1',
+    '#8b5cf6',
+    '#a855f7',
+    '#d946ef',
+    '#ec4899',
+    '#f43f5e',
+    '#64748b',
+    '#000000',
+    '#ffffff'
+]
+</script>
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { Popover, PopoverContent, PopoverTrigger } from '#client/components/ui/popover'
+import { Input } from '#client/components/ui/input'
+import TextField from '#client/components/TextField.vue'
+import ColorWheel from '#client/components/ColorWheel.vue'
+import { useColor, useColorType } from '#client/composables/useColor'
+
+const props = defineProps({
+    class: {
+        type: String,
+        default: null
+    },
+    label: {
+        type: String,
+        default: null
+    },
+    variant: {
+        type: String,
+        default: null
+    },
+    placeholder: {
+        type: String,
+        default: null
+    },
+    readonly: {
+        type: Boolean,
+        default: true
+    },
+    presets: {
+        type: Array as () => string[],
+        default: () => defaultPresets
+    }
+})
+
+const open = ref(false)
+const color = defineModel({ type: String, })
+
+const format = useColorType(color)
+const { hex, rgb, rgba, hsl, oklch } = useColor(color)
+
+const colorInput = computed({
+    get() {
+        if (format.value === 'hex') {
+            return hex.value
+        }
+
+        if (format.value === 'rgba' && rgba.value) {
+            return `rgba(${rgba.value.r}, ${rgba.value.g}, ${rgba.value.b}, ${rgba.value.a})`
+        }
+
+        if (format.value === 'rgb' && rgb.value) {
+            return `rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b})`
+        }
+
+        if (format.value === 'hsl' && hsl.value) {
+            return `hsl(${hsl.value.h}, ${hsl.value.s}%, ${hsl.value.l}%)`
+        }
+
+        if (format.value === 'oklch' && oklch.value) {
+            return `oklch(${oklch.value.l} ${oklch.value.c} ${oklch.value.h})`
+        }
+
+        return ''
+    },
+    set(value: string | null) {
+        if (!value) {
+            return
+        }
+
+        color.value = value
+    }
+})
+
+watch(format, (newFormat) => {
+    if (newFormat === 'hex') {
+        colorInput.value = hex.value
+        return
+    }
+
+    if (newFormat === 'rgb' && rgb.value) {
+        colorInput.value = `rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b})`
+        return
+    }
+
+    if (newFormat === 'rgba' && rgba.value) {
+        colorInput.value = `rgba(${rgba.value.r}, ${rgba.value.g}, ${rgba.value.b}, ${rgba.value.a})`
+        return
+    }
+
+    if (newFormat === 'hsl' && hsl.value) {
+        colorInput.value = `hsl(${hsl.value.h}, ${hsl.value.s}%, ${hsl.value.l}%)`
+        return
+    }
+
+    if (newFormat === 'oklch' && oklch.value) {
+        colorInput.value = `oklch(${oklch.value.l} ${oklch.value.c} ${oklch.value.h})`
+        return
+    }
+})
+
+function updateRgbaAlpha(val: string | number) {
+    if (!rgba.value) return
+    const a = Math.max(0, Math.min(1, Number(val)))
+    color.value = `rgba(${rgba.value.r}, ${rgba.value.g}, ${rgba.value.b}, ${a})`
+}
+
+</script>
+
+<template>
+    <Popover v-model:open="open">
+        <PopoverTrigger as-child>
+            <slot
+                name="activator"
+                :color="color"
+                :open="open"
+            >
+                <TextField
+                    v-model="color"
+                    :label="label"
+                    :variant="variant"
+                    :placeholder="placeholder"
+                    :readonly="readonly"
+                    :class="props.class"
+                    class="cursor-pointer"
+                    input-class="text-left rounded-l-none"
+                >
+                    <template #prepend>
+                        <div
+                            class="size-10 border rounded-l shrink-0"
+                            :style="{ backgroundColor: color }"
+                        />
+                    </template>
+                </TextField>
+            </slot>
+        </PopoverTrigger>
+
+        <PopoverContent
+            class="w-72 p-4"
+            align="start"
+        >
+            <div class="space-y-4">
+                <ColorWheel v-model="color" />
+
+                <!-- Color Format Input -->
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between">
+                        <button
+                            v-for="fmt in ['hex', 'rgb', 'rgba', 'hsl', 'oklch']"
+                            :key="fmt"
+                            type="button"
+                            class="text-xs px-2 py-1 rounded  font-medium uppercase"
+                            :class="format === fmt ? 'bg-primary text-primary-foreground' : 'bg-secondary hover:bg-secondary/80'"
+                            @click="format = fmt"
+                        >
+                            {{ fmt }}
+                        </button>
+                    </div>
+                    <Input
+                        :model-value="colorInput"
+                        :class="{ 'uppercase': format === 'hex' }"
+                        class="font-mono"
+                        :placeholder="format === 'hex' ? '#000000' : format === 'rgb' ? 'rgb(0, 0, 0)' : format === 'rgba' ? 'rgba(0, 0, 0, 1)' : format === 'hsl' ? 'hsl(0, 0%, 0%)' : 'oklch(0 0 0)'"
+                        @change="(e: any) => {
+                            colorInput = e.target.value
+                        }"
+                    />
+                    <!-- Opacity field for RGBA -->
+                    <div
+                        v-if="format === 'rgba' && rgba && rgba"
+                        class="flex items-center gap-2 mt-2"
+                    >
+                        <label class="text-xs">{{ $t('Opacity') }}</label>
+                        <Input
+                            type="number"
+                            min="0"
+                            max="1"
+                            step="0.01"
+                            :model-value="rgba.a"
+                            class="w-16 font-mono"
+                            @change="(e: any) => updateRgbaAlpha(e.target.value)"
+                        />
+                    </div>
+                </div>
+
+                <!-- Preset Colors -->
+                <div class="space-y-2">
+                    <label class="text-sm font-medium mb-2 block">Presets</label>
+                    <div class="grid grid-cols-10 gap-2">
+                        <button
+                            v-for="preset in presets"
+                            :key="preset"
+                            type="button"
+                            class="w-6 h-6 rounded border border-border hover:scale-110 transition-transform"
+                            :style="{ backgroundColor: preset }"
+                            @click="() => {
+                                color = preset
+                            }"
+                        />
+                    </div>
+                </div>
+            </div>
+        </PopoverContent>
+    </Popover>
+</template>