@musecat/uikit 0.1.1

package/packages/Components/Title/Title.tsx

@@ -0,0 +1,305 @@
+import clsx from "clsx";
+import IconGroup from "@/packages/Components/Icon/Icon.group";
+import { IconInner } from "@/packages/Components/Icon/Icon";
+import Pill from "@/packages/Components/Pill/Pill";
+import Text from "@/packages/Components/Text/Text";
+import type {
+  TitleContextItem,
+  TitleContextProps,
+  TitleProps,
+} from "@/packages/Components/Title/Title.types";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import View from "@/packages/Frameworks/View/View";
+
+const buildRenderKeys = <T,>(
+  items: T[],
+  resolveBase: (item: T) => string,
+): string[] => {
+  const counts = new Map<string, number>();
+
+  return items.map((item) => {
+    const base = resolveBase(item) || "item";
+    const nextCount = (counts.get(base) ?? 0) + 1;
+    counts.set(base, nextCount);
+    return `${base}-${nextCount}`;
+  });
+};
+
+function TitleRoot({
+  title,
+  titleType,
+  titleClassName,
+  titleGap,
+  leftGap,
+  rightGap,
+  fontType,
+  titleLineHeight,
+  titleVerticalTrim,
+  caption,
+  suffix,
+  meta,
+  actions,
+  captionOpacity,
+  context,
+  className,
+  style,
+  "data-color-mode": dataTheme,
+}: TitleProps) {
+  const titleItems = Array.isArray(title) ? title : title ? [title] : [];
+  const hasActive = titleItems.some((item) => item?.active);
+  const hasTitleCluster = titleItems.length > 0 || Boolean(suffix);
+  const hasRightCluster = Boolean(meta || actions);
+
+  const titleKeys = buildRenderKeys(
+    titleItems,
+    (item) => item?.text?.toString() ?? "",
+  );
+
+  return (
+    <View
+      column
+      gap={16}
+      className={className}
+      data-color-mode={dataTheme}
+      style={style}
+    >
+      <View column gap={4}>
+        <View
+          alignItems="center"
+          justifyContent={
+            hasTitleCluster && hasRightCluster ? "space-between" : undefined
+          }
+          gap={6}
+        >
+          {hasTitleCluster && (
+            <View gap={leftGap ?? 8} alignItems="center">
+              {titleItems.length > 0 && (
+                <View gap={titleGap ?? 8}>
+                  {titleItems.map((item, index) => (
+                    <Pressable
+                      radius="Regular"
+                      key={titleKeys[index]}
+                      data-color-mode={item?.["data-color-mode"] ?? dataTheme}
+                      padding={[2, 4]}
+                      style={{
+                        margin: "-.2rem -.4rem",
+                        maxWidth: "max-content",
+                      }}
+                      {...item?.pressable}
+                    >
+                      <Text
+                        type={titleType || "Title3"}
+                        className={titleClassName}
+                        fontType={fontType}
+                        lineHeight={titleLineHeight}
+                        verticalTrim={titleVerticalTrim}
+                        opacity={hasActive && !item?.active ? 0.4 : 1}
+                      >
+                        {item?.text}
+                      </Text>
+                    </Pressable>
+                  ))}
+                </View>
+              )}
+              {suffix && (
+                <View alignItems="center">
+                  <Pill padding={6} {...suffix} />
+                </View>
+              )}
+            </View>
+          )}
+          {hasRightCluster && (
+            <View
+              alignItems="center"
+              gap={rightGap ?? 8}
+              justifyContent="flex-end"
+            >
+              {meta && <Text type="Footnote">{meta}</Text>}
+              {actions && (
+                <IconGroup
+                  iconSize={20}
+                  iconBoxOptions={{
+                    padding: 4,
+                  }}
+                  icons={actions}
+                />
+              )}
+            </View>
+          )}
+        </View>
+        {caption && (
+          <Text
+            type="Footnote"
+            fontType={fontType}
+            opacity={captionOpacity ?? 0.6}
+          >
+            {caption}
+          </Text>
+        )}
+      </View>
+      {context && <View fullWidth>{context}</View>}
+    </View>
+  );
+}
+
+function toContextItems(items?: TitleContextItem | TitleContextItem[]) {
+  if (!items) return [];
+  return Array.isArray(items) ? items : [items];
+}
+
+function getContextItemKey(
+  item: TitleContextItem,
+  side: "start" | "end",
+  index: number,
+) {
+  return item.key ?? `${side}-${index}`;
+}
+
+function TitleContextItemView({ item }: { item: TitleContextItem }) {
+  const {
+    content,
+    leadingIcon,
+    trailingIcon,
+    leadingIconProps,
+    trailingIconProps,
+    pressable,
+    key: _key,
+    className: itemDesignClassName,
+    style: itemDesignStyle,
+    ...designProps
+  } = item;
+  const {
+    className: pressableClassName,
+    style: pressableStyle,
+    type,
+    ...pressableProps
+  } = pressable ?? {};
+  const itemClassName = clsx(itemDesignClassName, pressableClassName);
+  const itemStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: ".4rem",
+    minWidth: 0,
+    minHeight: "2.6rem",
+    padding: ".4rem .6rem",
+    margin: "-.4rem -.6rem",
+    whiteSpace: "nowrap",
+    transition: "var(--transition-surface)",
+    ...itemDesignStyle,
+    ...pressableStyle,
+  } as React.CSSProperties;
+  const itemContent = (
+    <>
+      {leadingIcon && (
+        <IconInner
+          {...leadingIconProps}
+          icon={leadingIcon}
+          size={leadingIconProps?.size ?? 18}
+        />
+      )}
+      <Text
+        type="Footnote"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {content}
+      </Text>
+      {trailingIcon && (
+        <IconInner
+          {...trailingIconProps}
+          icon={trailingIcon}
+          size={trailingIconProps?.size ?? 18}
+        />
+      )}
+    </>
+  );
+
+  if (!pressable) {
+    return (
+      <Text className={itemClassName} style={itemStyle}>
+        {itemContent}
+      </Text>
+    );
+  }
+
+  return (
+    <Pressable
+      {...designProps}
+      {...pressableProps}
+      className={itemClassName}
+      radius="Circle"
+      alignItems="center"
+      gap={4}
+      padding={[4, 6]}
+      style={{
+        display: "inline-flex",
+        minWidth: 0,
+        minHeight: "2.6rem",
+        margin: "-.4rem -.6rem",
+        whiteSpace: "nowrap",
+        transition: "var(--transition-surface)",
+        ...itemDesignStyle,
+        ...pressableStyle,
+      }}
+    >
+      {itemContent}
+    </Pressable>
+  );
+}
+
+export function TitleContext({
+  start,
+  end,
+  startGap,
+  endGap,
+  className,
+  style,
+}: TitleContextProps) {
+  const startItems = toContextItems(start);
+  const endItems = toContextItems(end);
+
+  if (startItems.length === 0 && endItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <View
+      gap={6}
+      className={className}
+      fullWidth
+      style={{ minHeight: "2.8rem", ...style }}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      {startItems.length > 0 && (
+        <View gap={startGap ?? 16} alignItems="center">
+          {startItems.map((item, index) => (
+            <TitleContextItemView
+              key={getContextItemKey(item, "start", index)}
+              item={item}
+            />
+          ))}
+        </View>
+      )}
+      {endItems.length > 0 && (
+        <View gap={endGap ?? 16} justifyContent="flex-end" alignItems="center">
+          {endItems.map((item, index) => (
+            <TitleContextItemView
+              key={getContextItemKey(item, "end", index)}
+              item={item}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const Title = Object.assign(TitleRoot, {
+  ContextBar: TitleContext,
+});
+
+export default Title;

package/packages/Components/Title/Title.types.ts

@@ -0,0 +1,64 @@
+import type { IconGroupProps } from "@/packages/Components/Icon/Icon.group.types";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { PillProps } from "@/packages/Components/Pill/Pill.types";
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
+import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+
+interface TitleItemProps {
+  "data-color-mode"?: string;
+  text?: React.ReactNode;
+  active?: boolean;
+  pressable?: PressableProps;
+}
+
+export interface TitleProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: TitleItemProps[] | TitleItemProps;
+  titleType?: TextProps["type"];
+  titleClassName?: TextProps["className"];
+  titleGap?: ViewProps["gap"];
+  leftGap?: ViewProps["gap"];
+  rightGap?: ViewProps["gap"];
+  fontType?: TextProps["fontType"];
+  titleLineHeight?: number;
+  titleVerticalTrim?: boolean;
+  suffix?: PillProps;
+  meta?: React.ReactNode;
+  actions?: IconGroupProps["icons"];
+  caption?: React.ReactNode;
+  captionOpacity?: TextProps["opacity"];
+  context?: React.ReactNode;
+}
+
+export type TitleContextItem = Pick<
+  PressableProps,
+  | "className"
+  | "style"
+  | "themePreset"
+  | "background"
+  | "color"
+  | "themeInteractive"
+  | "selected"
+  | "border"
+  | "data-color-mode"
+> & {
+  key?: React.Key;
+  content: React.ReactNode;
+  leadingIcon?: IconProps["icon"];
+  trailingIcon?: IconProps["icon"];
+  leadingIconProps?: Omit<IconProps, "icon" | "pressable">;
+  trailingIconProps?: Omit<IconProps, "icon" | "pressable">;
+  pressable?: PressableProps;
+};
+
+export interface TitleContextProps {
+  className?: string;
+  style?: React.CSSProperties;
+  start?: TitleContextItem | TitleContextItem[];
+  end?: TitleContextItem | TitleContextItem[];
+  startGap?: ViewProps["gap"];
+  endGap?: ViewProps["gap"];
+}

package/packages/Components/Toggle/Toggle.module.scss

@@ -0,0 +1,32 @@
+.ToggleWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  width: max-content;
+  background: transparent;
+
+  .Input {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+.ToggleCircle {
+  position: absolute;
+  top: var(--toggle-padding, 0.2rem);
+  left: var(--toggle-padding, 0.2rem);
+  width: calc(
+    (var(--toggle-circle-size, 2rem) - var(--toggle-padding, 0.2rem)) * 1.5
+  );
+  height: calc(var(--toggle-circle-size, 2rem));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  transform: scale(1);
+  transform-origin: center;
+  will-change: transform, background;
+  cursor: default;
+  touch-action: pan-x;
+}

package/packages/Components/Toggle/Toggle.tsx

@@ -0,0 +1,272 @@
+"use client";
+import clsx from "clsx";
+import { motion } from "motion/react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import Spinner from "@/packages/Components/Spinner/Spinner";
+import Text from "@/packages/Components/Text/Text";
+import styles from "@/packages/Components/Toggle/Toggle.module.scss";
+import type { ToggleProps } from "@/packages/Components/Toggle/Toggle.types";
+import { Size, SizePX } from "@/packages/Frameworks/_shared/sizing";
+import { useControllableState } from "@/packages/Frameworks/_shared/useControllableState";
+import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import { Border } from "@/packages/Frameworks/Theme/Theme.types";
+import View from "@/packages/Frameworks/View/View";
+
+type ToggleTrackStyle = React.CSSProperties & {
+  "--toggle-padding"?: string;
+  "--toggle-circle-size"?: string;
+};
+
+export default function Toggle({
+  title,
+  titleType,
+  titleSpaceBetween,
+  reversed,
+  readOnly,
+  loading,
+  size,
+  width,
+  height,
+  checked: checkedProp,
+  defaultChecked,
+  disabled,
+  onChange,
+  themePreset,
+  background,
+  color,
+  ...props
+}: ToggleProps) {
+  const resolvedHeight = size ?? height;
+  const heightPX = SizePX(resolvedHeight, 24, 10);
+  const resolvedWidth =
+    width ?? (heightPX !== undefined ? heightPX * 1.75 : undefined);
+  const togglePadding =
+    heightPX !== undefined ? `${heightPX / 12}px` : undefined;
+  const toggleCircleSize =
+    heightPX !== undefined
+      ? `${Math.max(0, heightPX - (heightPX / 12) * 2)}px`
+      : undefined;
+  const toggleTrackStyle: ToggleTrackStyle = {
+    order: reversed ? 1 : undefined,
+    cursor: "default",
+    position: "relative",
+    "--toggle-padding": togglePadding,
+    "--toggle-circle-size": toggleCircleSize,
+  };
+  const [checked, setChecked, isControlled] = useControllableState({
+    value: checkedProp,
+    defaultValue: Boolean(defaultChecked),
+  });
+  const [dragRange, setDragRange] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const [visualLabelChecked, setVisualLabelChecked] = useState(() => checked);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const knobRef = useRef<HTMLDivElement>(null);
+  const suppressClickRef = useRef(false);
+  const dragStartXRef = useRef(0);
+  const visualLabelCheckedRef = useRef(checked);
+  const emitChange = useCallback(
+    (nextChecked: boolean) => {
+      if (disabled || readOnly || loading) return;
+      if (!isControlled) setChecked(nextChecked);
+      if (inputRef.current) inputRef.current.checked = nextChecked;
+      onChange?.({
+        target: (inputRef.current ?? {
+          checked: nextChecked,
+        }) as HTMLInputElement,
+        currentTarget: (inputRef.current ?? {
+          checked: nextChecked,
+        }) as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+    },
+    [disabled, isControlled, loading, onChange, readOnly, setChecked],
+  );
+  useLayoutEffect(() => {
+    const updateRange = () => {
+      if (!trackRef.current || !knobRef.current) return;
+      const trackWidth = trackRef.current.getBoundingClientRect().width;
+      const knobWidth = knobRef.current.getBoundingClientRect().width;
+      const knobStyle = window.getComputedStyle(knobRef.current);
+      const knobLeft = Number.parseFloat(knobStyle.left) || 0;
+      setDragRange(Math.max(0, trackWidth - knobWidth - knobLeft * 2));
+    };
+    updateRange();
+    window.addEventListener("resize", updateRange);
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => {
+            updateRange();
+          })
+        : null;
+    if (resizeObserver) {
+      if (trackRef.current) {
+        resizeObserver.observe(trackRef.current);
+      }
+      if (knobRef.current) {
+        resizeObserver.observe(knobRef.current);
+      }
+    }
+    return () => {
+      window.removeEventListener("resize", updateRange);
+      resizeObserver?.disconnect();
+    };
+  }, []);
+  const handleToggle = useCallback(() => {
+    emitChange(!checked);
+  }, [checked, emitChange]);
+
+  const applyVisualProgress = useCallback((nextProgress: number) => {
+    const clampedProgress = Math.max(0, Math.min(1, nextProgress));
+    const progressPercent = `${Math.round(clampedProgress * 100)}%`;
+    const nextLabelChecked = clampedProgress >= 0.5;
+
+    if (trackRef.current) {
+      trackRef.current.style.background = `color-mix(in srgb, var(--color-base-dark-1) ${progressPercent}, color-mix(in srgb, var(--color-base-light-4) 55%, transparent))`;
+    }
+
+    if (knobRef.current) {
+      knobRef.current.style.background = `color-mix(in srgb, var(--color-base-light-1) ${progressPercent}, var(--color-base-light-1))`;
+    }
+
+    if (visualLabelCheckedRef.current !== nextLabelChecked) {
+      visualLabelCheckedRef.current = nextLabelChecked;
+      setVisualLabelChecked(nextLabelChecked);
+    }
+  }, []);
+
+  useEffect(() => {
+    visualLabelCheckedRef.current = checked;
+    setVisualLabelChecked(checked);
+    applyVisualProgress(checked ? 1 : 0);
+  }, [applyVisualProgress, checked]);
+
+  return (
+    <label
+      className={styles.ToggleWrapper}
+      title={title}
+      data-disabled={disabled ? "true" : undefined}
+      data-readonly={readOnly ? "true" : undefined}
+      style={{
+        justifyContent: titleSpaceBetween ? "space-between" : undefined,
+        width: titleSpaceBetween ? "100%" : undefined,
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="checkbox"
+        role="switch"
+        aria-checked={checked}
+        readOnly
+        className={styles.Input}
+        checked={checked}
+        disabled={disabled || loading}
+        {...props}
+        onKeyDown={(e) => {
+          if (disabled || readOnly || loading) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleToggle();
+          }
+          props.onKeyDown?.(e);
+        }}
+      />
+      <View
+        ref={trackRef}
+        width={Size(resolvedWidth) ?? "4.4rem"}
+        height={Size(resolvedHeight) ?? "2.4rem"}
+        data-checked={checked || undefined}
+        data-loading={loading || undefined}
+        data-dragging={dragging || undefined}
+        data-pressed={pressed || undefined}
+        onClick={(e) => {
+          e.preventDefault();
+          if (suppressClickRef.current) {
+            suppressClickRef.current = false;
+            return;
+          }
+          handleToggle();
+        }}
+        onPointerDown={() => {
+          if (disabled || readOnly || loading) return;
+          setPressed(true);
+        }}
+        onPointerUp={() => {
+          setPressed(false);
+        }}
+        onPointerCancel={() => {
+          setPressed(false);
+        }}
+        onPointerLeave={() => {
+          if (!dragging) {
+            setPressed(false);
+          }
+        }}
+        style={toggleTrackStyle}
+        radius="Circle"
+      >
+        <motion.div
+          ref={knobRef}
+          className={clsx(styles.ToggleCircle, Border("Base3TP1"))}
+          style={{ borderRadius: Radius("Circle") }}
+          drag={disabled || readOnly || loading ? false : "x"}
+          dragConstraints={{ left: 0, right: dragRange }}
+          dragElastic={0}
+          dragMomentum={false}
+          animate={{
+            x: checked ? dragRange : 0,
+            scale: pressed || dragging ? 1.4 : 1,
+          }}
+          transition={{
+            x: { type: "spring", stiffness: 700, damping: 40 },
+            scale: { type: "spring", stiffness: 420, damping: 22 },
+          }}
+          onDragStart={() => {
+            setDragging(true);
+            setPressed(true);
+            suppressClickRef.current = false;
+            dragStartXRef.current = checked ? dragRange : 0;
+          }}
+          onDrag={(_, info) => {
+            const currentX = Math.max(
+              0,
+              Math.min(dragRange, dragStartXRef.current + info.offset.x),
+            );
+            applyVisualProgress(dragRange ? currentX / dragRange : 0);
+          }}
+          onDragEnd={(_, info) => {
+            setDragging(false);
+            setPressed(false);
+            suppressClickRef.current = Math.abs(info.offset.x) > 3;
+            const startX = checked ? dragRange : 0;
+            const endX = Math.max(
+              0,
+              Math.min(dragRange, startX + info.offset.x),
+            );
+            const nextChecked = endX >= dragRange / 2;
+            applyVisualProgress(nextChecked ? 1 : 0);
+            emitChange(nextChecked);
+          }}
+        >
+          {loading ? (
+            <View opacity={0.4}>
+              <Spinner
+                size={12}
+                strokeWidth={6}
+                color={visualLabelChecked ? "Reversed1" : "Base1"}
+              />
+            </View>
+          ) : null}
+        </motion.div>
+      </View>
+      {title && <Text type={titleType ?? "Subheadline"}>{title}</Text>}
+    </label>
+  );
+}

package/packages/Components/Toggle/Toggle.types.ts

@@ -0,0 +1,17 @@
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { ThemeSystemProps } from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface ToggleProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color">,
+    ThemeSystemProps {
+  title?: string;
+  titleType?: TextProps["type"];
+  titleSpaceBetween?: boolean;
+  reversed?: boolean;
+  readOnly?: boolean;
+  loading?: boolean;
+  size?: UIKitSizeValue;
+  width?: UIKitSizeValue;
+  height?: UIKitSizeValue;
+}