@noya-app/noya-designsystem 0.0.13 → 0.0.15

package/dist/index.js

@@ -50,6 +50,7 @@ __export(src_exports, {
   DropdownMenu: () => DropdownMenu,
   FillInputField: () => FillInputField,
   FillPreviewBackground: () => FillPreviewBackground,
+  FullscreenDialog: () => FullscreenDialog,
   GlobalInputBlurProvider: () => GlobalInputBlurProvider,
   GradientPicker: () => GradientPicker,
   GridView: () => GridView,
@@ -245,9 +246,9 @@ var ButtonElement = import_styled_components4.default.button(({ theme, active, d
   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",
@@ -332,6 +333,8 @@ var ButtonContent = import_styled_components4.default.span(({ theme }) => ({
 }));
 var Button = (0, import_react4.forwardRef)(function Button2({
   id,
+  className,
+  style,
   flex,
   tabIndex,
   tooltip,
@@ -350,6 +353,8 @@ var Button = (0, import_react4.forwardRef)(function Button2({
     {
       ref: forwardedRef,
       id,
+      className,
+      style,
       flex,
       tabIndex,
       active,
@@ -570,6 +575,28 @@ var Dialog = (0, import_react7.forwardRef)(function Dialog2({
     children
   ));
 });
+var FullscreenDialog = (0, import_react7.forwardRef)(function FullscreenDialog2({ style, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ import_react7.default.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
 var import_noya_icons2 = require("@noya-app/noya-icons");
@@ -1824,6 +1851,7 @@ var ChipElement = import_styled_components16.default.span(({ theme, colorScheme,
     display: "inline-flex",
     alignItems: "center",
     lineHeight: "1.4",
+    whiteSpace: "pre",
     ...size2 === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
@@ -2751,10 +2779,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 = import_styled_components23.default.div(({ theme, size: size2, padding }) => {
@@ -2914,7 +2952,8 @@ var GridViewItem = (0, import_react27.forwardRef)(function GridViewItem2({
   children,
   menuItems,
   onSelectMenuItem,
-  onContextMenu
+  onContextMenu,
+  style
 }, forwardedRef) {
   const [hovered, setHovered] = import_react27.default.useState(false);
   const { hoverProps } = useHover({
@@ -2963,7 +3002,8 @@ var GridViewItem = (0, import_react27.forwardRef)(function GridViewItem2({
         hovered: !disabled && hovered,
         onClick: handleClick,
         onDoubleClick,
-        onContextMenu
+        onContextMenu,
+        style
       },
       children
     ),
@@ -4072,6 +4112,7 @@ var InputFieldWithCompletions = (0, import_react31.memo)(
     onBlur,
     onDeleteWhenEmpty,
     style,
+    className,
     children,
     hideChildrenWhenFocused = false,
     hideMenuWhenEmptyValue = false
@@ -4273,6 +4314,7 @@ var InputFieldWithCompletions = (0, import_react31.memo)(
           onFocusCapture: handleFocus,
           onKeyDown: handleKeyDown,
           style,
+          className,
           autoCapitalize: "off",
           autoComplete: "off",
           autoCorrect: "off",
@@ -4777,7 +4819,7 @@ var Slider = function Slider2({
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
 var import_react38 = __toESM(require("react"));
 var import_styled_components33 = __toESM(require("styled-components"));
-var SwitchRoot = (0, import_styled_components33.default)(SwitchPrimitive.Root)(({ theme, variant }) => ({
+var SwitchRoot = (0, import_styled_components33.default)(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
   all: "unset",
   width: 32,
   height: 19,
@@ -4809,12 +4851,12 @@ var SwitchThumb = (0, import_styled_components33.default)(SwitchPrimitive.Thumb)
 var Switch = function Switch2({
   value,
   onChange,
-  variant = "normal"
+  colorScheme = "normal"
 }) {
   return /* @__PURE__ */ import_react38.default.createElement(
     SwitchRoot,
     {
-      variant,
+      colorScheme,
       checked: value,
       onCheckedChange: (newValue) => {
         onChange(newValue);
@@ -4908,6 +4950,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)",
@@ -4921,6 +4964,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)",
@@ -4962,10 +5010,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];
@@ -4975,6 +5024,7 @@ var textStyles = {
     fontSize: `${typeScale[0]}rem`,
     fontWeight: "bold",
     lineHeight: "1.4",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "36px"
     }
@@ -4984,6 +5034,7 @@ var textStyles = {
     fontSize: `${typeScale[3]}rem`,
     fontWeight: 500,
     lineHeight: "1.75",
+    letterSpacing: "-0.05em",
     [mediaQuery.small]: {
       fontSize: "18px"
     }
@@ -4992,19 +5043,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,
@@ -5100,6 +5154,8 @@ var colors2 = (0, import_immer.default)(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
@@ -5188,7 +5244,7 @@ var Column = import_styled_components34.default.div(({ theme }) => ({
   flex: "1",
   display: "flex",
   flexDirection: "column",
-  gap: "2px"
+  gap: "4px"
 }));
 var Checkbox = import_styled_components34.default.input(({ theme }) => ({
   margin: 0
@@ -5395,6 +5451,7 @@ var DimensionInput = (0, import_react42.memo)(function DimensionInput2({
   DropdownMenu,
   FillInputField,
   FillPreviewBackground,
+  FullscreenDialog,
   GlobalInputBlurProvider,
   GradientPicker,
   GridView,