@noya-app/noya-designsystem 0.1.36 → 0.1.38

package/src/components/Label.tsx

@@ -1,31 +1,18 @@
-import React, { memo, ReactNode } from "react";
-import { Spacer } from "./Spacer";
-import { textStyles } from "./Text";
+import React, { forwardRef, LabelHTMLAttributes, memo } from "react";
 
-/* ----------------------------------------------------------------------------
- * Root
- * ------------------------------------------------------------------------- */
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
-interface LabelRootProps {
-  label: ReactNode;
-  children: ReactNode;
-}
-
-function LabelRoot({ label, children }: LabelRootProps) {
-  return (
-    <span className={`flex-none relative outline-none border-0 min-w-0 text-left flex flex-col items-center`}>
-      {children}
-      {label && (
-        <>
-          <Spacer.Vertical size={2} />
-          <span className={`${textStyles.small} text-text-muted text-xs flex-none min-w-0 tracking-[0.4px] whitespace-pre`}>{label}</span>
-
-        </>
-      )}
-    </span>
-  );
-}
-
-export namespace Label {
-  export const Root = memo(LabelRoot);
-}
+export const Label = memo(
+  forwardRef<HTMLLabelElement, LabelProps>(function Label(
+    { className, ...props },
+    ref
+  ) {
+    return (
+      <label
+        ref={ref}
+        className={`font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label ${className ?? ""}`}
+        {...props}
+      />
+    );
+  })
+);

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

@@ -1,11 +1,15 @@
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  DropdownChevronIcon,
+} from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
 import { type SelectProps } from "@radix-ui/react-select";
 import React, { CSSProperties, memo, useMemo } from "react";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
-import { Spacer } from "./Spacer";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
+import { Spacer } from "./Spacer";
 
 type Props<T extends string> = {
   id?: string;
@@ -25,11 +29,17 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
-const textStyle: CSSProperties = {
-  fontSize: "0.85rem",
-};
+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 labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] absolute inset-0 font-bold text-[60%] pointer-events-none flex items-center justify-end pr-6`;
+const scrollButtonStyles = `
+  flex 
+  items-center 
+  justify-center 
+  h-[25px] 
+  cursor-default
+  text-text-muted
+  hover:text-text
+`;
 
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   id,
@@ -56,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 && (
@@ -65,9 +75,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
             <Spacer.Horizontal inline size={6} />
           </>
         )}
-        <span style={{ ...textStyle }} className="flex flex-1">
-          {selectedItem?.title ?? value}
-        </span>
+        <span className="flex flex-1">{selectedItem?.title ?? value}</span>
       </Button>
     ),
     [icon, id, style, className, disabled, value, selectedItem]
@@ -78,8 +86,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
       <Select.SelectTrigger asChild>
         <Button
           id={id}
-          style={{ ...textStyle, ...style }}
-          className={`${className ?? "w-full"} flex-1`}
+          style={style}
+          className={`${className ?? "w-full"} flex-1 focus:z-interactable`}
           disabled={disabled}
         >
           {icon && (
@@ -88,25 +96,22 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
               <Spacer.Horizontal inline size={6} />
             </>
           )}
-          <span className="flex flex-1">
+          <span className="flex flex-1 mr-1.5">
             <Select.Value placeholder={placeholder} />
           </span>
-          <Spacer.Horizontal inline size={6} />
+          {label && <span className={labelStyles}>{label}</span>}
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>
     ),
-    [icon, id, style, className, disabled, placeholder]
+    [id, style, className, disabled, icon, placeholder, label]
   );
 
   if (readOnly) {
     return label ? (
       <div className="flex flex-col relative">
         {readOnlyButton}
-        <label
-          className={labelStyles}
-          htmlFor={id}
-        >
+        <label className={labelStyles} htmlFor={id}>
           {label}
         </label>
       </div>
@@ -117,20 +122,12 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
 
   return (
     <Select.Root value={value} onValueChange={onSelect} open={open}>
-      {label ? (
-        <div className="flex-1 flex-col relative">
-          {trigger}
-          {label && (
-            <label className={labelStyles} htmlFor={id}>
-              {label}
-            </label>
-          )}
-        </div>
-      ) : (
-        trigger
-      )}
+      {trigger}
       <Select.Portal>
         <Select.Content className={styles.contentStyle}>
+          <Select.ScrollUpButton className={scrollButtonStyles}>
+            <ChevronUpIcon />
+          </Select.ScrollUpButton>
           <Select.Viewport>
             {menuItems.map((menuItem) => {
               if (typeof menuItem === "string") {
@@ -146,6 +143,9 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
               );
             })}
           </Select.Viewport>
+          <Select.ScrollDownButton className={scrollButtonStyles}>
+            <ChevronDownIcon />
+          </Select.ScrollDownButton>
         </Select.Content>
       </Select.Portal>
     </Select.Root>
@@ -156,21 +156,27 @@ const SelectItem = React.forwardRef(
   (
     {
       children,
-      icon, disabled,
+      icon,
+      disabled,
       ...props
     }: Select.SelectItemProps & { icon?: React.ReactNode },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => {
     return (
-      <Select.Item className={styles.itemStyle({disabled})} disabled={disabled} {...props} ref={forwardedRef}>
+      <Select.Item
+        className={styles.itemStyle({ disabled })}
+        disabled={disabled}
+        {...props}
+        ref={forwardedRef}
+      >
         {icon && (
           <>
             {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}
-        <Select.ItemText style={textStyle}>{children}</Select.ItemText>
+        <Select.ItemText>{children}</Select.ItemText>
       </Select.Item>
     );
   }
-);
+);

package/src/components/Switch.tsx

@@ -4,6 +4,7 @@ import React from "react";
 type SwitchColorScheme = "normal" | "primary" | "secondary";
 
 interface Props {
+  id?: string;
   value: boolean;
   onChange: (value: boolean) => void;
   /** @default normal */
@@ -12,6 +13,7 @@ interface Props {
 }
 
 export const Switch = function Switch({
+  id,
   value,
   onChange,
   colorScheme = "normal",
@@ -19,14 +21,15 @@ export const Switch = function Switch({
 }: Props) {
   return (
     <SwitchPrimitive.Root
+      id={id}
       checked={value}
       disabled={disabled}
       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:outline-primary focus:ring-offset-[1px] 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.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

@@ -17,6 +17,7 @@ declare module "react" {
 export * from "./components/ActivityIndicator";
 export * from "./components/Avatar";
 export * from "./components/Button";
+export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
@@ -70,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[]);