@noya-app/noya-designsystem 0.0.13 → 0.0.15

package/dist/index.mjs

@@ -128,9 +128,9 @@ var ButtonElement = styled4.button(({ theme, active, disabled, variant, size: si
   textAlign: "left",
   borderRadius: "4px",
   paddingTop: variant === "none" ? "0px" : "4px",
-  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "6px",
+  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
   paddingBottom: variant === "none" ? "0px" : "4px",
-  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "6px",
+  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
   ...size2 === "large" && {
     paddingTop: "12px",
     paddingRight: "16px",
@@ -215,6 +215,8 @@ var ButtonContent = styled4.span(({ theme }) => ({
 }));
 var Button = forwardRef(function Button2({
   id,
+  className,
+  style,
   flex,
   tabIndex,
   tooltip,
@@ -233,6 +235,8 @@ var Button = forwardRef(function Button2({
     {
       ref: forwardedRef,
       id,
+      className,
+      style,
       flex,
       tabIndex,
       active,
@@ -473,6 +477,28 @@ var Dialog = forwardRef3(function Dialog2({
     children
   ));
 });
+var FullscreenDialog = forwardRef3(function FullscreenDialog2({ style, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React7.createElement(
+    Dialog,
+    {
+      ref: forwardedRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        top: "0",
+        left: "0",
+        transform: "none",
+        display: "flex",
+        flexDirection: "column",
+        padding: 0,
+        ...style
+      },
+      ...rest
+    }
+  );
+});
 
 // src/components/InputField.tsx
 import { CaretDownIcon } from "@noya-app/noya-icons";
@@ -1754,6 +1780,7 @@ var ChipElement = styled14.span(({ theme, colorScheme, size: size2, variant, mon
     display: "inline-flex",
     alignItems: "center",
     lineHeight: "1.4",
+    whiteSpace: "pre",
     ...size2 === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
@@ -2710,10 +2737,20 @@ var sizes = {
     itemHeight: 170,
     gap: 20
   },
+  medium: {
+    itemWidth: 220,
+    itemHeight: 220,
+    gap: 16
+  },
   large: {
     itemWidth: 280,
     itemHeight: 280,
-    gap: 20
+    gap: 24
+  },
+  xl: {
+    itemWidth: 400,
+    itemHeight: 400,
+    gap: 32
   }
 };
 var Grid2 = styled21.div(({ theme, size: size2, padding }) => {
@@ -2873,7 +2910,8 @@ var GridViewItem = forwardRef9(function GridViewItem2({
   children,
   menuItems,
   onSelectMenuItem,
-  onContextMenu
+  onContextMenu,
+  style
 }, forwardedRef) {
   const [hovered, setHovered] = React25.useState(false);
   const { hoverProps } = useHover({
@@ -2922,7 +2960,8 @@ var GridViewItem = forwardRef9(function GridViewItem2({
         hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
-        onContextMenu
+        onContextMenu,
+        style
       },
       children
     ),
@@ -4071,6 +4110,7 @@ var InputFieldWithCompletions = memo20(
     onBlur,
     onDeleteWhenEmpty,
     style,
+    className,
     children,
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
@@ -4272,6 +4312,7 @@ var InputFieldWithCompletions = memo20(
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
           style,
+          className,
           autoCapitalize: "off",
           autoComplete: "off",
           autoCorrect: "off",
@@ -4800,7 +4841,7 @@ var Slider = function Slider2({
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import React36 from "react";
 import styled31 from "styled-components";
-var SwitchRoot = styled31(SwitchPrimitive.Root)(({ theme, variant }) => ({
+var SwitchRoot = styled31(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -4832,12 +4873,12 @@ var SwitchThumb = styled31(SwitchPrimitive.Thumb)({
 var Switch = function Switch2({
   value,
   onChange,
-  variant = "normal"
+  colorScheme = "normal"
 }) {
   return /* @__PURE__ */ React36.createElement(
     SwitchRoot,
     {
-      variant,
+      colorScheme,
       checked: value,
       onCheckedChange: (newValue) => {
         onChange(newValue);
@@ -4936,6 +4977,7 @@ var colors = {
   textMuted: "rgb(85, 85, 85)",
   textSubtle: "rgb(121, 121, 121)",
   textDisabled: "rgb(160, 160, 160)",
+  textDecorativeLight: "rgb(168, 185, 212)",
   dividerSubtle: "rgba(0, 0, 0, 0.04)",
   divider: "rgba(0, 0, 0, 0.07)",
   dividerStrong: "rgba(0, 0, 0, 0.09)",
@@ -4949,6 +4991,11 @@ var colors = {
   inputBackground: "rgb(240, 240, 242)",
   inputBackgroundLight: "rgb(243, 243, 245)",
   codeBackground: "rgb(250, 250, 250)",
+  codeBackgroundLight: "rgb(250, 250, 250)",
+  get codeBackgroundDark() {
+    return colors.text;
+  },
+  codeBackgroundDecorativeDark: "#435080",
   selectedBackground: "rgb(242, 245, 250)",
   transparentChecker: "rgba(255,255,255,0.8)",
   activeBackground: "rgba(0,0,0,0.1)",
@@ -4990,10 +5037,11 @@ var colors = {
     return colors.primary;
   },
   selection: "rgb(179,215,254)",
-  thumbnailBackground: "#E1DAFF"
+  thumbnailBackground: "#E1DAFF",
+  thumbnailShadow: "#D3CEED66"
 };
 var fonts = {
-  normal: "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+  normal: "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
   monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace"
 };
 var typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85];
@@ -5003,6 +5051,7 @@ var textStyles = {
     fontSize: `${typeScale[0]}rem`,
     fontWeight: "bold",
     lineHeight: "1.4",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "36px"
     }
@@ -5012,6 +5061,7 @@ var textStyles = {
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
     lineHeight: "1.75",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "18px"
     }
@@ -5020,19 +5070,22 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[2]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
   },
   heading2: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
   },
   heading3: {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[4]}rem`,
     fontWeight: 500,
-    lineHeight: "1.75"
+    lineHeight: "1.75",
+    letterSpacing: "-0.025em"
   },
   heading4: {
     fontFamily: fonts.normal,
@@ -5128,6 +5181,8 @@ var colors2 = produce(colors, (colors3) => {
   colors3.placeholderDots = "rgba(255,255,255,0.3)";
   colors3.dragOutline = "white";
   colors3.activeBackground = "rgba(181,178,255,0.08)";
+  colors3.thumbnailBackground = "#1f1d33";
+  colors3.thumbnailShadow = "#1f1d3366";
 });
 
 // src/utils/createSectionedMenu.ts
@@ -5216,7 +5271,7 @@ var Column = styled32.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
-  gap: "2px"
+  gap: "4px"
 }));
 var Checkbox = styled32.input(({ theme }) => ({
   margin: 0
@@ -5422,6 +5477,7 @@ export {
   DropdownMenu,
   FillInputField,
   FillPreviewBackground,
+  FullscreenDialog,
   GlobalInputBlurProvider,
   GradientPicker,
   GridView,