@scalepad/ui 0.1.0

package/src/components/IconButton/IconButton.css.ts

@@ -0,0 +1,272 @@
+/**
+ * IconButton component styles – vanilla-extract with semantic design tokens
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { mantineVars } from '../../theme/mantineVars';
+import { tokens } from '../../theme/themeContract.css';
+
+const focusRing = {
+  outline: `2px solid ${tokens.color.stroke.focusStrong}`,
+  outlineOffset: 3,
+};
+
+const outlineBase = style({
+  backgroundColor: tokens.color.background.default,
+  border: `1px solid ${tokens.color.stroke.default}`,
+  color: tokens.color.text.default,
+  transition: 'all 150ms ease',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLight,
+      borderColor: tokens.color.stroke.default,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&:active': {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&:disabled': {
+      backgroundColor: tokens.color.background.default,
+      borderColor: tokens.color.stroke.default,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+      boxShadow: 'none',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      backgroundColor: tokens.color.background.default,
+      borderColor: tokens.color.stroke.default,
+      color: tokens.color.text.default,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+      borderColor: tokens.color.stroke.default,
+    },
+    [`${mantineVars.darkSelector} &:active`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      backgroundColor: tokens.color.background.default,
+      borderColor: tokens.color.stroke.default,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const outlineIconButton = outlineBase;
+
+export const outlineInverseIconButton = style({
+  backgroundColor: tokens.color.background.transparent,
+  borderColor: tokens.color.stroke.inverse,
+  color: tokens.color.text.inverse,
+  transition: 'all 150ms ease',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLight,
+      borderColor: tokens.color.stroke.inverse,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&:disabled': {
+      borderColor: tokens.color.stroke.inverse,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+  },
+});
+
+export const secondaryIconButton = style({
+  backgroundColor: tokens.color.background.subduedLight,
+  color: tokens.color.text.default,
+  transition: 'all 150ms ease',
+  border: `1px solid ${tokens.color.stroke.default}`,
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&:disabled': {
+      backgroundColor: tokens.color.background.subduedLight,
+      color: tokens.color.text.disabledDefault,
+      borderColor: tokens.color.stroke.default,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      backgroundColor: tokens.color.background.subduedLight,
+      color: tokens.color.text.default,
+      borderColor: tokens.color.stroke.default,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      backgroundColor: tokens.color.background.subduedLight,
+      color: tokens.color.text.disabledDefault,
+      borderColor: tokens.color.stroke.default,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const tertiaryIconButton = style({
+  backgroundColor: tokens.color.background.primaryLight,
+  color: tokens.color.text.primaryDefault,
+  transition: 'all 150ms ease',
+  border: 'none',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLightHover,
+    },
+    '&:disabled': {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.primaryLightHover,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const destructiveIconButton = style({
+  backgroundColor: tokens.color.background.dangerFilled,
+  color: tokens.color.text.inverse,
+  transition: 'all 150ms ease',
+  border: 'none',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.dangerFilledHover,
+    },
+    '&:disabled': {
+      backgroundColor: tokens.color.background.disabledDefault,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      backgroundColor: tokens.color.background.dangerFilled,
+      color: tokens.color.text.inverse,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.dangerFilledHover,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      backgroundColor: tokens.color.background.disabledDefault,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const ghostIconButton = style({
+  backgroundColor: 'transparent',
+  color: tokens.color.text.default,
+  transition: 'all 150ms ease',
+  border: 'none',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&:disabled': {
+      backgroundColor: 'transparent',
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.default,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const filledIconButton = style({
+  backgroundColor: tokens.color.background.primaryFilled,
+  color: tokens.color.text.inverse,
+  transition: 'all 150ms ease',
+  border: 'none',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryFilledHover,
+    },
+    '&:disabled': {
+      backgroundColor: tokens.color.background.disabledDefault,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      backgroundColor: tokens.color.background.primaryFilled,
+      color: tokens.color.text.inverse,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.primaryFilledHover,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      backgroundColor: tokens.color.background.disabledDefault,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const ghostMutedIconButton = style({
+  backgroundColor: tokens.color.background.transparent,
+  color: tokens.color.text.subduedStrong,
+  transition: 'all 150ms ease',
+  border: 'none',
+  selectors: {
+    '&:focus-visible': focusRing,
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&:disabled': {
+      backgroundColor: tokens.color.background.transparent,
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.4,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.subduedStrong,
+    },
+    [`${mantineVars.darkSelector} &:hover`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    [`${mantineVars.darkSelector} &:disabled`]: {
+      color: tokens.color.text.disabledDefault,
+      opacity: 0.4,
+    },
+  },
+});

package/src/components/IconButton/IconButton.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+
+import { IconButton } from './IconButton';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  IconButton,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=9%3A775',
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "leftIcon": figma.instance('⮑ Left icon'),
+      // "roundness": figma.enum('Roundness', {
+      //   "Default": "default",
+      //   "Round": "round"
+      // }),
+      // "variant": figma.enum('Variant', {
+      //   "Primary": "primary",
+      //   "Secondary": "secondary",
+      //   "Outline": "outline",
+      //   "Ghost": "ghost",
+      //   "Ghost Muted": "ghost-muted",
+      //   "Destructive": "destructive"
+      // }),
+      // "size": figma.enum('Size', {
+      //   "Regular": "regular",
+      //   "Large": "large",
+      //   "Small": "small",
+      //   "Mini": "mini"
+      // }),
+      // "state": figma.enum('State', {
+      //   "Default": "default",
+      //   "Hover & Active": "hover---active",
+      //   "Focus": "focus",
+      //   "Disabled": "disabled"
+      // })
+    },
+    example: _props => <IconButton aria-label="Add item">+</IconButton>,
+  },
+);

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from 'react';
+
+import {
+  createPolymorphicComponent,
+  ActionIcon as MantineActionIcon,
+  type ActionIconProps as MantineActionIconProps,
+} from '@mantine/core';
+
+import * as iconButtonStyles from './IconButton.css';
+
+import type { ButtonProps } from '../Button';
+
+/** IconButton variant: design system (matches Button) or legacy 'outline'/'filled' for backward compat */
+export type IconButtonVariant = ButtonProps['variant'];
+
+export interface IconButtonProps extends MantineActionIconProps {
+  /** IconButton variant from Figma design system */
+  variant?: IconButtonVariant;
+}
+
+const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ variant = 'outline', className, ...props }, ref) => {
+    let mantineVariant: 'outline' | 'subtle' | 'filled' = 'outline';
+    let mantineColor = props.color;
+    let customClassName = className;
+
+    if (variant === 'primary') {
+      mantineVariant = 'filled';
+      mantineColor = 'dark';
+      customClassName = `${iconButtonStyles.filledIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'secondary') {
+      mantineVariant = 'filled';
+      customClassName = `${iconButtonStyles.secondaryIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'tertiary') {
+      mantineVariant = 'filled';
+      customClassName = `${iconButtonStyles.tertiaryIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'destructive') {
+      mantineVariant = 'filled';
+      customClassName = `${iconButtonStyles.destructiveIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'outline') {
+      mantineVariant = 'outline';
+      customClassName = `${iconButtonStyles.outlineIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'outline-inverse') {
+      mantineVariant = 'outline';
+      mantineColor = 'white';
+      customClassName = `${iconButtonStyles.outlineInverseIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'ghost') {
+      mantineVariant = 'subtle';
+      customClassName = `${iconButtonStyles.ghostIconButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'ghost-muted') {
+      mantineVariant = 'subtle';
+      customClassName = `${iconButtonStyles.ghostMutedIconButton}${className ? ` ${className}` : ''}`;
+    }
+
+    return (
+      <MantineActionIcon
+        ref={ref}
+        variant={mantineVariant}
+        color={mantineColor}
+        className={customClassName}
+        {...props}
+        radius={props.radius ?? 'lg'}
+      />
+    );
+  },
+);
+
+IconButtonBase.displayName = 'IconButton';
+
+export const IconButton = createPolymorphicComponent<'button', IconButtonProps>(
+  IconButtonBase,
+);

package/src/components/IconButton/README.md

@@ -0,0 +1,230 @@
+# IconButton Component
+
+A reusable icon button component that matches the Figma design system specifications. This component wraps Mantine's `ActionIcon` with custom styling that includes shadows, proper colors, hover states, and focus rings.
+
+## Features
+
+- ✅ **Shadow Support**: Includes box-shadow on outline variant (matches Figma design)
+- ✅ **Design System Colors**: Uses semantic color tokens from Figma
+- ✅ **Three Variants**: outline (default), ghost, and filled
+- ✅ **Hover States**: Proper hover and active states
+- ✅ **Focus Visible**: Keyboard navigation support with focus ring
+- ✅ **Disabled State**: Proper disabled styling
+- ✅ **Dark Mode**: Full dark mode support
+- ✅ **Polymorphic**: Can render as different HTML elements
+
+## Usage
+
+```tsx
+import { IconButton } from '@acme/ui';
+import { Copy } from 'lucide-react';
+
+// Outline variant (default) - has shadow
+<IconButton variant="outline" size="lg" radius="lg" onClick={handleCopy}>
+  <Copy size={16} />
+</IconButton>
+
+// Ghost variant - transparent background
+<IconButton variant="ghost" size="lg" radius="lg" onClick={handleSettings}>
+  <Settings size={16} />
+</IconButton>
+
+// Filled variant - solid background
+<IconButton variant="filled" size="lg" radius="lg" onClick={handleDelete}>
+  <Trash2 size={16} />
+</IconButton>
+
+// Disabled state
+<IconButton variant="outline" size="lg" radius="lg" disabled>
+  <Copy size={16} />
+</IconButton>
+```
+
+## Props
+
+Inherits all props from Mantine's `ActionIconProps` plus:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'outline' \| 'ghost' \| 'filled'` | `'outline'` | Visual style variant |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | - | Button size |
+| `radius` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | - | Border radius |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+## Variants
+
+### Outline (Default)
+
+The outline variant is designed to match the Figma specifications exactly:
+
+- White background (`--color-unofficial-outline`)
+- Border with design system color (`--color-general-border`)
+- **Box shadow** (`var(--mantine-shadow-sm)`) - this is what was missing before!
+- Hover: Dark background with white text
+- Active: Darker background
+
+```tsx
+<IconButton variant="outline" size="lg" radius="lg">
+  <Copy size={16} />
+</IconButton>
+```
+
+### Ghost
+
+Transparent background with subtle hover state:
+
+- Transparent background
+- No border
+- No shadow
+- Hover: Subtle background color
+
+```tsx
+<IconButton variant="ghost" size="lg" radius="lg">
+  <Settings size={16} />
+</IconButton>
+```
+
+### Filled
+
+Solid background for primary actions:
+
+- Dark background (`--color-general-primary`)
+- White text
+- No border
+- Hover: Slightly darker background
+
+```tsx
+<IconButton variant="filled" size="lg" radius="lg">
+  <Heart size={16} />
+</IconButton>
+```
+
+## Icon Sizing
+
+Icon size should typically match the button size:
+
+| Button Size | Icon Size |
+|-------------|-----------|
+| `xs` | `12px` |
+| `sm` | `14px` |
+| `md` | `16px` |
+| `lg` | `18px` |
+| `xl` | `20px` |
+
+```tsx
+<IconButton variant="outline" size="lg" radius="lg">
+  <Copy size={18} />  {/* 18px for lg size */}
+</IconButton>
+```
+
+## Common Use Cases
+
+### Copy to Clipboard
+
+```tsx
+<IconButton
+  variant="outline"
+  size="lg"
+  radius="lg"
+  onClick={() => navigator.clipboard.writeText(text)}
+>
+  <Copy size={16} />
+</IconButton>
+```
+
+### Settings Menu
+
+```tsx
+<IconButton
+  variant="ghost"
+  size="lg"
+  radius="lg"
+  onClick={openSettings}
+>
+  <Settings size={16} />
+</IconButton>
+```
+
+### Delete Action
+
+```tsx
+<IconButton
+  variant="filled"
+  size="lg"
+  radius="lg"
+  onClick={handleDelete}
+>
+  <Trash2 size={16} />
+</IconButton>
+```
+
+## Design System Integration
+
+This component uses the following Figma design tokens:
+
+### Colors
+
+- `--color-unofficial-outline` - Background color for outline variant
+- `--color-general-border` - Border color
+- `--color-general-foreground` - Text/icon color
+- `--color-unofficial-outline-hover` - Hover background
+- `--color-unofficial-outline-active` - Active background
+- `--color-general-primary` - Filled variant background
+- `--color-general-primary-foreground` - Filled variant text
+
+### Shadows
+
+- `var(--mantine-shadow-sm)` - Box shadow for outline variant (from Figma shadow tokens)
+
+### Focus Ring
+
+- `--color-focus-ring` - Focus outline color
+
+## Migration Guide
+
+If you're currently using `ActionIcon` directly, you should migrate to `IconButton`:
+
+### Before
+
+```tsx
+import { ActionIcon } from '@acme/ui';
+
+<ActionIcon variant="outline" size="lg" radius="lg">
+  <Copy size={16} />
+</ActionIcon>
+```
+
+### After
+
+```tsx
+import { IconButton } from '@acme/ui';
+
+<IconButton variant="outline" size="lg" radius="lg">
+  <Copy size={16} />
+</IconButton>
+```
+
+The main differences:
+1. ✅ Shadow is now applied automatically to outline variant
+2. ✅ Colors match the Figma design exactly
+3. ✅ Hover states are more refined
+4. ✅ Focus states include proper focus ring
+
+## Accessibility
+
+- Supports keyboard navigation with Tab/Shift+Tab
+- Shows focus ring when focused via keyboard (`:focus-visible`)
+- Can be disabled with proper visual feedback
+- Works with screen readers (use `aria-label` for icon-only buttons)
+
+```tsx
+<IconButton
+  variant="outline"
+  size="lg"
+  radius="lg"
+  aria-label="Copy to clipboard"
+  onClick={handleCopy}
+>
+  <Copy size={16} />
+</IconButton>
+```

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps, IconButtonVariant } from './IconButton';