@musecat/uikit 0.2.0 → 0.2.1

package/README.md

@@ -5,7 +5,29 @@ A Next.js 16 + React 19 + TypeScript UI Design component library.
 ## Installation
 
 ```bash
-npm install @musecat/uikit
+npm install @musecat/uikit @musecat/functionkit
+```
+
+This package ships **raw TypeScript + SCSS source** (no prebuilt bundle), so your app must transpile it.
+
+### Next.js setup
+
+Add the packages to `transpilePackages` in `next.config.ts`:
+
+```ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["@musecat/uikit", "@musecat/functionkit"],
+};
+
+export default nextConfig;
+```
+
+Install the Sass compiler so the bundled `*.module.scss` styles are compiled:
+
+```bash
+npm install -D sass
 ```
 
 ## Usage
@@ -50,7 +72,7 @@ This package includes `.agents/references/` directory with detailed documentatio
 - [es-hangul](https://es-hangul.toss.im/)
 - [MapLibre GL JS](https://maplibre.org/)
 
-Built with [tsup](https://tsup.egoist.dev/) and [TypeScript](https://www.typescriptlang.org/).
+Published as raw TypeScript + SCSS source and built with [TypeScript](https://www.typescriptlang.org/).
 
 ## License
 

package/index.ts

@@ -1,48 +1,4 @@
-/// <reference path="./global.d.ts" />
 // Frameworks
-export { default as View } from "./packages/Frameworks/View/View";
-export { default as Pressable } from "./packages/Frameworks/Pressable/Pressable";
-export { default as ImageView } from "./packages/Frameworks/View/ImageView/Image";
-export { default as HScrollView } from "./packages/Frameworks/View/HScrollView/HScrollView";
-export { default as DNDView } from "./packages/Frameworks/View/DNDView/DNDView";
-export { default as Dialog, useDialog } from "./packages/Frameworks/Dialog/Dialog";
-export { dialog, DialogStore } from "./packages/Frameworks/Dialog/Dialog.store";
-export type { DialogInstance } from "./packages/Frameworks/Dialog/Dialog.store";
-export { default as DialogBootstrap } from "./packages/Frameworks/Dialog/Dialog.boot";
-export { default as ToasterBootstrap, toast } from "./packages/Frameworks/Toaster/Toaster.boot";
-export type { ToasterBootstrapProps } from "./packages/Frameworks/Toaster/Toaster.types";
-export { default as Squircle } from "./packages/Frameworks/Squircle/Squircle";
-export { default as EdgeEffect } from "./packages/Frameworks/EdgeEffect/EdgeEffect";
-export { motionTransitions, motionPresets } from "./packages/Frameworks/Motion/Motion.presets";
-export { default as StopParentInteraction } from "./packages/Frameworks/_shared/StopParentInteraction";
-export { useScrollLock } from "./packages/Frameworks/_shared/bodyScrollLock";
-export { useControllableState } from "./packages/Frameworks/_shared/useControllableState";
-export { Size, SizePX } from "./packages/Frameworks/_shared/sizing";
-export { normalizeUIKitImageSrc, normalizeBrandIconClass, normalizeLang } from "./packages/Frameworks/_shared/normalize";
-export { LAYER_Z_INDEX } from "./packages/Frameworks/_shared/layer.constants";
-export { default as DialogHeader } from "./packages/Frameworks/Dialog/contents/Dialog.header";
-export { default as DialogFooter } from "./packages/Frameworks/Dialog/contents/Dialog.footer";
-
-// Theme
-export {
-  Shadow,
-  Border,
-  BackgroundBlur,
-  resolveThemeClasses,
-  resolveThemeHasBorder,
-  type ThemePreset,
-  type ThemePaint,
-  type ThemeBackgroundPaint,
-  type ThemeBorderPaint,
-  type ThemeBorderWidth,
-  type ThemeShadow,
-  type ShadowScale,
-  type ThemeSystemProps,
-  type BorderProps,
-  type BackgroundBlurValue,
-} from "./packages/Frameworks/Theme/Theme.types";
-export { Radius } from "./packages/Frameworks/Theme/Radius.types";
-export type { RadiusProps, RadiusValue, RadiusScale } from "./packages/Frameworks/Theme/Radius.types";
 
 // Components
 export { default as Box } from "./packages/Components/Box/Box";
@@ -60,7 +16,11 @@ export { default as Header } from "./packages/Components/Header/Header";
 export { default as Icon } from "./packages/Components/Icon/Icon";
 export { default as Input } from "./packages/Components/Input/Input";
 export { default as Label } from "./packages/Components/Label/Label";
-export { default as Layout, LayoutGrid, LayoutSection } from "./packages/Components/Layout/Layout";
+export {
+  default as Layout,
+  LayoutGrid,
+  LayoutSection,
+} from "./packages/Components/Layout/Layout";
 export { default as MapOSM } from "./packages/Components/Maps/OSM/MapOSM";
 export { default as Nav } from "./packages/Components/Nav/Nav";
 export { default as Pagination } from "./packages/Components/Pagination/Pagination";
@@ -72,8 +32,67 @@ export { default as Select } from "./packages/Components/Select/Select";
 export { default as Skeleton } from "./packages/Components/Skeleton/Skeleton";
 export { default as Spinner } from "./packages/Components/Spinner/Spinner";
 export { default as Text } from "./packages/Components/Text/Text";
-export { default as TimePicker } from "./packages/Components/TimePicker/TimePicker";
 export { default as Timeline } from "./packages/Components/Timeline/Timeline";
+export { default as TimePicker } from "./packages/Components/TimePicker/TimePicker";
 export { default as Title } from "./packages/Components/Title/Title";
 export { default as Toggle } from "./packages/Components/Toggle/Toggle";
 export { default as Tooltip } from "./packages/Components/Tooltip/Tooltip";
+export { useScrollLock } from "./packages/Frameworks/_shared/bodyScrollLock";
+export { LAYER_Z_INDEX } from "./packages/Frameworks/_shared/layer.constants";
+export {
+  normalizeBrandIconClass,
+  normalizeLang,
+  normalizeUIKitImageSrc,
+} from "./packages/Frameworks/_shared/normalize";
+export { default as StopParentInteraction } from "./packages/Frameworks/_shared/StopParentInteraction";
+export { Size, SizePX } from "./packages/Frameworks/_shared/sizing";
+export { useControllableState } from "./packages/Frameworks/_shared/useControllableState";
+export { default as DialogFooter } from "./packages/Frameworks/Dialog/contents/Dialog.footer";
+export { default as DialogHeader } from "./packages/Frameworks/Dialog/contents/Dialog.header";
+export {
+  default as Dialog,
+  useDialog,
+} from "./packages/Frameworks/Dialog/Dialog";
+export { default as DialogBootstrap } from "./packages/Frameworks/Dialog/Dialog.boot";
+export type { DialogInstance } from "./packages/Frameworks/Dialog/Dialog.store";
+export { DialogStore, dialog } from "./packages/Frameworks/Dialog/Dialog.store";
+export { default as EdgeEffect } from "./packages/Frameworks/EdgeEffect/EdgeEffect";
+export {
+  motionPresets,
+  motionTransitions,
+} from "./packages/Frameworks/Motion/Motion.presets";
+export { default as Pressable } from "./packages/Frameworks/Pressable/Pressable";
+export { default as Squircle } from "./packages/Frameworks/Squircle/Squircle";
+export type {
+  RadiusProps,
+  RadiusScale,
+  RadiusValue,
+} from "./packages/Frameworks/Theme/Radius.types";
+export { Radius } from "./packages/Frameworks/Theme/Radius.types";
+// Theme
+export {
+  BackgroundBlur,
+  type BackgroundBlurValue,
+  Border,
+  type BorderProps,
+  resolveThemeClasses,
+  resolveThemeHasBorder,
+  Shadow,
+  type ShadowScale,
+  type ThemeBackgroundPaint,
+  type ThemeBorderPaint,
+  type ThemeBorderWidth,
+  type ThemePaint,
+  type ThemePreset,
+  type ThemeShadow,
+  type ThemeSystemProps,
+} from "./packages/Frameworks/Theme/Theme.types";
+export {
+  default as ToasterBootstrap,
+  toast,
+} from "./packages/Frameworks/Toaster/Toaster.boot";
+export type { ToasterBootstrapProps } from "./packages/Frameworks/Toaster/Toaster.types";
+export { default as DNDView } from "./packages/Frameworks/View/DNDView/DNDView";
+export { default as HScrollView } from "./packages/Frameworks/View/HScrollView/HScrollView";
+export { default as ImageView } from "./packages/Frameworks/View/ImageView/Image";
+export { default as View } from "./packages/Frameworks/View/View";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@musecat/uikit",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "type": "module",
   "description": "High-performance Next.js React UI component library with Squircle shapes, theme tokens, and gesture-driven overlays",

package/packages/Components/Card/Card.default.tsx

@@ -2,11 +2,13 @@ import clsx from "clsx";
 import { useInBoxContent } from "../Box/Box";
 import styles from "./Card.module.scss";
 import type { CardDefaultProps } from "./Card.types";
-import { buildRenderKeys } from "./Card.utils";
+import {
+  buildRenderKeys,
+  normalizeCardIcon,
+} from "./Card.utils";
 import Icon from "../Icon/Icon";
 import Pill from "../Pill/Pill";
 import Text from "../Text/Text";
-import { normalizeCardIcon } from "./Card.utils";
 import StopParentInteraction from "../../Frameworks/_shared/StopParentInteraction";
 import Pressable from "../../Frameworks/Pressable/Pressable";
 import View from "../../Frameworks/View/View";

package/packages/Components/Card/Card.foldable.tsx

@@ -7,11 +7,13 @@ import { useInBoxContent } from "../Box/Box";
 import styles from "./Card.module.scss";
 import type { CardFoldableProps } from "./Card.types";
 import { resolveState } from "./Card.types";
-import { buildRenderKeys } from "./Card.utils";
+import {
+  buildRenderKeys,
+  normalizeCardIcon,
+} from "./Card.utils";
 import Icon from "../Icon/Icon";
 import Pill from "../Pill/Pill";
 import Text from "../Text/Text";
-import { normalizeCardIcon } from "./Card.utils";
 import StopParentInteraction from "../../Frameworks/_shared/StopParentInteraction";
 import {
   getComputedPixelValue,

package/packages/Components/Card/Card.tsx

@@ -1,6 +1,6 @@
-import type { CardProps } from "./Card.types";
 import CardDefault from "./Card.default";
 import CardFoldable from "./Card.foldable";
+import type { CardProps } from "./Card.types";
 
 export default function Card(props: CardProps) {
   if (props.accordion) return <CardFoldable {...props} />;

package/packages/Components/CodeBox/CodeBox.tsx

@@ -83,6 +83,7 @@ export default function CodeBox({
         <code
           className={`${styles.Code} language-${lang}`}
           data-color-mode={dataTheme}
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: needed for syntax highlighting
           dangerouslySetInnerHTML={{ __html: html }}
         />
       </pre>

package/packages/Components/ContextMenu/ContextMenu.tsx

@@ -357,6 +357,7 @@ export default function ContextMenu(props: ContextMenuProps): ReactElement {
             ) : (
               contents.map((item, index) => (
                 <ContextMenuOption
+                  // biome-ignore lint/suspicious/noArrayIndexKey: items have stable order
                   key={`${item.value}-${index}`}
                   item={item}
                   index={index}

package/packages/Components/ContributionGraph/ContributionGraph.tsx

@@ -6,7 +6,6 @@ import {
   getUtcWeekdayIndex,
   parseUtcDateInput,
 } from "@musecat/functionkit";
-import clsx from "clsx";
 import {
   type PointerEvent as ReactPointerEvent,
   useMemo,
@@ -95,7 +94,13 @@ function GraphCell({
       className={styles.Cell}
       data-level={level}
       data-in-range={inRange ? "true" : "false"}
-      title={buildCellTitle({ date, total_count, changelog_count, flag_count, legacy_ticket_count })}
+      title={buildCellTitle({
+        date,
+        total_count,
+        changelog_count,
+        flag_count,
+        legacy_ticket_count,
+      })}
       style={{
         gridColumn: `${weekIndex + 1}`,
         gridRow: `${dayIndex + 1}`,
@@ -387,7 +392,11 @@ export default function ContributionGraph({
               style={{ position: "relative", marginLeft: "3.6rem" }}
             >
               {graphData.months.map((m) => (
-                <MonthLabel key={`${m.title}-${m.colIndex}`} title={m.title} colIndex={m.colIndex} />
+                <MonthLabel
+                  key={`${m.title}-${m.colIndex}`}
+                  title={m.title}
+                  colIndex={m.colIndex}
+                />
               ))}
             </View>
 

package/packages/Components/DatePicker/DatePicker.tsx

@@ -9,9 +9,9 @@ import {
 } from "react";
 import { normalizeLocale } from "../../../i18n/shared";
 import { Calendar } from "./DatePicker.calendar";
-import DatePickerCore from "./DatePicker.core";
-import { useCalendar } from "./hooks/useCalendar";
-import { useSelection } from "./hooks/useSelection";
+import DatePickerCore, {
+  type DatePickerCoreRef,
+} from "./DatePicker.core";
 import styles from "./DatePicker.module.scss";
 import type { DatePickerProps } from "./DatePicker.types";
 import {
@@ -19,10 +19,14 @@ import {
   parseDate,
   toYMD,
 } from "./DatePicker.utils";
+import { useCalendar } from "./hooks/useCalendar";
+import { useSelection } from "./hooks/useSelection";
 import Icon from "../Icon/Icon";
 import Label from "../Label/Label";
 import Text from "../Text/Text";
-import TimePickerCore from "../TimePicker/TimePicker.core";
+import TimePickerCore, {
+  type TimePickerCoreRef,
+} from "../TimePicker/TimePicker.core";
 import Dialog from "../../Frameworks/Dialog/Dialog";
 import View from "../../Frameworks/View/View";
 
@@ -333,9 +337,18 @@ export default function DatePicker({
         isValidDate(ey, em, ed) &&
         (!showTime || (eh !== null && emin !== null));
 
-      if (isStartValid && isEndValid) {
-        let start = new Date(sy!, sm! - 1, sd!, sh ?? 0, smin ?? 0);
-        let end = new Date(ey!, em! - 1, ed!, eh ?? 0, emin ?? 0);
+      if (
+        isStartValid &&
+        isEndValid &&
+        sy !== null &&
+        sm !== null &&
+        sd !== null &&
+        ey !== null &&
+        em !== null &&
+        ed !== null
+      ) {
+        let start = new Date(sy, sm - 1, sd, sh ?? 0, smin ?? 0);
+        let end = new Date(ey, em - 1, ed, eh ?? 0, emin ?? 0);
         if (isBefore(end, start)) {
           [start, end] = [end, start];
         }
@@ -344,8 +357,16 @@ export default function DatePicker({
           setRangeEnd(end);
         }
         onRangeChange?.(toYMD(start, showTime), toYMD(end, showTime));
-      } else if (isStartValid && ey === null && em === null && ed === null) {
-        const start = new Date(sy!, sm! - 1, sd!, sh ?? 0, smin ?? 0);
+      } else if (
+        isStartValid &&
+        sy !== null &&
+        sm !== null &&
+        sd !== null &&
+        ey === null &&
+        em === null &&
+        ed === null
+      ) {
+        const start = new Date(sy, sm - 1, sd, sh ?? 0, smin ?? 0);
         if (!isControlled) {
           setRangeStart(start);
           setRangeEnd(null);
@@ -357,7 +378,7 @@ export default function DatePicker({
   );
 
   const handleDateChange = useCallback(
-    (seg: any, val: number | null) => {
+    (seg: string, val: number | null) => {
       const setter = (() => {
         switch (seg) {
           case "year":
@@ -382,7 +403,7 @@ export default function DatePicker({
             return null;
         }
       })();
-      if (setter) setter(val as any);
+      if (setter) setter(val);
 
       if (mode === "single") {
         emitSingle(
@@ -507,12 +528,12 @@ export default function DatePicker({
     ],
   );
 
-  const singleDateRef = useRef<any>(null);
-  const singleTimeRef = useRef<any>(null);
-  const startDateRef = useRef<any>(null);
-  const startTimeRef = useRef<any>(null);
-  const endDateRef = useRef<any>(null);
-  const endTimeRef = useRef<any>(null);
+  const singleDateRef = useRef<DatePickerCoreRef | null>(null);
+  const singleTimeRef = useRef<TimePickerCoreRef | null>(null);
+  const startDateRef = useRef<DatePickerCoreRef | null>(null);
+  const startTimeRef = useRef<TimePickerCoreRef | null>(null);
+  const endDateRef = useRef<DatePickerCoreRef | null>(null);
+  const endTimeRef = useRef<TimePickerCoreRef | null>(null);
 
   useEffect(() => {
     if (!isControlled) return;

package/packages/Components/Icon/Icon.group.tsx

@@ -1,6 +1,6 @@
 import { Children } from "react";
-import type { IconGroupProps } from "./Icon.group.types";
 import Icon from "./Icon";
+import type { IconGroupProps } from "./Icon.group.types";
 import type { IconProps } from "./Icon.types";
 import {
   Size,

package/packages/Components/Pagination/Pagination.tsx

@@ -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/Select/Select.trigger.tsx

@@ -1,7 +1,7 @@
 "use client";
 import type { KeyboardEvent, ReactElement } from "react";
-import Pressable from "../../Frameworks/Pressable/Pressable";
 import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
 import View from "../../Frameworks/View/View";
 
 interface SelectTriggerProps {

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

@@ -322,10 +322,7 @@ export function useSelectNavigation(
   );
 
   const handleControlKeyDown = useCallback(
-    (
-      e: KeyboardEvent<Element>,
-      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/select.control.tsx

@@ -5,12 +5,11 @@ import type {
   MouseEvent as ReactMouseEvent,
 } from "react";
 import Pill from "../Pill/Pill";
-import SelectTrigger from "./Select.trigger";
 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 Text from "../Text/Text";
 import View from "../../Frameworks/View/View";
 
 interface SelectControlProps {
@@ -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/Title/Title.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import IconGroup from "../Icon/Icon.group";
 import { IconInner } from "../Icon/Icon";
+import IconGroup from "../Icon/Icon.group";
 import Pill from "../Pill/Pill";
 import Text from "../Text/Text";
 import type {

package/packages/Frameworks/Dialog/Dialog.tsx

@@ -84,6 +84,7 @@ export default function Dialog(props: DialogProps) {
       open,
       closeDialog: close,
     }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: close is intentionally a stable reference
     [id, resolvedMode, open, close],
   );
 

package/packages/Frameworks/Dialog/hooks/useSheetDrag.ts

@@ -76,6 +76,8 @@ export function useSheetDrag({
   onSnapIndexChange,
   onDragStateChange,
 }: UseSheetDragInput): DragHandlers {
+  void maxPx;
+  void getGapHiddenY;
   const _dragControls = useDragControls();
   const contentDraggingRef = useRef(false);
   const contentPointerActiveRef = useRef(false);

package/packages/Frameworks/Dialog/hooks/useSheetGeometry.ts

@@ -145,7 +145,9 @@ export function useSheetGeometry({
   const _snapPointsStr = JSON.stringify(config?.snapPoints);
   const normalizedSnapPoints = useMemo(
     () =>
-      config?.snapPoints?.length ? normalizeSnapPoints(config.snapPoints) : [1],
+      config?.snapPoints?.length
+        ? normalizeSnapPoints(config?.snapPoints)
+        : [1],
     [config?.snapPoints?.length, config?.snapPoints],
   );
 

package/packages/Frameworks/Dialog/hooks/useSheetProgressive.ts

@@ -45,7 +45,7 @@ export function useSheetProgressive({
   hasExplicitSnapPoints,
 }: UseSheetProgressiveInput): UseSheetProgressiveOutput {
   const firstSnap = normalizedSnapPoints[0];
-  const lastSnap = normalizedSnapPoints.at(-1)!;
+  const lastSnap = normalizedSnapPoints.at(-1) ?? 0;
   const hasProgression =
     hasExplicitSnapPoints && normalizedSnapPoints.length > 1 && !isFreeDrag;
 

package/packages/Frameworks/Dialog/renderers/renderSheet.tsx

@@ -28,8 +28,10 @@ import {
   useEscapeClose,
 } from "../Dialog.utils";
 import { useSheetDrag } from "../hooks/useSheetDrag";
-import { resolveInitialSnapIndex } from "../hooks/useSheetGeometry";
-import { useSheetGeometry } from "../hooks/useSheetGeometry";
+import {
+  resolveInitialSnapIndex,
+  useSheetGeometry,
+} from "../hooks/useSheetGeometry";
 import { useSheetProgressive } from "../hooks/useSheetProgressive";
 import { motionTransitions } from "../../Motion/Motion.presets";
 import Pressable from "../../Pressable/Pressable";
@@ -567,5 +569,3 @@ export default function RenderSheet({
   if (!mounted) return null;
   return <DialogPortal>{sheetNode}</DialogPortal>;
 }
-
-

package/packages/Frameworks/Pressable/Pressable.tsx

@@ -505,8 +505,8 @@ const Pressable = forwardRef<HTMLElement, PressableProps>((props, ref) => {
               themeInteractive,
               selected: resolvedControlSelected,
               disabled,
-            readOnly,
-            isInteractive: true,
+              readOnly,
+              isInteractive: true,
             }),
             Border(border),
             className,

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

@@ -11,7 +11,16 @@ import type {
 export interface PressableProps
   extends Omit<
       React.HTMLAttributes<HTMLElement>,
-      "title" | "onClick" | "onChange" | "value" | "checked" | "type" | "disabled" | "tabIndex" | "popover" | "color"
+      | "title"
+      | "onClick"
+      | "onChange"
+      | "value"
+      | "checked"
+      | "type"
+      | "disabled"
+      | "tabIndex"
+      | "popover"
+      | "color"
     >,
     ThemeSystemProps,
     BorderProps,

package/packages/Frameworks/Toaster/Toaster.boot.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import clsx from "clsx";
+import { Toaster, toast } from "sonner";
 import Icon from "../../Components/Icon/Icon";
 import type { IconProps } from "../../Components/Icon/Icon.types";
 import styles from "./Toaster.module.scss";
 import type { ToasterBootstrapProps } from "./Toaster.types";
-import clsx from "clsx";
-import { Toaster, toast } from "sonner";
 
-export { toast };
 export type { ToasterBootstrapProps };
+export { toast };
 
 const getToastIcon = (color: IconProps["color"]) => (
   <Icon icon="iCircle" iconFill size={10} color={color} />

package/packages/Frameworks/Toaster/Toaster.types.ts

@@ -1,6 +1,8 @@
 import type { ToasterProps } from "sonner";
 import type { IconProps } from "../../Components/Icon/Icon.types";
 
+export type { ToasterProps };
+
 export interface ToasterBootstrapProps extends ToasterProps {
   "data-color-mode"?: string;
   theme?: ToasterProps["theme"];

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

@@ -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/Image.tsx

@@ -2,6 +2,7 @@
 
 import NextImage from "next/image";
 import { useCallback, useMemo, useState } from "react";
+import type { UIKitSizeValue } from "../../_shared/sizing";
 import Dialog from "../../Dialog/Dialog";
 import Pressable from "../../Pressable/Pressable";
 import HScrollView from "../HScrollView/HScrollView";
@@ -10,9 +11,11 @@ import {
   ImageLeftControl,
   ImageRightControl,
 } from "./Image.controls";
-import type { ImageOverlay, ImageProps } from "./Image.types";
-import type { RadiusValue } from "../../Theme/Radius.types";
-import type { UIKitSizeValue } from "../../_shared/sizing";
+import type {
+  ImageItem,
+  ImageOverlay,
+  ImageProps,
+} from "./Image.types";
 import {
   resolveAtIndex,
   resolveBlurDataURL,
@@ -25,10 +28,25 @@ 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,
@@ -43,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?: RadiusValue;
+  radius?: import("../../Theme/Radius.types").RadiusValue;
   width?: UIKitSizeValue | UIKitSizeValue[];
   height?: UIKitSizeValue | UIKitSizeValue[];
   overlay?: ImageOverlay;
@@ -90,11 +114,7 @@ function ImageGroupItem({
           style={NEXT_IMG_STYLE}
         />
       )}
-      {resolvedOverlay && (
-        <View style={OVERLAY_STYLE}>
-          {resolvedOverlay}
-        </View>
-      )}
+      {resolvedOverlay && <View style={OVERLAY_STYLE}>{resolvedOverlay}</View>}
     </Pressable>
   );
 }
@@ -165,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
@@ -193,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);
@@ -310,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.utils.ts

@@ -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/_shared/Padding.types.ts

@@ -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;
   }