@noya-app/noya-designsystem 0.1.36 → 0.1.38

package/src/utils/withSeparatorElements.ts

@@ -1,4 +1,26 @@
-import { Children, cloneElement, isValidElement, ReactNode } from "react";
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement,
+  ReactNode,
+} from "react";
+
+interface SeparatorOptions {
+  traverseFragments?: boolean;
+}
+
+function flattenChildren(
+  children: ReactNode,
+  traverseFragments: boolean
+): ReactNode[] {
+  return Children.toArray(children).flatMap((child) => {
+    if (traverseFragments && isValidElement(child) && child.type === Fragment) {
+      return flattenChildren(child.props.children, traverseFragments);
+    }
+    return child;
+  });
+}
 
 function createKey(key: string | number) {
   return `s-${key}`;
@@ -6,9 +28,13 @@ function createKey(key: string | number) {
 
 export default function withSeparatorElements(
   elements: ReactNode,
-  separator: ReactNode | (() => ReactNode)
+  separator: ReactNode | (() => ReactNode),
+  options?: SeparatorOptions
 ) {
-  const childrenArray = Children.toArray(elements);
+  const childrenArray = flattenChildren(
+    elements,
+    options?.traverseFragments ?? true
+  );
 
   for (let i = childrenArray.length - 1; i > 0; i--) {
     let sep =

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: [
@@ -216,8 +228,10 @@ const config: Config = {
     "underline",
     "-left-2.5",
     "-mr-2",
-    "border-gray-200"
+    "border-gray-200",
+    "gap-1.5",
+    "gap-toolbar-separator",
   ],
-};
+} satisfies Config;
 
-export default config
+export default config;

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@repo/typescript-config/library.json",
   "compilerOptions": {
-    "types": ["tailwindcss/types"],
+    "types": ["tailwindcss/types", "bun-types"],
   },
   "exclude": ["node_modules", "dist"],
 }