@noya-app/noya-designsystem 0.1.31 → 0.1.32

package/src/components/Chip.tsx

@@ -1,149 +1,113 @@
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
 import React, { forwardRef, memo } from "react";
-import styled from "styled-components";
-import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
 import { useHover } from "../hooks/useHover";
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
 
-const ChipElement = styled.span<{
+function getChipStyles({
+  $colorScheme,
+  $size,
+  $variant,
+  $monospace,
+  $isInteractive,
+}: {
   $colorScheme?: ChipColorScheme;
   $size: ChipSize;
-  $monospace: boolean;
   $variant: ChipVariant;
+  $monospace: boolean;
   $isInteractive: boolean;
-}>(({ theme, $colorScheme, $size, $variant, $monospace, $isInteractive }) => {
-  const color =
-    $colorScheme === "primary"
-      ? theme.colors.primary
-      : $colorScheme === "secondary"
-        ? theme.colors.secondary
-        : theme.colors.text;
-
-  const backgroundColor =
-    $colorScheme === "primary"
-      ? theme.colors.primaryPastel
-      : $colorScheme === "secondary"
-        ? theme.colors.secondaryPastel
-        : $colorScheme === "error"
-          ? "rgb(255, 219, 219)"
-          : theme.colors.inputBackground;
-
-  const subtleColor =
-    $colorScheme === "primary"
-      ? "rgba(238, 229, 255, 0.2)"
-      : $colorScheme === "secondary"
-        ? "rgba(205, 238, 231, 0.2)"
-        : $colorScheme === "error"
-          ? "rgba(255, 219, 219, 0.2)"
-          : "rgba(0, 0, 0, 0.1)";
-
-  return {
-    textTransform: "initial",
-    borderRadius: 4,
-    userSelect: "none",
-    display: "inline-flex",
-    alignItems: "center",
-    // lineHeight: "1.4",
-    lineHeight: "15px",
-    whiteSpace: "pre",
-    ...($size === "large"
-      ? {
-          fontSize: "11px",
-          padding: "4px 8px",
-        }
-      : $size === "medium"
-        ? {
-            fontSize: "10px",
-            padding: "2px 6px",
-          }
-        : {
-            fontSize: "9px",
-            padding: "0px 4px",
-          }),
-    ...($monospace && {
-      fontFamily: theme.fonts.monospace,
-    }),
-    ...($variant === "solid"
-      ? {
-          color,
-          backgroundColor,
-        }
-      : $variant === "outlined"
-        ? {
-            color,
-            backgroundColor: "transparent",
-            boxShadow: `0 0 0 1px ${subtleColor} inset`,
-          }
-        : {}),
-    "&:hover": {
-      ...($variant === "outlined" && {
-        backgroundColor: subtleColor,
-        boxShadow: "none",
-      }),
-    },
-    ...($isInteractive && {
-      cursor: "pointer",
-      "&:hover": {
-        opacity: 0.85,
+}) {
+  // Base styles
+  const baseStyles = `
+    inline-flex items-center
+    whitespace-pre rounded
+    select-none
+    leading-[15px]
+  `;
+
+  // Size styles
+  const sizeStyles = {
+    large: "text-[11px] p-[4px_8px]",
+    medium: "text-[10px] p-[2px_6px]",
+    small: "text-[9px] p-[0px_4px]",
+  }[$size];
+
+  // Font family
+  const fontStyles = $monospace ? "font-mono" : "";
+
+  // Color and background based on scheme and variant
+  const variantStyles = (() => {
+    const colors = {
+      primary: {
+        text: "text-primary",
+        bg: "bg-primary-pastel",
+        subtle: "bg-[rgba(238,229,255,0.2)]",
+      },
+      secondary: {
+        text: "text-secondary",
+        bg: "bg-secondary-pastel",
+        subtle: "bg-[rgba(205,238,231,0.2)]",
+      },
+      error: {
+        text: "text-text",
+        bg: "bg-[rgb(255,219,219)]",
+        subtle: "bg-[rgba(255,219,219,0.2)]",
+      },
+      default: {
+        text: "text-text",
+        bg: "bg-input-background",
+        subtle: "bg-[rgba(0,0,0,0.1)]",
       },
-    }),
-  };
-});
-
-const DeleteElement = styled(Cross1Icon)<{
-  size: ChipSize;
-}>(({ size }) => ({
-  position: "relative",
-  marginRight: "-2px",
-  cursor: "pointer",
-  opacity: 0.5,
-
-  ...(size === "large"
-    ? {
-        marginLeft: "2px",
-        // top: '-1px',
-        transform: "scale(0.75)",
-      }
-    : {
-        transform: "scale(0.6)",
-      }),
-
-  "&:hover": {
-    opacity: 0.85,
-  },
-}));
-
-const ignoredProps = new Set(["size", "isOnlyChild"]);
-
-const AddElement = styled(PlusIcon).withConfig({
-  shouldForwardProp: (prop) => !ignoredProps.has(prop),
-})<{
-  size: ChipSize;
-  isOnlyChild: boolean;
-}>(({ size, isOnlyChild }) => ({
-  position: "relative",
-  marginLeft: "-2px",
-  cursor: "pointer",
-  opacity: 0.5,
-
-  ...(size === "large"
-    ? {
-        marginRight: "2px",
-        top: "-1px",
-        transform: "scale(0.75)",
-      }
-    : {
-        marginRight: "-2px",
-        transform: "scale(0.6)",
-      }),
-
-  "&:hover": {
-    opacity: 0.85,
-  },
-}));
+    }[$colorScheme ?? "default"];
+
+    if ($variant === "solid") {
+      return `${colors.text} ${colors.bg}`;
+    }
+    if ($variant === "outlined") {
+      return `
+        ${colors.text} bg-transparent
+        shadow-[0_0_0_1px_${colors.subtle.slice(3, -1)}_inset]
+        hover:${colors.subtle} hover:shadow-none
+      `;
+    }
+    return "";
+  })();
+
+  // Interactive states
+  const interactiveStyles = $isInteractive
+    ? "cursor-pointer hover:opacity-85"
+    : "";
+
+  return `
+    ${baseStyles}
+    ${sizeStyles}
+    ${fontStyles}
+    ${variantStyles}
+    ${interactiveStyles}
+  `
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function getIconStyles(size: ChipSize, isAdd: boolean) {
+  const baseStyles = "relative opacity-50 cursor-pointer hover:opacity-85";
+
+  if (size === "large") {
+    return `
+      ${baseStyles}
+      ${isAdd ? "ml-[-2px] mr-[2px] -top-[1px]" : "mr-[-2px] ml-[2px]"}
+      scale-75
+    `;
+  }
+
+  return `
+    ${baseStyles}
+    ${isAdd ? "ml-[-2px] mr-[-2px]" : "mr-[-2px]"}
+    scale-60
+  `;
+}
 
 export interface ChipProps {
   id?: string;
@@ -181,12 +145,11 @@ export const Chip = memo(
       onClick,
       onAdd,
       onHoverDeleteChange,
+      className,
       ...rest
     }: ChipProps,
     forwardedRef: React.ForwardedRef<HTMLSpanElement>
   ) {
-    const theme = useDesignSystemTheme();
-
     const { hoverProps: hoverDeleteProps } = useHover({
       onHoverChange: onHoverDeleteChange,
     });
@@ -195,28 +158,32 @@ export const Chip = memo(
 
     const color =
       colorScheme === "primary"
-        ? theme.colors.primary
+        ? "var(--primary)"
         : colorScheme === "secondary"
-          ? theme.colors.secondary
-          : theme.colors.text;
+          ? "var(--secondary)"
+          : "var(--text)";
 
     return (
-      <ChipElement
+      <span
         ref={forwardedRef}
-        $variant={variant}
-        $colorScheme={colorScheme}
+        className={`
+          ${getChipStyles({
+            $colorScheme: colorScheme,
+            $size: size,
+            $variant: variant,
+            $monospace: monospace,
+            $isInteractive: !!handleClick || clickable === true,
+          })}
+          ${className ?? ""}
+        `}
         style={style}
         onClick={handleClick}
-        $size={size}
-        $monospace={monospace}
-        $isInteractive={!!handleClick || clickable === true}
         tabIndex={tabIndex}
         {...rest}
       >
         {addable && (
-          <AddElement
-            size={size}
-            isOnlyChild={!children && !deletable}
+          <PlusIcon
+            className={getIconStyles(size, true)}
             onClick={
               onAdd
                 ? (event) => {
@@ -230,8 +197,8 @@ export const Chip = memo(
         )}
         {children}
         {deletable && (
-          <DeleteElement
-            size={size}
+          <Cross1Icon
+            className={getIconStyles(size, false)}
             {...(hoverDeleteProps as any)}
             onClick={
               onDelete
@@ -244,7 +211,7 @@ export const Chip = memo(
             color={color}
           />
         )}
-      </ChipElement>
+      </span>
     );
   })
 );

package/src/components/ContextMenu.tsx

@@ -2,7 +2,6 @@ import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React, { ReactNode, memo, useCallback, useMemo } from "react";
-import styled from "styled-components";
 import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import {
@@ -15,28 +14,6 @@ import {
   styles,
 } from "./internal/Menu";
 
-/* ----------------------------------------------------------------------------
- * Separator
- * ------------------------------------------------------------------------- */
-
-const SeparatorElement = styled(RadixContextMenu.Separator)(
-  styles.separatorStyle
-);
-
-/* ----------------------------------------------------------------------------
- * Item
- * ------------------------------------------------------------------------- */
-
-const ItemElement = styled(RadixContextMenu.Item)(styles.itemStyle);
-
-const CheckboxItemElement = styled(RadixContextMenu.CheckboxItem)(
-  styles.itemStyle
-);
-
-const StyledItemIndicator = styled(RadixContextMenu.ItemIndicator)(
-  styles.itemIndicatorStyle
-);
-
 export interface MenuItemProps<T extends string> {
   value?: T;
   children: ReactNode;
@@ -75,21 +52,23 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
 
   if (checked) {
     return (
-      <CheckboxItemElement
+      <RadixContextMenu.CheckboxItem
         checked={checked}
         disabled={disabled}
         onSelect={handleSelectItem}
+        className={styles.itemStyle({ disabled })}
       >
-        <StyledItemIndicator>
+        <RadixContextMenu.ItemIndicator className={styles.itemIndicatorStyle}>
           <CheckIcon />
-        </StyledItemIndicator>
+        </RadixContextMenu.ItemIndicator>
         {children}
-      </CheckboxItemElement>
+      </RadixContextMenu.CheckboxItem>
     );
   }
 
   const element = (
-    <ItemElement
+    <RadixContextMenu.Item
+    className={styles.itemStyle({ disabled })}
       disabled={disabled}
       onSelect={handleSelectItem}
       onPointerDown={handlePointerDown}
@@ -118,7 +97,7 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
           <ChevronRightIcon />
         </>
       )}
-    </ItemElement>
+    </RadixContextMenu.Item>
   );
 
   if (items && items.length > 0) {
@@ -136,9 +115,6 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
  * Root
  * ------------------------------------------------------------------------- */
 
-const Content = styled(RadixContextMenu.Content)(styles.contentStyle);
-const SubContent = styled(RadixContextMenu.SubContent)(styles.contentStyle);
-
 export interface MenuProps<T extends string> {
   children: ReactNode;
   items: MenuItem<T>[];
@@ -182,7 +158,9 @@ function ContextMenuRoot<T extends string>({
   const TriggerComponent = isNested
     ? RadixContextMenu.SubTrigger
     : RadixContextMenu.Trigger;
-  const ContentComponent: typeof Content = isNested ? SubContent : Content;
+  const ContentComponent: typeof RadixContextMenu.Content = isNested
+    ? RadixContextMenu.SubContent
+    : RadixContextMenu.Content;
 
   return (
     <RootComponent onOpenChange={onOpenChange}>
@@ -190,10 +168,10 @@ function ContextMenuRoot<T extends string>({
         {children}
       </TriggerComponent>
       <RadixContextMenu.Portal>
-        <ContentComponent>
+        <ContentComponent className={styles.contentStyle}>
           {items.map((item, index) =>
             item === SEPARATOR_ITEM ? (
-              <SeparatorElement key={index} />
+              <RadixContextMenu.Separator key={index} className={styles.separatorStyle} />
             ) : (
               <ContextMenuItem
                 key={item.value ?? index}

package/src/components/Dialog.tsx

@@ -7,60 +7,77 @@ import React, {
   useImperativeHandle,
   useRef,
 } from "react";
-import styled from "styled-components";
 import { IconButton } from "./IconButton";
 import { Spacer } from "./Spacer";
+import { cn } from "../utils/tailwind";
 
-const StyledOverlay = styled(DialogPrimitive.Overlay)({
-  backgroundColor: "rgba(0,0,0,0.5)",
-  position: "fixed",
-  inset: 0,
-});
+const StyledOverlay = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 bg-[rgba(0,0,0,0.5)]", className)}
+    {...props}
+  />
+));
 
-const StyledContent = styled(DialogPrimitive.Content)(({ theme }) => ({
-  boxShadow:
-    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: "90vw",
-  maxWidth: "450px",
-  maxHeight: "85vh",
-  padding: theme.sizes.dialog.padding,
-  borderRadius: 2,
-  ...theme.textStyles.small,
-  backgroundColor: theme.colors.popover.background,
-  overflowY: "auto",
-  color: theme.colors.textMuted,
-  "&:focus": { outline: "none" },
-  pointerEvents: "all",
-  zIndex: 1000,
-}));
+const StyledContent = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Content
+    ref={ref}
+    className={`
+      fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+      w-[90vw] max-w-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
+      font-sans text-heading5 font-normal leading-[19px] text-text-muted 
+      bg-popover-background overflow-y-auto pointer-events-all z-[1000] focus:outline-none 
+      shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] 
+      ${className}
+    `}
+    {...props}
+  />
+));
 
-const StyledTitle = styled(DialogPrimitive.Title)(({ theme }) => ({
-  margin: 0,
-  ...theme.textStyles.body,
-  color: theme.colors.text,
-}));
+const StyledTitle = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "m-0 font-sans text-base font-normal leading-[1.4] text-text",
+      className
+    )}
+    {...props}
+  />
+));
 
-const StyledDescription = styled(DialogPrimitive.Description)(({ theme }) => ({
-  margin: 0,
-  ...theme.textStyles.small,
-  color: theme.colors.textMuted,
-}));
+const StyledDescription = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(
+      "m-0 font-sans text-heading5 font-normal leading-[19px] text-text-muted",
+      className
+    )}
+    {...props}
+  />
+));
 
-export const CloseButtonContainer = styled.div(({ theme }) => ({
-  position: "absolute",
-  top: theme.sizes.dialog.padding,
-  right: theme.sizes.dialog.padding,
-  zIndex: 1,
-  backgroundColor: theme.colors.popover.background,
-  padding: "4px 6px",
-  borderRadius: "2px",
-  // boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
-  border: `1px solid rgba(128,128,128,0.2)`,
-}));
+const CloseButtonContainer = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`absolute top-dialog-padding right-dialog-padding z-[1] bg-popover-background p-[4px_6px] rounded-[2px] border border-[rgba(128,128,128,0.2)] ${className}`}
+    {...props}
+  />
+));
 
 export interface IDialog {
   containsElement: (element: HTMLElement) => boolean;
@@ -97,7 +114,6 @@ export const Dialog = forwardRef(function Dialog(
   useImperativeHandle(forwardedRef, () => ({
     containsElement(element) {
       if (!contentRef.current) return false;
-
       return contentRef.current.contains(element);
     },
   }));
@@ -110,12 +126,8 @@ export const Dialog = forwardRef(function Dialog(
         onOpenAutoFocus={onOpenAutoFocus}
         style={style}
         {...(closeOnInteractOutside === false && {
-          onPointerDownOutside: (event) => {
-            event.preventDefault();
-          },
-          onInteractOutside: (event) => {
-            event.preventDefault();
-          },
+          onPointerDownOutside: (event) => event.preventDefault(),
+          onInteractOutside: (event) => event.preventDefault(),
         })}
       >
         <CloseButtonContainer>

package/src/components/Divider.tsx

@@ -1,64 +1,54 @@
 import React, { memo } from "react";
-import styled from "styled-components";
 
-/* ----------------------------------------------------------------------------
- * Divider
- * ------------------------------------------------------------------------- */
-
-type DividerVariant = "normal" | "strong" | "subtle";
-
-const DividerContainer = styled.div<
-  DividerProps_ & {
-    $orientation: "horizontal" | "vertical";
-  }
->(({ theme, $variant = "normal", $orientation, $overflow = 0 }) => ({
-  ...($orientation === "horizontal"
-    ? { height: "1px", minHeight: "1px", margin: `0px -${$overflow}px` }
-    : { width: "1px", minWidth: "1px", margin: `-${$overflow}px 0px` }),
-  background:
-    $variant === "strong"
-      ? theme.colors.dividerStrong
-      : $variant === "subtle"
-        ? theme.colors.dividerSubtle
-        : theme.colors.divider,
-  alignSelf: "stretch",
-}));
-
-interface DividerProps_ {
-  $variant?: DividerVariant;
-  $overflow?: number;
-}
+type DividerVariant = "normal" | "subtle" | "strong";
 
 interface DividerProps {
   variant?: DividerVariant;
-  overflow?: number;
+  overflow?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export const Divider = memo(function Divider({
-  variant,
-  overflow,
+  variant = "normal",
+  overflow = 0,
+  className,
+  style,
   ...props
 }: DividerProps) {
   return (
-    <DividerContainer
-      $orientation="horizontal"
-      $variant={variant}
-      $overflow={overflow}
+    <div
+      className={`
+        h-px min-h-px
+        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
+        self-stretch
+        ${className ?? ""}
+      `}
+      style={{
+        marginLeft: `-${overflow}px`,
+        marginRight: `-${overflow}px`,
+        ...style,
+      }}
       {...props}
     />
   );
 });
 
 export const DividerVertical = memo(function DividerVertical({
-  variant,
-  overflow,
+  variant = "normal",
+  overflow = 0,
+  className,
   ...props
 }: DividerProps) {
   return (
-    <DividerContainer
-      $orientation="vertical"
-      $variant={variant}
-      $overflow={overflow}
+    <div
+      className={`
+        w-px min-w-px
+        my-[-${overflow}px]
+        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
+        self-stretch
+        ${className ?? ""}
+      `}
       {...props}
     />
   );