@musecat/uikit 0.1.1

package/packages/Components/Card/Card.foldable.tsx

@@ -0,0 +1,383 @@
+"use client";
+
+import clsx from "clsx";
+import { animate, useMotionValue } from "motion/react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useInBoxContent } from "@/packages/Components/Box/Box";
+import styles from "@/packages/Components/Card/Card.module.scss";
+import type { CardFoldableProps } from "@/packages/Components/Card/Card.types";
+import { resolveState } from "@/packages/Components/Card/Card.types";
+import { buildRenderKeys } from "@/packages/Components/Card/Card.utils";
+import Icon from "@/packages/Components/Icon/Icon";
+import Pill from "@/packages/Components/Pill/Pill";
+import Text from "@/packages/Components/Text/Text";
+import { normalizeCardIcon } from "@/packages/Components/Card/Card.utils";
+import StopParentInteraction from "@/packages/Frameworks/_shared/StopParentInteraction";
+import {
+  getComputedPixelValue,
+  SizePX,
+  type UIKitSizeValue,
+} from "@/packages/Frameworks/_shared/sizing";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
+import View from "@/packages/Frameworks/View/View";
+
+function useFoldProgress(
+  activated: boolean,
+  enabled: boolean,
+  duration = 0.28,
+) {
+  const [progress, setProgress] = useState(activated ? 1 : 0);
+  const mv = useMotionValue(activated ? 1 : 0);
+
+  useEffect(() => {
+    if (!enabled) {
+      setProgress(activated ? 1 : 0);
+      return;
+    }
+    const controls = animate(mv, activated ? 1 : 0, {
+      duration,
+      ease: [0.4, 0, 0.2, 1],
+      onUpdate: (value) => setProgress(value),
+    });
+    return () => controls.stop();
+  }, [activated, enabled, duration, mv]);
+
+  return enabled ? progress : activated ? 1 : 0;
+}
+
+const CARD_ACCORDION_EVENT = "uikit-card-accordion-change";
+
+type RadiusTupleValue = Extract<RadiusValue, readonly unknown[]>;
+
+const isRadiusArrayValue = (radius: RadiusValue): radius is RadiusTupleValue =>
+  Array.isArray(radius);
+
+const resolveFoldableHeaderRadius = (
+  radius: RadiusValue | undefined,
+  activated: boolean,
+): RadiusValue => {
+  if (!activated) return radius ?? "Regular";
+  if (!radius) return ["Regular", "Regular", "None", "None"];
+
+  if (isRadiusArrayValue(radius)) {
+    return [radius[0] ?? "Regular", radius[1] ?? radius[0], "None", "None"];
+  }
+
+  return [radius, radius, "None", "None"];
+};
+
+const resolveFoldableBodyRadius = (
+  radius: RadiusValue | undefined,
+): RadiusValue => {
+  if (!radius) return ["None", "None", "Regular", "Regular"];
+
+  if (isRadiusArrayValue(radius)) {
+    return [
+      "None",
+      "None",
+      radius[2] ?? radius[0] ?? "Regular",
+      radius[3] ?? radius[1] ?? radius[0] ?? "Regular",
+    ];
+  }
+
+  return ["None", "None", radius, radius];
+};
+
+export default function CardFoldable({
+  themePreset,
+  background,
+  color,
+  border,
+  shadow,
+  contained,
+  radius,
+  pressable,
+  style,
+  className,
+  title,
+  caption,
+  icon,
+  arrow,
+  pill,
+  customRight,
+  customRightAllowDefault,
+  accordion,
+  children,
+  "data-color-mode": dataTheme,
+}: CardFoldableProps) {
+  const shouldBlockHostDefault = Boolean(pressable) && !customRightAllowDefault;
+  const inBoxContent = useInBoxContent();
+  const resolvedContained = contained ?? !inBoxContent;
+  const resolvedIcon = normalizeCardIcon(icon);
+  const pillItems = Array.isArray(pill) ? pill : pill ? [pill] : [];
+  const pillKeys = buildRenderKeys(
+    pillItems,
+    (pillItem, index) =>
+      pillItem.renderKey ||
+      [
+        pillItem.pressable?.href,
+        pillItem.icon?.icon,
+        pillItem.icon?.svg,
+        pillItem.rightIcon?.icon,
+        index,
+      ]
+        .filter(Boolean)
+        .join("-"),
+  );
+
+  const [activated, setActivated] = useState(
+    accordion.activated ?? accordion.defaultActivated ?? false,
+  );
+  const {
+    name: accordionName,
+    value: accordionValue,
+    onActivatedChange,
+  } = accordion;
+  const animateRadius = accordion.animateRadius ?? true;
+
+  const {
+    disabled: pressableDisabled,
+    onClick: pressableOnClick,
+    ...restPressable
+  } = pressable ?? {};
+  const isInteractionDisabled = Boolean(pressableDisabled);
+
+  const headerRef = useRef<HTMLElement | null>(null);
+  const [_measuredR, setMeasuredR] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (!animateRadius || !headerRef.current) return;
+    const val = getComputedPixelValue(headerRef.current, "borderTopLeftRadius");
+    if (val !== undefined && val > 0) setMeasuredR(val);
+  }, [animateRadius]);
+
+  useEffect(() => {
+    if (accordion.activated === undefined) return;
+    setActivated(accordion.activated);
+  }, [accordion.activated]);
+
+  useEffect(() => {
+    const { name, value, onActivatedChange } = accordion;
+    if (!name || !value) return;
+
+    const handleAccordionChange = (event: Event) => {
+      const detail =
+        (
+          event as CustomEvent<{
+            name?: string;
+            value?: string;
+          }>
+        ).detail ?? {};
+
+      if (detail.name !== name || detail.value === value) return;
+
+      queueMicrotask(() => {
+        setActivated(false);
+        onActivatedChange?.(false);
+      });
+    };
+
+    window.addEventListener(CARD_ACCORDION_EVENT, handleAccordionChange);
+    return () => {
+      window.removeEventListener(CARD_ACCORDION_EVENT, handleAccordionChange);
+    };
+  }, [accordion]);
+
+  const resolvedTitle = resolveState(title, activated);
+  const resolvedCaption = resolveState(caption, activated);
+  const resolvedThemePreset = resolveState(themePreset, activated);
+  const showCaption = Boolean(resolvedCaption);
+  const showTitleGroup = Boolean(resolvedTitle) || showCaption;
+
+  const progress = useFoldProgress(activated, animateRadius);
+
+  const radiusUnit = isRadiusArrayValue(radius ?? "Regular")
+    ? (radius as RadiusTupleValue)[0]
+    : (radius as UIKitSizeValue | undefined);
+  const cornerUnit = SizePX(radiusUnit as UIKitSizeValue | undefined, 8);
+  const _headerRadius: RadiusValue = animateRadius
+    ? ([
+        cornerUnit,
+        cornerUnit,
+        cornerUnit * (1 - progress),
+        cornerUnit * (1 - progress),
+      ] as RadiusValue)
+    : resolveFoldableHeaderRadius(radius, activated);
+  const _bodyRadius = resolveFoldableBodyRadius(radius);
+
+  const handleToggle = (event: React.MouseEvent) => {
+    pressableOnClick?.(event);
+    if (isInteractionDisabled) return;
+
+    setActivated((prev) => {
+      const nextActivated = !prev;
+      onActivatedChange?.(nextActivated);
+
+      if (nextActivated && accordionName && accordionValue) {
+        window.dispatchEvent(
+          new CustomEvent(CARD_ACCORDION_EVENT, {
+            detail: {
+              name: accordionName,
+              value: accordionValue,
+            },
+          }),
+        );
+      }
+
+      return nextActivated;
+    });
+  };
+
+  return (
+    <View
+      column
+      gap={0}
+      data-color-mode={dataTheme}
+      radius={radius ?? "Regular"}
+      themePreset={
+        resolveState(themePreset, activated) ??
+        (activated ? "BaseFull" : "UIPrimary")
+      }
+      background={resolveState(background, activated)}
+      color={resolveState(color, activated)}
+      selected={activated}
+      disabled={isInteractionDisabled}
+      border={border}
+      shadow={shadow}
+      style={{ overflow: "hidden" }}
+    >
+      {}
+      <Pressable
+        gap={12}
+        alignItems="center"
+        justifyContent="space-between"
+        data-color-mode={dataTheme}
+        {...restPressable}
+        onClick={handleToggle}
+        fullWidth
+        className={clsx(
+          styles.Card,
+          resolvedContained && styles.Contained,
+          className,
+        )}
+        style={style}
+      >
+        <View gap={12} fullWidth style={{ minWidth: 0 }}>
+          {resolvedIcon && <Icon {...resolvedIcon} />}
+          {showTitleGroup && (
+            <View column justifyContent="center" gap={2} fullWidth>
+              {resolvedTitle && (
+                <Text type="Subheadline" weight={500}>
+                  {resolvedTitle}
+                </Text>
+              )}
+              {showCaption && (
+                <Text type="Footnote" opacity={0.6}>
+                  {resolvedCaption}
+                </Text>
+              )}
+            </View>
+          )}
+        </View>
+
+        <View gap={8}>
+          {pillItems.length > 0 && (
+            <StopParentInteraction
+              alignItems="center"
+              gap={6}
+              style={{ width: "max-content", maxWidth: "100%" }}
+              blockDefault={shouldBlockHostDefault}
+              data-stop-parent-interaction-state
+            >
+              {pillItems.map((pillItem, index) => (
+                <Pill
+                  key={pillKeys[index]}
+                  themePreset={
+                    pillItem.themePreset ? resolvedThemePreset : "BaseFull"
+                  }
+                  padding={8}
+                  {...pillItem}
+                />
+              ))}
+            </StopParentInteraction>
+          )}
+          {customRight && (
+            <StopParentInteraction
+              alignItems="center"
+              gap={12}
+              blockDefault={shouldBlockHostDefault}
+              data-stop-parent-interaction-state
+            >
+              {customRight}
+            </StopParentInteraction>
+          )}
+
+          {arrow &&
+            (() => {
+              if (typeof arrow === "boolean") {
+                return (
+                  <Icon
+                    icon={activated ? "iArrowKeyUp" : "iArrowKeyDown"}
+                    iconFill
+                    size={20}
+                    opacity={0.6}
+                  />
+                );
+              }
+              const { filled, degree, ...iconProps } = arrow;
+              return (
+                <Icon
+                  icon={activated ? "iArrowKeyUp" : "iArrowKeyDown"}
+                  iconFill
+                  size={18}
+                  {...iconProps}
+                  box={iconProps.box ?? true}
+                  boxOptions={iconProps.boxOptions ?? { padding: 6 }}
+                  background={iconProps.background}
+                  themePreset={
+                    filled
+                      ? iconProps.themePreset
+                        ? resolvedThemePreset
+                        : "BaseFull"
+                      : iconProps.themePreset
+                  }
+                  style={{
+                    transform: degree ? `rotate(${degree}deg)` : undefined,
+                    ...iconProps.style,
+                  }}
+                />
+              );
+            })()}
+        </View>
+      </Pressable>
+
+      <View
+        motion={{
+          initial: false,
+          animate: {
+            height: activated ? "auto" : 0,
+            opacity: activated ? 1 : 0,
+          },
+          transition: {
+            duration: 0.28,
+            ease: [0.4, 0, 0.2, 1],
+          },
+        }}
+        fullWidth
+      >
+        <View
+          column
+          gap={12}
+          className={clsx(
+            contained ? styles.containedInnerChildren : styles.InnerChildren,
+            accordion.innerClassName,
+          )}
+          style={accordion.innerStyle}
+        >
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+}

package/packages/Components/Card/Card.module.scss

@@ -0,0 +1,23 @@
+.Card {
+  padding: 1.2rem 1.6rem;
+
+  &.Contained {
+    padding: 1.6rem 2rem;
+
+    @media (max-width: 409.98px) {
+      padding: 1.2rem 1.6rem;
+    }
+  }
+}
+
+.containedInnerChildren {
+  padding: 1.6rem 2rem;
+
+  @media (max-width: 409.98px) {
+    padding: 1.2rem 1.6rem;
+  }
+}
+
+.InnerChildren {
+  padding: 1.2rem 1.6rem;
+}

package/packages/Components/Card/Card.tsx

@@ -0,0 +1,8 @@
+import type { CardProps } from "@/packages/Components/Card/Card.types";
+import CardDefault from "@/packages/Components/Card/Card.default";
+import CardFoldable from "@/packages/Components/Card/Card.foldable";
+
+export default function Card(props: CardProps) {
+  if (props.accordion) return <CardFoldable {...props} />;
+  return <CardDefault {...props} />;
+}

package/packages/Components/Card/Card.types.ts

@@ -0,0 +1,91 @@
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { PillProps } from "@/packages/Components/Pill/Pill.types";
+import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeBackgroundPaint,
+  ThemePaint,
+  ThemePreset,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export type Stateful<T> = T | { normal?: T; activated?: T };
+
+export function resolveState<T>(
+  value: Stateful<T> | undefined,
+  activated: boolean,
+): T | undefined {
+  if (value === undefined) return undefined;
+  if (
+    typeof value === "object" &&
+    value !== null &&
+    !Array.isArray(value) &&
+    ("normal" in value || "activated" in value)
+  ) {
+    return activated ? value.activated : value.normal;
+  }
+  return value as T;
+}
+
+export interface CardBaseProps extends BorderProps, RadiusProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  vertical?: boolean;
+  contained?: boolean;
+
+  pressable?: PressableProps;
+
+  title?: React.ReactNode;
+  caption?: React.ReactNode;
+  titleReversed?: boolean;
+
+  icon?: IconProps;
+
+  arrow?:
+    | (IconProps & {
+        filled?: boolean;
+        degree?: 0 | 90 | 180 | 270;
+      })
+    | boolean;
+
+  pill?: PillProps[] | PillProps;
+
+  customRight?: React.ReactNode;
+  customRightAllowDefault?: boolean;
+}
+
+export interface CardDefaultProps extends CardBaseProps, ThemeSystemProps {
+  title?: React.ReactNode;
+  caption?: React.ReactNode;
+  accordion?: never;
+}
+
+export interface CardAccordionProps {
+  name?: string;
+  value?: string;
+  activated?: boolean;
+  defaultActivated?: boolean;
+  onActivatedChange?: (activated: boolean) => void;
+  innerClassName?: string;
+  innerStyle?: React.CSSProperties;
+  animateRadius?: boolean;
+}
+
+export interface CardFoldableProps
+  extends Omit<
+      CardBaseProps,
+      "title" | "caption" | "titleReversed" | "vertical"
+    >,
+    Omit<ThemeSystemProps, "themePreset" | "color" | "background"> {
+  children?: React.ReactNode;
+  accordion: CardAccordionProps;
+  themePreset?: Stateful<ThemePreset>;
+  color?: Stateful<ThemePaint>;
+  background?: Stateful<ThemeBackgroundPaint>;
+  title?: Stateful<React.ReactNode>;
+  caption?: Stateful<React.ReactNode>;
+}
+
+export type CardProps = CardDefaultProps | CardFoldableProps;

package/packages/Components/Card/Card.utils.ts

@@ -0,0 +1,66 @@
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+
+const DEFAULT_CARD_BOX_ICON_OUTER_SIZE = 40;
+
+export function normalizeCardIcon(icon?: IconProps) {
+  if (!icon) {
+    return undefined;
+  }
+
+  const hasExplicitSize =
+    icon.size !== undefined ||
+    icon.width !== undefined ||
+    icon.height !== undefined;
+  const normalizedIcon =
+    !icon.box && !hasExplicitSize
+      ? {
+          ...icon,
+          size: 20,
+        }
+      : icon;
+
+  if (!normalizedIcon.box || !normalizedIcon.image) return normalizedIcon;
+
+  const hasDirectionalPadding =
+    normalizedIcon.boxOptions?.paddingHorizontal !== undefined ||
+    normalizedIcon.boxOptions?.paddingVertical !== undefined;
+  if (hasDirectionalPadding) return normalizedIcon;
+
+  const contentSize =
+    typeof normalizedIcon.width === "number"
+      ? normalizedIcon.width
+      : typeof normalizedIcon.height === "number"
+        ? normalizedIcon.height
+        : typeof normalizedIcon.size === "number"
+          ? normalizedIcon.size
+          : 24;
+
+  const shouldNormalizePadding =
+    normalizedIcon.boxOptions?.padding === undefined;
+  if (!shouldNormalizePadding) return normalizedIcon;
+
+  return {
+    ...normalizedIcon,
+    boxOptions: {
+      ...normalizedIcon.boxOptions,
+      padding: Math.max(
+        0,
+        (DEFAULT_CARD_BOX_ICON_OUTER_SIZE - contentSize) / 2,
+      ),
+    },
+  };
+}
+
+export const buildRenderKeys = <T>(
+  items: T[],
+  resolveBase: (item: T, index: number) => string,
+): string[] => {
+  const counts = new Map<string, number>();
+
+  return items.map((item, index) => {
+    const base = resolveBase(item, index) || "item";
+    const nextCount = (counts.get(base) ?? 0) + 1;
+    counts.set(base, nextCount);
+    return `${base}-${nextCount}`;
+  });
+};

package/packages/Components/Checkbox/Checkbox.module.scss

@@ -0,0 +1,11 @@
+.CheckboxWrapper {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  background: transparent;
+
+  .Input {
+    display: none;
+  }
+}

package/packages/Components/Checkbox/Checkbox.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "@/packages/Components/Checkbox/Checkbox.module.scss";
+import type { CheckboxProps } from "@/packages/Components/Checkbox/Checkbox.types";
+import Icon from "@/packages/Components/Icon/Icon";
+import Text from "@/packages/Components/Text/Text";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+import View from "@/packages/Frameworks/View/View";
+
+export default function Checkbox({
+  title,
+  titleType,
+  titleSpaceBetween,
+  reversed,
+  readOnly,
+  "data-color-mode": dataTheme,
+  size,
+  radius,
+  border,
+  themePreset,
+  background,
+  color,
+  themeInteractive,
+  selected,
+  ...props
+}: CheckboxProps) {
+  const isControlled = props.checked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(
+    Boolean(props.defaultChecked),
+  );
+  const isChecked = isControlled ? Boolean(props.checked) : internalChecked;
+  const isInteractive = themeInteractive ?? (!readOnly && !props.disabled);
+
+  useEffect(() => {
+    if (!isControlled) return;
+    setInternalChecked(Boolean(props.checked));
+  }, [isControlled, props.checked]);
+
+  return (
+    <label
+      className={styles.CheckboxWrapper}
+      data-color-mode={dataTheme}
+      title=""
+      style={{
+        gap: size ? `calc(${Size(size)} / 3)` : ".8rem",
+        justifyContent: titleSpaceBetween ? "space-between" : undefined,
+        width: titleSpaceBetween ? "100%" : undefined,
+      }}
+    >
+      <input
+        type="checkbox"
+        readOnly={readOnly}
+        className={styles.Input}
+        aria-checked={isChecked}
+        {...props}
+        checked={isControlled ? props.checked : undefined}
+        defaultChecked={isControlled ? undefined : props.defaultChecked}
+        onChange={(event) => {
+          if (!isControlled) {
+            setInternalChecked(event.currentTarget.checked);
+          }
+          props.onChange?.(event);
+        }}
+      />
+      <View
+        alignItems="center"
+        justifyContent="center"
+        width={size ?? 24}
+        height={size ?? 24}
+        border={border}
+        radius={radius ?? "ExtraLight"}
+        themePreset={
+          themePreset ?? (isChecked ? "ReversedUISecondary" : "UIPrimary")
+        }
+        background={background}
+        color={color}
+        themeInteractive={isInteractive}
+        selected={selected}
+        data-disabled={props.disabled ? "true" : undefined}
+        data-readonly={readOnly ? "true" : undefined}
+        style={{
+          position: "relative",
+          order: reversed ? 1 : undefined,
+        }}
+      >
+        <Icon
+          icon="iCheck"
+          weight={700}
+          size={typeof size === "number" ? size * 0.75 : 20}
+          opacity={isChecked ? 1 : 0}
+        />
+      </View>
+      {title && (
+        <Text
+          style={{ minWidth: 0, flex: 1 }}
+          type={titleType ?? "Subheadline"}
+        >
+          {title}
+        </Text>
+      )}
+    </label>
+  );
+}