@mcp-elements/angular 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mayur Rawte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@mcp-elements/angular",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "dependencies": {
+    "@mcp-elements/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^19.0.0",
+    "@angular/common": "^19.0.0"
+  },
+  "files": [
+    "src"
+  ],
+  "types": "./src/index.ts",
+  "scripts": {
+    "build": "echo 'Angular components are source-distributed via CLI'",
+    "test": "echo 'Angular tests run in example app'",
+    "clean": "echo 'nothing to clean'"
+  }
+}

package/src/accordion.component.ts

@@ -0,0 +1,74 @@
+import { Component, input, signal, computed } from '@angular/core'
+import { createAccordion, type AccordionItemConfig } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-accordion',
+  standalone: true,
+  template: `<div><ng-content /></div>`,
+})
+export class SnxAccordionComponent {
+  items = input<AccordionItemConfig[]>([])
+  type = input<'single' | 'multiple'>('single')
+  collapsible = input(false)
+  expandedValues = signal<string[]>([])
+
+  private api = computed(() =>
+    createAccordion(this.items(), {
+      type: this.type(),
+      collapsible: this.collapsible(),
+      onValueChange: (v) => this.expandedValues.set(v),
+    })
+  )
+
+  isExpanded(value: string): boolean {
+    return this.expandedValues().includes(value)
+  }
+
+  toggle(value: string) {
+    const props = this.api().getTriggerProps(value, this.expandedValues())
+    props.onClick()
+  }
+}
+
+@Component({
+  selector: 'mcpe-accordion-item',
+  standalone: true,
+  template: `<div class="mcpe-accordion-item"><ng-content /></div>`,
+})
+export class SnxAccordionItemComponent {}
+
+@Component({
+  selector: 'mcpe-accordion-trigger',
+  standalone: true,
+  template: `
+    <h3>
+      <button
+        [class]="'mcpe-accordion-trigger'"
+        [attr.aria-expanded]="isExpanded()"
+        (click)="onClick.emit()"
+      >
+        <ng-content />
+        <svg class="mcpe-accordion-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+    </h3>
+  `,
+})
+export class SnxAccordionTriggerComponent {
+  isExpanded = input(false)
+  onClick = output<void>()
+}
+
+@Component({
+  selector: 'mcpe-accordion-content',
+  standalone: true,
+  template: `
+    @if (isExpanded()) {
+      <div role="region" class="mcpe-accordion-content"><ng-content /></div>
+    }
+  `,
+})
+export class SnxAccordionContentComponent {
+  isExpanded = input(false)
+}

package/src/ai-badge.component.ts

@@ -0,0 +1,26 @@
+import { Component, input, computed } from '@angular/core'
+
+type AiBadgeVariant = 'default' | 'prominent' | 'subtle'
+
+@Component({
+  selector: 'mcpe-ai-badge',
+  standalone: true,
+  template: `
+    <span [class]="classes()">
+      @if (showIcon()) {
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 1-1.275-1.275L3 12l5.813-1.912a2 2 0 0 1 1.275-1.275L12 3z" />
+        </svg>
+      }
+      <ng-content />
+    </span>
+  `,
+})
+export class SnxAiBadgeComponent {
+  variant = input<AiBadgeVariant>('default')
+  showIcon = input(true)
+  class = input('')
+  classes = computed(() =>
+    ['mcpe-ai-badge', `mcpe-ai-badge-${this.variant()}`, this.class()].filter(Boolean).join(' ')
+  )
+}

package/src/alert.component.ts

@@ -0,0 +1,25 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-alert',
+  standalone: true,
+  template: `<div [class]="classes()" role="alert"><ng-content /></div>`,
+})
+export class SnxAlertComponent {
+  variant = input<'default' | 'destructive' | 'success' | 'warning'>('default')
+  classes = computed(() => `mcpe-alert mcpe-alert-${this.variant()}`)
+}
+
+@Component({
+  selector: 'mcpe-alert-title',
+  standalone: true,
+  template: `<h5 class="mcpe-alert-title"><ng-content /></h5>`,
+})
+export class SnxAlertTitleComponent {}
+
+@Component({
+  selector: 'mcpe-alert-description',
+  standalone: true,
+  template: `<div class="mcpe-alert-description"><ng-content /></div>`,
+})
+export class SnxAlertDescriptionComponent {}

package/src/avatar.component.ts

@@ -0,0 +1,24 @@
+import { Component, input, computed, signal } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-avatar',
+  standalone: true,
+  template: `
+    <div [class]="classes()">
+      @if (src() && !hasError()) {
+        <img [src]="src()" [alt]="alt()" class="mcpe-avatar-image" (error)="hasError.set(true)" />
+      } @else {
+        <span class="mcpe-avatar-fallback">{{ fallback() }}</span>
+      }
+    </div>
+  `,
+})
+export class SnxAvatarComponent {
+  src = input<string>('')
+  alt = input('')
+  fallback = input('')
+  class = input('')
+  hasError = signal(false)
+
+  classes = computed(() => ['mcpe-avatar', this.class()].filter(Boolean).join(' '))
+}

package/src/badge.component.ts

@@ -0,0 +1,17 @@
+import { Component, computed, input } from '@angular/core'
+
+type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive'
+
+@Component({
+  selector: 'mcpe-badge',
+  standalone: true,
+  template: `<span [class]="classes()"><ng-content /></span>`,
+})
+export class SnxBadgeComponent {
+  variant = input<BadgeVariant>('default')
+  class = input('')
+
+  classes = computed(() =>
+    ['mcpe-badge', `mcpe-badge-${this.variant()}`, this.class()].filter(Boolean).join(' ')
+  )
+}

package/src/button.component.ts

@@ -0,0 +1,27 @@
+import { Component, computed, input } from '@angular/core'
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
+type ButtonSize = 'sm' | 'md' | 'lg' | 'icon'
+
+@Component({
+  selector: 'mcpe-button',
+  standalone: true,
+  template: `
+    <button [class]="classes()" [disabled]="disabled()" [type]="type()">
+      <ng-content />
+    </button>
+  `,
+})
+export class SnxButtonComponent {
+  variant = input<ButtonVariant>('primary')
+  size = input<ButtonSize>('md')
+  disabled = input(false)
+  type = input<'button' | 'submit' | 'reset'>('button')
+  class = input('')
+
+  classes = computed(() =>
+    ['mcpe-btn', `mcpe-btn-${this.variant()}`, `mcpe-btn-${this.size()}`, this.class()]
+      .filter(Boolean)
+      .join(' ')
+  )
+}

package/src/card.component.ts

@@ -0,0 +1,46 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-card',
+  standalone: true,
+  template: `<div [class]="classes()"><ng-content /></div>`,
+})
+export class SnxCardComponent {
+  class = input('')
+  classes = computed(() => ['mcpe-card', this.class()].filter(Boolean).join(' '))
+}
+
+@Component({
+  selector: 'mcpe-card-header',
+  standalone: true,
+  template: `<div class="mcpe-card-header"><ng-content /></div>`,
+})
+export class SnxCardHeaderComponent {}
+
+@Component({
+  selector: 'mcpe-card-title',
+  standalone: true,
+  template: `<h3 class="mcpe-card-title"><ng-content /></h3>`,
+})
+export class SnxCardTitleComponent {}
+
+@Component({
+  selector: 'mcpe-card-description',
+  standalone: true,
+  template: `<p class="mcpe-card-description"><ng-content /></p>`,
+})
+export class SnxCardDescriptionComponent {}
+
+@Component({
+  selector: 'mcpe-card-content',
+  standalone: true,
+  template: `<div class="mcpe-card-content"><ng-content /></div>`,
+})
+export class SnxCardContentComponent {}
+
+@Component({
+  selector: 'mcpe-card-footer',
+  standalone: true,
+  template: `<div class="mcpe-card-footer"><ng-content /></div>`,
+})
+export class SnxCardFooterComponent {}

package/src/chat-bubble.component.ts

@@ -0,0 +1,53 @@
+import { Component, input, computed } from '@angular/core'
+
+type ChatBubbleVariant = 'user' | 'ai'
+
+@Component({
+  selector: 'mcpe-chat-bubble',
+  standalone: true,
+  template: `<div [class]="classes()"><ng-content /></div>`,
+})
+export class SnxChatBubbleComponent {
+  variant = input<ChatBubbleVariant>('ai')
+  class = input('')
+  classes = computed(() =>
+    ['mcpe-chat-bubble', `mcpe-chat-bubble-${this.variant()}`, this.class()].filter(Boolean).join(' ')
+  )
+}
+
+@Component({
+  selector: 'mcpe-chat-bubble-avatar',
+  standalone: true,
+  template: `<img class="mcpe-chat-bubble-avatar" [src]="src()" [alt]="alt()" />`,
+})
+export class SnxChatBubbleAvatarComponent {
+  src = input.required<string>()
+  alt = input('')
+}
+
+@Component({
+  selector: 'mcpe-chat-bubble-content',
+  standalone: true,
+  template: `<div class="mcpe-chat-bubble-content"><ng-content /></div>`,
+})
+export class SnxChatBubbleContentComponent {}
+
+@Component({
+  selector: 'mcpe-chat-bubble-timestamp',
+  standalone: true,
+  template: `<span class="mcpe-chat-bubble-timestamp"><ng-content /></span>`,
+})
+export class SnxChatBubbleTimestampComponent {}
+
+@Component({
+  selector: 'mcpe-chat-bubble-typing',
+  standalone: true,
+  template: `
+    <div class="mcpe-chat-bubble-typing">
+      <span class="mcpe-chat-bubble-typing-dot"></span>
+      <span class="mcpe-chat-bubble-typing-dot"></span>
+      <span class="mcpe-chat-bubble-typing-dot"></span>
+    </div>
+  `,
+})
+export class SnxChatBubbleTypingComponent {}

package/src/chips.component.ts

@@ -0,0 +1,33 @@
+import { Component, input, output, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-chip',
+  standalone: true,
+  template: `
+    <span [class]="classes()">
+      <ng-content />
+      @if (removable()) {
+        <button type="button" class="mcpe-chip-remove" (click)="remove.emit()" aria-label="Remove">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      }
+    </span>
+  `,
+})
+export class SnxChipComponent {
+  variant = input<'default' | 'primary' | 'outline' | 'destructive'>('default')
+  removable = input(false)
+  remove = output<void>()
+  classes = computed(() =>
+    ['mcpe-chip', `mcpe-chip-${this.variant()}`, this.removable() ? 'mcpe-chip-removable' : ''].filter(Boolean).join(' ')
+  )
+}
+
+@Component({
+  selector: 'mcpe-chips',
+  standalone: true,
+  template: `<div class="mcpe-chips"><ng-content /></div>`,
+})
+export class SnxChipsComponent {}

package/src/counter.component.ts

@@ -0,0 +1,48 @@
+import { Component, input, output, signal } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-counter',
+  standalone: true,
+  template: `
+    <div class="mcpe-counter">
+      <button type="button" class="mcpe-counter-button" (click)="decrement()"
+              [disabled]="disabled() || value() <= min()" aria-label="Decrease">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14" />
+        </svg>
+      </button>
+      <input type="text" inputmode="numeric" class="mcpe-counter-input"
+             [value]="value()" (change)="onInput($event)" [disabled]="disabled()" aria-label="Count" />
+      <button type="button" class="mcpe-counter-button" (click)="increment()"
+              [disabled]="disabled() || value() >= max()" aria-label="Increase">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14" /><path d="M12 5v14" />
+        </svg>
+      </button>
+    </div>
+  `,
+})
+export class SnxCounterComponent {
+  value = signal(0)
+  min = input(0)
+  max = input(99)
+  step = input(1)
+  disabled = input(false)
+  valueChange = output<number>()
+
+  decrement() {
+    this.value.update(v => Math.max(this.min(), v - this.step()))
+    this.valueChange.emit(this.value())
+  }
+  increment() {
+    this.value.update(v => Math.min(this.max(), v + this.step()))
+    this.valueChange.emit(this.value())
+  }
+  onInput(event: Event) {
+    const num = parseInt((event.target as HTMLInputElement).value, 10)
+    if (!isNaN(num)) {
+      this.value.set(Math.max(this.min(), Math.min(this.max(), num)))
+      this.valueChange.emit(this.value())
+    }
+  }
+}

package/src/dialog.component.ts

@@ -0,0 +1,42 @@
+import { Component, input, output, signal, computed, effect, ElementRef, viewChild } from '@angular/core'
+import { createDialog } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-dialog',
+  standalone: true,
+  template: `
+    @if (open()) {
+      <div class="mcpe-dialog-overlay" (click)="close()"></div>
+      <div
+        #content
+        class="mcpe-dialog-content"
+        role="dialog"
+        [attr.aria-modal]="modal()"
+        (keydown.escape)="close()"
+      >
+        <ng-content />
+        <button class="mcpe-dialog-close" (click)="close()" aria-label="Close">&#x2715;</button>
+      </div>
+    }
+  `,
+})
+export class SnxDialogComponent {
+  modal = input(true)
+  open = signal(false)
+  openChange = output<boolean>()
+
+  toggle() {
+    this.open.update(v => !v)
+    this.openChange.emit(this.open())
+  }
+
+  close() {
+    this.open.set(false)
+    this.openChange.emit(false)
+  }
+
+  show() {
+    this.open.set(true)
+    this.openChange.emit(true)
+  }
+}

package/src/drawer.component.ts

@@ -0,0 +1,48 @@
+import { Component, input, output, signal } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-drawer',
+  standalone: true,
+  template: `
+    @if (open()) {
+      <div class="mcpe-drawer-overlay" (click)="close()"></div>
+      <div
+        [class]="'mcpe-drawer-content mcpe-drawer-content-' + side()"
+        role="dialog"
+        aria-modal="true"
+        (keydown.escape)="close()"
+      >
+        <ng-content />
+        <button class="mcpe-drawer-close" (click)="close()" aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+    }
+  `,
+})
+export class SnxDrawerComponent {
+  side = input<'left' | 'right' | 'top' | 'bottom'>('right')
+  open = signal(false)
+  openChange = output<boolean>()
+
+  show() { this.open.set(true); this.openChange.emit(true) }
+  close() { this.open.set(false); this.openChange.emit(false) }
+  toggle() { this.open.update(v => !v); this.openChange.emit(this.open()) }
+}
+
+@Component({ selector: 'mcpe-drawer-header', standalone: true, template: `<div class="mcpe-drawer-header"><ng-content /></div>` })
+export class SnxDrawerHeaderComponent {}
+
+@Component({ selector: 'mcpe-drawer-footer', standalone: true, template: `<div class="mcpe-drawer-footer"><ng-content /></div>` })
+export class SnxDrawerFooterComponent {}
+
+@Component({ selector: 'mcpe-drawer-title', standalone: true, template: `<h2 class="mcpe-drawer-title"><ng-content /></h2>` })
+export class SnxDrawerTitleComponent {}
+
+@Component({ selector: 'mcpe-drawer-description', standalone: true, template: `<p class="mcpe-drawer-description"><ng-content /></p>` })
+export class SnxDrawerDescriptionComponent {}
+
+@Component({ selector: 'mcpe-drawer-body', standalone: true, template: `<div class="mcpe-drawer-body"><ng-content /></div>` })
+export class SnxDrawerBodyComponent {}

package/src/dropdown-menu.component.ts

@@ -0,0 +1,62 @@
+import { Component, input, signal, ElementRef, viewChild } from '@angular/core'
+
+export interface DropdownItem {
+  id: string
+  label: string
+  disabled?: boolean
+  type?: 'item' | 'separator' | 'label'
+  shortcut?: string
+}
+
+@Component({
+  selector: 'mcpe-dropdown-menu',
+  standalone: true,
+  template: `
+    <div class="relative inline-block" #container>
+      <div (click)="toggle()">
+        <ng-content select="[trigger]" />
+      </div>
+      @if (isOpen()) {
+        <div class="mcpe-dropdown-menu-content absolute top-full mt-1 right-0" role="menu">
+          @for (item of items(); track item.id) {
+            @if (item.type === 'separator') {
+              <div class="mcpe-dropdown-menu-separator" role="separator"></div>
+            } @else if (item.type === 'label') {
+              <div class="mcpe-dropdown-menu-label">{{ item.label }}</div>
+            } @else {
+              <div
+                role="menuitem"
+                [class]="'mcpe-dropdown-menu-item' + (item.disabled ? ' opacity-50 pointer-events-none' : '')"
+                (click)="selectItem(item)"
+                [attr.aria-disabled]="item.disabled"
+              >
+                <span class="flex-1">{{ item.label }}</span>
+                @if (item.shortcut) {
+                  <span class="mcpe-dropdown-menu-shortcut">{{ item.shortcut }}</span>
+                }
+              </div>
+            }
+          }
+        </div>
+      }
+    </div>
+  `,
+  host: { '(document:click)': 'onDocumentClick($event)' },
+})
+export class SnxDropdownMenuComponent {
+  items = input<DropdownItem[]>([])
+  isOpen = signal(false)
+  container = viewChild<ElementRef>('container')
+
+  toggle() { this.isOpen.update(v => !v) }
+  close() { this.isOpen.set(false) }
+
+  selectItem(item: DropdownItem) {
+    if (!item.disabled) this.isOpen.set(false)
+  }
+
+  onDocumentClick(event: MouseEvent) {
+    const el = this.container()?.nativeElement
+    if (el && !el.contains(event.target as Node)) this.isOpen.set(false)
+  }
+}

package/src/feedback.component.ts

@@ -0,0 +1,71 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-feedback',
+  standalone: true,
+  template: `<div class="mcpe-feedback"><ng-content /></div>`,
+})
+export class SnxFeedbackComponent {}
+
+type FeedbackType = 'up' | 'down'
+
+@Component({
+  selector: 'mcpe-feedback-btn',
+  standalone: true,
+  template: `
+    <button [class]="classes()" type="button">
+      @if (feedbackType() === 'up') {
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
+        </svg>
+      } @else {
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
+        </svg>
+      }
+    </button>
+  `,
+})
+export class SnxFeedbackButtonComponent {
+  feedbackType = input.required<FeedbackType>({ alias: 'type' })
+  selected = input(false)
+  class = input('')
+  classes = computed(() =>
+    [
+      'mcpe-feedback-btn',
+      `mcpe-feedback-btn-${this.feedbackType()}`,
+      this.selected() ? 'mcpe-feedback-btn-selected' : '',
+      this.class(),
+    ].filter(Boolean).join(' ')
+  )
+}
+
+@Component({
+  selector: 'mcpe-feedback-separator',
+  standalone: true,
+  template: `<span class="mcpe-feedback-separator"></span>`,
+})
+export class SnxFeedbackSeparatorComponent {}
+
+@Component({
+  selector: 'mcpe-feedback-form',
+  standalone: true,
+  template: `<div class="mcpe-feedback-form"><ng-content /></div>`,
+})
+export class SnxFeedbackFormComponent {}
+
+@Component({
+  selector: 'mcpe-feedback-input',
+  standalone: true,
+  template: `<input class="mcpe-feedback-input" [placeholder]="placeholder()" />`,
+})
+export class SnxFeedbackInputComponent {
+  placeholder = input('Add a comment...')
+}
+
+@Component({
+  selector: 'mcpe-feedback-submit',
+  standalone: true,
+  template: `<button class="mcpe-feedback-submit" type="button"><ng-content /></button>`,
+})
+export class SnxFeedbackSubmitComponent {}