@musecat/uikit 0.1.3 → 0.2.1

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

@@ -1,7 +1,7 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import type { ViewProps } from "../View.types";
 
 export type DNDViewItemState<T> = {
   item: T;

package/packages/Frameworks/View/HScrollView/HScrollView.tsx

@@ -14,21 +14,21 @@ import {
   useRef,
   useState,
 } from "react";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import EdgeEffect from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
-import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import { Size } from "../../_shared/sizing";
+import EdgeEffect from "../../EdgeEffect/EdgeEffect";
+import { Radius } from "../../Theme/Radius.types";
 import {
   BackgroundBlur,
   Border,
   resolveThemeClasses,
-} from "@/packages/Frameworks/Theme/Theme.types";
-import styles from "@/packages/Frameworks/View/HScrollView/HScrollView.module.scss";
+} from "../../Theme/Theme.types";
+import styles from "./HScrollView.module.scss";
 import type {
   HScrollViewProps,
   HScrollViewViewport,
-} from "@/packages/Frameworks/View/HScrollView/HScrollView.types";
-import View from "@/packages/Frameworks/View/View";
-import viewStyles from "@/packages/Frameworks/View/View.module.scss";
+} from "./HScrollView.types";
+import View from "../View";
+import viewStyles from "../View.module.scss";
 
 type HScrollViewStyle = CSSProperties & {
   "--view-default-gap"?: string | number;

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

@@ -1,6 +1,6 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import type { ViewProps } from "../View.types";
 
 export type HScrollViewViewport = "w1" | "w2" | "w3" | "w4";
 export type HScrollViewActive = boolean | HScrollViewViewport;

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.counter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Text from "../../../../Components/Text/Text";
+import View from "../../View";
 
 export function DialogImageCounter({
   selectedIndex,

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.footer.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import type { MutableRefObject } from "react";
-import { DialogImageCounter } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.counter";
-import { DialogImageList } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.list";
+import { DialogImageCounter } from "./ImageDialog.counter";
+import { DialogImageList } from "./ImageDialog.list";
 import type {
   ImageItem,
   ImageProps,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.types";
+import View from "../../View";
 
 export interface DialogImageFooterProps {
   dialog: NonNullable<ImageProps["dialog"]>;
@@ -32,6 +32,10 @@ export function DialogImageFooter({
   canScrollPrev,
   canScrollNext,
 }: DialogImageFooterProps) {
+  void scrollPrev;
+  void scrollNext;
+  void canScrollPrev;
+  void canScrollNext;
   if (!dialog.footer) return null;
 
   const selectedItem = items[selectedIndex];

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.header.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import Icon from "@/packages/Components/Icon/Icon";
-import type { ImageProps } from "@/packages/Frameworks/View/ImageView/Image.types";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../../../../Components/Icon/Icon";
+import type { ImageProps } from "../Image.types";
+import View from "../../View";
 
 export interface DialogImageHeaderProps {
   config?: NonNullable<ImageProps["dialog"]>["header"];

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.list.tsx

@@ -2,14 +2,14 @@
 
 import NextImage from "next/image";
 import type { MutableRefObject } from "react";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import styles from "@/packages/Frameworks/View/ImageView/Image.module.scss";
-import type { ImageItem } from "@/packages/Frameworks/View/ImageView/Image.types";
+import Pressable from "../../../Pressable/Pressable";
+import styles from "../Image.module.scss";
+import type { ImageItem } from "../Image.types";
 import {
   resolveBlurDataURL,
   resolveImageSrc,
-} from "@/packages/Frameworks/View/ImageView/Image.utils";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.utils";
+import View from "../../View";
 
 export interface DialogImageListProps {
   items: ImageItem[];

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.slide.tsx

@@ -4,12 +4,12 @@ import NextImage from "next/image";
 import type {
   ImageItem,
   ImageOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
+} from "../Image.types";
 import {
   resolveImageSrc,
   resolveOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.utils";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.utils";
+import View from "../../View";
 
 export interface DialogImageSlideProps {
   item: ImageItem;

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.tsx

@@ -1,19 +1,19 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { DialogImageFooter } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.footer";
-import { DialogImageHeader } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.header";
-import { DialogImageSlide } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.slide";
+import { DialogImageFooter } from "./ImageDialog.footer";
+import { DialogImageHeader } from "./ImageDialog.header";
+import { DialogImageSlide } from "./ImageDialog.slide";
 import {
   ImageLeftControl,
   ImageRightControl,
-} from "@/packages/Frameworks/View/ImageView/Image.controls";
-import { useImageDialog } from "@/packages/Frameworks/View/ImageView/Image.hooks";
+} from "../Image.controls";
+import { useImageDialog } from "../Image.hooks";
 import type {
   ImageItem,
   ImageProps,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.types";
+import View from "../../View";
 
 export type ImageDialogProps = {
   items: ImageItem[];

package/packages/Frameworks/View/ImageView/Image.controls.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
+import Icon from "../../../Components/Icon/Icon";
 
 export type ImageControlProps = {
   onClick: () => void;

package/packages/Frameworks/View/ImageView/Image.tsx

@@ -2,32 +2,51 @@
 
 import NextImage from "next/image";
 import { useCallback, useMemo, useState } from "react";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import HScrollView from "@/packages/Frameworks/View/HScrollView/HScrollView";
-import ImageDialog from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import Dialog from "../../Dialog/Dialog";
+import Pressable from "../../Pressable/Pressable";
+import HScrollView from "../HScrollView/HScrollView";
+import ImageDialog from "./Dialog/ImageDialog";
 import {
   ImageLeftControl,
   ImageRightControl,
-} from "@/packages/Frameworks/View/ImageView/Image.controls";
-import type { ImageOverlay, ImageProps } from "@/packages/Frameworks/View/ImageView/Image.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+} from "./Image.controls";
+import type {
+  ImageItem,
+  ImageOverlay,
+  ImageProps,
+} from "./Image.types";
 import {
   resolveAtIndex,
   resolveBlurDataURL,
   resolveImageSrc,
   resolveItems,
   resolveOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.utils";
-import View from "@/packages/Frameworks/View/View";
+} from "./Image.utils";
+import View from "../View";
 
 const DEFAULT_GROUP_WIDTH = "auto";
 const DEFAULT_GROUP_HEIGHT = "29rem";
 
-const PRESSABLE_STYLE: React.CSSProperties = { position: "relative", overflow: "hidden" };
-const OVERLAY_STYLE: React.CSSProperties = { position: "absolute", inset: 0, pointerEvents: "none" };
-const IMG_STYLE: React.CSSProperties = { height: "100%", objectFit: "cover", objectPosition: "center", display: "block" };
-const NEXT_IMG_STYLE: React.CSSProperties = { objectFit: "cover", objectPosition: "center" };
+const PRESSABLE_STYLE: React.CSSProperties = {
+  position: "relative",
+  overflow: "hidden",
+};
+const OVERLAY_STYLE: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  pointerEvents: "none",
+};
+const IMG_STYLE: React.CSSProperties = {
+  height: "100%",
+  objectFit: "cover",
+  objectPosition: "center",
+  display: "block",
+};
+const NEXT_IMG_STYLE: React.CSSProperties = {
+  objectFit: "cover",
+  objectPosition: "center",
+};
 
 function ImageGroupItem({
   item,
@@ -42,11 +61,17 @@ function ImageGroupItem({
   priority,
   openDialog,
 }: {
-  item: { id: number; src: string; alt: string; srcDialog?: string; blurDataURL?: string };
+  item: {
+    id: number;
+    src: string;
+    alt: string;
+    srcDialog?: string;
+    blurDataURL?: string;
+  };
   index: number;
   dialog?: ImageProps["dialog"];
   className?: string;
-  radius?: string;
+  radius?: import("../../Theme/Radius.types").RadiusValue;
   width?: UIKitSizeValue | UIKitSizeValue[];
   height?: UIKitSizeValue | UIKitSizeValue[];
   overlay?: ImageOverlay;
@@ -89,11 +114,7 @@ function ImageGroupItem({
           style={NEXT_IMG_STYLE}
         />
       )}
-      {resolvedOverlay && (
-        <View style={OVERLAY_STYLE}>
-          {resolvedOverlay}
-        </View>
-      )}
+      {resolvedOverlay && <View style={OVERLAY_STYLE}>{resolvedOverlay}</View>}
     </Pressable>
   );
 }
@@ -164,9 +185,7 @@ export default function Image({
           className={
             typeof control === "object" ? control.groupClassName : undefined
           }
-          style={
-            typeof control === "object" ? control.groupStyle : undefined
-          }
+          style={typeof control === "object" ? control.groupStyle : undefined}
         >
           {renderLeft && (
             <ImageLeftControl
@@ -192,7 +211,7 @@ export default function Image({
   if (items.length === 0) return null;
 
   if (items.length === 1) {
-    const item = items[0]!;
+    const item = items[0] as ImageItem;
     const resolvedWidth = resolveAtIndex(width, 0);
     const resolvedHeight = resolveAtIndex(height, 0);
     const resolvedOverlay = resolveOverlay(overlay, 0);
@@ -309,9 +328,7 @@ export default function Image({
 
         {}
         {resolvedOverlay && (
-          <View style={OVERLAY_STYLE}>
-            {resolvedOverlay}
-          </View>
+          <View style={OVERLAY_STYLE}>{resolvedOverlay}</View>
         )}
       </View>
     );

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

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import type { RadiusProps } from "../../Theme/Radius.types";
 
 export type ImageItem = {
   id: number;

package/packages/Frameworks/View/ImageView/Image.utils.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type {
   ImageItem,
   ImageOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
+} from "./Image.types";
 
 export type ImageMode = "inline" | "dialog";
 
@@ -75,5 +75,5 @@ export function resolveBlurDataURL(item: ImageItem, index: number): string {
     String(item.id)
       .split("")
       .reduce((acc, char) => acc + char.charCodeAt(0), 0) + index;
-  return FALLBACK_BLURS[hash % FALLBACK_BLURS.length]!;
+  return FALLBACK_BLURS[hash % FALLBACK_BLURS.length] ?? "";
 }

package/packages/Frameworks/View/View.tsx

@@ -1,20 +1,20 @@
 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 { resolvePadding } from "../_shared/Padding.types";
+import { Size } from "../_shared/sizing";
+import Squircle from "../Squircle/Squircle";
+import { Radius } from "../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";
+} from "../Theme/Theme.types";
+import DNDView from "./DNDView/DNDView";
+import styles from "./View.module.scss";
+import type { ViewProps } from "./View.types";
 
 type ViewStyle = CSSProperties & {
   "--view-default-gap"?: string | number;

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

@@ -1,13 +1,13 @@
 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 { PaddingProps } from "../_shared/Padding.types";
+import type { UIKitSizeValue } from "../_shared/sizing";
+import type { WindProps } from "../_shared/Wind.types";
+import type { RadiusProps } from "../Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../Theme/Theme.types";
 
 export interface ViewProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "color">,

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

@@ -1,7 +1,7 @@
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
+} from "./sizing";
 
 type PaddingUnitValue = UIKitSizeValue;
 
@@ -23,9 +23,7 @@ export interface PaddingProps {
   paddingVertical?: UIKitSizeValue;
 }
 
-function PaddingValue(
-  padding?: PaddingValue,
-): string | number | undefined {
+function PaddingValue(padding?: PaddingValue): string | number | undefined {
   if (padding === undefined || padding === null) {
     return undefined;
   }

package/packages/Frameworks/_shared/StopParentInteraction.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type React from "react";
-import View from "@/packages/Frameworks/View/View";
+import View from "../View/View";
 
 interface StopParentInteractionProps {
   children: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { UIKitSizeValue } from "./sizing";
 
 export interface WindProps {
   width?: UIKitSizeValue;