feat: add button preset

Author: mu29

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

examples/nextjs/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev --turbopack -p 4000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "biome check",
+    "format": "biome format --write"
   },
   "dependencies": {
     "@composify/react": "workspace:*",

packages/react/package.json

@@ -30,6 +30,16 @@
         "default": "./dist/editor/index.js"
       }
     },
+    "./preset": {
+      "import": {
+        "types": "./dist/preset/index.d.mts",
+        "default": "./dist/preset/index.mjs"
+      },
+      "require": {
+        "types": "./dist/preset/index.d.ts",
+        "default": "./dist/preset/index.js"
+      }
+    },
     "./renderer": {
       "import": {
         "types": "./dist/renderer/index.d.mts",
@@ -51,6 +61,8 @@
       }
     },
     "./style.css": "./dist/index.css",
+    "./editor/style.css": "./dist/editor/index.css",
+    "./preset/style.css": "./dist/preset/index.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -74,6 +86,8 @@
     "acorn-jsx": "5.3.2",
     "css-box-model": "1.2.1",
     "es-toolkit": "1.40.0",
+    "lucide-react": "0.546.0",
+    "prettier": "3.6.2",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-element-to-jsx-string": "17.0.1"
@@ -83,13 +97,11 @@
     "@testing-library/react": "16.3.0",
     "@types/react": "19.1.17",
     "@types/react-dom": "19.1.11",
-    "prettier": "3.6.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "prettier": "*",
     "react": "*",
     "react-dom": "*"
   }

packages/react/src/editor/CloudEditorControl/CloudEditorControl.tsx

@@ -1,4 +1,5 @@
 import { type FC, useCallback, useEffect, useRef } from 'react';
+import { Button } from '../../preset';
 import { Bridge, GuestEventType, getClassNameFactory } from '../../utils';
 import styles from './CloudEditorControl.module.css';
 
@@ -30,16 +31,12 @@ export const CloudEditorControl: FC<Props> = ({ getSource }) => {
 
   return (
     <div className={getClassName()}>
-      <button
-        type="button"
-        className={getClassName('SettingsButton')}
-        onClick={handleClickSettings}
-      >
+      <Button type="button" variant="outline" size="sm" onClick={handleClickSettings}>
         Settings
-      </button>
-      <button type="button" className={getClassName('SaveButton')} onClick={handleClickSave}>
+      </Button>
+      <Button type="button" variant="primary" size="sm" onClick={handleClickSave}>
         Save
-      </button>
+      </Button>
     </div>
   );
 };

packages/react/src/editor/Editor/Editor.stories.tsx

@@ -1,6 +1,7 @@
 import { type FC, type PropsWithChildren, useMemo } from 'react';
 import { Catalog } from '../../renderer';
 import { Editor } from './Editor';
+import '../../preset';
 
 type StackProps = PropsWithChildren<{
   flexDirection?: 'row' | 'column';

packages/react/src/editor/EditorControl/EditorControl.tsx

@@ -1,4 +1,5 @@
 import { type FC, type ReactNode, useCallback } from 'react';
+import { Button } from '../../preset';
 import { getClassNameFactory } from '../../utils';
 import { useEditing } from '../EditingContext';
 import styles from './EditorControl.module.css';
@@ -64,9 +65,9 @@ export const EditorControl: FC<Props> = ({ mode, setMode, renderControl, onSubmi
       {renderControl ? (
         renderControl(getSource)
       ) : (
-        <button type="button" className={getClassName('SaveButton')} onClick={handleSubmit}>
+        <Button type="button" variant="primary" size="sm" onClick={handleSubmit}>
           Save
-        </button>
+        </Button>
       )}
     </div>
   );

packages/react/src/index.ts

@@ -1,3 +1,4 @@
 export * from './editor';
+export * from './preset';
 export * from './renderer';
 export * from './utils';

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

@@ -0,0 +1,69 @@
+.container {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  outline: none;
+  border: none;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition-property: background-color, opacity;
+  transition-duration: 0.15s;
+}
+
+.container:disabled {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.container--variant-primary {
+  background-color: var(--composify-palette-primary);
+  color: var(--composify-palette-on-primary);
+}
+
+.container--variant-primary:hover {
+  opacity: 0.9;
+}
+
+.container--variant-secondary {
+  background-color: var(--composify-palette-secondary);
+  color: var(--composify-palette-on-secondary);
+}
+
+.container--variant-secondary:hover {
+  opacity: 0.9;
+}
+
+.container--variant-outline {
+  border: 1px solid var(--composify-palette-outline);
+  background-color: var(--composify-palette-surface);
+  color: var(--composify-palette-on-surface);
+}
+
+.container--variant-outline:hover {
+  background-color: var(--composify-palette-surface-container);
+}
+
+.container--size-xs {
+  height: 32px;
+  padding: 0 12px;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.container--size-sm {
+  height: 36px;
+  padding: 0 12px;
+  gap: 6px;
+  font-size: 14px;
+}
+
+.container--size-md {
+  height: 42px;
+  padding: 0 16px;
+  gap: 8px;
+  font-size: 14px;
+}

packages/react/src/preset/Button/Button.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps, FC } from 'react';
+import { createVariants } from '../../utils';
+import styles from './Button.module.css';
+
+type Props = ComponentProps<'button'> & {
+  variant: 'primary' | 'secondary' | 'outline';
+  size: 'xs' | 'sm' | 'md';
+};
+
+const variants = createVariants(styles);
+
+export const Button: FC<Props> = ({ className, variant, size, ...props }) => (
+  <button className={variants('container', { className, variant, size })} {...props} />
+);

packages/react/src/preset/Button/ButtonCatalog.ts

@@ -0,0 +1,51 @@
+import { Catalog } from '../../renderer';
+import { Button } from './Button';
+
+Catalog.register('Button', {
+  component: Button,
+  props: {
+    variant: {
+      label: 'Variant',
+      type: 'radio',
+      options: [
+        {
+          label: 'Primary',
+          value: 'primary',
+        },
+        {
+          label: 'Secondary',
+          value: 'secondary',
+        },
+        {
+          label: 'Outline',
+          value: 'outline',
+        },
+      ],
+      default: 'primary',
+    },
+    size: {
+      label: 'Size',
+      type: 'radio',
+      options: [
+        {
+          label: 'Extra Small',
+          value: 'xs',
+        },
+        {
+          label: 'Small',
+          value: 'sm',
+        },
+        {
+          label: 'Medium',
+          value: 'md',
+        },
+      ],
+      default: 'md',
+    },
+    children: {
+      label: 'Children',
+      type: 'text',
+      default: 'Button',
+    },
+  },
+});