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

package/src/components/common/containers/PanelToolbarHeader.tsx

@@ -1,113 +1,114 @@
-import { styled } from 'styled-components'
-import { FlexRow } from './flex.js'
-import { Kicker } from '../typography/Kicker.js'
-
-export interface PanelToolbarHeaderProps {
-  /** Uppercase label row — used when `children` is omitted (e.g. Locations). */
-  kicker?: string
-  subtitle?: React.ReactNode
-  /** Left slot — icon buttons, navigation, etc. */
-  leading?: React.ReactNode
-  /** Growing center slot — search field, custom toolbar content. */
-  children?: React.ReactNode
-  /** Right slot — badges, icon actions. */
-  actions?: React.ReactNode
-  /** Optional second row below the main toolbar (e.g. breadcrumbs). */
-  footer?: React.ReactNode
-}
-
-//#region styled-components
-
-const StyledWrap = styled.div`
-  flex: 0 0 auto;
-  border-bottom: 1px solid var(--platform-colors-border);
-  background: var(--platform-colors-surface);
-`
-
-const StyledRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--platform-spacing-sm);
-  min-height: 37px;
-  padding: 0 var(--platform-spacing-sm);
-`
-
-const StyledLeading = styled(FlexRow)`
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-`
-
-const StyledCenter = styled.div`
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  flex: 1 1 auto;
-`
-
-const StyledTitleSep = styled.span`
-  flex: 0 0 auto;
-  color: var(--platform-colors-text-disabled);
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1;
-  user-select: none;
-`
-
-const StyledActions = styled(FlexRow)`
-  flex: 0 0 auto;
-  min-width: 0;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-`
-
-const StyledFooter = styled.div`
-  padding: 0 var(--platform-spacing-md) var(--platform-spacing-xs);
-`
-
-//#endregion
-
-/** Panel chrome — kicker row or custom leading / center / actions layout. */
-export function PanelToolbarHeader({
-  kicker,
-  subtitle,
-  leading,
-  children,
-  actions,
-  footer,
-}: PanelToolbarHeaderProps): React.ReactElement {
-  const useCustomLayout = Boolean(children || leading)
-
-  return (
-    <StyledWrap>
-      <StyledRow>
-        {useCustomLayout ? (
-          <>
-            {leading ? (
-              <FlexRow $align="center" $gap="xs" $width="auto" $flex="0 0 auto">
-                {leading}
-              </FlexRow>
-            ) : null}
-            {children ? <StyledCenter>{children}</StyledCenter> : null}
-          </>
-        ) : (
-          <StyledLeading $align="center" $gap="xs" $width="auto">
-            {kicker ? <Kicker inline>{kicker}</Kicker> : null}
-            {subtitle ? (
-              <>
-                <StyledTitleSep aria-hidden="true">/</StyledTitleSep>
-                {subtitle}
-              </>
-            ) : null}
-          </StyledLeading>
-        )}
-        {actions ? (
-          <StyledActions $align="center" $gap="xs" $width="auto">
-            {actions}
-          </StyledActions>
-        ) : null}
-      </StyledRow>
-      {footer ? <StyledFooter>{footer}</StyledFooter> : null}
-    </StyledWrap>
-  )
-}
+import { styled } from 'styled-components'
+import { FlexRow } from './flex.js'
+import { Kicker } from '../typography/Kicker.js'
+
+export interface PanelToolbarHeaderProps {
+  /** Uppercase label row — used when `children` is omitted (e.g. Locations). */
+  kicker?: string
+  subtitle?: React.ReactNode
+  /** Left slot — icon buttons, navigation, etc. */
+  leading?: React.ReactNode
+  /** Growing center slot — search field, custom toolbar content. */
+  children?: React.ReactNode
+  /** Right slot — badges, icon actions. */
+  actions?: React.ReactNode
+  /** Optional second row below the main toolbar (e.g. breadcrumbs). */
+  footer?: React.ReactNode
+}
+
+//#region styled-components
+
+const StyledWrap = styled.div`
+  flex: 0 0 auto;
+  border-bottom: 1px solid
+    var(--platform-panel-toolbar-border, var(--platform-colors-border));
+  background: var(--platform-panel-toolbar-bg, var(--platform-colors-surface));
+`
+
+const StyledRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+  min-height: 37px;
+  padding: 0 var(--platform-spacing-sm);
+`
+
+const StyledLeading = styled(FlexRow)`
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+`
+
+const StyledCenter = styled.div`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+`
+
+const StyledTitleSep = styled.span`
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-disabled);
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1;
+  user-select: none;
+`
+
+const StyledActions = styled(FlexRow)`
+  flex: 0 0 auto;
+  min-width: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+`
+
+const StyledFooter = styled.div`
+  padding: 0 var(--platform-spacing-md) var(--platform-spacing-xs);
+`
+
+//#endregion
+
+/** Panel chrome — kicker row or custom leading / center / actions layout. */
+export function PanelToolbarHeader({
+  kicker,
+  subtitle,
+  leading,
+  children,
+  actions,
+  footer,
+}: PanelToolbarHeaderProps): React.ReactElement {
+  const useCustomLayout = Boolean(children || leading)
+
+  return (
+    <StyledWrap>
+      <StyledRow>
+        {useCustomLayout ? (
+          <>
+            {leading ? (
+              <FlexRow $align="center" $gap="xs" $width="auto" $flex="0 0 auto">
+                {leading}
+              </FlexRow>
+            ) : null}
+            {children ? <StyledCenter>{children}</StyledCenter> : null}
+          </>
+        ) : (
+          <StyledLeading $align="center" $gap="xs" $width="auto">
+            {kicker ? <Kicker inline>{kicker}</Kicker> : null}
+            {subtitle ? (
+              <>
+                <StyledTitleSep aria-hidden="true">/</StyledTitleSep>
+                {subtitle}
+              </>
+            ) : null}
+          </StyledLeading>
+        )}
+        {actions ? (
+          <StyledActions $align="center" $gap="xs" $width="auto">
+            {actions}
+          </StyledActions>
+        ) : null}
+      </StyledRow>
+      {footer ? <StyledFooter>{footer}</StyledFooter> : null}
+    </StyledWrap>
+  )
+}

package/src/components/common/containers/QuietDisclosure.tsx

@@ -1,91 +1,91 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export interface QuietDisclosureProps {
-  summary: ReactNode
-  children: ReactNode
-  className?: string
-  defaultOpen?: boolean
-  open?: boolean
-  'aria-label'?: string
-}
-
-//#region styled-components
-
-const StyledDetails = styled.details`
-  border-top: 1px solid var(--platform-colors-divider);
-  padding-top: 14px;
-  transition: border-color var(--platform-transition-base),
-    padding var(--platform-transition-base);
-
-  &[open] {
-    padding-bottom: var(--platform-spacing-sm);
-  }
-
-  &[open] > div {
-    animation: quiet-disclosure-enter 240ms ease both;
-  }
-
-  @keyframes quiet-disclosure-enter {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-`
-
-const StyledSummary = styled.summary`
-  cursor: pointer;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: 720;
-  letter-spacing: 0.08em;
-  list-style: none;
-  text-transform: uppercase;
-
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  &::after {
-    content: '+';
-    margin-left: var(--platform-spacing-sm);
-    color: var(--quiet-accent, var(--platform-colors-accent));
-    transition: color var(--platform-transition-base);
-  }
-
-  details[open] &::after {
-    content: '-';
-  }
-`
-
-const StyledBody = styled.div`
-  min-width: 0;
-`
-
-//#endregion
-
-export function QuietDisclosure({
-  summary,
-  children,
-  className,
-  defaultOpen,
-  open,
-  'aria-label': ariaLabel,
-}: QuietDisclosureProps): React.ReactElement {
-  return (
-    <StyledDetails
-      className={className}
-      open={open ?? defaultOpen}
-      aria-label={ariaLabel}
-    >
-      <StyledSummary>{summary}</StyledSummary>
-      <StyledBody>{children}</StyledBody>
-    </StyledDetails>
-  )
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface QuietDisclosureProps {
+  summary: ReactNode
+  children: ReactNode
+  className?: string
+  defaultOpen?: boolean
+  open?: boolean
+  'aria-label'?: string
+}
+
+//#region styled-components
+
+const StyledDetails = styled.details`
+  border-top: 1px solid var(--platform-colors-divider);
+  padding-top: 14px;
+  transition: border-color var(--platform-transition-base),
+    padding var(--platform-transition-base);
+
+  &[open] {
+    padding-bottom: var(--platform-spacing-sm);
+  }
+
+  &[open] > div {
+    animation: quiet-disclosure-enter 240ms ease both;
+  }
+
+  @keyframes quiet-disclosure-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`
+
+const StyledSummary = styled.summary`
+  cursor: pointer;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: 720;
+  letter-spacing: 0.08em;
+  list-style: none;
+  text-transform: uppercase;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::after {
+    content: '+';
+    margin-left: var(--platform-spacing-sm);
+    color: var(--quiet-accent, var(--platform-colors-accent));
+    transition: color var(--platform-transition-base);
+  }
+
+  details[open] &::after {
+    content: '-';
+  }
+`
+
+const StyledBody = styled.div`
+  min-width: 0;
+`
+
+//#endregion
+
+export function QuietDisclosure({
+  summary,
+  children,
+  className,
+  defaultOpen,
+  open,
+  'aria-label': ariaLabel,
+}: QuietDisclosureProps): React.ReactElement {
+  return (
+    <StyledDetails
+      className={className}
+      open={open ?? defaultOpen}
+      aria-label={ariaLabel}
+    >
+      <StyledSummary>{summary}</StyledSummary>
+      <StyledBody>{children}</StyledBody>
+    </StyledDetails>
+  )
+}

package/src/components/common/containers/QuietSurface.tsx

@@ -1,41 +1,40 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-
-export interface QuietSurfaceProps {
-  children: ReactNode
-  className?: string
-}
-
-//#region styled-components
-
-const StyledSurface = styled.div`
-  display: grid;
-  gap: var(--platform-spacing-md);
-  min-width: 0;
-  border: 1px solid
-    rgb(from var(--quiet-ink, var(--platform-colors-text)) r g b / 10%);
-  border-radius: var(--platform-radius-md);
-  background: rgb(255 255 255 / 58%);
-  box-shadow: 0 16px 42px rgb(31 38 52 / 5%);
-  padding: clamp(20px, 3vw, 34px);
-  transition: border-color var(--platform-transition-base),
-    box-shadow var(--platform-transition-base),
-    transform var(--platform-transition-base),
-    background var(--platform-transition-base);
-
-  &:focus-within {
-    border-color: rgb(
-      from var(--quiet-accent, var(--platform-colors-accent)) r g b / 28%
-    );
-    box-shadow: 0 20px 54px rgb(31 38 52 / 8%);
-  }
-`
-
-//#endregion
-
-export function QuietSurface({
-  children,
-  className,
-}: QuietSurfaceProps): React.ReactElement {
-  return <StyledSurface className={className}>{children}</StyledSurface>
-}
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface QuietSurfaceProps {
+  children: ReactNode
+  className?: string
+}
+
+//#region styled-components
+
+const StyledSurface = styled.div`
+  display: grid;
+  gap: var(--platform-spacing-md);
+  min-width: 0;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-md);
+  background: var(--platform-colors-surface);
+  box-shadow: var(--platform-shadows-sm);
+  padding: clamp(20px, 3vw, 34px);
+  transition: border-color var(--platform-transition-base),
+    box-shadow var(--platform-transition-base),
+    transform var(--platform-transition-base),
+    background var(--platform-transition-base);
+
+  &:focus-within {
+    border-color: rgb(
+      from var(--quiet-accent, var(--platform-colors-accent)) r g b / 28%
+    );
+    box-shadow: 0 20px 54px rgb(31 38 52 / 8%);
+  }
+`
+
+//#endregion
+
+export function QuietSurface({
+  children,
+  className,
+}: QuietSurfaceProps): React.ReactElement {
+  return <StyledSurface className={className}>{children}</StyledSurface>
+}

package/src/components/common/containers/ScrollPanel.tsx

@@ -1,33 +1,33 @@
-import type { ComponentPropsWithoutRef } from 'react'
-import { FlexCol, flexPanelBodyCss, type SpacingToken } from './flex.js'
-import { styled } from 'styled-components'
-
-export interface ScrollPanelProps extends ComponentPropsWithoutRef<'div'> {
-  children: React.ReactNode
-  padding?: SpacingToken
-}
-
-//#region styled-components
-
-const StyledScrollPanel = styled(FlexCol)<{ $padding: SpacingToken }>`
-  ${flexPanelBodyCss}
-  overflow: auto;
-  padding: var(
-    --platform-modal-inset,
-    var(--platform-spacing-${({ $padding }) => $padding})
-  );
-`
-
-//#endregion
-
-export function ScrollPanel({
-  children,
-  padding = 'xl',
-  ...rest
-}: ScrollPanelProps): React.ReactElement {
-  return (
-    <StyledScrollPanel $padding={padding} {...rest}>
-      {children}
-    </StyledScrollPanel>
-  )
-}
+import type { ComponentPropsWithoutRef } from 'react'
+import { FlexCol, flexPanelBodyCss, type SpacingToken } from './flex.js'
+import { styled } from 'styled-components'
+
+export interface ScrollPanelProps extends ComponentPropsWithoutRef<'div'> {
+  children: React.ReactNode
+  padding?: SpacingToken
+}
+
+//#region styled-components
+
+const StyledScrollPanel = styled(FlexCol)<{ $padding: SpacingToken }>`
+  ${flexPanelBodyCss}
+  overflow: auto;
+  padding: var(
+    --platform-modal-inset,
+    var(--platform-spacing-${({ $padding }) => $padding})
+  );
+`
+
+//#endregion
+
+export function ScrollPanel({
+  children,
+  padding = 'xl',
+  ...rest
+}: ScrollPanelProps): React.ReactElement {
+  return (
+    <StyledScrollPanel $padding={padding} {...rest}>
+      {children}
+    </StyledScrollPanel>
+  )
+}

package/src/components/common/containers/StatusBar.tsx

@@ -1,42 +1,42 @@
-import { styled } from 'styled-components'
-
-export interface StatusBarProps {
-  status: string
-  meta?: string
-}
-
-const StyledStatusBar = styled.footer`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border-top: 1px solid var(--platform-colors-divider);
-  color: var(--platform-colors-text-secondary);
-  flex-shrink: 0;
-  font-size: var(--platform-typography-font-size-xs, 11px);
-  min-height: 26px;
-  padding: 4px 12px;
-`
-
-const StyledStatusMessage = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledStatusMeta = styled.span`
-  flex-shrink: 0;
-  white-space: nowrap;
-`
-
-export function StatusBar({
-  status,
-  meta,
-}: StatusBarProps): React.ReactElement {
-  return (
-    <StyledStatusBar>
-      <StyledStatusMessage>{status}</StyledStatusMessage>
-      {meta ? <StyledStatusMeta>{meta}</StyledStatusMeta> : null}
-    </StyledStatusBar>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface StatusBarProps {
+  status: string
+  meta?: string
+}
+
+const StyledStatusBar = styled.footer`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-top: 1px solid var(--platform-colors-divider);
+  color: var(--platform-colors-text-secondary);
+  flex-shrink: 0;
+  font-size: var(--platform-typography-font-size-xs, 11px);
+  min-height: 26px;
+  padding: 4px 12px;
+`
+
+const StyledStatusMessage = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledStatusMeta = styled.span`
+  flex-shrink: 0;
+  white-space: nowrap;
+`
+
+export function StatusBar({
+  status,
+  meta,
+}: StatusBarProps): React.ReactElement {
+  return (
+    <StyledStatusBar>
+      <StyledStatusMessage>{status}</StyledStatusMessage>
+      {meta ? <StyledStatusMeta>{meta}</StyledStatusMeta> : null}
+    </StyledStatusBar>
+  )
+}