@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/components/common/inputs/PaletteDropdown.tsx

@@ -0,0 +1,413 @@
+import { useCallback, useMemo, useState, type FormEvent } from 'react'
+import { ChevronDown, Plus } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
+import { useSelectMenuAnchor } from '../dropdown/useSelectMenuAnchor.js'
+
+export interface PaletteDropdownPalette {
+  id: string
+  label: string
+  colors: readonly string[]
+  custom?: boolean
+}
+
+export interface PaletteDropdownCreatePayload {
+  label: string
+  colors: string[]
+}
+
+export interface PaletteDropdownProps {
+  label?: string
+  value: string
+  palettes: readonly PaletteDropdownPalette[]
+  variant?: 'field' | 'circle'
+  disabled?: boolean
+  sectionId?: string
+  allowCustom?: boolean
+  menuPlacement?: 'below' | 'above' | 'auto'
+  onChange: (id: string) => void
+  onCreatePalette?: (palette: PaletteDropdownCreatePayload) => string | void
+}
+
+const DEFAULT_CUSTOM_COLORS = [
+  '#4f74a8',
+  '#b47b3f',
+  '#6f9278',
+  '#8a738d',
+  '#626b76',
+]
+
+//#region styled-components
+
+const StyledWrap = styled.div<{ $variant: 'field' | 'circle' }>`
+  position: relative;
+  display: ${({ $variant }) =>
+    $variant === 'circle' ? 'inline-flex' : 'block'};
+  width: ${({ $variant }) => ($variant === 'circle' ? '28px' : 'auto')};
+  height: ${({ $variant }) => ($variant === 'circle' ? '28px' : 'auto')};
+  flex: 0 0 auto;
+`
+
+const StyledTrigger = styled.button<{ $variant: 'field' | 'circle' }>`
+  display: grid;
+  grid-template-columns: ${({ $variant }) =>
+    $variant === 'circle' ? '1fr' : 'minmax(0, 1fr) auto auto'};
+  align-items: center;
+  justify-items: center;
+  gap: ${({ $variant }) => ($variant === 'circle' ? '0' : '10px')};
+  width: ${({ $variant }) => ($variant === 'circle' ? '28px' : '100%')};
+  height: ${({ $variant }) => ($variant === 'circle' ? '28px' : '34px')};
+  padding: ${({ $variant }) => ($variant === 'circle' ? '0' : '0 10px')};
+  border: 1px solid var(--platform-colors-border);
+  border-radius: ${({ $variant }) =>
+    $variant === 'circle' ? '999px' : '10px'};
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover:not(:disabled),
+  &[aria-expanded='true'] {
+    border-color: var(--platform-colors-text-secondary);
+    background: var(--platform-colors-surface-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`
+
+const StyledLabel = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledSwatches = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+`
+
+const StyledSwatch = styled.span<{ $color: string; $large?: boolean }>`
+  width: ${({ $large }) => ($large ? '13px' : '10px')};
+  height: ${({ $large }) => ($large ? '13px' : '10px')};
+  margin-left: ${({ $large }) => ($large ? '-1px' : '-2px')};
+  border: 1px solid rgba(255, 255, 255, 0.76);
+  border-radius: 999px;
+  background: ${({ $color }) => $color};
+  box-shadow: 0 0 0 1px rgba(46, 51, 56, 0.08);
+
+  &:first-child {
+    margin-left: 0;
+  }
+`
+
+const StyledPrimarySwatch = styled.span<{ $color: string }>`
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid rgb(255 255 255 / 78%);
+  border-radius: 999px;
+  background: ${({ $color }) => $color};
+  box-shadow: 0 0 0 1px rgb(46 51 56 / 16%), inset 0 0 0 1px rgb(0 0 0 / 4%);
+`
+
+const StyledCaret = styled.span`
+  display: inline-flex;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledOption = styled.button<{ $selected?: boolean }>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: ${({ $selected }) =>
+    $selected ? 'var(--platform-colors-surface-hover)' : 'transparent'};
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledOptionText = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledDivider = styled.div`
+  height: 1px;
+  margin: 6px 2px;
+  background: var(--platform-colors-border);
+`
+
+const StyledCustomToggle = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+`
+
+const StyledCustomForm = styled.form`
+  display: grid;
+  gap: 8px;
+  padding: 4px 2px 2px;
+`
+
+const StyledNameInput = styled.input`
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  min-width: 0;
+  padding: 0 9px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+
+  &:focus {
+    border-color: var(--platform-colors-text-secondary);
+  }
+`
+
+const StyledColorRow = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+`
+
+const StyledColorInput = styled.input`
+  width: 100%;
+  height: 28px;
+  min-width: 0;
+  padding: 2px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  background: var(--platform-colors-surface);
+  cursor: pointer;
+`
+
+const StyledSubmit = styled.button`
+  justify-self: end;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`
+
+//#endregion
+
+function validColor(value: string): string {
+  return /^#[0-9a-f]{6}$/i.test(value) ? value : '#626b76'
+}
+
+export function PaletteDropdown({
+  label = 'Palette',
+  value,
+  palettes,
+  variant = 'field',
+  disabled = false,
+  sectionId = 'palette-dropdown',
+  allowCustom = false,
+  menuPlacement = 'below',
+  onChange,
+  onCreatePalette,
+}: PaletteDropdownProps): React.ReactElement {
+  const {
+    anchorRef,
+    open,
+    close: closeMenu,
+    toggle,
+  } = useSelectMenuAnchor<HTMLButtonElement>({
+    disabled,
+  })
+  const [customOpen, setCustomOpen] = useState(false)
+  const [customLabel, setCustomLabel] = useState('Custom palette')
+  const [customColors, setCustomColors] = useState(DEFAULT_CUSTOM_COLORS)
+
+  const selected = useMemo(
+    () => palettes.find(palette => palette.id === value) ?? palettes[0],
+    [palettes, value],
+  )
+  const primaryColor = selected?.colors[1] ?? selected?.colors[0] ?? '#2e3338'
+
+  const close = useCallback(() => {
+    closeMenu()
+    setCustomOpen(false)
+  }, [closeMenu])
+
+  const saveCustom = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      if (!onCreatePalette) return
+      const createdId = onCreatePalette({
+        label: customLabel.trim() || 'Custom palette',
+        colors: customColors.map(validColor),
+      })
+      if (typeof createdId === 'string') onChange(createdId)
+      close()
+    },
+    [close, customColors, customLabel, onChange, onCreatePalette],
+  )
+
+  return (
+    <StyledWrap $variant={variant}>
+      <StyledTrigger
+        ref={anchorRef}
+        type="button"
+        title={selected ? `${label}: ${selected.label}` : label}
+        disabled={disabled}
+        $variant={variant}
+        data-platform-menu-trigger
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={toggle}
+      >
+        {variant === 'circle' ? (
+          <StyledPrimarySwatch aria-hidden="true" $color={primaryColor} />
+        ) : (
+          <>
+            <StyledLabel>{selected?.label ?? label}</StyledLabel>
+            <StyledSwatches aria-hidden="true">
+              {(selected?.colors ?? []).slice(0, 5).map(color => (
+                <StyledSwatch key={color} $color={color} />
+              ))}
+            </StyledSwatches>
+            <StyledCaret aria-hidden="true">
+              <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.75} />
+            </StyledCaret>
+          </>
+        )}
+      </StyledTrigger>
+      <SelectMenuControl
+        anchorRef={anchorRef}
+        open={open}
+        placement={menuPlacement}
+        minWidth={310}
+        panelVariant="palette"
+        wrapChildren={false}
+        aria-label={label}
+        onClose={close}
+      >
+        <div role="menu" data-section-id={sectionId}>
+          {palettes.map(palette => (
+            <StyledOption
+              key={palette.id}
+              type="button"
+              role="menuitemradio"
+              aria-checked={palette.id === value}
+              $selected={palette.id === value}
+              onClick={() => {
+                onChange(palette.id)
+                close()
+              }}
+            >
+              <StyledOptionText>{palette.label}</StyledOptionText>
+              <StyledSwatches aria-hidden="true">
+                {palette.colors.slice(0, 5).map(color => (
+                  <StyledSwatch key={color} $color={color} $large />
+                ))}
+              </StyledSwatches>
+            </StyledOption>
+          ))}
+          {allowCustom && onCreatePalette ? (
+            <>
+              <StyledDivider />
+              {customOpen ? (
+                <StyledCustomForm onSubmit={saveCustom}>
+                  <StyledNameInput
+                    value={customLabel}
+                    aria-label="Custom palette name"
+                    onChange={event => setCustomLabel(event.target.value)}
+                  />
+                  <StyledColorRow>
+                    {customColors.map((color, index) => (
+                      <StyledColorInput
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                        type="color"
+                        aria-label={`Custom colour ${index + 1}`}
+                        value={color}
+                        onChange={event =>
+                          setCustomColors(current =>
+                            current.map((item, itemIndex) =>
+                              itemIndex === index ? event.target.value : item,
+                            ),
+                          )
+                        }
+                      />
+                    ))}
+                  </StyledColorRow>
+                  <StyledSubmit type="submit">Save palette</StyledSubmit>
+                </StyledCustomForm>
+              ) : (
+                <StyledCustomToggle
+                  type="button"
+                  onClick={() => setCustomOpen(true)}
+                >
+                  <PlatformIcon icon={Plus} size={14} strokeWidth={1.8} />
+                  Custom palette
+                </StyledCustomToggle>
+              )}
+            </>
+          ) : null}
+        </div>
+      </SelectMenuControl>
+    </StyledWrap>
+  )
+}

package/src/components/common/inputs/Radio.tsx

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components'
+
+export const Radio = styled.input.attrs({ type: 'radio' })`
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+`

package/src/components/common/inputs/SearchField.tsx

@@ -0,0 +1,128 @@
+import { forwardRef, type InputHTMLAttributes, type KeyboardEvent } from 'react'
+import { styled } from 'styled-components'
+import { Search, X } from 'lucide-react'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { BareInput } from './BareInput.js'
+
+export interface SearchFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value: string
+  /** Live typing — filter-as-you-type when wired to state. */
+  onValueChange: (value: string) => void
+  /** Enter commits the current value (optional explicit search). */
+  onSearch?: (value: string) => void
+  onClear?: () => void
+  clearLabel?: string
+}
+
+//#region styled-components
+
+const StyledSearchField = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  padding-bottom: 1px;
+  border-bottom: 1px solid var(--platform-colors-border);
+  transition: border-color var(--platform-transition-fast);
+  width: 100%;
+
+  &:focus-within {
+    border-bottom-color: var(
+      --platform-colors-border-strong,
+      var(--platform-colors-border)
+    );
+  }
+`
+
+const StyledIcon = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledInput = styled(BareInput)`
+  flex: 1 1 auto;
+  min-height: 22px;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.2;
+`
+
+const StyledClear = styled.button`
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+  transition: color var(--platform-transition-fast);
+
+  &:hover {
+    color: var(--platform-colors-text);
+  }
+`
+
+//#endregion
+
+export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
+  function SearchField(
+    {
+      value,
+      onValueChange,
+      onSearch,
+      onClear,
+      clearLabel = 'Clear search',
+      disabled,
+      onKeyDown,
+      ...rest
+    },
+    ref,
+  ) {
+    const showClear = Boolean(value) && !disabled
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+      if (event.key === 'Enter' && onSearch) {
+        event.preventDefault()
+        onSearch(value)
+      }
+      onKeyDown?.(event)
+    }
+
+    return (
+      <StyledSearchField>
+        <StyledIcon aria-hidden="true">
+          <PlatformIcon icon={Search} size={14} strokeWidth={1.75} />
+        </StyledIcon>
+        <StyledInput
+          ref={ref}
+          type="search"
+          value={value}
+          disabled={disabled}
+          onChange={event => onValueChange(event.target.value)}
+          onKeyDown={handleKeyDown}
+          {...rest}
+        />
+        {showClear ? (
+          <StyledClear
+            type="button"
+            title={clearLabel}
+            aria-label={clearLabel}
+            onClick={() => {
+              onClear?.()
+              onValueChange('')
+            }}
+          >
+            <PlatformIcon icon={X} size={12} strokeWidth={2} />
+          </StyledClear>
+        ) : null}
+      </StyledSearchField>
+    )
+  },
+)
+
+SearchField.displayName = 'SearchField'