@beshkari/mb-ui 0.5.0-alpha.1

package/lib/radio/mb-radio-group.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MbSize } from '../tokens/mb-ui-config.token';
+import * as i0 from "@angular/core";
+export interface MbRadioOption<T = unknown> {
+    label: string;
+    value: T;
+    hint?: string;
+    disabled?: boolean;
+}
+export declare class MbRadioGroupComponent<T = unknown> implements ControlValueAccessor {
+    options: MbRadioOption<T>[];
+    name: string;
+    size: MbSize;
+    direction: 'horizontal' | 'vertical';
+    disabled: boolean;
+    valueChange: EventEmitter<T>;
+    hostClass: string;
+    value: T | null;
+    private onChange;
+    private onTouched;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    choose(option: MbRadioOption<T>): void;
+    trackByValue(index: number): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbRadioGroupComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbRadioGroupComponent<any>, "mb-radio-group", never, { "options": { "alias": "options"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/lib/select/mb-select.component.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MbSize } from '../tokens/mb-ui-config.token';
+import * as i0 from "@angular/core";
+export interface MbSelectOption<T = unknown> {
+    label: string;
+    value: T;
+    disabled?: boolean;
+}
+export declare class MbSelectComponent<T = unknown> implements ControlValueAccessor {
+    private readonly messages;
+    options: MbSelectOption<T>[];
+    placeholder?: string;
+    size: MbSize;
+    disabled: boolean;
+    invalid: boolean;
+    valueChange: EventEmitter<T>;
+    value: T | null;
+    get effectivePlaceholder(): string;
+    private onChange;
+    private onTouched;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    compareByValue: (a: T | null, b: T | null) => boolean;
+    handleChange(value: T | null): void;
+    blur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbSelectComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbSelectComponent<any>, "mb-select", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/lib/skeleton/mb-skeleton.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class MbSkeletonComponent {
+    width: string;
+    height: string;
+    radius: string;
+    hostClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbSkeletonComponent, "mb-skeleton", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "radius": { "alias": "radius"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/spinner/mb-spinner.component.d.ts

@@ -0,0 +1,9 @@
+import { MbSize } from '../tokens/mb-ui-config.token';
+import * as i0 from "@angular/core";
+export declare class MbSpinnerComponent {
+    size: MbSize;
+    label: string;
+    hostClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbSpinnerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbSpinnerComponent, "mb-spinner", never, { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/switch/mb-switch.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MbSize } from '../tokens/mb-ui-config.token';
+import * as i0 from "@angular/core";
+export declare class MbSwitchComponent implements ControlValueAccessor {
+    label: string;
+    hint: string;
+    size: MbSize;
+    disabled: boolean;
+    checkedChange: EventEmitter<boolean>;
+    hostClass: string;
+    checked: boolean;
+    private onChange;
+    private onTouched;
+    writeValue(value: boolean | null): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbSwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbSwitchComponent, "mb-switch", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+}

package/lib/tabs/mb-tabs.component.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MbTabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    badge?: string | number;
+}
+export declare class MbTabsComponent {
+    tabs: MbTabItem[];
+    activeId: string;
+    variant: 'line' | 'pills';
+    activeIdChange: EventEmitter<string>;
+    hostClass: string;
+    select(tab: MbTabItem): void;
+    trackById(_: number, item: MbTabItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbTabsComponent, "mb-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "activeIdChange": "activeIdChange"; }, never, never, true, never>;
+}

package/lib/textarea/mb-textarea.component.d.ts

@@ -0,0 +1,29 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MbSize } from '../tokens/mb-ui-config.token';
+import * as i0 from "@angular/core";
+export declare class MbTextareaComponent implements ControlValueAccessor {
+    placeholder: string;
+    rows: number;
+    size: MbSize;
+    disabled: boolean;
+    readonly: boolean;
+    invalid: boolean;
+    autoResize: boolean;
+    maxLength?: number;
+    valueChange: EventEmitter<string>;
+    textarea?: ElementRef<HTMLTextAreaElement>;
+    hostClass: string;
+    value: string;
+    private onChange;
+    private onTouched;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInput(event: Event): void;
+    blur(): void;
+    private resize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbTextareaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbTextareaComponent, "mb-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/lib/toast/mb-toast-container.component.d.ts

@@ -0,0 +1,10 @@
+import { MbToastService } from './mb-toast.service';
+import * as i0 from "@angular/core";
+export declare class MbToastContainerComponent {
+    readonly toastService: MbToastService;
+    readonly messages: import("@beshkari/mb-ui").MbUiMessages;
+    readonly toasts$: any;
+    constructor(toastService: MbToastService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbToastContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MbToastContainerComponent, "mb-toast-container", never, {}, {}, never, never, true, never>;
+}

package/lib/toast/mb-toast.service.d.ts

@@ -0,0 +1,15 @@
+import { MbToast } from './mb-toast.types';
+import * as i0 from "@angular/core";
+export declare class MbToastService {
+    private readonly toastsSubject;
+    readonly toasts$: import("rxjs").Observable<MbToast[]>;
+    show(message: string, options?: Partial<Omit<MbToast, 'id' | 'message'>>): string;
+    success(message: string, title?: string): string;
+    info(message: string, title?: string): string;
+    warning(message: string, title?: string): string;
+    danger(message: string, title?: string): string;
+    dismiss(id: string): void;
+    clear(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MbToastService>;
+}

package/lib/toast/mb-toast.types.d.ts

@@ -0,0 +1,8 @@
+export type MbToastVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface MbToast {
+    id: string;
+    title?: string;
+    message: string;
+    variant: MbToastVariant;
+    duration: number;
+}

package/lib/tokens/mb-ui-config.token.d.ts

@@ -0,0 +1,12 @@
+import { InjectionToken } from '@angular/core';
+import { MbUiLocale } from '../i18n/mb-ui-locale';
+export type MbDirection = 'ltr' | 'rtl';
+export type MbSize = 'sm' | 'md' | 'lg';
+export type MbDensity = 'compact' | 'comfortable' | 'spacious';
+export interface MbUiConfig {
+    direction: MbDirection;
+    density: MbDensity;
+    locale: MbUiLocale;
+}
+export declare const MB_UI_DEFAULT_CONFIG: MbUiConfig;
+export declare const MB_UI_CONFIG: InjectionToken<MbUiConfig>;

package/lib/tooltip/mb-tooltip.directive.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MbTooltipDirective {
+    private readonly elementRef;
+    private readonly renderer;
+    text: string;
+    private tooltip?;
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
+    show(): void;
+    hide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MbTooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MbTooltipDirective, "[mbTooltip]", never, { "text": { "alias": "mbTooltip"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/utils/coerce.d.ts

@@ -0,0 +1,3 @@
+export declare function coerceBooleanProperty(value: unknown): boolean;
+export declare function isNil(value: unknown): value is null | undefined;
+export declare function normalizeText(value: unknown): string;

package/lib/utils/mb-jalali-date.d.ts

@@ -0,0 +1,18 @@
+/** Lightweight Jalali (Persian) calendar conversion utilities. */
+export interface MbJalaliDate {
+    year: number;
+    month: number;
+    day: number;
+}
+export interface MbGregorianDate {
+    year: number;
+    month: number;
+    day: number;
+}
+export declare const MB_JALALI_MONTH_NAMES: string[];
+export declare function mbGregorianToJalali(date: MbGregorianDate): MbJalaliDate;
+export declare function mbJalaliToGregorian(date: MbJalaliDate): MbGregorianDate;
+export declare function mbParseIsoDate(value: string): MbGregorianDate | null;
+export declare function mbToIsoDate(date: MbGregorianDate): string;
+export declare function mbJalaliMonthLength(year: number, month: number): number;
+export declare function mbFormatJalali(date: MbJalaliDate, separator?: string): string;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@beshkari/mb-ui",
+  "version": "0.5.0-alpha.1",
+  "description": "A modern Angular UI library for enterprise/admin projects with English and Persian (RTL) support.",
+  "author": "Mohammad Beshkari",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.scss"
+  ],
+  "keywords": [
+    "angular",
+    "ui",
+    "component-library",
+    "rtl",
+    "design-system",
+    "grid",
+    "enterprise"
+  ],
+  "peerDependencies": {
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  },
+  "exports": {
+    "./theme": {
+      "sass": "./theme/mb-ui.scss"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/beshkari-mb-ui.mjs",
+      "esm": "./esm2022/beshkari-mb-ui.mjs",
+      "default": "./fesm2022/beshkari-mb-ui.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/beshkari-mb-ui.mjs",
+  "typings": "index.d.ts"
+}

package/public-api.d.ts

@@ -0,0 +1,55 @@
+export * from './lib/tokens/mb-ui-config.token';
+export * from './lib/i18n/mb-ui-locale';
+export * from './lib/i18n/mb-ui-messages.types';
+export * from './lib/i18n/mb-ui-messages';
+export * from './lib/i18n/mb-ui-messages-fa';
+export * from './lib/i18n/mb-ui-messages-en';
+export * from './lib/i18n/provide-mb-ui';
+export * from './lib/utils/coerce';
+export * from './lib/button/mb-button.component';
+export * from './lib/input/mb-input.component';
+export * from './lib/form-field/mb-form-field.component';
+export * from './lib/select/mb-select.component';
+export * from './lib/combobox/mb-combobox.component';
+export * from './lib/grid/mb-grid.component';
+export * from './lib/grid/mb-grid.types';
+export * from './lib/grid/mb-grid-data';
+export * from './lib/grid/mb-grid-export';
+export * from './lib/grid/mb-grid-state.service';
+export * from './lib/grid/mb-grid-template.directive';
+export * from './lib/grid/mb-grid-messages';
+export * from './lib/grid/mb-grid-state-adapter';
+export * from './lib/dialog/mb-dialog.tokens';
+export * from './lib/dialog/mb-dialog-ref';
+export * from './lib/dialog/mb-dialog-container.component';
+export * from './lib/dialog/mb-dialog.service';
+export * from './lib/dialog/mb-dialog.component';
+export * from './lib/utils/mb-jalali-date';
+export * from './lib/toast/mb-toast.types';
+export * from './lib/toast/mb-toast.service';
+export * from './lib/toast/mb-toast-container.component';
+export * from './lib/checkbox/mb-checkbox.component';
+export * from './lib/switch/mb-switch.component';
+export * from './lib/radio/mb-radio-group.component';
+export * from './lib/textarea/mb-textarea.component';
+export * from './lib/datepicker/mb-datepicker.component';
+export * from './lib/badge/mb-badge.component';
+export * from './lib/chip/mb-chip.component';
+export * from './lib/avatar/mb-avatar.component';
+export * from './lib/card/mb-card.component';
+export * from './lib/alert/mb-alert.component';
+export * from './lib/spinner/mb-spinner.component';
+export * from './lib/skeleton/mb-skeleton.component';
+export * from './lib/progress/mb-progress.component';
+export * from './lib/empty/mb-empty.component';
+export * from './lib/divider/mb-divider.component';
+export * from './lib/breadcrumb/mb-breadcrumb.component';
+export * from './lib/tabs/mb-tabs.component';
+export * from './lib/accordion/mb-accordion.component';
+export * from './lib/pagination/mb-pagination.component';
+export * from './lib/drawer/mb-drawer.component';
+export * from './lib/dropdown/mb-dropdown.component';
+export * from './lib/tooltip/mb-tooltip.directive';
+export * from './lib/confirm/mb-confirm.types';
+export * from './lib/confirm/mb-confirm-dialog.component';
+export * from './lib/confirm/mb-confirm.service';

package/theme/_components.scss

@@ -0,0 +1,19 @@
+.mb-tooltip-panel {
+  position: absolute;
+  z-index: 1200;
+  max-inline-size: 18rem;
+  padding: .42rem .6rem;
+  border-radius: var(--mb-radius-sm);
+  background: var(--mb-color-text);
+  color: var(--mb-color-bg);
+  font-size: .78rem;
+  box-shadow: var(--mb-shadow-md);
+  pointer-events: none;
+}
+
+.mb-stack { display: grid; gap: var(--mb-stack-gap, 1rem); }
+.mb-inline { display: flex; gap: var(--mb-inline-gap, .75rem); align-items: center; flex-wrap: wrap; }
+.mb-surface { background: var(--mb-color-surface); border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-lg); }
+.mb-muted { color: var(--mb-color-muted); }
+.mb-rtl { direction: rtl; }
+.mb-ltr { direction: ltr; }

package/theme/_dark.scss

@@ -0,0 +1 @@
+.mb-theme-dark,[data-mb-theme='dark']{--mb-color-bg:#020617;--mb-color-surface:#0f172a;--mb-color-surface-muted:#111827;--mb-color-border:#334155;--mb-color-text:#e5e7eb;--mb-color-muted:#94a3b8;--mb-color-primary:#60a5fa;--mb-color-primary-contrast:#0f172a;--mb-color-danger:#f87171;--mb-color-success:#34d399;--mb-color-warning:#fbbf24;color-scheme:dark}

package/theme/_density.scss

@@ -0,0 +1 @@
+.mb-density-compact,[data-mb-density='compact']{--mb-control-height-sm:1.75rem;--mb-control-height-md:2rem;--mb-control-height-lg:2.4rem;--mb-grid-row-height:2.1rem}.mb-density-comfortable,[data-mb-density='comfortable']{--mb-control-height-sm:2rem;--mb-control-height-md:2.5rem;--mb-control-height-lg:3rem;--mb-grid-row-height:2.7rem}.mb-density-spacious,[data-mb-density='spacious']{--mb-control-height-sm:2.5rem;--mb-control-height-md:3rem;--mb-control-height-lg:3.5rem;--mb-grid-row-height:3.25rem}

package/theme/_tokens.scss

@@ -0,0 +1,57 @@
+:root,
+.mb-theme-light {
+  --mb-color-primary: #2563eb;
+  --mb-color-primary-hover: #1d4ed8;
+  --mb-color-primary-soft: #dbeafe;
+  --mb-color-danger: #dc2626;
+  --mb-color-danger-soft: #fee2e2;
+  --mb-color-success: #16a34a;
+  --mb-color-success-soft: #dcfce7;
+  --mb-color-warning: #d97706;
+  --mb-color-warning-soft: #fef3c7;
+
+  --mb-color-bg: #ffffff;
+  --mb-color-surface: #f8fafc;
+  --mb-color-surface-elevated: #ffffff;
+  --mb-color-border: #e2e8f0;
+  --mb-color-border-strong: #cbd5e1;
+  --mb-color-text: #0f172a;
+  --mb-color-muted: #64748b;
+  --mb-color-disabled: #94a3b8;
+
+  --mb-radius-xs: 4px;
+  --mb-radius-sm: 6px;
+  --mb-radius-md: 10px;
+  --mb-radius-lg: 14px;
+  --mb-radius-xl: 18px;
+
+  --mb-shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
+  --mb-shadow-md: 0 12px 28px rgb(15 23 42 / 12%);
+  --mb-shadow-lg: 0 22px 60px rgb(15 23 42 / 18%);
+
+  --mb-font-family: inherit;
+  --mb-transition-fast: 140ms ease;
+  --mb-transition-normal: 220ms ease;
+  --mb-focus-ring: 0 0 0 3px rgb(37 99 235 / 24%);
+}
+
+.mb-theme-dark {
+  --mb-color-primary: #60a5fa;
+  --mb-color-primary-hover: #93c5fd;
+  --mb-color-primary-soft: #172554;
+  --mb-color-danger: #f87171;
+  --mb-color-danger-soft: #450a0a;
+  --mb-color-success: #4ade80;
+  --mb-color-success-soft: #052e16;
+  --mb-color-warning: #fbbf24;
+  --mb-color-warning-soft: #451a03;
+
+  --mb-color-bg: #020617;
+  --mb-color-surface: #0f172a;
+  --mb-color-surface-elevated: #111827;
+  --mb-color-border: #334155;
+  --mb-color-border-strong: #475569;
+  --mb-color-text: #f8fafc;
+  --mb-color-muted: #cbd5e1;
+  --mb-color-disabled: #64748b;
+}

package/theme/mb-ui.scss

@@ -0,0 +1,28 @@
+@use './tokens';
+@use './components';
+
+* {
+  box-sizing: border-box;
+}
+
+.mb-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.mb-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(15 23 42 / 48%);
+  backdrop-filter: blur(2px);
+}
+
+@use './dark';
+@use './density';