@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/icon/ui-icons/LinkOut.tsx

@@ -1,20 +1,47 @@
 /*
- * Auto-generated from the shipped @react-spectrum/s2 dist assets (SVGO-
- * optimized — pixel parity requires the shipped path data, not the raw
- * vendored .svg sources). Variants absent from the dist (Arrow, Gripper)
- * fall back to the vendored sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: react-spectrum/packages/@react-spectrum/s2/ui-icons/LinkOut.tsx
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize100.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize100.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize200.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize200.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize300.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize300.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize400.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_LinkOutSize400.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createUIIcon } from "../spectrum-icon";
+import { style } from "../../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+
+const styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+    },
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+    },
+  },
+});
 
 export type LinkOutProps = JSX.SvgSVGAttributes<SVGSVGElement> & {
   size?: "M" | "L" | "XL" | "XXL";
 };
 
 function LinkOut_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +49,7 @@ function LinkOut_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="10"
       viewBox="0 0 10 10"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -33,7 +60,7 @@ function LinkOut_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function LinkOut_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +68,7 @@ function LinkOut_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="12"
       viewBox="0 0 12 12"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -52,7 +79,7 @@ function LinkOut_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function LinkOut_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -60,7 +87,7 @@ function LinkOut_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
       height="14"
       viewBox="0 0 14 14"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -71,7 +98,7 @@ function LinkOut_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
 }
 
 function LinkOut_XXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +106,7 @@ function LinkOut_XXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
       height="16"
       viewBox="0 0 16 16"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -95,18 +122,20 @@ const LinkOut_XL = createUIIcon(LinkOut_XLSvg);
 const LinkOut_XXL = createUIIcon(LinkOut_XXLSvg);
 
 export default function LinkOut(props: LinkOutProps): JSX.Element {
-  const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["size", "class", "width", "height"]);
+  const size = local.size ?? "M";
+  const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
   switch (size) {
     case "M":
-      return <LinkOut_M {...rest} class={className} />;
+      return <LinkOut_M {...rest} class={mergedClass()} />;
     case "L":
-      return <LinkOut_L {...rest} class={className} />;
+      return <LinkOut_L {...rest} class={mergedClass()} />;
     case "XL":
-      return <LinkOut_XL {...rest} class={className} />;
+      return <LinkOut_XL {...rest} class={mergedClass()} />;
     case "XXL":
-      return <LinkOut_XXL {...rest} class={className} />;
+      return <LinkOut_XXL {...rest} class={mergedClass()} />;
     default:
-      return <LinkOut_M {...rest} class={className} />;
+      return <LinkOut_M {...rest} class={mergedClass()} />;
   }
 }
 

package/src/icon/ui-icons/index.ts

@@ -1,8 +1,7 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
-
 export { default as Add, AddIcon } from "./Add";
 export type { AddProps } from "./Add";
 export { default as Arrow, ArrowIcon } from "./Arrow";

package/src/illustratedmessage/index.tsx

@@ -1,5 +1,21 @@
-import { type JSX, Show, createContext, mergeProps, splitProps, useContext } from "solid-js";
-import { filterDOMProps } from "@proyecto-viviana/solidaria";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+
+// Port of packages/@react-spectrum/s2/src/IllustratedMessage.tsx.
+import { Show, createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps, filterDOMProps } from "@proyecto-viviana/solidaria";
 import { ButtonGroupContext } from "../button";
 import {
   getSlottedContextProps,
@@ -18,6 +34,7 @@ import {
 import type { StyleString } from "../style";
 import { style } from "../style" with { type: "macro" };
 import { ContentContext, HeadingContext } from "../text";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type IllustratedMessageSize = "S" | "M" | "L";
 export type IllustratedMessageOrientation = "horizontal" | "vertical";
@@ -178,7 +195,10 @@ const buttonGroup = style({
  */
 export function IllustratedMessage(props: IllustratedMessageProps): JSX.Element {
   const contextProps = getSlottedContextProps(useContext(IllustratedMessageContext), props.slot);
-  const merged = mergeProps(contextProps ?? {}, props);
+  const merged = mergeProps<IllustratedMessageProps & IllustratedMessageContextProps>(
+    contextProps ?? {},
+    props,
+  );
   const [local, domProps] = splitProps(merged, [
     "children",
     "orientation",
@@ -229,11 +249,11 @@ export function IllustratedMessage(props: IllustratedMessageProps): JSX.Element
       class={className()}
       style={mergedUnsafeStyle()}
     >
-      <HeadingContext.Provider
+      <HeadingContext
         value={{ styles: () => heading({ orientation: orientation(), size: size() }) }}
       >
-        <ContentContext.Provider value={{ styles: () => content({ size: size() }) }}>
-          <IllustrationContext.Provider
+        <ContentContext value={{ styles: () => content({ size: size() }) }}>
+          <IllustrationContext
             value={{
               get size() {
                 return size() === "L" ? "L" : "M";
@@ -247,7 +267,7 @@ export function IllustratedMessage(props: IllustratedMessageProps): JSX.Element
                 }),
             }}
           >
-            <ButtonGroupContext.Provider value={{ styles: buttonGroup }}>
+            <ButtonGroupContext value={{ styles: buttonGroup }}>
               <Show when={local.illustration}>
                 <div class={illustration({ orientation: orientation(), size: size() })}>
                   {local.illustration}
@@ -262,10 +282,10 @@ export function IllustratedMessage(props: IllustratedMessageProps): JSX.Element
                 <div class={content({ size: size() })}>{local.description}</div>
               </Show>
               {local.children}
-            </ButtonGroupContext.Provider>
-          </IllustrationContext.Provider>
-        </ContentContext.Provider>
-      </HeadingContext.Provider>
+            </ButtonGroupContext>
+          </IllustrationContext>
+        </ContentContext>
+      </HeadingContext>
     </div>
   );
 }

package/src/image/index.tsx

@@ -1,19 +1,23 @@
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Image.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ImageCoordinator.tsx
+
+// Port of packages/@react-spectrum/s2/src/Image.tsx.
+// Port of packages/@react-spectrum/s2/src/ImageCoordinator.tsx.
 import {
   createContext,
   createEffect,
   createMemo,
   createSignal,
-  mergeProps,
-  onCleanup,
   Show,
-  splitProps,
-  type Context,
-  type JSX,
   untrack,
   useContext,
 } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import type { StyleString } from "../style";
 import { style } from "../style" with { type: "macro" };
+import { css } from "../style/style-macro" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import type { UnsafeClassName } from "../s2-internal/style-utils";
 import {
@@ -26,6 +30,7 @@ import {
 } from "../button/spectrum-context";
 import { useTheme } from "../provider";
 import { createIsSkeleton, loadingStyle, useLoadingAnimation } from "../skeleton";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ImageSource {
   /** A comma-separated list of image URLs and descriptors. */
@@ -53,9 +58,19 @@ export interface ImageProps {
   decoding?: "async" | "auto" | "sync";
   fetchPriority?: "high" | "low" | "auto";
   loading?: "eager" | "lazy";
-  referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>["referrerPolicy"];
+  referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>["referrerpolicy"];
   width?: number;
   height?: number;
+  /**
+   * Local addition — no S2 counterpart. Renders the bitmap with nearest-neighbour
+   * scaling (`image-rendering: pixelated`) instead of the browser's smoothing, so
+   * the register's low-resolution pixel thumbs stay crisp blocks when they are
+   * scaled up rather than turning into a blur. It is a rendering mode of the
+   * element, not a design token, so it has no place on the style ramp and is
+   * carried as a boolean here.
+   * @default false
+   */
+  isPixelated?: boolean;
   styles?: StyleString | (() => StyleString | undefined);
   renderError?: () => JSX.Element;
   group?: ImageGroup;
@@ -125,6 +140,15 @@ const imageStyles = style({
   transitionDuration: 500,
 });
 
+/* `image-rendering` has no property on the S2 style ramp (style/spectrum-theme.ts),
+ * and it is not a design decision that a token could carry — it is how the raster is
+ * resampled. The css() escape hatch is the sanctioned route for exactly this
+ * (docs/adr/0001-s2-styling-source-of-truth.md), and it still compiles into the
+ * package's shipped styles.css. */
+const pixelatedStyle = css(`
+  image-rendering: pixelated;
+`);
+
 const pictureStyles = style({
   objectFit: "inherit",
   objectPosition: "inherit",
@@ -203,15 +227,17 @@ function ImageCoordinatorRoot(props: ImageCoordinatorProps): JSX.Element {
     });
   };
 
-  createEffect(() => {
-    if (loadedAll()) {
-      return;
-    }
-
-    const delay = Math.max(0, loadStartTime() + timeout() - Date.now());
-    const timeoutId = window.setTimeout(() => setTimedOut(true), delay);
-    onCleanup(() => window.clearTimeout(timeoutId));
-  });
+  createEffect(
+    () => {
+      if (loadedAll()) return null;
+      return Math.max(0, loadStartTime() + timeout() - Date.now());
+    },
+    (delay) => {
+      if (delay == null) return;
+      const timeoutId = window.setTimeout(() => setTimedOut(true), delay);
+      return () => window.clearTimeout(timeoutId);
+    },
+  );
 
   const value: ImageGroupValue = {
     get revealAll() {
@@ -222,7 +248,7 @@ function ImageCoordinatorRoot(props: ImageCoordinatorProps): JSX.Element {
     load,
   };
 
-  const GroupProvider = group().Provider;
+  const GroupProvider = group();
   return <GroupProvider value={value}>{props.children}</GroupProvider>;
 }
 
@@ -236,7 +262,7 @@ function sourceMedia(source: ImageSource, colorScheme: "light" | "dark") {
 
 export function Image(props: ImageProps): JSX.Element {
   const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);
-  const merged = mergeProps(contextProps ?? {}, props);
+  const merged = mergeProps<ImageContextValue>(contextProps ?? {}, props);
   const [local] = splitProps(merged, [
     "src",
     "alt",
@@ -247,6 +273,7 @@ export function Image(props: ImageProps): JSX.Element {
     "referrerPolicy",
     "width",
     "height",
+    "isPixelated",
     "styles",
     "renderError",
     "group",
@@ -259,10 +286,12 @@ export function Image(props: ImageProps): JSX.Element {
   ]);
   const theme = useTheme();
   const imageGroup = useContext(local.group ?? DefaultImageGroup);
-  const [state, setState] = createSignal<ImageState>("loading");
-  const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));
-  const [startTime, setStartTime] = createSignal(Date.now());
-  const [loadTime, setLoadTime] = createSignal(0);
+  const [state, setState] = createSignal<ImageState>("loading", { ownedWrite: true });
+  const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src), {
+    ownedWrite: true,
+  });
+  const [startTime, setStartTime] = createSignal(Date.now(), { ownedWrite: true });
+  const [loadTime, setLoadTime] = createSignal(0, { ownedWrite: true });
   const isSkeleton = createIsSkeleton();
   let imageElement: HTMLImageElement | undefined;
 
@@ -282,49 +311,58 @@ export function Image(props: ImageProps): JSX.Element {
   const animating = () => isSkeleton() || state() === "loading" || state() === "loaded";
   const loadingAnimationRef = useLoadingAnimation(animating);
 
-  createEffect(() => {
-    const nextKey = cacheKey();
-    if (nextKey !== lastCacheKey() && !hidden()) {
-      setState("loading");
-      setLastCacheKey(nextKey);
-      setStartTime(Date.now());
-      setLoadTime(0);
-    }
-  });
-
-  createEffect(() => {
-    if (hidden()) {
-      return;
-    }
-
-    const key = cacheKey();
-    imageGroup.register(key);
-    onCleanup(() => imageGroup.unregister(key));
-  });
+  createEffect(
+    () => ({ nextKey: cacheKey(), hidden: hidden(), last: lastCacheKey() }),
+    ({ nextKey, hidden, last }) => {
+      if (nextKey !== last && !hidden) {
+        setState("loading");
+        setLastCacheKey(nextKey);
+        setStartTime(Date.now());
+        setLoadTime(0);
+      }
+    },
+  );
 
-  createEffect(() => {
-    if (state() === "loaded" && imageGroup.revealAll && !hidden()) {
-      setState("revealed");
-      setLoadTime(Date.now() - startTime());
-    }
-  });
+  createEffect(
+    () => (hidden() ? null : cacheKey()),
+    (key) => {
+      if (key == null) return;
+      imageGroup.register(key);
+      return () => imageGroup.unregister(key);
+    },
+  );
 
-  createEffect(() => {
-    if (hidden()) {
-      return;
-    }
+  createEffect(
+    () => ({
+      loaded: state() === "loaded",
+      revealAll: imageGroup.revealAll,
+      hidden: hidden(),
+      start: startTime(),
+    }),
+    ({ loaded, revealAll, hidden, start }) => {
+      if (loaded && revealAll && !hidden) {
+        setState("revealed");
+        setLoadTime(Date.now() - start);
+      }
+    },
+  );
 
-    const image = imageElement;
-    if (state() === "loading" && image?.complete) {
-      queueMicrotask(() => {
-        if (image.naturalWidth === 0 && image.naturalHeight === 0) {
-          handleError();
-        } else {
-          handleLoad();
-        }
-      });
-    }
-  });
+  createEffect(
+    () => ({ hidden: hidden(), loading: state() === "loading" }),
+    ({ hidden, loading }) => {
+      if (hidden) return;
+      const image = imageElement;
+      if (loading && image?.complete) {
+        queueMicrotask(() => {
+          if (image.naturalWidth === 0 && image.naturalHeight === 0) {
+            handleError();
+          } else {
+            handleLoad();
+          }
+        });
+      }
+    },
+  );
 
   const handleLoad = () => {
     imageGroup.load(cacheKey());
@@ -381,22 +419,27 @@ export function Image(props: ImageProps): JSX.Element {
     <img
       src={typeof srcProp() === "string" && srcProp() ? (srcProp() as string) : undefined}
       alt={local.alt}
-      crossOrigin={local.crossOrigin}
+      crossorigin={local.crossOrigin}
       decoding={local.decoding}
       loading={local.loading}
-      referrerPolicy={local.referrerPolicy}
+      referrerpolicy={local.referrerPolicy}
       width={local.width}
       height={local.height}
       ref={(element) => {
         imageElement = element;
       }}
-      itemProp={local.itemProp}
+      itemprop={local.itemProp}
       onLoad={handleLoad}
       onError={handleError}
-      class={imageStyles({
-        isRevealed: revealed(),
-        isTransitioning: transitioning(),
-      })}
+      class={[
+        imageStyles({
+          isRevealed: revealed(),
+          isTransitioning: transitioning(),
+        }),
+        local.isPixelated ? pixelatedStyle : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ")}
       {...({ fetchpriority: local.fetchPriority } as Record<string, string | undefined>)}
     />
   );

package/src/index.ts

@@ -4,7 +4,7 @@
 // should live outside the main S2 export path.
 
 // Provider
-export { ColorSchemeContext, Provider, useTheme } from "./provider";
+export { ColorSchemeContext, createThemeTransition, Provider, useTheme } from "./provider";
 export type {
   ColorScheme,
   ProviderContextValue,
@@ -12,6 +12,7 @@ export type {
   ProviderProps,
   Scale,
   ThemeContextValue,
+  ThemeTransitionOptions,
   ValidationState,
 } from "./provider";
 
@@ -77,6 +78,9 @@ export { pressScale } from "./pressScale";
 // ActionMenu / Menu
 export { ActionMenu, ActionMenuContext } from "./menu/ActionMenu";
 export type { ActionMenuProps } from "./menu/ActionMenu";
+// `MenuButton` is a local addition: S2 composes MenuTrigger + Button. apps/web
+// still uses this convenience. (Kept out of the block below — a comment inside
+// an `export {}` list hides the name from the barrel-parsing coverage tests.)
 export {
   Collection,
   ContextualHelpTrigger,
@@ -258,8 +262,8 @@ export {
   ComboBoxInput,
   ComboBoxInputGroup,
   ComboBoxListBox,
+  ComboBoxItem,
   ComboBoxOption,
-  ComboBoxOption as ComboBoxItem,
   ComboBoxSection,
   defaultContainsFilter,
 } from "./combobox";
@@ -267,11 +271,12 @@ export type {
   ComboBoxButtonProps,
   ComboBoxInputProps,
   ComboBoxListBoxProps,
+  ComboBoxItemProps,
   ComboBoxOptionProps,
-  ComboBoxOptionProps as ComboBoxItemProps,
   ComboBoxProps,
   ComboBoxSectionProps,
   ComboBoxSize,
+  ComboBoxLoadingState,
   MenuTriggerAction,
 } from "./combobox";
 
@@ -500,8 +505,14 @@ export type {
 } from "./list";
 
 // Meter
-export { Meter, MeterContext } from "./meter";
-export type { MeterProps } from "./meter";
+export { Meter, MeterContext, PixelMeter } from "./meter";
+export type {
+  MeterProps,
+  PixelMeterProps,
+  PixelMeterShape,
+  PixelMeterChannel,
+  PixelMeterLevels,
+} from "./meter";
 
 // NumberField
 export { NumberField, NumberFieldContext } from "./numberfield";
@@ -784,8 +795,22 @@ export type {
   TreeSelectionStyle,
 } from "./tree";
 
-export { Well } from "./well";
-export type { WellProps } from "./well";
+export { Well, TerminalLog } from "./well";
+export type {
+  WellProps,
+  TerminalLogProps,
+  TerminalLogLine,
+  TerminalLogSpan,
+  TerminalLogChannel,
+} from "./well";
+
+// HudFrame
+export { HudFrame } from "./hudframe";
+export type { HudFrameProps, HudFrameBrackets, HudFrameChannel } from "./hudframe";
+
+// SceneBackdrop
+export { SceneBackdrop } from "./view";
+export type { SceneBackdropProps } from "./view";
 
 // Support exports — hooks, helpers, and collection data.
 // Mirrors React S2's re-exports of the underlying React Aria / React Stately