feat: add icon button preset

Author: mu29

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

@@ -1,8 +1,6 @@
-import { getClassNameFactory } from '../../utils';
+import { CopyIcon, TrashIcon } from 'lucide-react';
+import { HStack, IconButton, Text } from '../../preset';
 import { useEditing } from '../EditingContext';
-import styles from './ActiveBlockControl.module.css';
-
-const getClassName = getClassNameFactory('ActiveBlockControl', styles);
 
 export const ActiveBlockControl = () => {
   const { activeBlock, duplicateActiveBlock, removeActiveBlock } = useEditing();
@@ -12,20 +10,22 @@ export const ActiveBlockControl = () => {
   }
 
   return (
-    <div className={getClassName()}>
-      <h2 className={getClassName('Title')}>{activeBlock?.type}</h2>
-      <div className={getClassName('Actions')}>
-        <button type="button" className={getClassName('ActionItem')} onClick={duplicateActiveBlock}>
-          <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 640 640">
-            <path d="M288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448L480 448C515.3 448 544 419.3 544 384L544 183.4C544 166 536.9 149.3 524.3 137.2L466.6 81.8C454.7 70.4 438.8 64 422.3 64L288 64zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L352 496L352 512L160 512L160 256L176 256L176 192L160 192z" />
-          </svg>
-        </button>
-        <button type="button" className={getClassName('ActionItem')} onClick={removeActiveBlock}>
-          <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 640 640">
-            <path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z" />
-          </svg>
-        </button>
-      </div>
-    </div>
+    <HStack
+      alignHorizontal="between"
+      alignVertical="center"
+      padding={{ top: 10, bottom: 10, left: 12, right: 10 }}
+    >
+      <Text size="md" weight="semibold" color="on-surface">
+        {activeBlock.type}
+      </Text>
+      <HStack>
+        <IconButton size="sm" onClick={duplicateActiveBlock}>
+          <CopyIcon />
+        </IconButton>
+        <IconButton size="sm" onClick={removeActiveBlock}>
+          <TrashIcon />
+        </IconButton>
+      </HStack>
+    </HStack>
   );
 };

packages/react/src/editor/ActiveBlockControl/ActiveBlockControl.tsx

@@ -10,6 +10,7 @@
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
+  cursor: pointer;
   transition:
     background-color 0.15s,
     opacity 0.15s;
@@ -48,6 +49,15 @@
   background-color: var(--composify-palette-surface-button);
 }
 
+.button--variant-ghost {
+  background-color: transparent;
+  color: var(--composify-palette-on-surface);
+}
+
+.button--variant-ghost:hover {
+  opacity: 0.7;
+}
+
 .button--size-sm {
   height: 32px;
   padding: 0 12px;

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

@@ -3,7 +3,7 @@ import { createVariants } from '../../utils';
 import styles from './Button.module.css';
 
 type Props = ComponentProps<'button'> & {
-  variant: 'primary' | 'secondary' | 'outline';
+  variant: 'primary' | 'secondary' | 'outline' | 'ghost';
   size: 'sm' | 'md' | 'lg';
 };
 

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

@@ -21,6 +21,10 @@ Catalog.register('Button', {
           label: 'Outline',
           value: 'outline',
         },
+        {
+          label: 'Ghost',
+          value: 'ghost',
+        },
       ],
       default: 'primary',
     },

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

@@ -0,0 +1,53 @@
+.iconButton {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.iconButton:disabled {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.iconButton:hover {
+  opacity: 0.7;
+}
+
+.iconButton--size-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.iconButton--size-sm > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.iconButton--size-md {
+  width: 36px;
+  height: 36px;
+}
+
+.iconButton--size-md > svg {
+  width: 18px;
+  height: 18px;
+}
+
+.iconButton--size-lg {
+  width: 42px;
+  height: 42px;
+}
+
+.iconButton--size-lg > svg {
+  width: 20px;
+  height: 20px;
+}

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

@@ -0,0 +1,13 @@
+import type { ComponentProps, FC } from 'react';
+import { createVariants } from '../../utils';
+import styles from './IconButton.module.css';
+
+type Props = ComponentProps<'button'> & {
+  size: 'sm' | 'md' | 'lg';
+};
+
+const variants = createVariants(styles);
+
+export const IconButton: FC<Props> = ({ className, size, ...props }) => (
+  <button className={variants('iconButton', { className, size })} {...props} />
+);

packages/react/src/preset/IconButton/IconButton.tsx

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

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

@@ -1,5 +1,6 @@
 export { Button } from './Button';
 export { HStack } from './HStack';
+export { IconButton } from './IconButton';
 export { Input } from './Input';
 export { Segment } from './Segment';
 export { Select } from './Select';