feat: add separator preset

Author: mu29

packages/react/src/editor/PanelRight/PanelRight.tsx

@@ -1,4 +1,5 @@
 import type { FC, ReactNode } from 'react';
+import { Separator } from '../../preset';
 import { getClassNameFactory } from '../../utils';
 import { ActiveBlockControl } from '../ActiveBlockControl';
 import { type EditMode, EditorControl } from '../EditorControl';
@@ -24,6 +25,7 @@ export const PanelRight: FC<Props> = ({ mode, setMode, renderControl, onSubmit }
       onSubmit={onSubmit}
     />
     <ActiveBlockControl />
+    <Separator orientation="horizontal" />
     <PropertyLibrary />
     <Outline />
   </section>

packages/react/src/preset/Separator/Separator.module.css

@@ -0,0 +1,14 @@
+.separator {
+  background-color: var(--composify-palette-outline);
+  flex-shrink: 0;
+}
+
+.separator--orientation-horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.separator--orientation-vertical {
+  width: 1px;
+  height: 100%;
+}

packages/react/src/preset/Separator/Separator.tsx

@@ -0,0 +1,14 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createVariants } from '../../utils';
+import styles from './Separator.module.css';
+
+const variants = createVariants(styles);
+
+type Props = PropsWithChildren<{
+  className?: string;
+  orientation: 'horizontal' | 'vertical';
+}>;
+
+export const Separator: FC<Props> = ({ className, orientation, ...props }) => (
+  <div className={variants('separator', { className, orientation })} {...props} />
+);

packages/react/src/preset/Separator/SeparatorCatalog.tsx

@@ -0,0 +1,25 @@
+import { MoveHorizontalIcon, MoveVerticalIcon } from 'lucide-react';
+import { Catalog } from '../../renderer';
+import { Separator } from './Separator';
+
+Catalog.register('Separator', {
+  component: Separator,
+  category: 'Layout',
+  props: {
+    orientation: {
+      label: 'Orientation',
+      type: 'radio',
+      options: [
+        {
+          label: <MoveHorizontalIcon />,
+          value: 'horizontal',
+        },
+        {
+          label: <MoveVerticalIcon />,
+          value: 'vertical',
+        },
+      ],
+      default: 'horizontal',
+    },
+  },
+});

packages/react/src/preset/Separator/index.ts

@@ -0,0 +1,3 @@
+import './SeparatorCatalog';
+
+export { Separator } from './Separator';

packages/react/src/preset/index.ts

@@ -4,6 +4,7 @@ export { IconButton } from './IconButton';
 export { Input } from './Input';
 export { Segment } from './Segment';
 export { Select } from './Select';
+export { Separator } from './Separator';
 export { Text } from './Text';
 export { Textarea } from './Textarea';
 export { VStack } from './VStack';