@musecat/uikit 0.1.1

package/packages/Components/Nav/hooks/useNavIndicator.ts

@@ -0,0 +1,137 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+export function useNavIndicator(
+  committedSelectedIndex: number,
+  isDraggingSelection: boolean,
+  isReleasingSelection: boolean,
+  itemRefs: React.MutableRefObject<(HTMLElement | null)[]>,
+  indicatorRef: React.RefObject<HTMLDivElement | null>,
+  navRef: React.RefObject<HTMLDivElement | null>,
+) {
+  const committedIndicatorStyleRef = useRef<React.CSSProperties | undefined>(
+    undefined,
+  );
+
+  const applyIndicatorStyle = useCallback(
+    (nextStyle?: React.CSSProperties) => {
+      const indicator = indicatorRef.current;
+      if (!indicator) return;
+
+      const left =
+        typeof nextStyle?.left === "number"
+          ? nextStyle.left
+          : Number(nextStyle?.left ?? 0);
+      const width =
+        typeof nextStyle?.width === "number"
+          ? nextStyle.width
+          : Number(nextStyle?.width ?? 0);
+      const opacity =
+        typeof nextStyle?.opacity === "number"
+          ? nextStyle.opacity
+          : Number(nextStyle?.opacity ?? 0);
+
+      indicator.style.transform = `translate3d(${left}px, 0, 0) scale(var(--nav-indicator-scale, 1))`;
+      indicator.style.width = `${width}px`;
+      indicator.style.opacity = `${opacity}`;
+    },
+    [indicatorRef],
+  );
+
+  useLayoutEffect(() => {
+    const el =
+      committedSelectedIndex >= 0
+        ? itemRefs.current[committedSelectedIndex]
+        : null;
+
+    if (el) {
+      const nextStyle = {
+        left: el.offsetLeft,
+        width: el.offsetWidth,
+        opacity: 1,
+      };
+      committedIndicatorStyleRef.current = nextStyle;
+
+      if (!isDraggingSelection && !isReleasingSelection) {
+        requestAnimationFrame(() => {
+          if (!isDraggingSelection && !isReleasingSelection) {
+            applyIndicatorStyle(nextStyle);
+          }
+        });
+      }
+    } else {
+      const nextStyle = { left: 0, width: 0, opacity: 0 };
+      committedIndicatorStyleRef.current = nextStyle;
+
+      if (!isDraggingSelection && !isReleasingSelection) {
+        requestAnimationFrame(() => {
+          if (!isDraggingSelection && !isReleasingSelection) {
+            applyIndicatorStyle(nextStyle);
+          }
+        });
+      }
+    }
+  }, [
+    applyIndicatorStyle,
+    committedSelectedIndex,
+    isDraggingSelection,
+    isReleasingSelection,
+    itemRefs,
+  ]);
+
+  useEffect(() => {
+    const syncCommittedIndicator = () => {
+      const el =
+        committedSelectedIndex >= 0
+          ? itemRefs.current[committedSelectedIndex]
+          : null;
+
+      if (el) {
+        const nextStyle = {
+          left: el.offsetLeft,
+          width: el.offsetWidth,
+          opacity: 1,
+        };
+        committedIndicatorStyleRef.current = nextStyle;
+
+        if (!isDraggingSelection && !isReleasingSelection) {
+          requestAnimationFrame(() => {
+            if (!isDraggingSelection && !isReleasingSelection) {
+              applyIndicatorStyle(nextStyle);
+            }
+          });
+        }
+      }
+    };
+
+    syncCommittedIndicator();
+    window.addEventListener("resize", syncCommittedIndicator);
+
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => syncCommittedIndicator())
+        : null;
+
+    if (resizeObserver) {
+      if (navRef.current) resizeObserver.observe(navRef.current);
+      itemRefs.current.forEach((item) => {
+        if (item) resizeObserver.observe(item);
+      });
+    }
+
+    return () => {
+      window.removeEventListener("resize", syncCommittedIndicator);
+      resizeObserver?.disconnect();
+    };
+  }, [
+    applyIndicatorStyle,
+    committedSelectedIndex,
+    isDraggingSelection,
+    isReleasingSelection,
+    itemRefs,
+    navRef,
+  ]);
+
+  return { applyIndicatorStyle, committedIndicatorStyleRef };
+}

package/packages/Components/Pagination/Pagination.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import { useTimeout } from "@musecat/functionkit";
+import { useEffect, useState } from "react";
+import { Word } from "@/i18n/shared";
+import Icon from "@/packages/Components/Icon/Icon";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { PaginationProps } from "@/packages/Components/Pagination/Pagination.types";
+import Text from "@/packages/Components/Text/Text";
+import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
+import View from "@/packages/Frameworks/View/View";
+
+function clampPage(page: number, total: number) {
+  return Math.min(total, Math.max(1, page));
+}
+
+const INPUT_COMMIT_DELAY_MS = 350;
+
+export default function Pagination({
+  page,
+  total,
+  onChange,
+  disabled = false,
+  previousLabel,
+  nextLabel,
+  navigationLabel,
+  getPageLabel,
+  className,
+  style,
+  themePreset,
+  background,
+  color,
+  themeInteractive,
+  border,
+  "data-color-mode": dataTheme,
+}: PaginationProps) {
+  const t = Word();
+  const safeTotal = Math.max(1, Math.trunc(total) || 1);
+  const safePage = clampPage(Math.trunc(page) || 1, safeTotal);
+  const resolvedPreviousLabel = previousLabel ?? t.UIKit.ui.previous;
+  const resolvedNextLabel = nextLabel ?? t.UIKit.ui.next;
+  const resolvedNavigationLabel = navigationLabel ?? t.UIKit.ui.pagination;
+  const resolvedGetPageLabel =
+    getPageLabel ??
+    ((value: number, isCurrent: boolean) =>
+      isCurrent
+        ? t.UIKit.ui.currentPage.replace("{value}", String(value))
+        : t.UIKit.ui.goToPageItem.replace("{value}", String(value)));
+  const firstPageLabel = resolvedGetPageLabel(1, safePage === 1);
+  const lastPageLabel = resolvedGetPageLabel(safeTotal, safePage === safeTotal);
+  const [inputValue, setInputValue] = useState(String(safePage));
+  const inputWidth = `${Math.max(inputValue.length, 1)}ch`;
+  const handleChange = (nextPage: number) => {
+    if (disabled) return;
+
+    const resolvedPage = clampPage(nextPage, safeTotal);
+    if (resolvedPage === safePage) return;
+    onChange?.(resolvedPage);
+  };
+
+  const inputCommitTimer = useTimeout(
+    () => {
+      const nextPage = Number.parseInt(inputValue, 10);
+      if (Number.isFinite(nextPage)) {
+        handleChange(nextPage);
+      }
+    },
+    INPUT_COMMIT_DELAY_MS,
+    { enabled: false },
+  );
+
+  useEffect(() => {
+    setInputValue(String(safePage));
+  }, [safePage]);
+
+  useEffect(() => inputCommitTimer.clear, [inputCommitTimer]);
+
+  const commitInputValue = () => {
+    inputCommitTimer.clear();
+
+    const nextPage = Number.parseInt(inputValue, 10);
+    if (!Number.isFinite(nextPage)) {
+      setInputValue(String(safePage));
+      return;
+    }
+    const resolvedPage = clampPage(nextPage, safeTotal);
+    setInputValue(String(resolvedPage));
+    handleChange(resolvedPage);
+  };
+
+  const scheduleInputCommit = (nextValue: string) => {
+    inputCommitTimer.clear();
+    if (disabled || !nextValue || nextValue === String(safePage)) return;
+
+    inputCommitTimer.start(INPUT_COMMIT_DELAY_MS);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue = event.currentTarget.value.replace(/\D/g, "");
+    if (!nextValue) {
+      setInputValue("");
+      inputCommitTimer.clear();
+      return;
+    }
+
+    const nextPage = Number.parseInt(nextValue, 10);
+    const resolvedValue = String(Math.min(nextPage, safeTotal));
+    setInputValue(resolvedValue);
+    scheduleInputCommit(resolvedValue);
+  };
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      commitInputValue();
+      event.currentTarget.blur();
+    }
+  };
+
+  function IconRender({
+    icon,
+    pressable,
+  }: {
+    icon: IconProps["icon"];
+    pressable: PressableProps;
+  }) {
+    return (
+      <Icon
+        box
+        boxOptions={{ padding: 12 }}
+        icon={icon}
+        themePreset={themePreset ?? "UIPrimary"}
+        background={background}
+        color={color}
+        themeInteractive={themeInteractive}
+        pressable={pressable}
+      />
+    );
+  }
+
+  return (
+    <nav
+      aria-label={resolvedNavigationLabel}
+      data-color-mode={dataTheme}
+      className={className}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "1.2rem",
+        width: "100%",
+        ...style,
+      }}
+      role="group"
+    >
+      <IconRender
+        icon="iArrowKeyDoubleLeft"
+        pressable={{
+          onClick: () => handleChange(1),
+          disabled: disabled || safePage <= 1,
+          title: firstPageLabel,
+          "aria-label": firstPageLabel,
+        }}
+      />
+      <IconRender
+        icon="iArrowKeyLeft"
+        pressable={{
+          onClick: () => handleChange(safePage - 1),
+          disabled: disabled || safePage <= 1,
+          title: resolvedPreviousLabel,
+          "aria-label": resolvedPreviousLabel,
+        }}
+      />
+      <fieldset
+        style={{
+          width: "100%",
+          height: "100%",
+          border: 0,
+          marginInline: 0,
+          padding: 0,
+          minInlineSize: 0,
+        }}
+        aria-label={t.UIKit.ui.goToPage}
+      >
+        <label style={{ width: "100%", height: "100%" }}>
+          <View
+            themePreset={themePreset ?? "UIPrimary"}
+            radius="Circle"
+            alignItems="center"
+            justifyContent="center"
+            gap={12}
+            height="100%"
+            padding={[15, 8]}
+            fullWidth
+          >
+            <View alignItems="center" gap={0}>
+              <input
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                value={inputValue}
+                disabled={disabled}
+                role="spinbutton"
+                aria-label={t.UIKit.ui.goToPage}
+                aria-valuemin={1}
+                aria-valuemax={safeTotal}
+                aria-valuenow={safePage}
+                onChange={handleInputChange}
+                onKeyDown={handleInputKeyDown}
+                style={
+                  {
+                    "--pagination-input-width": inputWidth,
+                    textAlign: "center",
+                    fontSize: "var(--font-headline-size)",
+                    width: "calc(var(--pagination-input-width, 1ch) + 1.6rem)",
+                    minWidth: "3.4rem",
+                    maxWidth: "12rem",
+                  } as React.CSSProperties
+                }
+              />
+              <Text type="Headline" verticalTrim opacity={0.2} aria-hidden>
+                /
+              </Text>
+            </View>
+            <Text
+              type="Headline"
+              verticalTrim
+              opacity={0.4}
+              aria-label={lastPageLabel}
+            >
+              {safeTotal}
+            </Text>
+          </View>
+        </label>
+      </fieldset>
+      <IconRender
+        icon="iArrowKeyRight"
+        pressable={{
+          onClick: () => handleChange(safePage + 1),
+          disabled: disabled || safePage >= safeTotal,
+          title: resolvedNextLabel,
+          "aria-label": resolvedNextLabel,
+        }}
+      />
+      <IconRender
+        icon="iArrowKeyDoubleRight"
+        pressable={{
+          onClick: () => handleChange(safeTotal),
+          disabled: disabled || safePage >= safeTotal,
+          title: lastPageLabel,
+          "aria-label": lastPageLabel,
+        }}
+      />
+    </nav>
+  );
+}

package/packages/Components/Pagination/Pagination.types.ts

@@ -0,0 +1,18 @@
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface PaginationProps extends ThemeSystemProps, BorderProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  page: number;
+  total: number;
+  onChange?: (page: number) => void;
+  disabled?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  navigationLabel?: string;
+  getPageLabel?: (page: number, isCurrent: boolean) => string;
+}

package/packages/Components/Pill/Pill.tsx

@@ -0,0 +1,127 @@
+import clsx from "clsx";
+import Icon from "@/packages/Components/Icon/Icon";
+import type { PillProps } from "@/packages/Components/Pill/Pill.types";
+import Text from "@/packages/Components/Text/Text";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+
+export function Pill({
+  themePreset,
+  background,
+  color,
+  themeInteractive,
+  selected,
+  border,
+  radius,
+  shadow,
+  renderKey,
+  icon,
+  pressable,
+  disabled,
+  text,
+  iconSize,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  checkedThemePreset,
+  gap,
+  textType,
+  textSize,
+  textWeight,
+  ellipsis,
+  rightIcon,
+  loading,
+  className,
+  style,
+  shouldWrapText = true,
+  "data-color-mode": dataColorMode,
+}: PillProps) {
+  const isChecked = Boolean(selected || pressable?.checked);
+  const resolvedPreset =
+    themePreset ??
+    (isChecked ? (checkedThemePreset ?? "BaseFull") : "UIPrimary");
+  const resolvedSelected = selected ?? isChecked;
+
+  const {
+    className: pressableClassName,
+    style: pressableStyle,
+    title: pressableTitle,
+    disabled: pressableDisabled,
+    ...restPressable
+  } = pressable ?? {};
+
+  return (
+    <Pressable
+      data-color-mode={dataColorMode}
+      {...restPressable}
+      themePreset={resolvedPreset}
+      background={background}
+      color={color}
+      themeInteractive={themeInteractive}
+      selected={resolvedSelected}
+      border={border ?? "Base3TP1"}
+      radius={radius ?? "Regular"}
+      shadow={shadow}
+      disabled={disabled || loading || pressableDisabled}
+      className={clsx(className, pressableClassName)}
+      alignItems="center"
+      justifyContent="center"
+      height="max-content"
+      gap={gap ?? 4}
+      padding={padding ?? ".8rem 1rem"}
+      paddingHorizontal={paddingHorizontal}
+      paddingVertical={paddingVertical}
+      style={{
+        width: "max-content",
+        minWidth: "max-content",
+        textAlign: "center",
+        overflow: "hidden",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        ...style,
+        ...pressableStyle,
+      }}
+      title={pressableTitle}
+    >
+      {}
+      {icon && <Icon size={iconSize || 13} {...icon} />}
+
+      {}
+      {text && shouldWrapText ? (
+        <Text
+          type={textType || "Footnote"}
+          size={textSize}
+          weight={textWeight}
+          verticalTrim
+          style={
+            ellipsis
+              ? {
+                  display: "block",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  minWidth: 0,
+                }
+              : undefined
+          }
+        >
+          {text}
+        </Text>
+      ) : text ? (
+        text
+      ) : null}
+
+      {}
+      {loading || rightIcon ? (
+        <Icon
+          size={iconSize || 12}
+          box
+          boxOptions={{ padding: ".2rem", margin: "-.2rem" }}
+          spinner={loading}
+          {...rightIcon}
+        />
+      ) : null}
+    </Pressable>
+  );
+}
+
+export default Pill;

package/packages/Components/Pill/Pill.types.ts

@@ -0,0 +1,33 @@
+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 { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface PillProps extends ThemeSystemProps, RadiusProps, BorderProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  renderKey?: string;
+  icon?: IconProps;
+  pressable?: PressableProps;
+  disabled?: boolean;
+  text?: React.ReactNode;
+  iconSize?: UIKitSizeValue;
+  padding?: UIKitSizeValue;
+  paddingHorizontal?: UIKitSizeValue;
+  paddingVertical?: UIKitSizeValue;
+  checkedThemePreset?: ThemeSystemProps["themePreset"];
+  gap?: UIKitSizeValue;
+  textType?: TextProps["type"];
+  textSize?: TextProps["size"];
+  textWeight?: TextProps["weight"];
+  ellipsis?: boolean;
+  rightIcon?: IconProps;
+  loading?: boolean;
+  shouldWrapText?: boolean;
+}

package/packages/Components/Profile/Profile.shared.ts

@@ -0,0 +1,74 @@
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { ProfileAvatarOptions } from "@/packages/Components/Profile/Profile.types";
+import {
+  Size,
+  type UIKitSizeValue,
+} from "@/packages/Frameworks/_shared/sizing";
+
+const resolveFallbackAvatarIconSize = (
+  outerSize: UIKitSizeValue,
+  padding?: UIKitSizeValue,
+): UIKitSizeValue => {
+  if (padding === undefined || padding === null || padding === "") {
+    return outerSize;
+  }
+
+  if (
+    typeof outerSize === "number" &&
+    Number.isFinite(outerSize) &&
+    typeof padding === "number" &&
+    Number.isFinite(padding)
+  ) {
+    return Math.max(0, outerSize - padding * 2);
+  }
+
+  const resolvedOuterSize = Size(outerSize);
+  const resolvedPadding = Size(padding);
+
+  if (!resolvedOuterSize || !resolvedPadding) {
+    return outerSize;
+  }
+
+  return `calc(${resolvedOuterSize} - (${resolvedPadding} * 2))`;
+};
+
+export const getProfileAvatarIconProps = ({
+  avatar,
+  avatarLoading,
+  size,
+  imageWidth,
+  imageHeight,
+  fallbackPadding,
+  border,
+  background,
+}: ProfileAvatarOptions): IconProps => {
+  if (avatar) {
+    return {
+      image: avatar,
+      imageLoading: avatarLoading,
+      box: true,
+      border: border ?? "None",
+      width: imageWidth || size,
+      height: imageHeight || size,
+      boxOptions: {
+        padding: 0,
+      },
+    };
+  }
+
+  const fallbackWidth = imageWidth || size;
+  const fallbackHeight = imageHeight || size;
+
+  return {
+    icon: "iPerson",
+    box: true,
+    border,
+    width: fallbackWidth,
+    height: fallbackHeight,
+    size: resolveFallbackAvatarIconSize(fallbackWidth, fallbackPadding),
+    boxOptions: {
+      padding: fallbackPadding,
+    },
+    background,
+  };
+};