@surfnet/curve-angular 0.2.0

package/src/lib/ui/table/src/lib/hlm-table.ts

@@ -0,0 +1,129 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'div[hlmTableContainer]',
+  host: { 'data-slot': 'table-container' },
+})
+export class HlmTableContainer {
+  constructor() {
+    classes(() => 'relative w-full overflow-x-auto');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ */
+@Directive({
+  selector: 'table[hlmTable]',
+  host: { 'data-slot': 'table' },
+})
+export class HlmTable {
+  constructor() {
+    classes(() => 'w-full caption-bottom text-sm');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'thead[hlmTHead],thead[hlmTableHeader]',
+  host: { 'data-slot': 'table-header' },
+})
+export class HlmTHead {
+  constructor() {
+    classes(() => '[&_tr]:border-b');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'tbody[hlmTBody],tbody[hlmTableBody]',
+  host: { 'data-slot': 'table-body' },
+})
+export class HlmTBody {
+  constructor() {
+    classes(() => '[&_tr:last-child]:border-0');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'tfoot[hlmTFoot],tfoot[hlmTableFooter]',
+  host: { 'data-slot': 'table-footer' },
+})
+export class HlmTFoot {
+  constructor() {
+    classes(() => 'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'tr[hlmTr],tr[hlmTableRow]',
+  host: { 'data-slot': 'table-row' },
+})
+export class HlmTr {
+  constructor() {
+    classes(
+      () =>
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50',
+    );
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'th[hlmTh],th[hlmTableHead]',
+  host: { 'data-slot': 'table-head' },
+})
+export class HlmTh {
+  constructor() {
+    classes(
+      () =>
+        'text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+    );
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'td[hlmTd],td[hlmTableCell]',
+  host: { 'data-slot': 'table-cell' },
+})
+export class HlmTd {
+  constructor() {
+    classes(() => 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'caption[hlmCaption],caption[hlmTableCaption]',
+  host: { 'data-slot': 'table-caption' },
+})
+export class HlmCaption {
+  constructor() {
+    classes(() => 'text-muted-foreground mt-4 text-sm');
+  }
+}

package/src/lib/ui/textarea/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmTextarea } from './lib/hlm-textarea';
+
+export * from './lib/hlm-textarea';
+
+export const HlmTextareaImports = [HlmTextarea] as const;

package/src/lib/ui/textarea/src/lib/hlm-textarea.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+import { HlmTextarea, HlmTextareaImports } from '..';
+import { textareaContract } from '@surfnet/curve-contracts';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+
+const meta: Meta<HlmTextarea> = {
+  title: 'Components/Textarea',
+  component: HlmTextarea,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmTextareaImports, ReactiveFormsModule],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: textareaContract.docs.description,
+      },
+    },
+  },
+  argTypes: {
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    placeholder: 'Type something…',
+    disabled: false,
+  },
+} as Meta<HlmTextarea>;
+
+export default meta;
+type Story = StoryObj<HlmTextarea>;
+
+/** Default textarea — auto-sizes to content. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+			<textarea hlmTextarea ${argsToTemplate(args)}></textarea>
+		`,
+  }),
+};
+
+/** Disabled state. */
+export const Disabled: Story = {
+  render: (args) => ({
+    props: { ...args, disabled: true, placeholder: 'Cannot type here' },
+    template: `
+			<textarea hlmTextarea ${argsToTemplate(args)}></textarea>
+		`,
+  }),
+};
+
+/** Invalid state (e.g. after failed form validation). Touch the field to test the minimum of 8 characters. */
+export const Invalid: Story = {
+  render: () => ({
+    props: {
+      placeholder: 'This field has an error',
+      form: new FormGroup({
+        test: new FormControl('', { validators: [Validators.required, Validators.minLength(8)] }),
+      }),
+    },
+    template: `
+			<form [formGroup]="form" class="w-full max-w-md">
+				<div hlmField>
+					<textarea hlmTextarea formControlName="test" [placeholder]="placeholder"></textarea>
+				</div>
+			</form>
+		`,
+  }),
+};

package/src/lib/ui/textarea/src/lib/hlm-textarea.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnTextarea } from '@spartan-ng/brain/textarea';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmTextarea]',
+  hostDirectives: [
+    { directive: BrnTextarea, inputs: ['id', 'forceInvalid'] },
+    BrnFieldControlDescribedBy,
+  ],
+  host: { 'data-slot': 'textarea' },
+})
+export class HlmTextarea {
+  constructor() {
+    classes(
+      () =>
+        'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+    );
+  }
+}

package/src/lib/ui/tooltip/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmTooltip } from './lib/hlm-tooltip';
+
+export * from './lib/hlm-tooltip';
+
+export const HlmTooltipImports = [HlmTooltip] as const;

package/src/lib/ui/tooltip/src/lib/hlm-tooltip.ts

@@ -0,0 +1,44 @@
+import { Directive } from '@angular/core';
+import {
+  BrnTooltip,
+  BrnTooltipPosition,
+  provideBrnTooltipDefaultOptions,
+} from '@spartan-ng/brain/tooltip';
+import { hlm } from '../../../utils/src';
+import { cva } from 'class-variance-authority';
+
+export const DEFAULT_TOOLTIP_SVG_CLASS =
+  'bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]';
+
+export const DEFAULT_TOOLTIP_CONTENT_CLASSES = hlm(
+  'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance',
+);
+
+export const tooltipPositionVariants = cva('absolute', {
+  variants: {
+    position: {
+      top: 'bottom-0 left-[calc(50%-5px)] translate-y-full',
+      bottom: '-top-2.5 left-[calc(50%-5px)] translate-y-0 rotate-180',
+      left: '-end-2.5 top-[calc(50%-5px)] translate-y-0 rotate-270 rtl:-rotate-270',
+      right: '-start-2.5 top-[calc(50%-5px)] translate-y-0 rotate-90 rtl:-rotate-90',
+    },
+  },
+});
+
+@Directive({
+  selector: '[hlmTooltip]',
+  providers: [
+    provideBrnTooltipDefaultOptions({
+      svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+      tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+      arrowClasses: (position: BrnTooltipPosition) => hlm(tooltipPositionVariants({ position })),
+    }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnTooltip,
+      inputs: ['brnTooltip: hlmTooltip', 'position', 'hideDelay', 'showDelay', 'tooltipDisabled'],
+    },
+  ],
+})
+export class HlmTooltip {}

package/src/lib/ui/utils/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/hlm';

package/src/lib/ui/utils/src/lib/hlm.ts

@@ -0,0 +1,313 @@
+import { isPlatformBrowser } from '@angular/common';
+import {
+  DestroyRef,
+  effect,
+  ElementRef,
+  HostAttributeToken,
+  inject,
+  Injector,
+  PLATFORM_ID,
+  runInInjectionContext,
+} from '@angular/core';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function hlm(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Global map to track class managers per element
+const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
+// Global mutation observer for all elements
+let globalObserver: MutationObserver | null = null;
+const observedElements = new Set<HTMLElement>();
+
+interface ElementClassManager {
+  element: HTMLElement;
+  sources: Map<number, { classes: Set<string>; order: number }>;
+  baseClasses: Set<string>;
+  isUpdating: boolean;
+  nextOrder: number;
+  hasInitialized: boolean;
+  restoreRafId: number | null;
+  /** Transitions are suppressed until the first effect writes correct classes */
+  transitionsSuppressed: boolean;
+  /** Original inline transition value to restore after suppression (empty string = none was set) */
+  previousTransition: string;
+  /** Original inline transition priority to preserve !important when restoring */
+  previousTransitionPriority: string;
+}
+
+let sourceCounter = 0;
+
+/**
+ * This function dynamically adds and removes classes for a given element without requiring
+ * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
+ *
+ * 1. This will merge the existing classes on the element with the new classes.
+ * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
+ * 3. Multiple calls to this function on the same element will be merged efficiently.
+ */
+export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
+  runInInjectionContext(options.injector ?? inject(Injector), () => {
+    const elementRef = options.elementRef ?? inject(ElementRef);
+    const platformId = inject(PLATFORM_ID);
+    const destroyRef = inject(DestroyRef);
+    const baseClasses = inject(new HostAttributeToken('class'), { optional: true });
+
+    const element = elementRef.nativeElement;
+
+    // Create unique identifier for this source
+    const sourceId = sourceCounter++;
+
+    // Get or create the class manager for this element
+    let manager = elementClassManagers.get(element);
+
+    if (!manager) {
+      // Initialize base classes from variation (host attribute 'class')
+      const initialBaseClasses = new Set<string>();
+
+      if (baseClasses) {
+        toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
+      }
+
+      manager = {
+        element,
+        sources: new Map(),
+        baseClasses: initialBaseClasses,
+        isUpdating: false,
+        nextOrder: 0,
+        hasInitialized: false,
+        restoreRafId: null,
+        transitionsSuppressed: false,
+        previousTransition: '',
+        previousTransitionPriority: '',
+      };
+      elementClassManagers.set(element, manager);
+
+      // Setup global observer if needed and register this element
+      setupGlobalObserver(platformId);
+      observedElements.add(element);
+
+      // Suppress transitions until the first effect writes correct classes and
+      // the browser has painted them. This prevents CSS transition animations
+      // during hydration when classes change from SSR state to client state.
+      if (isPlatformBrowser(platformId)) {
+        manager.previousTransition = element.style.getPropertyValue('transition');
+        manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
+        element.style.setProperty('transition', 'none', 'important');
+        manager.transitionsSuppressed = true;
+      }
+    }
+
+    // Assign order once at registration time
+    const sourceOrder = manager.nextOrder++;
+
+    function updateClasses(): void {
+      // Get the new classes from the computed function
+      const newClasses = toClassList(computed());
+
+      // Update this source's classes, keeping the original order
+      manager!.sources.set(sourceId, {
+        classes: new Set(newClasses),
+        order: sourceOrder,
+      });
+
+      // Update the element
+      updateElement(manager!);
+
+      // Re-enable transitions after the first effect writes correct classes.
+      // Deferred to next animation frame so the browser paints the class change
+      // with transitions disabled first, then re-enables them.
+      if (manager!.transitionsSuppressed) {
+        manager!.transitionsSuppressed = false;
+        manager!.restoreRafId = requestAnimationFrame(() => {
+          manager!.restoreRafId = null;
+          restoreTransitionSuppression(manager!);
+        });
+      }
+    }
+
+    // Register cleanup with DestroyRef
+    destroyRef.onDestroy(() => {
+      if (manager!.restoreRafId !== null) {
+        cancelAnimationFrame(manager!.restoreRafId);
+        manager!.restoreRafId = null;
+      }
+
+      if (manager!.transitionsSuppressed) {
+        manager!.transitionsSuppressed = false;
+        restoreTransitionSuppression(manager!);
+      }
+
+      // Remove this source from the manager
+      manager!.sources.delete(sourceId);
+
+      // If no more sources, clean up the manager
+      if (manager!.sources.size === 0) {
+        cleanupManager(element);
+      } else {
+        // Update element without this source's classes
+        updateElement(manager!);
+      }
+    });
+
+    /**
+     * We need this effect to track changes to the computed classes. Ideally, we would use
+     * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
+     * effect which works in both browser and SSR.
+     */
+    effect(updateClasses);
+  });
+}
+
+function restoreTransitionSuppression(manager: ElementClassManager): void {
+  const prev = manager.previousTransition;
+  if (prev) {
+    manager.element.style.setProperty(
+      'transition',
+      prev,
+      manager.previousTransitionPriority || undefined,
+    );
+  } else {
+    manager.element.style.removeProperty('transition');
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+function setupGlobalObserver(platformId: Object): void {
+  if (isPlatformBrowser(platformId) && !globalObserver) {
+    // Create single global observer that watches the entire document
+    globalObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const element = mutation.target as HTMLElement;
+          const manager = elementClassManagers.get(element);
+
+          // Only process elements we're managing
+          if (manager && observedElements.has(element)) {
+            if (manager.isUpdating) continue; // Ignore changes we're making
+
+            // Update base classes to include any externally added classes
+            const currentClasses = toClassList(element.className);
+            const allSourceClasses = new Set<string>();
+
+            // Collect all classes from all sources
+            for (const source of manager.sources.values()) {
+              for (const className of source.classes) {
+                allSourceClasses.add(className);
+              }
+            }
+
+            // Any classes not from sources become new base classes
+            manager.baseClasses.clear();
+
+            for (const className of currentClasses) {
+              if (!allSourceClasses.has(className)) {
+                manager.baseClasses.add(className);
+              }
+            }
+
+            updateElement(manager);
+          }
+        }
+      }
+    });
+
+    // Start observing the entire document for class attribute changes
+    globalObserver.observe(document, {
+      attributes: true,
+      attributeFilter: ['class'],
+      subtree: true, // Watch all descendants
+    });
+  }
+}
+
+function updateElement(manager: ElementClassManager): void {
+  if (manager.isUpdating) return; // Prevent recursive updates
+
+  manager.isUpdating = true;
+
+  // Handle initialization: capture base classes after first source registration
+  if (!manager.hasInitialized && manager.sources.size > 0) {
+    // Get current classes on element (may include SSR classes)
+    const currentClasses = toClassList(manager.element.className);
+
+    // Get all classes that will be applied by sources
+    const allSourceClasses = new Set<string>();
+    for (const source of manager.sources.values()) {
+      source.classes.forEach((className) => allSourceClasses.add(className));
+    }
+
+    // Only consider classes as "base" if they're not produced by any source
+    // This prevents SSR-rendered classes from being preserved as base classes
+    currentClasses.forEach((className) => {
+      if (!allSourceClasses.has(className)) {
+        manager.baseClasses.add(className);
+      }
+    });
+
+    manager.hasInitialized = true;
+  }
+
+  // Get classes from all sources, sorted by registration order (later takes precedence)
+  const sortedSources = Array.from(manager.sources.entries()).sort(
+    ([, a], [, b]) => a.order - b.order,
+  );
+
+  const allSourceClasses: string[] = [];
+  for (const [, source] of sortedSources) {
+    allSourceClasses.push(...source.classes);
+  }
+
+  // Combine base classes with all source classes, ensuring base classes take precedence
+  const classesToApply =
+    allSourceClasses.length > 0 || manager.baseClasses.size > 0
+      ? hlm([...allSourceClasses, ...manager.baseClasses])
+      : '';
+
+  // Apply the classes to the element
+  if (manager.element.className !== classesToApply) {
+    manager.element.className = classesToApply;
+  }
+
+  manager.isUpdating = false;
+}
+
+function cleanupManager(element: HTMLElement): void {
+  // Remove from global tracking
+  observedElements.delete(element);
+  elementClassManagers.delete(element);
+
+  // If no more elements being tracked, cleanup global observer
+  if (observedElements.size === 0 && globalObserver) {
+    globalObserver.disconnect();
+    globalObserver = null;
+  }
+}
+
+interface ClassesOptions {
+  elementRef?: ElementRef<HTMLElement>;
+  injector?: Injector;
+}
+
+// Cache for parsed class lists to avoid repeated string operations
+const classListCache = new Map<string, string[]>();
+
+function toClassList(className: string | ClassValue[]): string[] {
+  // For simple string inputs, use cache to avoid repeated parsing
+  if (typeof className === 'string' && classListCache.has(className)) {
+    return classListCache.get(className)!;
+  }
+
+  const result = clsx(className)
+    .split(' ')
+    .filter((c) => c.length > 0);
+
+  // Cache string results, but limit cache size to prevent memory growth
+  if (typeof className === 'string' && classListCache.size < 1000) {
+    classListCache.set(className, result);
+  }
+
+  return result;
+}

package/src/public-api.ts

@@ -0,0 +1,24 @@
+/*
+ * Public API surface of @surfnet/curve-angular.
+ * Re-export each helm component (and the shared utils) added via the Spartan CLI.
+ * NOTE: there are a few components that we don't export: [icon, sheet, skeleton, tooltip],
+ * because these are out of scope for now. They are included in the code because the
+ * components that we do export depend on them (and they can't be consumed from a package).
+ */
+export * from './lib/ui/avatar/src';
+export * from './lib/ui/breadcrumb/src';
+export * from './lib/ui/button/src';
+export * from './lib/ui/card/src';
+export * from './lib/ui/checkbox/src';
+export * from './lib/ui/data-table/src';
+export * from './lib/ui/dropdown-menu/src';
+export * from './lib/ui/field/src';
+export * from './lib/ui/input/src';
+export * from './lib/ui/input-group/src';
+export * from './lib/ui/label/src';
+export * from './lib/ui/select/src';
+export * from './lib/ui/separator/src';
+export * from './lib/ui/sidebar/src';
+export * from './lib/ui/table/src';
+export * from './lib/ui/textarea/src';
+export * from './lib/ui/utils/src';

package/src/styles.css

@@ -0,0 +1,43 @@
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+
+@import '@spartan-ng/brain/hlm-tailwind-preset.css';
+@import '@surfnet/curve-tokens/tokens.css';
+@import '@fontsource-variable/geist';
+
+/* Scan the library's component sources so a standalone Tailwind build (build:css)
+   emits every utility the components reference. Path is relative to this file. */
+@source '.';
+/* You can add global styles to this file, and also import other style files */
+
+/* The Spartan preset maps the standard token set to --color-* utilities but not
+   the --link token, so expose it here (matches the React package's mapping). */
+@theme inline {
+  --color-link: var(--link);
+}
+
+:root {
+  color-scheme: light;
+
+  --radius: 0.625rem;
+
+  --font-sans: 'Geist Variable', sans-serif;
+}
+
+:root.dark {
+  color-scheme: dark;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}