feat(components): add accordion headless

apps/kitchen-sink/src/Sandbox.tsx

@@ -4,7 +4,7 @@ import './wdyr'
 
 import { Checkbox, Square, View, YStack, styled } from 'tamagui'
 
-import { SelectDemo, SheetDemo } from '@tamagui/demos'
+import { AccordionHeadlessDemo, SelectDemo, SheetDemo } from '@tamagui/demos'
 import { useState } from 'react'
 import { TextInput, View as RNView } from 'react-native'
 
@@ -20,7 +20,7 @@ export const Sandbox = () => {
           bg: 'green',
         }}
       />
-      {/* <SheetDemo /> */}
+      <AccordionHeadlessDemo />
     </RNView>
   )
 

apps/site/components/demos.tsx

@@ -45,6 +45,11 @@ export const AccordionDemo = lazyDemo(
   () => import('@tamagui/demos/demo/AccordionDemo').then((x) => x.AccordionDemo)
 )
 
+export const AccordionHeadlessDemo = lazyDemo(
+  // @ts-ignore
+  import('@tamagui/demos/demo/AccordionHeadlessDemo').then((x) => x.AccordionHeadlessDemo)
+)
+
 export const ThemeBuilderDemo = lazyDemo(
   // @ts-ignore
   () => import('@tamagui/demos/demo/ThemeBuilderDemo').then((x) => x.ThemeBuilderDemo)

apps/site/data/docs/components/accordion/1.0.0.mdx

@@ -13,13 +13,46 @@ package: accordion
   of content
 </Description>
 
+<Tabs id="type" defaultValue="styled">
+<Tabs.List>
+  <TooltipSimple label="With Tamagui's default styles">
+    <Tabs.Tab value="styled">Styled</Tabs.Tab>
+  </TooltipSimple>
+  <TooltipSimple label="No dependency on Tamagui's core">
+    <Tabs.Tab value="headless" label="No styles and no dependency on Tamagui's styling">Headless</Tabs.Tab>
+  </TooltipSimple>
+</Tabs.List>
+
+
 <HeroContainer>
-  <AccordionDemo />
+  <Tabs.Content
+    value="styled"
+    justifyContent="center"
+    alignItems="center"
+    width="100%"
+  >
+    <AccordionDemo />
+  </Tabs.Content>
+  <Tabs.Content
+    value="headless"
+    justifyContent="center"
+    alignItems="center"
+    width="100%"
+  >
+    <AccordionHeadlessDemo />
+  </Tabs.Content>
 </HeroContainer>
 
-```tsx hero template=Accordion
+<Tabs.Content value="styled">
+  ```tsx hero template=Accordion
 
-```
+````
+</Tabs.Content>
+<Tabs.Content value="headless">
+```tsx hero template=AccordionHeadless
+
+````
+</Tabs.Content>
 
 <Highlights
   features={[
@@ -31,14 +64,30 @@ package: accordion
 
 ## Installation
 
+<Tabs.Content value="styled">
 Accordion is already installed in `tamagui`, or you can install it independently:
 
 ```bash
 npm install @tamagui/accordion
 ```
+</Tabs.Content>
+
+<Tabs.Content value="headless">
+
+To use the headless Accordion, you want to import it from the
+`@tamagui/accordion-headless` package. This package has no dependency on
+`@tamagui/core`, but still works off the react-native APIs.
+This means can bring your own style library.
+
+```bash
+npm install @tamagui/accordion-headless
+```
+
+</Tabs.Content>
 
-## Anatomy
+## Usage
 
+<Tabs.Content value="styled">
 Import all parts and piece them together.
 
 ```jsx
@@ -54,8 +103,18 @@ export default () => (
     </Accordion.Item>
   </Accordion>
 )
+```
+</Tabs.Content>
+<Tabs.Content value="headless">
+
+Using the `useAccordion` and `useAccordionItem` API, you can make your own Accordion from scratch.
+
+```tsx template=AccordionHeadless
+
 ```
 
+</Tabs.Content>
+
 ## API Reference
 
 ### Accordion
@@ -326,3 +385,5 @@ Set the `type` prop to `multiple` to enable opening multiple items at once.
 ## Accessibility
 
 Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion).
+
+</Tabs>

apps/site/data/docs/components/checkbox/1.89.0.mdx

@@ -64,8 +64,8 @@ demoName: Checkbox
 ````
 
 </Tabs.Content>
-  <Tabs.Content value="headless">
-  ```tsx hero template=CheckboxHeadless
+<Tabs.Content value="headless">
+```tsx hero template=CheckboxHeadless
 
 ````
 </Tabs.Content>

packages/accordion-headless/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Radix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/accordion-headless/biome.json

@@ -0,0 +1 @@
+../../biome.json

packages/accordion-headless/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@tamagui/accordion-headless",
+  "version": "1.97.1",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "lint": "../../node_modules/.bin/biome check src",
+    "lint:fix": "../../node_modules/.bin/biome check --apply-unsafe src"
+  },
+  "dependencies": {
+    "@tamagui/collapsible": "1.97.1",
+    "@tamagui/collection": "1.97.1",
+    "@tamagui/compose-refs": "1.97.1",
+    "@tamagui/constants": "1.97.1",
+    "@tamagui/core": "1.97.1",
+    "@tamagui/create-context": "1.97.1",
+    "@tamagui/polyfill-dev": "1.97.1",
+    "@tamagui/stacks": "1.97.1",
+    "@tamagui/use-controllable-state": "1.97.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.97.1",
+    "react": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

packages/accordion-headless/src/index.ts

@@ -0,0 +1 @@
+export * from './useAccordion'