chore: use Button and Segment component

Author: mu29

packages/docs/public/brand/logo-dark.png

@@ -5,6 +5,8 @@ import { createVariants } from '../../utils';
 import { useEditing } from '../EditingContext';
 import styles from './PropertyControl.module.css';
 
+const variants = createVariants(styles);
+
 type Props<SpecValue, Value = SpecValue> = {
   name: string;
   spec: PropertySpec<SpecValue>;
@@ -16,8 +18,6 @@ type Props<SpecValue, Value = SpecValue> = {
   renderInput: (value: Value, onChange: (value?: Value) => void) => ReactNode;
 };
 
-const variants = createVariants(styles);
-
 export const PropertyControl = <SpecValue, Value = SpecValue>({
   name,
   spec,

packages/react/src/editor/PropertyControl/PropertyControl.tsx

@@ -1,5 +1,7 @@
 /** biome-ignore-all lint/suspicious/noExplicitAny: for arbitrary values */
 /** biome-ignore-all lint/suspicious/noArrayIndexKey: array item should use index as a key */
+import { PlusIcon } from 'lucide-react';
+import { Button, VStack } from '../../preset';
 import type { ArrayPropertySpec } from '../../renderer';
 import { getClassNameFactory } from '../../utils';
 import { PropertyControl } from '../PropertyControl';
@@ -44,7 +46,7 @@ export const PropertyControlArray = ({ name, spec, ...props }: Props) => (
       };
 
       return (
-        <div className={getClassName()}>
+        <VStack gap={8}>
           {values.map((value, index) => (
             <div
               key={`${name}-${index}`}
@@ -164,12 +166,10 @@ export const PropertyControlArray = ({ name, spec, ...props }: Props) => (
               </button>
             </div>
           ))}
-          <button type="button" onClick={handleClickAdd} className={getClassName('AddButton')}>
-            <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 640 640">
-              <path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z" />
-            </svg>
-          </button>
-        </div>
+          <Button variant="secondary" size="sm" onClick={handleClickAdd}>
+            <PlusIcon />
+          </Button>
+        </VStack>
       );
     }}
   />

packages/react/src/editor/PropertyControlArray/PropertyControlArray.tsx

@@ -1,7 +1,6 @@
+import { Segment } from '../../preset';
 import type { BooleanPropertySpec } from '../../renderer';
-import { getClassNameFactory } from '../../utils';
 import { PropertyControl } from '../PropertyControl';
-import styles from './PropertyControlBoolean.module.css';
 
 type Props = {
   name: string;
@@ -11,30 +10,21 @@ type Props = {
   onChange?: (name: string, value?: boolean) => void;
 };
 
-const getClassName = getClassNameFactory('PropertyControlBoolean', styles);
-
 export const PropertyControlBoolean = ({ spec, ...props }: Props) => (
   <PropertyControl<boolean>
     {...props}
     spec={spec}
     defaultValue={spec.default ?? false}
     renderInput={(value, onChange) => (
-      <div className={getClassName('ButtonGroup')}>
-        <button
-          type="button"
-          className={getClassName('Button', { active: value === true })}
-          onClick={() => onChange(true)}
-        >
-          Yes
-        </button>
-        <button
-          type="button"
-          className={getClassName('Button', { active: value === false })}
-          onClick={() => onChange(false)}
-        >
-          No
-        </button>
-      </div>
+      <Segment
+        size="sm"
+        options={[
+          { label: 'Yes', value: true },
+          { label: 'No', value: false },
+        ]}
+        value={value}
+        onChange={onChange}
+      />
     )}
   />
 );

packages/react/src/editor/PropertyControlBoolean/PropertyControlBoolean.module.css

@@ -13,33 +13,33 @@ export const BasicUsage = () => {
         spec={{
           type: 'custom',
           label: 'Image',
+          default: '',
           render: (value, onChange) => (
             <>
               <style>
                 {`
               .file-input {
                 display: block;
                 width: 100%;
-                font-size: 0.875rem;
-                line-height: 1.4;
-                color: var(--docs-color-secondary);
-                border: 1px solid var(--docs-color-outline);
+                font-size: 13px;
+                color: var(--composify-palette-secondary);
+                border: 1px solid var(--composify-palette-outline);
                 border-radius: 4px;
                 cursor: pointer;
-                background-color: var(--docs-color-surface-container-low);
+                background-color: var(--composify-palette-surface-container-low);
                 padding: 0;
               }
 
               .file-input::file-selector-button {
+                height: 32px;
                 margin-right: 16px;
-                padding: 8px 16px;
+                padding: 0 16px;
                 border: 0;
                 border-top-left-radius: 4px;
                 border-bottom-left-radius: 4px;
-                font-size: 0.875rem;
-                line-height: 1.4;
+                font-size: 13px;
                 font-weight: 600;
-                background-color: var(--docs-color-secondary);
+                background-color: var(--composify-palette-secondary);
                 color: white;
                 cursor: pointer;
                 transition: opacity 0.1s;

packages/react/src/editor/PropertyControlBoolean/PropertyControlBoolean.tsx

@@ -55,16 +55,31 @@
   font-size: 12px;
 }
 
+.button--size-sm > svg {
+  width: 16px;
+  height: 16px;
+}
+
 .button--size-md {
   height: 36px;
   padding: 0 12px;
   gap: 6px;
   font-size: 14px;
 }
 
+.button--size-md > svg {
+  width: 18px;
+  height: 18px;
+}
+
 .button--size-lg {
   height: 42px;
   padding: 0 16px;
   gap: 8px;
   font-size: 14px;
 }
+
+.button--size-lg > svg {
+  width: 20px;
+  height: 20px;
+}