feat: add select preset

Author: mu29

packages/react/src/editor/PropertyControlSelect/PropertyControlSelect.tsx

@@ -1,7 +1,6 @@
+import { Select } from '../../preset';
 import type { SelectPropertySpec } from '../../renderer';
-import { getClassNameFactory } from '../../utils';
 import { PropertyControl } from '../PropertyControl';
-import styles from './PropertyControlSelect.module.css';
 
 type Props<Value> = {
   name: string;
@@ -11,30 +10,22 @@ type Props<Value> = {
   onChange?: (name: string, value?: Value) => void;
 };
 
-const getClassName = getClassNameFactory('PropertyControlSelect', styles);
-
 export const PropertyControlSelect = <Value,>({ name, spec, ...props }: Props<Value>) => (
   <PropertyControl<Value>
     {...props}
     name={name}
     spec={spec}
     defaultValue={spec.default ?? spec.options[0].value}
     renderInput={(value, onChange) => (
-      <select
-        className={getClassName()}
+      <Select
+        options={spec.options.map((option, index) => ({ label: option.label, value: index }))}
         value={String(spec.options.findIndex((option) => option.value === value))}
         onChange={(event) => {
           const index = Number(event.target.value);
 
           onChange(spec.options[index].value);
         }}
-      >
-        {spec.options.map((option, index) => (
-          <option key={option.label} value={index}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+      />
     )}
   />
 );

packages/react/src/preset/HStack/HStack.tsx

@@ -2,6 +2,8 @@ import type { FC, PropsWithChildren } from 'react';
 import { createVariants } from '../../utils';
 import styles from './HStack.module.css';
 
+const variants = createVariants(styles);
+
 type Props = PropsWithChildren<{
   className?: string;
   alignHorizontal?: 'start' | 'end' | 'center' | 'between' | 'around';
@@ -21,8 +23,6 @@ type Props = PropsWithChildren<{
   background?: string;
 }>;
 
-const variants = createVariants(styles);
-
 export const HStack: FC<Props> = ({
   className,
   alignHorizontal,

packages/react/src/preset/HStack/HStackCatalog.tsx

@@ -14,6 +14,7 @@ import { HStack } from './HStack';
 
 Catalog.register('HStack', {
   component: HStack,
+  category: 'Layout',
   props: {
     alignHorizontal: {
       group: 'Layout',

packages/react/src/preset/Input/Input.tsx

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

packages/react/src/preset/Segment/Segment.tsx

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react';
 import { createVariants } from '../../utils';
 import styles from './Segment.module.css';
 
+const variants = createVariants(styles);
+
 type Props<Value> = {
   className?: string;
   size: 'sm' | 'md';
@@ -13,8 +15,6 @@ type Props<Value> = {
   onChange: (value: Value) => void;
 };
 
-const variants = createVariants(styles);
-
 export const Segment = <Value,>({
   className,
   size,

…lSelect/PropertyControlSelect.module.css …eact/src/preset/Select/Select.module.csspackages/react/src/editor/PropertyControlSelect/PropertyControlSelect.module.css renamed to packages/react/src/preset/Select/Select.module.css packages/react/src/editor/PropertyControlSelect/PropertyControlSelect.module.css renamed to packages/react/src/preset/Select/Select.module.css

@@ -1,18 +1,30 @@
-.PropertyControlSelect {
-  flex: 1;
-  padding: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.4;
-  appearance: none;
-  outline: none;
-  border: 1px solid var(--composify-palette-outline);
-  border-radius: 0.25rem;
+.select {
+  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: url("data:image/svg+xml;utf8,<svg fill='gray' width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M5.25 7.25L10 12l4.75-4.75z'/></svg>")
     no-repeat right 0.5rem center;
   background-color: var(--composify-palette-surface-container-low);
+  transition: border-color 0.15s;
+  appearance: none;
+  outline: none;
 }
 
-.PropertyControlSelect:focus {
+.select:focus-visible {
   border-color: var(--composify-palette-primary);
 }
+
+.select:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.select::placeholder {
+  color: var(--composify-palette-on-surface-variant);
+}

packages/react/src/preset/Select/Select.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps, FC } from 'react';
+import { createVariants } from '../../utils';
+import styles from './Select.module.css';
+
+const variants = createVariants(styles);
+
+type Props = ComponentProps<'select'> & {
+  options: {
+    label: string;
+    value: number | string;
+  }[];
+};
+
+export const Select: FC<Props> = ({ className, options, ...props }) => (
+  <select className={variants('select', { className })} {...props}>
+    {options.map((option) => (
+      <option key={option.value} value={option.value}>
+        {option.label}
+      </option>
+    ))}
+  </select>
+);

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

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

packages/react/src/preset/VStack/VStack.tsx

@@ -2,6 +2,8 @@ import type { FC, PropsWithChildren } from 'react';
 import { createVariants } from '../../utils';
 import styles from './VStack.module.css';
 
+const variants = createVariants(styles);
+
 type Props = PropsWithChildren<{
   className?: string;
   alignHorizontal?: 'stretch' | 'start' | 'end' | 'center';
@@ -21,8 +23,6 @@ type Props = PropsWithChildren<{
   background?: string;
 }>;
 
-const variants = createVariants(styles);
-
 export const VStack: FC<Props> = ({
   className,
   alignHorizontal,

packages/react/src/preset/VStack/VStackCatalog.tsx

@@ -14,6 +14,7 @@ import { VStack } from './VStack';
 
 Catalog.register('VStack', {
   component: VStack,
+  category: 'Layout',
   props: {
     alignHorizontal: {
       group: 'Layout',