System: Add cn util function.

.changeset/thirty-ducks-wait.md

@@ -0,0 +1,6 @@
+---
+'@nordcom/nordstar-header': patch
+'@nordcom/nordstar-system': patch
+---
+
+Make overflow shadow customizable.

packages/components/header/src/header.module.scss

@@ -58,15 +58,17 @@ header.container {
             touch-action: auto;
             scroll-behavior: smooth;
 
-            animation: scroll-shadow-inset linear;
-            animation-timeline: scroll(self inline);
-
             @media (min-width: 950px) {
                 overflow-x: unset;
                 justify-content: flex-end;
                 gap: var(--layout-block-padding-double);
             }
 
+            .overflow-shadow {
+                animation: scroll-shadow-inset linear;
+                animation-timeline: scroll(self inline);
+            }
+
             .link {
                 cursor: pointer;
 
@@ -89,9 +91,9 @@ header.container {
 
 @keyframes scroll-shadow-inset {
     from {
-        box-shadow: inset -10px 0px 10px -10px rgb(155 155 155 / 0.75);
+        box-shadow: inset -10px 0px 10px -10px var(--header-scroll-shadow, rgb(155 155 155 / 0.75));
     }
     to {
-        box-shadow: inset 10px 0px 10px -10px rgb(155 155 155 / 0.75);
+        box-shadow: inset 10px 0px 10px -10px var(--header-scroll-shadow, rgb(155 155 155 / 0.75));
     }
 }

packages/components/header/src/header.tsx

@@ -1,5 +1,5 @@
 import { Card } from '@nordcom/nordstar-card';
-import { forwardRef } from '@nordcom/nordstar-system';
+import { cn, forwardRef } from '@nordcom/nordstar-system';
 import { View } from '@nordcom/nordstar-view';
 import type { ComponentProps } from 'react';
 import styles from './header.module.scss';
@@ -12,10 +12,8 @@ export type HeaderProps = {
 } & ComponentProps<'header'>;
 
 const Header = ({ className, children, ...props }: HeaderProps) => {
-    const classes = `${styles.container}${className ? ` ${className}` : ''}`;
-
     return (
-        <Card as="header" borderless={true} {...props} className={classes}>
+        <Card as="header" borderless={true} {...props} className={cn(styles.container, className)}>
             <View as="div" className={styles.content} withoutWrapper={true}>
                 {children}
             </View>
@@ -32,23 +30,27 @@ export type HeaderLogoProps = {} & ComponentProps<'nav'>;
  * @returns {React.ReactNode} The `<Header.Logo/>` component.
  */
 const Logo = ({ className, ...props }: HeaderLogoProps) => {
-    const classes = `${styles.logo}${className ? ` ${className}` : ''}`;
-
-    return <section {...props} draggable={false} className={classes} />;
+    return <section {...props} draggable={false} className={cn(styles.logo, className)} />;
 };
 Logo.displayName = 'Nordstar.Layout.Header.Logo';
 
-export type HeaderMenuProps = {} & ComponentProps<'nav'>;
+export type HeaderMenuProps = {
+    noOverflowShadow?: boolean;
+} & ComponentProps<'nav'>;
 
 /**
  * `<Header.Menu/>`, a component to render a header's content.
  * @param {HeaderMenuProps} props - `<Header.Menu/>` props.
  * @returns {React.ReactNode} The `<Header.Menu/>` component.
  */
-const Menu = ({ className, ...props }: HeaderMenuProps) => {
-    const classes = `${styles.nav}${className ? ` ${className}` : ''}`;
-
-    return <nav {...props} draggable={false} className={classes} />;
+const Menu = ({ className, noOverflowShadow = false, ...props }: HeaderMenuProps) => {
+    return (
+        <nav
+            {...props}
+            draggable={false}
+            className={cn(styles.nav, !noOverflowShadow && styles.overflowShadow, className)}
+        />
+    );
 };
 Menu.displayName = 'Nordstar.Layout.Header.Menu';
 
@@ -63,9 +65,8 @@ export type HeaderMenuLinkProps = {
  */
 const Link = forwardRef<'a', HeaderMenuLinkProps>(({ as, className, ...props }, ref) => {
     const Tag = as || 'a';
-    const classes = `${styles.link}${className ? ` ${className}` : ''}`;
 
-    return <Tag ref={ref} draggable={false} {...props} className={classes} />;
+    return <Tag ref={ref} draggable={false} {...props} className={cn(styles.link, className)} />;
 });
 Link.displayName = 'Nordstar.Layout.Header.Menu.Link';
 

packages/components/input/src/input.module.scss

@@ -86,6 +86,12 @@
         --background: var(--color-foreground);
         --foreground: var(--color-background);
 
+        border-width: var(--border-width-small);
+        border-color: var(--background);
+
+        color: var(--foreground);
+        background: var(--background);
+
         &[data-color='primary'] {
             --background: var(--color-accent-primary);
             --foreground: var(--color-accent-primary-foreground);
@@ -94,12 +100,6 @@
             --background: var(--color-accent-secondary);
             --foreground: var(--color-accent-secondary-foreground);
         }
-
-        border-width: var(--border-width-small);
-        border-color: var(--background);
-
-        color: var(--foreground);
-        background: var(--background);
     }
 
     .label {

packages/core/system/package.json

@@ -81,6 +81,7 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
+        "clsx": "2.1.1",
         "the-new-css-reset": "1.11.2"
     },
     "peerDependencies": {

packages/core/system/src/index.ts

@@ -1,5 +1,5 @@
 import { NordstarProvider } from './nordstar-provider';
-import { forwardRef } from './utils';
+import { cn, forwardRef } from './utils';
 
 export type { NordstarColor } from './colors';
 export type { NordstarProviderProps, NordstarTheme } from './nordstar-provider';
@@ -13,4 +13,4 @@ export type {
     RightJoinProps
 } from './utils';
 
-export { NordstarProvider, forwardRef };
+export { cn, forwardRef, NordstarProvider };

packages/core/system/src/utils.ts

@@ -1,3 +1,4 @@
+import { type ClassValue, clsx } from 'clsx';
 import type {
     ComponentPropsWithoutRef,
     ElementType,
@@ -66,3 +67,7 @@ export function forwardRef<Component extends As, Props extends object, OmitKeys
 ) {
     return baseForwardRef(component) as InternalForwardRefRenderFunction<Component, Props, OmitKeys>;
 }
+
+export function cn(...inputs: ClassValue[]) {
+    return clsx(inputs);
+}