@instruments/materia-ui 0.1.0

package/dist/components/slider/slider-root.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useEffect, useMemo, useRef } from "react";
+import { DISABLED } from "../../tokens/input-shell.js";
+import { cssVariables } from "../../utils/css-variables.js";
+import { isPresent } from "../../utils/type-guards.js";
+import { Flex } from "../flex.js";
+import { Text } from "../text.js";
+/**
+ * The 48px channel instrument, as class strings.
+ *
+ * Both consumers had their own copy of this, so a fix to the press timing had
+ * to be made twice and the `duration-*` bug below was live in both.
+ */
+const channelClasses = (travel) => [
+    "relative h-12 py-0",
+    // Grab anywhere near the thumb, not only on the 40px thumb itself.
+    "!cursor-grab active:!cursor-grabbing",
+    "[&_[data-slot=slider-track]]:!h-12 [&_[data-slot=slider-track]]:!rounded-full [&_[data-slot=slider-track]]:!bg-transparent",
+    "[&_[data-slot=slider-range]]:!bg-transparent",
+    "[&_[data-slot=slider-thumb]]:!size-10 [&_[data-slot=slider-thumb]]:!rounded-full [&_[data-slot=slider-thumb]]:!border-0",
+    // Promote up front so the first press frame never triggers a repaint.
+    "[&_[data-slot=slider-thumb]]:![will-change:transform]",
+    "[&_[data-slot=slider-thumb]]:!cursor-grab [&_[data-slot=slider-thumb]:active]:!cursor-grabbing",
+    "[&_[data-slot=slider-thumb]]:hover:!ring-0",
+    // The core: centred and round; its size and colour are the consumer's.
+    "[&_[data-slot=slider-thumb]]:after:!absolute [&_[data-slot=slider-thumb]]:after:!top-1/2 [&_[data-slot=slider-thumb]]:after:!left-1/2 [&_[data-slot=slider-thumb]]:after:!-translate-x-1/2 [&_[data-slot=slider-thumb]]:after:!-translate-y-1/2 [&_[data-slot=slider-thumb]]:after:!rounded-full",
+    // Release, then press.
+    // With `travelToValue` the thumb's position joins the transition list, and
+    // drops out of it again while a drag is in progress.
+    travel
+        ? "motion-safe:[&_[data-slot=slider-thumb]]:!transition-[transform,box-shadow,filter,scale,inset-inline-start,bottom] motion-safe:data-dragging:[&_[data-slot=slider-thumb]]:!transition-[transform,box-shadow,filter,scale]"
+        : "motion-safe:[&_[data-slot=slider-thumb]]:!transition-[transform,box-shadow,filter,scale]",
+    "motion-safe:[&_[data-slot=slider-thumb]]:!duration-normal motion-safe:[&_[data-slot=slider-thumb]]:!ease-out",
+    "motion-safe:[&_[data-slot=slider-thumb]]:after:!transition-[background-color,scale] motion-safe:[&_[data-slot=slider-thumb]]:after:!duration-normal motion-safe:[&_[data-slot=slider-thumb]]:after:!ease-out",
+    "motion-safe:[&_[data-slot=slider-thumb]:active]:!duration-quick motion-safe:[&_[data-slot=slider-thumb]:active]:!ease-out motion-safe:[&_[data-slot=slider-thumb]:active]:!scale-[0.96]",
+    "motion-safe:[&_[data-slot=slider-thumb]:active]:after:!duration-normal motion-safe:[&_[data-slot=slider-thumb]:active]:after:!delay-[80ms] motion-safe:[&_[data-slot=slider-thumb]:active]:after:!ease-out",
+].join(" ");
+/** The channel's gradient, as an inline style: a runtime colour value. */
+const channelTrackStyle = (isChannel, trackBackground) => isChannel && trackBackground !== undefined
+    ? { backgroundImage: trackBackground }
+    : undefined;
+/** One thumb per value: a number is one thumb, an array is one per entry. */
+const countThumbs = (value, defaultValue) => [value ?? defaultValue].flat().length;
+/** One thumb; on the channel its core takes the colour the app derives from the live value. */
+const SliderThumb = ({ getValueText, index, thumbColor, thumbLabel, }) => (_jsx(SliderPrimitive.Thumb, { className: cn(focusRing(), "transition-color-shadow size-4 shrink-0 rounded-full border border-gray-300 bg-white shadow-xs ring-gray-500/80 hover:ring-4 focus-visible:ring-4 has-focus-visible:ring-4", DISABLED, 
+    // The core is the thumb's `::after`; its colour rides a custom
+    // property written from the thumb's live value, below.
+    thumbColor !== undefined && "after:size-3 after:bg-(--slider-thumb-core)"), "data-component": "slider-thumb", "data-slot": "slider-thumb", getAriaLabel: thumbLabel === undefined ? undefined : () => thumbLabel, getAriaValueText: getValueText === undefined
+        ? undefined
+        : (_formatted, thumbValue, thumbIndex) => getValueText(thumbValue, thumbIndex), index: index, style: thumbColor === undefined
+        ? undefined
+        : (state) => cssVariables({
+            "--slider-thumb-core": thumbColor(state.values[index] ?? 0, index),
+        }) }));
+/** The visible end captions; assistive technology reads the thumb instead. */
+const SliderLabels = ({ labelEnd, labelStart, }) => (_jsxs(Flex, { "aria-hidden": "true", className: "w-full px-2", "data-slot": "slider-labels", justify: "space-between", children: [_jsx(Text, { as: "span", size: "caption", weight: "medium", children: labelStart }), _jsx(Text, { as: "span", size: "caption", weight: "medium", children: labelEnd })] }));
+const Slider = ({ className, defaultValue, value, getThumbColor, getValueText, labelEnd, labelStart, onDraggingChange, thumbLabels, trackBackground, travelToValue = false, variant = "default", ...props }) => {
+    const isChannel = variant === "channel";
+    const hasLabels = isChannel && (isPresent(labelStart) || isPresent(labelEnd));
+    const thumbColor = isChannel ? getThumbColor : undefined;
+    // Tracks the gesture so `onDraggingChange` is sent from the two events that
+    // change it, not from an effect.
+    const isDraggingRef = useRef(false);
+    const draggingChanged = useRef(onDraggingChange);
+    useEffect(() => {
+        draggingChanged.current = onDraggingChange;
+    }, [onDraggingChange]);
+    // The gesture ends wherever the pointer happens to be, including outside the
+    // track, so the release is heard on the window rather than the element.
+    useEffect(() => {
+        const end = () => {
+            if (isDraggingRef.current) {
+                isDraggingRef.current = false;
+                draggingChanged.current?.(false);
+            }
+        };
+        window.addEventListener("pointerup", end);
+        window.addEventListener("pointercancel", end);
+        return () => {
+            window.removeEventListener("pointerup", end);
+            window.removeEventListener("pointercancel", end);
+        };
+    }, []);
+    const thumbCount = countThumbs(value, defaultValue);
+    const thumbKeys = useMemo(() => Array.from({ length: thumbCount }, (_, index) => `slider-thumb-${index}`), [thumbCount]);
+    return (_jsxs(SliderPrimitive.Root, { className: cn("relative flex w-full touch-none items-center py-3 select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", isChannel && channelClasses(travelToValue), 
+        // Captions sit under the channel, so the root grows past the 48px
+        // channel and wraps them onto their own row.
+        hasLabels && "h-auto flex-wrap content-start", 
+        // Base UI positions each thumb by writing `inset-inline-start` (or
+        // `bottom`) on the thumb itself. That is the one thing there is to
+        // animate, and it is switched off while the pointer is down so the
+        // thumb never lags the finger.
+        travelToValue &&
+            variant === "default" &&
+            "[&_[data-slot=slider-thumb]]:transition-inset-start-bottom [&_[data-slot=slider-thumb]]:duration-normal [&_[data-slot=slider-thumb]]:ease-out data-dragging:[&_[data-slot=slider-thumb]]:transition-none motion-reduce:[&_[data-slot=slider-thumb]]:transition-none", className), "data-component": "slider", "data-slot": "slider", ...(value === undefined ? {} : { value }), ...(defaultValue === undefined ? {} : { defaultValue }), ...props, onPointerDown: (event) => {
+            if (!isDraggingRef.current) {
+                isDraggingRef.current = true;
+                draggingChanged.current?.(true);
+            }
+            props.onPointerDown?.(event);
+        }, children: [_jsxs(SliderPrimitive.Control, { className: cn("relative flex w-full grow items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col", hasLabels && "h-12"), "data-component": "slider-control", "data-slot": "slider-control", children: [_jsx(SliderPrimitive.Track, { className: cn("relative grow overflow-hidden rounded-full bg-gray-200 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), "data-component": "slider-track", "data-slot": "slider-track", style: channelTrackStyle(isChannel, trackBackground), children: _jsx(SliderPrimitive.Indicator, { className: cn("bg-gray-500 data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"), "data-component": "slider-range", "data-slot": "slider-range" }) }), thumbKeys.map((thumbKey, index) => (_jsx(SliderThumb, { getValueText: getValueText, index: index, thumbColor: thumbColor, thumbLabel: thumbLabels?.[index] }, thumbKey)))] }), hasLabels ? (_jsx(SliderLabels, { labelEnd: labelEnd, labelStart: labelStart })) : null] }));
+};
+export { Slider };

package/dist/components/slider.d.ts

@@ -0,0 +1 @@
+export { Slider } from "./slider/slider-root.js";

package/dist/components/slider.js

@@ -0,0 +1 @@
+export { Slider } from "./slider/slider-root.js";

package/dist/components/social-icon/social-icon-paths.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Single-colour marks on a 24 x 24 grid, one `d` string per shape. Each export
+ * sits inside the grid, so the SVG viewport is the only clip they need.
+ *
+ * @module
+ */
+export declare const SOCIAL_NETWORKS: readonly ["facebook", "google", "instagram", "linkedin", "pinterest", "tiktok", "whatsapp", "x", "youtube"];
+export type SocialNetwork = (typeof SOCIAL_NETWORKS)[number];
+export declare const SOCIAL_ICON_PATHS: Record<SocialNetwork, readonly string[]>;

package/dist/components/social-icon/social-icon-paths.js

@@ -0,0 +1,48 @@
+/**
+ * Single-colour marks on a 24 x 24 grid, one `d` string per shape. Each export
+ * sits inside the grid, so the SVG viewport is the only clip they need.
+ *
+ * @module
+ */
+export const SOCIAL_NETWORKS = [
+    "facebook",
+    "google",
+    "instagram",
+    "linkedin",
+    "pinterest",
+    "tiktok",
+    "whatsapp",
+    "x",
+    "youtube",
+];
+export const SOCIAL_ICON_PATHS = {
+    facebook: [
+        "M12 0C5.37264 0 0 5.37264 0 12C0 17.6275 3.87456 22.3498 9.10128 23.6467V15.6672H6.62688V12H9.10128V10.4198C9.10128 6.33552 10.9498 4.4424 14.9597 4.4424C15.72 4.4424 17.0318 4.59168 17.5685 4.74048V8.06448C17.2853 8.03472 16.7933 8.01984 16.1822 8.01984C14.2147 8.01984 13.4544 8.76528 13.4544 10.703V12H17.3741L16.7006 15.6672H13.4544V23.9122C19.3963 23.1946 24.0005 18.1354 24.0005 12C24 5.37264 18.6274 0 12 0Z",
+    ],
+    google: [
+        "M23.7695 9.77372H12.2556V14.3873H18.8716C18.7652 15.0403 18.5264 15.6826 18.1767 16.2683C17.776 16.9393 17.2807 17.4502 16.7729 17.8392C15.2521 19.0046 13.479 19.2429 12.2476 19.2429C9.13691 19.2429 6.47903 17.2325 5.45011 14.5006C5.40859 14.4014 5.38102 14.299 5.34745 14.1978C5.12007 13.5025 4.99584 12.7661 4.99584 12.0008C4.99584 11.2042 5.13037 10.4417 5.37566 9.7216C6.34319 6.88141 9.06099 4.76006 12.2498 4.76006C12.8912 4.76006 13.5089 4.83641 14.0946 4.98869C15.4333 5.3367 16.3801 6.02212 16.9603 6.56428L20.4613 3.13576C18.3317 1.18317 15.5555 2.95218e-09 12.244 2.95218e-09C9.59665 -5.69793e-05 7.1525 0.824781 5.1496 2.21878C3.52531 3.34928 2.19316 4.86288 1.29412 6.62075C0.457891 8.25066 0 10.0569 0 11.999C0 13.9411 0.458591 15.7661 1.29483 17.381V17.3918C2.1781 19.1062 3.46975 20.5823 5.0396 21.7076C6.41104 22.6907 8.87017 24 12.244 24C14.1842 24 15.9038 23.6502 17.4203 22.9946C18.5142 22.5217 19.4835 21.9049 20.3611 21.1122C21.5206 20.0647 22.4288 18.7691 23.0486 17.2785C23.6684 15.7878 24 14.1022 24 12.2747C24 11.4236 23.9145 10.5592 23.7695 9.77363V9.77372Z",
+    ],
+    instagram: [
+        "M12 2.16094C15.2063 2.16094 15.5859 2.175 16.8469 2.23125C18.0188 2.28281 18.6516 2.47969 19.0734 2.64375C19.6313 2.85938 20.0344 3.12188 20.4516 3.53906C20.8734 3.96094 21.1313 4.35938 21.3469 4.91719C21.5109 5.33906 21.7078 5.97656 21.7594 7.14375C21.8156 8.40937 21.8297 8.78906 21.8297 11.9906C21.8297 15.1969 21.8156 15.5766 21.7594 16.8375C21.7078 18.0094 21.5109 18.6422 21.3469 19.0641C21.1313 19.6219 20.8687 20.025 20.4516 20.4422C20.0297 20.8641 19.6313 21.1219 19.0734 21.3375C18.6516 21.5016 18.0141 21.6984 16.8469 21.75C15.5813 21.8062 15.2016 21.8203 12 21.8203C8.79375 21.8203 8.41406 21.8062 7.15313 21.75C5.98125 21.6984 5.34844 21.5016 4.92656 21.3375C4.36875 21.1219 3.96563 20.8594 3.54844 20.4422C3.12656 20.0203 2.86875 19.6219 2.65313 19.0641C2.48906 18.6422 2.29219 18.0047 2.24063 16.8375C2.18438 15.5719 2.17031 15.1922 2.17031 11.9906C2.17031 8.78438 2.18438 8.40469 2.24063 7.14375C2.29219 5.97187 2.48906 5.33906 2.65313 4.91719C2.86875 4.35938 3.13125 3.95625 3.54844 3.53906C3.97031 3.11719 4.36875 2.85938 4.92656 2.64375C5.34844 2.47969 5.98594 2.28281 7.15313 2.23125C8.41406 2.175 8.79375 2.16094 12 2.16094ZM12 0C8.74219 0 8.33438 0.0140625 7.05469 0.0703125C5.77969 0.126563 4.90313 0.332812 4.14375 0.628125C3.35156 0.9375 2.68125 1.34531 2.01563 2.01562C1.34531 2.68125 0.9375 3.35156 0.628125 4.13906C0.332812 4.90313 0.126563 5.775 0.0703125 7.05C0.0140625 8.33437 0 8.74219 0 12C0 15.2578 0.0140625 15.6656 0.0703125 16.9453C0.126563 18.2203 0.332812 19.0969 0.628125 19.8563C0.9375 20.6484 1.34531 21.3188 2.01563 21.9844C2.68125 22.65 3.35156 23.0625 4.13906 23.3672C4.90313 23.6625 5.775 23.8687 7.05 23.925C8.32969 23.9812 8.7375 23.9953 11.9953 23.9953C15.2531 23.9953 15.6609 23.9812 16.9406 23.925C18.2156 23.8687 19.0922 23.6625 19.8516 23.3672C20.6391 23.0625 21.3094 22.65 21.975 21.9844C22.6406 21.3188 23.0531 20.6484 23.3578 19.8609C23.6531 19.0969 23.8594 18.225 23.9156 16.95C23.9719 15.6703 23.9859 15.2625 23.9859 12.0047C23.9859 8.74688 23.9719 8.33906 23.9156 7.05938C23.8594 5.78438 23.6531 4.90781 23.3578 4.14844C23.0625 3.35156 22.6547 2.68125 21.9844 2.01562C21.3188 1.35 20.6484 0.9375 19.8609 0.632812C19.0969 0.3375 18.225 0.13125 16.95 0.075C15.6656 0.0140625 15.2578 0 12 0Z",
+        "M12 5.83594C8.59688 5.83594 5.83594 8.59688 5.83594 12C5.83594 15.4031 8.59688 18.1641 12 18.1641C15.4031 18.1641 18.1641 15.4031 18.1641 12C18.1641 8.59688 15.4031 5.83594 12 5.83594ZM12 15.9984C9.79219 15.9984 8.00156 14.2078 8.00156 12C8.00156 9.79219 9.79219 8.00156 12 8.00156C14.2078 8.00156 15.9984 9.79219 15.9984 12C15.9984 14.2078 14.2078 15.9984 12 15.9984Z",
+        "M19.8469 5.59214C19.8469 6.38902 19.2 7.0312 18.4078 7.0312C17.6109 7.0312 16.9688 6.38433 16.9688 5.59214C16.9688 4.79526 17.6156 4.15308 18.4078 4.15308C19.2 4.15308 19.8469 4.79995 19.8469 5.59214Z",
+    ],
+    linkedin: [
+        "M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z",
+    ],
+    pinterest: [
+        "M12 0C5.37188 0 0 5.37188 0 12C0 17.0859 3.16406 21.4266 7.62656 23.175C7.52344 22.2234 7.425 20.7703 7.66875 19.7344C7.88906 18.7969 9.075 13.7719 9.075 13.7719C9.075 13.7719 8.71406 13.0547 8.71406 11.9906C8.71406 10.3219 9.67969 9.075 10.8844 9.075C11.9062 9.075 12.4031 9.84375 12.4031 10.7672C12.4031 11.7984 11.7469 13.3359 11.4094 14.7609C11.1281 15.9562 12.0094 16.9313 13.1859 16.9313C15.3187 16.9313 16.9594 14.6812 16.9594 11.4375C16.9594 8.56406 14.8969 6.55313 11.9484 6.55313C8.53594 6.55313 6.52969 9.1125 6.52969 11.7609C6.52969 12.7922 6.92812 13.8984 7.425 14.4984C7.52344 14.6156 7.5375 14.7234 7.50937 14.8406C7.42031 15.2203 7.21406 16.0359 7.17656 16.2C7.125 16.4203 7.00313 16.4672 6.77344 16.3594C5.27344 15.6609 4.33594 13.4719 4.33594 11.7094C4.33594 7.92188 7.0875 4.44844 12.2625 4.44844C16.425 4.44844 19.6594 7.41563 19.6594 11.3813C19.6594 15.5156 17.0531 18.8438 13.4344 18.8438C12.2203 18.8438 11.0766 18.2109 10.6828 17.4656C10.6828 17.4656 10.0828 19.7578 9.9375 20.3203C9.66562 21.3609 8.93437 22.6688 8.44687 23.4656C9.57187 23.8125 10.7625 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37188 18.6281 0 12 0Z",
+    ],
+    tiktok: [
+        "M17.0725 0H13.0278V16.3478C13.0278 18.2957 11.4722 19.8957 9.53626 19.8957C7.60034 19.8957 6.04469 18.2957 6.04469 16.3478C6.04469 14.4348 7.56577 12.8695 9.43257 12.8V8.69567C5.31872 8.7652 2 12.1391 2 16.3478C2 20.5913 5.38786 24 9.57085 24C13.7538 24 17.1416 20.5565 17.1416 16.3478V7.9652C18.6627 9.07827 20.5295 9.73913 22.5 9.77393V5.66957C19.4579 5.56522 17.0725 3.06087 17.0725 0Z",
+    ],
+    whatsapp: [
+        "M12 0C18.6273 1.41584e-05 24 5.37267 24 12C24 18.6273 18.6273 24 12 24C9.91013 24 7.94563 23.4656 6.23438 22.5264L0 24L1.59766 17.9873C0.581325 16.2253 0 14.1803 0 12C3.38254e-07 5.37267 5.37268 0 12 0ZM12 2.14941C6.55968 2.14941 2.14941 6.55967 2.14941 12C2.14948 14.0975 2.80525 16.0421 3.92285 17.6396L2.88965 21.1592L6.57227 20.2217C8.03142 21.1871 9.76259 21.7742 11.626 21.8438L12 21.8506C17.4402 21.8506 21.8504 17.4402 21.8506 12C21.8506 6.55967 17.4403 2.14943 12 2.14941ZM8.70215 6.07812C8.84897 6.06621 8.98417 6.15107 9.04688 6.28418L10.416 9.18848C10.4803 9.32561 10.4518 9.48851 10.3447 9.5957L9.32422 10.6162C9.10355 10.8369 9.03941 11.1805 9.19141 11.4531C9.56367 12.1207 10.0637 12.7639 10.6436 13.3555C11.2351 13.9354 11.8784 14.4366 12.5459 14.8086C12.8184 14.9605 13.1618 14.8961 13.3828 14.6758L14.4033 13.6553C14.5106 13.548 14.6742 13.519 14.8115 13.584L17.7148 14.9531C17.848 15.0157 17.9337 15.1504 17.9219 15.2969C17.8905 15.6788 17.7368 16.4446 17.0508 17.1309C15.1135 19.0682 11.6339 16.8767 11.4922 16.792C10.6366 16.3323 9.82363 15.7169 9.05273 14.9463C8.28221 14.1757 7.66664 13.3624 7.20703 12.5068C7.11976 12.3619 4.9316 8.88582 6.86816 6.94922C7.5545 6.26289 8.32015 6.10946 8.70215 6.07812Z",
+    ],
+    x: [
+        "M18.3263 1.90393H21.6998L14.3297 10.3274L23 21.7899H16.2112L10.894 14.838L4.80995 21.7899H1.43443L9.31743 12.78L1 1.90393H7.96111L12.7674 8.25826L18.3263 1.90393ZM17.1423 19.7707H19.0116L6.94539 3.81706H4.93946L17.1423 19.7707Z",
+    ],
+    youtube: [
+        "M23.7609 7.20005C23.7609 7.20005 23.5266 5.54536 22.8047 4.8188C21.8906 3.86255 20.8688 3.85786 20.4 3.80161C17.0438 3.55786 12.0047 3.55786 12.0047 3.55786H11.9953C11.9953 3.55786 6.95625 3.55786 3.6 3.80161C3.13125 3.85786 2.10938 3.86255 1.19531 4.8188C0.473438 5.54536 0.24375 7.20005 0.24375 7.20005C0.24375 7.20005 0 9.14536 0 11.086V12.9047C0 14.8454 0.239062 16.7907 0.239062 16.7907C0.239062 16.7907 0.473437 18.4454 1.19062 19.1719C2.10469 20.1282 3.30469 20.0954 3.83906 20.1985C5.76094 20.3813 12 20.4375 12 20.4375C12 20.4375 17.0438 20.4282 20.4 20.1891C20.8688 20.1329 21.8906 20.1282 22.8047 19.1719C23.5266 18.4454 23.7609 16.7907 23.7609 16.7907C23.7609 16.7907 24 14.85 24 12.9047V11.086C24 9.14536 23.7609 7.20005 23.7609 7.20005ZM9.52031 15.1125V8.36724L16.0031 11.7516L9.52031 15.1125Z",
+    ],
+};

package/dist/components/social-icon/social-icon-root.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { IconSize } from "../icon/icon-root.js";
+import type { SocialNetwork } from "./social-icon-paths.js";
+export type SocialIconProps = Omit<React.SVGProps<SVGSVGElement>, "children"> & {
+    /** Which network's mark to draw. */
+    network: SocialNetwork;
+    /** Same scale as Icon. @default "base" */
+    size?: IconSize;
+    /** Accessible name. Omit when the icon sits beside visible text; it is then hidden from assistive tech. */
+    label?: string;
+};
+/**
+ * Draws a social network's mark in the surrounding text colour, on the same size
+ * scale as `Icon`. Without a `label` it is `aria-hidden`; with one it becomes an
+ * image with that accessible name.
+ *
+ * @bestPractice Set `label` only when the icon stands alone, such as inside an icon-only link; beside visible text leave it off so the mark is hidden from assistive tech.
+ * @bestPractice The mark paints with `currentColor`, so colour it with a text-colour class on the icon or a parent (`className="text-muted-foreground"`), not a brand fill.
+ * @bestPractice Size with the `size` token (`"sm"`, `"lg"`…), not `className="size-6"`; it shares the `Icon` scale so a mark lines up with the icons around it.
+ * @category color
+ */
+export declare const SocialIcon: ({ network, size, label, className, ...props }: SocialIconProps) => React.JSX.Element;

package/dist/components/social-icon/social-icon-root.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ICON_SIZE_CLASS } from "../icon/icon-root.js";
+import { SOCIAL_ICON_PATHS } from "./social-icon-paths.js";
+/**
+ * Draws a social network's mark in the surrounding text colour, on the same size
+ * scale as `Icon`. Without a `label` it is `aria-hidden`; with one it becomes an
+ * image with that accessible name.
+ *
+ * @bestPractice Set `label` only when the icon stands alone, such as inside an icon-only link; beside visible text leave it off so the mark is hidden from assistive tech.
+ * @bestPractice The mark paints with `currentColor`, so colour it with a text-colour class on the icon or a parent (`className="text-muted-foreground"`), not a brand fill.
+ * @bestPractice Size with the `size` token (`"sm"`, `"lg"`…), not `className="size-6"`; it shares the `Icon` scale so a mark lines up with the icons around it.
+ * @category color
+ */
+export const SocialIcon = ({ network, size = "base", label, className, ...props }) => (_jsx("svg", { "aria-hidden": label === undefined ? true : undefined, "aria-label": label, className: cn("shrink-0", ICON_SIZE_CLASS[size], className), "data-component": "social-icon", fill: "currentColor", focusable: false, role: label === undefined ? undefined : "img", viewBox: "0 0 24 24", ...props, children: SOCIAL_ICON_PATHS[network].map((d) => (_jsx("path", { d: d }, d))) }));

package/dist/components/social-icon.d.ts

@@ -0,0 +1,4 @@
+export { SOCIAL_NETWORKS } from "./social-icon/social-icon-paths.js";
+export type { SocialNetwork } from "./social-icon/social-icon-paths.js";
+export type { SocialIconProps } from "./social-icon/social-icon-root.js";
+export { SocialIcon } from "./social-icon/social-icon-root.js";

package/dist/components/social-icon.js

@@ -0,0 +1,2 @@
+export { SOCIAL_NETWORKS } from "./social-icon/social-icon-paths.js";
+export { SocialIcon } from "./social-icon/social-icon-root.js";

package/dist/components/space/space-root.d.ts

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import type { ResponsiveMode, LayoutResponsiveValue } from "../../tokens/responsive.js";
+import type { ComponentSize } from "../../tokens/size.js";
+export interface SpaceProps extends React.ComponentProps<"div"> {
+    /** Height - ComponentSize token. Can be responsive. */
+    h?: LayoutResponsiveValue<ComponentSize>;
+    /** Responsive mode: "screen" (viewport) or "container" (container queries). */
+    responsiveMode?: ResponsiveMode;
+    /** Width - ComponentSize token. Can be responsive. */
+    w?: LayoutResponsiveValue<ComponentSize>;
+}
+/**
+ * Spacer component for adding fixed width or height gaps in layouts.
+ *
+ * @param props - The space props
+ * @param props.w - Width. ComponentSize token. Can be responsive.
+ * @param props.h - Height. ComponentSize token. Can be responsive.
+ * @param props.responsiveMode - "screen" (viewport, default) or "container" (container queries).
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <Space h="lg" />
+ * <Space w="base" h="sm" />
+ * <Space h={{ base: "sm", md: "lg" }} responsiveMode="container" />
+ * ```
+ *
+ * @bestPractice Reach for `Space` only for a fixed one-off gap between siblings; consistent spacing across many children belongs on a `Stack`/`Flex`/`Group` `gap` instead.
+ * @category layout
+ */
+export declare const Space: ({ w, h, className, responsiveMode, ...props }: SpaceProps) => React.JSX.Element;

package/dist/components/space/space-root.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { pushResponsiveClasses } from "../../tokens/responsive.js";
+import { HEIGHT_CLASS, WIDTH_CLASS } from "../../tokens/responsive-classes.js";
+/** Build the responsive width/height utility classes for a Space. */
+const buildSpaceClasses = (w, h, responsiveMode) => {
+    const classes = [];
+    if (w !== undefined) {
+        pushResponsiveClasses(classes, w, WIDTH_CLASS, responsiveMode);
+    }
+    if (h !== undefined) {
+        pushResponsiveClasses(classes, h, HEIGHT_CLASS, responsiveMode);
+    }
+    return classes.join(" ");
+};
+/**
+ * Spacer component for adding fixed width or height gaps in layouts.
+ *
+ * @param props - The space props
+ * @param props.w - Width. ComponentSize token. Can be responsive.
+ * @param props.h - Height. ComponentSize token. Can be responsive.
+ * @param props.responsiveMode - "screen" (viewport, default) or "container" (container queries).
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <Space h="lg" />
+ * <Space w="base" h="sm" />
+ * <Space h={{ base: "sm", md: "lg" }} responsiveMode="container" />
+ * ```
+ *
+ * @bestPractice Reach for `Space` only for a fixed one-off gap between siblings; consistent spacing across many children belongs on a `Stack`/`Flex`/`Group` `gap` instead.
+ * @category layout
+ */
+export const Space = ({ w, h, className, responsiveMode = "screen", ...props }) => (_jsx("div", { className: cn(buildSpaceClasses(w, h, responsiveMode), className), "data-component": "space", "data-slot": "space", ...props }));

package/dist/components/space.d.ts

@@ -0,0 +1 @@
+export { Space, type SpaceProps } from "./space/space-root.js";

package/dist/components/space.js

@@ -0,0 +1 @@
+export { Space } from "./space/space-root.js";

package/dist/components/spinner/spinner-root.d.ts

@@ -0,0 +1,25 @@
+import type { LucideProps } from "lucide-react";
+import type { ComponentSize } from "../../tokens/size.js";
+export type SpinnerProps = LucideProps & {
+    /** Component size */
+    size?: ComponentSize;
+};
+/**
+ * Loading spinner component. Animated circular indicator for async operations.
+ *
+ * @param props - The spinner props
+ * @param props.size - Spinner size. Options: "2xs", "xs", "sm", "base" (default, 20px), "lg", "xl", "2xl", "3xl".
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other Lucide Icon props.
+ *
+ * @example
+ * ```tsx
+ * <Spinner size="base" />
+ * <Spinner size="lg" className="text-primary" />
+ * ```
+ *
+ * @bestPractice Use `Spinner` for small inline / action loading (inside a `Button`, next to text); a blocking full region is `LoadingState`, a layout placeholder is `Skeleton`.
+ * @bestPractice A bare `Spinner` carries no accessible name - wrap it in a labelled live region (e.g. `LoadingState`) when it's the sole loading signal.
+ * @category feedback
+ */
+export declare const Spinner: ({ size, className, ...props }: SpinnerProps) => import("react").JSX.Element;

package/dist/components/spinner/spinner-root.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { LoaderCircleIcon } from "lucide-react";
+const SPINNER_PX = {
+    "2xl": 32,
+    "2xs": 12,
+    "3xl": 40,
+    base: 20,
+    lg: 24,
+    sm: 18,
+    xl: 28,
+    xs: 16,
+};
+/**
+ * Per-size stroke width - Figma thins the ring as the spinner grows so the
+ * arc stays visually balanced (heavy at 12px, delicate at 40px).
+ */
+const SPINNER_STROKE = {
+    "2xl": 1,
+    "2xs": 2,
+    "3xl": 1,
+    base: 1.67,
+    lg: 1.33,
+    sm: 1.67,
+    xl: 1.33,
+    xs: 2,
+};
+/**
+ * Loading spinner component. Animated circular indicator for async operations.
+ *
+ * @param props - The spinner props
+ * @param props.size - Spinner size. Options: "2xs", "xs", "sm", "base" (default, 20px), "lg", "xl", "2xl", "3xl".
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other Lucide Icon props.
+ *
+ * @example
+ * ```tsx
+ * <Spinner size="base" />
+ * <Spinner size="lg" className="text-primary" />
+ * ```
+ *
+ * @bestPractice Use `Spinner` for small inline / action loading (inside a `Button`, next to text); a blocking full region is `LoadingState`, a layout placeholder is `Skeleton`.
+ * @bestPractice A bare `Spinner` carries no accessible name - wrap it in a labelled live region (e.g. `LoadingState`) when it's the sole loading signal.
+ * @category feedback
+ */
+export const Spinner = ({ size = "base", className, ...props }) => {
+    const px = SPINNER_PX[size];
+    return (_jsx(LoaderCircleIcon, { className: cn("animate-spin", className), "data-component": "spinner", size: px, strokeWidth: SPINNER_STROKE[size], ...props }));
+};

package/dist/components/spinner.d.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from "./spinner/spinner-root.js";

package/dist/components/spinner.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner/spinner-root.js";

package/dist/components/stack/stack-root.d.ts

@@ -0,0 +1,54 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { FlexAlign } from "../../tokens/alignment.js";
+import type { FlexDirection } from "../../tokens/direction.js";
+import type { LayoutElement, LayoutHostAttributes, LayoutHostKey } from "../../tokens/element.js";
+import type { FlexJustify } from "../../tokens/justify.js";
+import type { ResponsiveMode, LayoutResponsiveValue } from "../../tokens/responsive.js";
+import type { GapSize } from "../../tokens/responsive-classes.js";
+export interface StackProps extends Omit<useRender.ComponentProps<"div">, LayoutHostKey>, LayoutHostAttributes {
+    /** Cross-axis alignment. Accepts a per-breakpoint responsive object. @default "stretch" */
+    align?: LayoutResponsiveValue<FlexAlign>;
+    /**
+     * Render as a different host element from the closed layout vocabulary
+     * ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a
+     * type error, because the design-system answer is the Button component. Event handlers
+     * and the ref accept any host element.
+     *
+     * `as` and `render` are mutually exclusive; if both are passed, `render`
+     * wins (a dev-only warning fires).
+     * @example <Stack as="ul">
+     */
+    as?: LayoutElement;
+    /** Main-axis direction. Accepts a per-breakpoint responsive object. @default "column" */
+    direction?: LayoutResponsiveValue<FlexDirection>;
+    /** Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object. @default "base" */
+    gap?: LayoutResponsiveValue<GapSize>;
+    /** Show dashed outline guidelines during development. @default false */
+    guidelines?: boolean;
+    /** Main-axis distribution. Accepts a per-breakpoint responsive object. @default "flex-start" */
+    justify?: LayoutResponsiveValue<FlexJustify>;
+    /** Whether responsive values resolve against the viewport ("screen") or nearest container ("container"). @default "screen" */
+    responsiveMode?: ResponsiveMode;
+}
+/**
+ * Flex container for arranging children in a line with consistent spacing.
+ *
+ * Layout props (`direction`, `align`, `justify`, `gap`) accept a single value or a
+ * per-breakpoint responsive object like `{ base: "column", md: "row" }`; set `responsiveMode`
+ * to `"container"` to resolve breakpoints against the nearest container instead of the viewport.
+ * Stacks vertically by default.
+ *
+ * @bestPractice `Stack` is a gapped one-axis line, vertical by default - use `HStack`/`VStack` to lock direction; for full flexbox control (`justify`/`wrap`) reach for `Flex`.
+ * @bestPractice `as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).
+ * @bestPractice Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.
+ * @category layout
+ */
+export declare const Stack: ({ as, className, gap, align, justify, direction, ref, render, responsiveMode, guidelines, ...props }: StackProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * {@link Stack} locked to a horizontal (row) direction.
+ */
+export declare const HStack: (props: Omit<StackProps, "direction">) => import("react").JSX.Element;
+/**
+ * {@link Stack} locked to a vertical (column) direction.
+ */
+export declare const VStack: (props: Omit<StackProps, "direction">) => import("react").JSX.Element;

package/dist/components/stack/stack-root.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { pushResponsiveClasses } from "../../tokens/responsive.js";
+import { ALIGN_CLASS, DIRECTION_CLASS, GAP_CLASS, JUSTIFY_CLASS, } from "../../tokens/responsive-classes.js";
+import { reportDevIssue } from "../../utils/dev-issue.js";
+/**
+ * Flex container for arranging children in a line with consistent spacing.
+ *
+ * Layout props (`direction`, `align`, `justify`, `gap`) accept a single value or a
+ * per-breakpoint responsive object like `{ base: "column", md: "row" }`; set `responsiveMode`
+ * to `"container"` to resolve breakpoints against the nearest container instead of the viewport.
+ * Stacks vertically by default.
+ *
+ * @bestPractice `Stack` is a gapped one-axis line, vertical by default - use `HStack`/`VStack` to lock direction; for full flexbox control (`justify`/`wrap`) reach for `Flex`.
+ * @bestPractice `as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).
+ * @bestPractice Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.
+ * @category layout
+ */
+export const Stack = ({ as, className, gap = "base", align = "stretch", justify = "flex-start", direction = "column", ref, render, responsiveMode = "screen", guidelines = false, ...props }) => {
+    if (render !== undefined && as !== undefined) {
+        reportDevIssue("Stack: `as` and `render` are mutually exclusive; `render` wins and `as` is ignored.");
+    }
+    const classes = ["flex"];
+    pushResponsiveClasses(classes, direction, DIRECTION_CLASS, responsiveMode);
+    pushResponsiveClasses(classes, align, ALIGN_CLASS, responsiveMode);
+    pushResponsiveClasses(classes, justify, JUSTIFY_CLASS, responsiveMode);
+    pushResponsiveClasses(classes, gap, GAP_CLASS, responsiveMode);
+    if (guidelines) {
+        classes.push("outline", "outline-1", "outline-dashed", "outline-muted-foreground/30");
+    }
+    return useRender({
+        defaultTagName: as ?? "div",
+        props: {
+            className: cn(classes.join(" "), className),
+            "data-component": "stack",
+            "data-slot": "stack",
+            ...props,
+        },
+        ref,
+        render,
+    });
+};
+/**
+ * {@link Stack} locked to a horizontal (row) direction.
+ */
+export const HStack = (props) => (_jsx(Stack, { direction: "row", ...props }));
+/**
+ * {@link Stack} locked to a vertical (column) direction.
+ */
+export const VStack = (props) => (_jsx(Stack, { direction: "column", ...props }));

package/dist/components/stack/stack.test-d.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Type-level surface guards for Stack's closed `as` vocabulary (plan M1a).
+ *
+ * Evaluated by `tsc --noEmit` (the `typecheck` gate), not by vitest or the
+ * Playwright story smoke - a `.test-d.ts` name matches neither runner's globs.
+ *
+ * Beyond the closed-set guards, this file pins the Base-story tenet: adding `as`
+ * must NOT collapse `Stack`'s props inference (no discriminated union was
+ * introduced), so a `Meta<typeof Stack>` still types and `ComponentProps` stays
+ * non-`never`. If a later refactor degrades args inference, `ArgsNonNever` below
+ * stops satisfying `extends true`.
+ */
+import type { Meta } from "@storybook/react-vite";
+import type { ComponentProps } from "react";
+import type { Stack } from "./stack-root.js";
+/** Passes only when `T` is exactly `true`. */
+type Expect<T extends true> = T;
+/** Boolean negation at the type level. */
+type Not<B extends boolean> = B extends true ? false : true;
+/** `true` iff a value of type `V` is accepted as Stack props. */
+type Accepts<V> = V extends ComponentProps<typeof Stack> ? true : false;
+export type NavAccepted = Expect<Accepts<{
+    as: "nav";
+}>>;
+export type UlAccepted = Expect<Accepts<{
+    as: "ul";
+}>>;
+export type ButtonRejected = Expect<Not<Accepts<{
+    as: "button";
+}>>>;
+export type AnchorRejected = Expect<Not<Accepts<{
+    as: "a";
+}>>>;
+export type InputRejected = Expect<Not<Accepts<{
+    as: "input";
+}>>>;
+export type ArgsNonNever = Expect<Not<[ComponentProps<typeof Stack>] extends [never] ? true : false>>;
+export type StackMetaResolves = Expect<typeof Stack extends NonNullable<Meta<typeof Stack>["component"]> ? true : false>;
+export {};

package/dist/components/stack/stack.test-d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/stack.d.ts

@@ -0,0 +1 @@
+export { HStack, Stack, type StackProps, VStack } from "./stack/stack-root.js";

package/dist/components/stack.js

@@ -0,0 +1 @@
+export { HStack, Stack, VStack } from "./stack/stack-root.js";

package/dist/components/stagger/stagger-item.d.ts

@@ -0,0 +1,20 @@
+import * as m from "motion/react-m";
+import type { ComponentProps } from "react";
+type StaggerAnimation = "fade" | "fadeScale" | "fadeUp" | "fadeUpBlur";
+export interface StaggerItemProps extends ComponentProps<typeof m.div> {
+    /** Animation preset applied to this item. @default "fadeUp" */
+    animation?: StaggerAnimation;
+}
+/**
+ * A child of `Stagger` that animates in with a preset entrance animation.
+ * Timing is controlled by the parent `Stagger` container.
+ *
+ * @example
+ * ```tsx
+ * <StaggerItem animation="fadeUp">
+ *   <Text>Appears with a fade + slide up</Text>
+ * </StaggerItem>
+ * ```
+ */
+export declare const StaggerItem: ({ animation, className, children, ...props }: StaggerItemProps) => import("react").JSX.Element;
+export {};

package/dist/components/stagger/stagger-item.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { durations, easings } from "@instruments/materia-ui/tokens/motion";
+import * as m from "motion/react-m";
+const ITEM_TRANSITION = {
+    duration: durations.normal,
+    ease: easings.out,
+};
+const ITEM_TRANSITION_QUICK = {
+    duration: durations.quick,
+    ease: easings.out,
+};
+const itemVariants = {
+    fade: {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1, transition: ITEM_TRANSITION },
+    },
+    fadeScale: {
+        hidden: { opacity: 0, scale: 0.95 },
+        visible: { opacity: 1, scale: 1, transition: ITEM_TRANSITION },
+    },
+    fadeUp: {
+        hidden: { opacity: 0, y: 8 },
+        visible: { opacity: 1, transition: ITEM_TRANSITION, y: 0 },
+    },
+    fadeUpBlur: {
+        hidden: { filter: "blur(4px)", opacity: 0, y: 8 },
+        visible: {
+            filter: "blur(0px)",
+            opacity: 1,
+            transition: ITEM_TRANSITION_QUICK,
+            y: 0,
+        },
+    },
+};
+/**
+ * A child of `Stagger` that animates in with a preset entrance animation.
+ * Timing is controlled by the parent `Stagger` container.
+ *
+ * @example
+ * ```tsx
+ * <StaggerItem animation="fadeUp">
+ *   <Text>Appears with a fade + slide up</Text>
+ * </StaggerItem>
+ * ```
+ */
+export const StaggerItem = ({ animation = "fadeUp", className, children, ...props }) => (_jsx(m.div, { className: className, variants: itemVariants[animation], ...props, children: children }));