feat: add input preset

Author: mu29

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

@@ -21,6 +21,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.Editor * {
+  box-sizing: border-box;
+}
+
 .Editor-Divider {
   width: 1px;
   background-color: var(--composify-palette-outline);

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

@@ -48,7 +48,7 @@
 .addButton {
   display: inline-flex;
   align-items: center;
-  height: 36px;
+  height: 32px;
   padding: 0 8px;
   font-size: 12px;
   outline: none;

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

@@ -1,7 +1,6 @@
+import { Input } from '../../preset';
 import type { NumberPropertySpec } from '../../renderer';
-import { getClassNameFactory } from '../../utils';
 import { PropertyControl } from '../PropertyControl';
-import styles from './PropertyControlNumber.module.css';
 
 type Props = {
   name: string;
@@ -11,20 +10,17 @@ type Props = {
   onChange?: (name: string, value?: number) => void;
 };
 
-const getClassName = getClassNameFactory('PropertyControlNumber', styles);
-
 export const PropertyControlNumber = ({ spec, ...props }: Props) => (
   <PropertyControl<number>
     {...props}
     spec={spec}
     defaultValue={spec.default ?? 0}
     renderInput={(value, onChange) => (
-      <input
+      <Input
         type="number"
         size={undefined}
         value={value}
         onChange={(event) => onChange(Number(event.target.value))}
-        className={getClassName()}
       />
     )}
   />

packages/react/src/editor/PropertyControlNumber/PropertyControlNumber.tsx

@@ -1,7 +1,6 @@
+import { Input } from '../../preset';
 import type { TextPropertySpec } from '../../renderer';
-import { getClassNameFactory } from '../../utils';
 import { PropertyControl } from '../PropertyControl';
-import styles from './PropertyControlText.module.css';
 
 type Props = {
   name: string;
@@ -11,20 +10,17 @@ type Props = {
   onChange?: (name: string, value?: string) => void;
 };
 
-const getClassName = getClassNameFactory('PropertyControlText', styles);
-
 export const PropertyControlText = ({ spec, ...props }: Props) => (
   <PropertyControl<string>
     {...props}
     spec={spec}
     defaultValue={spec.default ?? ''}
     renderInput={(value, onChange) => (
-      <input
+      <Input
         type="text"
         placeholder={spec.placeholder}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className={getClassName()}
       />
     )}
   />

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

@@ -10,8 +10,9 @@
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
-  transition-property: background-color, opacity;
-  transition-duration: 0.15s;
+  transition:
+    background-color 0.15s,
+    opacity 0.15s;
 }
 
 .button:disabled {

packages/react/src/editor/PropertyControlText/PropertyControlText.tsx

@@ -6,7 +6,7 @@ Catalog.register('Button', {
   props: {
     variant: {
       label: 'Variant',
-      type: 'radio',
+      type: 'select',
       options: [
         {
           label: 'Primary',
@@ -28,17 +28,17 @@ Catalog.register('Button', {
       type: 'radio',
       options: [
         {
-          label: 'Extra Small',
-          value: 'xs',
-        },
-        {
-          label: 'Small',
+          label: 'S',
           value: 'sm',
         },
         {
-          label: 'Medium',
+          label: 'M',
           value: 'md',
         },
+        {
+          label: 'L',
+          value: 'lg',
+        },
       ],
       default: 'md',
     },

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

@@ -0,0 +1,27 @@
+.input {
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  padding: 0 8px;
+  font-size: 13px;
+  color: var(--composify-palette-on-surface);
+  border-radius: 4px;
+  border: 1px solid var(--composify-palette-outline);
+  background-color: var(--composify-palette-surface-container-low);
+  transition: border-color 0.15s;
+  outline: none;
+}
+
+.input:focus-visible {
+  border-color: var(--composify-palette-primary);
+}
+
+.input:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.input::placeholder {
+  color: var(--composify-palette-on-surface-variant);
+}

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

@@ -0,0 +1,11 @@
+import type { ComponentProps, FC } from 'react';
+import { createVariants } from '../../utils';
+import styles from './Input.module.css';
+
+type Props = ComponentProps<'input'>;
+
+const variants = createVariants(styles);
+
+export const Input: FC<Props> = ({ className, ...props }) => (
+  <input className={variants('input', { className })} {...props} />
+);