oku-ui · Cr0zy07 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
diff --git a/packages/components/aspect-ratio/README.md b/packages/components/aspect-ratio/README.md
@@ -11,4 +11,4 @@ Displays content within a desired ratio.
 $ pnpm add @oku-ui/aspect-ratio
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/aspect-ratio)
+[Documentation](https://oku-ui.com/primitives/components/aspect-ratio)
diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts
@@ -7,12 +7,8 @@ import type { AspectRatioNativeElement } from './props'
 const aspectRatio = defineComponent({
   name: ASPECT_RATIO_NAME,
   inheritAttrs: false,
-  props: {
-    ...aspectRatioProps.props,
-  },
-  emit: {
-    ...aspectRatioProps.emits,
-  },
+  props: aspectRatioProps.props,
+  emit: aspectRatioProps.emits,
   setup(props, { attrs, slots }) {
     const {
       ratio,

diff --git a/packages/components/avatar/README.md b/packages/components/avatar/README.md
@@ -11,4 +11,4 @@ An image element with a fallback for representing the user.
 $ pnpm add @oku-ui/avatar
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/avatar)
+[Documentation](https://oku-ui.com/primitives/components/avatar)
diff --git a/packages/components/avatar/src/avatar-fallback.ts b/packages/components/avatar/src/avatar-fallback.ts
@@ -11,9 +11,7 @@ const avatarFallback = defineComponent({
     ...avatarFallbackProps.props,
     ...scopeAvatarProps,
   },
-  emit: {
-    ...avatarFallbackProps.emits,
-  },
+  emit: avatarFallbackProps.emits,
   setup(props, { attrs, slots }) {
     const {
       scopeOkuAvatar,

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
@@ -11,9 +11,7 @@ const avatar = defineComponent({
     ...avatarProps.props,
     ...scopeAvatarProps,
   },
-  emit: {
-    ...avatarProps.emits,
-  },
+  emit: avatarProps.emits,
   setup(props, { attrs, slots }) {
     const {
       scopeOkuAvatar,

diff --git a/packages/components/avatar/src/props.ts b/packages/components/avatar/src/props.ts
@@ -24,7 +24,7 @@ export const [createAvatarProvide, createAvatarScope] = createProvideScope(AVATA
 
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
 
-export type AvatarProvideValue = {
+type AvatarProvideValue = {
   imageLoadingStatus: Ref<ImageLoadingStatus>
   onImageLoadingStatusChange(status: ImageLoadingStatus): void
 }

diff --git a/packages/components/checkbox/README.md b/packages/components/checkbox/README.md
@@ -1,7 +1,6 @@
 # Checkbox
 A control that allows the user to toggle between checked and not checked.
 
-
 ![@oku-ui/checkbox](./../../../.github/assets/og/oku-checkbox.jpg)
 
 [![Version](https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/checkbox) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/checkbox)
@@ -12,4 +11,4 @@ A control that allows the user to toggle between checked and not checked.
 $ pnpm add @oku-ui/checkbox
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/checkbox)
+[Documentation](https://oku-ui.com/primitives/components/checkbox)
diff --git a/packages/components/checkbox/src/bubble-input.ts b/packages/components/checkbox/src/bubble-input.ts
@@ -7,12 +7,8 @@ import type { BubbleInputNativeElement } from './props'
 const bubbleInput = defineComponent({
   name: CHECKBOX_BUBBLE_INPUT_NAME,
   inheritAttrs: false,
-  props: {
-    ...bubbleInputProps.props,
-  },
-  emits: {
-    ...bubbleInputProps.emits,
-  },
+  props: bubbleInputProps.props,
+  emits: bubbleInputProps.emits,
   setup(props, { attrs }) {
     const {
       checked,

diff --git a/packages/components/checkbox/src/checkbox-indicator.ts b/packages/components/checkbox/src/checkbox-indicator.ts
@@ -12,9 +12,7 @@ const checkboxIndicator = defineComponent({
     ...checkboxIndicatorProps.props,
     ...scopeCheckboxProps,
   },
-  emits: {
-    ...checkboxIndicatorProps.emits,
-  },
+  emits: checkboxIndicatorProps.emits,
   setup(props, { attrs, slots }) {
     const {
       scopeOkuCheckbox,

diff --git a/packages/components/checkbox/src/props.ts b/packages/components/checkbox/src/props.ts
@@ -26,11 +26,11 @@ export type CheckboxElement = HTMLButtonElement
 export const [createCheckboxProvider, createCheckboxScope] = createProvideScope(CHECKBOX_NAME)
 
 export const [checkboxProvider, useCheckboxInject]
-  = createCheckboxProvider<CheckboxInjectValue>(CHECKBOX_NAME)
+  = createCheckboxProvider<CheckboxProvideValue>(CHECKBOX_NAME)
 
 export type CheckedState = boolean | 'indeterminate'
 
-export type CheckboxInjectValue = {
+type CheckboxProvideValue = {
   state: Ref<CheckedState>
   disabled?: Ref<boolean | undefined>
 }

diff --git a/packages/components/label/README.md b/packages/components/label/README.md
@@ -11,4 +11,4 @@ Renders an accessible label associated with controls.
 $ pnpm add @oku-ui/label
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/label)
+[Documentation](https://oku-ui.com/primitives/components/label)
diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts
@@ -7,15 +7,11 @@ import type { LabelEmits, LabelNativeElement } from './props'
 const label = defineComponent({
   name: LABEL_NAME,
   inheritAttrs: false,
-  props: {
-    ...labelProps.props,
-  },
-  emits: {
-    ...labelProps.emits,
-  },
+  props: labelProps.props,
+  emits: labelProps.emits,
   setup(props, { attrs, slots, emit }) {
     const forwardedRef = useForwardRef()
-    const emits = useListeners(['onMousedown'])
+    const emits = useListeners()
 
     return () => h(Primitive.label, {
       ...mergeProps(attrs, emits),

diff --git a/packages/components/separator/README.md b/packages/components/separator/README.md
@@ -11,4 +11,4 @@ Visually or semantically separates content.
 $ pnpm add @oku-ui/separator
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/separator)
+[Documentation](https://oku-ui.com/primitives/components/separator)
diff --git a/packages/components/separator/src/separator.ts b/packages/components/separator/src/separator.ts
@@ -8,11 +8,9 @@ import type { SeparatorNativeElement } from './props'
 const separator = defineComponent({
   name: SEPARATOR_NAME,
   inheritAttrs: false,
-  props: {
-    ...separatorProps.props,
-  },
+  props: separatorProps.props,
   emits: separatorProps.emits,
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs }) {
     const {
       decorative,
       orientation: orientationProp,
@@ -37,7 +35,7 @@ const separator = defineComponent({
       ...semanticProps.value,
       ...mergeProps(attrs, otherProps, emits),
       'ref': forwardedRef,
-    }, () => slots.default?.())
+    })
   },
 })
 

diff --git a/packages/components/toggle-group/README.md b/packages/components/toggle-group/README.md
@@ -12,4 +12,4 @@ A set of two-state buttons that can be toggled on or off.
 $ pnpm add @oku-ui/toggle-group
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/toggle-group)
+[Documentation](https://oku-ui.com/primitives/components/toggle-group)
diff --git a/packages/components/toggle-group/src/stories/Chromatic.vue b/packages/components/toggle-group/src/stories/Chromatic.vue
@@ -147,7 +147,7 @@ import { OkuDirectionProvider } from '@oku-ui/direction'
   <OkuToggleGroup
     type="multiple"
     class="toggle-group"
-    default-value="['1', '2']"
+    :default-value="['1', '2']"
     :disabled="false"
   >
     <OkuToggleGroupItem value="1" class="toggle-group-attr-styles">
@@ -168,7 +168,7 @@ import { OkuDirectionProvider } from '@oku-ui/direction'
   <OkuToggleGroup
     type="multiple"
     class="toggle-group"
-    default-value="['1', '2']"
+    :default-value="['1', '2']"
     :disabled="true"
   >
     <OkuToggleGroupItem value="1" class="toggle-group-attr-styles">

diff --git a/packages/components/toggle-group/src/toggle-group-impl.ts b/packages/components/toggle-group/src/toggle-group-impl.ts
@@ -43,7 +43,7 @@ const toggleGroupImpl = defineComponent({
       disabled,
     })
 
-    return () => [rovingFocus
+    return () => [rovingFocus.value
       ? h(OkuRovingFocusGroup, {
         asChild: true,
         ...rovingFocusGroupScope,

diff --git a/packages/components/toggle-group/src/toggle-group-item-impl.ts b/packages/components/toggle-group/src/toggle-group-item-impl.ts
@@ -32,8 +32,8 @@ const toggleGroupItemImpl = defineComponent({
       ...typeProps.value,
       ...mergeProps(attrs, otherProps, emits),
       ref: forwardedRef,
-      onPressedChange: (pressed) => {
-        if (pressed)
+      onPressedChange: (_pressed) => {
+        if (_pressed)
           valueInject.onItemActivate(value.value!)
         else
           valueInject.onItemDeactivate(value.value!)

diff --git a/packages/components/toggle-group/tests/__snapshots__/toggle-group.test.ts.snap b/packages/components/toggle-group/tests/__snapshots__/toggle-group.test.ts.snap
@@ -32,9 +32,9 @@ exports[`okuToggleGroup Stories > chromatic > should render correctly 1`] = `
 <h2>Group disabled</h2>
 <oku-toggle-group-stub type=\\"multiple\\" class=\\"toggle-group\\" default-value=\\"1,2\\" disabled=\\"\\"></oku-toggle-group-stub>
 <h2>Group enabled with button override</h2>
-<oku-toggle-group-stub type=\\"multiple\\" class=\\"toggle-group\\" default-value=\\"['1', '2']\\" disabled=\\"false\\"></oku-toggle-group-stub>
+<oku-toggle-group-stub type=\\"multiple\\" class=\\"toggle-group\\" default-value=\\"1,2\\" disabled=\\"false\\"></oku-toggle-group-stub>
 <h2>Group disabled with button override</h2>
-<oku-toggle-group-stub type=\\"multiple\\" class=\\"toggle-group\\" default-value=\\"['1', '2']\\" disabled=\\"true\\"></oku-toggle-group-stub>"
+<oku-toggle-group-stub type=\\"multiple\\" class=\\"toggle-group\\" default-value=\\"1,2\\" disabled=\\"true\\"></oku-toggle-group-stub>"
 `;
 
 exports[`okuToggleGroup Stories > multiple > should render correctly 1`] = `

diff --git a/packages/components/toggle/README.md b/packages/components/toggle/README.md
@@ -11,4 +11,4 @@ A two-state button that can be either on or off.
 $ pnpm add @oku-ui/toggle
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/toggle)
+[Documentation](https://oku-ui.com/primitives/components/toggle)
diff --git a/packages/components/toolbar/README.md b/packages/components/toolbar/README.md
@@ -3,7 +3,7 @@ A container for grouping a set of controls, such as buttons, toggle groups or dr
 
 ![@oku-ui/toolbar](./../../../.github/assets/og/oku-toolbar.jpg)
 
-<span><a href="https://www.npmjs.com/package/@oku-ui/toolbar "><img src="https://img.shields.io/npm/v/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toolbar"> <img src="https://img.shields.io/npm/dm/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toolbar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+[![Version](https://img.shields.io/npm/v/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/toolbar) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/toolbar)
 
 ## Installation
 

diff --git a/packages/components/toolbar/src/index.ts b/packages/components/toolbar/src/index.ts
@@ -1,60 +1,45 @@
-export {
-  OkuToolbar,
-} from './toolbar'
+export { OkuToolbar } from './toolbar'
+export { OkuToolbarSeparator } from './toolbar-separator'
+export { OkuToolbarButton } from './toolbar-button'
+export { OkuToolbarLink } from './toolbar-link'
+export { OkuToolbarToggleGroup } from './toolbar-toggle-group'
+export { OkuToolbarToggleItem } from './toolbar-toggleI-item'
 
 export type {
   ToolbarProps,
   ToolbarElement,
-  ToolbarNaviteElement,
-} from './toolbar'
+  ToolbarNativeElement,
+} from './props'
 
-export {
-  OkuToolbarButton,
-  toolbarButtonProps,
-} from './toolbarButton'
+export type {
+  ToolbarSeparatorProps,
+  ToolbarSeparatorElement,
+  ToolbarSeparatorNativeElement,
+} from './props'
 
 export type {
-  ToolbarButtonElement,
-  ToolbarButtonNaviteElement,
   ToolbarButtonProps,
-} from './toolbarButton'
-
-export {
-  OkuToolbarLink,
-  toolbarLinkProps,
-} from './toolbarLink'
+  ToolbarButtonElement,
+  ToolbarButtonNativeElement,
+} from './props'
 
 export type {
-  ToolbarLinkElement,
   ToolbarLinkProps,
   ToolbarLinkEmits,
-} from './toolbarLink'
-
-export {
-  OkuToolbarSeparator,
-} from './toolbarSeparator'
-
-export type {
-  ToolbarSeparatorNaviteElement,
-  ToolbarSeparatorElement,
-  ToolbarSeparatorProps,
-} from './toolbarSeparator'
-
-export {
-  OkuToolbarToggleGroup,
-  toolbarToggleGroupProps,
-} from './toolbarToggleGroup'
+  ToolbarLinkElement,
+  ToolbarLinkNativeElement,
+} from './props'
 
 export type {
-  ToolbarToggleGroupProps,
-} from './toolbarToggleGroup'
-
-export {
-  OkuToolbarToggleItem,
-  toolbarToggleItemProps,
-} from './toolbarToggleItem'
+  ToolbarToggleGroupSingleProps,
+  ToolbarToggleGroupMultipleProps,
+  ToolbarToggleGroupElement,
+  ToolbarToggleGroupNativeElement,
+} from './props'
 
 export type {
-  ToolbarToggleItemNaviteElement,
   ToolbarToggleItemProps,
-} from './toolbarToggleItem'
+  ToolbarToggleItemEmits,
+  ToolbarToggleItemElement,
+  ToolbarToggleItemNativeElement,
+} from './props'