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

package/src/components/common/buttons/ChoiceChip.tsx

@@ -1,73 +1,73 @@
-import { forwardRef, type ButtonHTMLAttributes } from 'react'
-import { styled } from 'styled-components'
-
-export interface ChoiceChipProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  active?: boolean
-}
-
-//#region styled-components
-
-const StyledChip = styled.button<{ $active?: boolean }>`
-  min-height: 26px;
-  padding: 0 var(--platform-spacing-sm);
-  border: 1px solid
-    ${({ $active }) =>
-      $active
-        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
-        : 'var(--platform-colors-border)'};
-  border-radius: var(--platform-radius-full);
-  background: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-surface-hover)'
-      : 'var(--platform-colors-surface)'};
-  color: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-text-secondary)'};
-  font: inherit;
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: var(--platform-typography-font-weight-medium);
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    background: ${({ $active }) =>
-      $active
-        ? 'var(--platform-colors-surface-hover)'
-        : 'var(--platform-colors-surface-hover)'};
-    color: ${({ $active }) =>
-      $active ? 'var(--platform-colors-text)' : 'var(--platform-colors-text)'};
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 1px solid
-      var(--platform-colors-border-strong, var(--platform-colors-border));
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`
-
-//#endregion
-
-/** Pill filter toggle — wrapping rows of selectable chips (see also SegmentedControl). */
-export const ChoiceChip = forwardRef<HTMLButtonElement, ChoiceChipProps>(
-  function ChoiceChip({ active = false, type = 'button', ...rest }, ref) {
-    return (
-      <StyledChip
-        ref={ref}
-        type={type}
-        $active={active}
-        aria-pressed={active}
-        {...rest}
-      />
-    )
-  },
-)
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+export interface ChoiceChipProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean
+}
+
+//#region styled-components
+
+const StyledChip = styled.button<{ $active?: boolean }>`
+  min-height: 26px;
+  padding: 0 var(--platform-spacing-sm);
+  border: 1px solid
+    ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-full);
+  background: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-surface-hover)'
+      : 'var(--platform-colors-surface)'};
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-text-secondary)'};
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-surface-hover)'
+        : 'var(--platform-colors-surface-hover)'};
+    color: ${({ $active }) =>
+      $active ? 'var(--platform-colors-text)' : 'var(--platform-colors-text)'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid
+      var(--platform-colors-border-strong, var(--platform-colors-border));
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`
+
+//#endregion
+
+/** Pill filter toggle — wrapping rows of selectable chips (see also SegmentedControl). */
+export const ChoiceChip = forwardRef<HTMLButtonElement, ChoiceChipProps>(
+  function ChoiceChip({ active = false, type = 'button', ...rest }, ref) {
+    return (
+      <StyledChip
+        ref={ref}
+        type={type}
+        $active={active}
+        aria-pressed={active}
+        {...rest}
+      />
+    )
+  },
+)

package/src/components/common/buttons/CleanButton.tsx

@@ -1,34 +1,34 @@
-import { styled } from 'styled-components'
-
-//#region styled-components
-
-export const CleanButton = styled.button`
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: inherit;
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--platform-colors-focus-ring);
-    outline-offset: 2px;
-  }
-`
-
-//#endregion
+import { styled } from 'styled-components'
+
+//#region styled-components
+
+export const CleanButton = styled.button`
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+`
+
+//#endregion

package/src/components/common/buttons/IconButton.tsx

@@ -1,89 +1,89 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export type IconButtonSize = 'sm' | 'md' | 'window'
-export type IconButtonVariant = 'ghost' | 'dangerHover'
-
-export interface IconButtonProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-  size?: IconButtonSize
-  variant?: IconButtonVariant
-  children: ReactNode
-}
-
-const sizeStyles: Record<IconButtonSize, { width: string; height: string }> = {
-  sm: { width: '26px', height: '26px' },
-  md: { width: '30px', height: '30px' },
-  window: { width: '30px', height: '30px' },
-}
-
-const StyledIconButton = styled.button<{
-  $size: IconButtonSize
-  $variant: IconButtonVariant
-}>`
-  display: grid;
-  place-items: center;
-  width: ${({ $size }) => sizeStyles[$size].width};
-  height: ${({ $size }) => sizeStyles[$size].height};
-  border: none;
-  border-radius: var(--platform-radius-sm);
-  background: transparent;
-  color: var(--platform-colors-text-secondary);
-  cursor: pointer;
-  transition: background var(--platform-transition-fast),
-    color var(--platform-transition-fast);
-
-  &:hover:not(:disabled) {
-    background: ${({ $variant }) =>
-      $variant === 'dangerHover'
-        ? 'var(--platform-colors-danger)'
-        : 'var(--platform-colors-surface-hover)'};
-    color: ${({ $variant }) =>
-      $variant === 'dangerHover'
-        ? 'var(--platform-colors-text-inverse)'
-        : 'var(--platform-colors-text)'};
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 1px solid var(--platform-colors-border-strong);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-`
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton(
-    {
-      size = 'sm',
-      variant = 'ghost',
-      type = 'button',
-      disabled = false,
-      children,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <StyledIconButton
-        ref={ref}
-        type={type}
-        disabled={disabled}
-        $size={size}
-        $variant={variant}
-        {...rest}
-      >
-        {children}
-      </StyledIconButton>
-    )
-  },
-)
-
-IconButton.displayName = 'IconButton'
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export type IconButtonSize = 'sm' | 'md' | 'window'
+export type IconButtonVariant = 'ghost' | 'dangerHover'
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  size?: IconButtonSize
+  variant?: IconButtonVariant
+  children: ReactNode
+}
+
+const sizeStyles: Record<IconButtonSize, { width: string; height: string }> = {
+  sm: { width: '26px', height: '26px' },
+  md: { width: '30px', height: '30px' },
+  window: { width: '30px', height: '30px' },
+}
+
+const StyledIconButton = styled.button<{
+  $size: IconButtonSize
+  $variant: IconButtonVariant
+}>`
+  display: grid;
+  place-items: center;
+  width: ${({ $size }) => sizeStyles[$size].width};
+  height: ${({ $size }) => sizeStyles[$size].height};
+  border: none;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+  transition: background var(--platform-transition-fast),
+    color var(--platform-transition-fast);
+
+  &:hover:not(:disabled) {
+    background: ${({ $variant }) =>
+      $variant === 'dangerHover'
+        ? 'var(--platform-colors-danger)'
+        : 'var(--platform-colors-surface-hover)'};
+    color: ${({ $variant }) =>
+      $variant === 'dangerHover'
+        ? 'var(--platform-colors-text-inverse)'
+        : 'var(--platform-colors-text)'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--platform-colors-border-strong);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      size = 'sm',
+      variant = 'ghost',
+      type = 'button',
+      disabled = false,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <StyledIconButton
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        $size={size}
+        $variant={variant}
+        {...rest}
+      >
+        {children}
+      </StyledIconButton>
+    )
+  },
+)
+
+IconButton.displayName = 'IconButton'

package/src/components/common/buttons/QuietAction.tsx

@@ -1,29 +1,29 @@
-import { styled } from 'styled-components'
-
-/**
- * The suite's quiet verb: an uppercase whisper that acts. Used for
- * secondary actions in toolbars and kickers (export, notes, settings).
- */
-export const QuietAction = styled.button`
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  opacity: 0.6;
-  cursor: pointer;
-  white-space: nowrap;
-
-  &:hover:not(:disabled) {
-    opacity: 1;
-  }
-
-  &:disabled {
-    opacity: 0.35;
-    cursor: default;
-  }
-`
+import { styled } from 'styled-components'
+
+/**
+ * The suite's quiet verb: an uppercase whisper that acts. Used for
+ * secondary actions in toolbars and kickers (export, notes, settings).
+ */
+export const QuietAction = styled.button`
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.6;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+`

package/src/components/common/buttons/SegmentedControl.tsx

@@ -1,67 +1,67 @@
-import { styled } from 'styled-components'
-
-export interface SegmentedControlOption<T extends string> {
-  value: T
-  label: React.ReactNode
-}
-
-export interface SegmentedControlProps<T extends string> {
-  options: readonly SegmentedControlOption<T>[]
-  value: T
-  onValueChange: (value: T) => void
-  'aria-label'?: string
-}
-
-//#region styled-components
-
-const StyledGroup = styled.div`
-  display: inline-flex;
-  gap: var(--platform-spacing-2xs, 4px);
-  padding: var(--platform-spacing-2xs, 4px);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-lg);
-  background: var(--platform-colors-surface-active);
-`
-
-const StyledSegment = styled.button<{ $active: boolean }>`
-  min-height: 30px;
-  padding: 0 var(--platform-spacing-sm);
-  border: 0;
-  border-radius: var(--platform-radius-md);
-  background: ${({ $active }) =>
-    $active ? 'var(--platform-colors-surface)' : 'transparent'};
-  color: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-text-secondary)'};
-  font: inherit;
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: var(--platform-typography-font-weight-bold);
-  cursor: pointer;
-`
-
-//#endregion
-
-/** Exclusive choice toggle — a row of segments with one active value. */
-export function SegmentedControl<T extends string>({
-  options,
-  value,
-  onValueChange,
-  'aria-label': ariaLabel,
-}: SegmentedControlProps<T>): React.ReactElement {
-  return (
-    <StyledGroup role="group" aria-label={ariaLabel}>
-      {options.map(option => (
-        <StyledSegment
-          key={option.value}
-          type="button"
-          $active={option.value === value}
-          aria-pressed={option.value === value}
-          onClick={() => onValueChange(option.value)}
-        >
-          {option.label}
-        </StyledSegment>
-      ))}
-    </StyledGroup>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface SegmentedControlOption<T extends string> {
+  value: T
+  label: React.ReactNode
+}
+
+export interface SegmentedControlProps<T extends string> {
+  options: readonly SegmentedControlOption<T>[]
+  value: T
+  onValueChange: (value: T) => void
+  'aria-label'?: string
+}
+
+//#region styled-components
+
+const StyledGroup = styled.div`
+  display: inline-flex;
+  gap: var(--platform-spacing-2xs, 4px);
+  padding: var(--platform-spacing-2xs, 4px);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-lg);
+  background: var(--platform-colors-surface-active);
+`
+
+const StyledSegment = styled.button<{ $active: boolean }>`
+  min-height: 30px;
+  padding: 0 var(--platform-spacing-sm);
+  border: 0;
+  border-radius: var(--platform-radius-md);
+  background: ${({ $active }) =>
+    $active ? 'var(--platform-colors-surface)' : 'transparent'};
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-text-secondary)'};
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-bold);
+  cursor: pointer;
+`
+
+//#endregion
+
+/** Exclusive choice toggle — a row of segments with one active value. */
+export function SegmentedControl<T extends string>({
+  options,
+  value,
+  onValueChange,
+  'aria-label': ariaLabel,
+}: SegmentedControlProps<T>): React.ReactElement {
+  return (
+    <StyledGroup role="group" aria-label={ariaLabel}>
+      {options.map(option => (
+        <StyledSegment
+          key={option.value}
+          type="button"
+          $active={option.value === value}
+          aria-pressed={option.value === value}
+          onClick={() => onValueChange(option.value)}
+        >
+          {option.label}
+        </StyledSegment>
+      ))}
+    </StyledGroup>
+  )
+}