@domicile-desktop/component-library 0.0.0-alpha-3e5b976f2009 → 0.0.0-alpha-db2937ff6ccf

package/README.md

@@ -30,6 +30,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `Kbd` | Keyboard key cap. |
 | `list-walk` | Arrow-key movement of a highlight through a list while focus stays in an input. |
 | `ModalDialog` | Modal dialog with `title`, `footer` and `trigger` props. |
+| `Notice` | Pill that briefly shows a change, such as a zoom level or volume, with an optional level meter. Key it per change. |
 | `ContextMenu` | Menu opened at a point, such as a right click's. Parts: `Item`, `CheckboxItem`, `RadioGroup` and `RadioItem`, `Submenu`, `Separator`. Items take an `icon` and a `mnemonic`, whose letter chooses them. |
 | `PortalDialogs` | Every dialog applications ask for through the desktop portal. Mount one per shell with `host={domicile}`; it refuses kinds it cannot draw. `omitScreenCasts` leaves screen casts out of its indicator. See [PORTALS.md](/docs/PORTALS.md). |
 | `source-name` | `sourceName`: how a screen cast's source is named. |

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-3e5b976f2009",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-3e5b976f2009",
+    "@domicile-desktop/sdk": "0.0.0-alpha-db2937ff6ccf",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-db2937ff6ccf",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -55,6 +55,7 @@
     "./list-walk": "./src/list-walk.ts",
     "./ModalDialog": "./src/ModalDialog/ModalDialog.tsx",
     "./media-theme-source": "./src/ThemeSwitch/media-theme-source.ts",
+    "./Notice": "./src/Notice/Notice.tsx",
     "./Popover": "./src/Popover/Popover.tsx",
     "./PortalDialogs": "./src/PortalDialogs/PortalDialogs.tsx",
     "./Provider": "./src/Provider/Provider.tsx",
@@ -114,5 +115,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-3e5b976f2009"
+  "version": "0.0.0-alpha-db2937ff6ccf"
 }

package/src/Notice/Notice.tsx

@@ -0,0 +1,90 @@
+import type { CSSProperties, ReactNode } from "react";
+import { useState } from "react";
+import { css } from "../../styled-system/css";
+import { hstack } from "../../styled-system/patterns";
+
+type Props = {
+  /** What the notice is about, such as the label's new value. */
+  children: ReactNode;
+  /** Drawn before the label. */
+  icon: ReactNode;
+  /** A level from 0 to 1, drawn as a meter after the label. */
+  level?: number | undefined;
+  /** Grays the meter, such as for muted audio. */
+  muted?: boolean | undefined;
+};
+
+/**
+ * A pill that briefly shows a change, such as a new zoom level or volume, then
+ * fades out.
+ *
+ * It hides on `animationend`, not a timer, so the duration lives only in the
+ * stylesheet. Key it per change to show it again. The caller positions it; it
+ * ignores the pointer so it never blocks what is under it.
+ */
+export const Notice = ({ children, icon, level, muted }: Props) => {
+  const [showing, setShowing] = useState(true);
+
+  return showing ? (
+    <output
+      className={noticeStyles}
+      onAnimationEnd={() => {
+        setShowing(false);
+      }}
+    >
+      {icon}
+      {children}
+      {level === undefined ? undefined : (
+        <span
+          aria-valuemax={100}
+          aria-valuemin={0}
+          aria-valuenow={Math.round(level * 100)}
+          className={meterStyles}
+          data-muted={muted === true ? "" : undefined}
+          role="meter"
+          // Inline because the level is a runtime value Panda cannot extract.
+          style={{ "--notice-level": level } as CSSProperties}
+        />
+      )}
+    </output>
+  ) : undefined;
+};
+
+// Appears quickly, holds long enough to read, then fades out.
+const noticeStyles = hstack({
+  animation: "noticeShown {durations.notice} {easings.out} forwards",
+  backgroundColor: "card",
+  border: "1px solid {colors.border}",
+  borderRadius: "full",
+  boxShadow: "lifted",
+  color: "foreground",
+  fontSize: "sm",
+  fontVariantNumeric: "tabular-nums",
+  gap: 2,
+  paddingBlock: 1.5,
+  paddingInline: 3,
+  pointerEvents: "none",
+});
+
+// A track with the level filled from the start edge. The fill is a scaled
+// pseudo-element so the level can change without layout.
+const meterStyles = css({
+  "&::after": {
+    backgroundColor: "accent",
+    borderRadius: "full",
+    content: '""',
+    inset: 0,
+    position: "absolute",
+    transform: "scaleX(var(--notice-level))",
+    transformOrigin: "left",
+  },
+  "&[data-muted]::after": {
+    backgroundColor: "muted",
+  },
+  backgroundColor: "border",
+  blockSize: 1,
+  borderRadius: "full",
+  inlineSize: 24,
+  overflow: "hidden",
+  position: "relative",
+});

package/src/pandacss-preset.ts

@@ -145,6 +145,17 @@ export const domicilePreset = definePreset({
   theme: {
     extend: {
       keyframes: {
+        // `Notice`: appears quickly, holds long enough to read, then fades
+        // out on its own.
+        noticeShown: {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(calc(-1 * {spacing.1}))",
+          },
+          "10%": { opacity: "1", transform: "translateY(0)" },
+          "75%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
         pulse: {
           "0%": { opacity: "0.3" },
           "50%": { opacity: "0.7" },
@@ -384,6 +395,9 @@ export const domicilePreset = definePreset({
         durations: {
           // Wallpaper crossfade. Long because nothing waits on it.
           crossfade: { value: "2s" },
+          // How long a `Notice` stays up. Longer than the scale above, which
+          // is for control feedback, not reading.
+          notice: { value: "1.5s" },
           pulse: { value: "1.5s" },
           // One turn of `spin`. A slower spinner looks stuck.
           spin: { value: "1s" },

package/styled-system/tokens/index.mjs

@@ -1307,6 +1307,10 @@ const tokens = {
     "value": "2s",
     "variable": "var(--gXQUBH)"
   },
+  "durations.notice": {
+    "value": "1.5s",
+    "variable": "var(--infmmp)"
+  },
   "durations.pulse": {
     "value": "1.5s",
     "variable": "var(--YdYTw)"

package/styled-system/tokens/tokens.d.ts

@@ -27,7 +27,7 @@ export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
 export type BorderWidthToken = "fauxBold"
 
-export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "crossfade" | "pulse" | "spin" | "wipe"
+export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "crossfade" | "notice" | "pulse" | "spin" | "wipe"
 
 export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" | "emphasized" | "outBack" | "outQuart"
 

package/styled-system/types/prop-type.d.ts

@@ -169,7 +169,7 @@ export interface UtilityValues {
 	transitionProperty: "common" | "colors" | "size" | "position" | "background";
 	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "ping" | "bounce" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
+	animationName: "ping" | "bounce" | "noticeShown" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];