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

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

@@ -0,0 +1,169 @@
+import { ChevronDown } from 'lucide-react'
+import { useId, useMemo } from 'react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { FlexRow } from '../containers/flex.js'
+import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
+import { SelectMenuOptions } from '../dropdown/SelectMenuOptions.js'
+import type { SelectMenuPlacement } from '../dropdown/SelectMenu.js'
+import { useSelectMenuAnchor } from '../dropdown/useSelectMenuAnchor.js'
+import { Text } from '../typography/Text.js'
+import { FieldControlShell } from './FieldControlShell.js'
+import {
+  fieldCompactShellCss,
+  fieldSelectTriggerStyles,
+} from './fieldStyles.js'
+
+export interface SelectFieldOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export type SelectFieldVariant = 'default' | 'compact'
+
+export interface SelectFieldProps {
+  id?: string
+  value: string
+  options: readonly SelectFieldOption[]
+  onValueChange: (value: string) => void
+  disabled?: boolean
+  placeholder?: string
+  variant?: SelectFieldVariant
+  /** Only used with `variant="compact"`. */
+  maxWidth?: string
+  menuPlacement?: SelectMenuPlacement
+  'aria-label'?: string
+}
+
+//#region styled-components
+
+const StyledAnchor = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-self: start;
+  width: 100%;
+  min-width: 0;
+`
+
+const StyledTriggerWrap = styled(FlexRow)`
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+`
+
+const StyledCompactShell = styled(FlexRow)<{
+  $disabled?: boolean
+  $maxWidth?: string
+}>`
+  ${fieldCompactShellCss}
+`
+
+const StyledTrigger = styled.button<{ $disabled?: boolean }>`
+  ${fieldSelectTriggerStyles}
+`
+
+const StyledChevron = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-secondary);
+`
+
+//#endregion
+
+export function SelectField({
+  id,
+  value,
+  options,
+  onValueChange,
+  disabled = false,
+  placeholder = 'Select…',
+  variant = 'default',
+  maxWidth,
+  menuPlacement = 'below',
+  'aria-label': ariaLabel,
+}: SelectFieldProps): React.ReactElement {
+  const fallbackId = useId()
+  const triggerId = id ?? fallbackId
+  const { anchorRef, open, close, toggle } =
+    useSelectMenuAnchor<HTMLDivElement>({
+      disabled,
+    })
+
+  const selected = useMemo(
+    () => options.find(option => option.value === value),
+    [options, value],
+  )
+
+  const triggerButton = (
+    <StyledTrigger
+      id={triggerId}
+      type="button"
+      disabled={disabled}
+      $disabled={disabled}
+      aria-haspopup="menu"
+      aria-expanded={open}
+      aria-label={ariaLabel}
+      data-platform-menu-trigger
+      onClick={toggle}
+    >
+      <Text as="span" size="sm" tone={selected ? 'primary' : 'secondary'}>
+        {selected?.label ?? placeholder}
+      </Text>
+      <StyledChevron aria-hidden="true">
+        <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.75} />
+      </StyledChevron>
+    </StyledTrigger>
+  )
+
+  const menu = (
+    <SelectMenuControl
+      anchorRef={anchorRef}
+      open={open}
+      placement={menuPlacement}
+      widthMode={variant === 'compact' ? 'anchor' : 'intrinsic'}
+      aria-label={ariaLabel ?? 'Select'}
+      onClose={close}
+    >
+      {menuClose => (
+        <SelectMenuOptions
+          options={options}
+          value={value}
+          onValueChange={onValueChange}
+          onClose={menuClose}
+        />
+      )}
+    </SelectMenuControl>
+  )
+
+  if (variant === 'compact') {
+    return (
+      <StyledAnchor ref={anchorRef}>
+        <StyledCompactShell
+          $width="100%"
+          $align="center"
+          $disabled={disabled}
+          $maxWidth={maxWidth}
+          data-expanded={open ? 'true' : 'false'}
+        >
+          <StyledTriggerWrap $width="100%" $align="center">
+            {triggerButton}
+          </StyledTriggerWrap>
+        </StyledCompactShell>
+        {menu}
+      </StyledAnchor>
+    )
+  }
+
+  return (
+    <StyledAnchor ref={anchorRef}>
+      <FieldControlShell disabled={disabled}>
+        <StyledTriggerWrap $width="100%" $align="center">
+          {triggerButton}
+        </StyledTriggerWrap>
+      </FieldControlShell>
+      {menu}
+    </StyledAnchor>
+  )
+}

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

@@ -0,0 +1,54 @@
+import { useMemo } from 'react'
+import { setSurfacePalette } from '../../../bridge/theme.mjs'
+import { usePlatformThemeDocumentAttrs } from '../../../bridge/react/usePlatformThemeDocumentAttrs.js'
+import {
+  SURFACE_PALETTE_DEFAULT_ID,
+  SURFACE_PALETTES,
+  surfacePaletteSwatches,
+} from '../../../theme/surfacePalettes.js'
+import { PaletteCirclePicker } from './PaletteCirclePicker.js'
+
+const DEFAULT_SWATCHES = ['#2e3338', '#737b86', '#ffffff', '#f5f3ef']
+
+export interface SurfacePalettePickerProps {
+  label?: string
+  sectionId?: string
+  disabled?: boolean
+}
+
+/** Workspace chrome palette — persists via shell `theme.setSurfacePalette`. */
+export function SurfacePalettePicker({
+  label = 'Surface palette',
+  sectionId = 'surface-palette',
+  disabled,
+}: SurfacePalettePickerProps): React.ReactElement {
+  const { surfacePalette } = usePlatformThemeDocumentAttrs()
+  const palettes = useMemo(
+    () => [
+      {
+        id: SURFACE_PALETTE_DEFAULT_ID,
+        label: 'Default',
+        colors: DEFAULT_SWATCHES,
+      },
+      ...SURFACE_PALETTES.map(palette => ({
+        id: palette.id,
+        label: palette.label,
+        colors: surfacePaletteSwatches(palette),
+      })),
+    ],
+    [],
+  )
+
+  return (
+    <PaletteCirclePicker
+      label={label}
+      sectionId={sectionId}
+      value={surfacePalette || SURFACE_PALETTE_DEFAULT_ID}
+      palettes={palettes}
+      disabled={disabled}
+      onChange={id => {
+        void setSurfacePalette(id)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,22 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react'
+import { FlexCol } from '../containers/flex.js'
+import { BareTextarea } from './BareTextarea.js'
+import { FieldControlShell } from './FieldControlShell.js'
+
+export interface TextAreaFieldProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const TextAreaField = forwardRef<
+  HTMLTextAreaElement,
+  TextAreaFieldProps
+>(function TextAreaField({ disabled, ...rest }, ref) {
+  return (
+    <FieldControlShell disabled={disabled} multiline>
+      <FlexCol $flex="1" $width="100%" $minHeight="0">
+        <BareTextarea ref={ref} disabled={disabled} {...rest} />
+      </FlexCol>
+    </FieldControlShell>
+  )
+})
+
+TextAreaField.displayName = 'TextAreaField'

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

@@ -0,0 +1,51 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+import { FlexRow } from '../containers/flex.js'
+import { BareInput } from './BareInput.js'
+import { FieldControlShell } from './FieldControlShell.js'
+import { fieldCompactShellCss } from './fieldStyles.js'
+
+export type TextFieldVariant = 'default' | 'compact'
+
+export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: TextFieldVariant
+  /** Only used with `variant="compact"`. */
+  maxWidth?: string
+}
+
+const StyledCompactShell = styled(FlexRow)<{
+  $disabled?: boolean
+  $maxWidth?: string
+}>`
+  ${fieldCompactShellCss}
+`
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(
+    { disabled, variant = 'default', maxWidth, ...rest },
+    ref,
+  ) {
+    if (variant === 'compact') {
+      return (
+        <StyledCompactShell
+          $width="100%"
+          $align="center"
+          $disabled={disabled}
+          $maxWidth={maxWidth}
+        >
+          <BareInput ref={ref} disabled={disabled} {...rest} />
+        </StyledCompactShell>
+      )
+    }
+
+    return (
+      <FieldControlShell disabled={disabled}>
+        <FlexRow $flex="1" $align="center" $width="100%">
+          <BareInput ref={ref} disabled={disabled} {...rest} />
+        </FlexRow>
+      </FieldControlShell>
+    )
+  },
+)
+
+TextField.displayName = 'TextField'

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

@@ -0,0 +1,110 @@
+import { styled } from 'styled-components'
+
+export interface ToggleSwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+  label?: React.ReactNode
+  description?: React.ReactNode
+  className?: string
+  'aria-label'?: string
+}
+
+const StyledToggle = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.25;
+`
+
+const StyledTrack = styled.span<{ $checked: boolean; $disabled?: boolean }>`
+  position: relative;
+  flex: 0 0 auto;
+  width: 30px;
+  height: 18px;
+  border: 1px solid
+    ${({ $checked }) =>
+      $checked
+        ? 'var(--platform-colors-accent)'
+        : 'var(--platform-colors-border)'};
+  border-radius: 999px;
+  background: ${({ $checked }) =>
+    $checked
+      ? 'var(--platform-colors-accent)'
+      : 'var(--platform-colors-surface-active)'};
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  transition: background 120ms ease, border-color 120ms ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: ${({ $checked }) => ($checked ? '14px' : '2px')};
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--platform-colors-surface);
+    box-shadow: 0 1px 2px rgb(from var(--platform-colors-text) r g b / 0.22);
+    transition: left 120ms ease;
+  }
+`
+
+const StyledInput = styled.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+
+  &:focus-visible + ${StyledTrack} {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+`
+
+const StyledCopy = styled.span`
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+`
+
+const StyledDescription = styled.span`
+  color: var(--platform-colors-text-secondary);
+`
+
+/** Small native switch for compact binary settings. */
+export function ToggleSwitch({
+  checked,
+  onChange,
+  disabled,
+  label,
+  description,
+  className,
+  'aria-label': ariaLabel,
+}: ToggleSwitchProps): React.ReactElement {
+  return (
+    <StyledToggle className={className}>
+      <StyledInput
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onChange={event => onChange(event.currentTarget.checked)}
+      />
+      <StyledTrack $checked={checked} $disabled={disabled} aria-hidden="true" />
+      {label || description ? (
+        <StyledCopy>
+          {label ? <span>{label}</span> : null}
+          {description ? (
+            <StyledDescription>{description}</StyledDescription>
+          ) : null}
+        </StyledCopy>
+      ) : null}
+    </StyledToggle>
+  )
+}