@domicile-desktop/component-library 0.0.0-alpha-01b9340aef7f → 0.0.0-alpha-7a29c8f7f7ea

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-01b9340aef7f",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-01b9340aef7f",
+    "@domicile-desktop/sdk": "0.0.0-alpha-7a29c8f7f7ea",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-7a29c8f7f7ea",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -34,6 +34,19 @@
   },
   "exports": {
     "./Accordion": "./src/Accordion/Accordion.tsx",
+    "./AnimatedBellIcon": "./src/AnimatedBellIcon/AnimatedBellIcon.tsx",
+    "./AnimatedBluetoothIcon": "./src/AnimatedBluetoothIcon/AnimatedBluetoothIcon.tsx",
+    "./AnimatedChatIcon": "./src/AnimatedChatIcon/AnimatedChatIcon.tsx",
+    "./AnimatedCheckIcon": "./src/AnimatedCheckIcon/AnimatedCheckIcon.tsx",
+    "./AnimatedEyeIcon": "./src/AnimatedEyeIcon/AnimatedEyeIcon.tsx",
+    "./AnimatedGearIcon": "./src/AnimatedGearIcon/AnimatedGearIcon.tsx",
+    "./AnimatedKeyboardIcon": "./src/AnimatedKeyboardIcon/AnimatedKeyboardIcon.tsx",
+    "./AnimatedLightningIcon": "./src/AnimatedLightningIcon/AnimatedLightningIcon.tsx",
+    "./AnimatedMicrophoneIcon": "./src/AnimatedMicrophoneIcon/AnimatedMicrophoneIcon.tsx",
+    "./AnimatedSpeakerIcon": "./src/AnimatedSpeakerIcon/AnimatedSpeakerIcon.tsx",
+    "./AnimatedSquaresIcon": "./src/AnimatedSquaresIcon/AnimatedSquaresIcon.tsx",
+    "./AnimatedThemeIcon": "./src/AnimatedThemeIcon/AnimatedThemeIcon.tsx",
+    "./AnimatedWifiIcon": "./src/AnimatedWifiIcon/AnimatedWifiIcon.tsx",
     "./AppChooser": "./src/AppChooser/AppChooser.tsx",
     "./Autocomplete": "./src/Autocomplete/Autocomplete.tsx",
     "./Avatar": "./src/Avatar/Avatar.tsx",
@@ -133,5 +146,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-01b9340aef7f"
+  "version": "0.0.0-alpha-7a29c8f7f7ea"
 }

package/src/AnimatedBellIcon/AnimatedBellIcon.tsx

@@ -0,0 +1,66 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { BELL_FILL } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+/** Where the bell hangs from. */
+const PIVOT = [128, 24] as const;
+
+type Props = {
+  /** Swings the bell each time it changes, such as to a higher unread count. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  /** Strikes the bell through, such as while do not disturb is on. */
+  off?: boolean | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's filled `BellSimple`. It swings, its clapper lagging, on each
+ * cue, and nudges while the control it is in is pointed at. A slash draws
+ * across it while it is `off`.
+ */
+export const AnimatedBellIcon = ({ cue, label, off = false, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size} slash={{ shown: off, weight: "fill" }}>
+      <IconPart
+        cue={cued}
+        cueStyles={bodySwingStyles}
+        d={BELL_FILL.body}
+        hoverStyles={bodyNudgeStyles}
+        name="body"
+        origin={PIVOT}
+      />
+      <IconPart
+        cue={cued}
+        cueStyles={clapperSwingStyles}
+        d={BELL_FILL.clapper}
+        name="clapper"
+        origin={PIVOT}
+      />
+    </IconFrame>
+  );
+};
+
+const bodySwingStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconBellSwing calc({durations.slowest} + {durations.normal}) {easings.linear}",
+  },
+});
+
+const clapperSwingStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconBellClapper calc({durations.slowest} + {durations.normal}) {easings.linear} {durations.fastest}",
+  },
+});
+
+const bodyNudgeStyles = css({
+  _controlHover: {
+    animation: "iconBellNudge {durations.slowest} {easings.in-out}",
+  },
+});

package/src/AnimatedBluetoothIcon/AnimatedBluetoothIcon.tsx

@@ -0,0 +1,84 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { BLUETOOTH_BOLD } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+  /** Off is slashed; connected shows the dots beside the rune. */
+  state: "connected" | "off" | "on";
+};
+
+/**
+ * Phosphor's bold `Bluetooth`, `BluetoothConnected` and `BluetoothSlash` in
+ * one. The dots slide out of the rune when a device connects, back in when
+ * it goes, and blink while the control the icon is in is pointed at.
+ */
+export const AnimatedBluetoothIcon = ({ label, size, state }: Props) => {
+  const dots = state === "connected" ? "shown" : "hidden";
+  return (
+    <IconFrame
+      label={label}
+      size={size}
+      slash={{ shown: state === "off", weight: "bold" }}
+    >
+      <IconPart d={BLUETOOTH_BOLD.rune} name="rune" />
+      <IconPart
+        d={BLUETOOTH_BOLD.dotStart}
+        hoverStyles={state === "connected" ? dotBlinkStyles : undefined}
+        name="dot"
+        origin={[56, 128]}
+        state={dots}
+        stateStyles={dotStartStyles}
+      />
+      <IconPart
+        d={BLUETOOTH_BOLD.dotEnd}
+        hoverStyles={state === "connected" ? dotBlinkStyles : undefined}
+        name="dot"
+        order={1}
+        origin={[208, 128]}
+        state={dots}
+        stateStyles={dotEndStyles}
+      />
+    </IconFrame>
+  );
+};
+
+const dotStartStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateX(28px) scale(0.3)",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.slow} {easings.out}, transform {durations.slower} {easings.outBack}",
+  },
+});
+
+const dotEndStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateX(-28px) scale(0.3)",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.slow} {easings.out}, transform {durations.slower} {easings.outBack}",
+  },
+});
+
+const dotBlinkStyles = css({
+  _controlHover: {
+    animation:
+      "iconDotBlink {durations.slower} {easings.in-out} calc(var(--part-order) * {durations.fast}) both",
+  },
+});

package/src/AnimatedChatIcon/AnimatedChatIcon.tsx

@@ -0,0 +1,69 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { CHAT_BOLD } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+/** Where each line starts writing from. */
+const LINE_STARTS = [
+  [84, 108],
+  [84, 148],
+] as const;
+
+type Props = {
+  /** Plays each time it changes, such as to a higher unread count. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `ChatCircleText`. On each cue the bubble tips on its tail
+ * and its lines write in, one after the other; pointed at, it tips.
+ */
+export const AnimatedChatIcon = ({ cue, label, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart
+        cue={cued}
+        cueStyles={bubbleTipStyles}
+        d={CHAT_BOLD.bubble}
+        hoverStyles={bubbleHoverStyles}
+        name="bubble"
+        origin={[32, 228]}
+      />
+      {CHAT_BOLD.lines.map((d, index) => (
+        <IconPart
+          cue={cued}
+          cueStyles={lineWriteStyles}
+          d={d}
+          key={d}
+          name="line"
+          order={index}
+          origin={LINE_STARTS[index]}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+const bubbleTipStyles = css({
+  "&[data-cued]": {
+    animation: "iconBubbleTip {durations.slowest} {easings.in-out}",
+  },
+});
+
+const bubbleHoverStyles = css({
+  _controlHover: {
+    animation: "iconBubbleTip {durations.slower} {easings.in-out}",
+  },
+});
+
+const lineWriteStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconLineWrite {durations.slow} {easings.out} calc({durations.faster} + var(--part-order) * {durations.fast}) both",
+  },
+});

package/src/AnimatedCheckIcon/AnimatedCheckIcon.tsx

@@ -0,0 +1,24 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { CHECK_BOLD } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Check`. It draws from its start when it appears, such as
+ * when something has finished.
+ */
+export const AnimatedCheckIcon = ({ label, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart d={CHECK_BOLD.check} name="check" stateStyles={drawStyles} />
+  </IconFrame>
+);
+
+const drawStyles = css({
+  animation: "iconCheckDraw {durations.slow} {easings.out}",
+});

package/src/AnimatedEyeIcon/AnimatedEyeIcon.tsx

@@ -0,0 +1,96 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { EYE_BOLD } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  /** Phosphor's `Eye` while open, `EyeClosed` while shut. */
+  open: boolean;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Eye` and `EyeClosed` in one. Shutting blinks the eye
+ * closed; opening widens it and the pupil comes back. Pointed at while open,
+ * the pupil looks one way and the other.
+ */
+export const AnimatedEyeIcon = ({ label, open, size }: Props) => {
+  const openState = open ? "shown" : "hidden";
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart
+        d={EYE_BOLD.outline}
+        name="outline"
+        state={openState}
+        stateStyles={outlineStyles}
+      />
+      <IconPart
+        d={EYE_BOLD.pupil}
+        hoverStyles={open ? pupilGlanceStyles : undefined}
+        name="pupil"
+        state={openState}
+        stateStyles={pupilStyles}
+      />
+      <IconPart
+        d={EYE_BOLD.closed}
+        name="closed"
+        state={open ? "hidden" : "shown"}
+        stateStyles={closedStyles}
+      />
+    </IconFrame>
+  );
+};
+
+// Shutting squeezes the outline flat, then lets it go.
+const outlineStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleY(0.08)",
+    transition:
+      "transform {durations.fast} {easings.in}, opacity {durations.fastest} {easings.linear} {durations.fast}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "transform {durations.slow} {easings.outBack} {durations.faster}, opacity {durations.fastest} {easings.linear} {durations.faster}",
+  },
+});
+
+const pupilStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleY(0.08)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.slow} {easings.out} {durations.normal}, transform {durations.slow} {easings.outBack} {durations.normal}",
+  },
+});
+
+const closedStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateY(-10px) scaleY(0.5)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.fast}, transform {durations.normal} {easings.out} {durations.fast}",
+  },
+});
+
+const pupilGlanceStyles = css({
+  _controlHover: {
+    animation: "iconPupilGlance calc({durations.slowest} * 2) {easings.in-out}",
+  },
+});

package/src/AnimatedGearIcon/AnimatedGearIcon.tsx

@@ -0,0 +1,26 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { GEAR_REGULAR } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `GearSix`. It turns one tooth and settles while the
+ * control it is in is pointed at.
+ */
+export const AnimatedGearIcon = ({ label, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart d={GEAR_REGULAR.gear} hoverStyles={gearTurnStyles} name="gear" />
+  </IconFrame>
+);
+
+const gearTurnStyles = css({
+  _controlHover: {
+    animation: "iconGearTurn {durations.slowest} {easings.outBack}",
+  },
+});

package/src/AnimatedKeyboardIcon/AnimatedKeyboardIcon.tsx

@@ -0,0 +1,50 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { KEYBOARD_BOLD } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+type Props = {
+  /** Plays each time it changes, such as to the keymap in use. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Keyboard`. On each cue its keys press down in a wave, top
+ * row first; pointed at, one key presses.
+ */
+export const AnimatedKeyboardIcon = ({ cue, label, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart d={KEYBOARD_BOLD.frame} name="frame" />
+      {KEYBOARD_BOLD.keys.map((d, index) => (
+        <IconPart
+          cue={cued}
+          cueStyles={keyWaveStyles}
+          d={d}
+          hoverStyles={index === 1 ? keyHoverStyles : undefined}
+          key={d}
+          name="key"
+          order={index}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+const keyWaveStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconKeyPress {durations.slow} {easings.in-out} calc(var(--part-order) * {durations.fastest}) both",
+  },
+});
+
+const keyHoverStyles = css({
+  _controlHover: {
+    animation: "iconKeyPress {durations.slow} {easings.in-out}",
+  },
+});

package/src/AnimatedLightningIcon/AnimatedLightningIcon.tsx

@@ -0,0 +1,27 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { LIGHTNING_FILL } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+  /** Where it sits, inside an outer drawing such as a battery. */
+  x?: number | undefined;
+  y?: number | undefined;
+};
+
+/**
+ * Phosphor's filled `Lightning`. It strikes down from its top when it
+ * appears, such as when charging starts.
+ */
+export const AnimatedLightningIcon = ({ label, size, x, y }: Props) => (
+  <IconFrame label={label} size={size} x={x} y={y}>
+    <IconPart d={LIGHTNING_FILL.bolt} name="bolt" stateStyles={strikeStyles} />
+  </IconFrame>
+);
+
+const strikeStyles = css({
+  animation: "iconBoltStrike {durations.slowest} {easings.linear}",
+});

package/src/AnimatedMicrophoneIcon/AnimatedMicrophoneIcon.tsx

@@ -0,0 +1,53 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { MICROPHONE_FILL, MICROPHONE_REGULAR } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+const PARTS = { fill: MICROPHONE_FILL, regular: MICROPHONE_REGULAR };
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  muted: boolean;
+  size: number;
+  weight: keyof typeof PARTS;
+};
+
+/**
+ * Phosphor's `Microphone` and `MicrophoneSlash` in one. Muting draws the
+ * slash; unmuting, or pointing at the control the icon is in, bobs the
+ * capsule.
+ */
+export const AnimatedMicrophoneIcon = ({
+  label,
+  muted,
+  size,
+  weight,
+}: Props) => {
+  const unmuted = useCue(muted ? undefined : "live");
+  return (
+    <IconFrame label={label} size={size} slash={{ shown: muted, weight }}>
+      <IconPart
+        cue={unmuted}
+        cueStyles={capsuleBobStyles}
+        d={PARTS[weight].capsule}
+        hoverStyles={muted ? undefined : capsuleHoverStyles}
+        name="capsule"
+      />
+      <IconPart d={PARTS[weight].stand} name="stand" />
+    </IconFrame>
+  );
+};
+
+const capsuleBobStyles = css({
+  "&[data-cued]": {
+    animation: "iconCapsuleBob {durations.slowest} {easings.in-out}",
+  },
+});
+
+const capsuleHoverStyles = css({
+  _controlHover: {
+    animation: "iconCapsuleBob {durations.slowest} {easings.in-out}",
+  },
+});

package/src/AnimatedSpeakerIcon/AnimatedSpeakerIcon.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import { css } from "../../styled-system/css";
+import type { Weight } from "../_icon/IconFrame";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import {
+  SPEAKER_BOLD,
+  SPEAKER_FILL,
+  SPEAKER_REGULAR,
+} from "../_icon/phosphor-parts";
+
+const PARTS = {
+  bold: SPEAKER_BOLD,
+  fill: SPEAKER_FILL,
+  regular: SPEAKER_REGULAR,
+} satisfies Record<Weight, unknown>;
+
+/** The volume at and above which the second wave shows, as in `SpeakerHigh`. */
+const LOUD = 0.5;
+
+/** Where the waves leave the cone. */
+const MOUTH = [168, 128] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  muted: boolean;
+  size: number;
+  /** 0 through 1. */
+  volume: number;
+  weight: Weight;
+};
+
+/**
+ * Phosphor's `SpeakerHigh`, `SpeakerLow`, `SpeakerNone` and `SpeakerSlash` in
+ * one. A wave shows for each step of volume; the waves push out when it goes
+ * up and pull in when it goes down, and push out while the control the icon
+ * is in is pointed at. Muting tucks them away and draws the slash.
+ */
+export const AnimatedSpeakerIcon = ({
+  label,
+  muted,
+  size,
+  volume,
+  weight,
+}: Props) => {
+  const pulse = usePulse(volume);
+  const parts = PARTS[weight];
+  return (
+    <IconFrame label={label} size={size} slash={{ shown: muted, weight }}>
+      <IconPart d={parts.cone} name="cone" />
+      {parts.waves.map((d, index) => (
+        <IconPart
+          cue={pulse.count}
+          cueStyles={pulse.louder ? wavePushStyles : wavePullStyles}
+          d={d}
+          hoverStyles={muted ? undefined : waveHoverStyles}
+          key={d}
+          name="wave"
+          order={index}
+          origin={MOUTH}
+          state={waveState(index, volume, muted)}
+          stateStyles={waveStyles}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+const waveStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateX(-14px) scaleY(0.7)",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out}, transform {durations.slow} {easings.outBack}",
+  },
+});
+
+const wavePushStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconWavePush {durations.slower} {easings.in-out} calc(var(--part-order) * {durations.faster}) both",
+  },
+});
+
+const wavePullStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconWavePull {durations.slower} {easings.in-out} calc(var(--part-order) * {durations.faster}) both",
+  },
+});
+
+const waveHoverStyles = css({
+  _controlHover: {
+    animation:
+      "iconWavePush {durations.slower} {easings.in-out} calc(var(--part-order) * {durations.faster}) both",
+  },
+});
+
+/** How many times `volume` has changed since mount, and whether it last went up. */
+const usePulse = (volume: number) => {
+  const [last, setLast] = useState(volume);
+  const [pulse, setPulse] = useState({ count: 0, louder: true });
+  if (volume !== last) {
+    setLast(volume);
+    setPulse({ count: pulse.count + 1, louder: volume > last });
+  }
+  return pulse;
+};
+
+/** The first wave shows above silence, the second from `LOUD`; neither while muted. */
+const waveState = (index: number, volume: number, muted: boolean) => {
+  const heard = index === 0 ? volume > 0 : volume >= LOUD;
+  return !muted && heard ? "shown" : "hidden";
+};