feat: add new directives for breadcrumb, collapsible, scroll area, slider, and toggle group components

Author: coxxanthony

src/packages/registry/badge/badge.directive.ts.template

@@ -11,9 +11,24 @@ import { LuminaBadgeVariant } from './badge.types';
   },
 })
 export class LuminaBadgeDirective {
-  variant = input<LuminaBadgeVariant>('default', { alias: 'lmBadge' });
+  // Supports shorthand: <span lmBadge> or <span lmBadge="outline">
+  variant = input<LuminaBadgeVariant, LuminaBadgeVariant | ''>('default', {
+    alias: 'lmBadge',
+    transform: (v) => (v === '' ? 'default' : v),
+  });
+
+  // Supports shape change: <span lmBadge shape="square">
+  shape = input<'pill' | 'square'>('pill');
 
   userClass = input<string>('', { alias: 'class' });
 
-  computedClass = computed(() => cn(badgeVariants({ variant: this.variant() }), this.userClass()));
+  computedClass = computed(() =>
+    cn(
+      badgeVariants({
+        variant: this.variant() as LuminaBadgeVariant,
+        shape: this.shape(),
+      }),
+      this.userClass(),
+    ),
+  );
 }

src/packages/registry/badge/badge.json

@@ -3,7 +3,6 @@
   "destination": "ui/badge",
   "primaryExport": "LuminaBadgeComponent",
   "files": [
-    "badge.component.ts.template",
     "badge.variants.ts.template",
     "badge.types.ts.template",
     "badge.directive.ts.template"

src/packages/registry/badge/badge.types.ts.template

@@ -1,5 +1,8 @@
-export type LuminaBadgeVariant =
-  | "default"
-  | "secondary"
-  | "outline"
-  | "destructive";
+export type LuminaBadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+export type LuminaBadgeShape = 'pill' | 'square'; // Added this
+
+export interface LuminaBadgeProps {
+  variant?: LuminaBadgeVariant;
+  shape?: LuminaBadgeShape;
+  class?: string;
+}

src/packages/registry/badge/badge.variants.ts.template

@@ -1,8 +1,8 @@
 import { cva } from '../../../lib/cva';
-import type { LuminaBadgeVariant } from './badge.types';
+import { LuminaBadgeVariant } from './badge.types';
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -13,9 +13,15 @@ export const badgeVariants = cva(
           'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground',
       } as Record<LuminaBadgeVariant, string>,
+      // New: Add shape variants
+      shape: {
+        pill: 'rounded-full',
+        square: 'rounded-md',
+      },
     },
     defaultVariants: {
       variant: 'default',
+      shape: 'pill',
     },
   },
 );

src/packages/registry/breadcrumb/breadcrumb-item.directive.ts.template

@@ -0,0 +1,37 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from '../../../lib/cn';
+
+@Directive({
+  selector: 'li[lmBreadcrumbItem]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class LuminaBreadcrumbItemDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() => cn('inline-flex items-center gap-1.5', this.userClass()));
+}
+
+@Directive({
+  selector: 'a[lmBreadcrumbLink]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class LuminaBreadcrumbLinkDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() => cn('transition-colors hover:text-foreground', this.userClass()));
+}
+
+@Directive({
+  selector: 'span[lmBreadcrumbPage]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'link',
+    'aria-disabled': 'true',
+    'aria-current': 'page',
+  },
+})
+export class LuminaBreadcrumbPageDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() => cn('font-normal text-foreground', this.userClass()));
+}

src/packages/registry/breadcrumb/breadcrumb-shared.directive.ts.template

@@ -0,0 +1,30 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from '../../../lib/cn';
+
+@Directive({
+  selector: 'li[lmBreadcrumbSeparator]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'presentation',
+    'aria-hidden': 'true',
+  },
+})
+export class LuminaBreadcrumbSeparatorDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() => cn('[&>svg]:size-3.5', this.userClass()));
+}
+
+@Directive({
+  selector: 'span[lmBreadcrumbEllipsis]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'presentation',
+    'aria-hidden': 'true',
+  },
+})
+export class LuminaBreadcrumbEllipsisDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() => cn('flex h-9 w-9 items-center justify-center', this.userClass()));
+}

src/packages/registry/breadcrumb/breadcrumb.directive.ts.template

@@ -0,0 +1,24 @@
+import { Directive, input, computed } from '@angular/core';
+import { cn } from '../../../lib/cn';
+
+@Directive({
+  selector: 'nav[lmBreadcrumb]',
+  standalone: true,
+  host: { 'aria-label': 'breadcrumb' },
+})
+export class LuminaBreadcrumbDirective {}
+
+@Directive({
+  selector: 'ol[lmBreadcrumbList]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class LuminaBreadcrumbListDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() =>
+    cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+      this.userClass(),
+    ),
+  );
+}

src/packages/registry/breadcrumb/breadcrumb.json

@@ -0,0 +1,10 @@
+{
+  "name": "breadcrumb",
+  "destination": "ui/breadcrumb",
+  "primaryExport": "LuminaBreadcrumbDirective",
+  "files": [
+    "breadcrumb-item.directive.ts.template",
+    "breadcrumb-shared.directive.ts.template",
+    "breadcrumb.directive.ts.template"
+  ]
+}

src/packages/registry/collapsible/collapsible.directive.ts.template

@@ -0,0 +1,17 @@
+import { Directive, model } from '@angular/core';
+
+@Directive({
+  selector: '[lmCollapsible]',
+  exportAs: 'lmCollapsible',
+  host: {
+    '[attr.aria-expanded]': 'open()',
+    '[attr.data-state]': 'open() ? "open" : "closed"',
+  },
+})
+export class LuminaCollapsibleDirective {
+  open = model(false);
+
+  toggle() {
+    this.open.update((v) => !v);
+  }
+}

src/packages/registry/collapsible/collapsible.json

@@ -0,0 +1,6 @@
+{
+  "name": "collapsible",
+  "destination": "ui/collapsible",
+  "primaryExport": "LuminaCollapsibleDirective",
+  "files": ["collapsible.directive.ts.template"]
+}