@flamingo-stack/openframe-frontend-core 0.0.850 → 0.0.852

package/dist/components/features/approval-level.d.ts

@@ -1,10 +1,6 @@
 import type { ComponentType } from 'react';
 import type { ApprovalLevel } from '../../types/permissions';
-/**
- * The approval levels, in the order a choice reads: the two that need nobody
- * (allow, never) side by side, then the two that ask someone (a technician,
- * the user) side by side.
- */
+/** The approval levels, from the freest to the strictest, as the guardrails settings order them (Figma 4365-22670). */
 export declare const APPROVAL_LEVELS: readonly ApprovalLevel[];
 export interface ApprovalLevelMeta {
     /** The level's name, as every surface writes it. */
@@ -51,13 +47,11 @@ export interface ApprovalLevelViewProps {
 }
 /**
  * THE way a level is shown, read-only or editable, by one prop: the level's
- * name in its colour, then its icon (read-only) or the four levels' icons as a
- * single-choice group (editable; arrow keys move, like every toggle group).
- * Name, icon, colour and tooltip are `APPROVAL_LEVEL_META`'s in both, so a
- * rule reads the same on a page that shows it and on one that lets it change.
- *
- * Editable, each icon has its level's name as its accessible name and a
- * tooltip with what the level means (hover or keyboard focus; a tap selects).
+ * icon in its colour, then its name (read-only, Figma 1608-49531), or its name
+ * in its colour, then the four levels' icons in a compact `TabSelector` strip,
+ * the one in force filled (editable, Figma 4365-22670). Name, icon and colour
+ * are `APPROVAL_LEVEL_META`'s in both. Editable, each icon has its level's name
+ * as its accessible name.
  */
 export declare function ApprovalLevelView({ value, editable, onChange, disabled, showLabel, 'aria-labelledby': labelledBy, loading, className, }: ApprovalLevelViewProps): import("react").JSX.Element;
 //# sourceMappingURL=approval-level.d.ts.map

package/dist/components/features/approval-level.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"approval-level.d.ts","sourceRoot":"","sources":["../../../src/components/features/approval-level.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAc7D;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAAoD,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,+EAA+E;IAC/E,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAoBxE,CAAC;AAeF,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,KAAK,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gGAAgG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAgB,EAChB,iBAAiB,EAAE,UAAU,EAC7B,OAAe,EACf,SAAS,GACV,EAAE,sBAAsB,+BAuExB"}
+{"version":3,"file":"approval-level.d.ts","sourceRoot":"","sources":["../../../src/components/features/approval-level.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAY7D,uHAAuH;AACvH,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAAoD,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,+EAA+E;IAC/E,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAoBxE,CAAC;AAgCF,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,KAAK,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gGAAgG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAgB,EAChB,iBAAiB,EAAE,UAAU,EAC7B,OAAe,EACf,SAAS,GACV,EAAE,sBAAsB,+BAoDxB"}

package/dist/components/features/approval-level.js

@@ -1,18 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-import { HeadsetIcon } from "../icons-v2-generated/audio-and-visual/headset-icon.js";
 import { BannedIcon } from "../icons-v2-generated/security/banned-icon.js";
+import { ShieldCheckIcon } from "../icons-v2-generated/security/shield-check-icon.js";
 import { CheckCircleIcon } from "../icons-v2-generated/signs-and-symbols/check-circle-icon.js";
-import { UserIcon } from "../icons-v2-generated/users/user-icon.js";
+import { UserCheckIcon } from "../icons-v2-generated/users/user-check-icon.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
-import { TOGGLE_GROUP_CLASS, ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
 import { TextHold } from "../ui/layout-hold.js";
 import { useLoadingScope } from "../ui/loading-scope.js";
-import { TOGGLE_SIZE_CLASS } from "../ui/toggle.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { TabSelector } from "../ui/tab-selector.js";
 import { TouchFriendlyTooltip } from "../ui/touch-friendly-tooltip.js";
-const APPROVAL_LEVELS = ["ALLOW", "DENY", "ASK_TECHNICIAN", "ASK_USER"];
+const APPROVAL_LEVELS = ["ALLOW", "ASK_USER", "ASK_TECHNICIAN", "DENY"];
 const APPROVAL_LEVEL_META = {
   ALLOW: {
     label: "Allow",
@@ -23,25 +21,35 @@ const APPROVAL_LEVEL_META = {
   ASK_USER: {
     label: "Ask User",
     hint: "Asks the person at the computer first.",
-    Icon: UserIcon,
+    Icon: UserCheckIcon,
     toneClassName: "text-ods-warning"
   },
   ASK_TECHNICIAN: {
     label: "Ask Technician",
     hint: "Asks a technician first. Nothing runs until they approve.",
-    Icon: HeadsetIcon,
+    Icon: ShieldCheckIcon,
     toneClassName: "text-ods-warning"
   },
   DENY: { label: "Restrict", hint: "Never runs.", Icon: BannedIcon, toneClassName: "text-ods-error" }
 };
-const ICON_PX = 16;
+const ICON_PX = 24;
 const READ_ONLY_ROW_CLASS = "inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]";
-const EDITABLE_ROW_CLASS = "flex shrink-0 items-center gap-[var(--spacing-system-sf)]";
+const EDITABLE_ROW_CLASS = "flex shrink-0 items-center gap-[var(--spacing-system-xxs)] content-md:gap-[var(--spacing-system-m)]";
+const EDITABLE_NAME_ORDER_CLASS = "order-last content-md:order-none";
+const READ_ONLY_ICON_BOX_CLASS = "[&>*]:!size-4 content-md:[&>*]:!size-6";
+const READ_ONLY_NAME_CLASS = "whitespace-nowrap text-ods-text-primary text-h4";
 const LEVEL_NAME_CLASS = "whitespace-nowrap text-h6";
-const LEVEL_BUTTON_CLASS = "px-2";
+const EDITABLE_ICON_PX = 20;
 const LONGEST_LEVEL_LABEL = APPROVAL_LEVELS.map((level) => APPROVAL_LEVEL_META[level].label).reduce(
   (a, b) => b.length > a.length ? b : a
 );
+function levelItems(inForce) {
+  return APPROVAL_LEVELS.map((level) => {
+    const { label, Icon } = APPROVAL_LEVEL_META[level];
+    const tone = level === inForce ? "text-ods-text-primary" : "text-ods-text-secondary";
+    return { id: level, ariaLabel: label, icon: /* @__PURE__ */ jsx(Icon, { size: EDITABLE_ICON_PX, className: tone, "aria-hidden": true }) };
+  });
+}
 function ApprovalLevelView({
   value,
   editable,
@@ -57,76 +65,58 @@ function ApprovalLevelView({
     return /* @__PURE__ */ jsx(ApprovalLevelSkeleton, { editable: canEdit, showLabel, className });
   }
   const current = APPROVAL_LEVEL_META[value];
-  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: cn(LEVEL_NAME_CLASS, current.toneClassName), children: current.label }) : null;
   if (!canEdit) {
-    const icon = /* @__PURE__ */ jsxs("span", { className: cn("inline-flex shrink-0", current.toneClassName), children: [
+    const icon = /* @__PURE__ */ jsxs("span", { className: cn("inline-flex shrink-0", READ_ONLY_ICON_BOX_CLASS, current.toneClassName), children: [
       /* @__PURE__ */ jsx(current.Icon, { size: ICON_PX, "aria-hidden": true }),
       !showLabel && /* @__PURE__ */ jsx("span", { className: "sr-only", children: current.label })
     ] });
     return /* @__PURE__ */ jsxs("span", { className: cn(READ_ONLY_ROW_CLASS, className), children: [
-      name,
-      showLabel ? icon : /* @__PURE__ */ jsx(TouchFriendlyTooltip, { content: `${current.label}: ${current.hint}`, side: "top", children: icon })
+      showLabel ? icon : /* @__PURE__ */ jsx(TouchFriendlyTooltip, { content: `${current.label}: ${current.hint}`, side: "top", children: icon }),
+      showLabel && /* @__PURE__ */ jsx("span", { className: READ_ONLY_NAME_CLASS, children: current.label })
     ] });
   }
+  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: cn(LEVEL_NAME_CLASS, EDITABLE_NAME_ORDER_CLASS, current.toneClassName), children: current.label }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cn(EDITABLE_ROW_CLASS, className), children: [
     name,
-    /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsx(
-      ToggleGroup,
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": labelledBy, children: /* @__PURE__ */ jsx(
+      TabSelector,
       {
-        type: "single",
-        variant: "outline",
-        size: "sm",
+        variant: "secondary",
+        size: "compact",
         value,
         disabled,
         onValueChange: (next) => {
-          if (next && next !== value) onChange?.(next);
+          if (next !== value) onChange?.(next);
         },
-        "aria-labelledby": labelledBy,
-        children: APPROVAL_LEVELS.map((level) => {
-          const { label, hint, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
-          return (
-            // A plain tooltip (hover and keyboard focus): a tap must SELECT the level, and on
-            // touch the name beside the group says what is in force.
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: level,
-                  "aria-label": label,
-                  className: cn(LEVEL_BUTTON_CLASS, level === value && toneClassName),
-                  children: /* @__PURE__ */ jsx(Icon, { size: ICON_PX, "aria-hidden": true })
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "max-w-xs", children: [
-                /* @__PURE__ */ jsx("b", { children: label }),
-                ": ",
-                hint
-              ] })
-            ] }, level)
-          );
-        })
+        items: levelItems(value),
+        className: "w-auto"
       }
     ) })
   ] });
 }
 function ApprovalLevelSkeleton({ editable = false, showLabel = true, className }) {
-  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: LEVEL_NAME_CLASS, children: /* @__PURE__ */ jsx(TextHold, { children: LONGEST_LEVEL_LABEL }) }) : null;
   if (!editable) {
     return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn(READ_ONLY_ROW_CLASS, className), children: [
-      name,
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "inline-block shrink-0 rounded-sm", width: ICON_PX, height: ICON_PX })
+      /* @__PURE__ */ jsx("span", { className: cn("inline-flex shrink-0", READ_ONLY_ICON_BOX_CLASS), children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "inline-block shrink-0 rounded-sm", width: ICON_PX, height: ICON_PX }) }),
+      showLabel && /* @__PURE__ */ jsx("span", { className: READ_ONLY_NAME_CLASS, children: /* @__PURE__ */ jsx(TextHold, { children: LONGEST_LEVEL_LABEL }) })
     ] });
   }
+  const name = showLabel ? /* @__PURE__ */ jsx("span", { className: cn(LEVEL_NAME_CLASS, EDITABLE_NAME_ORDER_CLASS), children: /* @__PURE__ */ jsx(TextHold, { children: LONGEST_LEVEL_LABEL }) }) : null;
   return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, inert: true, className: cn(EDITABLE_ROW_CLASS, className), children: [
     name,
-    /* @__PURE__ */ jsx("div", { className: TOGGLE_GROUP_CLASS, children: APPROVAL_LEVELS.map((level) => /* @__PURE__ */ jsx(
-      UnifiedSkeleton,
+    /* @__PURE__ */ jsx(
+      TabSelector,
       {
-        className: cn(TOGGLE_SIZE_CLASS.sm, LEVEL_BUTTON_CLASS, "box-content shrink-0 rounded-md"),
-        width: ICON_PX
-      },
-      level
-    )) })
+        variant: "secondary",
+        size: "compact",
+        value: "",
+        disabled: true,
+        onValueChange: () => {
+        },
+        items: levelItems(void 0),
+        className: "w-auto"
+      }
+    )
   ] });
 }
 export {