@musecat/uikit 0.1.3 → 0.2.1

package/packages/Components/Nav/hooks/useNavDrag.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useRef } from "react";
-import type { NavProps } from "@/packages/Components/Nav/Nav.types";
+import type { NavProps } from "../Nav.types";
 
 const DRAG_SELECTION_TOUCH_ACTIVATION_DISTANCE = 10;
 const DRAG_SELECTION_TOUCH_HORIZONTAL_RATIO = 1.75;

package/packages/Components/Pagination/Pagination.tsx

@@ -2,13 +2,13 @@
 
 import { useTimeout } from "@musecat/functionkit";
 import { useEffect, useState } from "react";
-import { Word } from "@/i18n/shared";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { PaginationProps } from "@/packages/Components/Pagination/Pagination.types";
-import Text from "@/packages/Components/Text/Text";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import View from "@/packages/Frameworks/View/View";
+import { Word } from "../../../i18n/shared";
+import Icon from "../Icon/Icon";
+import type { IconProps } from "../Icon/Icon.types";
+import type { PaginationProps } from "./Pagination.types";
+import Text from "../Text/Text";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import View from "../../Frameworks/View/View";
 
 function clampPage(page: number, total: number) {
   return Math.min(total, Math.max(1, page));
@@ -138,6 +138,7 @@ export default function Pagination({
   }
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: nav[role="group"] is correct for pagination
     <nav
       aria-label={resolvedNavigationLabel}
       data-color-mode={dataTheme}

package/packages/Components/Pagination/Pagination.types.ts

@@ -1,7 +1,7 @@
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface PaginationProps extends ThemeSystemProps, BorderProps {
   "data-color-mode"?: string;

package/packages/Components/Pill/Pill.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { PillProps } from "@/packages/Components/Pill/Pill.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import Icon from "../Icon/Icon";
+import type { PillProps } from "./Pill.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
 
 export function Pill({
   themePreset,

package/packages/Components/Pill/Pill.types.ts

@@ -1,12 +1,12 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface PillProps extends ThemeSystemProps, RadiusProps, BorderProps {
   "data-color-mode"?: string;

package/packages/Components/Profile/Profile.shared.ts

@@ -1,9 +1,9 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { ProfileAvatarOptions } from "@/packages/Components/Profile/Profile.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { ProfileAvatarOptions } from "./Profile.types";
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
+} from "../../Frameworks/_shared/sizing";
 
 const resolveFallbackAvatarIconSize = (
   outerSize: UIKitSizeValue,

package/packages/Components/Profile/Profile.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import Divider from "@/packages/Components/Divider/Divider";
-import Icon from "@/packages/Components/Icon/Icon";
-import { getProfileAvatarIconProps } from "@/packages/Components/Profile/Profile.shared";
+import Divider from "../Divider/Divider";
+import Icon from "../Icon/Icon";
+import { getProfileAvatarIconProps } from "./Profile.shared";
 import type {
   ProfileProps,
   ProfileRole,
   ProfileSizeOptions,
-} from "@/packages/Components/Profile/Profile.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "./Profile.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 type ResolvedProfileSize = Required<
   Pick<ProfileSizeOptions, "avatar" | "textType" | "badge" | "gap">

package/packages/Components/Profile/Profile.types.ts

@@ -1,7 +1,7 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ThemePaint } from "@/packages/Frameworks/Theme/Theme.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { ThemePaint } from "../../Frameworks/Theme/Theme.types";
 
 export type ProfileAvatarLoading = "eager" | "lazy";
 

package/packages/Components/Progress/Progress.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import type { CSSProperties } from "react";
-import styles from "@/packages/Components/Progress/Progress.module.scss";
-import type { ProgressProps } from "@/packages/Components/Progress/Progress.types";
-import Spinner from "@/packages/Components/Spinner/Spinner";
-import { resolveThemeClasses } from "@/packages/Frameworks/Theme/Theme.types";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Progress.module.scss";
+import type { ProgressProps } from "./Progress.types";
+import Spinner from "../Spinner/Spinner";
+import { resolveThemeClasses } from "../../Frameworks/Theme/Theme.types";
+import View from "../../Frameworks/View/View";
 
 function clampValue(value: number, min: number, max: number) {
   return Math.max(min, Math.min(max, value));

package/packages/Components/Progress/Progress.types.ts

@@ -1,9 +1,9 @@
 import type { CSSProperties } from "react";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   ThemeBackgroundPaint,
   ThemePaint,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface ProgressProps extends RadiusProps {
   "data-color-mode"?: string;

package/packages/Components/Radio/Radio.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import styles from "@/packages/Components/Radio/Radio.module.scss";
-import type { RadioProps } from "@/packages/Components/Radio/Radio.types";
-import Text from "@/packages/Components/Text/Text";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Radio.module.scss";
+import type { RadioProps } from "./Radio.types";
+import Text from "../Text/Text";
+import { Size } from "../../Frameworks/_shared/sizing";
+import View from "../../Frameworks/View/View";
 
 export default function Radio({
   title,

package/packages/Components/Radio/Radio.types.ts

@@ -1,10 +1,10 @@
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface RadioProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color">,

package/packages/Components/Select/Select.keyboard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useRef } from "react";
-import type { Option } from "@/packages/Components/Select/Select.types";
+import type { Option } from "./Select.types";
 
 const TYPE_AHEAD_RESET_MS = 500;
 

package/packages/Components/Select/Select.trigger.tsx

@@ -1,8 +1,8 @@
 "use client";
 import type { KeyboardEvent, ReactElement } from "react";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 interface SelectTriggerProps {
   selectId: string;

package/packages/Components/Select/Select.tsx

@@ -1,7 +1,7 @@
 "use client";
 import type { ReactElement } from "react";
-import type { SelectProps } from "@/packages/Components/Select/Select.types";
-import SelectInner from "@/packages/Components/Select/select.inner";
+import type { SelectProps } from "./Select.types";
+import SelectInner from "./select.inner";
 
 export default function Select(props: SelectProps<false>): ReactElement;
 export default function Select(props: SelectProps<true>): ReactElement;

package/packages/Components/Select/Select.types.ts

@@ -18,7 +18,7 @@ export type SelectChangeEvent<Multiple extends boolean = false> =
   | React.ChangeEvent<HTMLSelectElement>
   | { target: { value: SelectValue<Multiple> } };
 
-import type { LabelSharedProps } from "@/packages/Components/Label/Label.types";
+import type { LabelSharedProps } from "../Label/Label.types";
 
 export interface SelectProps<Multiple extends boolean = false>
   extends LabelSharedProps {

package/packages/Components/Select/Select.utils.ts

@@ -1,7 +1,7 @@
 import type {
   OptGroup,
   Option,
-} from "@/packages/Components/Select/Select.types";
+} from "./Select.types";
 
 type ScrollLockSnapshot = {
   count: number;

package/packages/Components/Select/hooks/useSelectNavigation.ts

@@ -6,19 +6,19 @@ import {
   useCallback,
   useEffect,
 } from "react";
-import type { SelectState } from "@/packages/Components/Select/hooks/useSelectState";
+import type { SelectState } from "./useSelectState";
 import {
   handleEndKey,
   handleHomeKey,
   isPrintableCharacter,
   useTypeAhead,
-} from "@/packages/Components/Select/Select.keyboard";
-import type { Option } from "@/packages/Components/Select/Select.types";
+} from "../Select.keyboard";
+import type { Option } from "../Select.types";
 import {
   findScrollableAncestor,
   lockScrollElementSafe,
   unlockScrollElementSafe,
-} from "@/packages/Components/Select/Select.utils";
+} from "../Select.utils";
 
 export function useSelectNavigation(
   state: SelectState,
@@ -322,10 +322,7 @@ export function useSelectNavigation(
   );
 
   const handleControlKeyDown = useCallback(
-    (
-      e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>,
-      allowSpaceSelection: boolean,
-    ) => {
+    (e: KeyboardEvent<Element>, allowSpaceSelection: boolean) => {
       if (e.key === "Tab") {
         setOpen(false);
         return;
@@ -436,7 +433,7 @@ export function useSelectNavigation(
   const handleTriggerClick = useCallback(() => {
     if (Date.now() < suppressClickUntilRef.current) return;
     toggleOpenFromTrigger();
-  }, [toggleOpenFromTrigger]);
+  }, [toggleOpenFromTrigger, suppressClickUntilRef.current]);
   const handleTriggerPointerUp = useCallback(
     (e: ReactPointerEvent<HTMLButtonElement>) => {
       if (e.pointerType !== "touch") return;
@@ -444,7 +441,7 @@ export function useSelectNavigation(
       suppressClickUntilRef.current = Date.now() + 400;
       toggleOpenFromTrigger();
     },
-    [toggleOpenFromTrigger],
+    [toggleOpenFromTrigger, suppressClickUntilRef],
   );
 
   return {

package/packages/Components/Select/hooks/useSelectSelection.ts

@@ -1,12 +1,12 @@
 "use client";
 import { useCallback } from "react";
-import type { SelectState } from "@/packages/Components/Select/hooks/useSelectState";
+import type { SelectState } from "./useSelectState";
 import type {
   Option,
   SelectChangeEvent,
   SelectValue,
-} from "@/packages/Components/Select/Select.types";
-import { filterOptionsByQuery } from "@/packages/Components/Select/Select.utils";
+} from "../Select.types";
+import { filterOptionsByQuery } from "../Select.utils";
 
 export function useSelectSelection(state: SelectState) {
   const {

package/packages/Components/Select/hooks/useSelectState.ts

@@ -8,17 +8,17 @@ import {
   useRef,
   useState,
 } from "react";
-import { Word } from "@/i18n/shared";
+import { Word } from "../../../../i18n/shared";
 import type {
   Option,
   SelectProps,
-} from "@/packages/Components/Select/Select.types";
+} from "../Select.types";
 import {
   filterOptionsByQuery,
   findScrollableAncestor,
   getStringValues,
   isOptGroup,
-} from "@/packages/Components/Select/Select.utils";
+} from "../Select.utils";
 
 export function useSelectState(props: SelectProps<boolean>) {
   const t = Word();

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

@@ -4,14 +4,13 @@ import type {
   ReactElement,
   MouseEvent as ReactMouseEvent,
 } from "react";
-import Pill from "@/packages/Components/Pill/Pill";
-import SelectTrigger from "@/packages/Components/Select/Select.trigger";
-import type { SelectNavigation } from "@/packages/Components/Select/hooks/useSelectNavigation";
-import type { SelectState } from "@/packages/Components/Select/hooks/useSelectState";
-import type { SelectValue } from "@/packages/Components/Select/Select.types";
-import { filterOptionsByQuery } from "@/packages/Components/Select/Select.utils";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Pill from "../Pill/Pill";
+import type { SelectNavigation } from "./hooks/useSelectNavigation";
+import type { SelectState } from "./hooks/useSelectState";
+import SelectTrigger from "./Select.trigger";
+import type { SelectValue } from "./Select.types";
+import { filterOptionsByQuery } from "./Select.utils";
+import View from "../../Frameworks/View/View";
 
 interface SelectControlProps {
   state: SelectState;
@@ -54,19 +53,10 @@ export default function SelectControl({
     visibleOptions,
   } = state;
 
-  const {
-    placeholder,
-    title,
-    disabled,
-    readOnly,
-    required,
-  } = props;
+  const { placeholder, title, disabled, readOnly, required } = props;
 
-  const {
-    handleControlKeyDown,
-    handleTriggerClick,
-    handleTriggerPointerUp,
-  } = navigation;
+  const { handleControlKeyDown, handleTriggerClick, handleTriggerPointerUp } =
+    navigation;
 
   const selectedPills =
     isMultiple && selectedOptions.length > 0 ? (
@@ -159,9 +149,7 @@ export default function SelectControl({
         }
         value={isMultiple ? query : inputValue}
         placeholder={
-          isMultiple && selectedOptions.length > 0
-            ? undefined
-            : placeholderText
+          isMultiple && selectedOptions.length > 0 ? undefined : placeholderText
         }
         className="Subheadline"
         onFocus={() => {
@@ -186,7 +174,10 @@ export default function SelectControl({
           const nextQuery = e.target.value;
           setOpenSource("keyboard");
           if (!isMultiple) {
-            if (selectedValues.length > 0 && nextQuery !== selectedOptionLabel) {
+            if (
+              selectedValues.length > 0 &&
+              nextQuery !== selectedOptionLabel
+            ) {
               setSelectedValues([]);
               emitNativeChange("" as SelectValue<boolean>);
             }

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

@@ -5,16 +5,16 @@ import {
   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";
+import ContextMenu from "../ContextMenu/ContextMenu";
+import Icon from "../Icon/Icon";
+import Label from "../Label/Label";
+import { useSelectNavigation } from "./hooks/useSelectNavigation";
+import { useSelectSelection } from "./hooks/useSelectSelection";
+import { useSelectState } from "./hooks/useSelectState";
+import type { SelectProps } from "./Select.types";
+import { filterOptionsByQuery } from "./Select.utils";
+import SelectControl from "./select.control";
+import View from "../../Frameworks/View/View";
 
 export default function SelectInner(props: SelectProps<boolean>): ReactElement {
   const state = useSelectState(props);

package/packages/Components/Skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
-import type { SkeletonProps } from "@/packages/Components/Skeleton/Skeleton.types";
-import View from "@/packages/Frameworks/View/View";
+import type { SkeletonProps } from "./Skeleton.types";
+import View from "../../Frameworks/View/View";
 
 export default function Skeleton({
   className,

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

@@ -1,5 +1,5 @@
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
 
 export interface SkeletonProps {
   "data-color-mode"?: string;

package/packages/Components/Spinner/Spinner.tsx

@@ -1,10 +1,10 @@
 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";
+import styles from "./Spinner.module.scss";
+import type { SpinnerProps } from "./Spinner.types";
+import { Size } from "../../Frameworks/_shared/sizing";
+import { resolveThemeClasses } from "../../Frameworks/Theme/Theme.types";
+import View from "../../Frameworks/View/View";
 
 const SPINNER_SEGMENTS = 12;
 const SPINNER_VISUAL_SCALE_BY_TYPE = {

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

@@ -1,6 +1,6 @@
 import type { AriaRole, CSSProperties, SVGAttributes } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ThemePaint } from "@/packages/Frameworks/Theme/Theme.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { ThemePaint } from "../../Frameworks/Theme/Theme.types";
 
 export interface SpinnerProps {
   "data-color-mode"?: string;

package/packages/Components/Text/Text.tsx

@@ -1,7 +1,7 @@
 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";
+import styles from "./Text.module.scss";
+import type { TextProps } from "./Text.types";
+import { Size } from "../../Frameworks/_shared/sizing";
 
 export default function Text({
   children,

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

@@ -1,5 +1,5 @@
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ThemePaint } from "@/packages/Frameworks/Theme/Theme.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { ThemePaint } from "../../Frameworks/Theme/Theme.types";
 
 export interface TextProps {
   "data-color-mode"?: string;

package/packages/Components/TimePicker/TimePicker.core.tsx

@@ -9,10 +9,10 @@ import {
   useMemo,
   useRef,
 } from "react";
-import Text from "@/packages/Components/Text/Text";
-import styles from "@/packages/Components/TimePicker/TimePicker.module.scss";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import Text from "../Text/Text";
+import styles from "./TimePicker.module.scss";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 type Segment = "hour" | "minute" | "second" | "ampm";
 

package/packages/Components/TimePicker/TimePicker.tsx

@@ -10,13 +10,13 @@ import {
   useRef,
   useState,
 } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
-import Label from "@/packages/Components/Label/Label";
-import Text from "@/packages/Components/Text/Text";
-import styles from "@/packages/Components/TimePicker/TimePicker.module.scss";
-import type { TimePickerProps } from "@/packages/Components/TimePicker/TimePicker.types";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../Icon/Icon";
+import Label from "../Label/Label";
+import Text from "../Text/Text";
+import styles from "./TimePicker.module.scss";
+import type { TimePickerProps } from "./TimePicker.types";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 type Segment = "hour" | "minute" | "second" | "ampm";
 

package/packages/Components/TimePicker/TimePicker.types.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from "@/packages/Components/Label/Label.types";
+import type { LabelProps } from "../Label/Label.types";
 
 export interface TimePickerProps {
   "data-color-mode"?: string;

package/packages/Components/Timeline/Timeline.tsx

@@ -1,11 +1,11 @@
-import Divider from "@/packages/Components/Divider/Divider";
-import Icon from "@/packages/Components/Icon/Icon";
+import Divider from "../Divider/Divider";
+import Icon from "../Icon/Icon";
 import type {
   TimelineItemProps,
   TimelineProps,
-} from "@/packages/Components/Timeline/Timeline.types";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "./Timeline.types";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 function TimelineItem({
   item,

package/packages/Components/Timeline/Timeline.types.ts

@@ -1,6 +1,6 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { ThemeSystemProps } from "@/packages/Frameworks/Theme/Theme.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { ThemeSystemProps } from "../../Frameworks/Theme/Theme.types";
 
 export interface TimelineItemProps {
   children?: React.ReactNode;

package/packages/Components/Title/Title.tsx

@@ -1,15 +1,15 @@
 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 { IconInner } from "../Icon/Icon";
+import IconGroup from "../Icon/Icon.group";
+import Pill from "../Pill/Pill";
+import Text from "../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";
+} from "./Title.types";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 const buildRenderKeys = <T,>(
   items: T[],