feat: ring

docs/.vitepress/theme/Layout.tsx

@@ -26,8 +26,8 @@ export default defineComponent({
 
     const isDark = useDark()
     return () => (
-      <div class="sticky min-h-screen top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 supports-backdrop-blur:bg-white/60 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10">
-        <div class="mx-auto max-w-8xl">
+      <div class="supports-backdrop-blur:bg-white/60 sticky top-0 z-40 min-h-screen w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10">
+        <div class="max-w-8xl mx-auto">
           <div class="mx-4 border-b border-slate-900/10 py-4 dark:border-slate-300/10 lg:mx-0 lg:border-0 lg:px-8">
             <div class="relative flex items-center">
               <a class="mr-3 w-[2.0625rem] flex-none overflow-hidden md:w-auto" href="/">
@@ -117,7 +117,7 @@ export default defineComponent({
           </div>
         </div>
         <div class="overflow-hidden">
-          <div class="mx-auto min-h-[calc(100vh_-_62px)] max-w-8xl px-4 sm:px-6 md:px-8">
+          <div class="max-w-8xl mx-auto min-h-[calc(100vh_-_62px)] px-4 sm:px-6 md:px-8">
             <div class="fixed inset-0 left-[max(0px,calc(50%-45rem))] right-auto top-[3.8125rem] z-20 hidden w-[19.5rem] overflow-y-auto px-8 pb-10 lg:block">
               <TVSidebar open={isSidebarOpen.value}></TVSidebar>
             </div>

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.2",
     "@heroicons/vue": "^2.0.18",
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^10.5.0",
     "kotl": "^1.7.0"
   },
   "devDependencies": {
@@ -24,31 +24,31 @@
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.10",
     "@types/jsdom": "^21.1.3",
-    "@types/node": "^20.6.3",
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@types/node": "^20.8.4",
+    "@vitejs/plugin-vue": "^4.4.0",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.49.0",
-    "happy-dom": "^12.1.5",
+    "eslint": "^8.51.0",
+    "happy-dom": "^12.9.1",
     "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.1",
     "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "rimraf": "^5.0.1",
+    "prettier-plugin-tailwindcss": "^0.5.5",
+    "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.68.0",
+    "sass": "^1.69.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.4",
-    "vite-plugin-inspect": "^0.7.38",
+    "vite": "^4.4.11",
+    "vite-plugin-dts": "^3.6.0",
+    "vite-plugin-inspect": "^0.7.40",
     "vite-plugin-markdown-preview": "^1.1.1",
-    "vitepress": "1.0.0-rc.15",
-    "vitest": "^0.34.5",
-    "vue-tsc": "^1.8.13"
+    "vitepress": "1.0.0-rc.20",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.18"
   },
   "engines": {
     "node": ">=16.18.0",

packages/vue/src/components/Checkbox/index.tsx

@@ -65,7 +65,7 @@ export const Checkbox = defineComponent({
     return () => (
       <label class="flex items-center">
         <input
-          class="text-primary-500 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 transition-shadow"
+          class="text-primary-500 focus-visible:ring-primary-500 h-4 w-4 rounded border-gray-300 transition-shadow"
           type="checkbox"
           name={props.name}
           disabled={props.disabled}

packages/vue/src/components/Radio/Radio.tsx

@@ -86,7 +86,7 @@ export const Radio = defineComponent({
         ]}
       >
         <input
-          class="text-primary-500 focus:ring-primary-500 h-4 w-4 border-gray-300 transition-shadow"
+          class="text-primary-500 focus-visible:ring-primary-500 h-4 w-4 border-gray-300 transition-shadow"
           type="radio"
           name={groupProps.value.name}
           value={groupProps.value.value}

packages/vue/src/components/Select/index.tsx

@@ -70,11 +70,12 @@ export const Select = defineComponent({
           ),
           content: () => (
             <ItemList
+              class="shadow"
               value={val.value}
               onUpdate:value={setVal}
               onChange={changeHandler}
               items={props.options}
-            ></ItemList>
+            />
           ),
         }}
       </Popper>

packages/vue/src/components/Switch/index.tsx

@@ -50,7 +50,7 @@ export const Switch = defineComponent({
       <button
         type="button"
         class={[
-          'z-switch focus:ring-primary-500 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2  border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2',
+          'z-switch relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2  border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',
           checked.value ? 'bg-primary-500' : 'bg-gray-200',
         ]}
         disabled={props.disabled}