@musecat/uikit 0.1.1

package/packages/Frameworks/Pressable/Pressable.types.ts

@@ -0,0 +1,73 @@
+import type { MotionProps } from "motion/react";
+import type { LinkProps } from "next/link";
+import type { PaddingProps } from "@/packages/Frameworks/_shared/Padding.types";
+import type { WindProps } from "@/packages/Frameworks/_shared/Wind.types";
+import type { PopoverConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+export interface PressableProps
+  extends Omit<
+      React.HTMLAttributes<HTMLElement>,
+      "title" | "onClick" | "onChange" | "value" | "checked" | "type" | "disabled" | "tabIndex" | "popover" | "color"
+    >,
+    ThemeSystemProps,
+    BorderProps,
+    RadiusProps,
+    PaddingProps,
+    WindProps {
+  "data-color-mode"?: string;
+  motion?: MotionProps;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  form?: true | Omit<React.ComponentProps<"form">, "children">;
+  href?: LinkProps["href"];
+  target?: HTMLAnchorElement["target"];
+  rel?: HTMLAnchorElement["rel"];
+  download?: React.AnchorHTMLAttributes<HTMLAnchorElement>["download"];
+  checked?: HTMLInputElement["checked"];
+  onClick?: (e: React.MouseEvent) => void;
+  onChange?: (e: React.ChangeEvent) => void;
+  title?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-controls"?: string;
+  "aria-expanded"?: boolean;
+  "aria-haspopup"?: React.AriaAttributes["aria-haspopup"];
+  type?: HTMLButtonElement["type"] | "checkbox" | "radio";
+  disabled?: boolean;
+  readOnly?: boolean;
+  value?: string | number;
+  name?: string;
+  ref?: React.Ref<HTMLElement>;
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  onMouseLeave?: (e: React.MouseEvent) => void;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  onMouseUp?: (e: React.MouseEvent) => void;
+  onPointerDown?: (e: React.PointerEvent) => void;
+  onPointerUp?: (e: React.PointerEvent) => void;
+  onPointerCancel?: (e: React.PointerEvent) => void;
+  onPointerLeave?: (e: React.PointerEvent) => void;
+  onTouchStart?: (e: React.TouchEvent) => void;
+  onTouchEnd?: (e: React.TouchEvent) => void;
+  onTouchCancel?: (e: React.TouchEvent) => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onKeyUp?: (e: React.KeyboardEvent) => void;
+  onLongPress?: (e: React.MouseEvent | React.TouchEvent) => void;
+  onLongPressEnd?: (e: React.MouseEvent | React.TouchEvent) => void;
+  longPressDelay?: number;
+  tabIndex?: number;
+  popover?: Omit<PopoverConfig, "anchorRef"> & {
+    content: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnOutsideClick?: boolean;
+    recalcKey?: string | number;
+  };
+}

package/packages/Frameworks/Squircle/Squircle.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { getSvgPath } from "figma-squircle";
+import { motion } from "motion/react";
+import {
+  forwardRef,
+  type Ref,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  getComputedPixelValue,
+  SizePX,
+} from "@/packages/Frameworks/_shared/sizing";
+import type { SquircleProps } from "@/packages/Frameworks/Squircle/Squircle.types";
+import { Radius as resolveRadius } from "@/packages/Frameworks/Theme/Radius.types";
+
+function resolveCornerRadius(
+  radius: SquircleProps["radius"],
+  fallback: number,
+) {
+  if (Array.isArray(radius)) return undefined;
+  if (typeof radius === "number") return SizePX(radius, fallback);
+  if (typeof radius === "string") return SizePX(radius, fallback);
+  return fallback;
+}
+
+function resolveCornerRadiusValue(
+  radius: SquircleProps["radius"],
+  fallback: number,
+) {
+  return resolveCornerRadius(radius, fallback) ?? fallback;
+}
+
+function resolveCornerRadii(radius: SquircleProps["radius"], fallback: number) {
+  if (!Array.isArray(radius)) {
+    const value = resolveCornerRadiusValue(radius, fallback);
+
+    return {
+      topLeft: value,
+      topRight: value,
+      bottomRight: value,
+      bottomLeft: value,
+    };
+  }
+
+  const topLeft = resolveCornerRadiusValue(radius[0], fallback);
+  const topRight = resolveCornerRadiusValue(radius[1] ?? radius[0], fallback);
+  const bottomRight = resolveCornerRadiusValue(
+    radius[2] ?? radius[0],
+    fallback,
+  );
+  const bottomLeft = resolveCornerRadiusValue(
+    radius[3] ?? radius[1] ?? radius[0],
+    fallback,
+  );
+
+  return {
+    topLeft,
+    topRight,
+    bottomRight,
+    bottomLeft,
+  };
+}
+
+function resolvePathCornerRadius(
+  cornerRadius: number | undefined,
+  computedCornerRadius: number | undefined,
+  fallbackCornerRadius: number,
+) {
+  return cornerRadius ?? computedCornerRadius ?? fallbackCornerRadius;
+}
+
+function setRef(ref: Ref<HTMLElement> | undefined, value: HTMLElement | null) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  (ref as any).current = value;
+}
+
+function getElementSize(
+  element: HTMLElement,
+  defaultWidth?: number,
+  defaultHeight?: number,
+) {
+  const rect = element.getBoundingClientRect();
+
+  return {
+    width:
+      element.offsetWidth ||
+      element.clientWidth ||
+      element.scrollWidth ||
+      rect.width ||
+      defaultWidth ||
+      0,
+    height:
+      element.offsetHeight ||
+      element.clientHeight ||
+      element.scrollHeight ||
+      rect.height ||
+      defaultHeight ||
+      0,
+  };
+}
+
+const Squircle = forwardRef<HTMLElement, SquircleProps>(function Squircle(
+  {
+    as: Component = "div",
+    radius,
+    cornerRadius,
+    cornerSmoothing,
+    defaultWidth,
+    defaultHeight,
+    preserveSmoothing,
+    motion: motionProps,
+    children,
+    style,
+    ...props
+  },
+  ref,
+) {
+  const elementRef = useRef<HTMLElement | null>(null);
+  const [size, setSize] = useState({
+    width: defaultWidth ?? 0,
+    height: defaultHeight ?? 0,
+  });
+  const [computedCornerRadius, setComputedCornerRadius] = useState<{
+    topLeft?: number;
+    topRight?: number;
+    bottomRight?: number;
+    bottomLeft?: number;
+  }>({});
+
+  const resolvedRadius = resolveRadius(radius);
+  const _fallbackCornerRadius = resolveCornerRadius(radius, 8) ?? 8;
+  const fallbackCornerRadii = resolveCornerRadii(radius, 8);
+  const resolvedCornerRadii = {
+    topLeft: resolvePathCornerRadius(
+      cornerRadius,
+      computedCornerRadius.topLeft,
+      fallbackCornerRadii.topLeft,
+    ),
+    topRight: resolvePathCornerRadius(
+      cornerRadius,
+      computedCornerRadius.topRight,
+      fallbackCornerRadii.topRight,
+    ),
+    bottomRight: resolvePathCornerRadius(
+      cornerRadius,
+      computedCornerRadius.bottomRight,
+      fallbackCornerRadii.bottomRight,
+    ),
+    bottomLeft: resolvePathCornerRadius(
+      cornerRadius,
+      computedCornerRadius.bottomLeft,
+      fallbackCornerRadii.bottomLeft,
+    ),
+  };
+  const setElementRef = useCallback(
+    (element: HTMLElement | null) => {
+      elementRef.current = element;
+      setRef(ref, element);
+    },
+    [ref],
+  );
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const updateSize = () => {
+      setSize(getElementSize(element, defaultWidth, defaultHeight));
+      setComputedCornerRadius({
+        topLeft: getComputedPixelValue(element, "borderTopLeftRadius") ?? 0,
+        topRight: getComputedPixelValue(element, "borderTopRightRadius") ?? 0,
+        bottomRight:
+          getComputedPixelValue(element, "borderBottomRightRadius") ?? 0,
+        bottomLeft:
+          getComputedPixelValue(element, "borderBottomLeftRadius") ?? 0,
+      });
+    };
+    updateSize();
+
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [defaultHeight, defaultWidth]);
+
+  const clipPath =
+    size.width && size.height
+      ? `path('${getSvgPath({
+          width: size.width,
+          height: size.height,
+          topLeftCornerRadius: resolvedCornerRadii.topLeft,
+          topRightCornerRadius: resolvedCornerRadii.topRight,
+          bottomRightCornerRadius: resolvedCornerRadii.bottomRight,
+          bottomLeftCornerRadius: resolvedCornerRadii.bottomLeft,
+          cornerSmoothing: 0.6,
+          preserveSmoothing,
+        })}')`
+      : undefined;
+
+  const motionEnabled = Boolean(motionProps);
+  const MotionElement = useMemo(() => {
+    if (!motionEnabled) return null;
+    if (typeof Component === "string") return (motion as any)[Component];
+    return motion.create(Component);
+  }, [Component, motionEnabled]);
+
+  const {
+    background,
+    backgroundColor,
+    backdropFilter,
+    WebkitBackdropFilter,
+    ...restStyle
+  } = style || {};
+
+  const sharedStyle = {
+    borderRadius: resolvedRadius ?? resolvedCornerRadii.topLeft,
+    "--squircle-clip": clipPath,
+    ...(background !== undefined ? { "--theme-bg": background } : {}),
+    ...(backgroundColor !== undefined ? { "--theme-bg": backgroundColor } : {}),
+    ...(backdropFilter !== undefined
+      ? { "--theme-backdrop-filter": backdropFilter }
+      : {}),
+    ...(WebkitBackdropFilter !== undefined
+      ? { "--theme-backdrop-filter": WebkitBackdropFilter }
+      : {}),
+    ...restStyle,
+  } as any;
+
+  if (MotionElement) {
+    return (
+      <MotionElement
+        {...(motionProps as any)}
+        {...(props as any)}
+        ref={setElementRef as any}
+        data-squircle={resolvedCornerRadii.topLeft}
+        style={sharedStyle}
+      >
+        {children}
+      </MotionElement>
+    );
+  }
+
+  return (
+    <Component
+      {...props}
+      ref={setElementRef as any}
+      data-squircle={resolvedCornerRadii.topLeft}
+      style={sharedStyle}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export default Squircle;

package/packages/Frameworks/Squircle/Squircle.types.ts

@@ -0,0 +1,15 @@
+import type { MotionProps } from "motion/react";
+import type { ElementType, HTMLAttributes } from "react";
+import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
+
+export interface SquircleProps
+  extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+  as?: ElementType;
+  radius?: RadiusValue;
+  cornerRadius?: number;
+  cornerSmoothing?: number;
+  defaultWidth?: number;
+  defaultHeight?: number;
+  preserveSmoothing?: boolean;
+  motion?: MotionProps;
+}

package/packages/Frameworks/Theme/Radius.types.ts

@@ -0,0 +1,55 @@
+import {
+  Size,
+  type UIKitSizeValue,
+} from "@/packages/Frameworks/_shared/sizing";
+
+type RadiusScale =
+  | "None"
+  | "ExtraLight"
+  | "Light"
+  | "Regular"
+  | "Bold"
+  | "ExtraBold"
+  | "Heavy"
+  | "Circle";
+export type RadiusUnitValue = RadiusScale | UIKitSizeValue;
+type RadiusArrayValue = RadiusUnitValue;
+
+export type RadiusValue =
+  | RadiusUnitValue
+  | readonly [RadiusUnitValue]
+  | readonly [RadiusArrayValue, RadiusArrayValue]
+  | readonly [RadiusArrayValue, RadiusArrayValue, RadiusArrayValue]
+  | readonly [
+      RadiusArrayValue,
+      RadiusArrayValue,
+      RadiusArrayValue,
+      RadiusArrayValue,
+    ];
+export interface RadiusProps {
+  radius?: RadiusValue;
+}
+
+const RADIUS_TOKEN: Partial<Record<RadiusScale, string | number>> = {
+  None: 0,
+  ExtraLight: "var(--radius-system-extra-light)",
+  Light: "var(--radius-system-light)",
+  Regular: "var(--radius-system)",
+  Bold: "var(--radius-system-bold)",
+  ExtraBold: "var(--radius-system-extra-bold)",
+  Heavy: "var(--radius-system-heavy)",
+  Circle: "var(--radius-circle)",
+};
+
+export function Radius(radius?: RadiusValue): string | number | undefined {
+  if (Array.isArray(radius)) {
+    return radius.map((value) => Radius(value)).join(" ");
+  }
+
+  if (typeof radius === "string") {
+    return RADIUS_TOKEN[radius as RadiusScale] ?? Size(radius);
+  }
+  if (typeof radius === "number") {
+    return Size(radius);
+  }
+}