@instruments/materia-ui 0.1.0

package/dist/compositions/folder-tile/folder-tile-root.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { durations, easings, springs, } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { useState } from "react";
+import { asMotionStyle } from "../../utils/motion-style.js";
+import { FolderArtwork, FolderLabel } from "./folder-tile-artwork.js";
+/** Pencil glyph sized for the FolderTile action slot (e.g. an edit/menu trigger). */
+export const FolderTileEditIcon = (props) => (_jsx("svg", { "aria-hidden": "true", fill: "none", preserveAspectRatio: "none", viewBox: "0 0 12.6666 12.6664", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M8.08 2.25L10.42 4.58M11.68 3.31C11.99 3 12.17 2.58 12.17 2.14C12.17 1.71 11.99 1.29 11.69 0.98C11.38 0.67 10.96 0.5 10.52 0.5C10.09 0.5 9.67 0.67 9.36 0.98L1.57 8.77C1.44 8.9 1.34 9.07 1.28 9.25L0.51 11.79C0.5 11.84 0.5 11.9 0.51 11.95C0.52 12 0.55 12.04 0.59 12.08C0.62 12.12 0.67 12.14 0.72 12.16C0.77 12.17 0.83 12.17 0.88 12.15L3.41 11.38C3.6 11.33 3.76 11.23 3.9 11.09L11.68 3.31Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const buttonVariants = {
+    hover: { scale: 1, y: 0 },
+    press: { scale: 0.985, y: 0 },
+    rest: { scale: 1, y: 0 },
+};
+const staticVariants = {
+    hover: {},
+    press: {},
+    rest: {},
+};
+const getDerivedState = (explicitState, materialCount) => {
+    if (explicitState) {
+        return explicitState;
+    }
+    return materialCount > 0 ? "filled" : "empty";
+};
+const getDisplayCount = (itemCount, materialCount) => {
+    if (itemCount !== undefined) {
+        return itemCount;
+    }
+    return materialCount > 0 ? materialCount : undefined;
+};
+const EMPTY_MATERIALS = [];
+const CLOSED_FRONT_INSET = {
+    bottom: "-5.88%",
+    left: "-4%",
+    right: "-4%",
+    top: "-5.88%",
+};
+const OPEN_FRONT_INSET = {
+    bottom: "-6.06%",
+    left: "-3.24%",
+    right: "-3.19%",
+    top: "-6.06%",
+};
+/** Static style for the outer folder tile fieldset. */
+const FOLDER_FIELDSET_STYLE = {
+    border: 0,
+    flexShrink: 0,
+    margin: 0,
+    minWidth: 0,
+    padding: 0,
+    position: "relative",
+    width: 114,
+};
+/** Static base style for the folder tile button (merged with caller `style`). */
+const FOLDER_BUTTON_STYLE = {
+    alignItems: "center",
+    borderRadius: 12,
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    justifyContent: "center",
+    outline: "none",
+    width: "100%",
+};
+/** Derive the visual booleans that drive the folder artwork from inputs. */
+const getFolderFlags = ({ actionVisible, forceOpen, isHovered, materialCount, openOnHover, selected, showSelectedState, visualState, }) => {
+    const isFilled = visualState !== "empty" && materialCount > 0;
+    // Both filled and empty folders lean open on hover; empty ones reveal the
+    // back plate (there is no material to peek) alongside the rotating + icon.
+    const canHoverOpen = visualState === "filled" || visualState === "empty";
+    // `forceOpen` (e.g. a drop target under a dragged item) opens the folder
+    // without revealing the action, so it is kept out of `isActionVisible`.
+    const isActionOpen = visualState === "open" ||
+        (actionVisible && visualState === "filled") ||
+        (openOnHover && isHovered && canHoverOpen);
+    const isOpen = isActionOpen || (forceOpen && canHoverOpen);
+    return {
+        isActionVisible: actionVisible || isActionOpen || isHovered,
+        isFilled,
+        isFrontFolded: isOpen && visualState !== "open",
+        isOpen,
+        isSelectedVisible: (showSelectedState && selected) === true,
+        frontFlapOpen: visualState === "open" && isFilled,
+    };
+};
+/** Front-flap geometry: how far left it sits and its SVG inset. */
+const getFrontFlapGeometry = (frontFlapOpen, visualState) => {
+    let frontFlapLeft = 6.55;
+    if (frontFlapOpen) {
+        frontFlapLeft = 2.98;
+    }
+    else if (visualState === "empty") {
+        frontFlapLeft = 7;
+    }
+    return {
+        frontFlapLeft,
+        frontSvgInset: frontFlapOpen ? OPEN_FRONT_INSET : CLOSED_FRONT_INSET,
+    };
+};
+/** Motion transitions, collapsed to instant when reduced motion is set. */
+const getFolderTransitions = (shouldReduceMotion) => ({
+    frontTransition: shouldReduceMotion === true
+        ? { duration: durations.instant }
+        : {
+            duration: durations.normal,
+            ease: easings.out,
+        },
+    transition: shouldReduceMotion === true
+        ? { duration: durations.instant }
+        : springs.swift,
+});
+/** Preview slice and derived label inputs for one render. */
+const getFolderView = (materials, state, itemCount, name) => {
+    const previewMaterials = materials.slice(0, 3);
+    const materialCount = previewMaterials.length;
+    const count = getDisplayCount(itemCount, materialCount);
+    return {
+        count,
+        label: count === undefined ? name : `${name} ∙ ${count}`,
+        materialCount,
+        previewMaterials,
+        visualState: getDerivedState(state, materialCount),
+    };
+};
+const FolderTileAction = ({ action, isActionVisible, }) => {
+    if (action === undefined || action === null) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("absolute top-12.5 left-16.5 z-40 opacity-0", "duration-quick transition-opacity", isActionVisible && "opacity-100", "group-focus-within/folder-tile:opacity-100"), "data-slot": "folder-action", children: action }));
+};
+/**
+ * Animated folder button showing a fanned preview of up to three materials, an
+ * opening flap, selected styling, and an optional hover action slot.
+ *
+ * Visual state is derived from `materials` unless `state` is set; the folder
+ * leans open on hover (`openOnHover`) or when forced open as a drop target
+ * (`open`). All motion collapses to instant under reduced-motion preferences.
+ *
+ * @bestPractice Only the first three `materials` render in the fan; pass `itemCount` when the real total differs, otherwise the count shows `materials.length`.
+ * @bestPractice Supply `renderImage` in Next.js so previews go through `next/image` - the default renders plain `<img>` from each material's `src`/`alt`.
+ * @bestPractice Drive drag-and-drop drop-target styling with `open` (forces the open look without revealing the action); use `selected`+`showSelectedState` for selection, not manual classes.
+ * @bestPractice `FolderTile` is itself the button - pass `name`/`onClick` and button props directly; don't wrap it in another `<button>`/`<a>`.
+ * @category catalogue
+ */
+export const FolderTile = ({ action, actionVisible = false, animateEmptyIcon = true, className, itemCount, materials = EMPTY_MATERIALS, name, onMouseEnter, onMouseLeave, open = false, openOnHover = true, renderImage, selected, showSelectedState = true, state, style, testId, type = "button", ...buttonProps }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const [isHovered, setIsHovered] = useState(false);
+    const { count, label, materialCount, previewMaterials, visualState } = getFolderView(materials, state, itemCount, name);
+    const { isActionVisible, isFilled, isFrontFolded, isOpen, isSelectedVisible, frontFlapOpen, } = getFolderFlags({
+        actionVisible,
+        forceOpen: open,
+        isHovered,
+        materialCount,
+        openOnHover,
+        selected,
+        showSelectedState,
+        visualState,
+    });
+    const isEmptyIconAnimated = animateEmptyIcon && isHovered && shouldReduceMotion !== true;
+    const { frontFlapLeft, frontSvgInset } = getFrontFlapGeometry(frontFlapOpen, visualState);
+    const { transition, frontTransition } = getFolderTransitions(shouldReduceMotion);
+    return (_jsxs("fieldset", { className: cn("group/folder-tile relative m-0 w-28.5 min-w-0 shrink-0 border-0 p-0", className), "data-component": "folder-tile", "data-item-count": count, "data-open": isOpen, "data-preview-count": materialCount, "data-slot": "folder-tile", "data-state": visualState, "data-testid": testId, onMouseEnter: () => {
+            setIsHovered(true);
+        }, onMouseLeave: () => {
+            setIsHovered(false);
+        }, style: FOLDER_FIELDSET_STYLE, children: [_jsxs(m.button, { animate: "rest", "aria-pressed": showSelectedState ? isSelectedVisible : undefined, className: cn(focusRing(), "flex w-full cursor-pointer flex-col items-center justify-center gap-0.75 rounded-xl", "focus-visible:ring-offset-2"), initial: "rest", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: asMotionStyle({
+                    ...FOLDER_BUTTON_STYLE,
+                    ...style,
+                }), ...(transition === undefined ? {} : { transition }), type: type, variants: shouldReduceMotion === true ? staticVariants : buttonVariants, whileHover: "hover", whileTap: "press", ...buttonProps, children: [_jsx(FolderArtwork, { frontFlapLeft: frontFlapLeft, frontSvgInset: frontSvgInset, frontTransition: frontTransition, isEmptyIconAnimated: isEmptyIconAnimated, isFilled: isFilled, isFrontFolded: isFrontFolded, isOpen: isOpen, isSelectedVisible: isSelectedVisible, previewMaterials: previewMaterials, renderImage: renderImage, frontFlapOpen: frontFlapOpen, transition: transition, visualState: visualState }), _jsx(FolderLabel, { count: count, isSelectedVisible: isSelectedVisible, label: label, name: name })] }), _jsx(FolderTileAction, { action: action, isActionVisible: isActionVisible })] }));
+};

package/dist/compositions/folder-tile/folder-tile-svgs.d.ts

@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+export declare const FolderBackSvg: ({ className, style, }: {
+    className?: string;
+    style?: SVGProps<SVGSVGElement>["style"];
+}) => import("react").JSX.Element;
+export declare const FolderPlusSvg: ({ className, style, }: {
+    className?: string;
+    style?: SVGProps<SVGSVGElement>["style"];
+}) => import("react").JSX.Element;
+export declare const FolderFrontSvg: ({ className, style, variant, }: {
+    className?: string;
+    style?: SVGProps<SVGSVGElement>["style"];
+    variant: "closed" | "open";
+}) => import("react").JSX.Element;

package/dist/compositions/folder-tile/folder-tile-svgs.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export const FolderBackSvg = ({ className, style, }) => {
+    const filterId = useId();
+    return (_jsxs("svg", { "aria-hidden": "true", className: className, fill: "none", preserveAspectRatio: "none", style: style, viewBox: "0 0 106 86", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { filter: `url(#${filterId})`, children: [_jsx("path", { d: "M3 10C3 5.58 6.58 2 11 2H28.72C30.73 2 32.67 2.76 34.15 4.13L36.68 6.47C38.16 7.84 40.1 8.6 42.11 8.6H95C99.42 8.6 103 12.18 103 16.6V74C103 78.42 99.42 82 95 82H11C6.58 82 3 78.42 3 74V10Z", fill: "white" }), _jsx("path", { d: "M11 2.47H28.72C30.61 2.47 32.44 3.18 33.83 4.47L36.36 6.81C37.93 8.26 39.98 9.06 42.11 9.06H95C99.16 9.06 102.53 12.44 102.53 16.6V74C102.53 78.16 99.16 81.53 95 81.53H11C6.84 81.53 3.47 78.16 3.47 74V10C3.47 5.84 6.84 2.47 11 2.47Z", stroke: "#E5E7EB", strokeWidth: "0.935249" })] }), _jsx("defs", { children: _jsxs("filter", { colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "86", id: filterId, width: "106", x: "0", y: "0", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: "1", result: "effect1_dropShadow" }), _jsx("feOffset", { dy: "1" }), _jsx("feGaussianBlur", { stdDeviation: "1" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0666667 0 0 0 0 0.0941176 0 0 0 0 0.152941 0 0 0 0.1 0" }), _jsx("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow" }), _jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), _jsx("feOffset", { dy: "1" }), _jsx("feGaussianBlur", { stdDeviation: "1.5" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0666667 0 0 0 0 0.0941176 0 0 0 0 0.152941 0 0 0 0.1 0" }), _jsx("feBlend", { in2: "effect1_dropShadow", result: "effect2_dropShadow" }), _jsx("feBlend", { in: "SourceGraphic", in2: "effect2_dropShadow", result: "shape" })] }) })] }));
+};
+export const FolderPlusSvg = ({ className, style, }) => (_jsx("svg", { "aria-hidden": "true", className: className, fill: "none", preserveAspectRatio: "none", style: style, viewBox: "0 0 13.3186 13.3186", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0.58 6.66H12.74M6.66 0.58V12.74", stroke: "#030712", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.1555" }) }));
+const getSvgId = (prefix, reactId) => `${prefix}-${reactId.replaceAll(":", "")}`;
+const getFolderFrontConfig = (isOpen) => ({
+    foreignObject: isOpen
+        ? { height: 114, width: 154.946 }
+        : { height: 116, width: 148 },
+    gradient: isOpen
+        ? { x1: "57.881", x2: "57.881", y1: "7.51709", y2: "78.9649" }
+        : { x1: "54.352", x2: "54.352", y1: "7.62366", y2: "81.2366" },
+    path: isOpen
+        ? "M4.01495 12.484C3.73616 7.8838 7.3917 4 12.0003 4L33.2949 4C35.2615 4 37.1592 4.72437 38.6256 6.03478L41.2033 8.33827C42.6697 9.64868 44.5674 10.3731 46.534 10.3731H102.946C107.575 10.3731 111.238 14.2899 110.928 18.9085L108.002 62.5355C107.72 66.7365 104.23 70 100.019 70H15.0306C10.8003 70 7.30117 66.7065 7.04526 62.484L4.01495 12.484Z"
+        : "M4 12C4 7.58172 7.58172 4 12 4L31.7068 4C33.8207 4 35.8487 4.83666 37.3476 6.32718L39.2703 8.239C40.7693 9.72952 42.7972 10.5662 44.9111 10.5662H96C100.418 10.5662 104 14.1479 104 18.5662V64C104 68.4183 100.418 72 96 72H12C7.58172 72 4 68.4183 4 64V12Z",
+    viewBox: isOpen ? "0 0 114.946 74" : "0 0 108 76",
+});
+const FolderFrontDefs = ({ clipPathId, filterId, foreignObject, gradient, gradientId, path, }) => (_jsxs("defs", { children: [_jsxs("filter", { colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: foreignObject.height, id: filterId, width: foreignObject.width, x: "-20", y: "-20", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), _jsx("feOffset", {}), _jsx("feGaussianBlur", { stdDeviation: "2" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0666667 0 0 0 0 0.0941176 0 0 0 0 0.152941 0 0 0 0.2 0" }), _jsx("feBlend", { in2: "BackgroundImageFix", mode: "normal", result: "effect1_dropShadow" }), _jsx("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", mode: "normal", result: "shape" }), _jsx("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), _jsx("feOffset", { dy: "1" }), _jsx("feComposite", { in2: "hardAlpha", k2: "-1", k3: "1", operator: "arithmetic" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" }), _jsx("feBlend", { in2: "shape", mode: "normal", result: "effect2_innerShadow" }), _jsx("feTurbulence", { baseFrequency: "10 10", numOctaves: "3", result: "noise", seed: "4517", stitchTiles: "stitch", type: "fractalNoise" }), _jsx("feColorMatrix", { in: "noise", result: "alphaNoise", type: "luminanceToAlpha" }), _jsx("feComponentTransfer", { in: "alphaNoise", result: "coloredNoise1", children: _jsx("feFuncA", { tableValues: "0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0", type: "discrete" }) }), _jsx("feComposite", { in: "coloredNoise1", in2: "effect2_innerShadow", operator: "in", result: "noise1Clipped" }), _jsx("feFlood", { floodColor: "rgba(107, 114, 128, 0.25)", result: "color1Flood" }), _jsx("feComposite", { in: "color1Flood", in2: "noise1Clipped", operator: "in", result: "color1" }), _jsxs("feMerge", { result: "effect3_noise", children: [_jsx("feMergeNode", { in: "effect2_innerShadow" }), _jsx("feMergeNode", { in: "color1" })] }), _jsx("feBlend", { in: "effect3_noise", in2: "effect1_dropShadow", mode: "normal", result: "effect3_noise" })] }), _jsx("clipPath", { id: clipPathId, transform: "translate(20 20)", children: _jsx("path", { d: path }) }), _jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: gradientId, x1: gradient.x1, x2: gradient.x2, y1: gradient.y1, y2: gradient.y2, children: [_jsx("stop", { stopColor: "#E5E7EB" }), _jsx("stop", { offset: "0.658352", stopColor: "#D1D5DB" })] })] }));
+export const FolderFrontSvg = ({ className, style, variant, }) => {
+    const reactId = useId();
+    const filterId = getSvgId("folder-front-filter", reactId);
+    const clipPathId = getSvgId("folder-front-blur-clip", reactId);
+    const gradientId = getSvgId("folder-front-gradient", reactId);
+    const { foreignObject, gradient, path, viewBox } = getFolderFrontConfig(variant === "open");
+    return (_jsxs("svg", { "aria-hidden": "true", className: className, "data-front-variant": variant, "data-slot": "folder-front-svg", fill: "none", overflow: "visible", preserveAspectRatio: "none", style: { display: "block", ...style }, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("foreignObject", { height: foreignObject.height, width: foreignObject.width, x: "-20", y: "-20", children: _jsx("div", { style: {
+                        // oxlint-disable-next-line react-doctor/no-large-animated-blur -- 12px is the designed frosted-glass radius of the folder front; this div is static (the parent motion.div animates position, not the blur), and a smaller blur changes the visual
+                        WebkitBackdropFilter: "blur(12px)",
+                        // oxlint-disable-next-line react-doctor/no-large-animated-blur -- 12px is the designed frosted-glass radius of the folder front; this div is static (the parent motion.div animates position, not the blur), and a smaller blur changes the visual
+                        backdropFilter: "blur(12px)",
+                        clipPath: `url(#${clipPathId})`,
+                        height: "100%",
+                        width: "100%",
+                    } }) }), _jsx("g", { "data-figma-bg-blur-radius": "24", "data-slot": "folder-front-filtered-shape", filter: `url(#${filterId})`, children: _jsx("path", { d: path, fill: `url(#${gradientId})`, fillOpacity: "0.5", 
+                    // oxlint-disable-next-line anti-slop/no-shape-in-symbol-names -- `shapeRendering` is an SVG attribute
+                    shapeRendering: "crispEdges" }) }), _jsx(FolderFrontDefs, { clipPathId: clipPathId, filterId: filterId, foreignObject: foreignObject, gradient: gradient, gradientId: gradientId, path: path })] }));
+};

package/dist/compositions/folder-tile/folder-tile-types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLMotionProps } from "motion/react";
+import type { ReactNode } from "react";
+import type { SwatchFanImageProps } from "../swatch-fan.js";
+/** One image in a folder's preview fan; only the first three are rendered. */
+export interface FolderTileMaterial {
+    alt?: string;
+    id?: string;
+    src: string;
+}
+/** Props passed to a custom `renderImage` callback (shared with SwatchFan). */
+export type FolderTileImageProps = SwatchFanImageProps;
+/** Folder visual state; when unset it is derived from the material count. */
+export type FolderTileState = "empty" | "filled" | "open";
+export type FolderTileTransition = HTMLMotionProps<"div">["transition"];
+/** Props for {@link FolderTile}; extends motion button props minus `children`. */
+export interface FolderTileProps extends Omit<HTMLMotionProps<"button">, "children"> {
+    /** Hover action rendered over the artwork, typically an edit/menu button. */
+    action?: ReactNode;
+    /** Keeps the action and open visual state visible while an external menu/popover is open. */
+    actionVisible?: boolean;
+    /** Whether the empty-folder plus icon rotates on hover. */
+    animateEmptyIcon?: boolean;
+    className?: string;
+    /** Count displayed after the folder name. Defaults to `materials.length`. */
+    itemCount?: number;
+    /** Material previews. The component renders at most the first three. */
+    materials?: FolderTileMaterial[];
+    /** Folder label. */
+    name: string;
+    /**
+     * Forces the open visual state regardless of hover - e.g. while a draggable
+     * item hovers over the folder as a drop target. Does not reveal the action.
+     */
+    open?: boolean;
+    /** Whether filled folders transition into the open state on hover. */
+    openOnHover?: boolean;
+    /** Custom image renderer for frameworks such as Next.js. */
+    renderImage?: (props: FolderTileImageProps) => ReactNode;
+    selected?: boolean;
+    /** Whether selected styling is rendered when `selected` is true. */
+    showSelectedState?: boolean;
+    /** Explicit visual state. When omitted, derived from material count. */
+    state?: FolderTileState;
+    testId?: string;
+}

package/dist/compositions/folder-tile/folder-tile-types.js

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

package/dist/compositions/folder-tile.d.ts

@@ -0,0 +1 @@
+export { FolderTile, FolderTileEditIcon, type FolderTileImageProps, type FolderTileMaterial, type FolderTileProps, type FolderTileState, } from "./folder-tile/folder-tile-root.js";

package/dist/compositions/folder-tile.js

@@ -0,0 +1 @@
+export { FolderTile, FolderTileEditIcon, } from "./folder-tile/folder-tile-root.js";

package/dist/compositions/loading-state/loading-state-root.d.ts

@@ -0,0 +1,41 @@
+import type * as React from "react";
+declare const LOADING_STATE_MIN_HEIGHT_CLASS: {
+    readonly "40vh": "min-h-[40vh]";
+    readonly "60vh": "min-h-[60vh]";
+    readonly screen: "min-h-screen";
+};
+export type LoadingStateMinHeight = keyof typeof LOADING_STATE_MIN_HEIGHT_CLASS;
+export interface LoadingStateProps extends React.ComponentProps<"output"> {
+    /** Minimum height of the centred region. Defaults to "60vh". */
+    minHeight?: LoadingStateMinHeight;
+    /**
+     * Loading message rendered next to the spinner and used as the region's
+     * accessible name (via aria-label). Omit for a spinner-only block - the
+     * region still announces a default "Loading" name.
+     */
+    label?: string;
+}
+/**
+ * LoadingState is a full-region blocking loading indicator: a centred
+ * spinner (optionally labelled) filling a minimum height.
+ *
+ * Prefer `SkeletonText`/`SkeletonRow` for in-place loading inside content
+ * that's already on screen - reach for `LoadingState` only when the whole
+ * region has nothing else to show yet.
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) return <LoadingState />;
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LoadingState label="Loading your account…" minHeight="screen" />
+ * ```
+ *
+ * @bestPractice Reserve `LoadingState` for a whole region / page with nothing to show yet; for in-place loading over existing layout prefer `Skeleton`, and a small inline spinner is `Spinner`.
+ * @bestPractice Pass `label` to name the live region for AT; it already renders `aria-live="polite"` with a default "Loading" name, so don't add your own status role.
+ * @category states
+ */
+export declare const LoadingState: ({ className, minHeight, label, ...props }: LoadingStateProps) => React.JSX.Element;
+export {};

package/dist/compositions/loading-state/loading-state-root.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Center } from "../../components/center.js";
+import { Spinner } from "../../components/spinner.js";
+import { Text } from "../../components/text.js";
+const LOADING_STATE_MIN_HEIGHT_CLASS = {
+    "40vh": "min-h-[40vh]",
+    "60vh": "min-h-[60vh]",
+    screen: "min-h-screen",
+};
+/**
+ * LoadingState is a full-region blocking loading indicator: a centred
+ * spinner (optionally labelled) filling a minimum height.
+ *
+ * Prefer `SkeletonText`/`SkeletonRow` for in-place loading inside content
+ * that's already on screen - reach for `LoadingState` only when the whole
+ * region has nothing else to show yet.
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) return <LoadingState />;
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LoadingState label="Loading your account…" minHeight="screen" />
+ * ```
+ *
+ * @bestPractice Reserve `LoadingState` for a whole region / page with nothing to show yet; for in-place loading over existing layout prefer `Skeleton`, and a small inline spinner is `Spinner`.
+ * @bestPractice Pass `label` to name the live region for AT; it already renders `aria-live="polite"` with a default "Loading" name, so don't add your own status role.
+ * @category states
+ */
+export const LoadingState = ({ className, minHeight = "60vh", label, ...props }) => {
+    const hasLabel = label !== undefined && label !== "";
+    return (_jsxs(Center, { className: cn("w-full flex-col gap-3", LOADING_STATE_MIN_HEIGHT_CLASS[minHeight], className), "data-component": "loading-state", render: _jsx("output", { "aria-label": hasLabel ? label : "Loading", "aria-live": "polite", ...props }), children: [_jsx(Spinner, { size: "lg" }), hasLabel ? (_jsx(Text, { size: "paragraph-sm", variant: "muted", children: label })) : null] }));
+};

package/dist/compositions/loading-state.d.ts

@@ -0,0 +1 @@
+export { LoadingState, type LoadingStateMinHeight, type LoadingStateProps, } from "./loading-state/loading-state-root.js";

package/dist/compositions/loading-state.js

@@ -0,0 +1 @@
+export { LoadingState, } from "./loading-state/loading-state-root.js";

package/dist/compositions/mega-menu/mega-menu-content.d.ts

@@ -0,0 +1,20 @@
+import { PopoverContent } from "@instruments/materia-ui/components/popover";
+import type { ComponentProps, ReactNode } from "react";
+type PopoverContentProps = ComponentProps<typeof PopoverContent>;
+export interface MegaMenuContentProps extends Omit<PopoverContentProps, "align" | "anchor" | "children" | "collisionPadding" | "side" | "sideOffset" | "size"> {
+    /** Names the menu's navigation landmark, such as "Product categories". */
+    "aria-label": string;
+    /** A lead `MegaMenuLink`, then one `MegaMenuSection` per column. */
+    children: ReactNode;
+}
+/**
+ * The menu's panel: one flat sheet from the top of the window, edge to edge,
+ * with the shell's chrome (brand row, search, header actions) sitting on it
+ * and the sidebar's nav and the page dimmed beneath it. Its links start below
+ * the header: the lead link across the top, then the sections in columns, two
+ * or three as the panel's own width allows. It scrolls on its own when it is
+ * taller than the window.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ */
+export declare const MegaMenuContent: ({ "aria-label": ariaLabel, children, className, ...props }: MegaMenuContentProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/mega-menu/mega-menu-content.js

@@ -0,0 +1,38 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@instruments/materia-ui/components/box";
+import { Grid } from "@instruments/materia-ui/components/grid";
+import { PopoverBackdrop, PopoverContent, } from "@instruments/materia-ui/components/popover";
+import { cn } from "@instruments/materia-ui/utils/cn";
+// The window's top edge. The panel hangs from it, full width, in the shell's
+// overlay layer: above the sidebar's nav and the page, beneath the chrome
+// (the brand row and the header bar), which sits on top of it.
+const WINDOW_TOP = {
+    getBoundingClientRect: () => new DOMRect(0, 0, document.documentElement.clientWidth, 0),
+};
+// The panel unrolls from behind the chrome and its links rise in a wave; the
+// choreography lives in index.css, keyed on this composition's slots. This
+// only switches off the popover's own zoom and blur, which suit a panel
+// opening from a point, not one hanging from an edge.
+const PANEL_MOTION = "data-open:animate-none data-closed:animate-none";
+// The dimmed page fades in step with the panel, both ways.
+const BACKDROP_MOTION = [
+    "data-open:animate-none data-closed:animate-none",
+    "transition-opacity duration-normal ease-sheet data-ending-style:ease-in-out",
+    "data-starting-style:opacity-0 data-ending-style:opacity-0",
+].join(" ");
+/**
+ * The menu's panel: one flat sheet from the top of the window, edge to edge,
+ * with the shell's chrome (brand row, search, header actions) sitting on it
+ * and the sidebar's nav and the page dimmed beneath it. Its links start below
+ * the header: the lead link across the top, then the sections in columns, two
+ * or three as the panel's own width allows. It scrolls on its own when it is
+ * taller than the window.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ */
+export const MegaMenuContent = ({ "aria-label": ariaLabel, children, className, ...props }) => (_jsxs(_Fragment, { children: [_jsx(PopoverBackdrop, { className: cn("z-30 bg-black/20 backdrop-blur-sm", BACKDROP_MOTION) }), _jsx(PopoverContent, { align: "start", anchor: WINDOW_TOP, 
+            // It runs edge to edge across the window, so it is never nudged in from
+            // the viewport's edge.
+            collisionPadding: 0, className: cn("bg-background max-h-svh w-(--anchor-width) overflow-y-auto overscroll-contain rounded-none p-0 shadow-xl", PANEL_MOTION, className), "data-component": "mega-menu-content", "data-slot": "mega-menu-content", 
+            // Beneath the chrome's layer, above the sidebar's.
+            positionerClassName: "z-30", side: "bottom", sideOffset: 0, ...props, children: _jsx(Box, { "aria-label": ariaLabel, as: "nav", className: "pt-header @container", children: _jsx(Grid, { align: "flex-start", className: "px-page-gutter pt-6 pb-10", columns: { base: 2, lg: 3 }, "data-slot": "mega-menu-grid", responsiveMode: "container", xGap: "2xl", yGap: "lg", children: children }) }) })] }));

package/dist/compositions/mega-menu/mega-menu-context.d.ts

@@ -0,0 +1,6 @@
+/** Closes the menu; a link calls it as it navigates. */
+export declare const MegaMenuCloseContext: import("react").Context<() => void>;
+export declare const useMegaMenuClose: () => () => void;
+/** True inside a section's list, where each link is a list item. */
+export declare const MegaMenuListContext: import("react").Context<boolean>;
+export declare const useInMegaMenuList: () => boolean;

package/dist/compositions/mega-menu/mega-menu-context.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, useContext } from "react";
+/** Closes the menu; a link calls it as it navigates. */
+export const MegaMenuCloseContext = createContext(() => {
+    // Outside a MegaMenu there is nothing to close.
+});
+export const useMegaMenuClose = () => useContext(MegaMenuCloseContext);
+/** True inside a section's list, where each link is a list item. */
+export const MegaMenuListContext = createContext(false);
+export const useInMegaMenuList = () => useContext(MegaMenuListContext);

package/dist/compositions/mega-menu/mega-menu-root.d.ts

@@ -0,0 +1,32 @@
+import { Popover, PopoverTrigger } from "@instruments/materia-ui/components/popover";
+import type { ComponentProps } from "react";
+export type MegaMenuProps = ComponentProps<typeof Popover>;
+/**
+ * A header's full-width menu of catalogue sections: a trigger in the header
+ * opens a sheet beneath the shell's chrome, over a dimmed sidebar and page.
+ * It opens on a press, not on hover; Escape, a press on the page or choosing
+ * a link closes it, and focus returns to the trigger. Modal by default, so the
+ * page behind it is blocked and does not scroll.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ *
+ * @example
+ * <MegaMenu>
+ *   <MegaMenuTrigger render={<Button icon={LayoutGrid}>Products</Button>} />
+ *   <MegaMenuContent aria-label="Product categories">
+ *     <MegaMenuLink href="/products" lead>View all products</MegaMenuLink>
+ *     <MegaMenuSection href="/materials" title="Materials">
+ *       <MegaMenuLink href="/coatings">Coatings</MegaMenuLink>
+ *     </MegaMenuSection>
+ *   </MegaMenuContent>
+ * </MegaMenu>
+ *
+ * @bestPractice Use it in a shell whose chrome is lifted (`Sidebar header`, the fixed `SidebarLayoutHeader`): the panel fills the window from the top, beneath the chrome, so the brand row, search and actions stay on top of it.
+ * @bestPractice Keep it to navigation. Every entry is a `MegaMenuLink`, which closes the menu as it navigates; actions belong in a `DropdownMenu`.
+ * @category navigation
+ */
+export declare const MegaMenu: ({ modal, ...props }: MegaMenuProps) => import("react").JSX.Element;
+/**
+ * The header control that opens the menu. Render the header's own button
+ * through `render` so it matches the controls beside it.
+ */
+export declare const MegaMenuTrigger: (props: ComponentProps<typeof PopoverTrigger>) => import("react").JSX.Element;

package/dist/compositions/mega-menu/mega-menu-root.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover, PopoverTrigger, } from "@instruments/materia-ui/components/popover";
+import { useRef } from "react";
+import { MegaMenuCloseContext } from "./mega-menu-context.js";
+/**
+ * A header's full-width menu of catalogue sections: a trigger in the header
+ * opens a sheet beneath the shell's chrome, over a dimmed sidebar and page.
+ * It opens on a press, not on hover; Escape, a press on the page or choosing
+ * a link closes it, and focus returns to the trigger. Modal by default, so the
+ * page behind it is blocked and does not scroll.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ *
+ * @example
+ * <MegaMenu>
+ *   <MegaMenuTrigger render={<Button icon={LayoutGrid}>Products</Button>} />
+ *   <MegaMenuContent aria-label="Product categories">
+ *     <MegaMenuLink href="/products" lead>View all products</MegaMenuLink>
+ *     <MegaMenuSection href="/materials" title="Materials">
+ *       <MegaMenuLink href="/coatings">Coatings</MegaMenuLink>
+ *     </MegaMenuSection>
+ *   </MegaMenuContent>
+ * </MegaMenu>
+ *
+ * @bestPractice Use it in a shell whose chrome is lifted (`Sidebar header`, the fixed `SidebarLayoutHeader`): the panel fills the window from the top, beneath the chrome, so the brand row, search and actions stay on top of it.
+ * @bestPractice Keep it to navigation. Every entry is a `MegaMenuLink`, which closes the menu as it navigates; actions belong in a `DropdownMenu`.
+ * @category navigation
+ */
+export const MegaMenu = ({ modal = true, ...props }) => {
+    // A link closes the menu through Base UI's own close action as it
+    // navigates, so it stays a link rather than becoming a close button.
+    const actions = useRef(null);
+    return (_jsx(MegaMenuCloseContext, { value: () => actions.current?.close(), children: _jsx(Popover, { actionsRef: actions, "data-component": "mega-menu", modal: modal, ...props }) }));
+};
+/**
+ * The header control that opens the menu. Render the header's own button
+ * through `render` so it matches the controls beside it.
+ */
+export const MegaMenuTrigger = (props) => (_jsx(PopoverTrigger, { "data-component": "mega-menu-trigger", "data-slot": "mega-menu-trigger", ...props }));

package/dist/compositions/mega-menu/mega-menu-section.d.ts

@@ -0,0 +1,29 @@
+import { Anchor } from "@instruments/materia-ui/components/anchor";
+import { Stack } from "@instruments/materia-ui/components/stack";
+import type { ComponentProps, ReactNode } from "react";
+type AnchorProps = ComponentProps<typeof Anchor>;
+export interface MegaMenuLinkProps extends Omit<AnchorProps, "icon" | "suffixIcon" | "variant"> {
+    /** The "view all" link that opens the menu, set larger across its top. @default false */
+    lead?: boolean;
+}
+/**
+ * A link in the menu. Choosing it closes the menu as it navigates. Pass
+ * `render` for a router link.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ */
+export declare const MegaMenuLink: ({ className, lead, ...props }: MegaMenuLinkProps) => import("react").JSX.Element;
+export interface MegaMenuSectionProps extends Omit<ComponentProps<typeof Stack>, "as" | "children" | "title"> {
+    /** The section's own page, which its heading links to. */
+    href: string;
+    /** The section's name, shown as its heading. */
+    title: string;
+    /** Its `MegaMenuLink`s, one per category. */
+    children: ReactNode;
+}
+/**
+ * One column of the menu: a heading that links to the section's page, then a
+ * list of its categories.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ */
+export declare const MegaMenuSection: ({ children, className, href, title, ...props }: MegaMenuSectionProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/mega-menu/mega-menu-section.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor } from "@instruments/materia-ui/components/anchor";
+import { Box } from "@instruments/materia-ui/components/box";
+import { Heading } from "@instruments/materia-ui/components/heading";
+import { Stack } from "@instruments/materia-ui/components/stack";
+import { ChevronRight } from "@instruments/materia-ui/icons";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useId } from "react";
+import { MegaMenuListContext, useInMegaMenuList, useMegaMenuClose, } from "./mega-menu-context.js";
+// The weight and colour of each kind of link. A lead or heading link is
+// foreground with a quiet chevron; a category is muted until it is hovered.
+const LEAD = "text-paragraph-lg font-medium";
+const HEADING = "text-paragraph font-medium";
+const ITEM = "text-paragraph-sm text-muted-foreground hover:text-foreground hover:no-underline transition-colors";
+// A link that closes the menu as it navigates, so it stays a link rather than
+// becoming a close button.
+const ClosingLink = ({ className, onClick, ...props }) => {
+    const close = useMegaMenuClose();
+    return (_jsx(Anchor, { className: cn("[&_svg]:text-muted-foreground inline-flex min-h-11 items-center gap-1", className), "data-component": "mega-menu-link", "data-slot": "mega-menu-link", onClick: (event) => {
+            onClick?.(event);
+            close();
+        }, variant: "plain", ...props }));
+};
+/**
+ * A link in the menu. Choosing it closes the menu as it navigates. Pass
+ * `render` for a router link.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ */
+export const MegaMenuLink = ({ className, lead = false, ...props }) => {
+    const inList = useInMegaMenuList();
+    if (lead) {
+        return (_jsx(Box, { className: "col-span-full", "data-slot": "mega-menu-lead", children: _jsx(ClosingLink, { className: cn(LEAD, className), suffixIcon: ChevronRight, ...props }) }));
+    }
+    const link = _jsx(ClosingLink, { className: cn(ITEM, className), ...props });
+    return inList ? _jsx(Box, { as: "li", children: link }) : link;
+};
+/**
+ * One column of the menu: a heading that links to the section's page, then a
+ * list of its categories.
+ * Import from "@instruments/materia-ui/compositions/mega-menu".
+ */
+export const MegaMenuSection = ({ children, className, href, title, ...props }) => {
+    const headingId = useId();
+    return (_jsxs(Stack, { "aria-labelledby": headingId, as: "section", className: cn("min-w-0", className), "data-component": "mega-menu-section", "data-slot": "mega-menu-section", gap: "none", ...props, children: [_jsx(Heading, { id: headingId, level: "2", size: "paragraph-lg", children: _jsx(ClosingLink, { className: HEADING, href: href, suffixIcon: ChevronRight, children: title }) }), _jsx(Stack, { as: "ul", gap: "none", children: _jsx(MegaMenuListContext, { value: true, children: children }) })] }));
+};

package/dist/compositions/mega-menu.d.ts

@@ -0,0 +1,3 @@
+export { MegaMenuContent, type MegaMenuContentProps, } from "./mega-menu/mega-menu-content.js";
+export { MegaMenu, type MegaMenuProps, MegaMenuTrigger, } from "./mega-menu/mega-menu-root.js";
+export { MegaMenuLink, type MegaMenuLinkProps, MegaMenuSection, type MegaMenuSectionProps, } from "./mega-menu/mega-menu-section.js";

package/dist/compositions/mega-menu.js

@@ -0,0 +1,3 @@
+export { MegaMenuContent, } from "./mega-menu/mega-menu-content.js";
+export { MegaMenu, MegaMenuTrigger, } from "./mega-menu/mega-menu-root.js";
+export { MegaMenuLink, MegaMenuSection, } from "./mega-menu/mega-menu-section.js";