@musecat/uikit 0.1.1

package/packages/Components/Select/select.inner.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import {
+  type ReactElement,
+  type MouseEvent as ReactMouseEvent,
+  useMemo,
+} from "react";
+import ContextMenu from "@/packages/Components/ContextMenu/ContextMenu";
+import Icon from "@/packages/Components/Icon/Icon";
+import Label from "@/packages/Components/Label/Label";
+import { useSelectNavigation } from "@/packages/Components/Select/hooks/useSelectNavigation";
+import { useSelectSelection } from "@/packages/Components/Select/hooks/useSelectSelection";
+import { useSelectState } from "@/packages/Components/Select/hooks/useSelectState";
+import type { SelectProps } from "@/packages/Components/Select/Select.types";
+import { filterOptionsByQuery } from "@/packages/Components/Select/Select.utils";
+import SelectControl from "@/packages/Components/Select/select.control";
+import View from "@/packages/Frameworks/View/View";
+
+export default function SelectInner(props: SelectProps<boolean>): ReactElement {
+  const state = useSelectState(props);
+  const isSheet = state.isMobileSheet;
+  const selection = useSelectSelection(state);
+  const navigation = useSelectNavigation(state, selection);
+
+  const {
+    t,
+    isMultiple,
+    isTypeableControl,
+    isInteractionDisabled,
+    open,
+    setOpen,
+    activeIndex,
+    setActiveIndex,
+    openSource,
+    setOpenSource,
+    selectedValues,
+    query,
+    inputValue,
+    selectId,
+    listId,
+    popoverOwnerId,
+    rootRef,
+    controlRef,
+    pointerDownInsidePopoverRef,
+    isPopoverSearchActive,
+    visibleOptions,
+    flatOptions,
+    getFirstEnabledIndex,
+    isInOwnPopover,
+    isOptionSelectionDisabled,
+    props: rawProps,
+  } = state;
+
+  const { onInputChange } = rawProps;
+  const {
+    selectOption,
+    removeSelectedOption,
+    clearSelection,
+    emitNativeChange,
+  } = selection;
+
+  const contextMenuContents = useMemo(
+    () =>
+      visibleOptions.map((option) => {
+        const value = String(option.value);
+        const isSelected = selectedValues.includes(value);
+        return {
+          type: "option" as const,
+          value: option.value,
+          label: option.label,
+          icon: option.icon,
+          description: option.description,
+          disabled: isOptionSelectionDisabled(option),
+          selected: isSelected,
+          onClick: () => selectOption(option),
+        };
+      }),
+    [visibleOptions, selectedValues, isOptionSelectionDisabled, selectOption],
+  );
+
+  const searchInputContent = isPopoverSearchActive ? (
+    <label
+      style={{
+        width: "100%",
+        padding: isSheet ? "0 .8rem .8rem .8rem" : undefined,
+      }}
+    >
+      <View
+        padding={isSheet ? [12, 16] : [6, 8]}
+        radius={isSheet ? "Circle" : undefined}
+        themePreset={isSheet ? "BaseFull" : undefined}
+        gap={8}
+        width="100%"
+      >
+        <Icon icon="iSearch" size={20} opacity={0.8} />
+        <input
+          ref={state.popoverInputRef}
+          type="text"
+          style={{ width: "100%" }}
+          className="Subheadline"
+          value={query}
+          placeholder={`${t.UIKit.ui.select}...`}
+          onFocus={() => {
+            if (isInteractionDisabled) return;
+            state.setOpenSource("keyboard");
+          }}
+          onChange={(e) => {
+            if (isInteractionDisabled) return;
+            const val = e.target.value;
+            state.setOpenSource("keyboard");
+            state.setQuery(val);
+            onInputChange?.(val);
+            const nextVisible = filterOptionsByQuery(flatOptions, val);
+            state.setActiveIndex(getFirstEnabledIndex(nextVisible));
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              setOpen(false);
+              const triggerEl = isTypeableControl
+                ? (controlRef.current?.querySelector(
+                    'input[data-select-input="true"]',
+                  ) as HTMLElement | null)
+                : (controlRef.current?.querySelector(
+                    'button[data-select-trigger="true"]',
+                  ) as HTMLElement | null);
+              triggerEl?.focus();
+            }
+            if (e.key === "Backspace" && !query && isMultiple) {
+              e.preventDefault();
+              removeSelectedOption(
+                selectedValues[selectedValues.length - 1] ?? "",
+              );
+            }
+          }}
+        />
+      </View>
+    </label>
+  ) : undefined;
+
+  return (
+    <Label
+      data-color-mode={rawProps["data-color-mode"]}
+      htmlFor={selectId}
+      title={rawProps.title}
+      required={rawProps.required}
+      hint={rawProps.hint}
+      disabled={rawProps.disabled}
+      readOnly={rawProps.readOnly}
+      themePreset={rawProps.themePreset}
+      background={rawProps.background}
+      color={rawProps.color}
+      themeInteractive={rawProps.themeInteractive}
+      selected={rawProps.selected}
+      border={rawProps.border}
+      radius={rawProps.radius}
+      className={rawProps.className}
+      style={rawProps.style}
+      cursor={isTypeableControl ? "text" : undefined}
+    >
+      <View
+        data-color-mode={rawProps["data-color-mode"]}
+        ref={rootRef}
+        onKeyDownCapture={(e) => {
+          if (e.key === "Tab") {
+            state.lastClosedByTabRef.current = true;
+            setTimeout(() => {
+              state.lastClosedByTabRef.current = false;
+            }, 100);
+
+            const ownerEl = document.querySelector(
+              `[data-popover-owner="${popoverOwnerId}"]`,
+            );
+            if (ownerEl) {
+              const focusable = Array.from(
+                ownerEl.querySelectorAll(
+                  'input, button, select, textarea, [tabindex="0"], [role="option"]',
+                ),
+              ).filter((el) => {
+                const style = window.getComputedStyle(el);
+                return (
+                  style.display !== "none" &&
+                  style.visibility !== "hidden" &&
+                  !(el as any).disabled
+                );
+              }) as HTMLElement[];
+
+              if (focusable.length > 0) {
+                const activeEl = document.activeElement as HTMLElement | null;
+                const index = focusable.indexOf(activeEl!);
+
+                if (e.shiftKey) {
+                  if (index === 0 || index === -1) {
+                    e.preventDefault();
+                    setOpen(false);
+                    const triggerEl = isTypeableControl
+                      ? (controlRef.current?.querySelector(
+                          'input[data-select-input="true"]',
+                        ) as HTMLElement | null)
+                      : (controlRef.current?.querySelector(
+                          'button[data-select-trigger="true"]',
+                        ) as HTMLElement | null);
+                    triggerEl?.focus();
+                  }
+                } else {
+                  if (index === focusable.length - 1) {
+                    setOpen(false);
+                  }
+                }
+              }
+            }
+          }
+        }}
+        onBlur={(e) => {
+          const next = e.relatedTarget as Node | null;
+          if (pointerDownInsidePopoverRef.current) return;
+          if (next && (rootRef.current?.contains(next) || isInOwnPopover(next)))
+            return;
+          setOpen(false);
+        }}
+      >
+        <View
+          data-color-mode={rawProps["data-color-mode"]}
+          ref={controlRef}
+          width="100%"
+          alignItems="flex-end"
+          justifyContent="space-between"
+          gap={6}
+        >
+          <SelectControl
+            state={state}
+            emitNativeChange={emitNativeChange}
+            removeSelectedOption={removeSelectedOption}
+            navigation={navigation}
+          />
+
+          <View alignItems="center" gap={4} style={{ margin: "-.2rem" }}>
+            {(isTypeableControl || isMultiple) &&
+              !isInteractionDisabled &&
+              (selectedValues.length > 0 ||
+                query ||
+                (!isMultiple && inputValue)) && (
+                <Icon
+                  icon="iClose"
+                  size={16}
+                  opacity={0.8}
+                  box
+                  boxOptions={{ padding: ".4rem" }}
+                  pressable={{
+                    onMouseDown: (e: ReactMouseEvent<Element>) => {
+                      e?.preventDefault?.();
+                      e?.stopPropagation?.();
+                    },
+                    onClick: (e: ReactMouseEvent<Element>) => {
+                      e?.preventDefault?.();
+                      e?.stopPropagation?.();
+                      clearSelection();
+                    },
+                  }}
+                />
+              )}
+            <Icon
+              icon="iArrowKeyDown"
+              opacity={0.8}
+              boxOptions={{ padding: ".4rem" }}
+              size={16}
+            />
+          </View>
+        </View>
+
+        <ContextMenu
+          open={open}
+          onOpenChange={setOpen}
+          anchorRef={controlRef as React.RefObject<HTMLElement>}
+          popoverOwnerId={popoverOwnerId}
+          listId={listId}
+          isInteractionDisabled={isInteractionDisabled}
+          contents={contextMenuContents}
+          activeIndex={activeIndex}
+          onActiveIndexChange={setActiveIndex}
+          openSource={openSource}
+          onOpenSourceChange={setOpenSource}
+          showCheck
+          recalcKey={`${selectedValues.join("|")}|${visibleOptions.length}|${openSource}|${isMultiple}|${query}|${inputValue}`}
+          popoverConfig={{
+            matchAnchorWidth: true,
+            offset: { x: "-1.6rem", width: "3.2rem" },
+            strategy:
+              isTypeableControl || isPopoverSearchActive || isMultiple
+                ? "anchored"
+                : "center-selected",
+            selectedItemSelector: '[data-selected="true"]',
+            gap: 2,
+            maxHeight: 380,
+            header: isPopoverSearchActive
+              ? {
+                  content: searchInputContent,
+                }
+              : undefined,
+          }}
+          sheetConfig={{
+            header: isPopoverSearchActive
+              ? {
+                  content: searchInputContent,
+                }
+              : undefined,
+          }}
+          mobileMode="sheet"
+        />
+      </View>
+    </Label>
+  );
+}

package/packages/Components/Skeleton/Skeleton.tsx

@@ -0,0 +1,30 @@
+import type { SkeletonProps } from "@/packages/Components/Skeleton/Skeleton.types";
+import View from "@/packages/Frameworks/View/View";
+
+export default function Skeleton({
+  className,
+  style,
+  width,
+  height,
+  count,
+  type,
+  "data-color-mode": dataTheme,
+}: SkeletonProps) {
+  const autoHeight = type ? `var(--font-${type.toLowerCase()}-size)` : height;
+  const slots = Array.from({ length: count || 1 }, (_, index) => index + 1);
+
+  return slots.map((slot) => (
+    <View
+      key={`skeleton-${slot}`}
+      data-color-mode={dataTheme}
+      className={className}
+      width={width || "100%"}
+      height={autoHeight}
+      style={{
+        ...style,
+        background:
+          "color-mix(in srgb, var(--color-base-light-2) 65%, transparent)",
+      }}
+    />
+  ));
+}

package/packages/Components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,12 @@
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+
+export interface SkeletonProps {
+  "data-color-mode"?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  width?: UIKitSizeValue;
+  height?: UIKitSizeValue;
+  count?: number;
+  type?: TextProps["type"];
+}

package/packages/Components/Spinner/Spinner.module.scss

@@ -0,0 +1,78 @@
+.Spinner {
+  display: block;
+  flex-shrink: 0;
+  width: var(--spinner-size, 1.5rem);
+  height: var(--spinner-size, 1.5rem);
+  animation: spinner-rotate var(--spinner-duration, 1s) steps(12, end) infinite;
+  transform-origin: center;
+}
+
+.Segment {
+  stroke: currentcolor;
+  stroke-width: var(--spinner-segment-width, 2.4);
+}
+
+.MaterialSpinner {
+  display: block;
+  flex-shrink: 0;
+  width: var(--spinner-size, 1.5rem);
+  height: var(--spinner-size, 1.5rem);
+  animation: spinner-rotate calc(var(--spinner-duration, 1s) * 4 / 3) linear
+    infinite;
+  transform-origin: center;
+}
+
+.MaterialTrack {
+  stroke: currentcolor;
+  animation: spinner-dash var(--spinner-duration, 1s) ease-in-out infinite;
+  transform-origin: center;
+}
+
+.WheelSpinner {
+  display: block;
+  flex-shrink: 0;
+  width: var(--spinner-size, 1.5rem);
+  height: var(--spinner-size, 1.5rem);
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, transparent 20%, currentcolor 100%);
+  mask: radial-gradient(farthest-side, transparent 62%, black 64%);
+  -webkit-mask: radial-gradient(farthest-side, transparent 62%, black 64%);
+  animation: spinner-rotate var(--spinner-duration, 1s) linear infinite;
+  transform-origin: center;
+}
+
+@keyframes spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 1 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 89 200;
+    stroke-dashoffset: -35;
+  }
+
+  100% {
+    stroke-dasharray: 89 200;
+    stroke-dashoffset: -124;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Spinner,
+  .MaterialSpinner,
+  .WheelSpinner,
+  .MaterialTrack {
+    animation: none;
+  }
+}

package/packages/Components/Spinner/Spinner.tsx

@@ -0,0 +1,125 @@
+import clsx from "clsx";
+import type { CSSProperties } from "react";
+import styles from "@/packages/Components/Spinner/Spinner.module.scss";
+import type { SpinnerProps } from "@/packages/Components/Spinner/Spinner.types";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+import { resolveThemeClasses } from "@/packages/Frameworks/Theme/Theme.types";
+import View from "@/packages/Frameworks/View/View";
+
+const SPINNER_SEGMENTS = 12;
+const SPINNER_VISUAL_SCALE_BY_TYPE = {
+  apple: 0.78,
+  material: 0.82,
+  wheel: 0.86,
+} as const;
+
+export default function Spinner({
+  type,
+  className,
+  style,
+  size,
+  color,
+  opacity,
+  duration,
+  strokeWidth,
+  linecap,
+  role,
+  "aria-hidden": ariaHidden,
+  "aria-label": ariaLabel,
+  "data-color-mode": dataTheme,
+}: SpinnerProps) {
+  const resolvedType = type ?? "wheel";
+  const resolvedSize = Size(size) ?? "1.8rem";
+  const resolvedStrokeWidth = strokeWidth || 2.4;
+  const resolvedDuration = duration || 1;
+  const resolvedVisualScale =
+    SPINNER_VISUAL_SCALE_BY_TYPE[resolvedType] ?? 0.86;
+  const resolvedAriaHidden =
+    ariaHidden ?? (role || ariaLabel ? undefined : true);
+  const themeClasses = resolveThemeClasses({ color: color ?? "Base1" });
+  const spinnerStyle = {
+    "--spinner-duration": `${resolvedDuration}s`,
+    "--spinner-size": `calc(${resolvedSize} * ${resolvedVisualScale})`,
+    "--spinner-segment-width": resolvedStrokeWidth,
+    opacity,
+  } as CSSProperties;
+
+  if (resolvedType === "material") {
+    const radius = 25 - resolvedStrokeWidth;
+    const circumference = 2 * Math.PI * radius;
+
+    return (
+      <svg
+        {...({ "data-color-mode": dataTheme } as Record<
+          string,
+          string | undefined
+        >)}
+        className={clsx(styles.MaterialSpinner, ...themeClasses, className)}
+        viewBox="0 0 50 50"
+        role={role}
+        aria-hidden={resolvedAriaHidden}
+        aria-label={ariaLabel}
+        style={{ ...spinnerStyle, ...style }}
+      >
+        <circle
+          className={styles.MaterialTrack}
+          fill="none"
+          strokeWidth={resolvedStrokeWidth}
+          strokeLinecap={linecap || "round"}
+          cx="25"
+          cy="25"
+          r={radius}
+          strokeDasharray={circumference}
+          strokeDashoffset={circumference * 0.75}
+        />
+      </svg>
+    );
+  } else if (resolvedType === "apple") {
+    const segmentKeys = Array.from(
+      { length: SPINNER_SEGMENTS },
+      (_, index) => `spinner-segment-${index}`,
+    );
+
+    return (
+      <svg
+        {...({ "data-color-mode": dataTheme } as Record<
+          string,
+          string | undefined
+        >)}
+        className={clsx(styles.Spinner, ...themeClasses, className)}
+        viewBox="0 0 24 24"
+        role={role}
+        aria-hidden={resolvedAriaHidden}
+        aria-label={ariaLabel}
+        style={{ ...spinnerStyle, ...style }}
+      >
+        {segmentKeys.map((key, index) => (
+          <line
+            key={key}
+            className={styles.Segment}
+            x1="12"
+            y1="1.5"
+            x2="12"
+            y2="6.75"
+            strokeLinecap={linecap || "round"}
+            transform={`rotate(${index * (360 / SPINNER_SEGMENTS)} 12 12)`}
+            style={{
+              opacity: (index + 1) / SPINNER_SEGMENTS,
+            }}
+          />
+        ))}
+      </svg>
+    );
+  } else {
+    return (
+      <View
+        data-color-mode={dataTheme}
+        role={role || "progressbar"}
+        aria-hidden={resolvedAriaHidden}
+        aria-label={ariaLabel}
+        className={clsx(styles.WheelSpinner, ...themeClasses, className)}
+        style={{ ...spinnerStyle, ...style }}
+      />
+    );
+  }
+}

package/packages/Components/Spinner/Spinner.types.ts

@@ -0,0 +1,19 @@
+import type { AriaRole, CSSProperties, SVGAttributes } from "react";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { ThemePaint } from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface SpinnerProps {
+  "data-color-mode"?: string;
+  "aria-hidden"?: boolean | "true" | "false";
+  "aria-label"?: string;
+  role?: AriaRole;
+  type?: "apple" | "material" | "wheel";
+  className?: string;
+  style?: CSSProperties;
+  size?: UIKitSizeValue;
+  strokeWidth?: number;
+  color?: ThemePaint;
+  opacity?: number;
+  duration?: number;
+  linecap?: SVGAttributes<SVGElement>["strokeLinecap"];
+}

package/packages/Components/Text/Text.module.scss

@@ -0,0 +1,7 @@
+.Text {
+  color: inherit;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  transition: var(--transition-color), var(--transition-opacity);
+}

package/packages/Components/Text/Text.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import styles from "@/packages/Components/Text/Text.module.scss";
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+
+export default function Text({
+  children,
+  type,
+  color,
+  textAlign,
+  lineHeight,
+  weight,
+  letterSpacing,
+  size,
+  style,
+  className,
+  verticalTrim,
+  fontType,
+  id,
+  opacity,
+  "data-color-mode": dataColorMode,
+}: TextProps) {
+  return (
+    <span
+      id={id}
+      data-color-mode={dataColorMode}
+      className={clsx(
+        styles.Text,
+        type,
+        fontType === "serif" ? "FontSerif" : fontType === "code" && "FontCode",
+        className,
+      )}
+      style={{
+        lineHeight: verticalTrim ? 1 : lineHeight,
+        fontWeight: weight,
+        letterSpacing: letterSpacing,
+        fontSize: Size(size),
+        color: color,
+        opacity:
+          opacity === undefined ? undefined : Math.max(0, Math.min(opacity, 1)),
+        wordBreak: "break-word",
+        textAlign: textAlign,
+        ...style,
+      }}
+    >
+      {children}
+    </span>
+  );
+}

package/packages/Components/Text/Text.types.ts

@@ -0,0 +1,33 @@
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { ThemePaint } from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface TextProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  type?:
+    | "LargeTitle"
+    | "Title1"
+    | "Title2"
+    | "Title3"
+    | "Headline"
+    | "Callout"
+    | "Body"
+    | "Subheadline"
+    | "Footnote"
+    | "Caption1"
+    | "Caption2"
+    | "Coding"
+    | "Pre";
+  color?: ThemePaint;
+  lineHeight?: number;
+  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+  letterSpacing?: number;
+  size?: UIKitSizeValue;
+  verticalTrim?: boolean;
+  fontType?: "serif" | "code";
+  textAlign?: "left" | "center" | "right";
+  id?: string;
+  opacity?: number;
+}