divider component

apps/docs/src/usages/divider.tsx

@@ -3,7 +3,7 @@ import { Divider } from 'actify'
 export default () => {
   return (
     <div className="flex flex-col gap-2">
-      <Divider />
+      <Divider insetStart insetEnd />
     </div>
   )
 }

packages/actify/src/components/Divider/Divider.tsx

@@ -1,11 +1,23 @@
-import { MdDivider } from '@material/web/all'
 import React from 'react'
-import { createComponent } from '@lit/react'
+import clsx from 'clsx'
+import styles from './actify.module.css'
 
-const Divider = createComponent({
-  react: React,
-  tagName: 'md-divider',
-  elementClass: MdDivider
-})
+interface DividerProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+  inset?: boolean
+  insetStart?: boolean
+  insetEnd?: boolean
+}
+const Divider = (props: DividerProps) => {
+  const { className, inset, insetStart, insetEnd, ...rest } = props
+
+  const classes = clsx(
+    styles['divider'],
+    inset && styles['inset'],
+    insetStart && styles['inset-start'],
+    insetEnd && styles['inset-end']
+  )
+
+  return <div {...rest} className={classes} />
+}
 
 export { Divider }

packages/actify/src/components/Divider/actify.module.css

@@ -0,0 +1,20 @@
+.divider {
+  color: var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));
+  display: flex;
+  height: var(--md-divider-thickness, 1px);
+  width: 100%;
+  &:before {
+    background: currentcolor;
+    content: '';
+    height: 100%;
+    width: 100%;
+  }
+}
+.divider.inset,
+.divider.inset-start {
+  padding-inline-start: 16px;
+}
+.divider.inset,
+.divider.inset-end {
+  padding-inline-end: 16px;
+}