@noya-app/noya-designsystem 0.1.40 → 0.1.42

package/src/components/BaseToolbar.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { cssVars } from "../theme";
+import { Divider, DividerVertical } from "./Divider";
+import { Spacer } from "./Spacer";
+
+export interface BaseToolbarProps {
+  children?: React.ReactNode;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  logo?: React.ReactNode;
+  showDivider?: boolean;
+}
+
+export function BaseToolbar({
+  children,
+  left,
+  right,
+  logo,
+  showDivider = true,
+}: BaseToolbarProps) {
+  return (
+    <div className="flex flex-col">
+      <div
+        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative"
+        style={{
+          flex: `0 0 ${cssVars.spacing.toolbarHeight}`,
+        }}
+      >
+        {logo && (
+          <>
+            {logo}
+            <DividerVertical />
+          </>
+        )}
+        <Spacer.Horizontal size={10} />
+        {left && (
+          <>
+            <div className="flex gap-toolbar-separator">{left}</div>
+            <Spacer.Horizontal size={10} />
+          </>
+        )}
+        <div className="flex items-center justify-center text-text-muted pointer-events-none lg:absolute inset-0">
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "all",
+            }}
+          >
+            {children}
+          </div>
+        </div>
+        <Spacer.Horizontal />
+        <Spacer.Horizontal size={10} />
+        <div className="flex gap-toolbar-separator">{right}</div>
+      </div>
+      {showDivider && <Divider variant="strong" />}
+    </div>
+  );
+}

package/src/components/Button.tsx

@@ -87,7 +87,7 @@ export const Button = forwardRef(function Button(
       ref={forwardedRef}
       id={id}
       className={cx(
-        "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(--popover-background)_inset]",
+        "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(--popover-background)_inset] transition-all",
         disabled ? "opacity-25" : "",
         !className?.includes("flex") ? "flex-none" : "",
         active

package/src/components/Checkbox.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, InputHTMLAttributes, memo } from "react";
+import * as React from "react";
 import { cx } from "../utils/classNames";
 
 interface CheckboxProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
   colorScheme?: "primary" | "secondary";
 }
 
@@ -12,8 +12,8 @@ const colorSchemeStyles = {
   secondary: "text-secondary",
 };
 
-export const Checkbox = memo(
-  forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+export const Checkbox = React.memo(
+  React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
     { className, style, colorScheme = "secondary", ...props },
     ref
   ) {
@@ -37,15 +37,16 @@ export const Checkbox = memo(
             m-0
             rounded
             bg-input-background
-            transition-colors
+            
             border
-            border-input-border
+            border-divider
             disabled:opacity-50
             disabled:cursor-not-allowed
             focus:ring-2
             focus:ring-primary
             focus:ring-offset-1
             focus:z-interactable
+            transition-all
           `}
           {...props}
         />