feat: add textarea preset

Author: mu29

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

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

packages/react/src/editor/PropertyControlTextArea/PropertyControlTextArea.tsx

@@ -8,8 +8,10 @@
   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;
+  transition:
+    border-color 0.15s,
+    opacity 0.15s;
 }
 
 .input:focus-visible {

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

@@ -7,7 +7,7 @@ Catalog.register('Text', {
   category: 'Content',
   props: {
     children: {
-      label: 'Text',
+      label: 'Content',
       type: 'textarea',
       default: 'Text',
     },

packages/react/src/preset/Text/TextCatalog.tsx

@@ -0,0 +1,29 @@
+.textarea {
+  width: 100%;
+  min-height: 65px;
+  padding: 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);
+  outline: none;
+  field-sizing: content;
+  transition:
+    border-color 0.15s,
+    opacity 0.15s;
+}
+
+.textarea:focus-visible {
+  border-color: var(--composify-palette-primary);
+}
+
+.textarea:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.textarea::placeholder {
+  color: var(--composify-palette-on-surface-variant);
+}

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

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

packages/react/src/preset/Textarea/Textarea.tsx

@@ -0,0 +1 @@
+export { Textarea } from './Textarea';

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

@@ -4,4 +4,5 @@ export { Input } from './Input';
 export { Segment } from './Segment';
 export { Select } from './Select';
 export { Text } from './Text';
+export { Textarea } from './Textarea';
 export { VStack } from './VStack';