@noya-app/noya-designsystem 0.1.60 → 0.1.61

package/dist/index.mjs

@@ -726,7 +726,7 @@ var Tooltip = React10.memo(function Tooltip2({
 
 // src/components/Button.tsx
 var variantStyles = {
-  normal: "bg-input-background text-text hover:bg-input-background-light active:bg-active-background min-w-[31px]",
+  normal: "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active min-w-[31px]",
   primary: "bg-primary text-white hover:bg-primary-light active:bg-primary min-w-[31px]",
   secondary: "bg-secondary text-white hover:bg-secondary-light active:bg-secondary min-w-[31px]",
   secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
@@ -764,7 +764,7 @@ var Button = forwardRef4(function Button2({
     "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:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
-    active ? "bg-primary-pastel text-primary hover:bg-primary-pastel-light min-w-[31px]" : variantStyles[variant],
+    active ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover min-w-[31px]" : variantStyles[variant],
     sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size2 !== "small" ? "floating" : variant === "none" ? "none" : size2]
   );
   const buttonClassName = useMemo4(() => {
@@ -3383,7 +3383,7 @@ var colorSchemeStyles = {
   secondary: "text-secondary"
 };
 var Checkbox = React37.memo(
-  React37.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "secondary", ...props }, ref) {
+  React37.forwardRef(function Checkbox2({ className, style: style2, colorScheme = "primary", ...props }, ref) {
     const { fieldId: id } = useLabel({ fieldId: props.id });
     return /* @__PURE__ */ React37.createElement(
       "div",
@@ -3408,10 +3408,10 @@ var Checkbox = React37.memo(
             m-0
             rounded
             bg-input-background
-            
             border
             border-divider
             disabled:opacity-50
+            cursor-pointer
             disabled:cursor-not-allowed
             focus:ring-2
             focus:ring-primary
@@ -4203,6 +4203,10 @@ var getGridSize = (size2) => {
       minColumnWidth: "220px",
       gap: 30
     },
+    mediumLarge: {
+      minColumnWidth: "250px",
+      gap: 35
+    },
     large: {
       minColumnWidth: "280px",
       gap: 40
@@ -6117,6 +6121,7 @@ var pyMap = {
   xs: "py-0.5",
   small: "py-0.5",
   medium: "py-1",
+  mediumLarge: "py-1.5",
   large: "py-2",
   xl: "py-3"
 };
@@ -6125,6 +6130,7 @@ var thumbnailSizeMap = {
   xs: "w-5 h-5",
   small: "w-5 h-5",
   medium: "w-8 h-8",
+  mediumLarge: "w-12 h-12",
   large: "w-16 h-16",
   xl: "w-24 h-24"
 };
@@ -6133,6 +6139,7 @@ var rowGapMap = {
   xs: "gap-2",
   small: "gap-2",
   medium: "gap-3",
+  mediumLarge: "gap-3",
   large: "gap-3",
   xl: "gap-4"
 };
@@ -6141,6 +6148,7 @@ var fontStyleMap = {
   xs: "font-medium text-list-small",
   small: "font-medium text-list-small",
   medium: "font-medium",
+  mediumLarge: "font-medium",
   large: "font-medium",
   xl: "font-medium text-heading4 text-text"
 };
@@ -7100,11 +7108,8 @@ var Divider = memo20(function Divider2({
     "div",
     {
       className: cx(
-        `
-        h-px min-h-px
-        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
-        self-stretch
-      `,
+        `h-px min-h-px self-stretch`,
+        variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider",
         className
       ),
       style: {
@@ -7126,12 +7131,11 @@ var DividerVertical = memo20(function DividerVertical2({
   return /* @__PURE__ */ React57.createElement(
     "div",
     {
-      className: cx(`
-        w-px min-w-px
-        ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
-        self-stretch
-        ${className}
-      `),
+      className: cx(
+        `w-px min-w-px self-stretch`,
+        variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider",
+        className
+      ),
       style: {
         marginTop: `-${overflow}px`,
         marginBottom: `-${overflow}px`,
@@ -11198,6 +11202,7 @@ var iconSizeMap = {
   xs: 12,
   small: 12,
   medium: "max(15px, 20%)",
+  mediumLarge: "max(15px, 20%)",
   large: "max(15px, 20%)",
   xl: "max(15px, 20%)"
 };
@@ -11452,7 +11457,7 @@ var SegmentedControlItem = forwardRef26(function SegmentedControlItem2({
         "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
         variant === "tabs" ? "font-semibold" : "font-normal",
         variant === "tabs" ? "" : colorScheme === "secondary" ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1" : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
-        variant === "tabs" ? "aria-checked:text-primary" : colorScheme === "secondary" ? "aria-checked:bg-secondary aria-checked:text-white" : colorScheme === "primary" ? "aria-checked:bg-primary aria-checked:text-white" : "aria-checked:bg-background aria-checked:text-text",
+        variant === "tabs" ? "aria-checked:text-primary" : colorScheme === "secondary" ? "aria-checked:bg-secondary aria-checked:text-white" : colorScheme === "primary" ? "aria-checked:bg-primary aria-checked:text-white" : "aria-checked:bg-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
         "focus:z-interactable",
         variant === "default" ? "px-1 rounded aria-checked:shadow-segment" : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
         variant === "default" && "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
@@ -11562,7 +11567,8 @@ var SelectionToolbarContainer = memo33(
           zIndex: 1e3,
           opacity: size2 ? 1 : 0,
           transition: "opacity 0.2s ease-in-out",
-          ["--n-input-background"]: "transparent"
+          [cssVarNames.colors.inputBackground]: "transparent",
+          [cssVarNames.colors.buttonBackground]: "transparent"
         }
       },
       /* @__PURE__ */ React80.createElement(
@@ -11763,7 +11769,6 @@ var THUMB_WIDTH = 8;
 var thumbStyle = {
   width: THUMB_WIDTH
 };
-var insetEndStyles2 = getInsetEndStyles();
 var Slider = memo34(function Slider2({
   style: style2,
   className,
@@ -11782,37 +11787,16 @@ var Slider = memo34(function Slider2({
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
-  const { label, fieldId: id } = useLabel({
-    label: props.label,
+  const { fieldId: id } = useLabel({
     fieldId: props.id
   });
-  const labelPosition = useLabelPosition();
   const handleValueChange = useCallback31(
     (arrayValue2) => {
       onValueChange(arrayValue2[0]);
     },
     [onValueChange]
   );
-  const percentage = useMemo38(() => {
-    const rawPercent = (arrayValue[0] - min) / (max - min);
-    const adjustedPercent = rawPercent * (100 - THUMB_WIDTH * 100 / 300) + THUMB_WIDTH * 50 / 300;
-    return {
-      raw: rawPercent * 100,
-      adjusted: adjustedPercent
-    };
-  }, [arrayValue, min, max]);
-  const trackFillStyle = useMemo38(
-    () => ({
-      clipPath: `inset(0 ${100 - percentage.adjusted}% 0 0)`
-    }),
-    [percentage.adjusted]
-  );
-  const labelStyle = useMemo38(
-    () => ({
-      clipPath: `inset(0 ${100 - percentage.raw}% 0 0)`
-    }),
-    [percentage.raw]
-  );
+  const ratio = (arrayValue[0] - min) / (max - min);
   return /* @__PURE__ */ React82.createElement(
     RadixSlider.Root,
     {
@@ -11823,7 +11807,7 @@ var Slider = memo34(function Slider2({
       value: arrayValue,
       onValueChange: handleValueChange,
       className: cx(
-        "flex relative items-center select-none touch-none h-input-height rounded overflow-hidden flex-grow max-h-input-height",
+        "flex relative items-center select-none touch-none h-input-height rounded flex-grow max-h-input-height cursor-pointer",
         className
       ),
       style: style2,
@@ -11831,24 +11815,33 @@ var Slider = memo34(function Slider2({
       onBlur,
       disabled: readOnly
     },
-    /* @__PURE__ */ React82.createElement(RadixSlider.Track, { className: "flex-grow h-full rounded overflow-hidden bg-input-background" }, label && labelPosition === "inset" && /* @__PURE__ */ React82.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React82.createElement(Label, { htmlFor: id, className: "text-text-disabled" }, label)), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React82.createElement("div", { className: "relative flex-grow h-[3px] overflow-hidden" }, /* @__PURE__ */ React82.createElement(
       "div",
       {
-        style: trackFillStyle,
-        className: cx(
-          "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
-          colorScheme === "primary" && "bg-primary",
-          colorScheme === "secondary" && "bg-secondary"
-        )
+        className: "absolute h-full rounded-l bg-primary",
+        style: {
+          left: 0,
+          width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`
+        }
+      }
+    ), /* @__PURE__ */ React82.createElement(
+      "div",
+      {
+        className: "absolute h-full rounded-r bg-input-background",
+        style: {
+          right: 0,
+          width: `calc(100% - ${ratio * 100}% + ${ratio * 8}px - 10px)`
+        }
       }
     )),
-    label && labelPosition === "inset" && colorScheme !== void 0 && /* @__PURE__ */ React82.createElement("div", { className: insetEndStyles2 }, /* @__PURE__ */ React82.createElement(Label, { className: "text-white overflow-hidden", style: labelStyle }, label)),
     /* @__PURE__ */ React82.createElement(
       RadixSlider.Thumb,
       {
         style: thumbStyle,
         className: cx(
-          "block h-input-height rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
+          "block h-[21px] rounded-sm bg-slider-thumb-background shadow-sliderThumb transition-colors focus:outline-primary focus:outline-2",
+          "cursor-ew-resize",
+          // "outline-none outline outline-2 outline-offset-[0px] outline-background",
           colorScheme === void 0 && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"
@@ -12852,6 +12845,7 @@ var LabeledRow = memo40(function LabeledRow2({
 // src/components/BaseToolbar.tsx
 import React92 from "react";
 var toolbarStyle = {
+  [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent"
 };
 function BaseToolbar({