@tanstack/cta-framework-react-cra 0.23.2 → 0.24.1

package/add-ons/convex/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@convex-dev/react-query": "0.0.0-alpha.8",
+    "@convex-dev/react-query": "0.0.0-alpha.11",
     "convex": "^1.27.3",
     "lucide-react": "^0.544.0"
   }

package/add-ons/db/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@tanstack/db": "^0.1.1",
+    "@tanstack/db": "^0.4.3",
     "@tanstack/query-db-collection": "^0.2.0",
     "@tanstack/react-db": "^0.1.1",
     "zod": "^4.0.14"

package/add-ons/form/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@tanstack/react-form": "^1.0.0",
-    "zod": "^3.24.2"
+    "zod": "^4.1.11"
   }
 }

package/add-ons/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.17.0",
-    "zod": "3.25.76"
+    "zod": "4.1.11"
   }
 }

package/add-ons/mcp/small-logo.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>

package/add-ons/sentry/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@sentry/tanstackstart-react": "^9.12.0"
+    "@sentry/tanstackstart-react": "^10.17.0"
   }
 }

package/add-ons/shadcn/package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.476.0",
+    "lucide-react": "^0.544.0",
     "tailwind-merge": "^3.0.2",
     "tw-animate-css": "^1.3.6"
   }

package/add-ons/store/package.json

@@ -4,6 +4,6 @@
     "@tanstack/react-store": "^0.7.0"
   },
   "devDependencies": {
-    "@tanstack/devtools-event-client": "^0.2.1"
+    "@tanstack/devtools-event-client": "^0.3.2"
   }
 }

package/add-ons/storybook/assets/_dot_storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    const { default: tailwindcss } = await import("@tailwindcss/vite");
+    config.plugins = config.plugins || [];
+    config.plugins.push(tailwindcss());
+    return config;
+  },
+};
+export default config;

package/add-ons/storybook/assets/_dot_storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react-vite";
+import "../src/styles.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/add-ons/storybook/assets/src/components/storybook/button.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Button } from "./button";
+
+const meta = {
+  title: "Form/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Delete Account",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    children: "Small Button",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "medium",
+    children: "Medium Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    children: "Large Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: "primary",
+    children: "Disabled Button",
+    disabled: true,
+  },
+};

package/add-ons/storybook/assets/src/components/storybook/button.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+export interface ButtonProps {
+  variant?: "primary" | "secondary" | "danger";
+  size?: "small" | "medium" | "large";
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+  className?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = "primary",
+  size = "medium",
+  children,
+  onClick,
+  disabled = false,
+  type = "button",
+  className = "",
+}) => {
+  const baseStyles =
+    "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+
+  const variantStyles = {
+    primary:
+      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
+    secondary:
+      "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
+    danger:
+      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
+  };
+
+  const sizeStyles = {
+    small: "px-3 py-1.5 text-sm",
+    medium: "px-4 py-2 text-base",
+    large: "px-6 py-3 text-lg",
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+    >
+      {children}
+    </button>
+  );
+};

package/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Dialog } from "./dialog";
+import { Button } from "./button";
+
+const meta = {
+  title: "Form/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "User Profile",
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-700 dark:text-gray-300">
+          This is a simple dialog component with a title and content area.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    title: "Confirm Action",
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-700 dark:text-gray-300">
+          Are you sure you want to proceed with this action?
+        </p>
+      </div>
+    ),
+    footer: (
+      <div className="flex gap-3 justify-end">
+        <Button variant="secondary" size="medium">
+          Cancel
+        </Button>
+        <Button variant="primary" size="medium">
+          Confirm
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const Form: Story = {
+  args: {
+    title: "Create Account",
+    children: (
+      <div className="space-y-4 min-w-80">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            Email
+          </label>
+          <input
+            type="email"
+            placeholder="you@example.com"
+            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            Password
+          </label>
+          <input
+            type="password"
+            placeholder="••••••••"
+            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+          />
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="flex gap-3 justify-end">
+        <Button variant="secondary" size="medium">
+          Cancel
+        </Button>
+        <Button variant="primary" size="medium">
+          Create Account
+        </Button>
+      </div>
+    ),
+  },
+};

package/add-ons/storybook/assets/src/components/storybook/dialog.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export interface DialogProps {
+  title: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export const Dialog: React.FC<DialogProps> = ({
+  title,
+  children,
+  footer,
+  className = "",
+}) => {
+  return (
+    <div
+      className={`bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden ${className}`}
+    >
+      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </h2>
+      </div>
+      <div className="px-6 py-6">{children}</div>
+      {footer && (
+        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+};

package/add-ons/storybook/assets/src/components/storybook/index.ts

@@ -0,0 +1,14 @@
+export { Input } from "./input";
+export type { InputProps } from "./input";
+
+export { RadioGroup } from "./radio-group";
+export type { RadioGroupProps, RadioOption } from "./radio-group";
+
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+
+export { Dialog } from "./dialog";
+export type { DialogProps } from "./dialog";
+
+export { Button } from "./button";
+export type { ButtonProps } from "./button";

package/add-ons/storybook/assets/src/components/storybook/input.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Input } from "./input";
+
+const meta = {
+  title: "Form/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Email Address",
+    id: "email",
+    placeholder: "Enter your email",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: "First Name",
+    id: "firstName",
+    placeholder: "John",
+    required: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    label: "Last Name",
+    id: "lastName",
+    value: "Doe",
+    placeholder: "Enter last name",
+  },
+};

package/add-ons/storybook/assets/src/components/storybook/input.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export interface InputProps {
+  label: string;
+  id: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  className?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  id,
+  value = "",
+  onChange,
+  placeholder,
+  required = false,
+  className = "",
+}) => {
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      <label
+        htmlFor={id}
+        className="text-sm font-medium text-gray-700 dark:text-gray-200"
+      >
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <input
+        type="text"
+        id={id}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder={placeholder}
+        required={required}
+        className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
+      />
+    </div>
+  );
+};

package/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { RadioGroup } from "./radio-group";
+
+const meta = {
+  title: "Form/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Employment Type",
+    name: "employmentType",
+    options: [
+      { value: "full-time", label: "Full Time" },
+      { value: "part-time", label: "Part Time" },
+    ],
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    label: "Employment Type",
+    name: "employmentType",
+    options: [
+      { value: "full-time", label: "Full Time" },
+      { value: "part-time", label: "Part Time" },
+    ],
+    value: "full-time",
+  },
+};
+
+export const MultipleOptions: Story = {
+  args: {
+    label: "Subscription Plan",
+    name: "plan",
+    options: [
+      { value: "basic", label: "Basic" },
+      { value: "pro", label: "Pro" },
+      { value: "enterprise", label: "Enterprise" },
+    ],
+    value: "pro",
+  },
+};

package/add-ons/storybook/assets/src/components/storybook/radio-group.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+export interface RadioOption {
+  value: string;
+  label: string;
+}
+
+export interface RadioGroupProps {
+  label: string;
+  name: string;
+  options: RadioOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  label,
+  name,
+  options,
+  value,
+  onChange,
+  className = "",
+}) => {
+  return (
+    <div className={`flex flex-col gap-3 ${className}`}>
+      <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+        {label}
+      </label>
+      <div className="flex gap-4">
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className="flex items-center gap-2 cursor-pointer group"
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={(e) => onChange?.(e.target.value)}
+              className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 cursor-pointer"
+            />
+            <span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
+              {option.label}
+            </span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};

package/add-ons/storybook/assets/src/components/storybook/slider.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { Slider } from "./slider";
+
+const meta = {
+  title: "Form/Slider",
+  component: Slider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Volume",
+    id: "volume",
+    value: 50,
+  },
+};
+
+export const Skill: Story = {
+  args: {
+    label: "Plays Guitar",
+    id: "guitar",
+    value: 75,
+    min: 0,
+    max: 100,
+  },
+};
+
+export const NoValue: Story = {
+  args: {
+    label: "Experience Level",
+    id: "experience",
+    value: 30,
+    showValue: false,
+  },
+};
+
+export const CustomRange: Story = {
+  args: {
+    label: "Custom Range",
+    id: "custom-range",
+    value: 5,
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+};

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

@@ -0,0 +1,57 @@
+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;
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  label,
+  id,
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = true,
+  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"
+        >
+          {label}
+        </label>
+        {showValue && (
+          <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 min-w-12 text-right">
+            {value}
+          </span>
+        )}
+      </div>
+      <input
+        type="range"
+        id={id}
+        value={value}
+        onChange={(e) => onChange?.(Number(e.target.value))}
+        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"
+      />
+      <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+        <span>{min}</span>
+        <span>{max}</span>
+      </div>
+    </div>
+  );
+};