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

package/src/components/ui/page-actions.tsx

@@ -527,9 +527,26 @@ function CompactPrimaryActions({ actions, loading: loadingProp }: { actions: Pag
   );
 }
 
+const subscribeNothing = () => () => {};
+
+/**
+ * False on the server and through hydration, true after: what lets a render use a value only the client measures and
+ * still hydrate into the server's markup.
+ */
+function useHydrated(): boolean {
+  return React.useSyncExternalStore(
+    subscribeNothing,
+    () => true,
+    () => false,
+  );
+}
+
 function MobileBottomActions({ actions, loading: loadingProp }: { actions: PageActionButton[]; loading?: boolean }) {
   const loading = useLoadingScope() || loadingProp;
-  // Over the composer dock where the layout has one.
+  // Over the composer dock where the layout has one. `AppLayout` measures the dock after it mounts, and a page hydrates
+  // after the layout, so the height is often known by the bar's first client render: drawn then, it would not match the
+  // server's markup (no offset). The bar takes it from the render after hydration instead.
+  const hydrated = useHydrated();
   const dockHeight = useComposerDockHeight();
   // Its height, for the chrome that stays clear of it (`useMobileActionBarHeight`).
   const barRef = React.useRef<HTMLDivElement>(null);
@@ -543,7 +560,7 @@ function MobileBottomActions({ actions, loading: loadingProp }: { actions: PageA
     <div
       ref={barRef}
       data-testid="mobile-action-bar"
-      style={dockHeight > 0 ? { bottom: dockHeight } : undefined}
+      style={hydrated && dockHeight > 0 ? { bottom: dockHeight } : undefined}
       className={cn(
         'fixed bottom-0 left-0 right-0 z-50 md:hidden',
         'border-t border-ods-border bg-ods-card',

package/src/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, forwardRef } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, forwardRef, useState } from 'react';
 
 import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
@@ -126,6 +126,10 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
       loading && options.length === 0 ? Array.from({ length: skeletonCount }, () => null) : options;
     const isGrouped = variant === 'grouped';
     const isHorizontal = orientation === 'horizontal';
+    // The options the block first showed loaded. One added after that (a row the user's action brought in) fades in, as
+    // new rows do across the system; the first options, and the skeleton's swap to them, do not.
+    const [firstOptions, setFirstOptions] = useState<ReadonlySet<string> | null>(null);
+    if (!loading && firstOptions === null) setFirstOptions(new Set(options.map(option => option.value)));
     return (
       <div className={cn('relative flex w-full flex-col', className)}>
         <RadioGroupPrimitive.Root
@@ -215,7 +219,13 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                     )
                   )}
                 </div>
-                {option?.trailing && <div className="ml-auto flex shrink-0 items-center">{option.trailing}</div>}
+                {/* The row's full height, its content centred whatever the row aligns (a design may top-align the dot with
+                    the label); a trailing node can still place itself (`self-start`). */}
+                {option?.trailing && (
+                  <div data-radio-trailing className="ml-auto flex shrink-0 items-center self-stretch">
+                    {option.trailing}
+                  </div>
+                )}
               </>
             );
             return (
@@ -236,6 +246,10 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   // 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)]',
@@ -254,6 +268,10 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   // `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/src/components/ui/tab-selector.tsx

@@ -30,6 +30,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) */
@@ -51,6 +57,7 @@ export function TabSelector({
   onValueChange,
   items,
   variant = 'primary',
+  size = 'default',
   label,
   disabled,
   scrollable = false,
@@ -63,6 +70,7 @@ export function TabSelector({
   // renders in its title bar adapts by context, with no re-styling at the
   // call site.
   const flush = useIsInActionsMenuHeader();
+  const compact = size === 'compact';
   return (
     <div
       className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', disabled && 'opacity-50', className)}
@@ -79,7 +87,11 @@ export function TabSelector({
           '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'),
+            : 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',
+              ),
         )}
       >
         {items.map(item => {
@@ -101,10 +113,21 @@ export function TabSelector({
               data-tone={variant === 'primary' ? 'accent' : undefined}
               // scrollable: intrinsic widths must sum past the container or nothing ever overflows (flex-1's basis-0
               // defeats the scroll).
-              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',
+              )}
             >
               {item.icon && (
-                <span className="flex size-4 shrink-0 items-center justify-center content-md:size-6">{item.icon}</span>
+                <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',
+                  )}
+                >
+                  {item.icon}
+                </span>
               )}
               {item.label}
               {item.badge && item.badge}

package/dist/chunk-N3MBQRCQ.cjs

@@ -1,41 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
-
-
-var _chunk63A4GZMBcjs = require('./chunk-63A4GZMB.cjs');
-
-// src/components/ui/label.tsx
-var _reactlabel = require('@radix-ui/react-label'); var LabelPrimitive = _interopRequireWildcard(_reactlabel);
-var _classvarianceauthority = require('class-variance-authority');
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var LABEL_TEXT_CLASS = "block text-ods-text-primary text-h6";
-var labelVariants = _classvarianceauthority.cva.call(void 0, "", {
-  variants: {
-    variant: {
-      default: LABEL_TEXT_CLASS,
-      /** @deprecated alias of `default` — the three small scales converged on text-h6. */
-      small: LABEL_TEXT_CLASS,
-      /** @deprecated alias of `default`. */
-      medium: LABEL_TEXT_CLASS,
-      large: _chunk63A4GZMBcjs.cn.call(void 0, LABEL_TEXT_CLASS, "text-h4"),
-      /** A click surface that labels its control: no typography, the site's `className` is its look. */
-      surface: ""
-    },
-    spacing: {
-      none: "",
-      tight: "mb-0.5",
-      normal: "mb-2",
-      loose: "mb-3"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    spacing: "none"
-  }
-});
-var Label = _react.forwardRef.call(void 0, ({ className, variant, spacing, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LabelPrimitive.Root, { ref, className: _chunk63A4GZMBcjs.cn.call(void 0, labelVariants({ variant, spacing }), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-
-
-exports.Label = Label;