From edf26ad8e231e705354e6849decdda2ef683e400 Mon Sep 17 00:00:00 2001
From: lerte smith <lerte@qq.com>
Date: Sun, 10 Nov 2024 20:48:47 +0800
Subject: [PATCH] CheckboxGroup

---
 apps/docs/src/usages/checkbox.tsx             | 31 +++++++-----
 .../src/components/Checkbox/CheckboxGroup.tsx | 50 +++++++++++++++++++
 .../actify/src/components/Checkbox/index.ts   |  1 +
 3 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 packages/actify/src/components/Checkbox/CheckboxGroup.tsx

diff --git a/apps/docs/src/usages/checkbox.tsx b/apps/docs/src/usages/checkbox.tsx
index 22fe1ab..3c0abf6 100644
--- a/apps/docs/src/usages/checkbox.tsx
+++ b/apps/docs/src/usages/checkbox.tsx
@@ -1,18 +1,25 @@
-import React, { useEffect, useState } from 'react'
+import { Checkbox, CheckboxGroup } from 'actify'
 
-import { Checkbox } from 'actify'
+import React from 'react'
 
 export default () => {
   return (
-    <div className="flex flex-wrap gap-4">
-      <Checkbox isIndeterminate aria-label="isIndeterminate" />
-      <Checkbox color="primary" defaultSelected>
-        Primary
-      </Checkbox>
-      <Checkbox color="secondary" aria-label="secondary" />
-      <Checkbox color="tertiary" aria-label="tertiary" />
-      <Checkbox color="error" aria-label="error" />
-      <Checkbox isDisabled aria-label="isDisabled" />
-    </div>
+    <>
+      <div className="flex flex-wrap gap-4">
+        <Checkbox isIndeterminate aria-label="isIndeterminate" />
+        <Checkbox color="primary" defaultSelected>
+          Primary
+        </Checkbox>
+        <Checkbox color="secondary" aria-label="secondary" />
+        <Checkbox color="tertiary" aria-label="tertiary" />
+        <Checkbox color="error" aria-label="error" />
+      </div>
+      <CheckboxGroup label="Project">
+        <Checkbox value="actify">Actify</Checkbox>
+        <Checkbox value="ngroker">Ngroker</Checkbox>
+        <Checkbox value="taildoor">Taildoor</Checkbox>
+        <Checkbox value="hugola">Hugola</Checkbox>
+      </CheckboxGroup>
+    </>
   )
 }
diff --git a/packages/actify/src/components/Checkbox/CheckboxGroup.tsx b/packages/actify/src/components/Checkbox/CheckboxGroup.tsx
new file mode 100644
index 0000000..b0d8cbb
--- /dev/null
+++ b/packages/actify/src/components/Checkbox/CheckboxGroup.tsx
@@ -0,0 +1,50 @@
+import {
+  CheckboxGroupProps,
+  CheckboxGroupState,
+  useCheckboxGroupState
+} from 'react-stately'
+
+import { Label } from '../Label'
+import React from 'react'
+import { useCheckboxGroup } from 'react-aria'
+
+const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(
+  null
+)
+
+interface Props extends CheckboxGroupProps {
+  children?: React.ReactNode
+}
+const CheckboxGroup = (props: Props) => {
+  const { children, label, description } = props
+  const state = useCheckboxGroupState(props)
+  const {
+    groupProps,
+    labelProps,
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors
+  } = useCheckboxGroup(props, state)
+
+  return (
+    <div {...groupProps}>
+      <Label {...labelProps}>{label}</Label>
+      <CheckboxGroupContext.Provider value={state}>
+        {children}
+      </CheckboxGroupContext.Provider>
+      {description && (
+        <div {...descriptionProps} style={{ fontSize: 12 }}>
+          {description}
+        </div>
+      )}
+      {isInvalid && (
+        <div {...errorMessageProps} style={{ color: 'red', fontSize: 12 }}>
+          {validationErrors.join(' ')}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { CheckboxGroup }
diff --git a/packages/actify/src/components/Checkbox/index.ts b/packages/actify/src/components/Checkbox/index.ts
index 94d556f..4c9c941 100644
--- a/packages/actify/src/components/Checkbox/index.ts
+++ b/packages/actify/src/components/Checkbox/index.ts
@@ -1 +1,2 @@
 export { Checkbox } from './Checkbox'
+export { CheckboxGroup } from './CheckboxGroup'