@music-vine/cadence 0.1.0

package/dist/components/stacking-card.js

@@ -0,0 +1,636 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { motion } from "motion/react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { DummyCheckbox } from "./checkbox";
+import { Separator } from "./separator";
+import { List, ListItem } from "./typography/list";
+import { Text } from "./typography/text";
+const motionTransition = {
+  duration: 0.4,
+  type: "spring",
+  bounce: 0
+};
+const motionVariantsChevron = {
+  collapsed: {
+    rotate: 0,
+    transition: motionTransition
+  },
+  expanded: {
+    rotate: 180,
+    transition: motionTransition
+  }
+};
+const useAutoHeight = () => {
+  const [height, setHeight] = React.useState("auto");
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setHeight(entry.contentRect.height);
+      }
+    });
+    resizeObserver.observe(ref.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const variants = React.useMemo(
+    () => ({
+      collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: motionTransition
+      },
+      expanded: {
+        height: height === "auto" ? "auto" : height,
+        opacity: 1,
+        transition: motionTransition
+      }
+    }),
+    [height]
+  );
+  return { ref, variants };
+};
+const StackingCardGroupContext = React.createContext(null);
+const useStackingCardGroup = () => {
+  const context = React.useContext(StackingCardGroupContext);
+  return context;
+};
+const StackingCardContext = React.createContext({});
+const useStackingCard = () => {
+  const context = React.useContext(StackingCardContext);
+  return context;
+};
+function StackingCard({
+  className,
+  children,
+  selectable = false,
+  selected = false,
+  onSelectedChange,
+  variant,
+  onClick,
+  value,
+  onKeyDown,
+  initiallyCollapsed = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  ref,
+  ...props
+}) {
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const [hasCollapsibleContent, setHasCollapsibleContent] = React.useState(false);
+  const [wasSelected, setWasSelected] = React.useState(false);
+  const ignoreInitiallyCollapsedAfterRenderRef = React.useRef(false);
+  const timeoutRef = React.useRef(null);
+  const cardId = React.useId();
+  const contentId = `${cardId}-content`;
+  const group = useStackingCardGroup();
+  const isInGroup = group !== null;
+  const isSelected = isInGroup ? group.selectedValue === value : variant === "selected" || selected;
+  const justBecameSelected = isSelected && !wasSelected;
+  if (justBecameSelected && hasCollapsibleContent) {
+    if (isInGroup) {
+      group?.onExpandedChange?.(value ?? null);
+    } else {
+      setIsCollapsed(false);
+    }
+  }
+  if (isSelected !== wasSelected) {
+    setWasSelected(isSelected);
+  }
+  let shouldBeCollapsed = isCollapsed;
+  if (initiallyCollapsed && !ignoreInitiallyCollapsedAfterRenderRef.current) {
+    shouldBeCollapsed = true;
+  } else if (isInGroup) {
+    shouldBeCollapsed = group.expandedValue !== value;
+  }
+  const ignoreInitiallyCollapsedRef = React.useCallback(() => {
+    if (initiallyCollapsed && !ignoreInitiallyCollapsedAfterRenderRef.current) {
+      ignoreInitiallyCollapsedAfterRenderRef.current = true;
+    }
+  }, [initiallyCollapsed]);
+  const handleSelect = React.useCallback(() => {
+    if (selectable) {
+      if (isInGroup && value) {
+        group?.onValueChange?.(value);
+      } else if (!isInGroup && onSelectedChange) {
+        onSelectedChange(!selected);
+      }
+    }
+  }, [selectable, isInGroup, value, onSelectedChange, group, selected]);
+  const handleToggleCollapse = React.useCallback(() => {
+    if (isInGroup) {
+      group?.onExpandedChange?.(
+        group.expandedValue === value ? null : value ?? null
+      );
+    } else {
+      setIsCollapsed(!isCollapsed);
+    }
+  }, [isInGroup, group, value, isCollapsed]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      ignoreInitiallyCollapsedRef();
+      if (selectable && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        handleSelect();
+      }
+      onKeyDown?.(e);
+    },
+    [selectable, handleSelect, onKeyDown, ignoreInitiallyCollapsedRef]
+  );
+  const handleClick = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      ignoreInitiallyCollapsedRef();
+      handleSelect();
+      if (isSelected) {
+        handleToggleCollapse();
+      }
+      onClick?.(e);
+    },
+    [
+      handleSelect,
+      onClick,
+      isSelected,
+      handleToggleCollapse,
+      ignoreInitiallyCollapsedRef
+    ]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      isSelected,
+      isCollapsed: shouldBeCollapsed,
+      selectable,
+      onSelectedChange,
+      onToggleCollapse: handleToggleCollapse,
+      setHasCollapsibleContent,
+      contentId
+    }),
+    [
+      isSelected,
+      shouldBeCollapsed,
+      selectable,
+      onSelectedChange,
+      handleToggleCollapse,
+      contentId
+    ]
+  );
+  const accessibleLabel = ariaLabel ?? (isInGroup ? `Option ${value}` : "Card");
+  const computeRole = () => {
+    if (isInGroup) {
+      return "radio";
+    }
+    if (selectable) {
+      return "button";
+    }
+    return void 0;
+  };
+  const cardRole = computeRole();
+  const combinedRef = React.useCallback(
+    (element) => {
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+      if (isInGroup && value && group?.registerCardRef) {
+        group.registerCardRef(value, element);
+      }
+    },
+    [ref, isInGroup, value, group]
+  );
+  React.useEffect(() => {
+    if (initiallyCollapsed && !ignoreInitiallyCollapsedAfterRenderRef.current) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        ignoreInitiallyCollapsedAfterRenderRef.current = true;
+      }, 1500);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [initiallyCollapsed]);
+  return /* @__PURE__ */ jsx(StackingCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-checked": isInGroup ? isSelected : void 0,
+      "aria-describedby": ariaDescribedby,
+      "aria-expanded": hasCollapsibleContent ? !shouldBeCollapsed : void 0,
+      "aria-label": accessibleLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-pressed": !isInGroup && selectable ? isSelected : void 0,
+      className: cn(
+        "relative flex w-full min-w-64 max-w-96 flex-col overflow-hidden border border-solid",
+        "rounded-2xl shadow-sm transition-colors",
+        selectable && "cursor-pointer",
+        isSelected ? "border-gray-950 dark:border-white" : "border-gray-150 dark:border-gray-800",
+        "focus-visible:ring-pink-500 focus-visible:ring-offset-2",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: combinedRef,
+      role: cardRole,
+      style: props.style,
+      tabIndex: selectable ? 0 : void 0,
+      ...props,
+      children
+    },
+    value
+  ) });
+}
+function StackingCardHeader({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { selectable, isSelected } = useStackingCard();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-2 px-6 pt-4 pb-1",
+        isSelected && "bg-gray-100 dark:bg-gray-800",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+        selectable && /* @__PURE__ */ jsx(DummyCheckbox, { checked: isSelected, tabIndex: -1, variant: "rounded" }),
+        children
+      ] })
+    }
+  );
+}
+function StackingCardTitle({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      className: cn(
+        "font-sans font-semibold text-gray-950 text-sm leading-6 dark:text-white",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+}
+function StackingCardDescription({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      className: cn("text-gray-700 text-sm dark:text-gray-200", className),
+      ref,
+      ...props
+    }
+  );
+}
+const MotionChevron = ({ isCollapsed }) => /* @__PURE__ */ jsx(
+  motion.div,
+  {
+    animate: isCollapsed ? "collapsed" : "expanded",
+    className: "flex items-center justify-center",
+    initial: "collapsed",
+    variants: motionVariantsChevron,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 fill-none" })
+  }
+);
+function StackingCardContent({
+  className,
+  children,
+  collapsible = false,
+  minimal = false,
+  description,
+  ref,
+  ...props
+}) {
+  const {
+    isCollapsed,
+    isSelected,
+    onToggleCollapse,
+    setHasCollapsibleContent,
+    contentId
+  } = useStackingCard();
+  const { ref: autoHeightRef, variants: autoHeightVariants } = useAutoHeight();
+  React.useEffect(() => {
+    if (collapsible) {
+      setHasCollapsibleContent?.(true);
+    }
+    return () => {
+      setHasCollapsibleContent?.(false);
+    };
+  }, [collapsible, setHasCollapsibleContent]);
+  if (!collapsible) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-1.5 px-6 pt-0 pb-4",
+          isSelected && "bg-gray-100 dark:bg-gray-800",
+          className
+        ),
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between gap-2 px-6 pb-4",
+          isSelected && "bg-gray-100 dark:bg-gray-800"
+        ),
+        children: [
+          description ? /* @__PURE__ */ jsx("div", { className: "flex-1", children: description }) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1" }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "aria-controls": contentId,
+              "aria-expanded": !isCollapsed,
+              "aria-label": isCollapsed ? "Show details" : "Hide details",
+              borderRadius: "full",
+              className: cn(isSelected && "bg-white dark:bg-gray-900", "h-3"),
+              onClick: (e) => {
+                e.stopPropagation();
+                onToggleCollapse?.();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.stopPropagation();
+                }
+              },
+              size: "xs",
+              variant: "light",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn({ "sr-only": minimal }), children: "Details" }),
+                /* @__PURE__ */ jsx(MotionChevron, { isCollapsed: isCollapsed ?? false })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: isCollapsed ? "collapsed" : "expanded",
+        "aria-hidden": isCollapsed,
+        className: "overflow-hidden",
+        id: contentId,
+        initial: "collapsed",
+        variants: autoHeightVariants,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", ref: autoHeightRef, children: [
+          /* @__PURE__ */ jsx(
+            Separator,
+            {
+              className: cn(
+                "mt-0 mb-0",
+                isSelected ? "bg-gray-950 dark:bg-white" : "border-gray-150 dark:border-gray-800"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("flex flex-col gap-1.5", className),
+              ref,
+              ...props,
+              children
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function StackingCardList({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      className: cn("list-none px-6 pt-3 pb-5", className),
+      ref,
+      ...props,
+      children
+    }
+  );
+}
+const StackingCardCheck = React.memo(({ className, ...props }) => {
+  const { selectable, isSelected } = useStackingCard();
+  return /* @__PURE__ */ jsx(
+    Check,
+    {
+      className: cn(
+        "-mt-0.5 size-[14px] fill-none",
+        {
+          "text-current": !selectable,
+          "text-pink-500": isSelected && selectable,
+          "text-gray-950 dark:text-white": !isSelected && selectable
+        },
+        className
+      ),
+      ...props
+    }
+  );
+});
+StackingCardCheck.displayName = "StackingCardCheck";
+function StackingCardListItem({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ListItem,
+    {
+      className: cn(
+        "flex font-sans text-gray-700 text-sm first:mt-0 dark:text-gray-200",
+        className
+      ),
+      customBullet: /* @__PURE__ */ jsx(StackingCardCheck, {}),
+      ref,
+      ...props,
+      children
+    }
+  );
+}
+function StackingCardGroup({
+  className,
+  children,
+  value,
+  onValueChange,
+  defaultValue,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ref,
+  ...props
+}) {
+  const [internalSelectedValue, setInternalSelectedValue] = React.useState(
+    defaultValue ?? ""
+  );
+  const [internalExpandedValue, setInternalExpandedValue] = React.useState(defaultValue ?? null);
+  const [controlledExpandedValue, setControlledExpandedValue] = React.useState(value ?? null);
+  const effectiveSelectedValue = value !== void 0 ? value : internalSelectedValue;
+  const effectiveExpandedValue = value !== void 0 ? controlledExpandedValue : internalExpandedValue;
+  React.useEffect(() => {
+    if (value !== void 0) {
+      setControlledExpandedValue(value);
+    }
+  }, [value]);
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalSelectedValue(newValue);
+        setInternalExpandedValue(newValue);
+      } else {
+        setControlledExpandedValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, onValueChange]
+  );
+  const handleExpandedChange = React.useCallback(
+    (newExpandedValue) => {
+      if (value === void 0) {
+        setInternalExpandedValue(newExpandedValue);
+      } else {
+        setControlledExpandedValue(newExpandedValue);
+      }
+    },
+    [value]
+  );
+  const cardValues = React.useMemo(() => {
+    const values = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        const childValue = child.props.value;
+        if (typeof childValue === "string") {
+          values.push(childValue);
+        }
+      }
+    });
+    return values;
+  }, [children]);
+  const cardRefsRef = React.useRef(/* @__PURE__ */ new Map());
+  const registerCardRef = React.useCallback(
+    (cardValue, element) => {
+      if (element) {
+        cardRefsRef.current.set(cardValue, element);
+      } else {
+        cardRefsRef.current.delete(cardValue);
+      }
+    },
+    []
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (cardValues.length === 0) {
+        return;
+      }
+      const currentIndex = cardValues.indexOf(effectiveSelectedValue);
+      let nextIndex = currentIndex;
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          e.preventDefault();
+          nextIndex = currentIndex < cardValues.length - 1 ? currentIndex + 1 : 0;
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          e.preventDefault();
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : cardValues.length - 1;
+          break;
+        case "Home":
+          e.preventDefault();
+          nextIndex = 0;
+          break;
+        case "End":
+          e.preventDefault();
+          nextIndex = cardValues.length - 1;
+          break;
+        default:
+          return;
+      }
+      const nextValue = cardValues[nextIndex];
+      if (nextValue && nextValue !== effectiveSelectedValue) {
+        handleValueChange(nextValue);
+        setTimeout(() => {
+          const targetCard = cardRefsRef.current.get(nextValue);
+          targetCard?.focus();
+        }, 0);
+      }
+    },
+    [cardValues, effectiveSelectedValue, handleValueChange]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      selectedValue: effectiveSelectedValue,
+      expandedValue: effectiveExpandedValue,
+      onValueChange: handleValueChange,
+      onExpandedChange: handleExpandedChange,
+      registerCardRef
+    }),
+    [
+      effectiveSelectedValue,
+      effectiveExpandedValue,
+      handleValueChange,
+      handleExpandedChange,
+      registerCardRef
+    ]
+  );
+  const accessibleLabel = ariaLabel ?? "Select an option";
+  return /* @__PURE__ */ jsx(StackingCardGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": accessibleLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: cn("flex flex-col gap-4", className),
+      onKeyDown: handleKeyDown,
+      ref,
+      role: "radiogroup",
+      tabIndex: -1,
+      ...props,
+      children
+    }
+  ) });
+}
+export {
+  StackingCard,
+  StackingCardCheck,
+  StackingCardContent,
+  StackingCardDescription,
+  StackingCardGroup,
+  StackingCardHeader,
+  StackingCardList,
+  StackingCardListItem,
+  StackingCardTitle
+};
+//# sourceMappingURL=stacking-card.js.map