@sirenodeck/sirenodeck 0.1.1-alpha.0

package/src/ui/primitives/index.ts

@@ -0,0 +1,6 @@
+export * from "./Chip"
+export * from "./Icon"
+export * from "./Label"
+export * from "./ProgressBar"
+export * from "./TapIndicator"
+export * from "./Text"

package/src/ui/surfaces/BarsSurface.tsx

@@ -0,0 +1,211 @@
+import type { CSSProperties, ReactElement } from "react"
+
+import { Icon } from "../primitives/Icon"
+import { Text } from "../primitives/Text"
+import { useThemeUiPresentation } from "../theme-presentation"
+import { cn } from "../utils/cn"
+
+export interface BarsItem {
+  color?: string
+  displayValue?: string
+  maxValue: number
+  title: string
+  titleIcon?: string
+  units?: string
+  value: number
+}
+
+type BarsItems =
+  | readonly [BarsItem]
+  | readonly [BarsItem, BarsItem]
+  | readonly [BarsItem, BarsItem, BarsItem]
+
+export interface BarsSurfaceProps {
+  barMaxWidthClass?: string
+  className?: string
+  items: BarsItems
+  style?: CSSProperties
+}
+
+const MUTED_TEXT_COLOR = "var(--sireno-color-foreground-contrast)"
+
+function getBarFillRatio(item: BarsItem): number {
+  if (item.maxValue <= 0) {
+    return 0
+  }
+  return Math.max(0, Math.min(item.value / item.maxValue, 1))
+}
+
+interface BarsValueLayerProps {
+  color: string
+  fillPct: number
+  side: "over" | "above"
+  text: string
+  units: string | undefined
+}
+
+function BarsValueLayer({
+  color,
+  fillPct,
+  side,
+  text,
+  units,
+}: BarsValueLayerProps): ReactElement {
+  const clipPath =
+    side === "over"
+      ? `inset(${100 - fillPct}% 0 0 0)`
+      : `inset(0 0 ${fillPct}% 0)`
+
+  return (
+    <div
+      aria-hidden="true"
+      className="sireno-bars-value-layer pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden"
+      data-sireno-bars-layer={side}
+      style={{ clipPath, color }}
+    >
+      <div
+        className="flex items-baseline gap-0.5 whitespace-nowrap"
+        style={{
+          transform: "rotate(-90deg)",
+          transformOrigin: "center",
+        }}
+      >
+        <Text
+          align="center"
+          fit="hidden"
+          size="sm"
+          style={{ color }}
+          typography="mono"
+          weight="bold"
+          text={text}
+        />
+        {units ? (
+          <Text
+            align="center"
+            fit="hidden"
+            size="xs"
+            style={{ color }}
+            typography="mono"
+            weight="bold"
+            text={units}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export function BarsSurface(props: BarsSurfaceProps): ReactElement {
+  if (props.items.length < 1 || props.items.length > 3) {
+    throw new Error(`Bars supports 1-3 items. Received ${props.items.length}.`)
+  }
+
+  const themeUi = useThemeUiPresentation()
+
+  if (themeUi?.surfaces?.bars) {
+    return themeUi.surfaces.bars(props, undefined, barsSurfaceBase)
+  }
+
+  return barsSurfaceBase(props)
+}
+
+export function barsSurfaceBase(props: BarsSurfaceProps): ReactElement {
+  if (props.items.length < 1 || props.items.length > 3) {
+    throw new Error(`Bars supports 1-3 items. Received ${props.items.length}.`)
+  }
+
+  const barMaxWidthClass = props.barMaxWidthClass ?? "max-w-[60%]"
+
+  return (
+    <div
+      className={cn(
+        "flex h-full min-h-0 w-full items-stretch justify-between gap-1",
+        props.className,
+      )}
+      data-sireno-bars-count={props.items.length}
+      data-sireno-ui-bars="true"
+      style={props.style}
+    >
+      {props.items.map((item, index) => {
+        const color = item.color ?? "var(--sireno-color-primary)"
+        const fillPct = Math.round(getBarFillRatio(item) * 100)
+        const text = item.displayValue ?? String(Math.round(item.value))
+        const units = item.units
+
+        return (
+          <div
+            className="flex min-w-0 flex-1 flex-col gap-0.5"
+            key={`${item.title}-${index}`}
+          >
+            {props.items.length === 1 && item.titleIcon ? (
+              <div className="flex items-center justify-center gap-1">
+                <Icon source={item.titleIcon} size={12} />
+                <Text
+                  align="center"
+                  fit="ellipsis"
+                  size="xs"
+                  tone="primary"
+                  typography="main"
+                  weight="bold"
+                  text={item.title}
+                />
+              </div>
+            ) : item.titleIcon ? (
+              <div className="flex items-center justify-center">
+                <Icon source={item.titleIcon} size={12} />
+              </div>
+            ) : (
+              <Text
+                align="center"
+                fit="ellipsis"
+                size="xs"
+                tone="primary"
+                typography="main"
+                weight="bold"
+                text={item.title}
+              />
+            )}
+            <div className="flex flex-1 items-stretch justify-center">
+              <div
+                aria-hidden="true"
+                className={cn(
+                  "relative flex-1 overflow-hidden rounded-md",
+                  barMaxWidthClass,
+                )}
+                style={{
+                  backgroundColor:
+                    "color-mix(in oklab, currentColor 12%, transparent)",
+                  minHeight: "24px",
+                }}
+              >
+                <div
+                  className="absolute inset-x-0 bottom-0 rounded-md"
+                  data-sireno-bars-fill="true"
+                  style={{
+                    backgroundColor: color,
+                    height: `${fillPct}%`,
+                    minHeight: item.value > 0 ? "4px" : undefined,
+                  }}
+                />
+                <BarsValueLayer
+                  color={color}
+                  fillPct={fillPct}
+                  side="above"
+                  text={text}
+                  units={units}
+                />
+                <BarsValueLayer
+                  color={MUTED_TEXT_COLOR}
+                  fillPct={fillPct}
+                  side="over"
+                  text={text}
+                  units={units}
+                />
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/ui/surfaces/IconLabelProgressSurface.tsx

@@ -0,0 +1,133 @@
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+
+import { EMOJI_RE } from "../../core/icon-source"
+import { Icon } from "../primitives/Icon"
+import { Label, LabelVariant } from "../primitives/Label"
+import { ProgressBar } from "../primitives/ProgressBar"
+import { useThemeUiPresentation } from "../theme-presentation"
+
+const DEFAULT_VISIBLE_MS = 2000
+
+export interface IconLabelProgressSurfaceProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  source?: string
+  label: string
+  progress: number
+  visible: boolean
+  visibleMs?: number
+  variant?: LabelVariant
+  details?: string
+  bgColor?: string
+  bgColorAlt?: string
+}
+
+export function IconLabelProgressSurface(
+  props: IconLabelProgressSurfaceProps,
+): ReactElement {
+  const themeUi = useThemeUiPresentation()
+
+  if (themeUi?.surfaces?.iconLabelProgress) {
+    return themeUi.surfaces.iconLabelProgress(
+      props,
+      undefined,
+      iconLabelProgressSurfaceBase,
+    )
+  }
+
+  return iconLabelProgressSurfaceBase(props)
+}
+
+export function iconLabelProgressSurfaceBase(
+  props: IconLabelProgressSurfaceProps,
+): ReactElement {
+  const {
+    className: consumerClassName,
+    source,
+    label,
+    progress,
+    visible,
+    visibleMs = DEFAULT_VISIBLE_MS,
+    variant,
+    details,
+    bgColor,
+    bgColorAlt,
+    ...rest
+  } = props
+
+  const [shown, setShown] = useState(visible)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    if (visible) {
+      setShown(true)
+      timerRef.current = setTimeout(() => {
+        setShown(false)
+        timerRef.current = null
+      }, visibleMs)
+    } else {
+      setShown(false)
+    }
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current)
+        timerRef.current = null
+      }
+    }
+  }, [visible, visibleMs, progress])
+
+  const clampedProgress = Math.max(0, Math.min(100, progress))
+  const layoutClassName =
+    "flex h-full w-full flex-col items-center justify-center gap-1 relative"
+  const mergedClassName = consumerClassName
+    ? `${layoutClassName} ${consumerClassName}`
+    : layoutClassName
+
+  const iconContent =
+    source !== undefined && EMOJI_RE.test(source) ? (
+      <span
+        className="inline-block shrink-0 leading-none"
+        style={{ fontSize: 36 }}
+      >
+        {source}
+      </span>
+    ) : (
+      <Icon source={source} size={36} />
+    )
+
+  return (
+    <div
+      className={mergedClassName}
+      data-sireno-surface="icon-label-progress"
+      data-visible={shown ? "true" : "false"}
+      data-progress={clampedProgress}
+      {...rest}
+    >
+      {iconContent}
+      <Label text={label} variant={variant} />
+      {details !== undefined && details.length > 0 && (
+        <Label text={details} variant="small" />
+      )}
+      {shown && (
+        <div className="absolute bottom-0 left-0 right-0 px-1 pb-1">
+          <ProgressBar
+            value={clampedProgress}
+            bgColor={bgColor}
+            bgColorAlt={bgColorAlt}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/ui/surfaces/IconLabelSurface.tsx

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type ReactElement } from "react"
+
+import { EMOJI_RE } from "../../core/icon-source"
+import { Icon } from "../primitives/Icon"
+import { Label, LabelVariant } from "../primitives/Label"
+import { useThemeUiPresentation } from "../theme-presentation"
+
+export interface IconLabelSurfaceProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  source?: string
+  label: string
+  variant?: LabelVariant
+  details?: string
+}
+
+export function IconLabelSurface(props: IconLabelSurfaceProps): ReactElement {
+  const themeUi = useThemeUiPresentation()
+
+  if (themeUi?.surfaces?.iconLabel) {
+    return themeUi.surfaces.iconLabel(props, undefined, iconLabelSurfaceBase)
+  }
+
+  return iconLabelSurfaceBase(props)
+}
+
+export function iconLabelSurfaceBase(
+  props: IconLabelSurfaceProps,
+): ReactElement {
+  const { className: consumerClassName, source, ...rest } = props
+  const layoutClassName =
+    "flex h-full w-full min-w-0 flex-col items-center justify-center gap-1 overflow-hidden"
+  const mergedClassName = consumerClassName
+    ? `${layoutClassName} ${consumerClassName}`
+    : layoutClassName
+
+  const iconContent =
+    source !== undefined && EMOJI_RE.test(source) ? (
+      <span
+        className="inline-block shrink-0 leading-none"
+        style={{ fontSize: 36 }}
+      >
+        {source}
+      </span>
+    ) : (
+      <Icon source={source} size={36} />
+    )
+
+  return (
+    <div className={mergedClassName} {...rest}>
+      {iconContent}
+      <Label text={props.label} variant={props.variant} lines={2} />
+      {props.details !== undefined && props.details.length > 0 && (
+        <Label text={props.details} variant="small" />
+      )}
+    </div>
+  )
+}

package/src/ui/surfaces/LabelValueListSurface.tsx

@@ -0,0 +1,202 @@
+import type { CSSProperties, ReactElement } from "react"
+
+import { Text, TextSize } from "../primitives"
+import { Icon } from "../primitives/Icon"
+import { useThemeUiPresentation } from "../theme-presentation"
+import { cn } from "../utils/cn"
+
+export interface LabelValueListLine {
+  color?: string
+  icon?: string
+  label: string
+  units?: string
+  unitLong?: string
+  value: string
+}
+
+type LabelValueListLines =
+  | readonly [LabelValueListLine]
+  | readonly [LabelValueListLine, LabelValueListLine]
+  | readonly [LabelValueListLine, LabelValueListLine, LabelValueListLine]
+
+export interface LabelValueListProps {
+  className?: string
+  lines: LabelValueListLines
+  style?: CSSProperties
+}
+
+type RowTileProps = {
+  item: LabelValueListLine
+  variant?: "default" | "big" | "small"
+}
+
+function RowTile({ item, variant = "default" }: RowTileProps): ReactElement {
+  const variantsProps: Record<
+    NonNullable<RowTileProps["variant"]>,
+    {
+      value: TextSize
+      valueLineClass?: string
+      valueTone?: "foreground" | "primary"
+      valueWidthUnits?: TextSize
+      valueMultiline?: boolean
+      unit: TextSize
+      labelSize?: TextSize
+      showLabel?: boolean
+      multiline?: boolean
+      iconSize?: number
+      titleClass?: string
+      unitsClass?: string
+      unitsPosition?: "prev" | "next"
+    }
+  > = {
+    big: {
+      value: "5xl",
+      valueWidthUnits: "4xl",
+      valueMultiline: true,
+      unitsClass: "-mt-1 text-center",
+      unit: "md",
+      showLabel: true,
+      multiline: true,
+      iconSize: 18,
+      titleClass: "items-center justify-center",
+      labelSize: "md",
+    },
+    default: {
+      value: "xl",
+      unit: "sm",
+      multiline: true,
+      unitsPosition: "prev",
+      iconSize: 16,
+      labelSize: "sm",
+      showLabel: true,
+      valueLineClass: "flex -mt-1",
+    },
+    small: {
+      value: "lg",
+      unit: "xs",
+      iconSize: 14,
+      showLabel: false,
+      unitsClass: "max-w-[20%]",
+      valueLineClass: "flex",
+    },
+  }
+
+  const colorStyle = item.color ? { color: item.color } : undefined
+  const variantProps = variantsProps[variant]
+
+  return (
+    <div
+      className={cn(!variantProps.multiline && "flex", "items-start")}
+      style={{ ...colorStyle }}
+    >
+      <div className={cn("flex gap-1 items-center", variantProps.titleClass)}>
+        {item.icon ? (
+          <Icon source={item.icon} size={variantProps.iconSize} />
+        ) : null}
+        {variantProps.showLabel ? (
+          <Text
+            text={item.label}
+            size={variantProps.labelSize ?? "xs"}
+            weight="semibold"
+            tone="foreground"
+            fit="autofit"
+          />
+        ) : null}
+        {variantProps.unitsPosition === "prev" && item.units ? (
+          <div className={cn(variantProps.unitsClass)}>
+            <Text
+              size={variantProps.unit}
+              text={item.units}
+              style={colorStyle}
+            />
+          </div>
+        ) : null}
+      </div>
+      <div
+        className={cn(
+          "flex-1 flex min-w-0 min-h-0 gap-0.5 justify-end items-baseline",
+          variantProps.valueMultiline ? "flex-col items-center" : "",
+          variantProps.valueLineClass,
+        )}
+      >
+        <Text
+          size={
+            item.units
+              ? (variantProps.valueWidthUnits ?? variantProps.value)
+              : variantProps.value
+          }
+          weight={variant === "big" ? "normal" : "bold"}
+          text={item.value}
+          tone={variantProps.valueTone ?? "primary"}
+          style={colorStyle}
+          fit="autofit"
+        />
+
+        {item.units && variantProps.unitsPosition !== "prev" ? (
+          <div className={cn("shrink-0", variantProps.unitsClass)}>
+            <Text
+              size={variantProps.unit}
+              text={
+                variant === "big" ? (item.unitLong ?? item.units) : item.units
+              }
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export function LabelValueListSurface(
+  props: LabelValueListProps,
+): ReactElement {
+  if (props.lines.length < 1 || props.lines.length > 3) {
+    throw new Error(
+      `LabelValueList supports 1-3 lines. Received ${props.lines.length}.`,
+    )
+  }
+
+  const themeUi = useThemeUiPresentation()
+  if (themeUi?.surfaces?.labelValueList) {
+    return themeUi.surfaces.labelValueList(
+      props,
+      undefined,
+      labelValueListSurfaceBase,
+    )
+  }
+
+  return labelValueListSurfaceBase(props)
+}
+
+export function labelValueListSurfaceBase(
+  props: LabelValueListProps,
+): ReactElement {
+  if (props.lines.length < 1 || props.lines.length > 3) {
+    throw new Error(
+      `LabelValueList supports 1-3 lines. Received ${props.lines.length}.`,
+    )
+  }
+
+  const variants: Record<number, RowTileProps["variant"]> = {
+    1: "big",
+    2: "default",
+    3: "small",
+  }
+
+  const variant =
+    variants[Math.min(props.lines.length, Object.values(variants).length)]
+
+  return (
+    <div
+      className={cn("flex w-full gap-0.5 p-1", "flex-col", props.className)}
+      style={{
+        color: "var(--sireno-color-fg)",
+        ...props.style,
+      }}
+    >
+      {props.lines.map((item, index) => (
+        <RowTile key={`${item.label}-${index}`} item={item} variant={variant} />
+      ))}
+    </div>
+  )
+}