diff --git a/.nuxtrc b/.nuxtrc new file mode 100644 index 0000000..31f8ec1 --- /dev/null +++ b/.nuxtrc @@ -0,0 +1,2 @@ +uiPro.license=B5BB8F9E-6065-4075-A894-015E5901668B +telemetry.enabled=false diff --git a/app.config.ts b/app.config.ts index 23e8382..fa23d0b 100644 --- a/app.config.ts +++ b/app.config.ts @@ -16,13 +16,99 @@ export default defineAppConfig({ card: { background: "bg-white dark:bg-zinc-950", + ring: "ring-1 ring-gray-200 dark:ring-gray-800", + rounded: "rounded-xl", }, button: { - rounded: "rounded-full", + base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0", + font: "font-medium", + rounded: "rounded-md", + truncate: "text-left break-all line-clamp-1", + block: "w-full flex justify-center items-center", + inline: "inline-flex items-center", + size: { + "2xs": "text-xs", + xs: "text-xs", + sm: "h-9 rounded-md px-3 text-sm", + md: "text-sm", + lg: "h-11 rounded-md px-8 text-sm", + xl: "text-base", + }, + gap: { + "2xs": "gap-x-1", + xs: "gap-x-1.5", + sm: "gap-x-1.5", + md: "gap-x-2", + lg: "gap-x-2.5", + xl: "gap-x-2.5", + }, + padding: { + "2xs": "px-2 py-1", + xs: "px-2.5 py-1.5", + sm: "px-2.5 py-1.5", + md: "px-3 py-2", + lg: "px-3.5 py-2.5", + xl: "px-3.5 py-2.5", + }, + square: { + "2xs": "p-1.5", + xs: "p-2", + sm: "p-2", + md: "p-2.5", + lg: "p-3", + xl: "p-3", + }, + color: { + gray: { + solid: + "shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 aria-disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + ghost: + "text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + link: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + }, + black: { + solid: + "shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + link: "text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + }, + }, + variant: { + solid: + "shadow-sm text-white dark:text-white-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 dark:bg-{color}-500 dark:hover:bg-{color}-600 dark:disabled:bg-{color}-400 dark:aria-disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400", + outline: + "ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + soft: "text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + ghost: + "text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + link: "text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + }, + icon: { + base: "flex-shrink-0", + loading: "animate-spin", + size: { + "2xs": "h-4 w-4", + xs: "h-4 w-4", + sm: "h-5 w-5", + md: "h-5 w-5", + lg: "h-5 w-5", + xl: "h-6 w-6", + }, + }, default: { - size: "md", + size: "sm", + variant: "solid", color: "black", + loadingIcon: "i-heroicons-arrow-path-20-solid", + }, + }, + + color: { + white: { + solid: + "shadow ring-1 ring-inset ring-gray-400 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + ghost: + "text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", }, }, @@ -31,10 +117,6 @@ export default defineAppConfig({ ring: "ring-1 ring-slate-200 dark:ring-slate-800 ring-inset", }, - buttonGroup: { - rounded: "rounded-full", - }, - table: { tr: { base: "", @@ -58,37 +140,194 @@ export default defineAppConfig({ }, input: { - rounded: "rounded-full", - default: { - size: "md", + wrapper: "relative", + base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0", + form: "form-input", + rounded: "rounded-md", + placeholder: + "placeholder:text-muted-foreground dark:placeholder-gray-500", + file: { + base: "file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none", }, - color: { - white: { - outline: "dark:bg-gray-950", + size: { + default: "h-10 px-3 py-2 text-sm", + "2xs": "text-xs", + xs: "text-xs", + sm: "text-sm", + md: "text-sm", + lg: "text-sm", + xl: "text-base", + }, + gap: { + "2xs": "gap-x-1", + xs: "gap-x-1.5", + sm: "gap-x-1.5", + md: "gap-x-2", + lg: "gap-x-2.5", + xl: "gap-x-2.5", + }, + padding: { + "2xs": "px-2 py-1", + xs: "px-2.5 py-1.5", + sm: "px-2.5 py-1.5", + md: "px-3 py-2", + lg: "px-3.5 py-2.5", + xl: "px-3.5 py-2.5", + }, + leading: { + padding: { + "2xs": "ps-7", + xs: "ps-8", + sm: "ps-9", + md: "ps-10", + lg: "ps-11", + xl: "ps-12", }, }, - }, - - select: { - rounded: "rounded-full", - default: { - size: "md", - loadingIcon: "i-svg-spinners-180-ring-with-bg", - trailingIcon: "i-ph-caret-down", + trailing: { + padding: { + "2xs": "pe-7", + xs: "pe-8", + sm: "pe-9", + md: "pe-10", + lg: "pe-11", + xl: "pe-12", + }, }, color: { white: { - outline: "dark:bg-gray-950", + outline: + "shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400", }, + gray: { + outline: + "shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400", + }, + }, + variant: { + outline: + "shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400", + none: "bg-transparent focus:ring-0 focus:shadow-none", + }, + icon: { + base: "flex-shrink-0 text-gray-400 dark:text-gray-500", + color: "text-{color}-500 dark:text-{color}-400", + loading: "animate-spin", + size: { + "2xs": "h-4 w-4", + xs: "h-4 w-4", + sm: "h-5 w-5", + md: "h-5 w-5", + lg: "h-5 w-5", + xl: "h-6 w-6", + }, + leading: { + wrapper: "absolute inset-y-0 start-0 flex items-center", + pointer: "pointer-events-none", + padding: { + "2xs": "px-2", + xs: "px-2.5", + sm: "px-2.5", + md: "px-3", + lg: "px-3.5", + xl: "px-3.5", + }, + }, + trailing: { + wrapper: "absolute inset-y-0 end-0 flex items-center", + pointer: "pointer-events-none", + padding: { + "2xs": "px-2", + xs: "px-2.5", + sm: "px-2.5", + md: "px-3", + lg: "px-3.5", + xl: "px-3.5", + }, + }, + }, + default: { + size: "sm", + color: "white", + variant: "outline", + loadingIcon: "i-heroicons-arrow-path-20-solid", }, }, + select: { + rounded: "rounded-md", + }, + selectMenu: { + container: "z-20 group", + trigger: "flex items-center w-full", + width: "w-full", + height: "max-h-60", + base: "relative focus:outline-none overflow-y-auto scroll-py-1", + background: "bg-white dark:bg-gray-800", + shadow: "shadow-lg", + rounded: "rounded-md", + padding: "p-1", + ring: "ring-1 ring-gray-200 dark:ring-gray-700", + empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5", + option: { + base: "cursor-default select-none relative flex items-center justify-between gap-1", + rounded: "rounded-md", + padding: "px-1.5 py-1.5", + size: "text-sm", + color: "text-gray-900 dark:text-white", + container: "flex items-center gap-1.5 min-w-0", + active: "bg-gray-100 dark:bg-gray-900", + inactive: "", + selected: "pe-7", + disabled: "cursor-not-allowed opacity-50", + empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5", + icon: { + base: "flex-shrink-0 h-5 w-5", + active: "text-gray-900 dark:text-white", + inactive: "text-gray-400 dark:text-gray-500", + }, + selectedIcon: { + wrapper: "absolute inset-y-0 end-0 flex items-center", + padding: "pe-2", + base: "h-5 w-5 text-gray-900 dark:text-white flex-shrink-0", + }, + avatar: { + base: "flex-shrink-0", + size: "2xs", + }, + chip: { + base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full", + }, + create: "block truncate", + }, + transition: { + leaveActiveClass: "transition ease-in duration-100", + leaveFromClass: "opacity-100", + leaveToClass: "opacity-0", + }, + popper: { + placement: "bottom-end", + }, default: { - selectedIcon: "i-ph-check", + selectedIcon: "i-heroicons-check-20-solid", clearSearchOnClose: false, showCreateOptionWhen: "empty", }, + arrow: { + base: "invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2", + ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700", + rounded: "before:rounded-sm", + background: "before:bg-white dark:before:bg-gray-700", + shadow: "before:shadow", + placement: + "group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1", + }, + select: "inline-flex items-center text-left cursor-default", + input: + "block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none", + required: "absolute inset-0 w-px opacity-0 cursor-default", + label: "block truncate", }, textarea: { @@ -100,21 +339,21 @@ export default defineAppConfig({ }, header: { - wrapper: "border-none backdrop-blur-lg", - + wrapper: "backdrop-blur-lg border-b dark:border-gray-800", + container: "h-14", links: { - wrapper: - "ring-1 ring-gray-300 dark:ring-gray-700 px-3 gap-x-0 rounded-full", - base: "py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity", - active: "text-gray-900 dark:text-white after:opacity-100", + wrapper: "px-3 gap-x-0", + base: "font-medium py-2 px-4 transition-colors relative after:absolute", + active: "text-primary-500 dark:text-primary-400 after:opacity-100", inactive: - "text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100", + "text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100", }, left: "sm:flex-1", right: "sm:flex-1", + panel: { - wrapper: "lg:hidden", + wrapper: "lg:hidden hover:block", }, button: { @@ -164,7 +403,7 @@ export default defineAppConfig({ list: { base: "relative", background: "bg-gray-100 dark:bg-gray-800", - rounded: "rounded-full", + rounded: "rounded-lg", shadow: "", padding: "p-1", height: "h-10", @@ -173,8 +412,8 @@ export default defineAppConfig({ wrapper: "absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none", base: "w-full h-full", - background: "bg-white dark:bg-gray-900", - rounded: "rounded-full", + background: "bg-white dark:bg-gray-950", + rounded: "rounded-md", shadow: "shadow-sm", }, tab: { @@ -186,7 +425,7 @@ export default defineAppConfig({ padding: "px-3", size: "text-sm", font: "font-medium", - rounded: "rounded-full", + rounded: "rounded-md", shadow: "", icon: "w-4 h-4 flex-shrink-0 me-2", }, diff --git a/layouts/default.vue b/layouts/default.vue index d43c979..2311e07 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -38,7 +38,7 @@ provide("files", files);