@noya-app/noya-designsystem 0.1.31 → 0.1.33

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
+    "build:css": "tailwindcss -i ./src/index.css -o ./dist/index.css",
+    "build": "tsup",
     "dev": "npm run build -- --watch",
     "lint": "eslint . --max-warnings 0"
   },
@@ -13,7 +22,7 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.11",
+    "@noya-app/noya-colorpicker": "0.1.12",
     "@noya-app/noya-utils": "0.1.2",
     "@noya-app/noya-geometry": "0.1.5",
     "@noya-app/noya-icons": "0.1.4",
@@ -47,13 +56,13 @@
     "@types/react-virtualized": "^9.21.21",
     "@types/react-window": "^1.8.5",
     "esbuild-plugin-react-virtualized": "1.0.4",
+    "esbuild-plugin-tailwindcss": "^1.2.1",
     "react-virtualized": "9.22.5",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14"
   },
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*",
-    "styled-components": "6.1.12",
-    "stylis": "4.3.2"
+    "react-dom": "*"
   }
 }

package/src/components/ActivityIndicator.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from "react";
-import styled, { keyframes } from "styled-components";
+import { cn } from "../utils/tailwind";
 
 interface Props {
   size?: number;
@@ -8,38 +8,6 @@ interface Props {
   trackColor?: string;
 }
 
-interface SpinnerProps {
-  $opacity: number;
-}
-
-interface SpinnerCircleProps {
-  $size: number;
-  $color: string;
-  $trackColor: string;
-}
-
-const spin = keyframes`
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-`;
-
-const Spinner = styled.div<SpinnerProps>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: ${({ $opacity }: SpinnerProps) => $opacity};
-`;
-
-// Use css syntax to support keyframes
-const SpinnerCircle = styled.div<SpinnerCircleProps>`
-  border: 2px solid ${({ $trackColor }) => $trackColor};
-  border-top: 2px solid ${({ $color }) => $color};
-  border-radius: 50%;
-  width: ${({ $size }) => `${$size}px`};
-  height: ${({ $size }) => `${$size}px`};
-  animation: ${spin} 1s linear infinite;
-`;
-
 export const ActivityIndicator = memo(function ActivityIndicator({
   size = 16,
   opacity = 1,
@@ -47,8 +15,8 @@ export const ActivityIndicator = memo(function ActivityIndicator({
   trackColor = "rgba(0, 0, 0, 0.1)",
 }: Props) {
   return (
-    <Spinner $opacity={opacity}>
-      <SpinnerCircle $size={size} $color={color} $trackColor={trackColor} />
-    </Spinner>
+    <div className={cn("flex justify-center items-center", `opacity-[${opacity}]`)}>
+      <div className={cn("animate-spin", `border-[2px_solid_${trackColor}] border-t-[2px_solid_${color}] rounded-[50%] w-[${size}px] h-[${size}px]`)} />
+    </div>
   );
 });

package/src/components/Avatar.tsx

@@ -1,52 +1,63 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import React, { forwardRef } from "react";
-import styled from "styled-components";
-import { Stack } from "./Stack";
-
-const AvatarRoot = styled(AvatarPrimitive.Root)<{
-  size: number;
-  overflow: number;
-}>(({ theme, size, overflow }) => ({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  verticalAlign: "middle",
-  overflow: "hidden",
-  userSelect: "none",
-  width: size,
-  height: size,
-  borderRadius: "100%",
-  backgroundColor: theme.colors.inputBackground,
-  ...(overflow && {
-    margin: `-${overflow}px`,
-  }),
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-  "&:hover": {
-    boxShadow: `0 0 0 2px ${theme.colors.sidebar.background}`,
-    opacity: 0.9,
-  },
-}));
+const AvatarRoot = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
+    size: number;
+    overflow: number;
+  }
+>(({ className, size, overflow, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={`
+      inline-flex items-center justify-center
+      align-middle overflow-hidden select-none
+      w-[${size}px] h-[${size}px]
+      rounded-full bg-input-background
+      ${overflow ? `m-[-${overflow}px]` : ""}
+      hover:shadow-[0_0_0_2px_var(--sidebar-background)] hover:opacity-90
+      ${className ?? ""}
+    `}
+    {...props}
+  />
+));
 
-const AvatarImage = styled(AvatarPrimitive.Image)({
-  width: "100%",
-  height: "100%",
-  objectFit: "cover",
-  borderRadius: "inherit",
-});
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={`
+      w-full h-full
+      object-cover
+      rounded-inherit
+      ${className ?? ""}
+    `}
+    {...props}
+  />
+));
 
-const AvatarFallback = styled(AvatarPrimitive.Fallback)<{
-  size: number;
-}>(({ theme, size }) => ({
-  fontSize: "0.8rem",
-  fontWeight: 500,
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "white",
-  lineHeight: `${size}px`,
-}));
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
+    size: number;
+  }
+>(({ className, size, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={`
+      text-[0.8rem] font-medium
+      w-full h-full
+      flex items-center justify-center
+      text-white
+      leading-[${size}px]
+      ${className ?? ""}
+    `}
+    {...props}
+  />
+));
 
 export const Avatar = forwardRef(function Avatar(
   {
@@ -75,19 +86,6 @@ export const Avatar = forwardRef(function Avatar(
   );
 });
 
-const AvatarStackItemWrapper = styled.div<{
-  $size: number;
-}>(({ $size, theme }) => ({
-  position: "relative",
-  width: $size,
-  height: $size,
-  marginLeft: "-8px",
-  // outline: `2px solid ${theme.colors.sidebar.background}`,
-  borderRadius: "50%",
-  clipPath: `circle(50%)`,
-  overflow: "hidden",
-}));
-
 export function AvatarStack({
   size = 19,
   children,
@@ -100,16 +98,19 @@ export function AvatarStack({
   });
 
   return (
-    <Stack.H>
+    <div className="flex">
       {childrenArray.map((child, index) => {
         if (index === 0) return child;
 
         return (
-          <AvatarStackItemWrapper $size={size} key={index}>
+          <div
+            className={`relative w-[${size}px] h-[${size}px] -ml-2 rounded-full overflow-hidden [clip-path:circle(50%)]`}
+            key={index}
+          >
             {child}
-          </AvatarStackItemWrapper>
+          </div>
         );
       })}
-    </Stack.H>
+    </div>
   );
 }

package/src/components/Button.tsx

@@ -5,7 +5,6 @@ import React, {
   ReactNode,
   useCallback,
 } from "react";
-import styled from "styled-components";
 import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
@@ -19,178 +18,46 @@ type ButtonVariant =
   | "floating"
   | "none";
 
-type ButtonSize = "small" | "normal" | "large";
+type ButtonSize = "small" | "normal" | "large" | "floating";
 
-/* ----------------------------------------------------------------------------
- * Element
- * ------------------------------------------------------------------------- */
+const variantStyles: Record<ButtonVariant, string> = {
+  normal:
+    "bg-input-background text-text hover:bg-input-background-light active:bg-active-background min-w-[31px]",
+  primary: "bg-primary text-white hover:bg-primary-light active:bg-primary",
+  primaryGradient:
+    "bg-gradient-to-r from-primary to-primary-light text-text hover:bg-primary-light",
+  secondary:
+    "bg-secondary text-white hover:bg-secondary-light active:bg-secondary",
+  secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
+  white: "bg-white hover:opacity-80 active:opacity-90",
+  thin: "bg-transparent text-text hover:bg-input-background-light",
+  floating:
+    "bg-white text-text shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:opacity-80 active:opacity-90",
+  none: "bg-transparent text-text hover:bg-input-background-light",
+};
 
-export const ButtonElement = styled.button<{
-  $active: boolean;
-  $variant: ButtonVariant;
-  $size: ButtonSize;
-  $flex?: CSSProperties["flex"];
-  $defaultBackground?: string;
-}>(
-  ({
-    theme,
-    $active,
-    disabled,
-    $variant,
-    $size,
-    $flex,
-    $defaultBackground = theme.colors.inputBackground,
-  }) => ({
-    ...($size === "large"
-      ? theme.textStyles.heading4
-      : theme.textStyles.button),
-    textDecoration: "none",
-    lineHeight: "1",
-    flex: $flex ?? "0 0 auto",
-    position: "relative",
-    border: "0",
-    outline: "none",
-    WebkitAppRegion: "no-drag",
-    userSelect: "none",
-    minWidth: $variant === "normal" ? "31px" : undefined,
-    textAlign: "left",
-    borderRadius: "4px",
-    paddingTop: $variant === "none" ? "0px" : "4px",
-    paddingRight:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
-    paddingBottom: $variant === "none" ? "0px" : "4px",
-    paddingLeft:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
-    ...($size === "large" && {
-      paddingTop: "12px",
-      paddingRight: "16px",
-      paddingBottom: "12px",
-      paddingLeft: "16px",
-    }),
-    background: $active
-      ? theme.colors.primary
-      : $variant === "primaryGradient"
-        ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})`
-        : $variant === "none" || $variant === "thin"
-          ? "transparent"
-          : $defaultBackground,
-    color: $active ? "white" : theme.colors.text,
-    opacity: disabled ? 0.25 : 1,
-    "&:focus": {
-      outline: `2px solid ${theme.colors.primary}`,
-      boxShadow: `0 0 0 1px ${theme.colors.popover.background} inset`,
-    },
-    "&:hover": {
-      background:
-        $variant === "primaryGradient" || $active
-          ? theme.colors.primaryLight
-          : theme.colors.inputBackgroundLight,
-    },
-    "&:active": {
-      background:
-        $variant === "primaryGradient" || $active
-          ? theme.colors.primary
-          : theme.colors.activeBackground,
-    },
-    ...($variant === "primary" && {
-      background: theme.colors.primary,
-      color: "white",
-      "&:hover": {
-        background: theme.colors.primaryLight,
-      },
-      "&:active": {
-        background: theme.colors.primary,
-      },
-    }),
-    ...($variant === "secondary" && {
-      background: theme.colors.secondary,
-      color: "white",
-      "&:hover": {
-        background: theme.colors.secondaryLight,
-      },
-      "&:active": {
-        background: theme.colors.secondary,
-      },
-    }),
-    ...($variant === "secondaryBright" && {
-      background: "#0ab557",
-      color: "white",
-      "&:hover": {
-        opacity: 0.8,
-      },
-      "&:active": {
-        opacity: 0.9,
-      },
-    }),
-    ...($variant === "white" && {
-      background: "white",
-      "&:hover": {
-        opacity: 0.8,
-      },
-      "&:active": {
-        opacity: 0.9,
-      },
-    }),
-    ...($variant === "floating" && {
-      background: "white",
-      color: theme.colors.text,
-      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-      fontSize: $size === "small" ? "10px" : "12px",
-      padding: $size === "small" ? "0px 2px" : "0px 4px",
-      "&:hover": {
-        opacity: 0.8,
-      },
-      "&:active": {
-        opacity: 0.9,
-      },
-    }),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-
-    "& *": {
-      pointerEvents: "none",
-    },
-  })
-);
-
-/* ----------------------------------------------------------------------------
- * Content
- * ------------------------------------------------------------------------- */
-
-const ButtonContent = styled.span(({ theme }) => ({
-  // Line height of small text - maybe figure out better way to ensure
-  // icons don't have a smaller height
-  minHeight: "19px",
-  display: "flex",
-  alignItems: "center",
-  flex: "1",
-  justifyContent: "center",
-
-  // Helps with alignment with the default small text
-  lineHeight: "15px",
-}));
-
-/* ----------------------------------------------------------------------------
- * Root
- * ------------------------------------------------------------------------- */
+const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {
+  small: "px-[2px] font-sans text-[10px] font-medium",
+  normal: "px-[6px] py-1 font-sans text-button font-medium",
+  large: "p-3 px-4 font-sans text-heading4 font-medium",
+  thin: "px-[1px] py-1 font-sans text-button font-medium",
+  floating: "px-1 py-0 font-sans text-[12px] font-medium",
+  none: "py-0 px-0",
+};
 
 export interface ButtonRootProps {
   id?: string;
   className?: string;
   style?: CSSProperties;
-  flex?: CSSProperties["flex"];
   tabIndex?: number;
   children: ReactNode;
   active?: boolean;
   disabled?: boolean;
-  /** @default normal */
   variant?: ButtonVariant;
-  /** @default normal */
   size?: ButtonSize;
   tooltip?: ReactNode;
-  onClick?: (event: React.MouseEvent) => void;
-  onPointerDown?: (event: React.PointerEvent) => void;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onPointerDown?: (event: React.PointerEvent<HTMLButtonElement>) => void;
   contentStyle?: CSSProperties;
   defaultBackground?: string;
   as?: React.ElementType;
@@ -205,7 +72,6 @@ export const Button = forwardRef(function Button(
     id,
     className,
     style,
-    flex,
     tabIndex,
     tooltip,
     active = false,
@@ -213,35 +79,48 @@ export const Button = forwardRef(function Button(
     variant = "normal",
     size = "normal",
     contentStyle,
-    defaultBackground,
     onClick,
     children,
-    ...rest // Propagate any other props so this component works as a Slot
+    as: Component = "button",
+    ...rest
   }: ButtonRootProps,
   forwardedRef: ForwardedRef<HTMLButtonElement>
 ) {
   const buttonElement = (
-    <ButtonElement
+    <Component
       ref={forwardedRef}
       id={id}
-      className={className}
+      className={`no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:z-10 focus:shadow-[0_0_0_1px_var(--popover-background)_inset] ${disabled ? "opacity-25" : ""} ${!className?.includes("flex") ? "flex-none" : ""} ${
+        active
+          ? "bg-primary text-white hover:bg-primary-light active:bg-primary"
+          : variantStyles[variant]
+      } ${
+        sizeStyles[
+          variant === "thin"
+            ? "thin"
+            : variant === "floating" && size !== "small"
+              ? "floating"
+              : variant === "none"
+                ? "none"
+                : size
+        ]
+      } ${className ?? ""}`}
       style={style}
-      $flex={flex}
       tabIndex={tabIndex}
-      $active={active}
       disabled={disabled}
-      $variant={variant}
-      $size={size}
-      $defaultBackground={defaultBackground}
       onClick={onClick}
-      // Prevent double clicking a button from triggering any callbacks in ancestors
       onDoubleClick={useCallback((event: React.MouseEvent) => {
         event.stopPropagation();
       }, [])}
       {...rest}
     >
-      <ButtonContent style={contentStyle}>{children}</ButtonContent>
-    </ButtonElement>
+      <span
+        className="min-h-[19px] flex items-center flex-1 justify-center leading-[15px]"
+        style={contentStyle}
+      >
+        {children}
+      </span>
+    </Component>
   );
 
   return tooltip ? (
@@ -250,3 +129,5 @@ export const Button = forwardRef(function Button(
     buttonElement
   );
 });
+
+export default Button;