create-brainerce-store 1.61.0 → 1.63.0

package/templates/nextjs/designs/atelier/ui/shared/icons.tsx

@@ -1,276 +1,276 @@
-/**
- * Inline icon set — minimal 24px-grid stroke icons (lucide-style).
- * The project ships no icon dependency; every icon in the storefront comes
- * from here so sizing (16/20/24) and stroke weight stay consistent.
- * All icons are decorative by default (aria-hidden) — pair with sr-only text.
- */
-import * as React from 'react';
-
-export type IconProps = {
-  size?: 16 | 18 | 20 | 24 | 28 | 32 | 56;
-  className?: string;
-  /** stroke width — 1.75 default matches the light, boutique-grade look */
-  strokeWidth?: number;
-};
-
-function Base({
-  size = 20,
-  className,
-  strokeWidth = 1.75,
-  children,
-  fill = 'none',
-}: IconProps & { children: React.ReactNode; fill?: string }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={fill}
-      stroke="currentColor"
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      className={className}
-    >
-      {children}
-    </svg>
-  );
-}
-
-export function IconBag(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M6 7h12l1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H6.6a1.8 1.8 0 0 1-1.8-1.8L6 7Z" />
-      <path d="M9 10V6a3 3 0 0 1 6 0v4" />
-    </Base>
-  );
-}
-
-export function IconUser(p: IconProps) {
-  return (
-    <Base {...p}>
-      <circle cx="12" cy="8" r="3.5" />
-      <path d="M5 20c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5" />
-    </Base>
-  );
-}
-
-export function IconMenu(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 7h16M4 12h16M4 17h16" />
-    </Base>
-  );
-}
-
-export function IconX(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M6 6l12 12M18 6L6 18" />
-    </Base>
-  );
-}
-
-export function IconPlus(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 5v14M5 12h14" />
-    </Base>
-  );
-}
-
-export function IconMinus(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M5 12h14" />
-    </Base>
-  );
-}
-
-export function IconTrash(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13a1.5 1.5 0 0 0 1.5 1.3h7A1.5 1.5 0 0 0 17 20l1-13M9 7V5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5v2" />
-    </Base>
-  );
-}
-
-export function IconCheck(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M5 12.5 10 17.5 19 7" />
-    </Base>
-  );
-}
-
-export function IconStar({ filled = true, ...p }: IconProps & { filled?: boolean }) {
-  return (
-    <Base {...p} fill={filled ? 'currentColor' : 'none'} strokeWidth={filled ? 0 : 1.5}>
-      <path d="M12 3.2 14.7 8.7 20.8 9.6 16.4 13.9 17.4 20 12 17.1 6.6 20 7.6 13.9 3.2 9.6 9.3 8.7 12 3.2Z" />
-    </Base>
-  );
-}
-
-export function IconTruck(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M3 6.5h11v10H3zM14 10h3.5l3 3v3.5h-3" />
-      <circle cx="7" cy="17.5" r="1.8" />
-      <circle cx="17" cy="17.5" r="1.8" />
-    </Base>
-  );
-}
-
-export function IconShield(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 3.5 19 6v5.5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-2.5Z" />
-      <path d="m9 11.8 2.2 2.2L15.5 9.5" />
-    </Base>
-  );
-}
-
-export function IconBadgeCheck(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M8 3.5h8l4.5 4.5v8L16 20.5H8L3.5 16V8L8 3.5Z" />
-      <path d="m9 12 2.2 2.2L15.5 10" />
-    </Base>
-  );
-}
-
-export function IconReturn(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 9h11a5 5 0 0 1 0 10H8" />
-      <path d="M8 5 4 9l4 4" />
-    </Base>
-  );
-}
-
-export function IconChevronDown(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="m6 9 6 6 6-6" />
-    </Base>
-  );
-}
-
-/** Points toward the inline-end (reading direction). Add className="rtl-flip". */
-export function IconArrowEnd(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 12h16M14 6l6 6-6 6" />
-    </Base>
-  );
-}
-
-export function IconSparkle(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 4c.7 3.6 2.4 5.3 6 6-3.6.7-5.3 2.4-6 6-.7-3.6-2.4-5.3-6-6 3.6-.7 5.3-2.4 6-6Z" />
-      <path
-        d="M19 15.5c.3 1.5 1 2.2 2.5 2.5-1.5.3-2.2 1-2.5 2.5-.3-1.5-1-2.2-2.5-2.5 1.5-.3 2.2-1 2.5-2.5Z"
-        strokeWidth={1.4}
-      />
-    </Base>
-  );
-}
-
-export function IconQuote(p: IconProps) {
-  return (
-    <Base {...p} fill="currentColor" strokeWidth={0}>
-      <path d="M5 6.5A4.5 4.5 0 0 0 3 11v6.5h6.5V11H6a3 3 0 0 1 2.5-3V6.5H5Zm10 0A4.5 4.5 0 0 0 13 11v6.5h6.5V11H16a3 3 0 0 1 2.5-3V6.5H15Z" />
-    </Base>
-  );
-}
-
-export function IconMail(p: IconProps) {
-  return (
-    <Base {...p}>
-      <rect x="3" y="5.5" width="18" height="13" rx="2" />
-      <path d="m4 7.5 8 6 8-6" />
-    </Base>
-  );
-}
-
-export function IconClock(p: IconProps) {
-  return (
-    <Base {...p}>
-      <circle cx="12" cy="12" r="8.5" />
-      <path d="M12 7.5V12l3 2" />
-    </Base>
-  );
-}
-
-export function IconTag(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="m3.5 12.5 8-8H20v8.5l-8 8a1.7 1.7 0 0 1-2.4 0l-6.1-6.1a1.7 1.7 0 0 1 0-2.4Z" />
-      <circle cx="15.5" cy="8.5" r="1.4" />
-    </Base>
-  );
-}
-
-export function IconDownload(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14" />
-    </Base>
-  );
-}
-
-/** Social glyphs for the footer (filled, single-color). */
-export function IconSocial({ platform, ...p }: IconProps & { platform: string }) {
-  const key = platform.toLowerCase();
-  if (key.includes('instagram')) {
-    return (
-      <Base {...p} strokeWidth={1.6}>
-        <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
-        <circle cx="12" cy="12" r="4" />
-        <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
-      </Base>
-    );
-  }
-  if (key.includes('facebook')) {
-    return (
-      <Base {...p} fill="currentColor" strokeWidth={0}>
-        <path d="M13.5 21v-7h2.4l.4-3h-2.8V9.1c0-.9.3-1.5 1.6-1.5h1.3V4.9c-.2 0-1-.1-1.9-.1-1.9 0-3.3 1.2-3.3 3.4V11H8.5v3h2.7v7h2.3Z" />
-      </Base>
-    );
-  }
-  if (key.includes('tiktok')) {
-    return (
-      <Base {...p} fill="currentColor" strokeWidth={0}>
-        <path d="M16.6 3c.3 2 1.5 3.3 3.4 3.6v2.8c-1.3 0-2.5-.4-3.4-1.1v5.9a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3h2.8Z" />
-      </Base>
-    );
-  }
-  if (key.includes('whatsapp')) {
-    return (
-      <Base {...p} strokeWidth={1.6}>
-        <path d="M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5Z" />
-        <path
-          d="M9 8.8c-.3 2.5 3.7 6.5 6.2 6.2l.6-1.5-2-1-.8.6c-.8-.4-1.7-1.3-2.1-2.1l.6-.8-1-2-1.5.6Z"
-          strokeWidth={1.3}
-        />
-      </Base>
-    );
-  }
-  if (key.includes('youtube')) {
-    return (
-      <Base {...p} strokeWidth={1.6}>
-        <rect x="2.5" y="6" width="19" height="12" rx="3" />
-        <path d="m10 9.5 5 2.5-5 2.5v-5Z" fill="currentColor" stroke="none" />
-      </Base>
-    );
-  }
-  // Fallback: globe
-  return (
-    <Base {...p} strokeWidth={1.6}>
-      <circle cx="12" cy="12" r="8.5" />
-      <path d="M3.5 12h17M12 3.5c-4.7 4.7-4.7 12.3 0 17 4.7-4.7 4.7-12.3 0-17Z" />
-    </Base>
-  );
-}
+/**
+ * Inline icon set — minimal 24px-grid stroke icons (lucide-style).
+ * The project ships no icon dependency; every icon in the storefront comes
+ * from here so sizing (16/20/24) and stroke weight stay consistent.
+ * All icons are decorative by default (aria-hidden) — pair with sr-only text.
+ */
+import * as React from 'react';
+
+export type IconProps = {
+  size?: 16 | 18 | 20 | 24 | 28 | 32 | 56;
+  className?: string;
+  /** stroke width — 1.75 default matches the light, boutique-grade look */
+  strokeWidth?: number;
+};
+
+function Base({
+  size = 20,
+  className,
+  strokeWidth = 1.75,
+  children,
+  fill = 'none',
+}: IconProps & { children: React.ReactNode; fill?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function IconBag(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M6 7h12l1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H6.6a1.8 1.8 0 0 1-1.8-1.8L6 7Z" />
+      <path d="M9 10V6a3 3 0 0 1 6 0v4" />
+    </Base>
+  );
+}
+
+export function IconUser(p: IconProps) {
+  return (
+    <Base {...p}>
+      <circle cx="12" cy="8" r="3.5" />
+      <path d="M5 20c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5" />
+    </Base>
+  );
+}
+
+export function IconMenu(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 7h16M4 12h16M4 17h16" />
+    </Base>
+  );
+}
+
+export function IconX(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M6 6l12 12M18 6L6 18" />
+    </Base>
+  );
+}
+
+export function IconPlus(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 5v14M5 12h14" />
+    </Base>
+  );
+}
+
+export function IconMinus(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M5 12h14" />
+    </Base>
+  );
+}
+
+export function IconTrash(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13a1.5 1.5 0 0 0 1.5 1.3h7A1.5 1.5 0 0 0 17 20l1-13M9 7V5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5v2" />
+    </Base>
+  );
+}
+
+export function IconCheck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M5 12.5 10 17.5 19 7" />
+    </Base>
+  );
+}
+
+export function IconStar({ filled = true, ...p }: IconProps & { filled?: boolean }) {
+  return (
+    <Base {...p} fill={filled ? 'currentColor' : 'none'} strokeWidth={filled ? 0 : 1.5}>
+      <path d="M12 3.2 14.7 8.7 20.8 9.6 16.4 13.9 17.4 20 12 17.1 6.6 20 7.6 13.9 3.2 9.6 9.3 8.7 12 3.2Z" />
+    </Base>
+  );
+}
+
+export function IconTruck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M3 6.5h11v10H3zM14 10h3.5l3 3v3.5h-3" />
+      <circle cx="7" cy="17.5" r="1.8" />
+      <circle cx="17" cy="17.5" r="1.8" />
+    </Base>
+  );
+}
+
+export function IconShield(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 3.5 19 6v5.5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-2.5Z" />
+      <path d="m9 11.8 2.2 2.2L15.5 9.5" />
+    </Base>
+  );
+}
+
+export function IconBadgeCheck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M8 3.5h8l4.5 4.5v8L16 20.5H8L3.5 16V8L8 3.5Z" />
+      <path d="m9 12 2.2 2.2L15.5 10" />
+    </Base>
+  );
+}
+
+export function IconReturn(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 9h11a5 5 0 0 1 0 10H8" />
+      <path d="M8 5 4 9l4 4" />
+    </Base>
+  );
+}
+
+export function IconChevronDown(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="m6 9 6 6 6-6" />
+    </Base>
+  );
+}
+
+/** Points toward the inline-end (reading direction). Add className="rtl-flip". */
+export function IconArrowEnd(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 12h16M14 6l6 6-6 6" />
+    </Base>
+  );
+}
+
+export function IconSparkle(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 4c.7 3.6 2.4 5.3 6 6-3.6.7-5.3 2.4-6 6-.7-3.6-2.4-5.3-6-6 3.6-.7 5.3-2.4 6-6Z" />
+      <path
+        d="M19 15.5c.3 1.5 1 2.2 2.5 2.5-1.5.3-2.2 1-2.5 2.5-.3-1.5-1-2.2-2.5-2.5 1.5-.3 2.2-1 2.5-2.5Z"
+        strokeWidth={1.4}
+      />
+    </Base>
+  );
+}
+
+export function IconQuote(p: IconProps) {
+  return (
+    <Base {...p} fill="currentColor" strokeWidth={0}>
+      <path d="M5 6.5A4.5 4.5 0 0 0 3 11v6.5h6.5V11H6a3 3 0 0 1 2.5-3V6.5H5Zm10 0A4.5 4.5 0 0 0 13 11v6.5h6.5V11H16a3 3 0 0 1 2.5-3V6.5H15Z" />
+    </Base>
+  );
+}
+
+export function IconMail(p: IconProps) {
+  return (
+    <Base {...p}>
+      <rect x="3" y="5.5" width="18" height="13" rx="2" />
+      <path d="m4 7.5 8 6 8-6" />
+    </Base>
+  );
+}
+
+export function IconClock(p: IconProps) {
+  return (
+    <Base {...p}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 7.5V12l3 2" />
+    </Base>
+  );
+}
+
+export function IconTag(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="m3.5 12.5 8-8H20v8.5l-8 8a1.7 1.7 0 0 1-2.4 0l-6.1-6.1a1.7 1.7 0 0 1 0-2.4Z" />
+      <circle cx="15.5" cy="8.5" r="1.4" />
+    </Base>
+  );
+}
+
+export function IconDownload(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14" />
+    </Base>
+  );
+}
+
+/** Social glyphs for the footer (filled, single-color). */
+export function IconSocial({ platform, ...p }: IconProps & { platform: string }) {
+  const key = platform.toLowerCase();
+  if (key.includes('instagram')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
+        <circle cx="12" cy="12" r="4" />
+        <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
+      </Base>
+    );
+  }
+  if (key.includes('facebook')) {
+    return (
+      <Base {...p} fill="currentColor" strokeWidth={0}>
+        <path d="M13.5 21v-7h2.4l.4-3h-2.8V9.1c0-.9.3-1.5 1.6-1.5h1.3V4.9c-.2 0-1-.1-1.9-.1-1.9 0-3.3 1.2-3.3 3.4V11H8.5v3h2.7v7h2.3Z" />
+      </Base>
+    );
+  }
+  if (key.includes('tiktok')) {
+    return (
+      <Base {...p} fill="currentColor" strokeWidth={0}>
+        <path d="M16.6 3c.3 2 1.5 3.3 3.4 3.6v2.8c-1.3 0-2.5-.4-3.4-1.1v5.9a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3h2.8Z" />
+      </Base>
+    );
+  }
+  if (key.includes('whatsapp')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <path d="M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5Z" />
+        <path
+          d="M9 8.8c-.3 2.5 3.7 6.5 6.2 6.2l.6-1.5-2-1-.8.6c-.8-.4-1.7-1.3-2.1-2.1l.6-.8-1-2-1.5.6Z"
+          strokeWidth={1.3}
+        />
+      </Base>
+    );
+  }
+  if (key.includes('youtube')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <rect x="2.5" y="6" width="19" height="12" rx="3" />
+        <path d="m10 9.5 5 2.5-5 2.5v-5Z" fill="currentColor" stroke="none" />
+      </Base>
+    );
+  }
+  // Fallback: globe
+  return (
+    <Base {...p} strokeWidth={1.6}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M3.5 12h17M12 3.5c-4.7 4.7-4.7 12.3 0 17 4.7-4.7 4.7-12.3 0-17Z" />
+    </Base>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/loading-spinner.tsx

@@ -1,63 +1,63 @@
-'use client';
-
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-}
-
-const RING_SIZE: Record<'sm' | 'md', string> = {
-  sm: 'h-4 w-4 border-2',
-  md: 'h-7 w-7 border-2',
-};
-
-/**
- * Loading indicator. `sm`/`md` stay quiet ring spinners for buttons and
- * inline waits; `lg` (the full-page state) is the Atelier breathing mark —
- * a soft pulsing core inside a thin rotating ring band, no niche-specific
- * iconography, plus the visible loading line. Static under
- * prefers-reduced-motion. Keeps `role="status"` and the sm/md/lg `size`
- * contract.
- */
-export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
-  const t = useTranslations('common');
-
-  if (size === 'lg') {
-    return (
-      <span
-        role="status"
-        data-size={size}
-        className={cn(
-          'flex min-h-[40vh] w-full flex-col items-center justify-center gap-4',
-          className
-        )}
-      >
-        <span aria-hidden="true" className="loader-ring">
-          <span className="loader-ring-core" />
-        </span>
-        <span className="loader-text font-display text-muted-foreground text-sm italic">
-          {t('loading')}
-        </span>
-      </span>
-    );
-  }
-
-  return (
-    <span
-      role="status"
-      data-size={size}
-      className={cn('inline-flex items-center justify-center', className)}
-    >
-      <span
-        aria-hidden="true"
-        className={cn(
-          'spin border-primary/25 border-t-primary inline-block rounded-full',
-          RING_SIZE[size]
-        )}
-      />
-      <span className="sr-only">{t('loading')}</span>
-    </span>
-  );
-}
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const RING_SIZE: Record<'sm' | 'md', string> = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-7 w-7 border-2',
+};
+
+/**
+ * Loading indicator. `sm`/`md` stay quiet ring spinners for buttons and
+ * inline waits; `lg` (the full-page state) is the Atelier breathing mark —
+ * a soft pulsing core inside a thin rotating ring band, no niche-specific
+ * iconography, plus the visible loading line. Static under
+ * prefers-reduced-motion. Keeps `role="status"` and the sm/md/lg `size`
+ * contract.
+ */
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const t = useTranslations('common');
+
+  if (size === 'lg') {
+    return (
+      <span
+        role="status"
+        data-size={size}
+        className={cn(
+          'flex min-h-[40vh] w-full flex-col items-center justify-center gap-4',
+          className
+        )}
+      >
+        <span aria-hidden="true" className="loader-ring">
+          <span className="loader-ring-core" />
+        </span>
+        <span className="loader-text font-display text-muted-foreground text-sm italic">
+          {t('loading')}
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      role="status"
+      data-size={size}
+      className={cn('inline-flex items-center justify-center', className)}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'spin border-primary/25 border-t-primary inline-block rounded-full',
+          RING_SIZE[size]
+        )}
+      />
+      <span className="sr-only">{t('loading')}</span>
+    </span>
+  );
+}