@noya-app/noya-designsystem 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,10 +13,10 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.8",
+    "@noya-app/noya-colorpicker": "0.1.9",
     "@noya-app/noya-utils": "0.1.1",
     "@noya-app/noya-geometry": "0.1.3",
-    "@noya-app/noya-icons": "0.1.3",
+    "@noya-app/noya-icons": "0.1.4",
     "@noya-app/noya-keymap": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
@@ -38,18 +38,18 @@
     "kiwi.js": "^1.1.3",
     "react-virtualized": "^9.22.3",
     "react-window": "^1.8.8",
-    "styled-components": "5.3.0",
     "vscode-fuzzy-scorer": "^0.0.4"
   },
   "devDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.21",
-    "@types/react-window": "^1.8.5",
-    "@types/styled-components": "5.1.26"
+    "@types/react-window": "^1.8.5"
   },
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "styled-components": "6.1.12",
+    "stylis": "4.3.2"
   }
 }

package/src/components/ActivityIndicator.tsx

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
-import styled, { keyframes } from 'styled-components';
+import React, { memo } from "react";
+import styled, { keyframes } from "styled-components";
 
 interface Props {
   size?: number;
@@ -8,37 +8,47 @@ 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`
+const Spinner = styled.div<SpinnerProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: ${({ opacity }: Props) => opacity};
+  opacity: ${({ $opacity }: SpinnerProps) => $opacity};
 `;
 
 // Use css syntax to support keyframes
-const SpinnerCircle = styled.div<Props>`
-  border: 2px solid ${({ trackColor }) => trackColor};
-  border-top: 2px solid ${({ color }) => color};
+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`};
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
   animation: ${spin} 1s linear infinite;
 `;
 
 export const ActivityIndicator = memo(function ActivityIndicator({
   size = 16,
   opacity = 1,
-  color = 'black',
-  trackColor = 'rgba(0, 0, 0, 0.1)',
+  color = "black",
+  trackColor = "rgba(0, 0, 0, 0.1)",
 }: Props) {
   return (
-    <Spinner opacity={opacity}>
-      <SpinnerCircle size={size} color={color} trackColor={trackColor} />
+    <Spinner $opacity={opacity}>
+      <SpinnerCircle $size={size} $color={color} $trackColor={trackColor} />
     </Spinner>
   );
 });

package/src/components/ArrayController.tsx

@@ -97,7 +97,7 @@ export const ArrayController = memo(function ArrayController<Item>({
   };
 
   return (
-    <InspectorPrimitives.Section id={id} padding={padding} gap="2px">
+    <InspectorPrimitives.Section id={id} $padding={padding} $gap="2px">
       <InspectorPrimitives.SectionHeader>
         <Button variant="none" onClick={onClickPlus}>
           <InspectorPrimitives.Title>{title}</InspectorPrimitives.Title>
@@ -147,10 +147,10 @@ export const ArrayController = memo(function ArrayController<Item>({
                     {renderRow(index)}
                     {relativeDropPosition && (
                       <ListView.DragIndicator
-                        gap={0}
-                        colorScheme="primary"
-                        relativeDropPosition={relativeDropPosition}
-                        offsetLeft={0}
+                        $gap={0}
+                        $colorScheme="primary"
+                        $relativeDropPosition={relativeDropPosition}
+                        $offsetLeft={0}
                       />
                     )}
                   </ItemContainer>

package/src/components/Avatar.tsx

@@ -76,11 +76,11 @@ export const Avatar = forwardRef(function Avatar(
 });
 
 const AvatarStackItemWrapper = styled.div<{
-  size: number;
-}>(({ size, theme }) => ({
+  $size: number;
+}>(({ $size, theme }) => ({
   position: "relative",
-  width: size,
-  height: size,
+  width: $size,
+  height: $size,
   marginLeft: "-8px",
   // outline: `2px solid ${theme.colors.sidebar.background}`,
   borderRadius: "50%",
@@ -105,7 +105,7 @@ export function AvatarStack({
         if (index === 0) return child;
 
         return (
-          <AvatarStackItemWrapper size={size} key={index}>
+          <AvatarStackItemWrapper $size={size} key={index}>
             {child}
           </AvatarStackItemWrapper>
         );

package/src/components/Button.tsx

@@ -26,70 +26,73 @@ type ButtonSize = "normal" | "large";
  * ------------------------------------------------------------------------- */
 
 export const ButtonElement = styled.button<{
-  active: boolean;
-  variant: ButtonVariant;
-  size: ButtonSize;
-  flex?: CSSProperties["flex"];
-  defaultBackground?: string;
+  $active: boolean;
+  $variant: ButtonVariant;
+  $size: ButtonSize;
+  $flex?: CSSProperties["flex"];
+  $defaultBackground?: string;
 }>(
   ({
     theme,
-    active,
+    $active,
     disabled,
-    variant,
-    size,
-    flex,
-    defaultBackground = theme.colors.inputBackground,
+    $variant,
+    $size,
+    $flex,
+    $defaultBackground = theme.colors.inputBackground,
   }) => ({
-    ...(size === "large" ? theme.textStyles.heading4 : theme.textStyles.button),
+    ...($size === "large"
+      ? theme.textStyles.heading4
+      : theme.textStyles.button),
     textDecoration: "none",
     lineHeight: "1",
-    flex: flex ?? "0 0 auto",
+    flex: $flex ?? "0 0 auto",
     position: "relative",
     border: "0",
     outline: "none",
     WebkitAppRegion: "no-drag",
     userSelect: "none",
-    minWidth: variant === "normal" ? "31px" : undefined,
+    minWidth: $variant === "normal" ? "31px" : undefined,
     textAlign: "left",
     borderRadius: "4px",
-    paddingTop: variant === "none" ? "0px" : "4px",
+    paddingTop: $variant === "none" ? "0px" : "4px",
     paddingRight:
-      variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-    paddingBottom: variant === "none" ? "0px" : "4px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    paddingBottom: $variant === "none" ? "0px" : "4px",
     paddingLeft:
-      variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-    ...(size === "large" && {
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+    ...($size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",
       paddingBottom: "12px",
       paddingLeft: "16px",
     }),
-    background: active
+    background: $active
       ? theme.colors.primary
-      : variant === "primaryGradient"
+      : $variant === "primaryGradient"
         ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})`
-        : variant === "none" || variant === "thin"
+        : $variant === "none" || $variant === "thin"
           ? "transparent"
-          : defaultBackground,
-    color: active ? "white" : theme.colors.text,
+          : $defaultBackground,
+    color: $active ? "white" : theme.colors.text,
     opacity: disabled ? 0.25 : 1,
     "&:focus": {
-      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
+      outline: `2px solid ${theme.colors.primary}`,
+      boxShadow: `0 0 0 1px ${theme.colors.popover.background} inset`,
     },
     "&:hover": {
       background:
-        variant === "primaryGradient" || active
+        $variant === "primaryGradient" || $active
           ? theme.colors.primaryLight
           : theme.colors.inputBackgroundLight,
     },
     "&:active": {
       background:
-        variant === "primaryGradient" || active
+        $variant === "primaryGradient" || $active
           ? theme.colors.primary
           : theme.colors.activeBackground,
     },
-    ...(variant === "primary" && {
+    ...($variant === "primary" && {
       background: theme.colors.primary,
       color: "white",
       "&:hover": {
@@ -99,7 +102,7 @@ export const ButtonElement = styled.button<{
         background: theme.colors.primary,
       },
     }),
-    ...(variant === "secondary" && {
+    ...($variant === "secondary" && {
       background: theme.colors.secondary,
       color: "white",
       "&:hover": {
@@ -109,7 +112,7 @@ export const ButtonElement = styled.button<{
         background: theme.colors.secondary,
       },
     }),
-    ...(variant === "secondaryBright" && {
+    ...($variant === "secondaryBright" && {
       background: "#0ab557",
       color: "white",
       "&:hover": {
@@ -119,7 +122,7 @@ export const ButtonElement = styled.button<{
         opacity: 0.9,
       },
     }),
-    ...(variant === "white" && {
+    ...($variant === "white" && {
       background: "white",
       "&:hover": {
         opacity: 0.8,
@@ -128,7 +131,7 @@ export const ButtonElement = styled.button<{
         opacity: 0.9,
       },
     }),
-    ...(variant === "floating" && {
+    ...($variant === "floating" && {
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
@@ -214,13 +217,13 @@ export const Button = forwardRef(function Button(
       id={id}
       className={className}
       style={style}
-      flex={flex}
+      $flex={flex}
       tabIndex={tabIndex}
-      active={active}
+      $active={active}
       disabled={disabled}
-      variant={variant}
-      size={size}
-      defaultBackground={defaultBackground}
+      $variant={variant}
+      $size={size}
+      $defaultBackground={defaultBackground}
       onClick={onClick}
       // Prevent double clicking a button from triggering any callbacks in ancestors
       onDoubleClick={useCallback((event: React.MouseEvent) => {

package/src/components/Chip.tsx

@@ -9,34 +9,34 @@ type ChipSize = "small" | "medium";
 type ChipVariant = "solid" | "outlined" | "ghost";
 
 const ChipElement = styled.span<{
-  colorScheme?: ChipColorScheme;
-  size: ChipSize;
-  monospace: boolean;
-  variant: ChipVariant;
-  isInteractive: boolean;
-}>(({ theme, colorScheme, size, variant, monospace, isInteractive }) => {
+  $colorScheme?: ChipColorScheme;
+  $size: ChipSize;
+  $monospace: boolean;
+  $variant: ChipVariant;
+  $isInteractive: boolean;
+}>(({ theme, $colorScheme, $size, $variant, $monospace, $isInteractive }) => {
   const color =
-    colorScheme === "primary"
+    $colorScheme === "primary"
       ? theme.colors.primary
-      : colorScheme === "secondary"
+      : $colorScheme === "secondary"
         ? theme.colors.secondary
         : theme.colors.text;
 
   const backgroundColor =
-    colorScheme === "primary"
+    $colorScheme === "primary"
       ? "rgb(238, 229, 255)"
-      : colorScheme === "secondary"
+      : $colorScheme === "secondary"
         ? "rgb(205, 238, 231)"
-        : colorScheme === "error"
+        : $colorScheme === "error"
           ? "rgb(255, 219, 219)"
           : theme.colors.inputBackground;
 
   const subtleColor =
-    colorScheme === "primary"
+    $colorScheme === "primary"
       ? "rgba(238, 229, 255, 0.2)"
-      : colorScheme === "secondary"
+      : $colorScheme === "secondary"
         ? "rgba(205, 238, 231, 0.2)"
-        : colorScheme === "error"
+        : $colorScheme === "error"
           ? "rgba(255, 219, 219, 0.2)"
           : "rgba(0, 0, 0, 0.1)";
 
@@ -48,7 +48,7 @@ const ChipElement = styled.span<{
     alignItems: "center",
     lineHeight: "1.4",
     whiteSpace: "pre",
-    ...(size === "medium"
+    ...($size === "medium"
       ? {
           fontSize: "11px",
           padding: "4px 8px",
@@ -58,15 +58,15 @@ const ChipElement = styled.span<{
           padding: "0px 4px",
           lineHeight: "15px",
         }),
-    ...(monospace && {
+    ...($monospace && {
       fontFamily: theme.fonts.monospace,
     }),
-    ...(variant === "solid"
+    ...($variant === "solid"
       ? {
           color,
           backgroundColor,
         }
-      : variant === "outlined"
+      : $variant === "outlined"
         ? {
             color,
             backgroundColor: "transparent",
@@ -74,12 +74,12 @@ const ChipElement = styled.span<{
           }
         : {}),
     "&:hover": {
-      ...(variant === "outlined" && {
+      ...($variant === "outlined" && {
         backgroundColor: subtleColor,
         boxShadow: "none",
       }),
     },
-    ...(isInteractive && {
+    ...($isInteractive && {
       cursor: "pointer",
       "&:hover": {
         opacity: 0.85,
@@ -188,13 +188,13 @@ export const Chip = memo(function Chip({
 
   return (
     <ChipElement
-      variant={variant}
-      colorScheme={colorScheme}
+      $variant={variant}
+      $colorScheme={colorScheme}
       style={style}
       onClick={handleClick}
-      size={size}
-      monospace={monospace}
-      isInteractive={!!handleClick}
+      $size={size}
+      $monospace={monospace}
+      $isInteractive={!!handleClick}
       tabIndex={tabIndex}
     >
       {addable && (

package/src/components/Divider.tsx

@@ -1,40 +1,65 @@
-import React, { memo } from 'react';
-import styled from 'styled-components';
+import React, { memo } from "react";
+import styled from "styled-components";
 
 /* ----------------------------------------------------------------------------
  * Divider
  * ------------------------------------------------------------------------- */
 
-type DividerVariant = 'normal' | 'strong' | 'subtle';
+type DividerVariant = "normal" | "strong" | "subtle";
 
 const DividerContainer = styled.div<
-  DividerProps & {
-    orientation: 'horizontal' | 'vertical';
+  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` }),
+>(({ 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'
+    $variant === "strong"
       ? theme.colors.dividerStrong
-      : variant === 'subtle'
-      ? theme.colors.dividerSubtle
-      : theme.colors.divider,
-  alignSelf: 'stretch',
+      : $variant === "subtle"
+        ? theme.colors.dividerSubtle
+        : theme.colors.divider,
+  alignSelf: "stretch",
 }));
 
+interface DividerProps_ {
+  $variant?: DividerVariant;
+  $overflow?: number;
+}
+
 interface DividerProps {
   variant?: DividerVariant;
   overflow?: number;
 }
 
-export const Divider = memo(function Divider(props: DividerProps) {
-  return <DividerContainer orientation="horizontal" {...props} />;
+export const Divider = memo(function Divider({
+  variant,
+  overflow,
+  ...props
+}: DividerProps) {
+  return (
+    <DividerContainer
+      $orientation="horizontal"
+      $variant={variant}
+      $overflow={overflow}
+      {...props}
+    />
+  );
 });
 
-export const DividerVertical = memo(function DividerVertical(
-  props: DividerProps,
-) {
-  return <DividerContainer orientation="vertical" {...props} />;
+export const DividerVertical = memo(function DividerVertical({
+  variant,
+  overflow,
+  ...props
+}: DividerProps) {
+  return (
+    <DividerContainer
+      $orientation="vertical"
+      $variant={variant}
+      $overflow={overflow}
+      {...props}
+    />
+  );
 });

package/src/components/FillInputField.tsx

@@ -1,43 +1,43 @@
-import { Sketch } from '@noya-app/noya-file-format';
-import React, { CSSProperties, ForwardedRef, forwardRef, memo } from 'react';
-import styled from 'styled-components';
-import { SketchPattern } from '../utils/sketchPattern';
-import { FillPreviewBackground } from './FillPreviewBackground';
+import { Sketch } from "@noya-app/noya-file-format";
+import React, { CSSProperties, ForwardedRef, forwardRef, memo } from "react";
+import styled from "styled-components";
+import { SketchPattern } from "../utils/sketchPattern";
+import { FillPreviewBackground } from "./FillPreviewBackground";
 
-const Container = styled.button<{ flex?: CSSProperties['flex'] }>(
-  ({ theme, flex }) => ({
-    outline: 'none',
+const Container = styled.button<{ $flex?: CSSProperties["flex"] }>(
+  ({ theme, $flex }) => ({
+    outline: "none",
     padding: 0,
-    width: '50px',
-    height: '27px',
-    borderRadius: '4px',
-    overflow: 'hidden',
-    border: 'none',
+    width: "50px",
+    height: "27px",
+    borderRadius: "4px",
+    overflow: "hidden",
+    border: "none",
     boxShadow: `0 0 0 1px ${theme.colors.divider} inset`,
-    background: 'transparent',
-    '&:focus': {
+    background: "transparent",
+    "&:focus": {
       boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
     },
-    position: 'relative',
-    flex,
-  }),
+    position: "relative",
+    flex: $flex,
+  })
 );
 
 interface Props {
   id?: string;
   value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-  flex?: CSSProperties['flex'];
+  flex?: CSSProperties["flex"];
 }
 
 export const FillInputField = memo(
   forwardRef(function FillInputField(
-    { id, value, ...rest }: Props,
-    ref: ForwardedRef<HTMLButtonElement>,
+    { id, value, flex, ...rest }: Props,
+    ref: ForwardedRef<HTMLButtonElement>
   ) {
     return (
-      <Container ref={ref} id={id} {...rest}>
+      <Container ref={ref} id={id} $flex={flex} {...rest}>
         <FillPreviewBackground value={value} />
       </Container>
     );
-  }),
+  })
 );