@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/components/ListView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Size } from "@noya-app/noya-geometry";
 import { range } from "@noya-app/noya-utils";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
@@ -192,10 +194,14 @@ const RowContainer = forwardRef<
     $gap: number;
     $backgroundColor?: CSSProperties["backgroundColor"];
     $clickable?: boolean;
+    href?: string;
+    as?: React.ElementType;
   }
 >(
   (
     {
+      as: Component = "div",
+      href,
       className,
       $marginType,
       $selected,
@@ -222,8 +228,9 @@ const RowContainer = forwardRef<
     ref
   ) => {
     return (
-      <div
+      <Component
         ref={ref}
+        href={href}
         role={role}
         aria-label={ariaLabel}
         aria-roledescription={ariaRoleDescription}
@@ -363,7 +370,7 @@ const ListViewDragIndicatorElement = forwardRef<
                 backgroundColor:
                   $colorScheme === "secondary"
                     ? cssVars.colors.secondary
-                    : cssVars.colors.selectedListItemBackground,
+                    : cssVars.colors.dragOutline,
                 border: `2px solid white`,
                 boxShadow: "0 0 2px rgba(0,0,0,0.5)",
               }),
@@ -410,6 +417,8 @@ export interface ListViewRowProps<MenuItemType extends string = string> {
     | CSSProperties
     | ((props: DragIndicatorStyleProps) => CSSProperties);
   testRelativeDropPosition?: RelativeDropPosition;
+  href?: string;
+  as?: React.ElementType;
 }
 
 export type DragIndicatorStyleProps = {
@@ -446,6 +455,8 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
     dragIndicatorStyle,
     className,
     testRelativeDropPosition,
+    href,
+    as,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -472,7 +483,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
       // We use preventDefault as a hack to mark this event as handled. We check for
       // this in the ListView.Root. We can't stopPropagation here or existing ContextMenus
       // won't close (onPointerDownOutside won't fire).
-      event.preventDefault();
+      // event.preventDefault();
 
       // We only want to handle left clicks
       if (event.button !== 0) return;
@@ -517,6 +528,8 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
 
     const element = (
       <Component
+        as={as}
+        href={href}
         ref={ref as any}
         $colorScheme={colorScheme}
         onContextMenu={onContextMenu}
@@ -787,7 +800,7 @@ export type ListViewRootProps = {
   divider?: boolean;
   gap?: number;
   colorScheme?: ListColorScheme;
-  containerRef?: React.RefObject<HTMLDivElement>;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   onDragOver?: React.DragEventHandler<HTMLDivElement>;
   onDragEnter?: React.DragEventHandler<HTMLDivElement>;
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
@@ -897,18 +910,18 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
       const prevChild = i - 1 >= 0 && renderChild(i - 1);
       const nextChild = i + 1 < data.length && renderChild(i + 1);
 
-      const next: ReactElement | undefined = isValidElement(nextChild)
+      const next: ReactElement<any> | undefined = isValidElement(nextChild)
         ? nextChild
         : undefined;
-      const prev: ReactElement | undefined = isValidElement(prevChild)
+      const prev: ReactElement<any> | undefined = isValidElement(prevChild)
         ? prevChild
         : undefined;
 
       const hasMarginTop = !prev;
       const hasMarginBottom =
         !next ||
-        current.props.isSectionHeader ||
-        (next && next.props.isSectionHeader);
+        (current as any).props.isSectionHeader ||
+        (next && (next as any).props.isSectionHeader);
 
       let marginType: ListRowMarginType;
 
@@ -924,11 +937,11 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
 
       let selectedPosition: ListRowPosition = "only";
 
-      if (current.props.selected) {
+      if ((current as any).props.selected) {
         const nextSelected =
-          next && !next.props.isSectionHeader && next.props.selected;
+          next && !next.props.isSectionHeader && (next as any).props.selected;
         const prevSelected =
-          prev && !prev.props.isSectionHeader && prev.props.selected;
+          prev && !prev.props.isSectionHeader && (prev as any).props.selected;
 
         if (nextSelected && prevSelected) {
           selectedPosition = "middle";
@@ -949,7 +962,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         pressEventName,
         variant,
         sectionHeaderVariant,
-        isSectionHeader: current.props.isSectionHeader,
+        isSectionHeader: (current as any).props.isSectionHeader,
         gap,
       };
     },
@@ -1100,7 +1113,7 @@ const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
   { children, ...rest }: ChildrenProps & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
-  const items: ReactElement[] = useMemo(
+  const items: ReactElement<any>[] = useMemo(
     () =>
       Children.toArray(children).flatMap((child) =>
         isValidElement(child) ? [child] : []
@@ -1118,7 +1131,7 @@ const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
           typeof key === "string" ? key : (key ?? index).toString(),
         []
       )}
-      renderItem={useCallback((item: ReactElement) => item, [])}
+      renderItem={useCallback((item: ReactElement<any>) => item, [])}
     />
   );
 });

package/src/components/MediaThumbnail.tsx

@@ -1,6 +1,9 @@
+"use client";
+
 import {
   FileIcon,
   ImageIcon,
+  NoyaIcon,
   SpeakerLoudIcon,
   VideoIcon,
 } from "@noya-app/noya-icons";
@@ -23,7 +26,12 @@ const getAssetType = (contentType?: string): AssetType | undefined => {
   return undefined;
 };
 
-type MediaThumbnailProps = {
+export type RenderThumbnailIconProps = {
+  fileName?: string;
+  contentType?: string;
+};
+
+export type MediaThumbnailProps = {
   contentType?: string;
   url?: string;
   selected?: boolean;
@@ -39,6 +47,7 @@ type MediaThumbnailProps = {
   size?: CollectionItemSize;
 
   fileName?: string;
+  renderThumbnailIcon?: (props: RenderThumbnailIconProps) => React.ReactNode;
 };
 
 export const getThumbnailColors = (
@@ -86,6 +95,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   iconName,
   size = "medium",
   fileName,
+  renderThumbnailIcon,
 }: MediaThumbnailProps) {
   const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
@@ -101,6 +111,12 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   );
 
   const content = useMemo(() => {
+    if (renderThumbnailIcon) {
+      const rendered = renderThumbnailIcon({ fileName, contentType });
+
+      if (rendered) return rendered;
+    }
+
     switch (contentType) {
       case "image":
         if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
@@ -124,7 +140,12 @@ export const MediaThumbnail = memo(function MediaThumbnail({
         }
 
         if (fileName) {
+          if (fileName.endsWith(".noya")) {
+            return <NoyaIcon color={iconColor} style={iconStyles} />;
+          }
+
           const fileIcon = findFileIcon(fileName);
+
           if (fileIcon) {
             return (
               <img
@@ -138,7 +159,15 @@ export const MediaThumbnail = memo(function MediaThumbnail({
 
         return <FileIcon color={iconColor} style={iconStyles} />;
     }
-  }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
+  }, [
+    contentType,
+    url,
+    iconColor,
+    iconStyles,
+    iconName,
+    renderThumbnailIcon,
+    fileName,
+  ]);
 
   return (
     <div

package/src/components/Message.tsx

@@ -1,11 +1,13 @@
+"use client";
+
 import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
+import { uuid } from "@noya-app/noya-utils";
 import React, { forwardRef, memo, useMemo } from "react";
 import { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
 import { colorFromString } from "../utils/colorFromString";
 import { Avatar } from "./Avatar";
 import { Logo } from "./NoyaLogo";
-import { Text } from "./Text";
 
 export type MessageProps = {
   role: "user" | "assistant" | "system" | "data";
@@ -20,7 +22,7 @@ export const Message = memo(
     { role, children, user, avatarSize = INPUT_HEIGHT }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
-    const randomId = crypto.randomUUID();
+    const randomId = uuid();
     const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
     const styles = useMemo(
       () =>
@@ -56,18 +58,15 @@ export const Message = memo(
         )}
         <div
           className={cx(
-            "flex flex-row gap-2 rounded-lg py-2 px-3 transition-all duration-200 min-w-6 max-w-[70%] items-start",
+            "markdown-message",
+            "flex flex-row gap-2 rounded-lg py-2 px-3 transition-all duration-200 max-w-[70%] text-sm",
+            role === "user" ? "text-white" : "text-text",
             role === "user" ? "ml-auto" : "bg-input-background"
           )}
           style={styles}
           ref={ref}
         >
-          <Text
-            variant="small"
-            className={role === "user" ? "text-white" : "text-text"}
-          >
-            {children}
-          </Text>
+          {children}
         </div>
       </div>
     );

package/src/components/Popover.tsx

@@ -1,6 +1,14 @@
+"use client";
+
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React, { ComponentProps, useEffect, useId, useRef } from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import React, {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
 import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
   portalScopeProps,
@@ -26,7 +34,9 @@ interface Props
     | "onFocusOutside"
     | "side"
   > {
-  children: React.ReactNode;
+  children:
+    | React.ReactNode
+    | ((props: { close: () => void }) => React.ReactNode);
   trigger: React.ReactNode;
   variant?: PopoverVariant;
   closable?: boolean;
@@ -72,6 +82,7 @@ export function Popover({
     onChange: onOpenChange,
     defaultValue: false,
   });
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
   const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
 
@@ -127,7 +138,7 @@ export function Popover({
           //   event.stopPropagation();
           // }}
         >
-          {children}
+          {typeof children === "function" ? children({ close }) : children}
           {showArrow && (
             <PopoverPrimitive.Arrow className="fill-popover-background" />
           )}

package/src/components/Progress.tsx

@@ -1,18 +1,22 @@
+"use client";
+
 import { clamp } from "@noya-app/noya-utils";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { Progress as ProgressPrimitive } from "radix-ui";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
-type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
+type ColorScheme = "normal" | "warning" | "primary" | "secondary";
 
 export function Progress({
   value,
-  variant = "normal",
+  colorScheme = "normal",
   className,
+  style,
 }: {
   value: number;
-  variant?: ProgressVariant;
+  colorScheme?: ColorScheme;
   className?: string;
+  style?: React.CSSProperties;
 }) {
   const clampedValue = clamp(value, 0, 100);
   const transformStyles = React.useMemo(
@@ -24,12 +28,21 @@ export function Progress({
 
   return (
     <ProgressPrimitive.Root
-      className={cx(`relative hidden bg-input-background h-[5px] `, className)}
-      style={{ transform: "translateZ(0)" }}
+      className={cx(
+        `relative overflow-hidden bg-input-background h-[5px]`,
+        className
+      )}
+      style={{ transform: "translateZ(0)", ...style }}
       value={clampedValue}
     >
       <ProgressPrimitive.Indicator
-        className={`${variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text"} transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full`}
+        className={cx(
+          "transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1) w-full h-full",
+          colorScheme === "primary" && "bg-primary",
+          colorScheme === "secondary" && "bg-secondary",
+          colorScheme === "warning" && "bg-warning",
+          colorScheme === "normal" && "bg-text"
+        )}
         style={transformStyles}
       />
     </ProgressPrimitive.Root>

package/src/components/ScrollArea.tsx

@@ -1,4 +1,6 @@
-import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+"use client";
+
+import { ScrollArea as RadixScrollArea } from "radix-ui";
 import * as React from "react";
 
 interface Props {

package/src/components/SearchCompletionMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React, {
   forwardRef,

package/src/components/Section.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Button,
   IconButton,

package/src/components/SegmentedControl.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { memoGeneric } from "@noya-app/react-utils";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import React, {
   createContext,
   forwardRef,
@@ -15,7 +17,7 @@ import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
-type SegmentedControlVariant = "default" | "tabs";
+type SegmentedControlVariant = "default" | "tabs" | "buttons";
 
 type SegmentedControlContextValue = {
   /** @default primary */
@@ -75,26 +77,49 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       className={cx(
         "group",
         "flex items-center justify-center",
-        "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
-        variant === "tabs" ? "font-semibold" : "font-normal",
+        "font-sans text-button relative flex-1 appearance-none focus:outline-none transition-colors",
+        // text color
+        variant === "buttons"
+          ? "text-button-text"
+          : "text-segmented-control-item",
+        // font weight
+        variant === "tabs"
+          ? "font-semibold"
+          : variant === "buttons"
+            ? "font-medium"
+            : "font-normal",
+        // focus ring
         variant === "tabs"
           ? ""
-          : colorScheme === "secondary"
-            ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
-            : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+          : variant === "buttons"
+            ? "focus-visible:ring-2 focus-visible:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all"
+            : colorScheme === "secondary"
+              ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
+              : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+        // checked
         variant === "tabs"
           ? "aria-checked:text-primary"
-          : colorScheme === "secondary"
-            ? "aria-checked:bg-secondary aria-checked:text-white"
-            : colorScheme === "primary"
-              ? "aria-checked:bg-primary aria-checked:text-white"
-              : "aria-checked:bg-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
+          : variant === "buttons"
+            ? "active:text-button-text-active active:bg-button-background-active aria-checked:text-button-text-active aria-checked:bg-button-background-active"
+            : colorScheme === "secondary"
+              ? "aria-checked:bg-secondary aria-checked:text-white"
+              : colorScheme === "primary"
+                ? "aria-checked:bg-primary aria-checked:text-white"
+                : "aria-checked:bg-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
         "focus:z-interactable",
-        variant === "default"
-          ? "px-1 rounded aria-checked:shadow-segment"
-          : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        // checked default (all colorSchemes)
         variant === "default" &&
-          "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
+          "aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent aria-checked:shadow-segment",
+        // hover
+        variant === "buttons" && "hover:bg-button-background-hover",
+        // spacing and borders
+        variant === "default"
+          ? "px-1 rounded border-r border-divider last:border-r-0"
+          : variant === "buttons"
+            ? "px-1 rounded-sm max-w-fit"
+            : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        // icon only buttons
+        variant === "buttons" && title === "" && icon && "min-w-input-height",
         className
       )}
       {...props}
@@ -103,7 +128,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         className={cx(
           "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
           variant === "tabs" &&
-            "group-focus:ring-2 group-focus:ring-primary-pastel group-focus:ring-offset-2"
+            "group-focus-visible:ring-2 group-focus-visible:ring-primary-pastel group-focus-visible:ring-offset-2"
         )}
       >
         {icon && renderIcon(icon)}
@@ -155,6 +180,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
           variant === "default" &&
             "grid min-h-input-height bg-input-background rounded py-0.5 px-0.5",
           variant === "tabs" && "flex gap-1.5 min-h-[33px]",
+          variant === "buttons" && "flex gap-1.5 min-h-input-height",
           className
         )}
         style={{

package/src/components/SelectMenu.tsx

@@ -1,10 +1,12 @@
+"use client";
+
 import {
   ChevronDownIcon,
   ChevronUpIcon,
   DropdownChevronIcon,
 } from "@noya-app/noya-icons";
 import { memoGeneric } from "@noya-app/react-utils";
-import * as Select from "@radix-ui/react-select";
+import { Select } from "radix-ui";
 import { type SelectProps } from "@radix-ui/react-select";
 import React, {
   CSSProperties,
@@ -12,7 +14,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { useLabel, useLabelPosition } from "../hooks/useLabel";
+import { useLabel, useLabelType } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
 import {
@@ -92,7 +94,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
     label: props.label,
     fieldId: props.id,
   });
-  const labelPosition = useLabelPosition();
+  const labelType = useLabelType();
 
   return (
     <Select.SelectTrigger asChild onFocus={onFocus} onBlur={onBlur}>
@@ -107,7 +109,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         disabled={disabled}
       >
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
-        {label && labelPosition === "inset" && (
+        {label && labelType === "inset" && (
           <div className={insetEndStyles}>
             <Label className="pr-4 text-text-disabled" htmlFor={id}>
               {label}

package/src/components/SelectionToolbar.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 import {
   cssVarNames,
+  cx,
   portalScopeProps,
   usePortalScopeId,
 } from "@noya-app/noya-designsystem";
@@ -7,7 +10,7 @@ import { Rect } from "@noya-app/noya-geometry";
 import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
-import React, { memo, useMemo } from "react";
+import React, { ComponentProps, memo, useMemo } from "react";
 import { createPortal } from "react-dom";
 
 // Create a Measurable from a Rect
@@ -25,10 +28,20 @@ const createVirtualElement = (rect: Rect): MeasurableElement => ({
   }),
 });
 
-type SelectionToolbarContainerProps = {
+type PopperPrimitiveContentProps = ComponentProps<
+  typeof PopperPrimitive.Content
+>;
+
+type SelectionToolbarContainerProps = Pick<
+  PopperPrimitiveContentProps,
+  "side" | "sideOffset" | "align"
+> & {
   rect: Rect;
   children: React.ReactNode;
   portalContainer?: HTMLElement | null;
+  containerClassName?: string;
+  containerStyle?: React.CSSProperties;
+  transitionDuration?: number;
 };
 
 export const SelectionToolbarContainer = memo(
@@ -36,6 +49,12 @@ export const SelectionToolbarContainer = memo(
     rect,
     children,
     portalContainer,
+    side = "top",
+    sideOffset = 10,
+    align = "center",
+    containerClassName,
+    containerStyle,
+    transitionDuration = 0.2,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -52,23 +71,27 @@ export const SelectionToolbarContainer = memo(
     const popperContent = (
       <PopperPrimitive.Content
         {...portalScopeProps(portalScopeId)}
-        side="top"
-        sideOffset={10}
-        align="center"
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
         avoidCollisions
         collisionPadding={10}
         contentEditable={false}
         style={{
-          zIndex: 1000,
+          zIndex: 10,
           opacity: size ? 1 : 0,
-          transition: "opacity 0.2s ease-in-out",
+          transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",
           [cssVarNames.colors.buttonBackground]: "transparent",
         }}
       >
         <div
           ref={containerRef}
-          className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          className={cx(
+            "flex gap-1 bg-popover-background rounded shadow-popover p-1",
+            containerClassName
+          )}
+          style={containerStyle}
           onClick={(e) => e.stopPropagation()}
           onMouseDown={(e) => e.stopPropagation()}
           onPointerDown={(e) => e.stopPropagation()}

package/src/components/Slider.tsx

@@ -1,4 +1,6 @@
-import * as RadixSlider from "@radix-ui/react-slider";
+"use client";
+
+import { Slider as RadixSlider } from "radix-ui";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
@@ -78,7 +80,7 @@ export const Slider = memo(function Slider({
     >
       <div className="relative flex-grow h-[3px] overflow-hidden">
         <div
-          className="absolute h-full rounded-l bg-primary"
+          className="absolute h-full rounded-l bg-slider-active-background"
           style={{
             left: 0,
             width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`,

package/src/components/Spacer.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-pascal-case */
 import type { ForwardedRef } from "react";
 import * as React from "react";
 

package/src/components/Switch.tsx

@@ -1,4 +1,6 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+"use client";
+
+import { Switch as SwitchPrimitive } from "radix-ui";
 import * as React from "react";
 import { cx } from "../utils/classNames";