@noya-app/noya-designsystem 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.0.7",
-    "@noya-app/noya-utils": "0.0.10",
-    "@noya-app/noya-geometry": "0.0.11",
-    "@noya-app/noya-icons": "0.0.4",
-    "@noya-app/noya-keymap": "0.0.6",
+    "@noya-app/noya-colorpicker": "0.0.8",
+    "@noya-app/noya-utils": "0.0.11",
+    "@noya-app/noya-geometry": "0.0.12",
+    "@noya-app/noya-icons": "0.0.5",
+    "@noya-app/noya-keymap": "0.0.7",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/Button.tsx

@@ -4,21 +4,21 @@ import React, {
   forwardRef,
   ReactNode,
   useCallback,
-} from 'react';
-import styled from 'styled-components';
-import { Tooltip } from './Tooltip';
+} from "react";
+import styled from "styled-components";
+import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
-  | 'normal'
-  | 'primary'
-  | 'secondary'
-  | 'secondaryBright'
-  | 'white'
-  | 'thin'
-  | 'floating'
-  | 'none';
+  | "normal"
+  | "primary"
+  | "secondary"
+  | "secondaryBright"
+  | "white"
+  | "thin"
+  | "floating"
+  | "none";
 
-type ButtonSize = 'normal' | 'large';
+type ButtonSize = "normal" | "large";
 
 /* ----------------------------------------------------------------------------
  * Element
@@ -28,98 +28,98 @@ export const ButtonElement = styled.button<{
   active: boolean;
   variant: ButtonVariant;
   size: ButtonSize;
-  flex?: CSSProperties['flex'];
+  flex?: CSSProperties["flex"];
 }>(({ theme, active, disabled, variant, size, flex }) => ({
-  ...(size === 'large' ? theme.textStyles.heading4 : theme.textStyles.small),
-  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',
+  ...(size === "large" ? theme.textStyles.heading4 : theme.textStyles.small),
+  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" : "8px",
+  paddingBottom: variant === "none" ? "0px" : "4px",
+  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+  ...(size === "large" && {
+    paddingTop: "12px",
+    paddingRight: "16px",
+    paddingBottom: "12px",
+    paddingLeft: "16px",
   }),
   background: active
     ? theme.colors.primary
-    : variant === 'none' || variant === 'thin'
-    ? 'transparent'
-    : theme.colors.inputBackground,
-  color: active ? 'white' : theme.colors.text,
+    : variant === "none" || variant === "thin"
+      ? "transparent"
+      : theme.colors.inputBackground,
+  color: active ? "white" : theme.colors.text,
   opacity: disabled ? 0.25 : 1,
-  '&:focus': {
+  "&:focus": {
     boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
   },
-  '&:hover': {
+  "&:hover": {
     background: theme.colors.inputBackgroundLight,
   },
-  '&:active': {
+  "&:active": {
     background: theme.colors.activeBackground,
   },
-  ...(variant === 'primary' && {
+  ...(variant === "primary" && {
     background: theme.colors.primary,
-    color: 'white',
-    '&:hover': {
+    color: "white",
+    "&:hover": {
       background: theme.colors.primaryLight,
     },
-    '&:active': {
+    "&:active": {
       background: theme.colors.primary,
     },
   }),
-  ...(variant === 'secondary' && {
+  ...(variant === "secondary" && {
     background: theme.colors.secondary,
-    color: 'white',
-    '&:hover': {
+    color: "white",
+    "&:hover": {
       background: theme.colors.secondaryLight,
     },
-    '&:active': {
+    "&:active": {
       background: theme.colors.secondary,
     },
   }),
-  ...(variant === 'secondaryBright' && {
-    background: '#0ab557',
-    color: 'white',
-    '&:hover': {
+  ...(variant === "secondaryBright" && {
+    background: "#0ab557",
+    color: "white",
+    "&:hover": {
       opacity: 0.8,
     },
-    '&:active': {
+    "&:active": {
       opacity: 0.9,
     },
   }),
-  ...(variant === 'white' && {
-    background: 'white',
-    '&:hover': {
+  ...(variant === "white" && {
+    background: "white",
+    "&:hover": {
       opacity: 0.8,
     },
-    '&:active': {
+    "&:active": {
       opacity: 0.9,
     },
   }),
-  ...(variant === 'floating' && {
-    background: 'white',
+  ...(variant === "floating" && {
+    background: "white",
     color: theme.colors.text,
-    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
-    fontSize: '12px',
-    padding: '0px 4px',
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+    fontSize: "12px",
+    padding: "0px 4px",
   }),
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
 
-  '& *': {
-    pointerEvents: 'none',
+  "& *": {
+    pointerEvents: "none",
   },
 }));
 
@@ -130,14 +130,14 @@ export const ButtonElement = styled.button<{
 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',
+  minHeight: "19px",
+  display: "flex",
+  alignItems: "center",
+  flex: "1",
+  justifyContent: "center",
 
   // Helps with alignment with the default small text
-  lineHeight: '15px',
+  lineHeight: "15px",
 }));
 
 /* ----------------------------------------------------------------------------
@@ -146,7 +146,9 @@ const ButtonContent = styled.span(({ theme }) => ({
 
 export interface ButtonRootProps {
   id?: string;
-  flex?: CSSProperties['flex'];
+  className?: string;
+  style?: CSSProperties;
+  flex?: CSSProperties["flex"];
   tabIndex?: number;
   children: ReactNode;
   active?: boolean;
@@ -166,24 +168,28 @@ export interface ButtonRootProps {
 export const Button = forwardRef(function Button(
   {
     id,
+    className,
+    style,
     flex,
     tabIndex,
     tooltip,
     active = false,
     disabled = false,
-    variant = 'normal',
-    size = 'normal',
+    variant = "normal",
+    size = "normal",
     contentStyle,
     onClick,
     children,
     ...rest // Propagate any other props so this component works as a Slot
   }: ButtonRootProps,
-  forwardedRef: ForwardedRef<HTMLButtonElement>,
+  forwardedRef: ForwardedRef<HTMLButtonElement>
 ) {
   const buttonElement = (
     <ButtonElement
       ref={forwardedRef}
       id={id}
+      className={className}
+      style={style}
       flex={flex}
       tabIndex={tabIndex}
       active={active}