@arroyavecommerce/theme-kinetic 0.2.0

package/src/icons/index.ts

@@ -0,0 +1,136 @@
+import type { FC } from "react"
+import type { IconProps } from "./svg-base"
+import {
+  AddiIcon,
+  AmexIcon,
+  ApplepayIcon,
+  BancolombiaIcon,
+  BitcoinIcon,
+  DaviplataIcon,
+  DinersIcon,
+  DiscoverIcon,
+  EfectivoIcon,
+  EfectyIcon,
+  GooglepayIcon,
+  MaestroIcon,
+  MastercardIcon,
+  MercadopagoIcon,
+  NequiIcon,
+  PaypalIcon,
+  PseIcon,
+  VisaIcon,
+} from "./payment-icons"
+import {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedinIcon,
+  PinterestIcon,
+  ThreadsIcon,
+  TiktokIcon,
+  WhatsappIcon,
+  XIcon,
+  YoutubeIcon,
+} from "./social-icons"
+
+export type { IconProps }
+
+export type PaymentKey =
+  | "visa"
+  | "mastercard"
+  | "amex"
+  | "diners"
+  | "pse"
+  | "nequi"
+  | "daviplata"
+  | "bancolombia"
+  | "efecty"
+  | "addi"
+  | "mercadopago"
+  | "paypal"
+  | "efectivo"
+  | "applepay"
+  | "googlepay"
+  | "maestro"
+  | "discover"
+  | "bitcoin"
+
+export type SocialKey =
+  | "instagram"
+  | "tiktok"
+  | "whatsapp"
+  | "x"
+  | "facebook"
+  | "youtube"
+  | "threads"
+  | "pinterest"
+  | "linkedin"
+
+export type IconEntry = { label: string; Icon: FC<IconProps> }
+
+/** Registro tipado de iconos de medios de pago. */
+export const PAYMENT_ICONS: Record<PaymentKey, IconEntry> = {
+  visa: { label: "Visa", Icon: VisaIcon },
+  mastercard: { label: "Mastercard", Icon: MastercardIcon },
+  amex: { label: "American Express", Icon: AmexIcon },
+  diners: { label: "Diners Club", Icon: DinersIcon },
+  pse: { label: "PSE", Icon: PseIcon },
+  nequi: { label: "Nequi", Icon: NequiIcon },
+  daviplata: { label: "DaviPlata", Icon: DaviplataIcon },
+  bancolombia: { label: "Bancolombia", Icon: BancolombiaIcon },
+  efecty: { label: "Efecty", Icon: EfectyIcon },
+  addi: { label: "Addi", Icon: AddiIcon },
+  mercadopago: { label: "Mercado Pago", Icon: MercadopagoIcon },
+  paypal: { label: "PayPal", Icon: PaypalIcon },
+  efectivo: { label: "Efectivo", Icon: EfectivoIcon },
+  applepay: { label: "Apple Pay", Icon: ApplepayIcon },
+  googlepay: { label: "Google Pay", Icon: GooglepayIcon },
+  maestro: { label: "Maestro", Icon: MaestroIcon },
+  discover: { label: "Discover", Icon: DiscoverIcon },
+  bitcoin: { label: "Bitcoin", Icon: BitcoinIcon },
+}
+
+/** Registro tipado de iconos de redes sociales. */
+export const SOCIAL_ICONS: Record<SocialKey, IconEntry> = {
+  instagram: { label: "Instagram", Icon: InstagramIcon },
+  tiktok: { label: "TikTok", Icon: TiktokIcon },
+  whatsapp: { label: "WhatsApp", Icon: WhatsappIcon },
+  x: { label: "X", Icon: XIcon },
+  facebook: { label: "Facebook", Icon: FacebookIcon },
+  youtube: { label: "YouTube", Icon: YoutubeIcon },
+  threads: { label: "Threads", Icon: ThreadsIcon },
+  pinterest: { label: "Pinterest", Icon: PinterestIcon },
+  linkedin: { label: "LinkedIn", Icon: LinkedinIcon },
+}
+
+export {
+  AddiIcon,
+  AmexIcon,
+  ApplepayIcon,
+  BancolombiaIcon,
+  BitcoinIcon,
+  DaviplataIcon,
+  DinersIcon,
+  DiscoverIcon,
+  EfectivoIcon,
+  EfectyIcon,
+  GooglepayIcon,
+  MaestroIcon,
+  MastercardIcon,
+  MercadopagoIcon,
+  NequiIcon,
+  PaypalIcon,
+  PseIcon,
+  VisaIcon,
+} from "./payment-icons"
+
+export {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedinIcon,
+  PinterestIcon,
+  ThreadsIcon,
+  TiktokIcon,
+  WhatsappIcon,
+  XIcon,
+  YoutubeIcon,
+} from "./social-icons"

package/src/icons/payment-icons.tsx

@@ -0,0 +1,241 @@
+import { Svg, type IconProps } from "./svg-base"
+
+/**
+ * Iconos de medios de pago — marcas reconocibles y simplificadas, legibles a
+ * ~20–30px de alto. Los colores de marca viven en elementos con `data-brand`
+ * para permitir el tintado monocromo por CSS (ver `svg-base.tsx`). Los huecos
+ * blancos (negativo del logo) NO llevan `data-brand`.
+ *
+ * No son logos pixel-perfect: priorizan legibilidad y reconocimiento.
+ */
+
+/** Pila de fuentes sans para wordmarks; bold para máxima legibilidad en chico. */
+const SANS = "'Helvetica Neue', Arial, sans-serif"
+
+/** Wordmark reutilizable centrado en un badge rectangular. */
+function Wordmark({
+  texto,
+  color,
+  props,
+  italic,
+  weight = 800,
+  letterSpacing = 0,
+  fontSize = 15,
+}: {
+  texto: string
+  color: string
+  props: IconProps
+  italic?: boolean
+  weight?: number
+  letterSpacing?: number
+  fontSize?: number
+}) {
+  return (
+    <Svg viewBox="0 0 64 24" {...props}>
+      <text
+        data-brand
+        x="32"
+        y="17"
+        textAnchor="middle"
+        fontFamily={SANS}
+        fontSize={fontSize}
+        fontWeight={weight}
+        fontStyle={italic ? "italic" : undefined}
+        letterSpacing={letterSpacing}
+        fill={color}
+      >
+        {texto}
+      </text>
+    </Svg>
+  )
+}
+
+export const VisaIcon = (props: IconProps) => (
+  <Wordmark texto="VISA" color="#1A1F71" italic letterSpacing={1} props={props} />
+)
+
+export const MastercardIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <circle data-brand cx="16" cy="12" r="9" fill="#EB001B" />
+    <circle data-brand cx="24" cy="12" r="9" fill="#F79E1B" fillOpacity="0.9" />
+    {/* Solape central: naranja translúcido sobre rojo insinúa el ámbar Mastercard */}
+    <path data-brand d="M20 5.2a9 9 0 0 0 0 13.6 9 9 0 0 0 0-13.6z" fill="#FF5F00" />
+  </Svg>
+)
+
+export const AmexIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <rect data-brand x="1" y="1" width="38" height="22" rx="3" fill="#2E77BB" />
+    <text
+      x="20"
+      y="16"
+      textAnchor="middle"
+      fontFamily={SANS}
+      fontSize="10"
+      fontWeight="800"
+      letterSpacing="0.5"
+      fill="#FFFFFF"
+    >
+      AMEX
+    </text>
+  </Svg>
+)
+
+export const DinersIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <circle data-brand cx="20" cy="12" r="10" fill="#0079BE" />
+    <circle cx="20" cy="12" r="6.5" fill="#FFFFFF" />
+    <circle data-brand cx="20" cy="12" r="4" fill="#0079BE" />
+  </Svg>
+)
+
+export const PseIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <rect data-brand x="1" y="1" width="38" height="22" rx="3" fill="#00579F" />
+    <text
+      x="20"
+      y="16"
+      textAnchor="middle"
+      fontFamily={SANS}
+      fontSize="11"
+      fontWeight="800"
+      letterSpacing="1"
+      fill="#FFFFFF"
+    >
+      PSE
+    </text>
+  </Svg>
+)
+
+export const NequiIcon = (props: IconProps) => (
+  <Wordmark texto="Nequi" color="#DA0081" weight={800} fontSize={14} props={props} />
+)
+
+export const DaviplataIcon = (props: IconProps) => (
+  <Wordmark texto="DaviPlata" color="#ED1C27" weight={800} fontSize={11} props={props} />
+)
+
+export const BancolombiaIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 64 24" {...props}>
+    <rect data-brand x="4" y="7" width="10" height="10" rx="1.5" fill="#FDDA24" />
+    <path data-brand d="M6.5 12h5M9 9.5v5" stroke="#2C2A29" strokeWidth="1.6" />
+    <text
+      data-brand
+      x="18"
+      y="16"
+      fontFamily={SANS}
+      fontSize="9"
+      fontWeight="800"
+      fill="#2C2A29"
+    >
+      Bancolombia
+    </text>
+  </Svg>
+)
+
+export const EfectyIcon = (props: IconProps) => (
+  <Wordmark texto="Efecty" color="#8DC63F" weight={800} fontSize={13} props={props} />
+)
+
+export const AddiIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <rect data-brand x="1" y="1" width="38" height="22" rx="6" fill="#161615" />
+    <text
+      x="20"
+      y="16"
+      textAnchor="middle"
+      fontFamily={SANS}
+      fontSize="11"
+      fontWeight="800"
+      letterSpacing="0.5"
+      fill="#C6F24E"
+    >
+      addi
+    </text>
+  </Svg>
+)
+
+export const MercadopagoIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <ellipse data-brand cx="20" cy="12" rx="18" ry="10" fill="#009EE3" />
+    {/* Apretón de manos simplificado en blanco (negativo del óvalo celeste) */}
+    <path
+      d="M9 12.5c2.2-2.2 4-2.4 6-1 1.6-1 3-.9 4.4.2l3.2 2.6c.7.6.2 1.7-.7 1.5l-2-.5 1 1c.7.7-.3 1.8-1.1 1.2l-1-.8.4.7c.5.8-.6 1.6-1.3.9l-1.2-1.1c-1.8 1-3.6.7-5.2-.7L9 15.5a1.8 1.8 0 0 1 0-3z"
+      fill="#FFFFFF"
+    />
+    <circle cx="27" cy="9.5" r="1.6" fill="#FFE600" />
+  </Svg>
+)
+
+export const PaypalIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 64 24" {...props}>
+    <text x="6" y="17" fontFamily={SANS} fontSize="15" fontWeight="800" fontStyle="italic">
+      <tspan data-brand fill="#003087">Pay</tspan>
+      <tspan data-brand fill="#009CDE">Pal</tspan>
+    </text>
+  </Svg>
+)
+
+export const EfectivoIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <rect data-brand x="2" y="5" width="36" height="14" rx="2" fill="#2E7D32" />
+    <rect x="5" y="8" width="30" height="8" rx="1" fill="none" stroke="#FFFFFF" strokeWidth="1" />
+    <circle cx="20" cy="12" r="3.2" fill="none" stroke="#FFFFFF" strokeWidth="1.2" />
+    <text x="20" y="14.5" textAnchor="middle" fontFamily={SANS} fontSize="6" fontWeight="800" fill="#FFFFFF">
+      $
+    </text>
+  </Svg>
+)
+
+export const ApplepayIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 48 24" {...props}>
+    {/* Manzana simplificada */}
+    <path
+      data-brand
+      d="M12.6 8.2c-.5.6-1.3 1-2 .95-.1-.8.28-1.65.73-2.18.5-.6 1.35-1 2.05-1.03.08.83-.25 1.64-.78 2.26zm.77.98c-1.12-.07-2.07.63-2.6.63-.55 0-1.36-.6-2.24-.58-1.15.02-2.22.67-2.8 1.7-1.2 2.08-.31 5.15.85 6.84.57.83 1.24 1.76 2.13 1.73.85-.03 1.18-.55 2.2-.55 1.03 0 1.32.55 2.22.53.92-.02 1.5-.84 2.06-1.68.65-.96.92-1.9.93-1.94-.02-.01-1.78-.69-1.8-2.72-.02-1.7 1.39-2.51 1.45-2.55-.79-1.17-2.02-1.3-2.45-1.33z"
+      fill="#000000"
+    />
+    <text data-brand x="20" y="16" fontFamily={SANS} fontSize="11" fontWeight="600" fill="#000000">
+      Pay
+    </text>
+  </Svg>
+)
+
+export const GooglepayIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 48 24" {...props}>
+    {/* G multicolor de Google (4 arcos) sobre barra central */}
+    <path data-brand d="M11 12a5 5 0 0 1 5-5c1.3 0 2.4.45 3.3 1.2l-1.4 1.4A2.9 2.9 0 0 0 16 9.1 2.9 2.9 0 0 0 13.1 12" fill="#EA4335" />
+    <path data-brand d="M13.1 12A2.9 2.9 0 0 0 16 14.9c.9 0 1.6-.3 2.1-.8.4-.4.65-.95.75-1.6H16v-1.9h4.8c.06.34.1.68.1 1.05 0 1.5-.54 2.77-1.48 3.63A4.9 4.9 0 0 1 16 17 5 5 0 0 1 11 12" fill="#4285F4" />
+    <path d="M11 12a5 5 0 0 1 .27-1.63l1.9.66A2.9 2.9 0 0 0 13.1 12z" fill="#FBBC04" />
+    <path d="M13.1 12a2.9 2.9 0 0 0 .07.63l-1.9.66A5 5 0 0 1 11 12z" fill="#34A853" />
+    <text data-brand x="24" y="16" fontFamily={SANS} fontSize="11" fontWeight="600" fill="#5F6368">
+      Pay
+    </text>
+  </Svg>
+)
+
+export const MaestroIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 40 24" {...props}>
+    <circle data-brand cx="16" cy="12" r="9" fill="#0099DF" />
+    <circle data-brand cx="24" cy="12" r="9" fill="#ED0006" fillOpacity="0.9" />
+    <path data-brand d="M20 5.2a9 9 0 0 0 0 13.6 9 9 0 0 0 0-13.6z" fill="#6C6BBD" />
+  </Svg>
+)
+
+export const DiscoverIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 64 24" {...props}>
+    <text data-brand x="4" y="16" fontFamily={SANS} fontSize="10" fontWeight="800" letterSpacing="0.3" fill="#1A1A1A">
+      DISCOVER
+    </text>
+    <circle data-brand cx="58" cy="12.5" r="4.5" fill="#F76E11" />
+  </Svg>
+)
+
+export const BitcoinIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <circle data-brand cx="12" cy="12" r="11" fill="#F7931A" />
+    <text x="12" y="17" textAnchor="middle" fontFamily={SANS} fontSize="15" fontWeight="800" fill="#FFFFFF">
+      ₿
+    </text>
+  </Svg>
+)

package/src/icons/social-icons.tsx

@@ -0,0 +1,108 @@
+import { Svg, type IconProps } from "./svg-base"
+
+/**
+ * Iconos de redes sociales — glifos limpios de marca, legibles a ~20–30px.
+ * Los colores de marca viven en elementos con `data-brand` para el tintado
+ * monocromo por CSS (ver `svg-base.tsx`). Los huecos blancos (negativo del
+ * símbolo) NO llevan `data-brand`.
+ */
+
+const SANS = "'Helvetica Neue', Arial, sans-serif"
+
+export const InstagramIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <defs>
+      <linearGradient id="ig-grad" x1="0" y1="24" x2="24" y2="0" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stopColor="#FEDA75" />
+        <stop offset="0.35" stopColor="#FA7E1E" />
+        <stop offset="0.6" stopColor="#D62976" />
+        <stop offset="0.8" stopColor="#962FBF" />
+        <stop offset="1" stopColor="#4F5BD5" />
+      </linearGradient>
+    </defs>
+    <rect data-brand x="2" y="2" width="20" height="20" rx="6" fill="none" stroke="url(#ig-grad)" strokeWidth="2" />
+    <circle data-brand cx="12" cy="12" r="5" fill="none" stroke="url(#ig-grad)" strokeWidth="2" />
+    <circle data-brand cx="17.5" cy="6.5" r="1.4" fill="url(#ig-grad)" />
+  </Svg>
+)
+
+export const TiktokIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <path
+      data-brand
+      d="M15 3c.3 2.2 1.6 3.8 3.9 4v2.6c-1.4.1-2.7-.3-3.9-1.05V15a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6.02.9.07v2.7a2.8 2.8 0 1 0 1.9 2.65V3H15z"
+      fill="#111111"
+    />
+  </Svg>
+)
+
+export const WhatsappIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <path
+      data-brand
+      d="M12 2a10 10 0 0 0-8.6 15.05L2 22l5.1-1.34A10 10 0 1 0 12 2z"
+      fill="#25D366"
+    />
+    <path
+      d="M8.4 7.1c-.2-.45-.4-.46-.6-.47h-.5c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.27s.98 2.63 1.12 2.81c.14.18 1.9 3.04 4.7 4.14 2.33.92 2.8.73 3.3.69.5-.05 1.63-.67 1.86-1.31.23-.64.23-1.19.16-1.31-.07-.11-.25-.18-.53-.32-.28-.14-1.63-.8-1.88-.9-.25-.09-.43-.13-.62.14-.18.27-.71.9-.87 1.08-.16.18-.32.2-.6.07-.28-.14-1.17-.43-2.22-1.37-.82-.73-1.37-1.63-1.53-1.9-.16-.28-.02-.43.12-.56.13-.13.28-.32.42-.48.14-.16.18-.28.28-.46.09-.18.05-.34-.02-.48-.07-.14-.6-1.5-.84-2.05z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+)
+
+export const XIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <path
+      data-brand
+      d="M17.5 3h3l-6.55 7.5L21.7 21h-5.9l-4.6-6-5.3 6H3l7-8-6.6-9h6l4.15 5.5L17.5 3zm-1.05 16h1.65L7.6 4.6H5.85L16.45 19z"
+      fill="#000000"
+    />
+  </Svg>
+)
+
+export const FacebookIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <circle data-brand cx="12" cy="12" r="11" fill="#1877F2" />
+    <path
+      d="M15.1 12.5l.4-2.6h-2.5V8.2c0-.72.35-1.42 1.48-1.42h1.13V4.56s-1.03-.18-2-.18c-2.05 0-3.38 1.24-3.38 3.48V9.9H8.4v2.6h2.23V19h2.87v-6.5h2.6z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+)
+
+export const YoutubeIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <rect data-brand x="1" y="5" width="22" height="14" rx="4" fill="#FF0000" />
+    <path d="M10 8.5l6 3.5-6 3.5v-7z" fill="#FFFFFF" />
+  </Svg>
+)
+
+export const ThreadsIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <path
+      data-brand
+      d="M16.5 11.4c-.1-.05-.2-.1-.3-.14-.18-3.2-1.94-5.03-4.9-5.05h-.04c-1.77 0-3.24.75-4.15 2.13l1.63 1.12c.68-1.02 1.74-1.24 2.52-1.24h.03c.97.01 1.7.29 2.17.84.34.4.57.95.68 1.64-.85-.14-1.77-.19-2.75-.13-2.76.16-4.53 1.77-4.41 4 .06 1.14.63 2.11 1.6 2.74.82.53 1.88.79 2.98.73 1.45-.08 2.59-.63 3.38-1.65.6-.77.98-1.77 1.15-3.03.7.42 1.21.98 1.5 1.65.48 1.14.51 3.01-1.01 4.53-1.34 1.33-2.94 1.91-5.36 1.93-2.68-.02-4.71-.88-6.03-2.56C4.66 17.5 4.02 15.45 4 12.86c.02-2.58.66-4.63 1.9-6.09C7.22 5.09 9.25 4.23 11.93 4.2c2.7.02 4.76.88 6.13 2.57.67.83 1.18 1.87 1.51 3.09l1.9-.51c-.4-1.5-1.04-2.8-1.9-3.87C17.83 3.4 15.25 2.28 11.94 2.26h-.01c-3.3.02-5.85 1.14-7.57 3.33C2.83 7.61 2.03 10.1 2 12.85v.02c.03 2.75.83 5.24 2.36 7.06 1.72 2.19 4.27 3.31 7.57 3.33h.01c2.93-.02 5-.79 6.7-2.49 2.23-2.22 2.16-5.01 1.43-6.72-.53-1.23-1.53-2.23-2.98-2.65z"
+      fill="#000000"
+    />
+  </Svg>
+)
+
+export const PinterestIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <circle data-brand cx="12" cy="12" r="11" fill="#E60023" />
+    <path
+      d="M12.2 5.5c-3.6 0-5.6 2.35-5.6 4.9 0 1.18.66 2.65 1.72 3.12.16.07.25.04.28-.11.03-.12.17-.7.24-.97.02-.09.01-.16-.06-.25-.4-.47-.71-1.34-.71-2.15 0-2.08 1.6-4.1 4.31-4.1 2.35 0 3.99 1.55 3.99 3.77 0 2.5-1.29 4.24-2.96 4.24-.92 0-1.62-.75-1.4-1.68.26-1.1.78-2.29.78-3.08 0-.71-.39-1.3-1.19-1.3-.94 0-1.7.96-1.7 2.25 0 .82.28 1.37.28 1.37s-.96 3.98-1.13 4.68c-.28 1.18-.04 2.62-.02 2.77.01.09.13.11.18.04.08-.1 1.09-1.34 1.43-2.58.1-.35.55-2.11.55-2.11.27.51 1.07.95 1.91.95 2.52 0 4.23-2.27 4.23-5.31 0-2.3-1.97-4.46-4.87-4.46z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+)
+
+export const LinkedinIcon = (props: IconProps) => (
+  <Svg viewBox="0 0 24 24" {...props}>
+    <rect data-brand x="1" y="1" width="22" height="22" rx="4" fill="#0A66C2" />
+    <path
+      d="M7.2 9.5H4.8V18h2.4V9.5zM6 5.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zM18.2 18h2.4v-4.9c0-2.35-1.26-3.44-2.93-3.44-1.35 0-1.95.74-2.29 1.26V9.5h-2.4V18h2.4v-4.5c0-1.02.5-1.6 1.35-1.6.78 0 1.47.55 1.47 1.6V18z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+)

package/src/icons/svg-base.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react"
+
+/**
+ * API pública de cada icono. Ninguna dimensión es fija: por defecto el icono
+ * mide `1em` de alto (hereda del `font-size` del contenedor) y el ancho se
+ * calcula solo a partir del `viewBox`. Pasá `size` (número → px, o cualquier
+ * unidad CSS) para forzar un alto concreto.
+ */
+export type IconProps = {
+  className?: string
+  /** Texto accesible. Si se omite, el icono se marca `aria-hidden` (decorativo). */
+  title?: string
+  /** Alto del icono. Número = px; string = unidad CSS. Default `"1em"`. */
+  size?: number | string
+}
+
+/**
+ * Envoltura común de todos los iconos.
+ *
+ * ── Tintado por CSS ────────────────────────────────────────────────────────
+ * Los colores de marca viven en elementos marcados con `data-brand`. El
+ * consumidor (footer/chrome) envuelve la fila de iconos en un contenedor con
+ * una clase y elige el modo con CSS. Convención:
+ *
+ *   modo "marca"  (default): no hace nada, cada icono muestra sus colores.
+ *   modo "tinta"  (monocromo con el color de texto):
+ *       .icons--tinta  svg [data-brand] { fill: currentColor; stroke: currentColor }
+ *   modo "acento" (monocromo con el acento de la paleta):
+ *       .icons--acento svg [data-brand] { fill: var(--cms-acento, #3b2bff);
+ *                                         stroke: var(--cms-acento, #3b2bff) }
+ *
+ * Los elementos "hueco" (blancos, que representan el negativo del logo) NO
+ * llevan `data-brand`, así en modo monocromo el fondo se recolorea pero el
+ * hueco se mantiene y el símbolo sigue legible.
+ *
+ * El alto se controla con el atributo intrínseco (del `viewBox`) + `style`:
+ * `height` fija el alto y `width:auto` conserva la proporción, igual que un
+ * `<img>`. Una clase del consumidor puede sobrescribir el alto sin deformar.
+ */
+export function Svg({
+  viewBox,
+  title,
+  className,
+  size,
+  children,
+}: IconProps & { viewBox: string; children: ReactNode }) {
+  const parts = viewBox.split(/\s+/)
+  const w = parts[2]
+  const h = parts[3]
+  const height = size ?? "1em"
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={viewBox}
+      width={w}
+      height={h}
+      className={className}
+      style={{ height, width: "auto" }}
+      role="img"
+      aria-label={title}
+      aria-hidden={title ? undefined : true}
+      focusable="false"
+    >
+      {title ? <title>{title}</title> : null}
+      {children}
+    </svg>
+  )
+}

package/src/index.ts

@@ -0,0 +1,49 @@
+import { defineTemplate, type Template } from "@arroyavecommerce/cms-storefront"
+import type { RenderContext } from "./context"
+import { homeBlocks } from "./blocks"
+import { puckConfig } from "./puck-config"
+import { DEFAULT_HOME_PAGE } from "./content/home"
+import { FUENTES, THEME_DEFAULTS, THEME_PRESETS, themeTokens } from "./theme"
+import { chromeRegistry } from "./chrome"
+import { catalogo } from "./catalog/registry"
+import { SkeletonPlp, SkeletonPdp } from "./catalog/skeletons"
+import {
+  PAYMENT_ICONS,
+  SOCIAL_ICONS,
+  type PaymentKey,
+  type SocialKey,
+  type IconEntry,
+  type IconProps,
+} from "./icons"
+
+export type { RenderContext }
+export type { PaymentKey, SocialKey, IconEntry, IconProps }
+export { themeTokens, FUENTES, THEME_PRESETS, homeBlocks, puckConfig, DEFAULT_HOME_PAGE, chromeRegistry, catalogo }
+export { PAYMENT_ICONS, SOCIAL_ICONS }
+export { SkeletonPlp, SkeletonPdp }
+
+export const themeKinetic: Template<RenderContext> = defineTemplate<RenderContext>()({
+  meta: { id: "kinetic", nombre: "Kinetic", industria: "fashion" },
+  blocks: homeBlocks,
+  chrome: chromeRegistry,
+  catalogo,
+  puckConfig,
+  theme: {
+    definition: { tokens: themeTokens, fuentes: FUENTES },
+    defaults: THEME_DEFAULTS,
+    marca: "Kinetic",
+  },
+  defaultHomePage: DEFAULT_HOME_PAGE,
+  reservados: [
+    "store",
+    "products",
+    "cart",
+    "checkout",
+    "account",
+    "categories",
+    "collections",
+    "studio",
+    "api",
+  ],
+  basePath: "/p",
+})