@musecat/uikit 0.1.1

package/packages/Components/Profile/Profile.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import Divider from "@/packages/Components/Divider/Divider";
+import Icon from "@/packages/Components/Icon/Icon";
+import { getProfileAvatarIconProps } from "@/packages/Components/Profile/Profile.shared";
+import type {
+  ProfileProps,
+  ProfileRole,
+  ProfileSizeOptions,
+} from "@/packages/Components/Profile/Profile.types";
+import Text from "@/packages/Components/Text/Text";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import View from "@/packages/Frameworks/View/View";
+
+type ResolvedProfileSize = Required<
+  Pick<ProfileSizeOptions, "avatar" | "textType" | "badge" | "gap">
+> &
+  Pick<ProfileSizeOptions, "textSize"> & {
+    fallbackPadding: number | string;
+  };
+
+function resolveProfileSize(size?: ProfileSizeOptions): ResolvedProfileSize {
+  const avatar = size?.avatar ?? 20;
+
+  return {
+    avatar,
+    textType: size?.textType ?? "Subheadline",
+    textSize: size?.textSize,
+    badge: size?.badge ?? 16,
+    gap: size?.gap ?? 4,
+    fallbackPadding: size?.fallbackPadding ?? 6,
+  };
+}
+
+function ProfileCertifiedBadge({
+  certifiedAt,
+  role,
+  size,
+}: {
+  certifiedAt?: string;
+  role?: ProfileRole;
+  size: number;
+}) {
+  return (
+    <Icon
+      icon="iCheckCircle"
+      iconFill
+      size={size}
+      color={role?.color ?? (certifiedAt ? "Blue3" : undefined)}
+    />
+  );
+}
+
+function ProfileMetaList({
+  joinedAtText,
+  roles,
+}: {
+  joinedAtText?: string;
+  roles?: ProfileRole[];
+}) {
+  const items = [];
+  if (joinedAtText) {
+    items.push({
+      key: `joined-${joinedAtText}`,
+      icon: "iDateNote",
+      text: joinedAtText,
+    });
+  }
+
+  if (roles) {
+    for (const r of roles) {
+      items.push({
+        key: `role-${r.label}`,
+        icon: r.icon ?? "iCheckCircle",
+        iconFill: r.iconFill ?? true,
+        text: r.label,
+        color: r.color,
+      });
+    }
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <View padding={[8, 12]}>
+      <View column gap={4}>
+        {items.map((item) => (
+          <View key={item.key} alignItems="center" gap={4}>
+            <Icon
+              icon={item.icon}
+              iconFill={item.iconFill}
+              color={item.color}
+              size={18}
+            />
+            <Text type="Caption1" verticalTrim>
+              {item.text}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+function ProfilePopoverReportButton({
+  href,
+  onClick,
+  reportLabel,
+}: {
+  href?: string;
+  onClick?: () => void;
+  reportLabel?: string;
+}) {
+  const label = reportLabel || "Report";
+
+  return (
+    <Icon
+      icon="iWarning"
+      box
+      size={20}
+      boxOptions={{ padding: 4 }}
+      themePreset="RedSoft"
+      pressable={{
+        title: label,
+        "aria-label": label,
+        href,
+        onClick,
+      }}
+    />
+  );
+}
+
+function ProfileInlineContent({
+  size,
+  displayName,
+  username,
+  extended,
+  isCertified,
+  certifiedAt,
+  primaryRole,
+  avatarIconProps,
+}: {
+  size: ResolvedProfileSize;
+  displayName: string;
+  username?: string;
+  extended?: boolean;
+  isCertified?: boolean;
+  certifiedAt?: string;
+  primaryRole?: ProfileRole;
+  avatarIconProps: ReturnType<typeof getProfileAvatarIconProps>;
+}) {
+  return (
+    <View alignItems="center" gap={size.gap}>
+      <Icon {...avatarIconProps} />
+      <View gap={4} alignItems="center">
+        <View gap={4} alignItems="center">
+          <Text
+            type={size.textType}
+            size={size.textSize}
+            verticalTrim
+            style={{
+              whiteSpace: "nowrap",
+            }}
+          >
+            {displayName}
+          </Text>
+          {isCertified || primaryRole ? (
+            <ProfileCertifiedBadge
+              certifiedAt={certifiedAt}
+              role={primaryRole}
+              size={size.badge}
+            />
+          ) : null}
+        </View>
+        {extended && username ? (
+          <Text type="Caption1" verticalTrim opacity={0.6}>
+            @{username}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function ProfilePopoverContent({
+  profileHref,
+  displayName,
+  displayUsername,
+  displayBio,
+  hasAvatar,
+  popoverAvatarIconProps,
+  isCertified,
+  certifiedAt,
+  primaryRole,
+  canReport,
+  reportHref,
+  reportLabel,
+  onReport,
+  joinedAtText,
+  roles,
+  "data-color-mode": dataColorMode,
+}: {
+  profileHref?: string | null;
+  displayName: string;
+  displayUsername?: string;
+  displayBio?: string;
+  hasAvatar: boolean;
+  popoverAvatarIconProps: ReturnType<typeof getProfileAvatarIconProps>;
+  isCertified?: boolean;
+  certifiedAt?: string;
+  primaryRole?: ProfileRole;
+  canReport?: boolean;
+  reportHref?: string | null;
+  reportLabel?: string;
+  onReport?: () => void;
+  joinedAtText?: string;
+  roles?: ProfileRole[];
+  "data-color-mode"?: string;
+}) {
+  const hasHeaderContent = Boolean(
+    displayName || displayUsername || displayBio || hasAvatar,
+  );
+
+  return (
+    <View fullWidth column gap={0} data-color-mode={dataColorMode}>
+      {hasHeaderContent ? (
+        <View fullWidth style={{ position: "relative" }}>
+          <Pressable
+            radius="regular"
+            fullWidth
+            column
+            gap={12}
+            padding={[8, 12]}
+            style={{ minWidth: 0, transition: "var(--transition-surface)" }}
+            href={profileHref || undefined}
+            data-color-mode={dataColorMode}
+          >
+            <Icon {...popoverAvatarIconProps} />
+            <View gap={12} column>
+              <View gap={6} column>
+                <View gap={6} alignItems="center">
+                  <Text type="Title1" weight={600} verticalTrim>
+                    {displayName}
+                  </Text>
+                  {isCertified || primaryRole ? (
+                    <ProfileCertifiedBadge
+                      certifiedAt={certifiedAt}
+                      role={primaryRole}
+                      size={22}
+                    />
+                  ) : null}
+                </View>
+                {displayUsername ? (
+                  <Text type="Subheadline" verticalTrim opacity={0.6}>
+                    @{displayUsername}
+                  </Text>
+                ) : null}
+              </View>
+              {displayBio ? (
+                <Text type="Footnote" opacity={0.6}>
+                  {displayBio}
+                </Text>
+              ) : null}
+            </View>
+          </Pressable>
+          {canReport ? (
+            <View
+              style={{
+                position: "absolute",
+                top: ".4rem",
+                right: ".4rem",
+                zIndex: 2,
+              }}
+            >
+              <ProfilePopoverReportButton
+                href={reportHref || undefined}
+                onClick={onReport}
+                reportLabel={reportLabel}
+              />
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+      <Divider />
+      <ProfileMetaList joinedAtText={joinedAtText} roles={roles} />
+    </View>
+  );
+}
+
+export default function Profile({
+  id,
+  displayName,
+  username,
+  avatarUrl,
+  avatarLoading,
+  bio,
+  isCertified,
+  certifiedAt,
+  roles,
+  joinedAtText,
+  profileHref,
+  canReport,
+  reportHref,
+  reportLabel,
+  onReport,
+  extended,
+  size,
+  popover,
+  "data-color-mode": dataColorMode,
+}: ProfileProps) {
+  const resolvedSize = resolveProfileSize(size);
+  const primaryRole = roles?.[0];
+
+  const avatarIconProps = getProfileAvatarIconProps({
+    avatar: avatarUrl,
+    avatarLoading,
+    size: resolvedSize.avatar,
+    fallbackPadding: resolvedSize.fallbackPadding,
+  });
+
+  const popoverAvatarIconProps = getProfileAvatarIconProps({
+    avatar: avatarUrl,
+    avatarLoading,
+    size: 64,
+    fallbackPadding: 12,
+  });
+
+  const resolvedPopover = popover
+    ? {
+        escapeExit: true,
+        minWidth: "24rem",
+        "data-color-mode": dataColorMode,
+        content: popover,
+      }
+    : profileHref
+      ? {
+          escapeExit: true,
+          minWidth: "24rem",
+          "data-color-mode": dataColorMode,
+          content: (
+            <ProfilePopoverContent
+              profileHref={profileHref}
+              displayName={displayName}
+              displayUsername={username}
+              displayBio={bio}
+              hasAvatar={Boolean(avatarUrl?.trim())}
+              popoverAvatarIconProps={popoverAvatarIconProps}
+              isCertified={isCertified}
+              certifiedAt={certifiedAt}
+              primaryRole={primaryRole}
+              canReport={canReport}
+              reportHref={reportHref}
+              reportLabel={reportLabel}
+              onReport={onReport}
+              joinedAtText={joinedAtText}
+              roles={roles}
+              data-color-mode={dataColorMode}
+            />
+          ),
+        }
+      : undefined;
+
+  return (
+    <Pressable
+      padding={[4, 6]}
+      style={{ transition: "var(--transition-surface)", margin: "-4px -6px" }}
+      data-color-mode={dataColorMode}
+      popover={resolvedPopover}
+    >
+      <ProfileInlineContent
+        size={resolvedSize}
+        displayName={displayName}
+        username={username}
+        extended={extended}
+        isCertified={isCertified}
+        certifiedAt={certifiedAt}
+        primaryRole={primaryRole}
+        avatarIconProps={avatarIconProps}
+      />
+    </Pressable>
+  );
+}

package/packages/Components/Profile/Profile.types.ts

@@ -0,0 +1,55 @@
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { ThemePaint } from "@/packages/Frameworks/Theme/Theme.types";
+
+export type ProfileAvatarLoading = "eager" | "lazy";
+
+export type ProfileRole = {
+  label: string;
+  color?: ThemePaint;
+  icon?: string;
+  iconFill?: boolean;
+};
+
+export interface ProfileAvatarOptions {
+  avatar?: string | null;
+  avatarLoading?: ProfileAvatarLoading;
+  size: number;
+  imageWidth?: UIKitSizeValue;
+  imageHeight?: UIKitSizeValue;
+  fallbackPadding?: UIKitSizeValue;
+  border?: IconProps["border"];
+  background?: IconProps["background"];
+}
+
+export type ProfileSizeOptions = {
+  avatar?: number;
+  textType?: TextProps["type"];
+  textSize?: UIKitSizeValue;
+  badge?: number;
+  gap?: UIKitSizeValue;
+  fallbackPadding?: UIKitSizeValue;
+};
+
+export interface ProfileProps {
+  "data-color-mode"?: string;
+  id?: string;
+  displayName: string;
+  username?: string;
+  avatarUrl?: string | null;
+  avatarLoading?: ProfileAvatarLoading;
+  bio?: string;
+  isCertified?: boolean;
+  certifiedAt?: string;
+  roles?: ProfileRole[];
+  joinedAtText?: string;
+  profileHref?: string | null;
+  canReport?: boolean;
+  reportHref?: string | null;
+  reportLabel?: string;
+  onReport?: () => void;
+  extended?: boolean;
+  size?: ProfileSizeOptions;
+  popover?: React.ReactNode;
+}

package/packages/Components/Progress/Progress.module.scss

@@ -0,0 +1,15 @@
+.Indicator {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--progress-percent, 0%);
+  min-width: 0;
+  height: 100%;
+  background: currentcolor;
+  transition: width 140ms linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Indicator {
+    transition: none;
+  }
+}

package/packages/Components/Progress/Progress.tsx

@@ -0,0 +1,88 @@
+import clsx from "clsx";
+import type { CSSProperties } from "react";
+import styles from "@/packages/Components/Progress/Progress.module.scss";
+import type { ProgressProps } from "@/packages/Components/Progress/Progress.types";
+import Spinner from "@/packages/Components/Spinner/Spinner";
+import { resolveThemeClasses } from "@/packages/Frameworks/Theme/Theme.types";
+import View from "@/packages/Frameworks/View/View";
+
+function clampValue(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function resolveProgressPercent(value: number, min: number, max: number) {
+  if (max <= min) return 0;
+  return ((clampValue(value, min, max) - min) / (max - min)) * 100;
+}
+
+export default function Progress({
+  value = 0,
+  min = 0,
+  max = 100,
+  indeterminate,
+  className,
+  style,
+  "data-color-mode": dataTheme,
+  "aria-hidden": ariaHidden,
+  "aria-label": ariaLabel,
+  background,
+  color,
+  trackClassName,
+  indicatorClassName,
+  radius,
+}: ProgressProps) {
+  if (indeterminate) {
+    return (
+      <Spinner
+        data-color-mode={dataTheme}
+        aria-hidden={ariaHidden}
+        aria-label={ariaLabel}
+        className={className}
+        style={style}
+      />
+    );
+  } else {
+    const resolvedValue = clampValue(value, min, max);
+    const resolvedPercent = resolveProgressPercent(resolvedValue, min, max);
+    const trackStyle = {
+      "--progress-percent": `${resolvedPercent}%`,
+    } as CSSProperties;
+    const trackThemeClasses = resolveThemeClasses({
+      background: background ?? "Base6TP6",
+    });
+    const indicatorThemeClasses = resolveThemeClasses({
+      color: color ?? "Base1",
+    });
+
+    return (
+      <View
+        data-color-mode={dataTheme}
+        role="progressbar"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={resolvedValue}
+        className={className}
+        style={style}
+        radius={radius ?? "Circle"}
+        fullWidth
+      >
+        <View
+          className={clsx(...trackThemeClasses, trackClassName)}
+          style={{ position: "relative", overflow: "hidden", ...trackStyle }}
+          radius={radius ?? "Circle"}
+          height={10}
+          fullWidth
+        >
+          <View
+            className={clsx(
+              styles.Indicator,
+              ...indicatorThemeClasses,
+              indicatorClassName,
+            )}
+            radius={radius ?? "Circle"}
+          />
+        </View>
+      </View>
+    );
+  }
+}

package/packages/Components/Progress/Progress.types.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from "react";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  ThemeBackgroundPaint,
+  ThemePaint,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface ProgressProps extends RadiusProps {
+  "data-color-mode"?: string;
+  "aria-hidden"?: boolean;
+  "aria-label"?: string;
+  className?: string;
+  style?: CSSProperties;
+  value?: number;
+  min?: number;
+  max?: number;
+  indeterminate?: boolean;
+  background?: ThemeBackgroundPaint;
+  color?: ThemePaint;
+  trackClassName?: string;
+  indicatorClassName?: string;
+}

package/packages/Components/Radio/Radio.module.scss

@@ -0,0 +1,11 @@
+.RadioWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: max-content;
+  background: transparent;
+
+  .Input {
+    display: none;
+  }
+}

package/packages/Components/Radio/Radio.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import styles from "@/packages/Components/Radio/Radio.module.scss";
+import type { RadioProps } from "@/packages/Components/Radio/Radio.types";
+import Text from "@/packages/Components/Text/Text";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+import View from "@/packages/Frameworks/View/View";
+
+export default function Radio({
+  title,
+  titleType,
+  titleSpaceBetween,
+  reversed,
+  readOnly,
+  border,
+  themePreset,
+  background,
+  color,
+  themeInteractive,
+  selected,
+  radius,
+  size,
+  ...props
+}: RadioProps) {
+  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);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!isControlled) return;
+    setInternalChecked(Boolean(props.checked));
+  }, [isControlled, props.checked]);
+
+  useEffect(() => {
+    const radioGroup = props.name
+      ? document.querySelectorAll(`input[type="radio"][name="${props.name}"]`)
+      : null;
+    if (!radioGroup) return;
+
+    const handleChange = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      if (target !== inputRef.current && target.checked) {
+        setInternalChecked(target.value === props.value);
+      }
+    };
+
+    radioGroup.forEach((radio) => {
+      radio.addEventListener("change", handleChange);
+    });
+
+    return () => {
+      radioGroup.forEach((radio) => {
+        radio.removeEventListener("change", handleChange);
+      });
+    };
+  }, [props.name, props.value]);
+
+  return (
+    <label
+      className={styles.RadioWrapper}
+      title={title}
+      style={{
+        gap: size ? `calc(${Size(size)} / 3)` : ".8rem",
+        justifyContent: titleSpaceBetween ? "space-between" : undefined,
+        width: titleSpaceBetween ? "100%" : undefined,
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="radio"
+        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"
+        border={border}
+        themePreset={
+          themePreset ?? (isChecked ? "ReversedUISecondary" : "UIPrimary")
+        }
+        background={background}
+        color={color}
+        themeInteractive={isInteractive}
+        selected={selected}
+        radius={radius ?? "Circle"}
+        width={size ?? 24}
+        height={size ?? 24}
+        data-disabled={props.disabled ? "true" : undefined}
+        data-readonly={readOnly ? "true" : undefined}
+        style={{
+          position: "relative",
+          order: reversed ? 1 : undefined,
+        }}
+      >
+        <View
+          themePreset="UIPrimary"
+          opacity={isChecked ? 1 : 0}
+          radius={radius ?? "Circle"}
+          width={typeof size === "number" ? size * 0.33 : ".8rem"}
+          height={typeof size === "number" ? size * 0.33 : ".8rem"}
+        />
+      </View>
+      {title && <Text type={titleType ?? "Subheadline"}>{title}</Text>}
+    </label>
+  );
+}