@mimi-ng/cli 0.3.0 → 0.4.0

package/dist/templates/blocks/pricing-01/pricing-01.html

@@ -0,0 +1,173 @@
+<div class="flex max-w-[620px] flex-col items-center gap-3 text-center">
+  <span mimiBadge variant="soft" tone="info" class="h-[26px] gap-1.5 px-3 text-[12.5px]">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <!-- Lucide sparkles (ISC) -->
+      <path
+        d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+      />
+      <path d="M20 2v4" />
+      <path d="M22 4h-4" />
+      <circle cx="4" cy="20" r="2" />
+    </svg>
+    14-day free trial on any plan
+  </span>
+  <h1 class="text-[32px] leading-[1.08] font-extrabold tracking-[-0.03em] text-balance md:text-5xl">
+    Plans that grow with you
+  </h1>
+  <p class="text-base leading-[1.55] text-pretty text-muted-foreground">
+    Pay only for the people who use it. Change or cancel whenever you want.
+  </p>
+
+  <!-- El fondo que se desliza es de Toggle Group (no se copia el marcado del diseño). -->
+  <mimi-toggle-group
+    aria-label="Billing period"
+    class="mt-1.5 grid grid-cols-[repeat(2,140px)] rounded-full [&_button]:rounded-full [&_[data-slot=indicator]]:rounded-full"
+    [value]="period()"
+    (valueChange)="setPeriod($event)"
+  >
+    <button mimiToggleGroupItem="monthly" class="h-9">Monthly</button>
+    <button mimiToggleGroupItem="yearly" class="h-9 gap-1.5">
+      Yearly
+      <!-- El ahorro, calculado con los precios de los planes. -->
+      @if (yearlySaving(); as saving) {
+        <span mimiBadge variant="soft" tone="success" class="h-5 px-[7px] text-[11px]">{{
+          saving
+        }}</span>
+      }
+    </button>
+  </mimi-toggle-group>
+</div>
+
+<div class="grid w-full max-w-[1080px] grid-cols-1 items-stretch gap-[18px] md:grid-cols-3">
+  @for (card of cards(); track card.plan.id) {
+    <!-- El destacado: un borde de 1,5px con un degradado de color, quieto (B.7-a). -->
+    <section
+      [attr.aria-labelledby]="id + '-' + card.plan.id"
+      [attr.data-featured]="card.plan.featured ? '' : null"
+      [class]="
+        card.plan.featured
+          ? 'relative mt-3 flex rounded-card bg-[image:conic-gradient(from_200deg,transparent_0deg_250deg,var(--mimi-info)_310deg,var(--mimi-success)_345deg,transparent_360deg),linear-gradient(var(--mimi-border),var(--mimi-border))] p-[1.5px] shadow-popover md:mt-0'
+          : 'relative flex rounded-card shadow-card'
+      "
+    >
+      @if (card.plan.featured) {
+        <span
+          mimiBadge
+          class="absolute -top-[13px] start-1/2 z-2 h-[26px] -translate-x-1/2 gap-[5px] px-3 text-xs whitespace-nowrap shadow-primary rtl:translate-x-1/2"
+        >
+          <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"
+            aria-hidden="true"
+          >
+            <!-- Lucide star (ISC) -->
+            <path
+              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+            />
+          </svg>
+          Most popular
+        </span>
+      }
+      <div
+        [class]="
+          card.plan.featured
+            ? 'flex flex-1 flex-col gap-[18px] rounded-[calc(var(--mimi-radius-card)-1.5px)] bg-card px-6 py-[26px]'
+            : 'flex flex-1 flex-col gap-[18px] rounded-card border bg-card px-6 py-[26px]'
+        "
+      >
+        <div class="flex flex-col gap-1.5">
+          <h2 [id]="id + '-' + card.plan.id" class="text-base font-bold">{{ card.plan.name }}</h2>
+          <p class="text-[13.5px] leading-[1.45] text-muted-foreground">
+            {{ card.plan.description }}
+          </p>
+        </div>
+        <div class="flex items-baseline gap-1.5">
+          <span
+            data-slot="price"
+            class="text-[40px] font-extrabold tracking-[-0.03em] tabular-nums"
+            >{{ card.price }}</span
+          >
+          <span class="text-[13.5px] text-muted-foreground">{{ card.unit }}</span>
+        </div>
+        <span
+          data-slot="note"
+          class="-mt-3 min-h-[18px] text-[12.5px] text-success-soft-foreground"
+          >{{ card.note }}</span
+        >
+        <button
+          mimiBtn
+          type="button"
+          class="h-[calc(var(--mimi-control-height,2.5rem)+4px)] text-[14.5px] font-semibold"
+          [variant]="card.plan.featured ? 'solid' : 'outline'"
+          [tone]="card.plan.featured ? 'primary' : 'secondary'"
+          (click)="planSelected.emit({ plan: card.plan, period: period() })"
+        >
+          {{ card.plan.cta }}
+        </button>
+        <div class="h-px bg-border"></div>
+        <ul class="flex flex-col gap-2.5">
+          @for (feature of card.plan.features; track feature.label) {
+            <li class="flex items-start gap-2.5 text-sm leading-[1.4]">
+              <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"
+                aria-hidden="true"
+                [class]="
+                  feature.included
+                    ? 'mt-px shrink-0 text-success-soft-foreground'
+                    : 'mt-px shrink-0 text-muted-foreground'
+                "
+              >
+                @if (feature.included) {
+                  <!-- Lucide check (ISC) -->
+                  <path d="M20 6 9 17l-5-5" />
+                } @else {
+                  <!-- Lucide minus (ISC) -->
+                  <path d="M5 12h14" />
+                }
+              </svg>
+              <span [class]="feature.included ? 'text-foreground' : 'text-muted-foreground'">
+                <span class="sr-only">{{ feature.included ? 'Included: ' : 'Not included: ' }}</span
+                >{{ feature.label }}
+              </span>
+            </li>
+          }
+        </ul>
+      </div>
+    </section>
+  }
+</div>
+
+<p class="text-center text-[13.5px] text-muted-foreground">
+  Prices in {{ currency() }}, taxes not included ·
+  <a
+    [href]="faqHref()"
+    class="rounded-sm font-semibold text-foreground underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+    >FAQ</a
+  >
+</p>

package/dist/templates/blocks/pricing-01/pricing-01.ts

@@ -0,0 +1,178 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  LOCALE_ID,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { MimiBadge } from '@/components/ui/badge';
+import { MimiButton } from '@/components/ui/button';
+import { MimiToggleGroupImports } from '@/components/ui/toggle-group';
+import { cn } from '@/components/ui/utils/cn';
+
+export type Pricing01Period = 'monthly' | 'yearly';
+
+export interface Pricing01Plan {
+  /** Identificador estable (sale en `planSelected`). */
+  id: string;
+  name: string;
+  description: string;
+  /** Precio por persona y mes, pagando mes a mes. `null`: «Custom» (sin precio). */
+  monthly: number | null;
+  /** Precio por persona y mes, pagando el año. `null`: «Custom». */
+  yearly: number | null;
+  /** El plan destacado («Most popular», borde de color). */
+  featured?: boolean;
+  /** El texto del botón. */
+  cta: string;
+  features: { label: string; included: boolean }[];
+}
+
+/** Lo que sale al elegir un plan. */
+export interface Pricing01Selection {
+  plan: Pricing01Plan;
+  period: Pricing01Period;
+}
+
+/** Los tres planes del diseño, para que la pantalla funcione sin datos. */
+export const PRICING_01_PLANS: Pricing01Plan[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: 'To start organizing your sales.',
+    monthly: 12,
+    yearly: 10,
+    cta: 'Start for free',
+    features: [
+      { label: 'Up to 5 people', included: true },
+      { label: 'Unlimited clients', included: true },
+      { label: 'Basic reports', included: true },
+      { label: 'Integrations', included: false },
+      { label: 'Priority support', included: false },
+    ],
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    description: 'For teams that sell every day.',
+    monthly: 24,
+    yearly: 20,
+    featured: true,
+    cta: 'Try it for 14 days',
+    features: [
+      { label: 'Up to 25 people', included: true },
+      { label: 'Unlimited clients', included: true },
+      { label: 'Advanced reports', included: true },
+      { label: 'CRM and ERP integrations', included: true },
+      { label: 'Priority support', included: false },
+    ],
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: 'Security and control for large teams.',
+    monthly: null,
+    yearly: null,
+    cta: 'Talk to sales',
+    features: [
+      { label: 'Unlimited people', included: true },
+      { label: 'SSO and audit log', included: true },
+      { label: 'Custom reports', included: true },
+      { label: 'Custom integrations', included: true },
+      { label: 'Account manager', included: true },
+    ],
+  },
+];
+
+let nextId = 0;
+
+/**
+ * pricing-01 (Block de Mimi): tres planes con un interruptor mensual/anual; el destacado con la
+ * insignia «Most popular» y un borde de color. Diseño: docs/design/Block pricing-01.dc.html.
+ *
+ * Los planes son datos (`plans`, con los del diseño por defecto) y los precios se escriben con
+ * `Intl.NumberFormat` (`currency` y `locale`). El borde del destacado es estático (B.7-a): el
+ * Border Beam que gira es de Mimi Effects (E.7).
+ *
+ * ```html
+ * <mimi-pricing-01 [plans]="plans" currency="EUR" [(period)]="period" (planSelected)="checkout($event)" />
+ * ```
+ */
+@Component({
+  selector: 'mimi-pricing-01',
+  imports: [MimiBadge, MimiButton, MimiToggleGroupImports],
+  templateUrl: './pricing-01.html',
+  host: {
+    '[class]': 'classes()',
+    '[attr.data-period]': 'period()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Pricing01 {
+  readonly plans = input<readonly Pricing01Plan[]>(PRICING_01_PLANS);
+  /** El periodo. Admite `[(period)]`. */
+  readonly period = model<Pricing01Period>('monthly');
+  /** Moneda de los precios (ISO 4217). */
+  readonly currency = input('USD');
+  /** Idioma de los números. Por defecto, el `LOCALE_ID` de la app. */
+  readonly locale = input<string | undefined>(undefined);
+  readonly faqHref = input('#');
+  readonly userClass = input('', { alias: 'class' });
+
+  /** El botón de un plan. */
+  readonly planSelected = output<Pricing01Selection>();
+
+  protected readonly id = `mimi-pricing-01-${nextId++}`;
+  private readonly appLocale = inject(LOCALE_ID);
+
+  private readonly money = computed(
+    () =>
+      new Intl.NumberFormat(this.locale() ?? this.appLocale, {
+        style: 'currency',
+        currency: this.currency(),
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 0,
+      }),
+  );
+
+  protected readonly cards = computed(() => {
+    const yearly = this.period() === 'yearly';
+    const money = this.money();
+    return this.plans().map((plan) => {
+      const amount = yearly ? plan.yearly : plan.monthly;
+      return {
+        plan,
+        price: amount === null ? 'Custom' : money.format(amount),
+        unit: amount === null ? '' : 'per seat / month',
+        note:
+          amount !== null && yearly ? `Billed yearly: ${money.format(amount * 12)} per seat` : '',
+      };
+    });
+  });
+
+  /**
+   * El ahorro del pago anual, calculado con los precios (no escrito a mano): el mayor de los
+   * planes con precio, redondeado («−17%» con 12/10 y 24/20). Sin ahorro, sin insignia.
+   */
+  protected readonly yearlySaving = computed(() => {
+    const savings = this.plans().flatMap(({ monthly, yearly }) =>
+      monthly && yearly !== null ? [Math.round((1 - yearly / monthly) * 100)] : [],
+    );
+    const best = Math.max(0, ...savings);
+    return best > 0 ? `−${best}%` : null;
+  });
+
+  protected readonly classes = computed(() =>
+    cn(
+      'flex min-h-svh w-full flex-col items-center gap-7 bg-background px-[18px] pt-9 pb-8 text-foreground md:px-10 md:py-14',
+      this.userClass(),
+    ),
+  );
+
+  protected setPeriod(value: unknown): void {
+    if (value === 'monthly' || value === 'yearly') this.period.set(value);
+  }
+}

package/dist/templates/blocks/settings-01/index.ts

@@ -0,0 +1 @@
+export * from './settings-01';