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

package/dist/components/ui/radio-group.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { CONTROL_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
@@ -55,6 +55,8 @@ const RadioGroupBlock = forwardRef(
     const rows = loading && options.length === 0 ? Array.from({ length: skeletonCount }, () => null) : options;
     const isGrouped = variant === "grouped";
     const isHorizontal = orientation === "horizontal";
+    const [firstOptions, setFirstOptions] = useState(null);
+    if (!loading && firstOptions === null) setFirstOptions(new Set(options.map((option) => option.value)));
     return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full flex-col", className), children: [
       /* @__PURE__ */ jsx(
         RadioGroupPrimitive.Root,
@@ -125,7 +127,7 @@ const RadioGroupBlock = forwardRef(
                   ]
                 }
               ),
-              option?.trailing && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center", children: option.trailing })
+              option?.trailing && /* @__PURE__ */ jsx("div", { "data-radio-trailing": true, className: "ml-auto flex shrink-0 items-center self-stretch", children: option.trailing })
             ] });
             return /* @__PURE__ */ jsxs(
               Label,
@@ -144,6 +146,9 @@ const RadioGroupBlock = forwardRef(
                   // CheckboxBlock — the border stays put so an unselected row
                   // never flashes "selected" under the cursor.
                   interactive && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
+                  // A control in `trailing` (a button, a menu) is its own target: on it, the row is not hovered or
+                  // pressed, so the row never looks like what the click will do.
+                  interactive && "[&:has([data-radio-trailing]_:active)]:bg-ods-card [&:has([data-radio-trailing]_:hover)]:bg-ods-card",
                   isGrouped ? cn(
                     "bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]",
                     !isLast && (isHorizontal ? "border-r" : "border-b"),
@@ -160,6 +165,7 @@ const RadioGroupBlock = forwardRef(
                   // `Tag`'s label is a span too, and it went invisible against
                   // its own fill.
                   isDisabled && "bg-ods-bg",
+                  option && firstOptions !== null && !firstOptions.has(option.value) && "duration-300 animate-in fade-in slide-in-from-top-2 motion-reduce:animate-none",
                   // With a footer the option stacks: its row, then the footer.
                   hasFooter && "flex-col items-stretch gap-[var(--spacing-system-sf)]",
                   itemClassName

package/dist/components/ui/tab-selector.d.ts

@@ -22,6 +22,12 @@ export interface TabSelectorProps {
     items: TabSelectorItem[];
     /** Visual variant: primary (accent bg) or secondary (soft grey bg) */
     variant?: 'primary' | 'secondary';
+    /**
+     * `compact`: an icon-only strip at its content's width: 44px tall, 36px segments and 20px icons from `content-md`,
+     * 40 / 32 / 16px below it (the guardrails level picker, Figma 4365-22670 / 4365-22462). Default: the full-width
+     * strip, 48px at `content-md`.
+     */
+    size?: 'default' | 'compact';
     /** Optional label displayed above the selector */
     label?: string;
     /** Disable the entire selector (overrides per-item enabled state) */
@@ -37,5 +43,5 @@ export interface TabSelectorProps {
     /** Additional CSS classes for the root container */
     className?: string;
 }
-export declare function TabSelector({ value, onValueChange, items, variant, label, disabled, scrollable, className, }: TabSelectorProps): React.JSX.Element;
+export declare function TabSelector({ value, onValueChange, items, variant, size, label, disabled, scrollable, className, }: TabSelectorProps): React.JSX.Element;
 //# sourceMappingURL=tab-selector.d.ts.map

package/dist/components/ui/tab-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-selector.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tab-selector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,qBA2DlB"}
+{"version":3,"file":"tab-selector.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tab-selector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,OAAmB,EACnB,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,qBA2ElB"}

package/dist/components/ui/tab-selector.js

@@ -9,12 +9,14 @@ function TabSelector({
   onValueChange,
   items,
   variant = "primary",
+  size = "default",
   label,
   disabled,
   scrollable = false,
   className
 }) {
   const flush = useIsInActionsMenuHeader();
+  const compact = size === "compact";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -30,7 +32,11 @@ function TabSelector({
           {
             className: cn(
               "flex gap-[var(--spacing-system-xxs)] bg-ods-bg p-[var(--spacing-system-xxs)]",
-              flush ? "h-10 w-full" : cn("h-11 rounded-md border border-ods-border content-md:h-12", scrollable ? "overflow-x-auto" : "w-full")
+              flush ? "h-10 w-full" : cn(
+                "rounded-md border border-ods-border",
+                compact ? "h-10 content-md:h-11" : "h-11 content-md:h-12",
+                scrollable ? "overflow-x-auto" : compact ? "w-auto" : "w-full"
+              )
             ),
             children: items.map((item) => {
               const isActive = value === item.id;
@@ -46,9 +52,22 @@ function TabSelector({
                   "aria-pressed": isActive,
                   "data-state": isActive ? "active" : void 0,
                   "data-tone": variant === "primary" ? "accent" : void 0,
-                  className: cn("h-full", scrollable ? "flex-none shrink-0 basis-auto" : "flex-1"),
+                  className: cn(
+                    "h-full",
+                    compact ? "w-8 flex-none content-md:w-9" : scrollable ? "flex-none shrink-0 basis-auto" : "flex-1"
+                  ),
                   children: [
-                    item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center content-md:size-6", children: item.icon }),
+                    item.icon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex shrink-0 items-center justify-center",
+                          // compact: the box sizes the icon, whatever size the caller drew it at.
+                          compact ? "size-4 content-md:size-5 [&>svg]:size-full" : "size-4 content-md:size-6"
+                        ),
+                        children: item.icon
+                      }
+                    ),
                     item.label,
                     item.badge && item.badge
                   ]

package/dist/{devices-NGCTSXIU.cjs → devices-7PT6MPJI.cjs}

@@ -5,15 +5,15 @@
 var _chunkQKZQ5Q6Ecjs = require('./chunk-QKZQ5Q6E.cjs');
 
 
-var _chunkQJER2ZNAcjs = require('./chunk-QJER2ZNA.cjs');
+var _chunkFGSN5UNYcjs = require('./chunk-FGSN5UNY.cjs');
 
 
 var _chunkLHV2R6QUcjs = require('./chunk-LHV2R6QU.cjs');
 require('./chunk-FDZOE5TL.cjs');
-require('./chunk-XKOL5CNU.cjs');
-require('./chunk-CAGNWDVJ.cjs');
-require('./chunk-SA2NNWIJ.cjs');
-require('./chunk-IHY7E4EX.cjs');
+require('./chunk-ZEPEFKHA.cjs');
+require('./chunk-U4RTWH5D.cjs');
+require('./chunk-QCSA7GIX.cjs');
+require('./chunk-UFGPLXH6.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-FNQWL4W4.cjs');
@@ -21,12 +21,12 @@ require('./chunk-IUDBG3HJ.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-ZZDFMUEU.cjs');
-require('./chunk-TX4NTH22.cjs');
+require('./chunk-B6D4WWKD.cjs');
 require('./chunk-OT6P57ZS.cjs');
-require('./chunk-FXLROQUT.cjs');
-require('./chunk-3W4ASAXN.cjs');
-require('./chunk-4YBS4HIO.cjs');
-require('./chunk-YJZ7R3W5.cjs');
+require('./chunk-CDW6JTAQ.cjs');
+require('./chunk-WYROOMUZ.cjs');
+require('./chunk-LM7EL3UQ.cjs');
+require('./chunk-KXFIYO4O.cjs');
 require('./chunk-PGAMWM6C.cjs');
 require('./chunk-46547WQW.cjs');
 require('./chunk-LNUFH4E2.cjs');
@@ -1852,9 +1852,8 @@ require('./chunk-NTPX5GXI.cjs');
 require('./chunk-GI3MMBP3.cjs');
 require('./chunk-GG466XFQ.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
-require('./chunk-ZGEWT3SF.cjs');
-require('./chunk-N3MBQRCQ.cjs');
-require('./chunk-S3QXLD4X.cjs');
+require('./chunk-HXURNKXI.cjs');
+require('./chunk-VCFQHPOO.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
 require('./chunk-2XCORRJV.cjs');
@@ -1871,7 +1870,7 @@ function DevicesScreen({ compact = false }) {
   const cast = _chunkLHV2R6QUcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => _chunkQKZQ5Q6Ecjs.buildWindowsDevicesFixture.call(void 0, cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkQJER2ZNAcjs.DevicesScreenView,
+    _chunkFGSN5UNYcjs.DevicesScreenView,
     {
       compact,
       devices: fixture.devices,