add divider

Author: nerderlyne

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest a feature for this project
-title: "✨"
+title: '✨'
 labels: enhancement
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

components/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.1",
+    "@radix-ui/react-separator": "^1.0.1",
     "@vanilla-extract/css": "^1.6.3",
     "@vanilla-extract/css-utils": "^0.1.1",
     "@vanilla-extract/dynamic": "^2.0.0",

components/src/components/Checkbox/styles.css.ts

@@ -68,38 +68,6 @@ const tone = {
 
 export type Tone = keyof typeof tone
 
-export const checkbox = style({
-  all: 'unset',
-  backgroundColor: vars.colors.background,
-  width: vars.space['10'],
-  height: vars.space['10'],
-  borderRadius: vars.radii.large,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxShadow: `0 0 0 1px ${vars.colors.foregroundSecondary}`,
-
-  selectors: {
-    '&[data-state="checked"]': {
-      backgroundColor: vars.colors.green,
-    },
-    '&[data-disabled]': {
-      backgroundColor: vars.colors.foregroundSecondary,
-    },
-  },
-
-  ':hover': {
-    backgroundColor: vars.colors.background,
-  },
-  ':focus': {
-    boxShadow: `0 0 0 2px ${vars.colors.foregroundSecondary}`,
-  },
-})
-
-export const indicator = style({
-  color: vars.colors.accent,
-})
-
 const variant = {
   primary: style([
     atoms({

components/src/components/Divider/Divider.docs.mdx

@@ -0,0 +1,16 @@
+---
+title: Divider
+description: Visually or semantically separates content.
+---
+
+```tsx
+import { Divider } from '@kalidao/reality'
+```
+
+```tsx live=true expand=true
+<Divider />
+```
+
+## Props
+
+<PropsTable sourceLink={sourceLink} types={types} />

components/src/components/Divider/Divider.snippets.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import { Snippet } from '!/playroom/src/types'
+import { Divider } from './Divider'
+
+export const snippets: Snippet[] = [
+  {
+    name: 'Basic',
+    code: <Divider />,
+  },
+]

components/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import { cleanup, render } from '@/test'
+
+import { Divider } from './Divider'
+
+describe('<Divider />', () => {
+  afterEach(cleanup)
+
+  it('renders', () => {
+    render(<Divider />)
+  })
+})

components/src/components/Divider/Divider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import * as Separator from '@radix-ui/react-separator'
+
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+import * as styles from './styles.css'
+
+type Props = {
+  label?: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export const Divider = ({ label, orientation = 'horizontal' }: Props) => {
+  if (!label)
+    return (
+      <Separator.Root
+        className={styles.variants({
+          orientation,
+        })}
+        orientation={orientation}
+      />
+    )
+
+  return (
+    <Stack align="center" direction={orientation}>
+      <Separator.Root
+        className={styles.variants({
+          orientation,
+        })}
+        orientation={orientation}
+      />
+      <Text>{label}</Text>
+      <Separator.Root className={styles.variants()} orientation={orientation} />
+    </Stack>
+  )
+}
+
+Divider.displayName = 'Divider'

components/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider'

components/src/components/Divider/styles.css.ts

@@ -0,0 +1,26 @@
+import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
+import { style } from '@vanilla-extract/css'
+
+import { vars } from '../../css'
+
+export const variants = recipe({
+  base: style([
+    style({
+      backgroundColor: vars.colors.foregroundSecondary,
+    }),
+  ]),
+  variants: {
+    orientation: {
+      vertical: {
+        height: '100%',
+        width: '1px',
+      },
+      horizontal: {
+        height: '1px',
+        width: '100%',
+      },
+    },
+  },
+})
+
+export type Variants = RecipeVariants<typeof variants>

components/src/components/index.ts

@@ -7,6 +7,7 @@ export { Button } from './Button'
 export { ButtonCard } from './ButtonCard'
 export { Card } from './Card'
 export { Checkbox } from './Checkbox'
+export { Divider } from './Divider'
 export { Field } from './Field'
 export { FieldSet } from './FieldSet'
 export { FileInput } from './FileInput'