@surfnet/curve-angular 0.2.0

package/src/lib/ui/breadcrumb/src/lib/hlm-breadcrumb-ellipsis.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorDotsThree } from '@ng-icons/phosphor-icons/regular';
+import { HlmIcon } from '../../../icon/src';
+import { hlm } from '../../../utils/src';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-breadcrumb-ellipsis',
+  imports: [NgIcon, HlmIcon],
+  providers: [provideIcons({ phosphorDotsThree })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      [class]="_computedClass()"
+    >
+      <ng-icon hlm size="sm" name="phosphorDotsThree" />
+      <span class="sr-only">{{ srOnlyText() }}</span>
+    </span>
+  `,
+})
+export class HlmBreadcrumbEllipsis {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  /** Screen reader only text for the ellipsis */
+  public readonly srOnlyText = input<string>('More');
+
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'size-5 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex items-center justify-center',
+      this.userClass(),
+    ),
+  );
+}

package/src/lib/ui/breadcrumb/src/lib/hlm-breadcrumb-item.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmBreadcrumbItem]',
+  host: {
+    'data-slot': 'breadcrumb-item',
+  },
+})
+export class HlmBreadcrumbItem {
+  constructor() {
+    classes(() => 'gap-1.5 inline-flex items-center');
+  }
+}

package/src/lib/ui/breadcrumb/src/lib/hlm-breadcrumb-link.ts

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmBreadcrumbLink]',
+  hostDirectives: [
+    {
+      directive: RouterLink,
+      inputs: [
+        'target',
+        'queryParams',
+        'fragment',
+        'queryParamsHandling',
+        'state',
+        'info',
+        'relativeTo',
+        'preserveFragment',
+        'skipLocationChange',
+        'replaceUrl',
+        'routerLink: link',
+      ],
+    },
+  ],
+  host: {
+    'data-slot': 'breadcrumb-link',
+  },
+})
+export class HlmBreadcrumbLink {
+  /** The link to navigate to the page. */
+  public readonly link = input<RouterLink['routerLink']>();
+
+  constructor() {
+    classes(() => 'hover:text-foreground transition-colors');
+  }
+}

package/src/lib/ui/breadcrumb/src/lib/hlm-breadcrumb-list.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmBreadcrumbList]',
+  host: {
+    'data-slot': 'breadcrumb-list',
+  },
+})
+export class HlmBreadcrumbList {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word',
+    );
+  }
+}

package/src/lib/ui/breadcrumb/src/lib/hlm-breadcrumb-page.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmBreadcrumbPage]',
+  host: {
+    'data-slot': 'breadcrumb-page',
+    role: 'link',
+    'aria-disabled': 'true',
+    'aria-current': 'page',
+  },
+})
+export class HlmBreadcrumbPage {
+  constructor() {
+    classes(() => 'text-foreground font-normal');
+  }
+}

package/src/lib/ui/breadcrumb/src/lib/hlm-breadcrumb-separator.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCaretRight } from '@ng-icons/phosphor-icons/regular';
+import { classes } from '../../../utils/src';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[hlmBreadcrumbSeparator]',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCaretRight })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'breadcrumb-separator',
+    role: 'presentation',
+    'aria-hidden': 'true',
+  },
+  template: `
+    <ng-content>
+      <ng-icon name="phosphorCaretRight" />
+    </ng-content>
+  `,
+})
+export class HlmBreadcrumbSeparator {
+  constructor() {
+    classes(() => '[&>ng-icon]:text-[calc(var(--spacing)*3.5)] [&>ng-icon]:flex');
+  }
+}

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

@@ -0,0 +1,81 @@
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { breadcrumbContract } from '@surfnet/curve-contracts';
+import { HlmBreadcrumb, HlmBreadcrumbImports } from '..';
+import { provideRouter } from '@angular/router';
+import { provideLocationMocks } from '@angular/common/testing';
+
+const meta: Meta<HlmBreadcrumb> = {
+  title: 'Components/Breadcrumb',
+  component: HlmBreadcrumb,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmBreadcrumbImports],
+    }),
+    applicationConfig({
+      providers: [
+        provideRouter([
+          { path: '', component: HlmBreadcrumb },
+          { path: '**', redirectTo: '' },
+        ]),
+        provideLocationMocks(),
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: breadcrumbContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmBreadcrumb>;
+
+/** A typical trail ending on the current page. */
+export const Default: Story = {
+  render: () => ({
+    template: `
+			<nav hlmBreadcrumb>
+				<ol hlmBreadcrumbList>
+					<li hlmBreadcrumbItem>
+						<a hlmBreadcrumbLink link="/home">Home</a>
+					</li>
+					<li hlmBreadcrumbSeparator></li>
+					<li hlmBreadcrumbItem>
+						<a hlmBreadcrumbLink link="/components">Apps</a>
+					</li>
+					<li hlmBreadcrumbSeparator></li>
+					<li hlmBreadcrumbItem>
+						<span hlmBreadcrumbPage>App catalog</span>
+					</li>
+				</ol>
+			</nav>
+		`,
+  }),
+};
+
+/** A long trail collapsed with an ellipsis. */
+export const WithEllipsis: Story = {
+  render: () => ({
+    template: `
+			<nav hlmBreadcrumb>
+				<ol hlmBreadcrumbList>
+					<li hlmBreadcrumbItem>
+						<a hlmBreadcrumbLink link="/home">Home</a>
+					</li>
+					<li hlmBreadcrumbSeparator></li>
+					<li hlmBreadcrumbItem>
+						<hlm-breadcrumb-ellipsis />
+					</li>
+					<li hlmBreadcrumbSeparator></li>
+					<li hlmBreadcrumbItem>
+						<span hlmBreadcrumbPage>App catalog</span>
+					</li>
+				</ol>
+			</nav>
+    `,
+  }),
+};

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

@@ -0,0 +1,13 @@
+import { Directive, input } from '@angular/core';
+
+@Directive({
+  selector: '[hlmBreadcrumb]',
+  host: {
+    'data-slot': 'breadcrumb',
+    role: 'navigation',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+})
+export class HlmBreadcrumb {
+  public readonly ariaLabel = input<string>('breadcrumb', { alias: 'aria-label' });
+}

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

@@ -0,0 +1,6 @@
+import { HlmButton } from './lib/hlm-button';
+
+export * from './lib/hlm-button';
+export * from './lib/hlm-button.token';
+
+export const HlmButtonImports = [HlmButton] as const;

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

@@ -0,0 +1,170 @@
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorArrowRight, phosphorPlus } from '@ng-icons/phosphor-icons/regular';
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { buttonContract } from '@surfnet/curve-contracts';
+
+import { HlmButton, HlmButtonImports } from '..';
+import { Component, Input } from '@angular/core';
+
+// `disabled` is contributed by the BrnButton host directive rather than HlmButton
+// itself, so widen the story args to expose it as a control.
+type ButtonArgs = HlmButton & { disabled: boolean };
+
+const meta: Meta<ButtonArgs> = {
+  title: 'Components/Button',
+  component: HlmButton,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmButton, NgIcon],
+      providers: [provideIcons({ phosphorPlus, phosphorArrowRight })],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: buttonContract.docs.description,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [...buttonContract.props.variants],
+      description: 'Visual style of the button.',
+      table: {
+        type: {
+          summary: buttonContract.props.variants.join(' | '),
+        },
+        defaultValue: { summary: buttonContract.defaults.variants },
+      },
+    },
+    size: {
+      control: 'select',
+      options: [...buttonContract.props.sizes],
+      description: 'Size of the button.',
+      table: {
+        type: {
+          summary: buttonContract.props.sizes.join(' | '),
+        },
+        defaultValue: { summary: buttonContract.defaults.sizes },
+      },
+    },
+  },
+  args: {
+    variant: buttonContract.defaults.variants,
+    size: buttonContract.defaults.sizes,
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ButtonArgs>;
+
+/** The default button — rendered with the default args; tweak them via the controls. */
+export const Default: Story = {
+  args: { disabled: false },
+  render: (args) => ({
+    props: args,
+    template: `<button hlmBtn ${argsToTemplate(args)}>Button</button>`,
+  }),
+};
+
+@Component({
+  selector: 'button-variants',
+  imports: [HlmButtonImports],
+  template: `
+    <div class="flex flex-wrap items-center gap-3">
+      @for (variant of buttonContract.props.variants; track variant) {
+        <button hlmBtn [variant]="variant" [title]="buttonContract.docs.variants[variant]">
+          {{ variant.charAt(0).toUpperCase() + variant.slice(1) }}
+        </button>
+      }
+    </div>
+  `,
+})
+class ButtonVariants {
+  @Input() buttonContract!: typeof buttonContract;
+}
+
+/** Every visual variant side by side. */
+export const Variants: Story = {
+  render: () => ({
+    moduleMetadata: {
+      imports: [ButtonVariants],
+    },
+    props: { buttonContract: buttonContract },
+    template: '<button-variants [buttonContract]="buttonContract"></button-variants>',
+  }),
+};
+
+/** Text sizes from extra-small to large. */
+export const Sizes: Story = {
+  render: () => ({
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <button hlmBtn size="xs">Extra small</button>
+        <button hlmBtn size="sm">Small</button>
+        <button hlmBtn size="default">Default</button>
+        <button hlmBtn size="lg">Large</button>
+      </div>`,
+  }),
+};
+
+/**
+ * Square icon-only sizes. Drop a Phosphor icon (`@ng-icons/phosphor-icons/regular`) inside the button —
+ * the button's CSS auto-sizes the SVG per size, so no `size-*` class is needed.
+ */
+export const IconSizes: Story = {
+  render: () => ({
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <button hlmBtn size="icon-xs" aria-label="Add"><ng-icon name="phosphorPlus" /></button>
+        <button hlmBtn size="icon-sm" aria-label="Add"><ng-icon name="phosphorPlus" /></button>
+        <button hlmBtn size="icon" aria-label="Add"><ng-icon name="phosphorPlus" /></button>
+        <button hlmBtn size="icon-lg" aria-label="Add"><ng-icon name="phosphorPlus" /></button>
+      </div>`,
+  }),
+};
+
+/**
+ * Icons alongside text. Tag the icon with `data-icon="inline-start"` or
+ * `data-icon="inline-end"` so the button tightens the padding on that side.
+ */
+export const WithIcon: Story = {
+  render: () => ({
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <button hlmBtn>
+          <ng-icon name="phosphorPlus" data-icon="inline-start" />
+          Add item
+        </button>
+        <button hlmBtn variant="secondary">
+          Continue
+          <ng-icon name="phosphorArrowRight" data-icon="inline-end" />
+        </button>
+      </div>`,
+  }),
+};
+
+/** Disabled state across the main variants. */
+export const Disabled: Story = {
+  render: () => ({
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <button hlmBtn disabled>Default</button>
+        <button hlmBtn variant="outline" disabled>Outline</button>
+        <button hlmBtn variant="destructive" disabled>Destructive</button>
+      </div>`,
+  }),
+};
+
+/**
+ * Base UI's polymorphic `render` prop swaps the underlying element while keeping
+ * the button styling — here the button renders as an anchor.
+ */
+export const AsLink: Story = {
+  render: () => ({
+    template: `<a hlmBtn variant="link" href="https://www.surf.nl">Visit SURF</a>`,
+  }),
+};

package/src/lib/ui/button/src/lib/hlm-button.token.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ButtonVariants } from './hlm-button';
+
+export interface BrnButtonConfig {
+  variant: ButtonVariants['variant'];
+  size: ButtonVariants['size'];
+}
+
+const defaultConfig: BrnButtonConfig = {
+  variant: 'default',
+  size: 'default',
+};
+
+const BrnButtonConfigToken = new InjectionToken<BrnButtonConfig>('BrnButtonConfig');
+
+export function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider {
+  return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectBrnButtonConfig(): BrnButtonConfig {
+  return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,76 @@
+import { Directive, input, signal } from '@angular/core';
+import { BrnButton } from '@spartan-ng/brain/button';
+import { classes } from '../../../utils/src';
+import type { ButtonSizeName, ButtonVariantName } from '@surfnet/curve-contracts';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectBrnButtonConfig } from './hlm-button.token';
+
+const variantClasses = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+  outline:
+    'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+  secondary:
+    'bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
+  ghost:
+    'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+  destructive:
+    'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+  link: 'text-link underline-offset-4 hover:underline',
+} satisfies Record<ButtonVariantName, string>;
+
+const sizeClasses = {
+  default:
+    'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+  xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)]",
+  sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+  lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+  icon: 'size-9',
+  'icon-xs':
+    "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)]",
+  'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+  'icon-lg': 'size-10',
+} satisfies Record<ButtonSizeName, string>;
+
+export const buttonVariants = cva(
+  "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 border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+  {
+    variants: {
+      variant: variantClasses,
+      size: sizeClasses,
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+  selector: 'button[hlmBtn], a[hlmBtn]',
+  exportAs: 'hlmBtn',
+  hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+  host: { 'data-slot': 'button' },
+})
+export class HlmButton {
+  private readonly _config = injectBrnButtonConfig();
+
+  private readonly _additionalClasses = signal<ClassValue>('');
+
+  public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
+
+  public readonly size = input<ButtonVariants['size']>(this._config.size);
+
+  constructor() {
+    classes(() => [
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this._additionalClasses(),
+    ]);
+  }
+
+  setClass(classes: string): void {
+    this._additionalClasses.set(classes);
+  }
+}

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

@@ -0,0 +1,25 @@
+import { HlmCard } from './lib/hlm-card';
+import { HlmCardAction } from './lib/hlm-card-action';
+import { HlmCardContent } from './lib/hlm-card-content';
+import { HlmCardDescription } from './lib/hlm-card-description';
+import { HlmCardFooter } from './lib/hlm-card-footer';
+import { HlmCardHeader } from './lib/hlm-card-header';
+import { HlmCardTitle } from './lib/hlm-card-title';
+
+export * from './lib/hlm-card';
+export * from './lib/hlm-card-action';
+export * from './lib/hlm-card-content';
+export * from './lib/hlm-card-description';
+export * from './lib/hlm-card-footer';
+export * from './lib/hlm-card-header';
+export * from './lib/hlm-card-title';
+
+export const HlmCardImports = [
+  HlmCard,
+  HlmCardAction,
+  HlmCardContent,
+  HlmCardDescription,
+  HlmCardFooter,
+  HlmCardHeader,
+  HlmCardTitle,
+] as const;

package/src/lib/ui/card/src/lib/hlm-card-action.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmCardAction]',
+  host: { 'data-slot': 'card-action' },
+})
+export class HlmCardAction {
+  constructor() {
+    classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
+  }
+}

package/src/lib/ui/card/src/lib/hlm-card-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmCardContent]',
+  host: { 'data-slot': 'card-content' },
+})
+export class HlmCardContent {
+  constructor() {
+    classes(() => 'px-(--card-spacing)');
+  }
+}

package/src/lib/ui/card/src/lib/hlm-card-description.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmCardDescription]',
+  host: { 'data-slot': 'card-description' },
+})
+export class HlmCardDescription {
+  constructor() {
+    classes(() => 'text-muted-foreground text-sm');
+  }
+}

package/src/lib/ui/card/src/lib/hlm-card-footer.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmCardFooter],hlm-card-footer',
+  host: { 'data-slot': 'card-footer' },
+})
+export class HlmCardFooter {
+  constructor() {
+    classes(
+      () => 'rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing) flex items-center',
+    );
+  }
+}

package/src/lib/ui/card/src/lib/hlm-card-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmCardHeader],hlm-card-header',
+  host: { 'data-slot': 'card-header' },
+})
+export class HlmCardHeader {
+  constructor() {
+    classes(
+      () =>
+        'gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+    );
+  }
+}

package/src/lib/ui/card/src/lib/hlm-card-title.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmCardTitle]',
+  host: { 'data-slot': 'card-title' },
+})
+export class HlmCardTitle {
+  constructor() {
+    classes(() => 'text-base leading-normal font-medium group-data-[size=sm]/card:text-sm');
+  }
+}