feat(checkbox): export CheckedState type and add checkbox/combobox to component index

- Exported CheckedState type from the checkbox component for better type management.
- Added checkbox and combobox components to the main component index for easier access.
- Updated Storybook examples to utilize the CheckedState type for controlled checkbox states.

packages/ui/src/components/index.ts

@@ -81,6 +81,8 @@ export { Sortable } from './composites/Sortable'
 
 /* Shadcn Primitive Components */
 export * from './primitives/button'
+export * from './primitives/checkbox'
+export * from './primitives/combobox'
 export * from './primitives/command'
 export * from './primitives/dialog'
 export * from './primitives/popover'

packages/ui/src/components/primitives/checkbox.tsx

@@ -4,6 +4,8 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { CheckIcon } from 'lucide-react'
 import * as React from 'react'
 
+export type CheckedState = CheckboxPrimitive.CheckedState
+
 const checkboxVariants = cva(
   cn(
     'aspect-square shrink-0 rounded-[4px] border transition-all outline-none',

packages/ui/stories/components/primitives/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Bell, Check, FileText, Mail, Shield, Star } from 'lucide-react'
 import { useState } from 'react'
 
-import { Checkbox } from '../../../src/components/primitives/checkbox'
+import { Checkbox, type CheckedState } from '../../../src/components/primitives/checkbox'
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Primitives/Checkbox',
@@ -111,7 +111,7 @@ export const Disabled: Story = {
 // Controlled
 export const Controlled: Story = {
   render: function ControlledExample() {
-    const [checked, setChecked] = useState(false)
+    const [checked, setChecked] = useState<CheckedState>(false)
 
     return (
       <div className="flex flex-col gap-4">
@@ -191,8 +191,8 @@ export const Sizes: Story = {
 // All States
 export const AllStates: Story = {
   render: function AllStatesExample() {
-    const [normalChecked, setNormalChecked] = useState(false)
-    const [checkedState, setCheckedState] = useState(true)
+    const [normalChecked, setNormalChecked] = useState<CheckedState>(false)
+    const [checkedState, setCheckedState] = useState<CheckedState>(true)
 
     return (
       <div className="flex flex-col gap-6">
@@ -524,7 +524,7 @@ export const FormExample: Story = {
           Register
         </button>
 
-        {submitted && (formData.terms && formData.privacy) && (
+        {submitted && formData.terms && formData.privacy && (
           <p className="text-sm text-green-600">Registration successful!</p>
         )}
       </form>