fix!: move SocialButton to addons, update docs for addons

lepture · lepture · commit cd53110ed2fc · 2025-07-23T22:15:44.000+09:00
diff --git a/.vitepress/components/PropsTable.vue b/.vitepress/components/PropsTable.vue
@@ -51,7 +51,7 @@ const inheritProps = computed(() => {
       class="pt-4"
     >
       <CollapsibleTrigger class="font-medium">
-        Inherit from Reka UI
+        Props inherited from Reka UI
         <template #right>
           <CollapsibleIndicator />
         </template>
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -11,13 +11,14 @@ export default defineConfig({
   cleanUrls: true,
   vite: {
     plugins: [
-      // @ts-ignore
+      // @ts-expect-error this seems a type bug of vite
       tailwindcss(),
     ],
     resolve: {
       alias: {
         '~': resolve(__dirname, '..'),
         '#components': resolve(__dirname, '../src/components'),
+        '#addons': resolve(__dirname, '../src/addons'),
       },
     },
   },
@@ -91,6 +92,7 @@ export default defineConfig({
         items: [
           { text: 'Turnstile', link: '/addons/turnstile' },
           { text: 'Iconify', link: '/addons/iconify' },
+          { text: 'SocialButton', link: '/addons/social-button' },
         ],
       },
     ],
diff --git a/.vitepress/plugins/example.ts b/.vitepress/plugins/example.ts
@@ -57,7 +57,7 @@ export function markdownExampleTagBlock(md: MarkdownRenderer) {
       const source = fs.readFileSync(srcPath, { encoding: 'utf-8' })
       const srcToken = new state.Token('fence', 'code', 0)
       srcToken.info = 'vue'
-      srcToken.content = source.replace(/#components/g, '@typlog/ui').trim()
+      srcToken.content = source.replace(/#components/g, '@typlog/ui').replace(/#addons/g, '@typlog/ui/addons').trim()
       const endToken = new state.Token('html_inline', '', 0)
       endToken.content = '</template>\n</Example>'
       state.tokens.splice(index + 1, 0, srcToken, endToken)
diff --git a/docs/content/addons/iconify.md b/docs/content/addons/iconify.md
@@ -0,0 +1,8 @@
+---
+title: IconifyCollection
+description: A collection of icons, powered by iconify.
+status: alpha
+source: https://github.com/typlog/ui/tree/main/src/addons/iconset
+---
+
+<Example name="iconify/Overview.vue" variant="full" />
diff --git a/docs/content/addons/social-button.md b/docs/content/addons/social-button.md
@@ -0,0 +1,30 @@
+---
+title: SocialButton
+description: A button component styled specially for social logins.
+status: alpha
+source: https://github.com/typlog/ui/tree/main/src/addons/button/SocialButton.vue
+---
+
+<Example name="social-button/Overview.vue" variant="full" />
+
+## API Reference
+
+<PropsTable name="SocialButton" />
+
+## Examples
+
+### Brand
+
+<Example name="social-button/Brand.vue" />
+
+### Size
+
+<Example name="social-button/Size.vue" />
+
+### Variant
+
+<Example name="social-button/Variant.vue" />
+
+### Radius
+
+<Example name="social-button/Radius.vue" />
diff --git a/docs/content/addons/turnstile.md b/docs/content/addons/turnstile.md
@@ -0,0 +1,8 @@
+---
+title: Turnstile
+description: A Turnstile widget confirms web visitors are real and blocks unwanted bots.
+status: alpha
+source: https://github.com/typlog/ui/tree/main/src/addons/turnstile
+---
+
+<Example name="turnstile/Overview.vue" variant="full" />
diff --git a/docs/examples/iconify/Overview.vue b/docs/examples/iconify/Overview.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  Icon,
+  Button,
+  DialogRoot,
+  DialogTrigger,
+  DialogTitle,
+  DialogClose,
+  DialogPopup,
+} from '#components'
+import { IconifyCollection } from '#addons'
+
+const onSelectIcon = (icon: string) => {
+  console.info('select:', icon)
+}
+</script>
+
+<template>
+  <DialogRoot>
+    <Button :as="DialogTrigger">Choose an icon</Button>
+    <DialogPopup size="5" class="h-(--dialog-popup-max-height)">
+      <div class="py-2 px-4 w-full flex items-center justify-between bg-gray-2 border-b sticky top-0">
+        <DialogTitle>Choose an icon from iconify</DialogTitle>
+        <Button variant="ghost" color="gray" :as="DialogClose">
+          <Icon icon="lucide:x" />
+        </Button>
+      </div>
+      <div class="p-4">
+        <IconifyCollection @select="onSelectIcon" />
+      </div>
+    </DialogPopup>
+  </DialogRoot>
+</template>
diff --git a/docs/examples/radio-group/Overview.vue b/docs/examples/radio-group/Overview.vue
@@ -7,7 +7,7 @@ const selected = ref<string>('1')
 
 <template>
   <div class="flex">
-    <RadioGroupRoot class="flex flex-col gap-2" v-model="selected">
+    <RadioGroupRoot v-model="selected" class="flex flex-col gap-2">
       <RadioGroupItem value="1">
         Default layout
       </RadioGroupItem>
diff --git a/docs/examples/radio/Size.vue b/docs/examples/radio/Size.vue
@@ -7,8 +7,8 @@ const checked = ref(true)
 
 <template>
   <div class="flex items-center gap-2">
-    <Radio size="1" v-model="checked" />
-    <Radio size="2" v-model="checked" />
-    <Radio size="3" v-model="checked" />
+    <Radio v-model="checked" size="1" />
+    <Radio v-model="checked" size="2" />
+    <Radio v-model="checked" size="3" />
   </div>
 </template>
diff --git a/docs/examples/select/Overview.vue b/docs/examples/select/Overview.vue
@@ -11,7 +11,7 @@ import {
 </script>
 
 <template>
-  <SelectRoot defaultValue="apple">
+  <SelectRoot default-value="apple">
     <SelectTrigger />
     <SelectContent>
       <SelectGroup>
diff --git a/docs/examples/social-button/Brand.vue b/docs/examples/social-button/Brand.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { SocialButton } from '#addons'
+</script>
+
+<template>
+  <div class="flex items-center flex-wrap gap-2">
+    <SocialButton brand="google">Sign in with Google</SocialButton>
+    <SocialButton brand="github">Sign in with GitHub</SocialButton>
+    <SocialButton brand="facebook">Sign in with Facebook</SocialButton>
+    <SocialButton brand="x">Sign in with X</SocialButton>
+    <SocialButton brand="apple">Sign in with Apple</SocialButton>
+    <SocialButton brand="slack">Sign in with Slack</SocialButton>
+    <SocialButton brand="figma">Sign in with Figma</SocialButton>
+  </div>
+</template>
diff --git a/docs/examples/social-button/Overview.vue b/docs/examples/social-button/Overview.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { SocialButton } from '#addons'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <SocialButton brand="google">Sign in with Google</SocialButton>
+  </div>
+</template>
diff --git a/docs/examples/social-button/Radius.vue b/docs/examples/social-button/Radius.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { SocialButton } from '#addons'
+</script>
+
+<template>
+  <div class="flex items-center flex-wrap gap-2">
+    <SocialButton brand="google" radius="none">Sign in with Google</SocialButton>
+    <SocialButton brand="google" radius="small">Sign in with Google</SocialButton>
+    <SocialButton brand="google" radius="medium">Sign in with Google</SocialButton>
+    <SocialButton brand="google" radius="large">Sign in with Google</SocialButton>
+    <SocialButton brand="google" radius="full">Sign in with Google</SocialButton>
+  </div>
+</template>
diff --git a/docs/examples/social-button/Size.vue b/docs/examples/social-button/Size.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { SocialButton } from '#addons'
+</script>
+
+<template>
+  <div class="flex items-center flex-wrap gap-2">
+    <SocialButton brand="google" size="1">Sign in with Google</SocialButton>
+    <SocialButton brand="google" size="2">Sign in with Google</SocialButton>
+    <SocialButton brand="google" size="3">Sign in with Google</SocialButton>
+    <SocialButton brand="google" size="4">Sign in with Google</SocialButton>
+  </div>
+</template>
diff --git a/docs/examples/social-button/Variant.vue b/docs/examples/social-button/Variant.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { SocialButton } from '#addons'
+</script>
+
+<template>
+  <div class="flex items-center flex-wrap gap-2">
+    <SocialButton brand="google" variant="classic">Sign in with Google</SocialButton>
+    <SocialButton brand="google" variant="solid">Sign in with Google</SocialButton>
+    <SocialButton brand="google" variant="soft">Sign in with Google</SocialButton>
+    <SocialButton brand="google" variant="surface">Sign in with Google</SocialButton>
+    <SocialButton brand="google" variant="outline">Sign in with Google</SocialButton>
+  </div>
+</template>
diff --git a/docs/examples/switch/Color.vue b/docs/examples/switch/Color.vue
@@ -7,10 +7,10 @@ const checked = ref(true)
 
 <template>
   <div class="flex items-center gap-2">
-    <Switch color="indigo" v-model="checked" />
-    <Switch color="cyan" v-model="checked" />
-    <Switch color="orange" v-model="checked" />
-    <Switch color="crimson" v-model="checked" />
-    <Switch color="gray" v-model="checked" />
+    <Switch v-model="checked" color="indigo" />
+    <Switch v-model="checked" color="cyan" />
+    <Switch v-model="checked" color="orange" />
+    <Switch v-model="checked" color="crimson" />
+    <Switch v-model="checked" color="gray" />
   </div>
 </template>
diff --git a/docs/examples/switch/HighContrast.vue b/docs/examples/switch/HighContrast.vue
@@ -7,10 +7,10 @@ const checked = ref(true)
 
 <template>
   <div class="flex items-center gap-2">
-    <Switch color="indigo" high-contrast v-model="checked" />
-    <Switch color="cyan" high-contrast v-model="checked" />
-    <Switch color="orange" high-contrast v-model="checked" />
-    <Switch color="crimson" high-contrast v-model="checked" />
-    <Switch color="gray" high-contrast v-model="checked" />
+    <Switch v-model="checked" color="indigo" high-contrast />
+    <Switch v-model="checked" color="cyan" high-contrast />
+    <Switch v-model="checked" color="orange" high-contrast />
+    <Switch v-model="checked" color="crimson" high-contrast />
+    <Switch v-model="checked" color="gray" high-contrast />
   </div>
 </template>
diff --git a/docs/examples/switch/Radius.vue b/docs/examples/switch/Radius.vue
@@ -7,8 +7,8 @@ const checked = ref(true)
 
 <template>
   <div class="flex items-center gap-2">
-    <Switch radius="none" v-model="checked" />
-    <Switch radius="small" v-model="checked" />
-    <Switch radius="full" v-model="checked" />
+    <Switch v-model="checked" radius="none" />
+    <Switch v-model="checked" radius="small" />
+    <Switch v-model="checked" radius="full" />
   </div>
 </template>
diff --git a/docs/examples/switch/Size.vue b/docs/examples/switch/Size.vue
@@ -7,8 +7,8 @@ const checked = ref(true)
 
 <template>
   <div class="flex items-center gap-2">
-    <Switch size="1" v-model="checked" />
-    <Switch size="2" v-model="checked" />
-    <Switch size="3" v-model="checked" />
+    <Switch v-model="checked" size="1" />
+    <Switch v-model="checked" size="2" />
+    <Switch v-model="checked" size="3" />
   </div>
 </template>
diff --git a/docs/examples/toggle-group/Size.vue b/docs/examples/toggle-group/Size.vue
@@ -7,7 +7,7 @@ const selected = ref<string>('left')
 
 <template>
   <div class="flex items-center gap-2">
-    <ToggleGroupRoot size="1" v-model="selected">
+    <ToggleGroupRoot v-model="selected" size="1">
       <ToggleGroupItem value="left">
         <Icon icon="lucide:align-left" />
       </ToggleGroupItem>
@@ -18,7 +18,7 @@ const selected = ref<string>('left')
         <Icon icon="lucide:align-right" />
       </ToggleGroupItem>
     </ToggleGroupRoot>
-    <ToggleGroupRoot size="2" v-model="selected">
+    <ToggleGroupRoot v-model="selected" size="2">
       <ToggleGroupItem value="left">
         <Icon icon="lucide:align-left" />
       </ToggleGroupItem>
@@ -29,7 +29,7 @@ const selected = ref<string>('left')
         <Icon icon="lucide:align-right" />
       </ToggleGroupItem>
     </ToggleGroupRoot>
-    <ToggleGroupRoot size="3" v-model="selected">
+    <ToggleGroupRoot v-model="selected" size="3">
       <ToggleGroupItem value="left">
         <Icon icon="lucide:align-left" />
       </ToggleGroupItem>
diff --git a/docs/examples/toggle-group/Variant.vue b/docs/examples/toggle-group/Variant.vue
@@ -7,7 +7,7 @@ const selected = ref<string[]>(['left'])
 
 <template>
   <div class="flex items-center gap-2">
-    <ToggleGroupRoot variant="solid" v-model="selected">
+    <ToggleGroupRoot v-model="selected" variant="solid">
       <ToggleGroupItem value="left">
         <Icon icon="lucide:align-left" />
       </ToggleGroupItem>
@@ -18,7 +18,7 @@ const selected = ref<string[]>(['left'])
         <Icon icon="lucide:align-right" />
       </ToggleGroupItem>
     </ToggleGroupRoot>
-    <ToggleGroupRoot variant="soft" v-model="selected">
+    <ToggleGroupRoot v-model="selected" variant="soft">
       <ToggleGroupItem value="left">
         <Icon icon="lucide:align-left" />
       </ToggleGroupItem>
@@ -29,7 +29,7 @@ const selected = ref<string[]>(['left'])
         <Icon icon="lucide:align-right" />
       </ToggleGroupItem>
     </ToggleGroupRoot>
-    <ToggleGroupRoot variant="ghost" v-model="selected">
+    <ToggleGroupRoot v-model="selected" variant="ghost">
       <ToggleGroupItem value="left">
         <Icon icon="lucide:align-left" />
       </ToggleGroupItem>
diff --git a/docs/examples/turnstile/Overview.vue b/docs/examples/turnstile/Overview.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Turnstile } from '#addons'
+
+const token = ref('')
+</script>
+
+<template>
+  <Turnstile sitekey="0x4AAAAAABmL8cu5eZ3JKoY-" v-model="token" />
+</template>
diff --git a/eslint.config.js b/eslint.config.js
@@ -31,7 +31,12 @@ export default defineConfigWithVueTs(
     }
   },
   {
-    files: ['src/**/*.vue', '.vitepress/**/*.vue', 'docs/**/*.vue'],
+    files: [
+      'src/**/*.vue',
+      '.vitepress/**/*.vue',
+      '.vitepress/**/*.ts',
+      'docs/**/*.vue'
+    ],
     rules: {
       'vue/no-v-html': 'off',
       'vue/no-v-text-v-html-on-component': 'off',
diff --git a/src/addons/button/SocialButton.vue b/src/addons/button/SocialButton.vue
diff --git a/src/addons/button/index.ts b/src/addons/button/index.ts
diff --git a/src/addons/iconset/IconifyCollection.vue b/src/addons/iconset/IconifyCollection.vue
diff --git a/src/addons/index.ts b/src/addons/index.ts
diff --git a/src/addons/turnstile/Turnstile.vue b/src/addons/turnstile/Turnstile.vue
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ const inheritProps = computed(() => {`
`51`	`51`	`class="pt-4"`
`52`	`52`	`>`
`53`	`53`	`<CollapsibleTrigger class="font-medium">`
`54`		`- Inherit from Reka UI`
	`54`	`+ Props inherited from Reka UI`
`55`	`55`	`<template #right>`
`56`	`56`	`<CollapsibleIndicator />`
`57`	`57`	`</template>`