@naptics/vue-collection 0.3.2 → 1.0.0-beta.1

package/eslint.config.cjs

@@ -3,8 +3,6 @@ const { defineConfigWithVueTs, vueTsConfigs } = require('@vue/eslint-config-type
 const js = require('@eslint/js')
 const prettierConfig = require('@vue/eslint-config-prettier')
 
-require('@rushstack/eslint-patch/modern-module-resolution')
-
 module.exports = defineConfigWithVueTs(
     {
         ignores: ['node_modules/**', 'dist/**', 'dist-ssr/**', 'lib/**', 'coverage/**', 'scripts/*.js'],

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler and Jonas Schoch",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.3.2",
+    "version": "1.0.0-beta.1",
     "main": "./index.js",
     "repository": {
         "type": "git",
@@ -22,43 +22,44 @@
         "preinstall": "node ./scripts/sync-node-types.js"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.10",
-        "@popperjs/core": "^2.11.6",
-        "awesome-phonenumber": "^5.1.0"
+        "@headlessui/vue": "^1.7.23",
+        "@popperjs/core": "^2.11.8",
+        "awesome-phonenumber": "^7.8.0"
     },
     "peerDependencies": {
         "@heroicons/vue": "^2.0.16",
         "vue": "^3.5.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.3",
-        "@intlify/unplugin-vue-i18n": "^11.0.3",
-        "@rushstack/eslint-patch": "^1.15.0",
-        "@tailwindcss/forms": "^0.5.3",
-        "@types/jsdom": "^21.1.0",
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.29.0",
+        "@eslint/js": "^10.0.1",
+        "@intlify/unplugin-vue-i18n": "^11.2.3",
+        "@rushstack/eslint-patch": "^1.16.1",
+        "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/vite": "^4.3.0",
+        "@types/jsdom": "^28.0.3",
         "@types/node": "^24",
-        "@vitejs/plugin-vue": "^6.0.3",
-        "@vitejs/plugin-vue-jsx": "^5.1.2",
-        "@vue/babel-plugin-jsx": "^1.1.1",
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vitejs/plugin-vue-jsx": "^5.1.5",
+        "@vue/babel-plugin-jsx": "^2.0.1",
         "@vue/eslint-config-prettier": "^10.2.0",
-        "@vue/eslint-config-typescript": "^14.6.0",
-        "@vue/test-utils": "^2.3.0",
-        "@vue/tsconfig": "^0.5.1",
-        "autoprefixer": "^10.4.13",
-        "eslint": "^9.17.0",
-        "eslint-plugin-vue": "^10.6.2",
-        "jsdom": "^29.0.2",
+        "@vue/eslint-config-typescript": "^14.7.0",
+        "@vue/test-utils": "^2.4.10",
+        "@vue/tsconfig": "^0.8.1",
+        "eslint": "^10.4.0",
+        "eslint-plugin-vue": "^10.9.1",
+        "jsdom": "^29.1.1",
         "npm-run-all": "^4.1.5",
-        "postcss": "^8.4.21",
-        "prettier": "^3.0.0",
-        "tailwindcss": "^3.2.7",
-        "typescript": "~5.5.4",
-        "vite": "^7.3.0",
-        "vitest": "^4.0.15",
-        "vue": "^3.5.25",
-        "vue-i18n": "^9.2.2",
-        "vue-router": "^4.1.6",
-        "vue-tsc": "^3.1.8"
+        "postcss": "^8.5.15",
+        "prettier": "^3.8.3",
+        "tailwindcss": "^4.3.0",
+        "typescript": "~5.8.3",
+        "vite": "^8.0.14",
+        "vitest": "^4.1.7",
+        "vue": "^3.5.34",
+        "vue-i18n": "^11.4.4",
+        "vue-router": "^5.0.7",
+        "vue-tsc": "^3.3.1"
     }
 }

package/postcss.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
+    plugins: {},
 }

package/src/demo/App.css

@@ -1,6 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+
+@theme {
+    --color-default-50: var(--color-slate-50);
+    --color-default-100: var(--color-slate-100);
+    --color-default-200: var(--color-slate-200);
+    --color-default-300: var(--color-slate-300);
+    --color-default-400: var(--color-slate-400);
+    --color-default-500: var(--color-slate-500);
+    --color-default-600: var(--color-slate-600);
+    --color-default-700: var(--color-slate-700);
+    --color-default-800: var(--color-slate-800);
+    --color-default-900: var(--color-slate-900);
+    --color-default-950: var(--color-slate-950);
+
+    --color-primary-50: var(--color-violet-50);
+    --color-primary-100: var(--color-violet-100);
+    --color-primary-200: var(--color-violet-200);
+    --color-primary-300: var(--color-violet-300);
+    --color-primary-400: var(--color-violet-400);
+    --color-primary-500: var(--color-violet-500);
+    --color-primary-600: var(--color-violet-600);
+    --color-primary-700: var(--color-violet-700);
+    --color-primary-800: var(--color-violet-800);
+    --color-primary-900: var(--color-violet-900);
+    --color-primary-950: var(--color-violet-950);
+
+    --color-secondary-50: var(--color-fuchsia-50);
+    --color-secondary-100: var(--color-fuchsia-100);
+    --color-secondary-200: var(--color-fuchsia-200);
+    --color-secondary-300: var(--color-fuchsia-300);
+    --color-secondary-400: var(--color-fuchsia-400);
+    --color-secondary-500: var(--color-fuchsia-500);
+    --color-secondary-600: var(--color-fuchsia-600);
+    --color-secondary-700: var(--color-fuchsia-700);
+    --color-secondary-800: var(--color-fuchsia-800);
+    --color-secondary-900: var(--color-fuchsia-900);
+    --color-secondary-950: var(--color-fuchsia-950);
+}
+
+/* Safelist dynamic color/size classes used in components */
+@source inline("{bg,text}-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("hover:{bg,text}-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("ring-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("focus-visible:ring-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
+@source inline("{w,h}-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20}");
 
 @layer base {
     body {

package/src/demo/components/ComponentSection.tsx

@@ -13,7 +13,7 @@ export default createComponent('ComponentSection', componentSectionProps, (props
         <div class="border-b-2 border-default-200" id={props.id}>
             <div>
                 <div class="px-8 py-10 max-w-4xl mx-auto">
-                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-none">
+                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-hidden">
                         <h2 class="font-bold text-4xl mb-2 flex items-center space-x-2 ">
                             <span>{props.title}</span>
                             <LinkIcon class="h-8 w-8 text-default-900 opacity-30 hidden group-hover:block group-focus-visible:block" />

package/src/demo/views/NavigationView.tsx

@@ -30,7 +30,7 @@ export default createView('NavigationView', () => {
                 {sections.map(section => (
                     <RouterLink
                         to={{ hash: `#${section.hash}` }}
-                        class="outline-none focus-visible:ring-2 focus-visible ring-primary-500 rounded-md"
+                        class="outline-hidden focus-visible:ring-2 focus-visible ring-primary-500 rounded-md"
                     >
                         <NBadge color="primary" allCaps={false} textSize="text-2xl">
                             {section.label}

package/src/demo/views/presentation/TooltipView.tsx

@@ -22,7 +22,7 @@ export default createView('TooltipView', () => {
             >
                 <ComponentGrid cols={5}>
                     <div class="flex">
-                        <NTooltip text="Hello tooltip!">
+                        <NTooltip text="Hello tooltip!" placement="bottom">
                             <NBadge text="Hover me" />
                         </NTooltip>
                     </div>

package/src/lib/components/NAlert.tsx

@@ -39,16 +39,16 @@ const Component = createComponent('NAlert', nAlertProps, (props, { slots }) => {
     return () => (
         <div class={`rounded-md p-3 shadow-lg bg-${variant.value.color}-50`}>
             <div class="flex items-center">
-                <div class="flex flex-shrink-0 items-center">{variant.value.icon()}</div>
+                <div class="flex shrink-0 items-center">{variant.value.icon()}</div>
 
-                <div class="ml-3 flex-grow">
+                <div class="ml-3 grow">
                     <p class={`text-sm font-medium text-${variant.value.color}-900`}>
                         {slots.default?.() ?? props.text}
                     </p>
                 </div>
 
                 {!props.hideX && (
-                    <div class="flex items-center flex-shrink-0 ml-3">
+                    <div class="flex items-center shrink-0 ml-3">
                         <NIconButton color={variant.value.color} size={5} icon={XMarkIcon} onClick={props.onDismiss} />
                     </div>
                 )}

package/src/lib/components/NBadge.tsx

@@ -60,7 +60,7 @@ const Component = createComponent('NBadge', nBadgeProps, (props, { slots }) => {
         <NTooltip {...mapTooltipProps(props)}>
             <div
                 class={[
-                    'px-2 py-1 rounded-md font-semibold shadow',
+                    'px-2 py-1 rounded-md font-semibold shadow-sm',
                     `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`,
                     props.allCaps ? 'uppercase' : '',
                     props.badgeClass,

package/src/lib/components/NButton.tsx

@@ -56,17 +56,19 @@ const Component = createComponent('NButton', nButtonProps, (props, { slots }) =>
                 disabled={isDisabled.value}
                 type={props.type}
                 class={[
-                    `block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`,
+                    `block w-full font-medium rounded-md focus:outline-hidden focus-visible:ring-2 shadow-sm text-${props.color}-900 relative`,
                     isDisabled.value
-                        ? `bg-${props.color}-100 text-opacity-20 cursor-default`
-                        : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`,
+                        ? `bg-${props.color}-100 cursor-default`
+                        : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500 cursor-pointer`,
 
                     props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm',
                     props.buttonClass,
                 ]}
                 onClick={props.onClick}
             >
-                <span class={{ 'opacity-10': props.loading }}>{slots.default?.()}</span>
+                <span class={props.loading ? 'opacity-0' : isDisabled.value ? 'opacity-20' : undefined}>
+                    {slots.default?.()}
+                </span>
                 {props.loading && (
                     <div class="absolute inset-0 flex items-center justify-center opacity-50">
                         <NLoadingIndicator color={props.color} size={props.small ? 4 : 6} shade={600} />

package/src/lib/components/NCheckbox.tsx

@@ -43,9 +43,9 @@ const Component = createComponent('NCheckbox', nCheckboxProps, props => {
             onClick={toggle}
             key={updateKey.value}
             class={[
-                `h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
+                `h-5 w-5 border-default-300 rounded-sm focus:outline-hidden focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
                 props.disabled
-                    ? `cursor-default bg-default-100 text-${props.color}-200`
+                    ? `cursor-default opacity-50 bg-default-100 checked:bg-current text-${props.color}-400`
                     : `cursor-pointer text-${props.color}-400`,
             ]}
         />

package/src/lib/components/NDialog.tsx

@@ -127,7 +127,7 @@ const Component = createComponent('NDialog', nDialogProps, (props, context) => {
             hideHeader
         >
             <div class="flex space-x-4 py-2">
-                <div class="flex-grow-0">
+                <div class="grow-0">
                     <NIconCircle
                         icon={props.icon || defaults.value.icon}
                         iconSize={6}
@@ -135,7 +135,7 @@ const Component = createComponent('NDialog', nDialogProps, (props, context) => {
                     />
                 </div>
 
-                <div class="flex-grow">
+                <div class="grow">
                     <DialogTitle as="h4" class="font-medium text-lg text-default-700 mb-1">
                         {props.title}
                     </DialogTitle>

package/src/lib/components/NDropdown.tsx

@@ -89,28 +89,30 @@ const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button
                     <MenuButton
                         disabled={props.disabled}
                         class={[
-                            'shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500',
-                            props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100',
+                            'shadow-sm w-full flex justify-between items-center rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500',
+                            props.disabled
+                                ? 'text-default-700/20 cursor-default'
+                                : 'hover:bg-default-100 text-default-700 cursor-pointer',
                             props.buttonClass,
                         ]}
                     >
                         <span>{props.title}</span>
-                        <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5 flex-shrink-0" aria-hidden="true" />
+                        <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5 shrink-0" aria-hidden="true" />
                     </MenuButton>
                 )}
             </div>
 
             <Transition
                 enterActiveClass="transition ease-out duration-100"
-                enterFromClass="transform opacity-0 scale-95"
-                enterToClass="transform opacity-100 scale-100"
+                enterFromClass="opacity-0 scale-95"
+                enterToClass="opacity-100 scale-100"
                 leaveActiveClass="transition ease-in duration-75"
-                leaveFromClass="transform opacity-100 scale-100"
-                leaveToClass="transform opacity-0 scale-95"
+                leaveFromClass="opacity-100 scale-100"
+                leaveToClass="opacity-0 scale-95"
             >
                 <MenuItems
                     class={[
-                        'z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+                        'z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 focus:outline-hidden',
                         props.right ? 'origin-top-right right-0' : 'origin-top-left left-0',
                     ]}
                 >
@@ -142,7 +144,7 @@ const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button
                                                         type="button"
                                                         onClick={item.onClick}
                                                         class={[
-                                                            'w-full text-left px-4 py-2 text-sm',
+                                                            'w-full text-left px-4 py-2 text-sm cursor-pointer',
                                                             active
                                                                 ? 'bg-default-100 text-default-900'
                                                                 : 'text-default-700',

package/src/lib/components/NDropzone.tsx

@@ -168,7 +168,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
         <div>
             <button
                 class={[
-                    'block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-none ',
+                    'block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-hidden ',
                     'flex flex-col items-center justify-center text-center text-sm select-none p-4',
                     !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '',
                     props.disabled
@@ -196,14 +196,14 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
                 />
 
                 {/* Counterweight */}
-                <div class="flex-grow mb-2" />
+                <div class="grow mb-2" />
 
                 <span class="font-medium">
                     {trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, { n: props.maxFiles })}
                 </span>
                 <span>{props.description}</span>
 
-                <div class="flex-grow mt-2 flex items-end justify-center text-red-500 font-medium">
+                <div class="grow mt-2 flex items-end justify-center text-red-500 font-medium">
                     <span>{fileError.value}</span>
                 </div>
             </button>
@@ -224,7 +224,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
                         </NBadge>
                     ))}
 
-                    <div class="flex-grow text-sm text-default-500 flex items-end justify-end text-right">
+                    <div class="grow text-sm text-default-500 flex items-end justify-end text-right">
                         <span>
                             <span>
                                 {trslc('vue-collection.text.files-selected', files.value.length, {

package/src/lib/components/NIconButton.tsx

@@ -65,10 +65,10 @@ export const nIconButtonProps = {
  */
 const Component = createComponent('NIconButton', nIconButtonProps, props => {
     const classes = () => [
-        'block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1',
+        'block p-0.5 rounded-md focus:outline-hidden focus-visible:ring-2 -m-1',
         props.disabled
             ? `text-${props.color}-200 cursor-default`
-            : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`,
+            : `hover:bg-current/10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`,
         props.buttonClass,
     ]
 

package/src/lib/components/NInput.tsx

@@ -112,7 +112,7 @@ const Component = createComponent('NInput', nInputProps, (props, context) => {
                         onBlur={() => props.onBlur?.()}
                         onInvalid={event => event.preventDefault()}
                         class={[
-                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            'block w-full rounded-md border focus:outline-hidden focus:ring-1 ',
                             props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4',
                             props.disabled
                                 ? 'text-default-500 placeholder-default-300 bg-default-50'

package/src/lib/components/NLink.tsx

@@ -55,7 +55,7 @@ const Component = createComponent('NLink', nLinkProps, (props, { slots }) => {
     })
 
     const classes = computed(() => [
-        'font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left',
+        'font-medium focus:outline-hidden focus-visible:ring-2 rounded-xs ring-offset-2 hover:underline text-left cursor-pointer',
         `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`,
     ])
     const disabledClasses = computed(() => [

package/src/lib/components/NModal.tsx

@@ -1,6 +1,6 @@
 import { createComponentWithSlots } from '../utils/component'
 import type { PropType } from 'vue'
-import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { Dialog, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import NButton from './NButton'
 import NIconButton from './NIconButton'
 import { XMarkIcon } from '@heroicons/vue/24/solid'
@@ -160,9 +160,9 @@ const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'hea
                         leave-to="opacity-0"
                     >
                         {props.closeOnBackground ? (
-                            <DialogOverlay class="fixed inset-0 bg-default-700 bg-opacity-75" />
+                            <div class="fixed inset-0 bg-default-700/75" aria-hidden="true" onClick={cancel} />
                         ) : (
-                            <div class="fixed inset-0 bg-default-700 bg-opacity-75" />
+                            <div class="fixed inset-0 bg-default-700/75" aria-hidden="true" />
                         )}
                     </TransitionChild>
 
@@ -180,7 +180,7 @@ const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'hea
                         leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     >
-                        <div class={['transform m-4 w-full align-middle', props.maxWidth]}>
+                        <div class={['relative m-4 w-full align-middle', props.maxWidth]}>
                             {props.modal?.({ ok, cancel }) || (
                                 <div
                                     class={[

package/src/lib/components/NPagination.css

@@ -1,3 +1,5 @@
+@reference "../../demo/App.css";
+
 .pagination-item {
     @apply h-9 w-9 text-sm inline-flex items-center justify-center border font-medium border-default-300 text-default-500;
 }
@@ -7,9 +9,9 @@
 }
 
 .pagination-item.selectable {
-    @apply hover:bg-default-50 focus:outline-none focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-[2];
+    @apply cursor-pointer hover:bg-default-50 focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-2;
 }
 
 .pagination-item.selectable.selected {
-    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-[1];
+    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-1;
 }

package/src/lib/components/NPagination.tsx

@@ -86,7 +86,7 @@ const Component = createComponent('NPagination', nPaginationProps, props => {
     ]
 
     return () => (
-        <nav class="inline-flex rounded-md shadow -space-x-px">
+        <nav class="inline-flex rounded-md shadow-sm -space-x-px">
             <button
                 class={['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small']}
                 onClick={previous}

package/src/lib/components/NSearchbar.tsx

@@ -64,7 +64,7 @@ const Component = createComponent('NSearchbar', nSearchbarProps, (props, context
                 placeholder={props.placeholder}
                 autocomplete="off"
                 class={[
-                    'block w-full pl-10 pr-4 rounded-md border focus:outline-none focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500',
+                    'block w-full pl-10 pr-4 rounded-md border focus:outline-hidden focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500',
                     props.small ? 'py-1' : 'py-2',
                     props.inputClass,
                 ]}

package/src/lib/components/NSelect.tsx

@@ -101,7 +101,7 @@ const Component = createComponent('NSelect', nSelectProps, (props, context) => {
                             onChange={event => slotProps.onUpdateValue((event.target as HTMLInputElement).value)}
                             onBlur={slotProps.onBlur}
                             class={[
-                                'block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1',
+                                'block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-hidden focus:ring-1',
                                 props.disabled ? 'text-default-300 ' : 'text-default-900 ',
                                 slotProps.error
                                     ? 'border-red-500 focus:border-red-500 focus:ring-red-500'

package/src/lib/components/NSuggestionList.tsx

@@ -179,7 +179,7 @@ const Component = createComponentWithSlots('NSuggestionList', nSuggestionListPro
                                 <li
                                     key={item.id}
                                     class={[
-                                        'focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer',
+                                        'focus:outline-hidden hover:bg-default-50 rounded-md select-none p-2 cursor-pointer',
                                         selectedIndex.value === index ? 'bg-default-50' : '',
                                     ]}
                                     onMousedown={onListMouseDown}

package/src/lib/components/NTable.css

@@ -1,3 +1,5 @@
+@reference "../../demo/App.css";
+
 .table-heading {
     @apply text-left text-xs font-medium text-default-500 uppercase tracking-wider;
 }

package/src/lib/components/NTableAction.tsx

@@ -31,7 +31,7 @@ const Component = createComponent('NTableAction', nTableActionProps, (props, { s
     const content = () => slots.default?.() || <>{props.text}</>
 
     const classes = [
-        'text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700',
+        'text-left font-medium focus:outline-hidden focus-visible:ring-2 focus-visible:ring-default-900 rounded-xs ring-offset-2 text-default-900 hover:underline hover:text-default-700 cursor-pointer',
     ]
 
     return () =>

package/src/lib/components/NTextArea.tsx

@@ -134,7 +134,7 @@ const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (prop
                         onBlur={() => props.onBlur?.()}
                         onInvalid={event => event.preventDefault()}
                         class={[
-                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            'block w-full rounded-md border focus:outline-hidden focus:ring-1 ',
                             props.disabled
                                 ? 'text-default-500 placeholder-default-300 bg-default-50'
                                 : 'text-default-900 placeholder-default-400 ',

package/src/lib/components/NTooltip.css

@@ -1,3 +1,5 @@
+@reference "../../demo/App.css";
+
 .arrow,
 .arrow::before {
     position: absolute;

package/src/lib/components/NTooltip.tsx

@@ -235,7 +235,7 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { sl
     return () => (
         <>
             <div
-                class="p-[10px] -m-[10px]"
+                class="p-[10px] m-[-10px]"
                 onMouseleave={() => setTimeout(() => (isHoveringContent.value = false), 10)}
             >
                 <div id={contentId} onMouseenter={() => (isHoveringContent.value = true)}>

package/src/lib/utils/component.tsx

@@ -97,7 +97,7 @@ export function extractProps<T extends Record<string, unknown>>(
     ...keys: (keyof T)[]
 ): UnwrapNestedRefs<Partial<ToRefs<T>>> {
     const partial: Partial<ToRefs<T>> = {}
-    for (const key of keys) partial[key] = toRef(props, key)
+    for (const key of keys) partial[key] = toRef(props, key) as never
     return reactive(partial)
 }
 

package/tsconfig.lib.json

@@ -12,6 +12,7 @@
         "noImplicitAny": false,
         "downlevelIteration": true,
         "skipLibCheck": true,
+        "allowImportingTsExtensions": false,
         "noEmit": false,
         "declaration": true
     }

package/vite.config.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath, URL } from 'url'
 import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueI18n from '@intlify/unplugin-vue-i18n/vite'
@@ -10,6 +11,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
+        tailwindcss(),
         vue(),
         vueJsx(),
         vueI18n({

package/components/NAlert.d.ts

@@ -1,29 +0,0 @@
-import { type PropType } from 'vue';
-export type AlertVariant = 'success' | 'info' | 'warning' | 'error' | 'loading';
-export declare const nAlertProps: {
-    /**
-     * The variant of the alert. This defines its color and icon.
-     */
-    readonly variant: {
-        readonly type: PropType<AlertVariant>;
-        readonly default: "success";
-    };
-    /**
-     * The text of the alert.
-     */
-    readonly text: StringConstructor;
-    /**
-     * If set to `true` the X-button of the alert is hidden.
-     */
-    readonly hideX: BooleanConstructor;
-    /**
-     * This is called, when the X-button is clicked.
-     */
-    readonly onDismiss: PropType<() => void>;
-};
-/**
- * The `NAlert` is a fully styled alert with multiple variants.
- * It can be used as a normal blocking element or as part of an alert queue.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NAlert, Component as default };