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

package/src/components/common/feedback/InlineBanner.tsx

@@ -1,82 +1,82 @@
-import { Button } from '../buttons/Button.js'
-import { FlexRow } from '../containers/flex.js'
-import { styled } from 'styled-components'
-
-export type InlineBannerVariant = 'danger' | 'warning'
-
-export interface InlineBannerProps {
-  variant?: InlineBannerVariant
-  children: React.ReactNode
-  actions?: React.ReactNode
-  onDismiss?: () => void
-  dismissLabel?: string
-}
-
-//#region styled-components
-
-const StyledRoot = styled.div<{ $variant: InlineBannerVariant }>`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-md);
-  padding: var(--platform-spacing-sm) var(--platform-spacing-md);
-  border: 1px solid
-    ${({ $variant }) =>
-      $variant === 'danger'
-        ? 'var(--platform-colors-danger)'
-        : 'var(--platform-colors-warning)'};
-  border-radius: var(--platform-radius-md);
-  background: ${({ $variant }) =>
-    $variant === 'danger'
-      ? 'rgb(from var(--platform-colors-danger) r g b / 8%)'
-      : 'rgb(from var(--platform-colors-warning) r g b / 12%)'};
-  color: ${({ $variant }) =>
-    $variant === 'danger'
-      ? 'var(--platform-colors-text-danger)'
-      : 'var(--platform-colors-text)'};
-  font-size: var(--platform-typography-font-size-sm);
-`
-
-const StyledMessage = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-sm);
-  flex: 1;
-  min-width: 0;
-`
-
-const StyledActions = styled(FlexRow)`
-  flex: 0 0 auto;
-`
-
-//#endregion
-
-export function InlineBanner({
-  variant = 'warning',
-  children,
-  actions,
-  onDismiss,
-  dismissLabel = 'Dismiss',
-}: InlineBannerProps): React.ReactElement {
-  return (
-    <StyledRoot role="alert" $variant={variant}>
-      <StyledMessage>{children}</StyledMessage>
-      {actions ? (
-        <StyledActions $align="center" $gap="xs" $width="auto">
-          {actions}
-        </StyledActions>
-      ) : null}
-      {onDismiss ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={onDismiss}
-          aria-label={dismissLabel}
-          title={dismissLabel}
-        >
-          ✕
-        </Button>
-      ) : null}
-    </StyledRoot>
-  )
-}
+import { Button } from '../buttons/Button.js'
+import { FlexRow } from '../containers/flex.js'
+import { styled } from 'styled-components'
+
+export type InlineBannerVariant = 'danger' | 'warning'
+
+export interface InlineBannerProps {
+  variant?: InlineBannerVariant
+  children: React.ReactNode
+  actions?: React.ReactNode
+  onDismiss?: () => void
+  dismissLabel?: string
+}
+
+//#region styled-components
+
+const StyledRoot = styled.div<{ $variant: InlineBannerVariant }>`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-md);
+  padding: var(--platform-spacing-sm) var(--platform-spacing-md);
+  border: 1px solid
+    ${({ $variant }) =>
+      $variant === 'danger'
+        ? 'var(--platform-colors-danger)'
+        : 'var(--platform-colors-warning)'};
+  border-radius: var(--platform-radius-md);
+  background: ${({ $variant }) =>
+    $variant === 'danger'
+      ? 'rgb(from var(--platform-colors-danger) r g b / 8%)'
+      : 'rgb(from var(--platform-colors-warning) r g b / 12%)'};
+  color: ${({ $variant }) =>
+    $variant === 'danger'
+      ? 'var(--platform-colors-text-danger)'
+      : 'var(--platform-colors-text)'};
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+const StyledMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  flex: 1;
+  min-width: 0;
+`
+
+const StyledActions = styled(FlexRow)`
+  flex: 0 0 auto;
+`
+
+//#endregion
+
+export function InlineBanner({
+  variant = 'warning',
+  children,
+  actions,
+  onDismiss,
+  dismissLabel = 'Dismiss',
+}: InlineBannerProps): React.ReactElement {
+  return (
+    <StyledRoot role="alert" $variant={variant}>
+      <StyledMessage>{children}</StyledMessage>
+      {actions ? (
+        <StyledActions $align="center" $gap="xs" $width="auto">
+          {actions}
+        </StyledActions>
+      ) : null}
+      {onDismiss ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onDismiss}
+          aria-label={dismissLabel}
+          title={dismissLabel}
+        >
+          ✕
+        </Button>
+      ) : null}
+    </StyledRoot>
+  )
+}

package/src/components/common/feedback/PlatformChip.tsx

@@ -1,104 +1,104 @@
-import { styled } from 'styled-components'
-
-export type PlatformChipTone =
-  | 'blue'
-  | 'orange'
-  | 'green'
-  | 'red'
-  | 'neutral'
-  | 'meta'
-
-export interface PlatformChipProps {
-  tone?: PlatformChipTone
-  label?: string
-  title?: string
-  children: React.ReactNode
-}
-
-//#region styled-components
-
-const toneMap: Record<
-  PlatformChipTone,
-  { bg: string; fg: string; border: string }
-> = {
-  blue: {
-    bg: 'var(--platform-colors-semantic-blue-muted, #e5effd)',
-    fg: 'var(--platform-colors-semantic-blue-text, #356fae)',
-    border: 'var(--platform-colors-semantic-blue-border, #cfe0f8)',
-  },
-  orange: {
-    bg: 'var(--platform-colors-semantic-orange-muted, #f8edd6)',
-    fg: 'var(--platform-colors-semantic-orange-text, #8a6012)',
-    border: 'var(--platform-colors-semantic-orange-border, #efd99e)',
-  },
-  green: {
-    bg: 'var(--platform-colors-semantic-green-muted, #e1f0e6)',
-    fg: 'var(--platform-colors-semantic-green-text, #3f7c52)',
-    border: 'var(--platform-colors-semantic-green-border, #c8e2d0)',
-  },
-  red: {
-    bg: 'var(--platform-colors-semantic-red-muted, #f5e3e2)',
-    fg: 'var(--platform-colors-semantic-red-text, #964947)',
-    border: 'var(--platform-colors-semantic-red-border, #ebcac8)',
-  },
-  neutral: {
-    bg: 'var(--platform-colors-surface-hover, #e7eaee)',
-    fg: 'var(--platform-colors-text-secondary, #6d7680)',
-    border: 'var(--platform-colors-border, #d9dee5)',
-  },
-  meta: {
-    bg: '#f8f9fb',
-    fg: 'var(--platform-colors-text-secondary, #6d7680)',
-    border: 'var(--platform-colors-border-soft, #e5e8ed)',
-  },
-}
-
-const StyledChip = styled.span<{ $tone: PlatformChipTone }>`
-  display: inline-flex;
-  align-items: center;
-  gap: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
-  max-width: 100%;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid ${({ $tone }) => toneMap[$tone].border};
-  border-radius: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
-  background: ${({ $tone }) => toneMap[$tone].bg};
-  color: ${({ $tone }) => toneMap[$tone].fg};
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: ${({ $tone }) =>
-    $tone === 'meta'
-      ? 'var(--platform-typography-font-weight-medium)'
-      : 'inherit'};
-  line-height: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledMetaLabel = styled.span`
-  color: #8b939d;
-  font-size: 10px;
-  font-weight: var(--platform-typography-font-weight-bold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-`
-
-const StyledMetaValue = styled.span`
-  color: #606a75;
-`
-
-//#endregion
-
-export function PlatformChip({
-  tone = 'neutral',
-  label,
-  title,
-  children,
-}: PlatformChipProps): React.ReactElement {
-  return (
-    <StyledChip $tone={tone} title={title}>
-      {label ? <StyledMetaLabel>{label}</StyledMetaLabel> : null}
-      {label ? <StyledMetaValue>{children}</StyledMetaValue> : children}
-    </StyledChip>
-  )
-}
+import { styled } from 'styled-components'
+
+export type PlatformChipTone =
+  | 'blue'
+  | 'orange'
+  | 'green'
+  | 'red'
+  | 'neutral'
+  | 'meta'
+
+export interface PlatformChipProps {
+  tone?: PlatformChipTone
+  label?: string
+  title?: string
+  children: React.ReactNode
+}
+
+//#region styled-components
+
+const toneMap: Record<
+  PlatformChipTone,
+  { bg: string; fg: string; border: string }
+> = {
+  blue: {
+    bg: 'var(--platform-colors-semantic-blue-muted, #e5effd)',
+    fg: 'var(--platform-colors-semantic-blue-text, #356fae)',
+    border: 'var(--platform-colors-semantic-blue-border, #cfe0f8)',
+  },
+  orange: {
+    bg: 'var(--platform-colors-semantic-orange-muted, #f8edd6)',
+    fg: 'var(--platform-colors-semantic-orange-text, #8a6012)',
+    border: 'var(--platform-colors-semantic-orange-border, #efd99e)',
+  },
+  green: {
+    bg: 'var(--platform-colors-semantic-green-muted, #e1f0e6)',
+    fg: 'var(--platform-colors-semantic-green-text, #3f7c52)',
+    border: 'var(--platform-colors-semantic-green-border, #c8e2d0)',
+  },
+  red: {
+    bg: 'var(--platform-colors-semantic-red-muted, #f5e3e2)',
+    fg: 'var(--platform-colors-semantic-red-text, #964947)',
+    border: 'var(--platform-colors-semantic-red-border, #ebcac8)',
+  },
+  neutral: {
+    bg: 'var(--platform-colors-surface-hover, #e7eaee)',
+    fg: 'var(--platform-colors-text-secondary, #6d7680)',
+    border: 'var(--platform-colors-border, #d9dee5)',
+  },
+  meta: {
+    bg: '#f8f9fb',
+    fg: 'var(--platform-colors-text-secondary, #6d7680)',
+    border: 'var(--platform-colors-border-soft, #e5e8ed)',
+  },
+}
+
+const StyledChip = styled.span<{ $tone: PlatformChipTone }>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
+  max-width: 100%;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid ${({ $tone }) => toneMap[$tone].border};
+  border-radius: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
+  background: ${({ $tone }) => toneMap[$tone].bg};
+  color: ${({ $tone }) => toneMap[$tone].fg};
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: ${({ $tone }) =>
+    $tone === 'meta'
+      ? 'var(--platform-typography-font-weight-medium)'
+      : 'inherit'};
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledMetaLabel = styled.span`
+  color: #8b939d;
+  font-size: 10px;
+  font-weight: var(--platform-typography-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+const StyledMetaValue = styled.span`
+  color: #606a75;
+`
+
+//#endregion
+
+export function PlatformChip({
+  tone = 'neutral',
+  label,
+  title,
+  children,
+}: PlatformChipProps): React.ReactElement {
+  return (
+    <StyledChip $tone={tone} title={title}>
+      {label ? <StyledMetaLabel>{label}</StyledMetaLabel> : null}
+      {label ? <StyledMetaValue>{children}</StyledMetaValue> : children}
+    </StyledChip>
+  )
+}

package/src/components/common/feedback/QuietPill.tsx

@@ -1,75 +1,75 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export type QuietPillTone =
-  | 'accent'
-  | 'danger'
-  | 'gold'
-  | 'neutral'
-  | 'success'
-
-export interface QuietPillProps {
-  tone?: QuietPillTone
-  children: ReactNode
-  className?: string
-  title?: string
-}
-
-//#region styled-components
-
-const StyledPill = styled.span<{ $tone: QuietPillTone }>`
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 28px;
-  padding: 4px 10px;
-  border: 1px solid
-    ${({ $tone }) =>
-      $tone === 'accent'
-        ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 34%)'
-        : $tone === 'danger'
-        ? 'rgb(from var(--platform-colors-danger) r g b / 36%)'
-        : $tone === 'gold'
-        ? 'rgb(from var(--quiet-secondary, var(--platform-colors-warning)) r g b / 42%)'
-        : $tone === 'success'
-        ? 'rgb(from var(--platform-colors-success) r g b / 42%)'
-        : 'var(--platform-colors-border)'};
-  border-radius: var(--platform-radius-full);
-  background: ${({ $tone }) =>
-    $tone === 'accent'
-      ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 10%)'
-      : $tone === 'danger'
-      ? 'rgb(from var(--platform-colors-danger) r g b / 9%)'
-      : $tone === 'gold'
-      ? 'rgb(from var(--quiet-secondary, var(--platform-colors-warning)) r g b / 14%)'
-      : $tone === 'success'
-      ? 'rgb(from var(--platform-colors-success) r g b / 13%)'
-      : 'rgb(255 255 255 / 62%)'};
-  color: ${({ $tone }) =>
-    $tone === 'danger'
-      ? 'var(--platform-colors-danger)'
-      : $tone === 'success'
-      ? 'var(--platform-colors-success)'
-      : 'var(--platform-colors-text-secondary)'};
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: 650;
-  transition: border-color var(--platform-transition-base),
-    background var(--platform-transition-base),
-    color var(--platform-transition-base),
-    transform var(--platform-transition-base);
-`
-
-//#endregion
-
-export function QuietPill({
-  tone = 'neutral',
-  children,
-  className,
-  title,
-}: QuietPillProps): React.ReactElement {
-  return (
-    <StyledPill $tone={tone} className={className} title={title}>
-      {children}
-    </StyledPill>
-  )
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export type QuietPillTone =
+  | 'accent'
+  | 'danger'
+  | 'gold'
+  | 'neutral'
+  | 'success'
+
+export interface QuietPillProps {
+  tone?: QuietPillTone
+  children: ReactNode
+  className?: string
+  title?: string
+}
+
+//#region styled-components
+
+const StyledPill = styled.span<{ $tone: QuietPillTone }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 28px;
+  padding: 4px 10px;
+  border: 1px solid
+    ${({ $tone }) =>
+      $tone === 'accent'
+        ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 34%)'
+        : $tone === 'danger'
+        ? 'rgb(from var(--platform-colors-danger) r g b / 36%)'
+        : $tone === 'gold'
+        ? 'rgb(from var(--quiet-secondary, var(--platform-colors-warning)) r g b / 42%)'
+        : $tone === 'success'
+        ? 'rgb(from var(--platform-colors-success) r g b / 42%)'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-full);
+  background: ${({ $tone }) =>
+    $tone === 'accent'
+      ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 10%)'
+      : $tone === 'danger'
+      ? 'rgb(from var(--platform-colors-danger) r g b / 9%)'
+      : $tone === 'gold'
+      ? 'rgb(from var(--quiet-secondary, var(--platform-colors-warning)) r g b / 14%)'
+      : $tone === 'success'
+      ? 'rgb(from var(--platform-colors-success) r g b / 13%)'
+      : 'var(--platform-colors-surface-hover)'};
+  color: ${({ $tone }) =>
+    $tone === 'danger'
+      ? 'var(--platform-colors-danger)'
+      : $tone === 'success'
+      ? 'var(--platform-colors-success)'
+      : 'var(--platform-colors-text-secondary)'};
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: 650;
+  transition: border-color var(--platform-transition-base),
+    background var(--platform-transition-base),
+    color var(--platform-transition-base),
+    transform var(--platform-transition-base);
+`
+
+//#endregion
+
+export function QuietPill({
+  tone = 'neutral',
+  children,
+  className,
+  title,
+}: QuietPillProps): React.ReactElement {
+  return (
+    <StyledPill $tone={tone} className={className} title={title}>
+      {children}
+    </StyledPill>
+  )
+}