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

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

@@ -1,33 +1,35 @@
-import { styled } from 'styled-components'
-
-export type BadgeTone = 'accent' | 'neutral'
-
-export interface BadgeProps {
-  tone?: BadgeTone
-  children: React.ReactNode
-}
-
-//#region styled-components
-
-const StyledBadge = styled.span<{ $tone: BadgeTone }>`
-  padding: 2px var(--platform-spacing-sm);
-  border-radius: var(--platform-radius-full);
-  font-size: var(--platform-typography-font-size-sm);
-  background: ${({ $tone }) =>
-    $tone === 'accent'
-      ? 'var(--platform-colors-accent-muted)'
-      : 'var(--platform-colors-surface-hover)'};
-  color: ${({ $tone }) =>
-    $tone === 'accent'
-      ? 'var(--platform-colors-accent)'
-      : 'var(--platform-colors-text-secondary)'};
-`
-
-//#endregion
-
-export function Badge({
-  tone = 'accent',
-  children,
-}: BadgeProps): React.ReactElement {
-  return <StyledBadge $tone={tone}>{children}</StyledBadge>
-}
+import { styled } from 'styled-components'
+
+export type BadgeTone = 'accent' | 'neutral'
+
+export interface BadgeProps {
+  tone?: BadgeTone
+  className?: string
+  children: React.ReactNode
+}
+
+//#region styled-components
+
+const StyledBadge = styled.span<{ $tone: BadgeTone }>`
+  padding: 2px var(--platform-spacing-sm);
+  border-radius: var(--platform-radius-full);
+  font-size: var(--platform-typography-font-size-sm);
+  background: ${({ $tone }) =>
+    $tone === 'accent'
+      ? 'var(--platform-colors-accent-muted)'
+      : 'var(--platform-colors-surface-hover)'};
+  color: ${({ $tone }) =>
+    $tone === 'accent'
+      ? 'color-mix(in srgb, var(--platform-colors-accent) 62%, var(--platform-colors-text) 38%)'
+      : 'var(--platform-colors-text-secondary)'};
+`
+
+//#endregion
+
+export function Badge({
+  tone = 'accent',
+  className,
+  children,
+}: BadgeProps): React.ReactElement {
+  return <StyledBadge className={className} $tone={tone}>{children}</StyledBadge>
+}

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

@@ -1,36 +1,36 @@
-import { styled } from 'styled-components'
-
-export interface CapabilityPillsProps {
-  items: string[]
-}
-
-//#region styled-components
-
-const StyledList = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-xs);
-  min-width: 0;
-`
-
-const StyledPill = styled.span`
-  padding: 2px var(--platform-spacing-sm);
-  border-radius: var(--platform-radius-full);
-  background: var(--platform-colors-surface-active);
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-`
-
-//#endregion
-
-export function CapabilityPills({
-  items,
-}: CapabilityPillsProps): React.ReactElement {
-  return (
-    <StyledList>
-      {items.map(item => (
-        <StyledPill key={item}>{item}</StyledPill>
-      ))}
-    </StyledList>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface CapabilityPillsProps {
+  items: string[]
+}
+
+//#region styled-components
+
+const StyledList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+`
+
+const StyledPill = styled.span`
+  padding: 2px var(--platform-spacing-sm);
+  border-radius: var(--platform-radius-full);
+  background: var(--platform-colors-surface-active);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+//#endregion
+
+export function CapabilityPills({
+  items,
+}: CapabilityPillsProps): React.ReactElement {
+  return (
+    <StyledList>
+      {items.map(item => (
+        <StyledPill key={item}>{item}</StyledPill>
+      ))}
+    </StyledList>
+  )
+}

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

@@ -1,132 +1,166 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-import { Button } from '../buttons/Button.js'
-import { FlexCol } from '../containers/flex.js'
-import { Heading } from '../typography/Heading.js'
-import { Kicker } from '../typography/Kicker.js'
-import { Text } from '../typography/Text.js'
-
-export type EmptyStateTone = 'neutral' | 'error'
-export type EmptyStateVariant = 'centered' | 'inline'
-
-export interface EmptyStateAction {
-  label: string
-  onClick: () => void
-}
-
-export interface EmptyStateProps {
-  title: string
-  message?: string
-  kicker?: string
-  tone?: EmptyStateTone
-  variant?: EmptyStateVariant
-  action?: EmptyStateAction
-  actions?: ReactNode
-}
-
-//#region styled-components
-
-const StyledInlineRoot = styled.div`
-  display: grid;
-  place-items: start;
-  gap: var(--platform-spacing-sm);
-  width: auto;
-  max-width: 100%;
-  align-self: stretch;
-  box-sizing: border-box;
-  padding: var(--platform-spacing-lg);
-  border: 1px dashed var(--platform-colors-border);
-  border-radius: var(--platform-radius-md);
-  background: var(--platform-colors-surface-hover);
-`
-
-const StyledInlineTitle = styled.h3`
-  margin: 0;
-  font-size: var(--platform-typography-font-size-xl);
-  font-weight: var(--platform-typography-font-weight-medium);
-  line-height: var(--platform-typography-line-height-tight);
-  letter-spacing: 0;
-`
-
-const StyledInlineDescription = styled.p`
-  max-width: 42rem;
-  margin: 0;
-  color: var(--platform-colors-text-secondary);
-  line-height: var(--platform-typography-line-height-base);
-`
-
-const StyledInlineActions = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-sm);
-  margin-top: var(--platform-spacing-xs);
-`
-
-//#endregion
-
-export function EmptyState({
-  title,
-  message,
-  kicker,
-  tone = 'neutral',
-  variant = 'centered',
-  action,
-  actions,
-}: EmptyStateProps): React.ReactElement {
-  if (variant === 'inline') {
-    return (
-      <StyledInlineRoot>
-        {kicker ? <Kicker>{kicker}</Kicker> : null}
-        <StyledInlineTitle>{title}</StyledInlineTitle>
-        {message ? (
-          <StyledInlineDescription>{message}</StyledInlineDescription>
-        ) : null}
-        {actions ? (
-          <StyledInlineActions>{actions}</StyledInlineActions>
-        ) : action ? (
-          <StyledInlineActions>
-            <Button variant="subtle" size="sm" onClick={action.onClick}>
-              {action.label}
-            </Button>
-          </StyledInlineActions>
-        ) : null}
-      </StyledInlineRoot>
-    )
-  }
-
-  return (
-    <FlexCol
-      $align="center"
-      $justify="center"
-      $gap="md"
-      $flex="1"
-      $width="100%"
-      style={{
-        padding: 'var(--platform-spacing-xxl)',
-        textAlign: 'center',
-      }}
-    >
-      <Heading level={2} weight="medium">
-        {title}
-      </Heading>
-      {message ? (
-        <FlexCol $align="center" style={{ maxWidth: '36rem' }}>
-          <Text
-            as="p"
-            tone={tone === 'error' ? 'danger' : 'secondary'}
-            align="center"
-          >
-            {message}
-          </Text>
-        </FlexCol>
-      ) : null}
-      {actions ? (
-        <FlexCol $align="center">{actions}</FlexCol>
-      ) : action ? (
-        <Button variant="subtle" size="sm" onClick={action.onClick}>
-          {action.label}
-        </Button>
-      ) : null}
-    </FlexCol>
-  )
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+import { FlexCol } from '../containers/flex.js'
+import { Kicker } from '../typography/Kicker.js'
+import { Text } from '../typography/Text.js'
+
+export type EmptyStateTone = 'neutral' | 'error'
+export type EmptyStateVariant = 'centered' | 'inline'
+
+export interface EmptyStateAction {
+  label: string
+  onClick: () => void
+}
+
+export interface EmptyStateProps {
+  title: string
+  message?: string
+  kicker?: string
+  tone?: EmptyStateTone
+  variant?: EmptyStateVariant
+  action?: EmptyStateAction
+  actions?: ReactNode
+}
+
+//#region styled-components
+
+const StyledInlineRoot = styled.div`
+  display: grid;
+  place-items: start;
+  gap: var(--platform-spacing-sm);
+  width: auto;
+  max-width: 100%;
+  align-self: stretch;
+  box-sizing: border-box;
+  padding: var(--platform-spacing-lg);
+  border: 1px dashed var(--platform-colors-border);
+  border-radius: var(--platform-radius-md);
+  background: var(--platform-colors-surface-hover);
+`
+
+const StyledInlineTitle = styled.h3`
+  margin: 0;
+  font-size: var(--platform-typography-font-size-xl);
+  font-weight: var(--platform-typography-font-weight-medium);
+  line-height: var(--platform-typography-line-height-tight);
+  letter-spacing: 0;
+`
+
+const StyledInlineDescription = styled.p`
+  max-width: min(42rem, 100%);
+  margin: 0;
+  color: var(--platform-colors-text-secondary);
+  line-height: var(--platform-typography-line-height-base);
+  overflow-wrap: anywhere;
+`
+
+const StyledInlineActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm);
+  margin-top: var(--platform-spacing-xs);
+`
+
+const StyledCenteredRoot = styled(FlexCol)`
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--platform-empty-state-padding, var(--platform-spacing-xxl));
+  text-align: var(--platform-empty-state-align, center);
+`
+
+const StyledCenteredTitle = styled.h2`
+  max-width: 100%;
+  margin: 0;
+  color: var(--platform-colors-text);
+  font-size: var(
+    --platform-empty-state-title-size,
+    var(--platform-typography-font-size-lg)
+  );
+  font-weight: var(
+    --platform-empty-state-title-weight,
+    var(--platform-typography-font-weight-medium)
+  );
+  line-height: var(--platform-typography-line-height-tight);
+  letter-spacing: 0;
+  text-align: var(--platform-empty-state-align, center);
+  overflow-wrap: anywhere;
+`
+
+const StyledCenteredMessageWrap = styled(FlexCol)`
+  width: 100%;
+  min-width: 0;
+  max-width: min(var(--platform-empty-state-message-width, 36rem), 100%);
+  text-align: var(--platform-empty-state-align, center);
+
+  p {
+    width: 100%;
+    max-width: 100%;
+    text-align: var(--platform-empty-state-align, center);
+    overflow-wrap: anywhere;
+  }
+`
+
+//#endregion
+
+export function EmptyState({
+  title,
+  message,
+  kicker,
+  tone = 'neutral',
+  variant = 'centered',
+  action,
+  actions,
+}: EmptyStateProps): React.ReactElement {
+  if (variant === 'inline') {
+    return (
+      <StyledInlineRoot>
+        {kicker ? <Kicker>{kicker}</Kicker> : null}
+        <StyledInlineTitle>{title}</StyledInlineTitle>
+        {message ? (
+          <StyledInlineDescription>{message}</StyledInlineDescription>
+        ) : null}
+        {actions ? (
+          <StyledInlineActions>{actions}</StyledInlineActions>
+        ) : action ? (
+          <StyledInlineActions>
+            <Button variant="subtle" size="sm" onClick={action.onClick}>
+              {action.label}
+            </Button>
+          </StyledInlineActions>
+        ) : null}
+      </StyledInlineRoot>
+    )
+  }
+
+  return (
+    <StyledCenteredRoot
+      $align="center"
+      $justify="center"
+      $gap="md"
+      $flex="1"
+      $width="100%"
+    >
+      <StyledCenteredTitle>{title}</StyledCenteredTitle>
+      {message ? (
+        <StyledCenteredMessageWrap $align="center" $width="100%">
+          <Text
+            as="p"
+            size="sm"
+            tone={tone === 'error' ? 'danger' : 'secondary'}
+            align="center"
+          >
+            {message}
+          </Text>
+        </StyledCenteredMessageWrap>
+      ) : null}
+      {actions ? (
+        <FlexCol $align="center">{actions}</FlexCol>
+      ) : action ? (
+        <Button variant="subtle" size="sm" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      ) : null}
+    </StyledCenteredRoot>
+  )
+}

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

@@ -1,67 +1,67 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export interface InfoHintProps {
-  label: string
-  align?: 'left' | 'right'
-  children: ReactNode
-}
-
-const StyledWrap = styled.span`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  &:hover > div,
-  &:focus-within > div {
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(0);
-  }
-`
-
-const StyledButton = styled.button`
-  width: 26px;
-  height: 26px;
-  border: 1px solid var(--platform-colors-border, #e1e6ed);
-  border-radius: var(--platform-radius-full, 999px);
-  background: rgb(255 255 255 / 84%);
-  color: var(--platform-colors-text-secondary, #6d7680);
-  font-size: 12px;
-  font-weight: 900;
-  cursor: help;
-`
-
-const StyledPopover = styled.div<{ $align: 'left' | 'right' }>`
-  position: absolute;
-  z-index: 20;
-  top: calc(100% + 8px);
-  left: ${({ $align }) => ($align === 'right' ? 'auto' : '0')};
-  right: ${({ $align }) => ($align === 'right' ? '0' : 'auto')};
-  width: min(330px, calc(100vw - 72px));
-  border: 1px solid rgb(217 222 229 / 94%);
-  border-radius: var(--platform-radius-md, 8px);
-  background: rgb(255 255 255 / 98%);
-  box-shadow: 0 18px 44px rgb(38 46 55 / 16%);
-  padding: 12px 14px;
-  color: var(--platform-colors-text, #2e3338);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-4px);
-  transition: opacity 120ms ease, transform 120ms ease;
-`
-
-export function InfoHint({
-  label,
-  align = 'left',
-  children,
-}: InfoHintProps): React.ReactElement {
-  return (
-    <StyledWrap>
-      <StyledButton type="button" aria-label={label}>
-        i
-      </StyledButton>
-      <StyledPopover $align={align}>{children}</StyledPopover>
-    </StyledWrap>
-  )
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface InfoHintProps {
+  label: string
+  align?: 'left' | 'right'
+  children: ReactNode
+}
+
+const StyledWrap = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &:hover > div,
+  &:focus-within > div {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+`
+
+const StyledButton = styled.button`
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--platform-colors-border, #e1e6ed);
+  border-radius: var(--platform-radius-full, 999px);
+  background: var(--platform-colors-surface, #ffffff);
+  color: var(--platform-colors-text-secondary, #6d7680);
+  font-size: 12px;
+  font-weight: 900;
+  cursor: help;
+`
+
+const StyledPopover = styled.div<{ $align: 'left' | 'right' }>`
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 8px);
+  left: ${({ $align }) => ($align === 'right' ? 'auto' : '0')};
+  right: ${({ $align }) => ($align === 'right' ? '0' : 'auto')};
+  width: min(330px, calc(100vw - 72px));
+  border: 1px solid var(--platform-colors-border, rgb(217 222 229 / 94%));
+  border-radius: var(--platform-radius-md, 8px);
+  background: var(--platform-colors-elevated, #ffffff);
+  box-shadow: var(--platform-shadow-md, 0 18px 44px rgb(38 46 55 / 16%));
+  padding: 12px 14px;
+  color: var(--platform-colors-text, #2e3338);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 120ms ease, transform 120ms ease;
+`
+
+export function InfoHint({
+  label,
+  align = 'left',
+  children,
+}: InfoHintProps): React.ReactElement {
+  return (
+    <StyledWrap>
+      <StyledButton type="button" aria-label={label}>
+        i
+      </StyledButton>
+      <StyledPopover $align={align}>{children}</StyledPopover>
+    </StyledWrap>
+  )
+}