@tanstack/create 0.68.0 → 0.68.2

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react'
 
 export interface SliderProps {
-  label: string;
-  id: string;
-  value?: number;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  showValue?: boolean;
-  className?: string;
+  label: string
+  id: string
+  value?: number
+  onChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  showValue?: boolean
+  className?: string
 }
 
 export const Slider: React.FC<SliderProps> = ({
@@ -21,19 +21,19 @@ export const Slider: React.FC<SliderProps> = ({
   max = 100,
   step = 1,
   showValue = true,
-  className = "",
+  className = '',
 }) => {
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       <div className="flex justify-between items-center">
         <label
           htmlFor={id}
-          className="text-sm font-medium text-gray-700 dark:text-gray-200"
+          className="text-sm font-medium text-[var(--sea-ink)]"
         >
           {label}
         </label>
         {showValue && (
-          <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 min-w-12 text-right">
+          <span className="min-w-12 text-right text-sm font-semibold text-[var(--lagoon-deep)]">
             {value}
           </span>
         )}
@@ -46,12 +46,12 @@ export const Slider: React.FC<SliderProps> = ({
         min={min}
         max={max}
         step={step}
-        className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
+        className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-[var(--chip-bg)] accent-[var(--lagoon-deep)]"
       />
-      <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+      <div className="demo-muted flex justify-between text-xs">
         <span>{min}</span>
         <span>{max}</span>
       </div>
     </div>
-  );
-};
+  )
+}

package/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx

@@ -1,34 +1,34 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
 
-import { Dialog } from "#/components/storybook/dialog";
-import { Input } from "#/components/storybook/input";
-import { RadioGroup } from "#/components/storybook/radio-group";
-import { Slider } from "#/components/storybook/slider";
-import { Button } from "#/components/storybook/button";
+import { Dialog } from '#/components/storybook/dialog'
+import { Input } from '#/components/storybook/input'
+import { RadioGroup } from '#/components/storybook/radio-group'
+import { Slider } from '#/components/storybook/slider'
+import { Button } from '#/components/storybook/button'
 
-export const Route = createFileRoute("/demo/storybook")({
+export const Route = createFileRoute('/demo/storybook')({
   component: StorybookDemo,
-});
+})
 
 function StorybookDemo() {
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [employmentType, setEmploymentType] = useState("full-time");
-  const [coffeeCups, setCoffeeCups] = useState(3);
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [employmentType, setEmploymentType] = useState('full-time')
+  const [coffeeCups, setCoffeeCups] = useState(3)
 
-  const handleSubmit = () => {};
+  const handleSubmit = () => {}
 
   const handleReset = () => {
-    setFirstName("");
-    setLastName("");
-    setEmploymentType("full-time");
-    setCoffeeCups(3);
-  };
+    setFirstName('')
+    setLastName('')
+    setEmploymentType('full-time')
+    setCoffeeCups(3)
+  }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4">
-      <div className="max-w-2xl mx-auto">
+    <main className="demo-page demo-center">
+      <div className="w-full max-w-2xl">
         <Dialog
           title="Employee Information Form"
           footer={
@@ -70,8 +70,8 @@ function StorybookDemo() {
               label="Employment Type"
               name="employmentType"
               options={[
-                { value: "full-time", label: "Full Time" },
-                { value: "part-time", label: "Part Time" },
+                { value: 'full-time', label: 'Full Time' },
+                { value: 'part-time', label: 'Part Time' },
               ]}
               value={employmentType}
               onChange={setEmploymentType}
@@ -88,6 +88,6 @@ function StorybookDemo() {
           </form>
         </Dialog>
       </div>
-    </div>
-  );
+    </main>
+  )
 }

package/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/media.tsx

@@ -1,27 +1,27 @@
-import { StrapiImage } from "@/components/strapi-image";
-import type { TImage } from "@/types/strapi";
+import { StrapiImage } from '@/components/strapi-image'
+import type { TImage } from '@/types/strapi'
 
 export interface IMedia {
-  __component: "shared.media";
-  id: number;
-  file?: TImage;
+  __component: 'shared.media'
+  id: number
+  file?: TImage
 }
 
 export function Media({ file }: Readonly<IMedia>) {
-  if (!file) return null;
+  if (!file) return null
 
   return (
     <figure className="my-8">
       <StrapiImage
         src={file.url}
-        alt={file.alternativeText || ""}
+        alt={file.alternativeText || ''}
         className="rounded-lg w-full"
       />
       {file.alternativeText && (
-        <figcaption className="mt-2 text-center text-sm text-gray-500">
+        <figcaption className="demo-muted mt-2 text-center text-sm">
           {file.alternativeText}
         </figcaption>
       )}
     </figure>
-  );
+  )
 }

package/src/frameworks/react/add-ons/strapi/assets/src/components/blocks/quote.tsx

@@ -1,19 +1,19 @@
 export interface IQuote {
-  __component: "shared.quote";
-  id: number;
-  body: string;
-  title?: string;
+  __component: 'shared.quote'
+  id: number
+  body: string
+  title?: string
 }
 
 export function Quote({ body, title }: Readonly<IQuote>) {
   return (
-    <blockquote className="border-l-4 border-cyan-400 pl-6 py-4 my-6 bg-slate-800/30 rounded-r-lg">
-      <p className="text-xl italic text-gray-300 leading-relaxed">{body}</p>
+    <blockquote className="demo-card my-6 border-l-4 border-l-[var(--lagoon-deep)] py-4 pl-6">
+      <p className="demo-muted text-xl italic leading-relaxed">{body}</p>
       {title && (
-        <cite className="block mt-4 text-cyan-400 not-italic font-medium">
+        <cite className="mt-4 block font-medium not-italic text-[var(--sea-ink)]">
           — {title}
         </cite>
       )}
     </blockquote>
-  );
+  )
 }

package/src/frameworks/react/add-ons/strapi/assets/src/components/markdown-content.tsx

@@ -1,36 +1,40 @@
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 interface MarkdownContentProps {
-  content: string | undefined | null;
-  className?: string;
+  content: string | undefined | null
+  className?: string
 }
 
 const styles = {
-  h1: "text-3xl font-bold mb-6 text-white",
-  h2: "text-2xl font-bold mb-4 text-white",
-  h3: "text-xl font-bold mb-3 text-white",
-  p: "mb-4 leading-relaxed text-gray-300",
-  a: "text-cyan-400 hover:underline",
-  ul: "list-disc pl-6 mb-4 space-y-2 text-gray-300",
-  ol: "list-decimal pl-6 mb-4 space-y-2 text-gray-300",
-  li: "leading-relaxed",
-  blockquote: "border-l-4 border-cyan-400 pl-4 italic text-gray-400 my-4",
-  code: "bg-slate-800 px-2 py-1 rounded text-cyan-400 text-sm font-mono",
-  pre: "bg-slate-800 p-4 rounded-lg overflow-x-auto mb-4",
-  table: "w-full border-collapse mb-4",
-  th: "border border-slate-700 p-2 bg-slate-800 text-left text-white",
-  td: "border border-slate-700 p-2 text-gray-300",
-  img: "max-w-full h-auto rounded-lg my-4",
-  hr: "border-slate-700 my-8",
-  strong: "text-white font-semibold",
-};
+  h1: 'mb-6 text-3xl font-bold text-[var(--sea-ink)]',
+  h2: 'mb-4 text-2xl font-bold text-[var(--sea-ink)]',
+  h3: 'mb-3 text-xl font-bold text-[var(--sea-ink)]',
+  p: 'demo-muted mb-4 leading-relaxed',
+  a: 'hover:underline',
+  ul: 'demo-muted mb-4 list-disc space-y-2 pl-6',
+  ol: 'demo-muted mb-4 list-decimal space-y-2 pl-6',
+  li: 'leading-relaxed',
+  blockquote:
+    'demo-card my-4 border-l-4 border-l-[var(--lagoon-deep)] pl-4 italic',
+  code: 'text-sm font-mono',
+  pre: 'demo-code-block mb-4 overflow-x-auto',
+  table: 'w-full border-collapse mb-4',
+  th: 'border border-[var(--line)] bg-[var(--chip-bg)] p-2 text-left text-[var(--sea-ink)]',
+  td: 'demo-muted border border-[var(--line)] p-2',
+  img: 'max-w-full h-auto rounded-lg my-4',
+  hr: 'my-8 border-[var(--line)]',
+  strong: 'font-semibold text-[var(--sea-ink)]',
+}
 
-export function MarkdownContent({ content, className = "" }: MarkdownContentProps) {
-  if (!content) return null;
+export function MarkdownContent({
+  content,
+  className = '',
+}: MarkdownContentProps) {
+  if (!content) return null
 
   return (
-    <div className={`prose prose-invert max-w-none ${className}`}>
+    <div className={`max-w-none ${className}`}>
       <Markdown
         remarkPlugins={[remarkGfm]}
         components={{
@@ -39,36 +43,49 @@ export function MarkdownContent({ content, className = "" }: MarkdownContentProp
           h3: ({ children }) => <h3 className={styles.h3}>{children}</h3>,
           p: ({ children }) => <p className={styles.p}>{children}</p>,
           a: ({ href, children }) => (
-            <a href={href} className={styles.a} target="_blank" rel="noopener noreferrer">
+            <a
+              href={href}
+              className={styles.a}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {children}
             </a>
           ),
           ul: ({ children }) => <ul className={styles.ul}>{children}</ul>,
           ol: ({ children }) => <ol className={styles.ol}>{children}</ol>,
           li: ({ children }) => <li className={styles.li}>{children}</li>,
-          blockquote: ({ children }) => <blockquote className={styles.blockquote}>{children}</blockquote>,
+          blockquote: ({ children }) => (
+            <blockquote className={styles.blockquote}>{children}</blockquote>
+          ),
           code: ({ className, children }) => {
-            const isCodeBlock = className?.includes("language-");
+            const isCodeBlock = className?.includes('language-')
             if (isCodeBlock) {
               return (
                 <pre className={styles.pre}>
-                  <code className="text-sm font-mono text-gray-300">{children}</code>
+                  <code className="text-sm font-mono">{children}</code>
                 </pre>
-              );
+              )
             }
-            return <code className={styles.code}>{children}</code>;
+            return <code className={styles.code}>{children}</code>
           },
           pre: ({ children }) => <>{children}</>,
-          table: ({ children }) => <table className={styles.table}>{children}</table>,
+          table: ({ children }) => (
+            <table className={styles.table}>{children}</table>
+          ),
           th: ({ children }) => <th className={styles.th}>{children}</th>,
           td: ({ children }) => <td className={styles.td}>{children}</td>,
-          img: ({ src, alt }) => <img src={src} alt={alt || ""} className={styles.img} />,
+          img: ({ src, alt }) => (
+            <img src={src} alt={alt || ''} className={styles.img} />
+          ),
           hr: () => <hr className={styles.hr} />,
-          strong: ({ children }) => <strong className={styles.strong}>{children}</strong>,
+          strong: ({ children }) => (
+            <strong className={styles.strong}>{children}</strong>
+          ),
         }}
       >
         {content}
       </Markdown>
     </div>
-  );
+  )
 }

package/src/frameworks/react/add-ons/strapi/assets/src/components/pagination.tsx

@@ -64,10 +64,8 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
       <button
         onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
         disabled={currentPage <= 1}
-        className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-          currentPage <= 1
-            ? 'text-gray-600 cursor-not-allowed'
-            : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+        className={`demo-button demo-button-secondary ${
+          currentPage <= 1 ? 'cursor-not-allowed opacity-50' : ''
         }`}
       >
         <ChevronLeft className="w-4 h-4" />
@@ -80,7 +78,7 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
           page === 'ellipsis' ? (
             <span
               key={`ellipsis-${index}`}
-              className="px-2 py-2 text-gray-500 hidden md:block"
+              className="demo-muted hidden px-2 py-2 md:block"
             >
               ...
             </span>
@@ -88,15 +86,13 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
             <button
               key={page}
               onClick={() => handlePageChange(page)}
-              className={`min-w-[40px] px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                currentPage === page
-                  ? 'bg-cyan-500 text-white'
-                  : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+              className={`demo-button min-w-[40px] ${
+                currentPage === page ? '' : 'demo-button-secondary'
               }`}
             >
               {page}
             </button>
-          )
+          ),
         )}
       </div>
 
@@ -106,10 +102,8 @@ export function Pagination({ pageCount, className = '' }: PaginationProps) {
           currentPage < pageCount && handlePageChange(currentPage + 1)
         }
         disabled={currentPage >= pageCount}
-        className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-          currentPage >= pageCount
-            ? 'text-gray-600 cursor-not-allowed'
-            : 'text-gray-300 hover:bg-slate-700 hover:text-white'
+        className={`demo-button demo-button-secondary ${
+          currentPage >= pageCount ? 'cursor-not-allowed opacity-50' : ''
         }`}
       >
         <span className="hidden sm:inline">Next</span>

package/src/frameworks/react/add-ons/strapi/assets/src/components/search.tsx

@@ -1,25 +1,25 @@
-import { useRouter, useSearch } from "@tanstack/react-router";
-import { useDebouncedCallback } from "use-debounce";
+import { useRouter, useSearch } from '@tanstack/react-router'
+import { useDebouncedCallback } from 'use-debounce'
 
 interface SearchProps {
-  readonly className?: string;
+  readonly className?: string
 }
 
-export function Search({ className = "" }: SearchProps) {
-  const search = useSearch({ strict: false });
-  const router = useRouter();
+export function Search({ className = '' }: SearchProps) {
+  const search = useSearch({ strict: false })
+  const router = useRouter()
 
   const handleSearch = useDebouncedCallback((term: string) => {
     router.navigate({
-      to: ".",
+      to: '.',
       search: (prev) => ({
         ...prev,
         page: 1,
         query: term || undefined,
       }),
       replace: true,
-    });
-  }, 300);
+    })
+  }, 300)
 
   return (
     <input
@@ -28,8 +28,8 @@ export function Search({ className = "" }: SearchProps) {
       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         handleSearch(e.target.value)
       }
-      defaultValue={(search as any)?.query || ""}
-      className={`w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 transition-colors ${className}`}
+      defaultValue={(search as any)?.query || ''}
+      className={`demo-input ${className}`}
     />
-  );
+  )
 }

package/src/frameworks/react/add-ons/strapi/assets/src/components/strapi-image.tsx

@@ -1,47 +1,47 @@
-import { useState } from "react";
-import { getStrapiMedia } from "@/lib/strapi-utils";
+import { useState } from 'react'
+import { getStrapiMedia } from '@/lib/strapi-utils'
 
 interface StrapiImageProps {
-  src: string | undefined | null;
-  alt?: string | null;
-  className?: string;
-  width?: number | string;
-  height?: number | string;
+  src: string | undefined | null
+  alt?: string | null
+  className?: string
+  width?: number | string
+  height?: number | string
 }
 
 export function StrapiImage({
   src,
   alt,
-  className = "",
+  className = '',
   width,
   height,
 }: StrapiImageProps) {
-  const [hasError, setHasError] = useState(false);
+  const [hasError, setHasError] = useState(false)
 
-  if (!src) return null;
+  if (!src) return null
 
-  const imageUrl = getStrapiMedia(src);
+  const imageUrl = getStrapiMedia(src)
 
   if (hasError) {
     return (
       <div
-        className={`bg-slate-700 flex items-center justify-center text-slate-400 text-sm ${className}`}
+        className={`flex items-center justify-center bg-[var(--chip-bg)] text-sm text-[var(--sea-ink-soft)] ${className}`}
         style={{ width, height }}
       >
         <span>Image not available</span>
       </div>
-    );
+    )
   }
 
   return (
     <img
       src={imageUrl}
-      alt={alt || ""}
+      alt={alt || ''}
       width={width}
       height={height}
       loading="lazy"
       className={`object-cover ${className}`}
       onError={() => setHasError(true)}
     />
-  );
+  )
 }