@musecat/uikit 0.1.1

package/packages/Frameworks/View/View.tsx

@@ -0,0 +1,200 @@
+import clsx from "clsx";
+import { motion } from "motion/react";
+import { type CSSProperties, forwardRef } from "react";
+import { resolvePadding } from "@/packages/Frameworks/_shared/Padding.types";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+import Squircle from "@/packages/Frameworks/Squircle/Squircle";
+import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import {
+  BackgroundBlur,
+  Border,
+  resolveThemeClasses,
+  resolveThemeHasBorder,
+  Shadow,
+} from "@/packages/Frameworks/Theme/Theme.types";
+import DNDView from "@/packages/Frameworks/View/DNDView/DNDView";
+import styles from "@/packages/Frameworks/View/View.module.scss";
+import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+
+type ViewStyle = CSSProperties & {
+  "--view-default-gap"?: string | number;
+  "--view-mobile-order"?: string | number;
+};
+
+type ViewComponent = ReturnType<
+  typeof forwardRef<HTMLDivElement, ViewProps>
+> & {
+  DND: typeof DNDView;
+};
+
+const ViewBase = forwardRef<HTMLDivElement, ViewProps>(function View(
+  {
+    children,
+    themePreset,
+    background,
+    color,
+    themeInteractive,
+    selected,
+    disabled,
+    readOnly,
+    border,
+    className,
+    style,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    wrap,
+    order,
+    opacity,
+    gridTemplateColumns,
+    gridTemplateRows,
+    gridAutoFlow,
+    column,
+    row,
+    inline,
+    gap,
+    mobileStrict,
+    mobileOrder,
+    fullWidth,
+    width,
+    height,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    radius,
+    sticky,
+    top,
+    bottom,
+    backgroundBlur,
+    shadow,
+    motion: motionProps,
+    "data-color-mode": dataColorMode,
+    noSquircle,
+    ...rest
+  }: ViewProps,
+  ref,
+) {
+  const isGrid = Boolean(
+    gridTemplateColumns || gridTemplateRows || gridAutoFlow,
+  );
+  const defaultGap = 24;
+  const resolvedDefaultGap = Size(defaultGap);
+  const resolvedGap = gap === undefined ? undefined : Size(gap);
+
+  const themeClasses = resolveThemeClasses({
+    themePreset,
+    background,
+    color,
+    shadow,
+    themeInteractive,
+    selected,
+    disabled,
+    readOnly,
+    isInteractive: false,
+  });
+
+  const viewClassName = clsx(
+    styles.View,
+    ...themeClasses,
+    Border(border),
+    Shadow(shadow),
+    BackgroundBlur(backgroundBlur),
+    fullWidth && styles.FullWidth,
+    mobileStrict && styles.MobileStrict,
+    mobileOrder !== undefined && styles.MobileOrder,
+    className,
+  );
+
+  const rootStyle: ViewStyle = {
+    "--view-default-gap": resolvedDefaultGap,
+    "--view-mobile-order": mobileOrder,
+    alignSelf,
+    order,
+    ...(opacity !== undefined ? { opacity } : {}),
+    width: Size(width),
+    height: Size(height),
+    padding: resolvePadding(padding, paddingHorizontal, paddingVertical),
+    margin: Size(margin),
+    borderRadius: Radius(radius),
+    position: sticky ? "sticky" : undefined,
+    top: sticky === true ? 0 : sticky ? Size(sticky) : Size(top),
+    bottom: Size(bottom),
+    ...style,
+  };
+
+  const layoutStyle: CSSProperties = {
+    display: isGrid ? "grid" : inline ? "inline-flex" : "flex",
+    alignItems,
+    justifyContent,
+    flexDirection: !isGrid && column ? "column" : row ? "row" : undefined,
+    flexWrap: !isGrid ? wrap : undefined,
+    gridTemplateColumns,
+    gridTemplateRows,
+    gridAutoFlow,
+    gap: resolvedGap,
+  };
+
+  const hasRadius = Boolean(radius && radius !== "None");
+  const hasBorder = resolveThemeHasBorder({ border, themePreset });
+  const _hasShadow = Boolean(shadow && shadow !== "None");
+  const isSquircle = hasRadius && !hasBorder && !noSquircle;
+
+  if (isSquircle) {
+    return (
+      <Squircle
+        ref={ref}
+        radius={radius}
+        motion={motionProps}
+        data-color-mode={dataColorMode}
+        {...rest}
+        className={viewClassName}
+        style={{
+          ...layoutStyle,
+          ...rootStyle,
+        }}
+      >
+        {children}
+      </Squircle>
+    );
+  }
+
+  if (motionProps) {
+    return (
+      <motion.div
+        ref={ref}
+        data-color-mode={dataColorMode}
+        {...(rest as any)}
+        {...(motionProps as any)}
+        className={viewClassName}
+        style={{
+          ...layoutStyle,
+          ...rootStyle,
+          ...motionProps.style,
+        }}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      data-color-mode={dataColorMode}
+      {...rest}
+      className={viewClassName}
+      style={{
+        ...layoutStyle,
+        ...rootStyle,
+      }}
+    >
+      {children}
+    </div>
+  );
+});
+
+const View = ViewBase as ViewComponent;
+View.DND = DNDView;
+
+export default View;

package/packages/Frameworks/View/View.types.ts

@@ -0,0 +1,36 @@
+import type { MotionProps } from "motion/react";
+import type { CSSProperties, HTMLAttributes } from "react";
+import type { PaddingProps } from "@/packages/Frameworks/_shared/Padding.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { WindProps } from "@/packages/Frameworks/_shared/Wind.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface ViewProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color">,
+    ThemeSystemProps,
+    BorderProps,
+    RadiusProps,
+    PaddingProps,
+    WindProps {
+  "data-color-mode"?: string;
+  motion?: MotionProps;
+  wrap?: CSSProperties["flexWrap"];
+  order?: CSSProperties["order"];
+
+  gridTemplateColumns?: string;
+  gridTemplateRows?: string;
+  gridAutoFlow?: CSSProperties["gridAutoFlow"];
+
+  inline?: boolean;
+
+  mobileStrict?: boolean;
+  mobileOrder?: number;
+
+  sticky?: boolean | UIKitSizeValue;
+  top?: UIKitSizeValue;
+  bottom?: UIKitSizeValue;
+}

package/packages/Frameworks/_shared/Padding.types.ts

@@ -0,0 +1,52 @@
+import {
+  Size,
+  type UIKitSizeValue,
+} from "@/packages/Frameworks/_shared/sizing";
+
+type PaddingUnitValue = UIKitSizeValue;
+
+export type PaddingValue =
+  | PaddingUnitValue
+  | readonly [PaddingUnitValue]
+  | readonly [PaddingUnitValue, PaddingUnitValue]
+  | readonly [PaddingUnitValue, PaddingUnitValue, PaddingUnitValue]
+  | readonly [
+      PaddingUnitValue,
+      PaddingUnitValue,
+      PaddingUnitValue,
+      PaddingUnitValue,
+    ];
+
+export interface PaddingProps {
+  padding?: PaddingValue;
+  paddingHorizontal?: UIKitSizeValue;
+  paddingVertical?: UIKitSizeValue;
+}
+
+function PaddingValue(
+  padding?: PaddingValue,
+): string | number | undefined {
+  if (padding === undefined || padding === null) {
+    return undefined;
+  }
+
+  if (Array.isArray(padding)) {
+    return padding.map((value) => Size(value)).join(" ");
+  }
+
+  return Size(padding as UIKitSizeValue);
+}
+
+export function resolvePadding(
+  padding?: PaddingValue,
+  paddingHorizontal?: UIKitSizeValue,
+  paddingVertical?: UIKitSizeValue,
+): string | number | undefined {
+  if (paddingHorizontal !== undefined || paddingVertical !== undefined) {
+    const vertical = Size(paddingVertical);
+    const horizontal = Size(paddingHorizontal);
+    return `${vertical ?? 0} ${horizontal ?? 0}`;
+  }
+
+  return PaddingValue(padding);
+}

package/packages/Frameworks/_shared/StopParentInteraction.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type React from "react";
+import View from "@/packages/Frameworks/View/View";
+
+interface StopParentInteractionProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  blockDefault?: boolean;
+  alignItems?: "center" | "start" | "end" | "stretch";
+  gap?: number;
+  "data-stop-parent-interaction-state"?: boolean;
+}
+
+export default function StopParentInteraction({
+  children,
+  className,
+  style,
+  blockDefault,
+  alignItems,
+  gap,
+  "data-stop-parent-interaction-state": dataStopState,
+}: StopParentInteractionProps) {
+  const handleInteraction = (event: React.MouseEvent) => {
+    if (blockDefault) {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+  };
+
+  return (
+    <View
+      alignItems={alignItems}
+      gap={gap}
+      className={className}
+      style={style}
+      data-stop-parent-interaction-state={dataStopState}
+      onMouseDown={handleInteraction}
+      onClick={handleInteraction}
+    >
+      {children}
+    </View>
+  );
+}

package/packages/Frameworks/_shared/Wind.types.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from "react";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+
+export interface WindProps {
+  width?: UIKitSizeValue;
+  height?: UIKitSizeValue;
+  margin?: UIKitSizeValue;
+  gap?: UIKitSizeValue;
+  alignItems?: CSSProperties["alignItems"];
+  justifyContent?: CSSProperties["justifyContent"];
+  alignSelf?: CSSProperties["alignSelf"];
+  column?: boolean;
+  row?: boolean;
+  fullWidth?: boolean;
+  opacity?: CSSProperties["opacity"];
+  noSquircle?: boolean;
+}

package/packages/Frameworks/_shared/bodyScrollLock.ts

@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect } from "react";
+
+let bodyScrollLockCount = 0;
+let bodyScrollTouchStartY = 0;
+
+type BodyScrollLockSnapshot = {
+  overflow: string;
+  overscrollBehavior: string;
+  documentOverflow: string;
+  documentOverscrollBehavior: string;
+};
+
+let originalBodyStyles: BodyScrollLockSnapshot | null = null;
+
+function getScrollableAncestor(target: EventTarget | null) {
+  if (!(target instanceof Element)) return null;
+
+  let element: Element | null = target;
+  while (element && element !== document.body) {
+    if (element instanceof HTMLElement) {
+      const style = window.getComputedStyle(element);
+      const canScrollY =
+        /(auto|scroll)/.test(style.overflowY) &&
+        element.scrollHeight > element.clientHeight;
+
+      if (canScrollY) return element;
+    }
+
+    element = element.parentElement;
+  }
+
+  return null;
+}
+
+function handleBodyScrollTouchStart(event: TouchEvent) {
+  bodyScrollTouchStartY = event.touches[0]?.clientY ?? 0;
+}
+
+function handleBodyScrollTouchMove(event: TouchEvent) {
+  const currentY = event.touches[0]?.clientY ?? bodyScrollTouchStartY;
+  const deltaY = currentY - bodyScrollTouchStartY;
+  const scrollable = getScrollableAncestor(event.target);
+
+  if (!scrollable) {
+    event.preventDefault();
+    return;
+  }
+
+  const isAtTop = scrollable.scrollTop <= 0;
+  const isAtBottom =
+    scrollable.scrollTop + scrollable.clientHeight >= scrollable.scrollHeight;
+
+  if ((isAtTop && deltaY > 0) || (isAtBottom && deltaY < 0)) {
+    event.preventDefault();
+  }
+}
+
+function acquireBodyScrollLock() {
+  if (typeof document === "undefined") return;
+
+  const body = document.body;
+  const root = document.documentElement;
+
+  if (bodyScrollLockCount === 0) {
+    originalBodyStyles = {
+      overflow: body.style.overflow,
+      overscrollBehavior: body.style.overscrollBehavior,
+      documentOverflow: root.style.overflow,
+      documentOverscrollBehavior: root.style.overscrollBehavior,
+    };
+
+    body.style.overflow = "hidden";
+    body.style.overscrollBehavior = "none";
+    root.style.overflow = "hidden";
+    root.style.overscrollBehavior = "none";
+    document.addEventListener("touchstart", handleBodyScrollTouchStart, {
+      passive: true,
+    });
+    document.addEventListener("touchmove", handleBodyScrollTouchMove, {
+      passive: false,
+    });
+  }
+
+  bodyScrollLockCount += 1;
+}
+
+function releaseBodyScrollLock() {
+  if (typeof document === "undefined") return;
+  if (bodyScrollLockCount === 0) return;
+
+  bodyScrollLockCount -= 1;
+  if (bodyScrollLockCount > 0) return;
+
+  const body = document.body;
+  const root = document.documentElement;
+  const snapshot = originalBodyStyles;
+
+  document.removeEventListener("touchstart", handleBodyScrollTouchStart);
+  document.removeEventListener("touchmove", handleBodyScrollTouchMove);
+  originalBodyStyles = null;
+
+  if (!snapshot) return;
+
+  body.style.overflow = snapshot.overflow;
+  body.style.overscrollBehavior = snapshot.overscrollBehavior;
+  root.style.overflow = snapshot.documentOverflow;
+  root.style.overscrollBehavior = snapshot.documentOverscrollBehavior;
+}
+
+export function useScrollLock(locked = true) {
+  useEffect(() => {
+    if (!locked) return;
+
+    acquireBodyScrollLock();
+
+    return () => {
+      releaseBodyScrollLock();
+    };
+  }, [locked]);
+
+  return {
+    lockScroll: acquireBodyScrollLock,
+    openScroll: releaseBodyScrollLock,
+  };
+}

package/packages/Frameworks/_shared/layer.constants.ts

@@ -0,0 +1,8 @@
+export const LAYER_Z_INDEX = {
+  popover: 99000,
+  modal: 99900,
+  modalStackStep: 20,
+  modalBackdropOffset: -1,
+  modalPopoverOffset: 10,
+  localRaisedOffset: 2,
+} as const;

package/packages/Frameworks/_shared/normalize.ts

@@ -0,0 +1,39 @@
+function isAlreadyResolvedImageSrc(value: string) {
+  return /^(https?:\/\/|\/|data:|blob:)/i.test(value);
+}
+
+export function normalizeUIKitImageSrc(src?: string) {
+  const resolvedSrc = typeof src === "string" ? src.trim() : "";
+
+  if (!resolvedSrc) {
+    return "";
+  }
+
+  if (isAlreadyResolvedImageSrc(resolvedSrc)) {
+    return resolvedSrc;
+  }
+
+  return `/${resolvedSrc}`;
+}
+
+export function normalizeBrandIconClass(iconBrand?: string) {
+  if (!iconBrand) {
+    return undefined;
+  }
+  if (/^iBrand[A-Z]/.test(iconBrand)) {
+    return iconBrand;
+  }
+  if (/^i[A-Z]/.test(iconBrand)) {
+    return `iBrand${iconBrand.slice(1)}`;
+  }
+  return `iBrand${iconBrand}`;
+}
+
+export function normalizeLang(language?: string) {
+  const raw = (language || "text").toLowerCase();
+  if (raw === "html") return "markup";
+  if (raw === "js") return "javascript";
+  if (raw === "ts") return "typescript";
+  if (raw === "md") return "markdown";
+  return raw;
+}

package/packages/Frameworks/_shared/sizing.ts

@@ -0,0 +1,55 @@
+export type UIKitSizeValue = number | string;
+
+function normalizeNumericSize(value: number) {
+  const remValue = value / 10;
+  return `${Number.isInteger(remValue) ? remValue.toFixed(0) : remValue}rem`;
+}
+
+export function Size(value?: UIKitSizeValue | null) {
+  if (value === undefined || value === null || value === "") {
+    return undefined;
+  }
+
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return normalizeNumericSize(value);
+  }
+
+  return value;
+}
+
+export function SizePX(
+  value: UIKitSizeValue | undefined,
+  fallback: number,
+  rootFontSize = 16,
+) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value * 0.1 * rootFontSize;
+  }
+
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    const numeric = parsePixelValue(normalized);
+
+    if (numeric === undefined) return fallback;
+    if (normalized.endsWith("px")) return numeric;
+    if (normalized.endsWith("rem")) return numeric * rootFontSize;
+  }
+
+  return fallback;
+}
+
+function parsePixelValue(value?: string | null) {
+  if (!value) return undefined;
+
+  const numeric = Number.parseFloat(value);
+  if (!Number.isFinite(numeric)) return undefined;
+
+  return numeric;
+}
+
+export function getComputedPixelValue(
+  element: Element,
+  property: keyof CSSStyleDeclaration,
+) {
+  return parsePixelValue(window.getComputedStyle(element)[property] as string);
+}

package/packages/Frameworks/_shared/useControllableState.ts

@@ -0,0 +1,29 @@
+import { useState } from "react";
+
+interface UseControllableStateOptions<T> {
+  value?: T;
+  defaultValue: T;
+}
+
+export function useControllableState<T>({
+  value,
+  defaultValue,
+}: UseControllableStateOptions<T>) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+
+  const setValue = (nextValue: T | ((prevValue: T) => T)) => {
+    if (isControlled) {
+      return;
+    }
+
+    setInternalValue((prevValue) =>
+      typeof nextValue === "function"
+        ? (nextValue as (prevValue: T) => T)(prevValue)
+        : nextValue,
+    );
+  };
+
+  return [currentValue, setValue, isControlled] as const;
+}

package/packages/Styles/_animation.scss

@@ -0,0 +1,42 @@
+:root {
+  --transition-surface-duration: 420ms; // keep in sync with THEME_COLOR_TRANSITION_MS
+  --transition-surface-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-background: background var(--transition-surface-duration)
+    var(--transition-surface-ease);
+  --transition-color: color 250ms ease-out;
+  --transition-font-size: font-size 250ms ease-out;
+  --transition-opacity: opacity 250ms ease-out;
+  --transition-border: border var(--transition-surface-duration)
+    var(--transition-surface-ease);
+  --transition-transform: transform 250ms ease-out;
+  --transition-shadow: box-shadow 250ms ease-out;
+  --transition-radius: border-radius 250ms ease-out;
+  --transition-filter: filter 250ms ease-out, backdrop-filter 250ms ease-out;
+  --transition-fill: fill 250ms ease-out;
+  --transition-stroke: stroke 250ms ease-out;
+  --transition-icon:
+    var(--transition-fill), var(--transition-stroke), var(--transition-color);
+  --transition-surface:
+    var(--transition-border), var(--transition-background),
+    var(--transition-outline);
+  --transition-default:
+    var(--transition-background), var(--transition-color),
+    var(--transition-font-size), var(--transition-outline),
+    var(--transition-opacity), var(--transition-border),
+    var(--transition-transform);
+  --transition-fade: opacity 250ms ease-in-out;
+  --transition-pressable:
+    background 200ms ease, opacity 200ms ease, transform 200ms ease,
+    box-shadow 200ms ease;
+  --transition-pressable-content: opacity 200ms ease, color 200ms ease;
+  --transition-slide:
+    left 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    width 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
+  --transition-image:
+    transform 150ms ease, box-shadow 150ms ease, outline-color 150ms ease;
+  --transition-image-thumbnail:
+    opacity 150ms ease, border-color 150ms ease, transform 150ms ease;
+  --transition-color-fast: color 150ms ease;
+  --s-shallow: scaleX(0.99) scaleY(0.99);
+  --s: scaleX(0.96) scaleY(0.96);
+}