virastack 0.0.1 → 1.0.1

package/templates-i18n/tanstack/src/features/landing/icons/tanstack.tsx

@@ -0,0 +1,321 @@
+import type { ComponentProps } from "react";
+
+export function TanstackIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 633 633" {...props}>
+      <defs>
+        <linearGradient id="tanstack__b" x1="50%" x2="50%" y1="0%" y2="71.65%">
+          <stop offset="0%" stopColor="#6BDAFF" />
+          <stop offset="31.922%" stopColor="#F9FFB5" />
+          <stop offset="70.627%" stopColor="#FFA770" />
+          <stop offset="100%" stopColor="#FF7373" />
+        </linearGradient>
+        <linearGradient id="tanstack__d" x1="43.996%" x2="53.441%" y1="8.54%" y2="93.872%">
+          <stop offset="0%" stopColor="#673800" />
+          <stop offset="100%" stopColor="#B65E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__e" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="tanstack__f" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="tanstack__g" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="tanstack__h" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="tanstack__i" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="tanstack__j" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="tanstack__k" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%">
+          <stop offset="0%" stopColor="#EE2700" />
+          <stop offset="100%" stopColor="#FF008E" />
+        </linearGradient>
+        <linearGradient id="tanstack__l" x1="61.109%" x2="43.717%" y1="3.633%" y2="43.072%">
+          <stop offset="0%" stopColor="#FFF400" />
+          <stop offset="100%" stopColor="#3C8700" />
+        </linearGradient>
+        <linearGradient id="tanstack__m" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFDF00" />
+          <stop offset="100%" stopColor="#FF9D00" />
+        </linearGradient>
+        <linearGradient id="tanstack__n" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__o" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__p" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__q" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__r" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__s" x1="78.334%" x2="31.668%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__t" x1="57.913%" x2="44.88%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="tanstack__u" x1="50.495%" x2="49.68%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <circle id="tanstack__a" cx="308.5" cy="308.5" r="308.5" />
+        <circle id="tanstack__v" cx="307.5" cy="308.5" r="316.5" />
+      </defs>
+      <g fill="none" fillRule="evenodd" transform="translate(9 8)">
+        <mask id="tanstack__c" fill="#fff">
+          <use xlinkHref="#tanstack__a" />
+        </mask>
+        <use xlinkHref="#tanstack__a" fill="url(#tanstack__b)" />
+        <ellipse
+          cx="81.5"
+          cy="602.5"
+          fill="#015064"
+          stroke="#00CFE2"
+          strokeWidth="25"
+          mask="url(#tanstack__c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="535.5"
+          cy="602.5"
+          fill="#015064"
+          stroke="#00CFE2"
+          strokeWidth="25"
+          mask="url(#tanstack__c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="81.5"
+          cy="640.5"
+          fill="#015064"
+          stroke="#00A8B8"
+          strokeWidth="25"
+          mask="url(#tanstack__c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="535.5"
+          cy="640.5"
+          fill="#015064"
+          stroke="#00A8B8"
+          strokeWidth="25"
+          mask="url(#tanstack__c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="81.5"
+          cy="676.5"
+          fill="#015064"
+          stroke="#007782"
+          strokeWidth="25"
+          mask="url(#tanstack__c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="535.5"
+          cy="676.5"
+          fill="#015064"
+          stroke="#007782"
+          strokeWidth="25"
+          mask="url(#tanstack__c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <g mask="url(#tanstack__c)">
+          <path
+            fill="url(#tanstack__d)"
+            stroke="#6E3A00"
+            strokeWidth="6.088"
+            d="M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927"
+            transform="scale(-1 1) rotate(25 -300.37 -553.013)"
+          />
+          <g stroke="#2F8A00">
+            <path
+              fill="url(#tanstack__e)"
+              strokeWidth="9.343"
+              d="M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#tanstack__f)"
+              strokeWidth="9.343"
+              d="M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#tanstack__g)"
+              strokeWidth="9.343"
+              d="M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#tanstack__h)"
+              strokeWidth="9.343"
+              d="M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#tanstack__i)"
+              strokeWidth="9.343"
+              d="M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#tanstack__j)"
+              strokeWidth="9.343"
+              d="M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              strokeLinecap="round"
+              strokeWidth="5.91"
+              d="M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216"
+            />
+            <path
+              strokeLinecap="round"
+              strokeWidth="5.91"
+              d="M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617"
+            />
+          </g>
+          <path
+            stroke="#830305"
+            strokeLinecap="round"
+            strokeLinejoin="bevel"
+            strokeWidth="6.937"
+            d="m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816"
+          />
+          <path
+            fill="url(#tanstack__k)"
+            d="M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z"
+            transform="scale(-1 1) rotate(-9 2092.128 2856.854)"
+          />
+          <path
+            fill="#D8D8D8"
+            stroke="#FFF"
+            strokeLinecap="round"
+            strokeLinejoin="bevel"
+            strokeWidth="4.414"
+            d="m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497"
+          />
+        </g>
+        <ellipse
+          cx="308.5"
+          cy="720.5"
+          fill="url(#tanstack__l)"
+          mask="url(#tanstack__c)"
+          rx="266"
+          ry="316.5"
+        />
+        <ellipse
+          cx="308.5"
+          cy="720.5"
+          stroke="#6DA300"
+          strokeOpacity=".502"
+          strokeWidth="26"
+          mask="url(#tanstack__c)"
+          rx="253"
+          ry="303.5"
+        />
+        <g mask="url(#tanstack__c)">
+          <g transform="translate(389 -32)">
+            <circle cx="168.5" cy="113.5" r="113.5" fill="url(#tanstack__m)" />
+            <circle
+              cx="168.5"
+              cy="113.5"
+              r="106"
+              stroke="#FFC900"
+              strokeOpacity=".529"
+              strokeWidth="15"
+            />
+            <path
+              stroke="url(#tanstack__n)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="M30 113H0"
+            />
+            <path
+              stroke="url(#tanstack__o)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="M33.5 79.5 7 74"
+            />
+            <path
+              stroke="url(#tanstack__p)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m34 146-29 8"
+            />
+            <path
+              stroke="url(#tanstack__q)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m45 177-24 13"
+            />
+            <path
+              stroke="url(#tanstack__r)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m67 204-20 19"
+            />
+            <path
+              stroke="url(#tanstack__s)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m94.373 227-13.834 22.847"
+            />
+            <path
+              stroke="url(#tanstack__t)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="M127.5 243.5 120 268"
+            />
+            <path
+              stroke="url(#tanstack__u)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m167.5 252.5.5 24.5"
+            />
+          </g>
+        </g>
+        <circle cx="307.5" cy="308.5" r="304" stroke="#000" strokeWidth="25" />
+      </g>
+    </svg>
+  );
+}

package/templates-i18n/tanstack/src/features/landing/icons/typescript.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps } from "react";
+
+export function TypescriptIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" {...props}>
+      <path
+        d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z"
+        fill="#3178C6"
+      />
+      <path
+        d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z"
+        fill="#FFF"
+      />
+    </svg>
+  );
+}

package/templates-i18n/tanstack/src/features/landing/index.ts

@@ -0,0 +1 @@
+export { LandingPage } from "@/features/landing/components/LandingPage";

package/templates-i18n/tanstack/src/features/landing/schemas/index.ts

@@ -0,0 +1 @@
+export { getProjectSchema, type ProjectInput } from "@/features/landing/schemas/project.schema";

package/templates-i18n/tanstack/src/features/landing/schemas/project.schema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+import * as m from "@/paraglide/messages.js";
+
+export const getProjectSchema = () =>
+  z.object({
+    name: z.string().min(3, m.project_validation_min()).max(50, m.project_validation_max()),
+  });
+
+export type ProjectInput = z.infer<ReturnType<typeof getProjectSchema>>;

package/templates-i18n/tanstack/src/features/landing/stores/counter.store.ts

@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+type CounterState = {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+};
+
+/**
+ * Example Zustand store. Delete once you have real client state to manage.
+ */
+export const useCounterStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));

package/templates-i18n/tanstack/src/features/landing/stores/index.ts

@@ -0,0 +1 @@
+export { useCounterStore } from "@/features/landing/stores/counter.store";

package/templates-i18n/tanstack/src/features/landing/types/index.ts

@@ -0,0 +1 @@
+export type { User } from "@/features/landing/types/user.types";

package/templates-i18n/tanstack/src/features/landing/types/user.types.ts

@@ -0,0 +1,9 @@
+export type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  address: {
+    city: string;
+  };
+};

package/templates-i18n/tanstack/src/helpers/format-date.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats a date using `Intl.DateTimeFormat`. Kept dependency-free on purpose —
+ * add `date-fns` only if you need heavier date arithmetic.
+ */
+export function formatDate(date: Date | string, locale = "en-US") {
+  const value = typeof date === "string" ? new Date(date) : date;
+
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(value);
+}

package/templates-i18n/tanstack/src/helpers/index.ts

@@ -0,0 +1 @@
+export { formatDate } from "@/helpers/format-date";

package/templates-i18n/tanstack/src/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared hooks promoted out of features (Rule of Three).
+ * Feature-scoped hooks live under `src/features/[feature]/hooks`.
+ */
+export {};

package/templates-i18n/tanstack/src/lib/api.ts

@@ -0,0 +1,97 @@
+/**
+ * Lightweight native `fetch` wrapper.
+ *
+ * Zero external HTTP dependencies (no axios/ofetch). Works in both browser
+ * and TanStack Start server contexts.
+ */
+
+export class ApiError extends Error {
+  readonly status: number;
+  readonly data: unknown;
+
+  constructor(message: string, status: number, data: unknown) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.data = data;
+  }
+}
+
+type RequestOptions = Omit<RequestInit, "body"> & {
+  body?: unknown;
+  retry?: number;
+  retryDelayMs?: number;
+};
+
+const DEFAULT_RETRY = 0;
+const DEFAULT_RETRY_DELAY_MS = 300;
+
+function buildHeaders(init?: HeadersInit): Headers {
+  const headers = new Headers(init);
+
+  if (!headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json");
+  }
+
+  // FIXME: attach auth token once an auth solution is chosen, e.g.:
+  // const token = await getAuthToken();
+  // if (token) headers.set("Authorization", `Bearer ${token}`);
+
+  return headers;
+}
+
+async function parseResponse<T>(response: Response): Promise<T> {
+  const contentType = response.headers.get("content-type") ?? "";
+  const isJson = contentType.includes("application/json");
+  const payload = isJson ? await response.json() : await response.text();
+
+  if (!response.ok) {
+    throw new ApiError(`Request failed with status ${response.status}`, response.status, payload);
+  }
+
+  return payload as T;
+}
+
+async function sleep(ms: number) {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function request<T>(url: string, options: RequestOptions = {}): Promise<T> {
+  const { body, retry = DEFAULT_RETRY, retryDelayMs = DEFAULT_RETRY_DELAY_MS, ...rest } = options;
+
+  let attempt = 0;
+
+  for (;;) {
+    try {
+      const response = await fetch(url, {
+        ...rest,
+        headers: buildHeaders(rest.headers),
+        body: body !== undefined ? JSON.stringify(body) : undefined,
+      });
+
+      return await parseResponse<T>(response);
+    } catch (error) {
+      const isLastAttempt = attempt >= retry;
+      const isServerOrNetworkError = !(error instanceof ApiError) || error.status >= 500;
+
+      if (isLastAttempt || !isServerOrNetworkError) {
+        throw error;
+      }
+
+      attempt += 1;
+      await sleep(retryDelayMs * attempt);
+    }
+  }
+}
+
+export const api = {
+  get: <T>(url: string, options?: RequestOptions) => request<T>(url, { ...options, method: "GET" }),
+  post: <T>(url: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(url, { ...options, method: "POST", body }),
+  put: <T>(url: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(url, { ...options, method: "PUT", body }),
+  patch: <T>(url: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(url, { ...options, method: "PATCH", body }),
+  delete: <T>(url: string, options?: RequestOptions) =>
+    request<T>(url, { ...options, method: "DELETE" }),
+};

package/templates-i18n/tanstack/src/lib/query-client.ts

@@ -0,0 +1,18 @@
+import { QueryClient } from "@tanstack/react-query";
+
+/**
+ * Creates a new QueryClient with sane defaults.
+ * A factory (instead of a singleton) avoids sharing cache across requests
+ * in server contexts and across users in a serverless environment.
+ */
+export function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+        retry: 1,
+      },
+    },
+  });
+}

package/templates-i18n/tanstack/src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges Tailwind class names safely, resolving conflicting utility classes.
+ *
+ * @example
+ * cn("px-2 py-1", condition && "bg-primary", "px-4") // => "py-1 bg-primary px-4"
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}