@proteos/ui 0.44.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -55,7 +55,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
-    "@proteos/sdk": "0.44.0"
+    "@proteos/sdk": "0.46.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
@@ -77,8 +77,8 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vitest": "^3.2.4",
-    "@proteos/tsconfig": "0.0.0",
-    "@proteos/biome-config": "0.0.0"
+    "@proteos/biome-config": "0.0.0",
+    "@proteos/tsconfig": "0.0.0"
   },
   "scripts": {
     "lint": "biome check .",

package/src/components/attribute-type-icon/attribute-type-icon.tsx

@@ -13,6 +13,7 @@ import {
   ToggleLeft,
   Type,
   User,
+  UsersRound,
 } from 'lucide-react'
 import { cn } from '../../lib/cn'
 
@@ -49,6 +50,8 @@ import { cn } from '../../lib/cn'
      object    → Braces      ("{ }")
      relation  → Link2       (chain link — foreign-key reference)
      user      → User        (person glyph — platform-user reference)
+     principal → UsersRound  (a party that can HOLD ACCESS — user, team or org;
+                              a group glyph, distinct from `user`'s single person)
      currency  → Banknote    (money — amount + currency_code)
      knowledge-text → BookText (long text stored as a knowledge node)
      file      → Paperclip   (attachment — stored-file reference)
@@ -74,6 +77,7 @@ export const AttributeType = {
   Object: 'object',
   Relation: 'relation',
   User: 'user',
+  Principal: 'principal',
   Currency: 'currency',
   KnowledgeText: 'knowledge-text',
   File: 'file',
@@ -94,6 +98,7 @@ export const ATTRIBUTE_TYPE_ICONS: Record<AttributeType, LucideIcon> = {
   [AttributeType.Object]: Braces,
   [AttributeType.Relation]: Link2,
   [AttributeType.User]: User,
+  [AttributeType.Principal]: UsersRound,
   [AttributeType.Currency]: Banknote,
   [AttributeType.KnowledgeText]: BookText,
   [AttributeType.File]: Paperclip,

package/src/components/avatar/avatar.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Avatar> = {
   component: Avatar,
   tags: ['autodocs'],
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg', 'xl'] },
     tone: { control: 'inline-radio', options: ['paper', 'indigo', 'moss', 'terra', 'slate'] },
   },
 }
@@ -15,6 +15,18 @@ const meta: Meta<typeof Avatar> = {
 export default meta
 type Story = StoryObj<typeof Avatar>
 
+// A self-contained "photo" so the story needs no network: a soft two-tone
+// gradient with a pale disc, roughly the silhouette of a portrait.
+const PORTRAIT_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#5b7052"/><stop offset="1" stop-color="#8a5a3f"/>
+  </linearGradient></defs>
+  <rect width="64" height="64" fill="url(#g)"/>
+  <circle cx="32" cy="26" r="11" fill="#f0efe8" opacity="0.9"/>
+  <ellipse cx="32" cy="54" rx="19" ry="13" fill="#f0efe8" opacity="0.9"/>
+</svg>`
+const PORTRAIT_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(PORTRAIT_SVG)}`
+
 export const Playground: Story = { args: { initials: 'JM' } }
 
 export const Tones: Story = {
@@ -37,6 +49,30 @@ export const Sizes: Story = {
       <Avatar size="sm" initials="SM" />
       <Avatar size="md" initials="MD" />
       <Avatar size="lg" initials="LG" />
+      <Avatar size="xl" initials="XL" />
+    </div>
+  ),
+}
+
+export const WithImage: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex items-end gap-3">
+      <Avatar size="sm" initials="JM" src={PORTRAIT_SRC} alt="Jo Miller" />
+      <Avatar size="md" initials="JM" src={PORTRAIT_SRC} alt="Jo Miller" />
+      <Avatar size="lg" initials="JM" src={PORTRAIT_SRC} alt="Jo Miller" />
+      <Avatar size="xl" initials="JM" src={PORTRAIT_SRC} alt="Jo Miller" />
+    </div>
+  ),
+}
+
+/** A src that 404s — the chip reverts to initials instead of a blank circle. */
+export const ImageFallback: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Avatar initials="JM" src="https://example.invalid/missing.png" />
+      <Avatar tone="indigo" initials="N" src="https://example.invalid/missing.png" />
     </div>
   ),
 }

package/src/components/avatar/avatar.test.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Avatar } from './avatar'
+
+describe('Avatar', () => {
+  it('renders initials when there is no image', () => {
+    render(<Avatar initials="AL" />)
+    expect(screen.getByText('AL')).toBeInTheDocument()
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+  })
+
+  it('renders the image instead of initials when src is set', () => {
+    render(<Avatar initials="AL" src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" alt="Ada" />)
+    expect(screen.getByRole('img', { name: 'Ada' })).toHaveAttribute(
+      'src',
+      expect.stringContaining('data:'),
+    )
+    expect(screen.queryByText('AL')).not.toBeInTheDocument()
+  })
+
+  it('falls back to initials when the image fails to load', () => {
+    render(<Avatar initials="AL" src="https://example.invalid/missing.png" alt="Ada" />)
+    fireEvent.error(screen.getByRole('img', { name: 'Ada' }))
+    expect(screen.getByText('AL')).toBeInTheDocument()
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+  })
+
+  it('retries a new src after a previous one failed', () => {
+    const { rerender } = render(
+      <Avatar initials="AL" src="https://example.invalid/a.png" alt="Ada" />,
+    )
+    fireEvent.error(screen.getByRole('img', { name: 'Ada' }))
+    expect(screen.getByText('AL')).toBeInTheDocument()
+
+    rerender(<Avatar initials="AL" src="https://example.invalid/b.png" alt="Ada" />)
+    expect(screen.getByRole('img', { name: 'Ada' })).toHaveAttribute(
+      'src',
+      'https://example.invalid/b.png',
+    )
+  })
+})

package/src/components/avatar/avatar.tsx

@@ -1,17 +1,20 @@
-import type { HTMLAttributes } from 'react'
+import { type HTMLAttributes, useState } from 'react'
 import { tv, type VariantProps } from 'tailwind-variants'
 
 import { cn } from '../../lib/cn'
 
 /* =========================================================================
    Avatar — round, paper-tinted initials chip. Mono glyph, hairline border.
+   Given a `src` it paints the image over the same chrome and falls back to
+   the initials the moment the image fails to load (missing, forbidden,
+   broken) — a person never renders as a blank circle.
    For square colored "app tiles" use the AppSwitcher's internal tile —
    Avatar is reserved for people.
    ========================================================================= */
 
 export const avatarStyles = tv({
   base: [
-    'inline-grid place-items-center shrink-0 select-none',
+    'inline-grid place-items-center shrink-0 select-none overflow-hidden',
     'rounded-full border',
     'font-mono font-medium tracking-[-0.005em]',
   ],
@@ -20,6 +23,7 @@ export const avatarStyles = tv({
       sm: 'size-[22px] text-[10px]',
       md: 'size-7 text-[12px]',
       lg: 'size-9 text-[13px]',
+      xl: 'size-[120px] text-[34px]',
     },
     tone: {
       paper: 'bg-surface-3 text-ink border-rule',
@@ -37,12 +41,43 @@ export type AvatarProps = HTMLAttributes<HTMLSpanElement> &
   AvatarVariants & {
     /** 1–2 character initials. Ignored if `children` is provided. */
     initials?: string
+    /**
+     * Image URL. Rendered over the chip; on load error the chip reverts to
+     * `children ?? initials`. `null`/`undefined` = no image.
+     */
+    src?: string | null
+    /** Alt text for the image. Defaults to empty — the avatar is decorative. */
+    alt?: string
   }
 
-export function Avatar({ size, tone, initials, className, children, ...props }: AvatarProps) {
+export function Avatar({
+  size,
+  tone,
+  initials,
+  src,
+  alt = '',
+  className,
+  children,
+  ...props
+}: AvatarProps) {
+  // The URL that failed, not a bare flag: a new src automatically gets a
+  // fresh chance without an effect — the error belongs to the URL, not the
+  // person.
+  const [failedSrc, setFailedSrc] = useState<string | null>(null)
+  const showsImage = Boolean(src) && failedSrc !== src
+
   return (
     <span {...props} className={cn(avatarStyles({ size, tone }), className)}>
-      {children ?? initials}
+      {showsImage ? (
+        <img
+          src={src ?? undefined}
+          alt={alt}
+          className="size-full object-cover"
+          onError={() => setFailedSrc(src ?? null)}
+        />
+      ) : (
+        (children ?? initials)
+      )}
     </span>
   )
 }

package/src/components/avatar-group/avatar-group.test.tsx

@@ -18,6 +18,25 @@ describe('AvatarGroup', () => {
     expect(screen.queryByText(/^\+/)).not.toBeInTheDocument()
   })
 
+  it('renders a photo for an item with src and initials for the rest', () => {
+    render(
+      <AvatarGroup
+        avatars={[
+          {
+            initials: 'AB',
+            key: 'a',
+            src: 'data:image/gif;base64,R0lGODlhAQABAAAAACw=',
+            alt: 'Ab',
+          },
+          { initials: 'CD', key: 'b' },
+        ]}
+      />,
+    )
+    expect(screen.getByRole('img', { name: 'Ab' })).toBeInTheDocument()
+    expect(screen.queryByText('AB')).not.toBeInTheDocument()
+    expect(screen.getByText('CD')).toBeInTheDocument()
+  })
+
   it('collapses the overflow into a +N chip', () => {
     render(
       <AvatarGroup

package/src/components/avatar-group/avatar-group.tsx

@@ -25,10 +25,13 @@ export const avatarGroupStyles = tv({
 
 export type AvatarGroupVariants = VariantProps<typeof avatarGroupStyles>
 
-/** One person in the stack — initials plus an optional tone. */
+/** One person in the stack — initials plus an optional tone and photo. */
 export interface AvatarGroupItem {
   initials: string
   tone?: AvatarVariants['tone']
+  /** Photo URL; falls back to `initials` when absent or failing to load. */
+  src?: string | null
+  alt?: string
   /** Stable key (e.g. the participant's external id); falls back to the index. */
   key?: string
 }
@@ -40,14 +43,26 @@ export type AvatarGroupProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>
     max?: number
   }
 
-export function AvatarGroup({ avatars, max = 3, size = 'md', className, ...props }: AvatarGroupProps) {
+export function AvatarGroup({
+  avatars,
+  max = 3,
+  size = 'md',
+  className,
+  ...props
+}: AvatarGroupProps) {
   const shown = avatars.slice(0, max)
   const overflow = avatars.length - shown.length
   return (
     <span {...props} className={cn(avatarGroupStyles({ size }), className)}>
       {shown.map((avatar, index) => (
         <span key={avatar.key ?? index} className="rounded-full ring-[1.5px] ring-surface">
-          <Avatar size={size} tone={avatar.tone ?? 'paper'} initials={avatar.initials} />
+          <Avatar
+            size={size}
+            tone={avatar.tone ?? 'paper'}
+            initials={avatar.initials}
+            src={avatar.src ?? null}
+            alt={avatar.alt ?? ''}
+          />
         </span>
       ))}
       {overflow > 0 && (

package/src/components/badge/badge.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Badge> = {
   argTypes: {
     variant: {
       control: { type: 'inline-radio' },
-      options: ['default', 'neutral', 'active', 'success', 'warning', 'danger'],
+      options: ['default', 'neutral', 'active', 'success', 'warning', 'danger', 'custom'],
     },
   },
 }
@@ -37,6 +37,32 @@ export const AllVariants: Story = {
   ),
 }
 
+/** Schema-driven chrome: `color` tints dot/border/fill (text stays ink),
+ *  `icon` swaps the dot for a Lucide glyph. This is how enum values render. */
+export const WithColorAndIcon: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge icon="Circle" color="#8a8f9c">
+        to do
+      </Badge>
+      <Badge icon="CircleDashed" color="#5b8def">
+        in progress
+      </Badge>
+      <Badge icon="CircleCheck" color="#3f9d6b">
+        done
+      </Badge>
+      <Badge icon="Flame" color="#d94f4f">
+        urgent
+      </Badge>
+      <Badge color="#b07cd8">color only</Badge>
+      <Badge variant="active" icon="Sparkles">
+        icon on a register
+      </Badge>
+    </div>
+  ),
+}
+
 export const InContext: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => (

package/src/components/badge/badge.test.tsx

@@ -33,4 +33,30 @@ describe('Badge', () => {
     expect(screen.getByText('reconciled').className).toContain('ml-3')
     expect(screen.getByText('reconciled').className).toContain('text-success')
   })
+
+  it('tints the chrome from a custom color and keeps ink text', () => {
+    render(
+      <Badge variant="danger" color="#5b8def">
+        in review
+      </Badge>,
+    )
+    const badge = screen.getByText('in review')
+    expect(badge.style.getPropertyValue('--badge-color')).toBe('#5b8def')
+    expect(badge.className).toContain('text-ink-2')
+    expect(badge.className).not.toContain('text-danger')
+  })
+
+  it('replaces the dot with a resolved icon', () => {
+    render(<Badge icon="circle-check">done</Badge>)
+    const badge = screen.getByText('done')
+    expect(badge.querySelector('svg')).not.toBeNull()
+    expect(badge.className).toContain('before:hidden')
+  })
+
+  it('keeps the dot when the icon name is unknown', () => {
+    render(<Badge icon="not-an-icon">done</Badge>)
+    const badge = screen.getByText('done')
+    expect(badge.querySelector('svg')).toBeNull()
+    expect(badge.className).not.toContain('before:hidden')
+  })
 })

package/src/components/badge/badge.tsx

@@ -1,12 +1,19 @@
-import type { HTMLAttributes } from 'react'
+import type { CSSProperties, HTMLAttributes } from 'react'
 import { tv, type VariantProps } from 'tailwind-variants'
 
 import { cn } from '../../lib/cn'
+import { resolveLucideIcon } from '../icon-picker/icon-picker'
 
 /* =========================================================================
    Badge — mono, pill-shaped status chip with a leading dot.
    Matches the Proteos spec's six registers: default, neutral, active (indigo),
    success, warning, danger. Paper-compatible fills — never pure-color.
+
+   Two data-driven escape hatches for schema-defined values (enum options,
+   labels): `color` — a #rrggbb tint that drives the dot, border and fill
+   via color-mix while the text stays ink so any user-picked color keeps
+   its contrast in light/dark/paper; and `icon` — a Lucide name that
+   replaces the dot.
    ========================================================================= */
 
 export const badgeStyles = tv({
@@ -41,14 +48,51 @@ export const badgeStyles = tv({
         'border-[color-mix(in_oklab,var(--color-danger)_40%,var(--color-rule))]',
         'bg-[color-mix(in_oklab,var(--color-danger)_12%,var(--color-surface))]',
       ],
+      // Driven by the `--badge-color` custom property (set from the `color`
+      // prop). Chrome only — text stays ink so contrast never depends on the
+      // picked color.
+      custom: [
+        'text-ink-2 before:bg-[var(--badge-color)]',
+        'border-[color-mix(in_oklab,var(--badge-color)_35%,var(--color-rule))]',
+        'bg-[color-mix(in_oklab,var(--badge-color)_12%,var(--color-surface))]',
+      ],
     },
   },
   defaultVariants: { variant: 'default' },
 })
 
 export type BadgeVariants = VariantProps<typeof badgeStyles>
-export type BadgeProps = HTMLAttributes<HTMLSpanElement> & BadgeVariants
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  BadgeVariants & {
+    /** `#rrggbb` tint. When set it overrides `variant` with the `custom` register. */
+    color?: string
+    /** Lucide icon name (any casing). Replaces the leading dot; unknown names keep the dot. */
+    icon?: string
+  }
+
+/** Icon tone per register — mirrors each variant's `before:bg-*` dot color. */
+const ICON_TONE: Record<NonNullable<BadgeVariants['variant']>, string> = {
+  default: 'text-ink-4',
+  neutral: 'text-ink-3',
+  active: 'text-accent',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-danger',
+  custom: 'text-[var(--badge-color)]',
+}
 
-export function Badge({ variant, className, ...props }: BadgeProps) {
-  return <span {...props} className={cn(badgeStyles({ variant }), className)} />
+export function Badge({ variant, color, icon, className, style, children, ...props }: BadgeProps) {
+  const Icon = icon ? resolveLucideIcon(icon) : null
+  const register: NonNullable<BadgeVariants['variant']> = color ? 'custom' : (variant ?? 'default')
+  const mergedStyle = color ? ({ ...style, '--badge-color': color } as CSSProperties) : style
+  return (
+    <span
+      {...props}
+      style={mergedStyle}
+      className={cn(badgeStyles({ variant: register }), Icon ? 'before:hidden' : null, className)}
+    >
+      {Icon ? <Icon aria-hidden className={cn('size-3 shrink-0', ICON_TONE[register])} /> : null}
+      {children}
+    </span>
+  )
 }

package/src/components/badge-multi-select/badge-multi-select.stories.tsx

@@ -28,6 +28,30 @@ const statuses: BadgeMultiSelectOption<string>[] = [
   { id: 'exception', label: 'exception', variant: 'danger' },
 ]
 
+/** Schema-driven chrome — enum values carry `color` (#rrggbb) and a Lucide
+ *  `icon`; both flow through to the chip and the listbox row. */
+const taskStatuses: BadgeMultiSelectOption<string>[] = [
+  { id: 'to_do', label: 'To Do', icon: 'Circle', color: '#8a8f9c' },
+  { id: 'in_progress', label: 'In Progress', icon: 'CircleDashed', color: '#5b8def' },
+  { id: 'done', label: 'Done', icon: 'CircleCheck', color: '#3f9d6b' },
+  { id: 'blocked', label: 'Blocked', icon: 'OctagonX', color: '#d94f4f' },
+]
+
+export const WithColorAndIcon: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Set<string>>(new Set(['in_progress', 'blocked']))
+    return (
+      <BadgeMultiSelect
+        label="Status"
+        placeholder="Any status"
+        options={taskStatuses}
+        selectedKeys={selected}
+        onSelectionChange={setSelected}
+      />
+    )
+  },
+}
+
 export const Playground: Story = {
   render: () => {
     const [selected, setSelected] = useState<Set<string>>(new Set(['in-transit', 'past-due']))

package/src/components/badge-multi-select/badge-multi-select.tsx

@@ -5,13 +5,13 @@ import { Badge, type BadgeVariants } from '../badge/badge'
 import {
   type FieldAppearance,
   FieldCaret,
+  type FieldSize,
   fieldChipPadding,
   fieldControlStyles,
   fieldErrorStyles,
   fieldHintStyles,
   fieldLabelStyles,
   fieldMinHeight,
-  type FieldSize,
   fieldTextStyles,
 } from '../field/field'
 
@@ -29,9 +29,26 @@ export type BadgeMultiSelectOption<T extends Key = Key> = {
   label: string
   /** Badge color register. Defaults to `default`. */
   variant?: BadgeVariants['variant']
+  /** `#rrggbb` tint — overrides `variant` (see Badge). */
+  color?: string
+  /** Lucide icon name; replaces the badge dot. */
+  icon?: string
   isDisabled?: boolean
 }
 
+/** The Badge chrome props an option carries — spread onto every Badge it renders as. */
+function badgeChrome(option: {
+  variant?: BadgeVariants['variant'] | undefined
+  color?: string | undefined
+  icon?: string | undefined
+}) {
+  return {
+    ...(option.variant ? { variant: option.variant } : {}),
+    ...(option.color ? { color: option.color } : {}),
+    ...(option.icon ? { icon: option.icon } : {}),
+  }
+}
+
 export type BadgeMultiSelectProps<T extends Key = Key> = {
   label?: ReactNode
   description?: ReactNode
@@ -145,7 +162,7 @@ export function BadgeMultiSelect<T extends Key>({
           selectedOptions.map((o) => (
             <RemovableBadge
               key={o.id}
-              variant={o.variant}
+              {...badgeChrome(o)}
               onRemove={() => remove(o.id)}
               isDisabled={isDisabled}
             >
@@ -209,7 +226,7 @@ export function BadgeMultiSelect<T extends Key>({
                 'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
               )}
             >
-              <Badge variant={option.variant}>{option.label}</Badge>
+              <Badge {...badgeChrome(option)}>{option.label}</Badge>
             </ListBoxItem>
           ))}
         </ListBox>
@@ -227,16 +244,20 @@ export function BadgeMultiSelect<T extends Key>({
 function RemovableBadge({
   children,
   variant,
+  color,
+  icon,
   onRemove,
   isDisabled,
 }: {
   children: ReactNode
   variant?: BadgeVariants['variant']
+  color?: string
+  icon?: string
   onRemove: () => void
   isDisabled: boolean
 }) {
   return (
-    <Badge variant={variant}>
+    <Badge {...badgeChrome({ variant, color, icon })}>
       <span>{children}</span>
       <button
         type="button"

package/src/components/color-input/color-input.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Badge } from '../badge/badge'
+import { ColorInput } from './color-input'
+
+const meta: Meta<typeof ColorInput> = {
+  title: 'Components/ColorInput',
+  component: ColorInput,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ColorInput>
+
+function Controlled({ initial }: { initial: string | null }) {
+  const [value, setValue] = useState<string | null>(initial)
+  return (
+    <div className="grid gap-4">
+      <ColorInput
+        label="Color"
+        description="Stored as lowercase #rrggbb. Shorthand and a missing # are accepted."
+        value={value}
+        onChange={setValue}
+      />
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-[11px] text-ink-4">preview</span>
+        <Badge icon="CircleDashed" {...(value ? { color: value } : {})}>
+          in progress
+        </Badge>
+      </div>
+    </div>
+  )
+}
+
+export const Empty: Story = {
+  render: () => <Controlled initial={null} />,
+}
+
+export const Preset: Story = {
+  render: () => <Controlled initial="#5b8def" />,
+}
+
+export const Small: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>('#d94f4f')
+    return <ColorInput size="sm" aria-label="Color" value={value} onChange={setValue} />
+  },
+}
+
+export const Invalid: Story = {
+  render: () => (
+    <ColorInput
+      label="Color"
+      value={null}
+      onChange={() => {}}
+      isInvalid
+      errorMessage="Pick a color."
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => <ColorInput label="Color" value="#3f9d6b" onChange={() => {}} isDisabled />,
+}