@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/src/index.css

@@ -21,7 +21,6 @@
   --secondary-light: rgb(0, 160, 129);
   --secondary-pastel: rgb(205, 238, 231);
   --secondary-bright: #0ab557;
-  --input-background: rgb(240, 242, 246);
   --input-background-light: rgb(243, 245, 249);
   --code-background: rgb(250, 250, 250);
   --code-background-dark: #435080;
@@ -37,6 +36,9 @@
   --popover-divider: transparent;
   --listview-raised-background: rgba(0, 0, 0, 0.03);
   --listview-editing-background: #fff;
+  --input-background: rgb(240, 242, 246);
+  --list-view-hover-background: rgb(244, 246, 250);
+  --list-view-thumbnail-background: var(--input-background);
   --slider-thumb-background: white;
   --slider-border: #9698ac;
   --mask: rgb(12, 193, 67);
@@ -58,6 +60,7 @@
   --inspector-h-separator: 8px;
   --inspector-v-separator: 10px;
   --dialog-padding: 16px;
+  --input-height: 27px;
   --icon: rgb(129, 131, 165);
   --icon-selected: rgb(220, 220, 220);
   --warning: rgb(251, 211, 0);
@@ -77,6 +80,8 @@
   --chip-error-shadow: rgb(255, 219, 219);
   --chip-default-shadow: rgb(0, 0, 0);
   --floating-button: rgb(248, 248, 250);
+  --block-border: rgb(184, 201, 218);
+  --block-highlight: rgb(255, 165, 0);
 }
 
 [data-theme="dark"] {
@@ -104,6 +109,8 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
+  --list-view-hover-background: var(--input-background-light);
+  --list-view-thumbnail-background: var(--input-background);
   --slider-thumb-background: var(--input-background-light);
   --slider-border: var(--divider);
   --mask: rgb(102, 187, 106);

package/src/index.tsx

@@ -1,4 +1,5 @@
 // Components
+export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
@@ -14,6 +15,7 @@ export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
+export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
@@ -39,7 +41,9 @@ export * from "./components/LabeledElementView";
 export * from "./components/LabeledField";
 export * from "./components/List";
 export * from "./components/ListView";
+export * from "./components/MediaThumbnail";
 export * from "./components/Message";
+export * from "./components/NoyaLogo";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/ScrollArea";
@@ -57,7 +61,8 @@ export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/TreeView";
 export * from "./components/UserPointer";
-export * from "./components/WorkspaceLayout";
+export * from "./components/workspace/types";
+export * from "./components/workspace/WorkspaceLayout";
 // Contexts
 export * from "./contexts/DesignSystemConfiguration";
 export * from "./contexts/DialogContext";

package/src/theme/index.ts

@@ -6,3 +6,5 @@ export type Theme = (typeof tailwindConfig.theme)["extend"];
 export type ThemeColor = keyof Theme["colors"];
 
 export const cssVars = convertKebabToCamelCase(tailwindConfig.theme.extend);
+
+export const INPUT_HEIGHT = 27;

package/src/utils/classNames.ts

@@ -1,5 +1,53 @@
-export function cx(
-  ...args: Array<string | number | boolean | null | undefined>
-): string {
+import tailwindConfig from "../../tailwind.config";
+
+type ClassNameItem = string | number | BigInt | boolean | null | undefined;
+type Category = "text" | "flex";
+type Options = {
+  categories?: Category[];
+};
+
+const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
+  (key) => `text-${key}`
+);
+const textKeysSet = new Set(textKeys);
+const keyMap: Record<Category, Set<string>> = {
+  text: textKeysSet,
+  flex: new Set(["flex-auto", "flex-none", "flex-[0_0_auto]", "flex-1"]),
+};
+
+export function cx(...args: ClassNameItem[]): string {
   return args.filter(Boolean).join(" ").trim();
 }
+
+const filterLastClassNameInCategory = ({
+  classNames,
+  categoryKeys,
+}: {
+  classNames: string[];
+  categoryKeys: Set<string>;
+}) => {
+  const lastClassInGroup = classNames.findLast((key) => categoryKeys.has(key));
+  return classNames.flatMap((className) => {
+    if (categoryKeys.has(className)) {
+      return lastClassInGroup === className ? [className] : [];
+    }
+    return [className];
+  });
+};
+
+export function mergeConflictingClassNames(
+  classNames: ClassNameItem | ClassNameItem[],
+  options?: Options
+): string {
+  const classes = Array.isArray(classNames)
+    ? cx(...classNames)
+    : cx(classNames);
+  let classNamesList = classes.split(/\s+/);
+  options?.categories?.forEach((category) => {
+    classNamesList = filterLastClassNameInCategory({
+      classNames: classNamesList,
+      categoryKeys: keyMap[category],
+    });
+  });
+  return classNamesList.join(" ");
+}

package/src/utils/inputs.ts

@@ -0,0 +1,21 @@
+import { cx } from "./classNames";
+
+export type InputSize = "small" | "medium" | "large";
+
+const insetEndBaseStyles = "absolute inset-y-0 flex items-center z-label";
+
+export const getInsetEndStyles = (size: InputSize = "medium") => {
+  return cx(
+    insetEndBaseStyles,
+    size === "large"
+      ? "right-2"
+      : size === "medium"
+        ? "right-1.5"
+        : size === "small"
+          ? "right-0.5"
+          : "",
+    size === "small" ? "min-h-[19px]" : "min-h-input-height"
+  );
+};
+
+export const startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";

package/tailwind.config.ts

@@ -1,3 +1,4 @@
+import containerQueries from "@tailwindcss/container-queries";
 import type { Config } from "tailwindcss";
 
 const config = {
@@ -29,6 +30,9 @@ const config = {
         "secondary-bright": "var(--secondary-bright)",
         "input-background": "var(--input-background)",
         "input-background-light": "var(--input-background-light)",
+        "list-view-hover-background": "var(--list-view-hover-background)",
+        "list-view-thumbnail-background":
+          "var(--list-view-thumbnail-background)",
         "code-background": "var(--code-background)",
         "code-background-dark": "var(--code-background-dark)",
         "selected-background": "var(--selected-background)",
@@ -74,6 +78,8 @@ const config = {
         "chip-error-shadow": "var(--chip-error-shadow)",
         "chip-default-shadow": "var(--chip-default-shadow)",
         "floating-button": "var(--floating-button)",
+        "block-border": "var(--block-border)",
+        "block-highlight": "var(--block-highlight)",
       },
       fontFamily: {
         sans: [
@@ -189,6 +195,7 @@ const config = {
         "inspector-h-separator": "var(--inspector-h-separator)",
         "inspector-v-separator": "var(--inspector-v-separator)",
         "dialog-padding": "var(--dialog-padding)",
+        "input-height": "var(--input-height)",
       },
       keyframes: {
         spin: {
@@ -234,6 +241,7 @@ const config = {
     "gap-toolbar-separator",
     "-mr-1",
   ],
+  plugins: [containerQueries],
 } satisfies Config;
 
 export default config;