@mesgflow/ui-kit 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hurdeniz YENER / MesgFlow
+
+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/README.md

@@ -0,0 +1,200 @@
+# @mesgflow/ui-kit
+
+An independent Angular component kit — button, select, dialog, table,
+sidebar, tabs, date-picker, and more — distributed as a real npm package in
+the `PrimeNG`/`ng-zorro-antd` mold: it does **not** bundle Angular/CDK
+(`peerDependencies`), and it does **not** hardcode app-specific things like
+language (injected, see [Internationalization](#internationalization)
+below). Angular 22+, standalone + zoneless, built on signals and a
+Tailwind v4 design token system.
+
+- **Docs & live examples**: <https://hurdenizyener.github.io/mesgflow-ui-kit/>
+- **Changelog**: [`CHANGELOG.md`](https://github.com/hurdenizyener/mesgflow-ui-kit/blob/master/CHANGELOG.md)
+- **Contributing**: [`CONTRIBUTING.md`](https://github.com/hurdenizyener/mesgflow-ui-kit/blob/master/CONTRIBUTING.md)
+
+## Install
+
+```bash
+npm install @mesgflow/ui-kit
+```
+
+Every primitive also has its own secondary entry point (same pattern as
+`@angular/cdk`), so either of these works:
+
+```ts
+import { Button } from '@mesgflow/ui-kit'; // primary barrel
+import { Button } from '@mesgflow/ui-kit/button'; // standalone
+```
+
+## Peer dependencies
+
+```
+@angular/core, @angular/common, @angular/forms, @angular/cdk, @angular/aria  ^22.1.0
+class-variance-authority ^0.7.1
+clsx ^2.1.1
+date-fns ^4.4.0
+tailwind-merge ^3.6.0
+@material-symbols/font-400 ^0.47.1
+```
+
+Optional peers (only needed if you use the kit's own font stack rather than
+your own):
+
+```
+@fontsource-variable/inter
+@fontsource-variable/space-grotesk
+@fontsource-variable/jetbrains-mono
+```
+
+The project must be standalone + zoneless (it isn't tested with NgModules
+or zone.js).
+
+## Styles
+
+In your Tailwind v4 entry stylesheet, **after** the `@import "tailwindcss/theme.css" layer(theme);`
+lines:
+
+```css
+@import '@mesgflow/ui-kit/preset.css';
+```
+
+That one line bundles everything: this kit's design tokens, the official
+`@angular/cdk/overlay` stylesheet (required for Select/Tooltip/DatePicker/
+Sidebar/Table menus to position correctly), Material Symbols (for the
+`Icon` primitive's ligatures), and a `@source` directive so Tailwind's
+scanner picks up this package's own class names from
+`node_modules/@mesgflow/ui-kit/fesm2022/*.mjs` — Tailwind v4's automatic source
+scanning skips `node_modules` by default, so without this the kit renders
+"half-styled" (no hover/disabled/focus states, no width on layout
+primitives) with no build error. If `@source` ever fails to resolve in your
+setup, add it explicitly as a fallback:
+
+```css
+@source '../node_modules/@mesgflow/ui-kit/fesm2022/*.mjs';
+```
+
+If you're using the kit's own font stack, import it too (optional — with no
+font imports the design still works, it just falls back to the browser's
+`system-ui`/`monospace` fonts):
+
+```css
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/space-grotesk';
+@import '@fontsource-variable/jetbrains-mono';
+```
+
+### Dark mode
+
+Toggling a `.dark` class on the root element (`<html>` or similar) is your
+app's responsibility — every token reacts to it, but the kit ships no theme
+state (localStorage, `prefers-color-scheme` detection, a toggle component,
+etc.). See the docs site's own shell (`shell/theme.service.ts` in this
+repo) for a reference implementation.
+
+## Internationalization
+
+Every component's text defaults to English. To provide your own strings
+(and/or a `date-fns` locale for `DatePicker`/`Calendar`), add
+`provideMesgflowUi()` to your `providers`:
+
+```ts
+import { provideMesgflowUi } from '@mesgflow/ui-kit';
+import { mfLabelsTr } from '@mesgflow/ui-kit/i18n/tr';
+import { tr } from 'date-fns/locale';
+
+providers: [provideMesgflowUi({ labels: mfLabelsTr, dateLocale: tr })];
+```
+
+`labels` is a deep-partial override — you only need to supply the fields
+you want to change, everything else falls back to the English default. It
+also accepts a reactive `Signal<DeepPartial<MfLabels>>` if your app's
+language can change at runtime. `@mesgflow/ui-kit/i18n/tr` ships a complete
+Turkish translation as a ready-made example (`mfLabelsTr`); it is not
+re-exported from the primary barrel, so it's fully opt-in.
+
+`Dialog`/`ConfirmDialog`/`DialogService` previously had their own standalone
+`MF_DIALOG_LABELS` injection token — that still works as an escape hatch if
+you only need to override dialog text, but `provideMesgflowUi()` is the
+recommended entry point for everything now.
+
+## Design tokens
+
+All color/elevation/radius/typography/motion tokens live in
+`@mesgflow/ui-kit/tokens.css` (bundled into `preset.css`, so you don't need to
+import it separately unless you want tokens without the rest of the
+preset). Role tokens (`bg-surface`, `text-fg`, `text-fg-muted`,
+`shadow-control`, `border-hairline`, `bg-glass`, `bg-accent-fill`, etc.)
+automatically swap value between light and dark — templates never need a
+`dark:` twin when using them. Every semantic tone (`success`/`warning`/
+`danger`/`info`/`help`, plus `primary`) exposes the same five-token set:
+`bg-X-fill`/`hover:bg-X-fill-hover`/`text-X-fill-fg` for solid blocks, and
+`bg-X-tint`/`text-X-tint-fg` (a `color-mix()`-based soft badge/alert
+background) for tonal marks. The kit is **border-first**: containers
+(card/table/toolbar/popover/menu) use `border-hairline` (a ~16% opaque,
+brand-tinted 1px line) instead of a shadow; `shadow-1` is reserved for
+small contact shadows (segmented pill, slider thumb), and `shadow-glow`
+(primary filled button only) adds a soft emerald glow in dark mode.
+Dialog/Sheet/Drawer panels, Toast items, and the docs site's sticky header
+use a micro glassmorphism surface (`bg-glass` + `backdrop-blur`, falling
+back to a solid surface when `backdrop-filter` isn't supported or the
+visitor prefers reduced transparency). See the docs site's Foundations
+pages (Colors/Typography/Radius/Elevation/Motion) for a live, inspectable
+reference.
+
+## Theming
+
+`@mesgflow/ui-kit/theming` (opt-in, not re-exported from the primary barrel —
+same pattern as `@mesgflow/ui-kit/i18n/tr`) lets you swap the accent color,
+radius scale, and neutral tint at **runtime**, with no rebuild:
+
+```ts
+import { applyMfTheme } from '@mesgflow/ui-kit/theming';
+
+applyMfTheme({ accent: '#4f46e5', radiusScale: 'soft', neutralTint: 'cool' });
+```
+
+This works because every Tailwind utility the kit generates
+(`bg-accent-fill`, `rounded-md`, …) compiles to a `var(--color-accent-fill)` /
+`var(--radius-md)` reference rather than a baked-in value — `applyMfTheme()`
+overwrites those CSS custom properties on `document.documentElement` (or a
+`target` element you pass), and the whole kit repaints instantly. Passing
+`accent` regenerates all 11 ramp steps (`--color-primary-50..950`) from the
+given `#rgb`/`#rrggbb` hex via OKLCH (hue/chroma preserved, a fixed
+lightness curve per step) and writes three role lines explicitly as
+`light-dark(…)`: a WCAG-safe `--mf-fg-on-accent`, `--mf-accent-fill`, and
+`--mf-accent-fill-hover` — light half from the ramp's own 600/700, dark half
+from 400/500 (the same split the kit's own default ramp uses). `fg-on-accent`
+is computed separately for each half, since a 600-step and a 400-step color
+are usually very different in brightness and may need different text
+colors. The other light/dark role tokens (`--mf-accent`, `--mf-focus-ring`,
+`--mf-primary-tint(-fg)`, `--mf-shadow-glow`, …) already reference the raw
+ramp via `var()`, so they update automatically. Passing `accent: null`
+clears every inline override those calls left behind, reverting to the
+kit's default "Deep Emerald" ramp.
+
+`exportMfThemeCss(config)` returns the same result as a static `:root { … }`
+block you can paste into your own stylesheet at build time instead of
+calling `applyMfTheme()` at runtime.
+
+`createAccentRamp(hex)` is also exported directly if you only need the 11
+hex values (e.g. to render a preview swatch) without touching the DOM.
+
+The five semantic ramps (`--color-success/warning/danger/info/help-50..950`)
+are hand-tuned to the **default** "Deep Emerald" accent and are **not**
+regenerated by `applyMfTheme()`. They're plain `:root`/`.dark` custom
+properties like any other token, so if you pick an accent that collides
+with one of them (e.g. an amber accent next to `warning`), override the
+relevant custom properties yourself after calling `applyMfTheme()`.
+
+## License
+
+MIT — see [`LICENSE`](https://github.com/hurdenizyener/mesgflow-ui-kit/blob/master/LICENSE).
+
+---
+
+Internal architecture notes for contributors (directive-vs-component
+rules, the `cva`/token conventions, `@angular/aria` composition patterns,
+the i18n system's internals, etc.) live in
+[`docs/tr/mimari.md`](https://github.com/hurdenizyener/mesgflow-ui-kit/blob/master/docs/tr/mimari.md)
+(Turkish) — that content is for people working on this repo, not for
+consumers of the published package.

package/fesm2022/mesgflow-ui-kit-accordion.mjs

@@ -0,0 +1,75 @@
+import * as i1 from '@angular/aria/accordion';
+import { AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent } from '@angular/aria/accordion';
+import * as i0 from '@angular/core';
+import { Component, input, computed } from '@angular/core';
+import { cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { cva } from 'class-variance-authority';
+
+/**
+ * `<mf-accordion multiExpandable><mf-accordion-item summary="...">...</mf-accordion-item></mf-accordion>`
+ *
+ * Salt bir kapsayıcı — ARIA/klavye/genişletme-modu mantığı `@angular/aria/accordion`'ın
+ * `AccordionGroup` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.
+ * `tabs.ts`'teki AYNI desen). `multiExpandable`/`disabled` girdileri
+ * `hostDirectives`'in `inputs` listesiyle dışarı açıldı.
+ */
+class Accordion {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Accordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: Accordion, isStandalone: true, selector: "mf-accordion", host: { classAttribute: "block divide-y divide-border overflow-hidden rounded-lg border border-border" }, exportAs: ["mfAccordion"], hostDirectives: [{ directive: i1.AccordionGroup, inputs: ["multiExpandable", "multiExpandable", "disabled", "disabled"] }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Accordion, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-accordion',
+                    exportAs: 'mfAccordion',
+                    hostDirectives: [{ directive: AccordionGroup, inputs: ['multiExpandable', 'disabled'] }],
+                    host: { class: 'block divide-y divide-border overflow-hidden rounded-lg border border-border' },
+                    template: '<ng-content />',
+                }]
+        }] });
+
+const accordionTriggerVariants = cva('flex w-full items-center justify-between gap-2 px-3 py-2.5 text-start text-sm font-medium text-fg transition-colors duration-fast ease-emphasis ' +
+    'hover:bg-surface-alt focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring', {
+    variants: {
+        disabled: {
+            true: 'pointer-events-none opacity-50',
+            false: '',
+        },
+    },
+    defaultVariants: { disabled: false },
+});
+
+/**
+ * `<mf-accordion-item summary="Genel">İçerik…</mf-accordion-item>` —
+ * `mf-accordion` içine konur. `ngAccordionTrigger`/`ngAccordionPanel`/
+ * `ngAccordionContent` (`@angular/aria/accordion`) doğrudan bu component'in
+ * KENDİ template'inde kullanılıyor (`hostDirectives` DEĞİL — `Tab`'ın aksine
+ * trigger butonu ve panel div'i İKİ AYRI DOM elemanı, tek host'a sığmıyor;
+ * bkz. `Select`'in `cdkOverlayOrigin`/`cdkConnectedOverlay`'i kendi
+ * template'inde birleştirme deseniyle AYNI gerekçe).
+ *
+ * İçerik `ngAccordionContent` sayesinde LAZY — panel ilk açılana kadar hiç
+ * oluşturulmaz.
+ */
+class AccordionItem {
+    summary = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => cn(accordionTriggerVariants({ disabled: this.disabled() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AccordionItem, isStandalone: true, selector: "mf-accordion-item", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "<h3 class=\"contents\">\r\n  <button\r\n    type=\"button\"\r\n    ngAccordionTrigger\r\n    #trigger=\"ngAccordionTrigger\"\r\n    [panel]=\"panel\"\r\n    [disabled]=\"disabled()\"\r\n    [class]=\"triggerClasses()\"\r\n  >\r\n    <span class=\"truncate\">{{ summary() }}</span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle transition-transform duration-fast\"\r\n      [class.rotate-180]=\"trigger.expanded()\"\r\n      >expand_more</span\r\n    >\r\n  </button>\r\n</h3>\r\n<!--\r\n  `preserveContent` \u2014 i\u00E7erik ilk a\u00E7\u0131l\u0131\u015Ftan SONRA DOM'da kal\u0131c\u0131 olur (bkz.\r\n  `@angular/aria`'n\u0131n `DeferredContentAware`/`DeferredContent` \u00E7ifti, panel\r\n  varsay\u0131lan\u0131: her kapan\u0131\u015Fta view `destroy()` edilir). Grid-rows ge\u00E7i\u015Finin\r\n  (a\u015Fa\u011F\u0131da) animasyonu bir \u015Feyi KISALTMASI i\u00E7in i\u00E7eri\u011Fin h\u00E2l\u00E2 orada olmas\u0131\r\n  gerekiyor \u2014 hi\u00E7 a\u00E7\u0131lmam\u0131\u015F bir panel yine de hi\u00E7 render ED\u0130LMEZ (lazy\r\n  davran\u0131\u015F korunuyor), sadece \"en az bir kez a\u00E7\u0131lm\u0131\u015F\" panel art\u0131k kapan\u0131\u015Fta\r\n  yok edilmiyor.\r\n-->\r\n<div\r\n  ngAccordionPanel\r\n  #panel=\"ngAccordionPanel\"\r\n  [preserveContent]=\"true\"\r\n  class=\"grid transition-[grid-template-rows] duration-base ease-emphasis\"\r\n  [style.grid-template-rows]=\"trigger.expanded() ? '1fr' : '0fr'\"\r\n>\r\n  <div class=\"min-h-0 overflow-hidden\">\r\n    <ng-template ngAccordionContent>\r\n      <div class=\"px-3 pb-3 text-sm text-fg-subtle\">\r\n        <ng-content />\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: AccordionTrigger, selector: "[ngAccordionTrigger]", inputs: ["panel", "id", "disabled", "expanded"], outputs: ["expandedChange"], exportAs: ["ngAccordionTrigger"] }, { kind: "directive", type: AccordionPanel, selector: "[ngAccordionPanel]", inputs: ["id"], exportAs: ["ngAccordionPanel"] }, { kind: "directive", type: AccordionContent, selector: "ng-template[ngAccordionContent]" }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AccordionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-accordion-item', imports: [AccordionTrigger, AccordionPanel, AccordionContent, Icon], host: { class: 'block' }, template: "<h3 class=\"contents\">\r\n  <button\r\n    type=\"button\"\r\n    ngAccordionTrigger\r\n    #trigger=\"ngAccordionTrigger\"\r\n    [panel]=\"panel\"\r\n    [disabled]=\"disabled()\"\r\n    [class]=\"triggerClasses()\"\r\n  >\r\n    <span class=\"truncate\">{{ summary() }}</span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle transition-transform duration-fast\"\r\n      [class.rotate-180]=\"trigger.expanded()\"\r\n      >expand_more</span\r\n    >\r\n  </button>\r\n</h3>\r\n<!--\r\n  `preserveContent` \u2014 i\u00E7erik ilk a\u00E7\u0131l\u0131\u015Ftan SONRA DOM'da kal\u0131c\u0131 olur (bkz.\r\n  `@angular/aria`'n\u0131n `DeferredContentAware`/`DeferredContent` \u00E7ifti, panel\r\n  varsay\u0131lan\u0131: her kapan\u0131\u015Fta view `destroy()` edilir). Grid-rows ge\u00E7i\u015Finin\r\n  (a\u015Fa\u011F\u0131da) animasyonu bir \u015Feyi KISALTMASI i\u00E7in i\u00E7eri\u011Fin h\u00E2l\u00E2 orada olmas\u0131\r\n  gerekiyor \u2014 hi\u00E7 a\u00E7\u0131lmam\u0131\u015F bir panel yine de hi\u00E7 render ED\u0130LMEZ (lazy\r\n  davran\u0131\u015F korunuyor), sadece \"en az bir kez a\u00E7\u0131lm\u0131\u015F\" panel art\u0131k kapan\u0131\u015Fta\r\n  yok edilmiyor.\r\n-->\r\n<div\r\n  ngAccordionPanel\r\n  #panel=\"ngAccordionPanel\"\r\n  [preserveContent]=\"true\"\r\n  class=\"grid transition-[grid-template-rows] duration-base ease-emphasis\"\r\n  [style.grid-template-rows]=\"trigger.expanded() ? '1fr' : '0fr'\"\r\n>\r\n  <div class=\"min-h-0 overflow-hidden\">\r\n    <ng-template ngAccordionContent>\r\n      <div class=\"px-3 pb-3 text-sm text-fg-subtle\">\r\n        <ng-content />\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Accordion, AccordionItem, accordionTriggerVariants };
+//# sourceMappingURL=mesgflow-ui-kit-accordion.mjs.map

package/fesm2022/mesgflow-ui-kit-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-accordion.mjs","sources":["../../../projects/ui-kit/accordion/accordion.ts","../../../projects/ui-kit/accordion/accordion.variants.ts","../../../projects/ui-kit/accordion/accordion-item.ts","../../../projects/ui-kit/accordion/accordion-item.html","../../../projects/ui-kit/accordion/mesgflow-ui-kit-accordion.ts"],"sourcesContent":["import { AccordionGroup as AriaAccordionGroup } from '@angular/aria/accordion';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-accordion multiExpandable><mf-accordion-item summary=\"...\">...</mf-accordion-item></mf-accordion>`\r\n *\r\n * Salt bir kapsayıcı — ARIA/klavye/genişletme-modu mantığı `@angular/aria/accordion`'ın\r\n * `AccordionGroup` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.\r\n * `tabs.ts`'teki AYNI desen). `multiExpandable`/`disabled` girdileri\r\n * `hostDirectives`'in `inputs` listesiyle dışarı açıldı.\r\n */\r\n@Component({\r\n  selector: 'mf-accordion',\r\n  exportAs: 'mfAccordion',\r\n  hostDirectives: [{ directive: AriaAccordionGroup, inputs: ['multiExpandable', 'disabled'] }],\r\n  host: { class: 'block divide-y divide-border overflow-hidden rounded-lg border border-border' },\r\n  template: '<ng-content />',\r\n})\r\nexport class Accordion {}\r\n","import { cva } from 'class-variance-authority';\r\n\r\nexport const accordionTriggerVariants = cva(\r\n  'flex w-full items-center justify-between gap-2 px-3 py-2.5 text-start text-sm font-medium text-fg transition-colors duration-fast ease-emphasis ' +\r\n    'hover:bg-surface-alt focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { disabled: false },\r\n  },\r\n);\r\n","import {\r\n  AccordionContent,\r\n  AccordionPanel as AriaAccordionPanel,\r\n  AccordionTrigger as AriaAccordionTrigger,\r\n} from '@angular/aria/accordion';\r\nimport { Component, computed, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { accordionTriggerVariants } from './accordion.variants';\r\n\r\n/**\r\n * `<mf-accordion-item summary=\"Genel\">İçerik…</mf-accordion-item>` —\r\n * `mf-accordion` içine konur. `ngAccordionTrigger`/`ngAccordionPanel`/\r\n * `ngAccordionContent` (`@angular/aria/accordion`) doğrudan bu component'in\r\n * KENDİ template'inde kullanılıyor (`hostDirectives` DEĞİL — `Tab`'ın aksine\r\n * trigger butonu ve panel div'i İKİ AYRI DOM elemanı, tek host'a sığmıyor;\r\n * bkz. `Select`'in `cdkOverlayOrigin`/`cdkConnectedOverlay`'i kendi\r\n * template'inde birleştirme deseniyle AYNI gerekçe).\r\n *\r\n * İçerik `ngAccordionContent` sayesinde LAZY — panel ilk açılana kadar hiç\r\n * oluşturulmaz.\r\n */\r\n@Component({\r\n  selector: 'mf-accordion-item',\r\n  imports: [AriaAccordionTrigger, AriaAccordionPanel, AccordionContent, Icon],\r\n  host: { class: 'block' },\r\n  templateUrl: './accordion-item.html',\r\n})\r\nexport class AccordionItem {\r\n  readonly summary = input.required<string>();\r\n  readonly disabled = input(false);\r\n\r\n  protected readonly triggerClasses = computed(() =>\r\n    cn(accordionTriggerVariants({ disabled: this.disabled() })),\r\n  );\r\n}\r\n","<h3 class=\"contents\">\r\n  <button\r\n    type=\"button\"\r\n    ngAccordionTrigger\r\n    #trigger=\"ngAccordionTrigger\"\r\n    [panel]=\"panel\"\r\n    [disabled]=\"disabled()\"\r\n    [class]=\"triggerClasses()\"\r\n  >\r\n    <span class=\"truncate\">{{ summary() }}</span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle transition-transform duration-fast\"\r\n      [class.rotate-180]=\"trigger.expanded()\"\r\n      >expand_more</span\r\n    >\r\n  </button>\r\n</h3>\r\n<!--\r\n  `preserveContent` — içerik ilk açılıştan SONRA DOM'da kalıcı olur (bkz.\r\n  `@angular/aria`'nın `DeferredContentAware`/`DeferredContent` çifti, panel\r\n  varsayılanı: her kapanışta view `destroy()` edilir). Grid-rows geçişinin\r\n  (aşağıda) animasyonu bir şeyi KISALTMASI için içeriğin hâlâ orada olması\r\n  gerekiyor — hiç açılmamış bir panel yine de hiç render EDİLMEZ (lazy\r\n  davranış korunuyor), sadece \"en az bir kez açılmış\" panel artık kapanışta\r\n  yok edilmiyor.\r\n-->\r\n<div\r\n  ngAccordionPanel\r\n  #panel=\"ngAccordionPanel\"\r\n  [preserveContent]=\"true\"\r\n  class=\"grid transition-[grid-template-rows] duration-base ease-emphasis\"\r\n  [style.grid-template-rows]=\"trigger.expanded() ? '1fr' : '0fr'\"\r\n>\r\n  <div class=\"min-h-0 overflow-hidden\">\r\n    <ng-template ngAccordionContent>\r\n      <div class=\"px-3 pb-3 text-sm text-fg-subtle\">\r\n        <ng-content />\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaAccordionGroup","AriaAccordionTrigger","AriaAccordionPanel"],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-alert.mjs

@@ -0,0 +1,165 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, computed, Component } from '@angular/core';
+import { MF_ALERT_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Badge/Chip/Avatar/StatTile ile AYNI "tonal işaret" dili (bkz.
+ * badge.variants.ts'teki gerekçe) — rol token'ı `bg-X-tint text-X-tint-fg`
+ * (`color-mix()` ile rampanın kendi basamağının %12 alfası; light çapa 600,
+ * dark çapa 400 — "Deep Emerald & Slate v2" spec'inin "Soft Tinting"
+ * tekniği). Alert her türlü zeminin üstüne (kart, sayfa, panel) oturabiliyor
+ * — `color-mix` sayesinde her zeminde AYRI ayrı doğru karışıyor, eski "düz
+ * basamak çifti" (`bg-X-50 dark:bg-X-900`) döneminde zeminden bağımsız
+ * garantili kontrast İÇİN gerekliydi, artık `check:contrast` dört yüzeyde
+ * (surface/canvas/overlay/surface-alt) `color-mix` sonucunu doğruluyor.
+ *
+ * Kenarlık `border-X/30` — Button'ın `outlined` görünümüyle AYNI dil (renkli-
+ * şeffaf çizgi, düz gri DEĞİL); primary `border-accent/30` kullanır (kendi
+ * `X-tint` token'ı yok, `accent`/`primary-tint` çifti aynı işi görür). Geniş
+ * bir banner için sadece dolgu yetersiz kalıyordu (kenar tanımı olmadan
+ * sayfa zeminiyle karışıyordu, `Badge`'in küçük pilinde bu sorun yoktu).
+ */
+const alertVariants = cva('flex items-start gap-3 rounded-lg border p-4 text-sm', {
+    variants: {
+        tone: {
+            neutral: 'border-border bg-surface-alt text-fg',
+            primary: 'border-accent/30 bg-primary-tint text-primary-tint-fg',
+            success: 'border-success/30 bg-success-tint text-success-tint-fg',
+            warning: 'border-warning/30 bg-warning-tint text-warning-tint-fg',
+            danger: 'border-danger/30 bg-danger-tint text-danger-tint-fg',
+            info: 'border-info/30 bg-info-tint text-info-tint-fg',
+            help: 'border-help/30 bg-help-tint text-help-tint-fg',
+        },
+    },
+    defaultVariants: { tone: 'neutral' },
+});
+
+const DEFAULT_ICON = {
+    neutral: 'info',
+    primary: 'info',
+    success: 'check_circle',
+    warning: 'warning',
+    danger: 'error',
+    info: 'info',
+    help: 'help',
+};
+/**
+ * `<mf-alert tone="danger" title="Kayıt başarısız">Ağ bağlantısı koptu.</mf-alert>`
+ *
+ * İçerik (gövde metni) `<ng-content />` ile projekte edilir. İkon ayrı bir
+ * content-projection SLOT'u DEĞİL — `icon` girdisi (bkz. `ConfirmDialog`'un
+ * aynı deseni, `dialog/confirm-dialog.ts`): tone'a göre makul bir varsayılanı
+ * var, tüketici farklı bir Material Symbol adı geçebilir ya da `icon=""` ile
+ * tamamen kapatabilir. Gerçek content-slot algılaması (`@ContentChild` +
+ * "sağlandı mı" kontrolü) bu basit vakada gereksiz karmaşıklık.
+ *
+ * `role`: `danger`/`warning` kullanıcının DİKKATİNİ kesmesi gereken durumlar
+ * — `role="alert"` (assertive, ekran okuyucu anında keser). Diğer tonlar
+ * `role="status"` (polite, mevcut anonsu beklemeden araya girmez).
+ */
+class Alert {
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** `null` (varsayılan) → `tone`'a göre otomatik ikon. Boş string (`''`) → ikon YOK. Başka bir Material Symbol adı → onu kullan. */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    dismissLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    dismissed = output();
+    injectedLabels = inject(MF_ALERT_LABELS);
+    effectiveDismissLabel = computed(() => this.dismissLabel() ?? this.injectedLabels().dismiss, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDismissLabel" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => cn(alertVariants({ tone: this.tone() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        const t = this.tone();
+        return t === 'danger' || t === 'warning' ? 'alert' : 'status';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    iconName = computed(() => this.icon() ?? DEFAULT_ICON[this.tone()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Alert, isStandalone: true, selector: "mf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { classAttribute: "block" }, exportAs: ["mfAlert"], ngImport: i0, template: `
+    <div [class]="containerClasses()" [attr.role]="role()">
+      @if (iconName()) {
+        <span mfIcon [size]="20" class="mt-0.5 shrink-0">{{ iconName() }}</span>
+      }
+      <div class="min-w-0 flex-1">
+        @if (title()) {
+          <p class="font-semibold">{{ title() }}</p>
+        }
+        <div [class.mt-0.5]="title()">
+          <ng-content />
+        </div>
+      </div>
+      @if (dismissible()) {
+        <button
+          mfButton
+          appearance="text"
+          tone="neutral"
+          size="icon"
+          shape="square"
+          type="button"
+          class="-mt-1 -me-1 shrink-0"
+          [attr.aria-label]="effectiveDismissLabel()"
+          (click)="dismissed.emit()"
+        >
+          <span mfIcon [size]="16">close</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Alert, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-alert',
+                    exportAs: 'mfAlert',
+                    imports: [Button, Icon],
+                    host: { class: 'block' },
+                    template: `
+    <div [class]="containerClasses()" [attr.role]="role()">
+      @if (iconName()) {
+        <span mfIcon [size]="20" class="mt-0.5 shrink-0">{{ iconName() }}</span>
+      }
+      <div class="min-w-0 flex-1">
+        @if (title()) {
+          <p class="font-semibold">{{ title() }}</p>
+        }
+        <div [class.mt-0.5]="title()">
+          <ng-content />
+        </div>
+      </div>
+      @if (dismissible()) {
+        <button
+          mfButton
+          appearance="text"
+          tone="neutral"
+          size="icon"
+          shape="square"
+          type="button"
+          class="-mt-1 -me-1 shrink-0"
+          [attr.aria-label]="effectiveDismissLabel()"
+          (click)="dismissed.emit()"
+        >
+          <span mfIcon [size]="16">close</span>
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Alert, alertVariants };
+//# sourceMappingURL=mesgflow-ui-kit-alert.mjs.map

package/fesm2022/mesgflow-ui-kit-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-alert.mjs","sources":["../../../projects/ui-kit/alert/alert.variants.ts","../../../projects/ui-kit/alert/alert.ts","../../../projects/ui-kit/alert/mesgflow-ui-kit-alert.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/**\r\n * Badge/Chip/Avatar/StatTile ile AYNI \"tonal işaret\" dili (bkz.\r\n * badge.variants.ts'teki gerekçe) — rol token'ı `bg-X-tint text-X-tint-fg`\r\n * (`color-mix()` ile rampanın kendi basamağının %12 alfası; light çapa 600,\r\n * dark çapa 400 — \"Deep Emerald & Slate v2\" spec'inin \"Soft Tinting\"\r\n * tekniği). Alert her türlü zeminin üstüne (kart, sayfa, panel) oturabiliyor\r\n * — `color-mix` sayesinde her zeminde AYRI ayrı doğru karışıyor, eski \"düz\r\n * basamak çifti\" (`bg-X-50 dark:bg-X-900`) döneminde zeminden bağımsız\r\n * garantili kontrast İÇİN gerekliydi, artık `check:contrast` dört yüzeyde\r\n * (surface/canvas/overlay/surface-alt) `color-mix` sonucunu doğruluyor.\r\n *\r\n * Kenarlık `border-X/30` — Button'ın `outlined` görünümüyle AYNI dil (renkli-\r\n * şeffaf çizgi, düz gri DEĞİL); primary `border-accent/30` kullanır (kendi\r\n * `X-tint` token'ı yok, `accent`/`primary-tint` çifti aynı işi görür). Geniş\r\n * bir banner için sadece dolgu yetersiz kalıyordu (kenar tanımı olmadan\r\n * sayfa zeminiyle karışıyordu, `Badge`'in küçük pilinde bu sorun yoktu).\r\n */\r\nexport const alertVariants = cva('flex items-start gap-3 rounded-lg border p-4 text-sm', {\r\n  variants: {\r\n    tone: {\r\n      neutral: 'border-border bg-surface-alt text-fg',\r\n      primary: 'border-accent/30 bg-primary-tint text-primary-tint-fg',\r\n      success: 'border-success/30 bg-success-tint text-success-tint-fg',\r\n      warning: 'border-warning/30 bg-warning-tint text-warning-tint-fg',\r\n      danger: 'border-danger/30 bg-danger-tint text-danger-tint-fg',\r\n      info: 'border-info/30 bg-info-tint text-info-tint-fg',\r\n      help: 'border-help/30 bg-help-tint text-help-tint-fg',\r\n    },\r\n  },\r\n  defaultVariants: { tone: 'neutral' },\r\n});\r\n\r\nexport type AlertTone = VariantProps<typeof alertVariants>['tone'];\r\n","import { Component, computed, inject, input, output } from '@angular/core';\r\nimport { cn, MF_ALERT_LABELS, type MfTone } from '@mesgflow/ui-kit/core';\r\nimport { Button } from '@mesgflow/ui-kit/button';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { alertVariants } from './alert.variants';\r\n\r\nconst DEFAULT_ICON: Record<MfTone, string> = {\r\n  neutral: 'info',\r\n  primary: 'info',\r\n  success: 'check_circle',\r\n  warning: 'warning',\r\n  danger: 'error',\r\n  info: 'info',\r\n  help: 'help',\r\n};\r\n\r\n/**\r\n * `<mf-alert tone=\"danger\" title=\"Kayıt başarısız\">Ağ bağlantısı koptu.</mf-alert>`\r\n *\r\n * İçerik (gövde metni) `<ng-content />` ile projekte edilir. İkon ayrı bir\r\n * content-projection SLOT'u DEĞİL — `icon` girdisi (bkz. `ConfirmDialog`'un\r\n * aynı deseni, `dialog/confirm-dialog.ts`): tone'a göre makul bir varsayılanı\r\n * var, tüketici farklı bir Material Symbol adı geçebilir ya da `icon=\"\"` ile\r\n * tamamen kapatabilir. Gerçek content-slot algılaması (`@ContentChild` +\r\n * \"sağlandı mı\" kontrolü) bu basit vakada gereksiz karmaşıklık.\r\n *\r\n * `role`: `danger`/`warning` kullanıcının DİKKATİNİ kesmesi gereken durumlar\r\n * — `role=\"alert\"` (assertive, ekran okuyucu anında keser). Diğer tonlar\r\n * `role=\"status\"` (polite, mevcut anonsu beklemeden araya girmez).\r\n */\r\n@Component({\r\n  selector: 'mf-alert',\r\n  exportAs: 'mfAlert',\r\n  imports: [Button, Icon],\r\n  host: { class: 'block' },\r\n  template: `\r\n    <div [class]=\"containerClasses()\" [attr.role]=\"role()\">\r\n      @if (iconName()) {\r\n        <span mfIcon [size]=\"20\" class=\"mt-0.5 shrink-0\">{{ iconName() }}</span>\r\n      }\r\n      <div class=\"min-w-0 flex-1\">\r\n        @if (title()) {\r\n          <p class=\"font-semibold\">{{ title() }}</p>\r\n        }\r\n        <div [class.mt-0.5]=\"title()\">\r\n          <ng-content />\r\n        </div>\r\n      </div>\r\n      @if (dismissible()) {\r\n        <button\r\n          mfButton\r\n          appearance=\"text\"\r\n          tone=\"neutral\"\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          type=\"button\"\r\n          class=\"-mt-1 -me-1 shrink-0\"\r\n          [attr.aria-label]=\"effectiveDismissLabel()\"\r\n          (click)=\"dismissed.emit()\"\r\n        >\r\n          <span mfIcon [size]=\"16\">close</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  `,\r\n})\r\nexport class Alert {\r\n  readonly tone = input<MfTone>('neutral');\r\n  readonly title = input('');\r\n  /** `null` (varsayılan) → `tone`'a göre otomatik ikon. Boş string (`''`) → ikon YOK. Başka bir Material Symbol adı → onu kullan. */\r\n  readonly icon = input<string | null>(null);\r\n  readonly dismissible = input(false);\r\n  readonly dismissLabel = input<string>();\r\n\r\n  readonly dismissed = output<void>();\r\n\r\n  private readonly injectedLabels = inject(MF_ALERT_LABELS);\r\n  protected readonly effectiveDismissLabel = computed(\r\n    () => this.dismissLabel() ?? this.injectedLabels().dismiss,\r\n  );\r\n  protected readonly containerClasses = computed(() => cn(alertVariants({ tone: this.tone() })));\r\n  protected readonly role = computed(() => {\r\n    const t = this.tone();\r\n    return t === 'danger' || t === 'warning' ? 'alert' : 'status';\r\n  });\r\n  protected readonly iconName = computed(() => this.icon() ?? DEFAULT_ICON[this.tone()]);\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-avatar-group.mjs

@@ -0,0 +1,88 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, Component } from '@angular/core';
+import { MF_AVATAR_GROUP_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Avatar } from '@mesgflow/ui-kit/avatar';
+
+/** Avatar'ın KENDİ üç boyutuyla (bkz. avatar.ts `sizeClasses`) birebir eşleşir — "+N" göstergesi görsel olarak bir avatar GİBİ görünmeli. */
+const SIZE_CLASSES = {
+    sm: 'h-7 w-7 text-xs',
+    md: 'h-9 w-9 text-sm',
+    lg: 'h-12 w-12 text-base',
+};
+/**
+ * `<mf-avatar-group [items]="teamMembers" [max]="5" />` — üst üste binen
+ * (`-space-x-2` + `ring-2 ring-surface` her avatarı komşusundan ayırır)
+ * bir avatar yığını. `max`'ı aşan üyeler tek bir "+N" göstergesine
+ * TOPLANIR (tıklanabilir değil — sadece özet; tam listeyi göstermek
+ * çağıranın kendi tooltip/popover'ına bırakılır).
+ */
+class AvatarGroup {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    max = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    avatarGroupLabels = inject(MF_AVATAR_GROUP_LABELS);
+    effectiveOverflowLabel = computed(() => this.avatarGroupLabels().overflowAriaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOverflowLabel" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.items().slice(0, this.max()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    overflowCount = computed(() => Math.max(0, this.items().length - this.max()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
+    overflowClasses = computed(() => cn('inline-flex items-center justify-center rounded-full bg-surface-alt font-medium text-fg-muted ring-2 ring-surface', SIZE_CLASSES[this.size()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvatarGroup, isStandalone: true, selector: "mf-avatar-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center -space-x-2" }, exportAs: ["mfAvatarGroup"], ngImport: i0, template: `
+    @for (item of visible(); track item.name) {
+      <mf-avatar
+        [name]="item.name"
+        [src]="item.src ?? null"
+        [size]="size()"
+        class="ring-2 ring-surface"
+      />
+    }
+    @if (overflowCount() > 0) {
+      <span
+        [class]="overflowClasses()"
+        [attr.aria-label]="overflowCount() + ' ' + effectiveOverflowLabel()"
+      >
+        +{{ overflowCount() }}
+      </span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvatarGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-avatar-group',
+                    exportAs: 'mfAvatarGroup',
+                    imports: [Avatar],
+                    host: { class: 'flex items-center -space-x-2' },
+                    template: `
+    @for (item of visible(); track item.name) {
+      <mf-avatar
+        [name]="item.name"
+        [src]="item.src ?? null"
+        [size]="size()"
+        class="ring-2 ring-surface"
+      />
+    }
+    @if (overflowCount() > 0) {
+      <span
+        [class]="overflowClasses()"
+        [attr.aria-label]="overflowCount() + ' ' + effectiveOverflowLabel()"
+      >
+        +{{ overflowCount() }}
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarGroup };
+//# sourceMappingURL=mesgflow-ui-kit-avatar-group.mjs.map

package/fesm2022/mesgflow-ui-kit-avatar-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-avatar-group.mjs","sources":["../../../projects/ui-kit/avatar-group/avatar-group.ts","../../../projects/ui-kit/avatar-group/mesgflow-ui-kit-avatar-group.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\r\nimport { cn, MF_AVATAR_GROUP_LABELS } from '@mesgflow/ui-kit/core';\r\nimport { Avatar } from '@mesgflow/ui-kit/avatar';\r\n\r\nexport interface AvatarGroupItem {\r\n  name: string;\r\n  src?: string | null;\r\n}\r\n\r\n/** Avatar'ın KENDİ üç boyutuyla (bkz. avatar.ts `sizeClasses`) birebir eşleşir — \"+N\" göstergesi görsel olarak bir avatar GİBİ görünmeli. */\r\nconst SIZE_CLASSES: Record<'sm' | 'md' | 'lg', string> = {\r\n  sm: 'h-7 w-7 text-xs',\r\n  md: 'h-9 w-9 text-sm',\r\n  lg: 'h-12 w-12 text-base',\r\n};\r\n\r\n/**\r\n * `<mf-avatar-group [items]=\"teamMembers\" [max]=\"5\" />` — üst üste binen\r\n * (`-space-x-2` + `ring-2 ring-surface` her avatarı komşusundan ayırır)\r\n * bir avatar yığını. `max`'ı aşan üyeler tek bir \"+N\" göstergesine\r\n * TOPLANIR (tıklanabilir değil — sadece özet; tam listeyi göstermek\r\n * çağıranın kendi tooltip/popover'ına bırakılır).\r\n */\r\n@Component({\r\n  selector: 'mf-avatar-group',\r\n  exportAs: 'mfAvatarGroup',\r\n  imports: [Avatar],\r\n  host: { class: 'flex items-center -space-x-2' },\r\n  template: `\r\n    @for (item of visible(); track item.name) {\r\n      <mf-avatar\r\n        [name]=\"item.name\"\r\n        [src]=\"item.src ?? null\"\r\n        [size]=\"size()\"\r\n        class=\"ring-2 ring-surface\"\r\n      />\r\n    }\r\n    @if (overflowCount() > 0) {\r\n      <span\r\n        [class]=\"overflowClasses()\"\r\n        [attr.aria-label]=\"overflowCount() + ' ' + effectiveOverflowLabel()\"\r\n      >\r\n        +{{ overflowCount() }}\r\n      </span>\r\n    }\r\n  `,\r\n})\r\nexport class AvatarGroup {\r\n  readonly items = input.required<AvatarGroupItem[]>();\r\n  readonly max = input(5);\r\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\r\n\r\n  private readonly avatarGroupLabels = inject(MF_AVATAR_GROUP_LABELS);\r\n  protected readonly effectiveOverflowLabel = computed(\r\n    () => this.avatarGroupLabels().overflowAriaLabel,\r\n  );\r\n\r\n  protected readonly visible = computed(() => this.items().slice(0, this.max()));\r\n  protected readonly overflowCount = computed(() => Math.max(0, this.items().length - this.max()));\r\n\r\n  protected readonly overflowClasses = computed(() =>\r\n    cn(\r\n      'inline-flex items-center justify-center rounded-full bg-surface-alt font-medium text-fg-muted ring-2 ring-surface',\r\n      SIZE_CLASSES[this.size()],\r\n    ),\r\n  );\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AASA;AACA,MAAM,YAAY,GAAuC;AACvD,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,qBAAqB;CAC1B;AAED;;;;;;AAMG;MAyBU,WAAW,CAAA;IACb,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAqB;IAC3C,GAAG,GAAG,KAAK,CAAC,CAAC;4EAAC;IACd,IAAI,GAAG,KAAK,CAAqB,IAAI;6EAAC;AAE9B,IAAA,iBAAiB,GAAG,MAAM,CAAC,sBAAsB,CAAC;IAChD,sBAAsB,GAAG,QAAQ,CAClD,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC,iBAAiB;+FACjD;AAEkB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;gFAAC;IAC3D,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;sFAAC;AAE7E,IAAA,eAAe,GAAG,QAAQ,CAAC,MAC5C,EAAE,CACA,mHAAmH,EACnH,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAC1B;wFACF;uGAlBU,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,8BAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnBZ,CAAA;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAnBS,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAqBL,WAAW,EAAA,UAAA,EAAA,CAAA;kBAxBvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,eAAe;oBACzB,OAAO,EAAE,CAAC,MAAM,CAAC;AACjB,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE;AAC/C,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA;AACF,iBAAA;;;AC9CD;;AAEG;;"}