@domicile-desktop/component-library 0.0.0-alpha-866cf8e38ce5 → 0.0.0-alpha-be59aae76f2f

package/README.md

@@ -39,6 +39,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `Popover` | Non-modal panel anchored to the control that opened it. |
 | `PopupBoundary` | Keeps every popup inside it (tooltips, popovers, menus, lists) within a box, such as a window's frame. Outside one, popups stay on their `Screen`. `Popover` and `Tooltip` take `spansWindows` to leave it. |
 | `Provider` | base-ui `DirectionProvider` wrapper. Every app roots its tree in it. |
+| `QuickTile` | Quick settings tile: a labeled toggle in the accent color while on, with an arrow to its details. Drawn in `currentcolor`. |
 | `Screen` | Renders its children once per selected display. |
 | `DisplayProvider` | Supplies the host's displays to `Screen`. |
 | `display-source` | `Display` and `DisplaySource` types for `DisplayProvider`. |

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-866cf8e38ce5",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-866cf8e38ce5",
+    "@domicile-desktop/sdk": "0.0.0-alpha-be59aae76f2f",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-be59aae76f2f",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -64,6 +64,7 @@
     "./PortalDialogs": "./src/PortalDialogs/PortalDialogs.tsx",
     "./Provider": "./src/Provider/Provider.tsx",
     "./pandacss-preset": "./src/pandacss-preset.ts",
+    "./QuickTile": "./src/QuickTile/QuickTile.tsx",
     "./Screen": "./src/Screen/Screen.tsx",
     "./Select": "./src/Select/Select.tsx",
     "./SlideOver": "./src/SlideOver/SlideOver.tsx",
@@ -120,5 +121,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-866cf8e38ce5"
+  "version": "0.0.0-alpha-be59aae76f2f"
 }

package/src/QuickTile/QuickTile.tsx

@@ -0,0 +1,183 @@
+import { Toggle } from "@base-ui/react/toggle";
+import { CaretRightIcon } from "@phosphor-icons/react/dist/ssr/CaretRight";
+import type { ReactNode } from "react";
+
+import { css, cva } from "../../styled-system/css";
+
+/** What every tile shows: `icon`, then `label` over `detail`. */
+type Content = {
+  /** A short status under the label, such as the network's name. */
+  detail?: string | undefined;
+  icon: ReactNode;
+  /** Names the tile, and its toggle. */
+  label: string;
+};
+
+/** A tile that switches something on and off, with details behind an arrow. */
+type ToggleProps = Content & {
+  /** Ignores presses, such as on a locked desktop. */
+  disabled?: boolean | undefined;
+  /** Opens the details; without it there is no arrow. */
+  onMore?: (() => void) | undefined;
+  onPressedChange: (pressed: boolean) => void;
+  pressed: boolean;
+};
+
+/** A tile with nothing to switch, which opens its details. */
+type MoreProps = Content & {
+  onMore: () => void;
+  onPressedChange?: undefined;
+  pressed?: undefined;
+};
+
+type Props = ToggleProps | MoreProps;
+
+/**
+ * A quick settings tile: a labeled toggle in the accent color while on, and
+ * an arrow to its details when it has some. A tile with nothing to switch is
+ * one button that opens the details.
+ *
+ * Drawn in `currentcolor`, so it reads on a panel over the wallpaper.
+ */
+export const QuickTile = (props: Props) =>
+  props.onPressedChange === undefined ? (
+    <button
+      aria-label={`${props.label} details`}
+      className={tileStyles({ pressed: false })}
+      onClick={props.onMore}
+      type="button"
+    >
+      <Face detail={props.detail} icon={props.icon} label={props.label} />
+      <CaretRightIcon aria-hidden className={caretStyles} size={14} />
+    </button>
+  ) : (
+    <span className={tileStyles({ pressed: props.pressed })}>
+      <Toggle
+        aria-label={props.label}
+        className={toggleStyles}
+        disabled={props.disabled}
+        onPressedChange={(pressed) => {
+          props.onPressedChange(pressed);
+        }}
+        pressed={props.pressed}
+      >
+        <Face detail={props.detail} icon={props.icon} label={props.label} />
+      </Toggle>
+      {props.onMore !== undefined && (
+        <button
+          aria-label={`${props.label} details`}
+          className={moreStyles}
+          onClick={props.onMore}
+          type="button"
+        >
+          <CaretRightIcon aria-hidden size={14} />
+        </button>
+      )}
+    </span>
+  );
+
+const Face = ({ detail, icon, label }: Content) => (
+  <>
+    <span aria-hidden className={iconStyles}>
+      {icon}
+    </span>
+    <span className={textStyles}>
+      <span className={labelStyles}>{label}</span>
+      {detail !== undefined && <span className={detailStyles}>{detail}</span>}
+    </span>
+  </>
+);
+
+const tileStyles = cva({
+  base: {
+    _focusVisible: {
+      outline: "{spacing.0.5} solid {colors.accent}",
+      outlineOffset: 0.5,
+    },
+    alignItems: "center",
+    backgroundColor: "color-mix(in oklab, currentcolor 10%, transparent)",
+    borderRadius: "lg",
+    borderStyle: "none",
+    color: "inherit",
+    cursor: "pointer",
+    display: "flex",
+    gap: 2,
+    minBlockSize: 12,
+    minInlineSize: 0,
+    paddingInline: 2.5,
+    textAlign: "start",
+    transition: "background-color {durations.fast} {easings.default}",
+  },
+  variants: {
+    pressed: {
+      false: {},
+      true: { backgroundColor: "accent", color: "background" },
+    },
+  },
+});
+
+// Fills the tile but its arrow, so most of the tile switches.
+const toggleStyles = css({
+  _disabled: { cursor: "default" },
+  _focusVisible: {
+    outline: "{spacing.0.5} solid {colors.accent}",
+    outlineOffset: 0.5,
+  },
+  alignItems: "center",
+  alignSelf: "stretch",
+  backgroundColor: "transparent",
+  borderStyle: "none",
+  color: "inherit",
+  cursor: "pointer",
+  display: "flex",
+  flex: 1,
+  gap: 2,
+  minInlineSize: 0,
+  padding: 0,
+  textAlign: "start",
+});
+
+const moreStyles = css({
+  _hover: {
+    backgroundColor: "color-mix(in oklab, currentcolor 16%, transparent)",
+  },
+  alignItems: "center",
+  backgroundColor: "transparent",
+  blockSize: 6,
+  borderRadius: "full",
+  borderStyle: "none",
+  color: "inherit",
+  cursor: "pointer",
+  display: "inline-flex",
+  flexShrink: 0,
+  inlineSize: 6,
+  justifyContent: "center",
+  marginInlineEnd: -1,
+  padding: 0,
+});
+
+const caretStyles = css({ flexShrink: 0, marginInlineStart: "auto" });
+
+const iconStyles = css({ display: "inline-flex", flexShrink: 0 });
+
+const textStyles = css({
+  display: "flex",
+  flexDirection: "column",
+  minInlineSize: 0,
+  paddingBlock: 1.5,
+});
+
+const labelStyles = css({
+  fontSize: "sm",
+  fontWeight: "semibold",
+  lineHeight: "tight",
+});
+
+const detailStyles = css({
+  fontSize: "xs",
+  lineHeight: "tight",
+  opacity: "inactive",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});

package/src/SlideOver/SlideOver.tsx

@@ -1,4 +1,5 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { CaretLeftIcon } from "@phosphor-icons/react/dist/ssr/CaretLeft";
 import { XIcon } from "@phosphor-icons/react/dist/ssr/X";
 import type { ReactElement, ReactNode } from "react";
 import { css, cva } from "../../styled-system/css";
@@ -20,6 +21,13 @@ type Props = ExtendProps<
   {
     children: ReactNode;
     footer?: ReactNode | undefined;
+    /**
+     * Keeps the panel in the page, hidden, while closed, so what it holds
+     * keeps running, such as a web page.
+     */
+    keepMounted?: boolean | undefined;
+    /** Shows a back button before the title, for a page within the panel. */
+    onBack?: (() => void) | undefined;
     /**
      * Name of the display to slide in on and dim. Without it, a page spanning
      * several monitors uses the rightmost edge and dims them all. Needs a
@@ -28,22 +36,27 @@ type Props = ExtendProps<
     screen?: string | undefined;
     title?: ReactNode | undefined;
     trigger?: ReactElement | undefined;
+    /** Wider, for a page with a list and its content side by side. */
+    wide?: boolean | undefined;
   }
 >;
 
 const SlideOverComponent = ({
   children,
   footer,
+  keepMounted = false,
+  onBack,
   screen,
   title,
   trigger,
+  wide = false,
   ...rootProps
 }: Props) => {
   const region = useScreenRegion(screen);
   return (
     <BaseDialog.Root {...rootProps}>
       {trigger !== undefined && <BaseDialog.Trigger render={trigger} />}
-      <BaseDialog.Portal>
+      <BaseDialog.Portal keepMounted={keepMounted}>
         {/*
         On the panel's screen only, as in `ModalDialog`. Data attribute for
         tests.
@@ -54,8 +67,16 @@ const SlideOverComponent = ({
           style={region}
         />
         <BaseDialog.Viewport className={viewportStyles} style={region}>
-          <BaseDialog.Popup className={popupStyles}>
+          <BaseDialog.Popup
+            className={popupStyles}
+            data-wide={wide ? "" : undefined}
+          >
             <header className={headerStyles}>
+              {onBack !== undefined && (
+                <Button label="Back" onClick={onBack} variant="ghost">
+                  <CaretLeftIcon />
+                </Button>
+              )}
               {title !== undefined && (
                 <BaseDialog.Title className={titleStyles}>
                   {title}
@@ -126,6 +147,7 @@ const popupStyles = flex({
     transform: "translateX(100%)",
     transition: "transform {durations.fast} {easings.in}",
   },
+  "&[data-wide]": { inlineSize: "min({spacing.240}, 92cqw)" },
   backgroundColor: "card",
   blockSize: "100%",
   borderInlineStartColor: "border",
@@ -147,8 +169,10 @@ const headerStyles = flex({
   paddingInline: 4,
 });
 
+// Fills the header between the back and close buttons.
 const titleStyles = css({
   color: "foreground",
+  flex: 1,
   fontSize: "md",
   fontWeight: "semibold",
   lineHeight: "snug",