@noya-app/noya-designsystem 0.1.37 → 0.1.38

package/src/components/ListView.tsx

@@ -24,6 +24,7 @@ import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
+import { cssVars } from "../theme";
 import { ContextMenu } from "./ContextMenu";
 import { InputField, InputFieldInputProps } from "./InputField";
 import { MenuItem } from "./internal/Menu";
@@ -180,22 +181,6 @@ function getPositionMargin(marginType: ListRowMarginType) {
  * Row
  * ------------------------------------------------------------------------- */
 
-const theme = {
-  colors: {
-    textMuted: "var(--text-muted)",
-    listView: {
-      raisedBackground: "var(--listview-raised-background)",
-    },
-    secondary: "var(--secondary)",
-    primary: "var(--primary)",
-    textDisabled: "var(--text-disabled)",
-    primaryLight: "var(--primary-light)",
-    secondaryLight: "var(--secondary-light)",
-    activeBackground: "var(--active-background)",
-    dividerSubtle: "var(--divider-subtle)",
-  },
-};
-
 const RowContainer = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & {
@@ -231,6 +216,7 @@ const RowContainer = forwardRef<
       $gap,
       $backgroundColor,
       style,
+      "aria-describedby": _, // Causes hydration warning
       ...props
     },
     ref
@@ -264,19 +250,19 @@ const RowContainer = forwardRef<
               marginBottom: `${margin.bottom}px`,
             }),
           }),
-          color: theme.colors.textMuted,
+          color: cssVars.colors.textMuted,
           ...($isSectionHeader && {
-            backgroundColor: theme.colors.listView.raisedBackground,
+            backgroundColor: cssVars.colors.listviewRaisedBackground,
             ...($sectionHeaderVariant === "label" && {
-              color: theme.colors.textDisabled,
+              color: cssVars.colors.textDisabled,
             }),
           }),
           ...($disabled && {
-            color: theme.colors.textDisabled,
+            color: cssVars.colors.textDisabled,
           }),
           ...($selected && {
             color: "white",
-            backgroundColor: theme.colors[$colorScheme],
+            backgroundColor: cssVars.colors[$colorScheme],
           }),
           display: "flex",
           alignItems: "center",
@@ -296,19 +282,19 @@ const RowContainer = forwardRef<
             }),
           position: "relative",
           ...($hovered && {
-            boxShadow: `0 0 0 1px ${theme.colors[$colorScheme]} inset`,
+            boxShadow: `0 0 0 1px ${cssVars.colors[$colorScheme]} inset`,
           }),
           ...($showsActiveState && {
             "&:active": {
               backgroundColor: $selected
                 ? $colorScheme === "secondary"
-                  ? theme.colors.secondaryLight
-                  : theme.colors.primaryLight
-                : theme.colors.activeBackground,
+                  ? cssVars.colors.secondaryLight
+                  : cssVars.colors.primaryLight
+                : cssVars.colors.activeBackground,
             },
           }),
           ...($divider && {
-            borderBottom: `1px solid ${theme.colors.dividerSubtle}`,
+            borderBottom: `1px solid ${cssVars.colors.dividerSubtle}`,
           }),
           ...($backgroundColor && {
             backgroundColor: $backgroundColor,
@@ -360,10 +346,10 @@ const ListViewDragIndicatorElement = forwardRef<
           ...($relativeDropPosition === "inside"
             ? {
                 inset: 2,
-                boxShadow: `0 0 0 1px var(--sidebar-background), 0 0 0 3px ${
+                boxShadow: `0 0 0 1px ${cssVars.colors.sidebarBackground}, 0 0 0 3px ${
                   $colorScheme === "secondary"
-                    ? "var(--secondary)"
-                    : "var(--drag-outline)"
+                    ? cssVars.colors.secondary
+                    : cssVars.colors.dragOutline
                 }`,
               }
             : {
@@ -380,15 +366,16 @@ const ListViewDragIndicatorElement = forwardRef<
                 height: 6,
                 backgroundColor:
                   $colorScheme === "secondary"
-                    ? "var(--secondary)"
-                    : "var(--primary)",
+                    ? cssVars.colors.secondary
+                    : cssVars.colors.primary,
                 border: `2px solid white`,
                 boxShadow: "0 0 2px rgba(0,0,0,0.5)",
               }),
           ...style,
         }}
       />
-    );}
+    );
+  }
 );
 
 interface ListViewClickInfo {

package/src/components/RadioGroup.tsx

@@ -29,7 +29,7 @@ const ToggleGroupItem = forwardRef(function ToggleGroupItem(
       ref={forwardedRef}
       value={value}
       disabled={disabled}
-      className={`font-sans text-heading5 font-normal relative flex-1 appearance-none border-none bg-none text-radio-group-item p-0 m-0 rounded inline-flex items-center justify-center align-middle focus:outline-none focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] aria-checked:bg-${colorScheme ? colorScheme : "radio-group-background"} aria-checked:text-${colorScheme ? "radio-group-background" : "text"} aria-checked:shadow-${colorScheme ? "none" : "0_1px_1px_rgba(0,0,0,0.1)"}`}
+      className={`font-sans text-heading5 font-normal relative flex-1 appearance-none border-none bg-none text-radio-group-item p-0 m-0 rounded inline-flex items-center justify-center align-middle focus:outline-none focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] aria-checked:bg-${colorScheme ? colorScheme : "radio-group-background"} aria-checked:text-${colorScheme ? "radio-group-background" : "text"} aria-checked:shadow-${colorScheme ? "none" : "0_1px_1px_rgba(0,0,0,0.1)"} focus:z-interactable`}
     >
       {children}
     </ToggleGroupPrimitive.Item>

package/src/components/SelectMenu.tsx

@@ -29,7 +29,7 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
-const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center mr-1.5`;
+const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center mr-1.5 z-label`;
 
 const scrollButtonStyles = `
   flex 
@@ -66,7 +66,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
         id={id}
         style={style}
         contentStyle={readOnlyStyle}
-        className={`${className ?? ""} flex-1`}
+        className={`${className ?? ""} flex-1 focus:z-interactable`}
         disabled={disabled}
       >
         {icon && (
@@ -87,7 +87,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
         <Button
           id={id}
           style={style}
-          className={`${className ?? "w-full"} flex-1`}
+          className={`${className ?? "w-full"} flex-1 focus:z-interactable`}
           disabled={disabled}
         >
           {icon && (

package/src/components/Switch.tsx

@@ -27,7 +27,7 @@ export const Switch = function Switch({
       onCheckedChange={(newValue) => {
         onChange(newValue);
       }}
-      className={`all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`}
+      className={`all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"} focus:z-interactable`}
     >
       <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
     </SwitchPrimitive.Root>

package/src/components/Text.tsx

@@ -1,7 +1,20 @@
 import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
-import { camelCaseToKebabCase, ThemeColor } from "../utils/tailwind";
-
-type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
+import { ThemeColor } from "../theme";
+import { camelToKebabCase, KebabToCamelCase } from "../theme/themeUtils";
+
+type Variant =
+  | "title"
+  | "subtitle"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "body"
+  | "small"
+  | "button"
+  | "code"
+  | "label";
 
 const elements: Record<Variant, keyof ReactHTML> = {
   title: "h1",
@@ -33,19 +46,19 @@ export const textStyles: Record<Variant, string> = {
   label: "font-sans text-label font-normal uppercase",
 } as const;
 
-export type  TextProps = {
+export type TextProps = {
   as?: keyof ReactHTML;
   href?: string;
   className?: string;
   style?: React.CSSProperties;
   variant: Variant;
-  color?: ThemeColor;
+  color?: KebabToCamelCase<ThemeColor>;
   children: ReactNode;
   onClick?: () => void;
   onDoubleClick?: () => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
   tabIndex?: number;
-}
+};
 
 export const Text = forwardRef(function Text(
   {
@@ -69,7 +82,7 @@ export const Text = forwardRef(function Text(
     <Component
       // @ts-expect-error expected to be many semantic html elements
       ref={forwardedRef}
-      className={`${textStyles[variant]} text-${camelCaseToKebabCase(String(color)) ?? "text"} ${className ?? ""}`}
+      className={`${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} ${className ?? ""}`}
       style={style}
       tabIndex={tabIndex}
       onClick={onClick}

package/src/components/TextArea.tsx

@@ -45,7 +45,7 @@ export const AutoResizingTextArea = memo(
 
     return (
       <textarea
-        className={`font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary focus:z-10 read-only:text-text-disabled ${className ?? ""}`}
+        className={`font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable ${className ?? ""}`}
         ref={handleRef}
         {...rest}
         onChange={handleChange}

package/src/components/Tooltip.tsx

@@ -22,7 +22,7 @@ export const Tooltip = memo(function Tooltip({ children, content }: Props) {
             align="center"
             sideOffset={2}
             collisionPadding={8}
-            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_var(--shadow-color)_0_0_12px_var(--shadow-color)] border border-solid border-divider-strong`}
+            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2)_0_0_12px_rgba(0,0,0,0.1)] border border-solid border-divider-strong`}
           >
             {content}
             {/* <Arrow /> */}

package/src/components/WorkspaceLayout.tsx

@@ -22,6 +22,7 @@ import {
   usePreservePanelSize,
 } from "../hooks/usePreservePanelSize";
 import { useWindowSize } from "../hooks/useWindowSize";
+import { cssVars } from "../theme";
 
 interface Props {
   autoSavePrefix?: string;
@@ -184,7 +185,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
       id={id}
       className={className}
       style={{
-        backgroundColor: "var(--canvas-background)",
+        backgroundColor: cssVars.colors.canvasBackground,
         display: "flex",
         flexDirection: "row",
         ...style,
@@ -226,7 +227,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 cursor: "col-resize",
                 width: "1px",
                 height: "100%",
-                backgroundColor: "var(--divider)",
+                backgroundColor: cssVars.colors.divider,
               }}
             />
           </>
@@ -251,7 +252,7 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 cursor: "col-resize",
                 width: "1px",
                 height: "100%",
-                backgroundColor: "var(--divider)",
+                backgroundColor: cssVars.colors.divider,
               }}
             />
             <Panel

package/src/components/internal/TextInput.tsx

@@ -53,6 +53,7 @@ const ReadOnlyTextInput = forwardRef(function ReadOnlyTextInput(
       value={value}
       onKeyDown={onKeyDown}
       readOnly
+      className="focus:z-interactable"
     />
   );
 });

package/src/index.css

@@ -65,7 +65,17 @@
   --radio-group-item: rgb(139, 139, 139);
   --dot: rgba(0,0,0,0.25);
   --row-highlight: #3390FF10;
-  --table-row-background: var(--background)
+  --table-row-background: var(--background);
+  --interactable-z-index: 2;
+  --label-z-index: 3;
+  --chip-primary-bg: rgba(238,229,255,0.2);
+  --chip-secondary-bg: rgba(205,238,231,0.2);
+  --chip-error-bg: rgba(255,219,219,0.2);
+  --chip-default-bg: rgba(0,0,0,0.1);
+  --chip-primary-shadow: rgb(238,229,255);
+  --chip-secondary-shadow: rgb(205,238,231);
+  --chip-error-shadow: rgb(255,219,219);
+  --chip-default-shadow: rgb(0,0,0);
 }
 
 [data-theme="dark"] {
@@ -105,4 +115,4 @@
   --thumbnail-shadow: #1f1d3366;
   --dot: rgba(255,255,255,0.15);
   --table-row-background: var(--sidebar-background);
-}
+}

package/src/index.tsx

@@ -71,7 +71,6 @@ export * from "./hooks/usePlatform";
 export * from "./mediaQuery";
 export * from "./theme";
 export { cn } from './utils/tailwind';
-export type { ThemeColor } from './utils/tailwind';
 export * from "./utils/createSectionedMenu";
 export * from "./utils/getGradientBackground";
 export * from "./hooks/usePreservePanelSize";

package/src/theme/index.ts

@@ -1,5 +1,8 @@
 import tailwindConfig from "../../tailwind.config";
+import { convertKebabToCamelCase } from "./themeUtils";
 
-// Extract the theme configuration
-// @ts-expect-error TODO: figure this out
-export type Theme = typeof tailwindConfig.theme.extend;
+export type Theme = (typeof tailwindConfig.theme)["extend"];
+
+export type ThemeColor = keyof Theme["colors"];
+
+export const cssVars = convertKebabToCamelCase(tailwindConfig.theme.extend);

package/src/theme/themeUtils.ts

@@ -0,0 +1,72 @@
+export type KebabToCamelCase<S extends string> =
+  S extends `${infer First}-${infer Rest}`
+    ? `${First}${Capitalize<KebabToCamelCase<Rest>>}`
+    : S;
+
+type IsPlainObject<T> = T extends Array<any> | Set<any> | Map<any, any>
+  ? false
+  : T extends object
+    ? true
+    : false;
+
+type KebabToCamelCaseKeys<T> = {
+  [K in keyof T as K extends string
+    ? KebabToCamelCase<K>
+    : K]: T[K] extends object
+    ? IsPlainObject<T[K]> extends true
+      ? KebabToCamelCaseKeys<T[K]>
+      : T[K]
+    : T[K];
+};
+
+type _CamelToKebabCase<S extends string> = S extends `${infer C}${infer Rest}`
+  ? C extends Uppercase<C>
+    ? `-${Lowercase<C>}${_CamelToKebabCase<Rest>}`
+    : `${C}${_CamelToKebabCase<Rest>}`
+  : S;
+
+// Remove leading hyphen if exists
+type TrimHyphen<S extends string> = S extends `-${infer Rest}` ? Rest : S;
+
+export type CamelToKebabCase<S extends string> = TrimHyphen<
+  _CamelToKebabCase<S>
+>;
+
+export function camelToKebabCase<S extends string>(
+  str: S
+): CamelToKebabCase<S> {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase() as CamelToKebabCase<S>;
+}
+
+export function kebabToCamelCase<S extends string>(
+  str: S
+): KebabToCamelCase<S> {
+  return str.replace(/-([a-z])/g, (_, letter) =>
+    letter.toUpperCase()
+  ) as KebabToCamelCase<S>;
+}
+
+// Runtime function to convert all keys in an object from kebab-case to camelCase
+export function convertKebabToCamelCase<T extends object>(
+  obj: T
+): KebabToCamelCaseKeys<T> {
+  if (Array.isArray(obj) || obj instanceof Set || obj instanceof Map) {
+    return obj as KebabToCamelCaseKeys<T>;
+  }
+
+  const result: any = {};
+
+  for (const [key, value] of Object.entries(obj)) {
+    const camelKey = kebabToCamelCase(key);
+    result[camelKey] =
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      !(value instanceof Set) &&
+      !(value instanceof Map)
+        ? convertKebabToCamelCase(value)
+        : value;
+  }
+
+  return result as KebabToCamelCaseKeys<T>;
+}

package/src/utils/tailwind.ts

@@ -1,17 +1,9 @@
-import { Theme } from '../theme';
 import { twMerge } from "tailwind-merge";
 
-/** 
+/**
  * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
  * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
  * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
-*/
-export const cn = (...classes: (string | boolean | undefined | null)[]) => twMerge(classes.filter(Boolean) as string[])
-
-// @ts-expect-error TODO: figure this out
-type ThemeExtend = NonNullable<Theme['extend']>
-export type ThemeColor = keyof ThemeExtend['colors'];
-
-export function camelCaseToKebabCase(string: string) {
-  return string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
+ */
+export const cn = (...classes: (string | boolean | undefined | null)[]) =>
+  twMerge(classes.filter(Boolean) as string[]);

package/tailwind.config.ts

@@ -1,6 +1,6 @@
-import { Config } from "tailwindcss";
+import type { Config } from "tailwindcss";
 
-const config: Config = {
+const config = {
   content: ["./src/**/*.{ts,tsx}"],
   corePlugins: {
     // disables @tailwind base global styles
@@ -66,6 +66,14 @@ const config: Config = {
         dot: "var(--dot)",
         "row-highlight": "var(--row-highlight)",
         "table-row-background": "var(--table-row-background)",
+        "chip-primary-bg": "var(--chip-primary-bg)",
+        "chip-secondary-bg": "var(--chip-secondary-bg)",
+        "chip-error-bg": "var(--chip-error-bg)",
+        "chip-default-bg": "var(--chip-default-bg)",
+        "chip-primary-shadow": "var(--chip-primary-shadow)",
+        "chip-secondary-shadow": "var(--chip-secondary-shadow)",
+        "chip-error-shadow": "var(--chip-error-shadow)",
+        "chip-default-shadow": "var(--chip-default-shadow)",
       },
       fontFamily: {
         sans: [
@@ -200,6 +208,10 @@ const config: Config = {
         spin: "spin 1s linear infinite",
         shimmer: "shimmer 6s infinite linear",
       },
+      zIndex: {
+        interactable: "var(--interactable-z-index)",
+        label: "var(--label-z-index)",
+      }
     },
   },
   safelist: [
@@ -218,7 +230,8 @@ const config: Config = {
     "-mr-2",
     "border-gray-200",
     "gap-1.5",
+    "gap-toolbar-separator",
   ],
-};
+} satisfies Config;
 
 export default config;