@camox/cli 0.6.1 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/template/components.json +1 -1
- package/template/package.json +1 -1
- package/template/src/camox/blocks/footer.tsx +4 -8
- package/template/src/camox/blocks/hero.tsx +7 -16
- package/template/src/camox/blocks/navbar.tsx +5 -23
- package/template/src/camox/blocks/statistics.tsx +13 -12
- package/template/src/camox/blocks/testimonial.tsx +10 -11
- package/template/src/client.tsx +12 -0
- package/template/src/components/ui/button.tsx +25 -24
- package/template/vite.config.ts +4 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@camox/cli",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"bin": {
|
|
5
5
|
"camox": "./dist/index.mjs"
|
|
6
6
|
},
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@typescript/native-preview": "7.0.0-dev.20260412.1",
|
|
26
26
|
"oxlint": "^0.15.0",
|
|
27
27
|
"tsdown": "^0.21.8",
|
|
28
|
-
"@camox/api": "0.
|
|
28
|
+
"@camox/api-contract": "0.7.1"
|
|
29
29
|
},
|
|
30
30
|
"scripts": {
|
|
31
31
|
"build": "tsdown",
|
package/template/components.json
CHANGED
package/template/package.json
CHANGED
|
@@ -33,22 +33,18 @@ function FooterComponent() {
|
|
|
33
33
|
<div className="container mx-auto px-4">
|
|
34
34
|
<div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-between">
|
|
35
35
|
<footer.Field name="title">
|
|
36
|
-
{(
|
|
36
|
+
{(props) => <div {...props} className="text-foreground text-lg font-bold" />}
|
|
37
37
|
</footer.Field>
|
|
38
38
|
|
|
39
39
|
<div className="flex flex-wrap items-center gap-4">
|
|
40
40
|
<footer.Repeater name="links">
|
|
41
41
|
{(linkItem) => (
|
|
42
42
|
<linkItem.Link name="link">
|
|
43
|
-
{(
|
|
43
|
+
{(props) => (
|
|
44
44
|
<Link
|
|
45
|
-
|
|
46
|
-
target={newTab ? "_blank" : undefined}
|
|
47
|
-
rel={newTab ? "noreferrer" : undefined}
|
|
45
|
+
{...props}
|
|
48
46
|
className="text-muted-foreground hover:text-foreground text-sm transition-colors"
|
|
49
|
-
|
|
50
|
-
{text}
|
|
51
|
-
</Link>
|
|
47
|
+
/>
|
|
52
48
|
)}
|
|
53
49
|
</linkItem.Link>
|
|
54
50
|
)}
|
|
@@ -33,27 +33,18 @@ function HeroComponent() {
|
|
|
33
33
|
<div className="container mx-auto px-4">
|
|
34
34
|
<div className="mx-auto max-w-3xl text-center">
|
|
35
35
|
<hero.Field name="title">
|
|
36
|
-
{(
|
|
37
|
-
<h1
|
|
38
|
-
{
|
|
39
|
-
|
|
36
|
+
{(props) => (
|
|
37
|
+
<h1
|
|
38
|
+
{...props}
|
|
39
|
+
className="text-foreground mb-6 text-5xl font-bold tracking-tight sm:text-6xl"
|
|
40
|
+
/>
|
|
40
41
|
)}
|
|
41
42
|
</hero.Field>
|
|
42
43
|
<hero.Field name="description">
|
|
43
|
-
{(
|
|
44
|
+
{(props) => <p {...props} className="text-muted-foreground mb-10 text-xl" />}
|
|
44
45
|
</hero.Field>
|
|
45
46
|
<hero.Link name="cta">
|
|
46
|
-
{(
|
|
47
|
-
<Button size="lg" asChild>
|
|
48
|
-
<Link
|
|
49
|
-
to={href}
|
|
50
|
-
target={newTab ? "_blank" : undefined}
|
|
51
|
-
rel={newTab ? "noreferrer" : undefined}
|
|
52
|
-
>
|
|
53
|
-
{text}
|
|
54
|
-
</Link>
|
|
55
|
-
</Button>
|
|
56
|
-
)}
|
|
47
|
+
{(props) => <Button size="lg" nativeButton={false} render={<Link {...props} />} />}
|
|
57
48
|
</hero.Link>
|
|
58
49
|
</div>
|
|
59
50
|
</div>
|
|
@@ -47,43 +47,25 @@ function NavbarComponent() {
|
|
|
47
47
|
<div className="container mx-auto px-4">
|
|
48
48
|
<div className="flex h-16 items-center justify-between">
|
|
49
49
|
<navbar.Link name="title">
|
|
50
|
-
{(
|
|
51
|
-
<Link className="text-foreground text-xl font-bold" to={link.href}>
|
|
52
|
-
{link.text}
|
|
53
|
-
</Link>
|
|
54
|
-
)}
|
|
50
|
+
{(props) => <Link {...props} className="text-foreground text-xl font-bold" />}
|
|
55
51
|
</navbar.Link>
|
|
56
52
|
|
|
57
53
|
<div className="flex items-center gap-6">
|
|
58
54
|
<navbar.Repeater name="links">
|
|
59
55
|
{(linkItem) => (
|
|
60
56
|
<linkItem.Link name="link">
|
|
61
|
-
{(
|
|
57
|
+
{(props) => (
|
|
62
58
|
<Link
|
|
63
|
-
|
|
64
|
-
target={newTab ? "_blank" : undefined}
|
|
65
|
-
rel={newTab ? "noreferrer" : undefined}
|
|
59
|
+
{...props}
|
|
66
60
|
className="text-muted-foreground hover:text-foreground text-sm transition-colors"
|
|
67
|
-
|
|
68
|
-
{text}
|
|
69
|
-
</Link>
|
|
61
|
+
/>
|
|
70
62
|
)}
|
|
71
63
|
</linkItem.Link>
|
|
72
64
|
)}
|
|
73
65
|
</navbar.Repeater>
|
|
74
66
|
|
|
75
67
|
<navbar.Link name="cta">
|
|
76
|
-
{(
|
|
77
|
-
<Button size="sm" asChild>
|
|
78
|
-
<Link
|
|
79
|
-
to={href}
|
|
80
|
-
target={newTab ? "_blank" : undefined}
|
|
81
|
-
rel={newTab ? "noreferrer" : undefined}
|
|
82
|
-
>
|
|
83
|
-
{text}
|
|
84
|
-
</Link>
|
|
85
|
-
</Button>
|
|
86
|
-
)}
|
|
68
|
+
{(props) => <Button size="sm" nativeButton={false} render={<Link {...props} />} />}
|
|
87
69
|
</navbar.Link>
|
|
88
70
|
</div>
|
|
89
71
|
</div>
|
|
@@ -51,20 +51,21 @@ function StatisticsComponent() {
|
|
|
51
51
|
<div className="mx-auto max-w-6xl">
|
|
52
52
|
<div className="mb-16">
|
|
53
53
|
<statistics.Field name="title">
|
|
54
|
-
{(
|
|
55
|
-
<div
|
|
56
|
-
{
|
|
57
|
-
|
|
54
|
+
{(props) => (
|
|
55
|
+
<div
|
|
56
|
+
{...props}
|
|
57
|
+
className="text-primary mb-4 text-sm font-semibold tracking-wider uppercase"
|
|
58
|
+
/>
|
|
58
59
|
)}
|
|
59
60
|
</statistics.Field>
|
|
60
61
|
<statistics.Field name="subtitle">
|
|
61
|
-
{(
|
|
62
|
-
<h2 className="text-foreground mb-6 text-4xl font-bold sm:text-5xl"
|
|
62
|
+
{(props) => (
|
|
63
|
+
<h2 {...props} className="text-foreground mb-6 text-4xl font-bold sm:text-5xl" />
|
|
63
64
|
)}
|
|
64
65
|
</statistics.Field>
|
|
65
66
|
<statistics.Field name="description">
|
|
66
|
-
{(
|
|
67
|
-
<p className="text-muted-foreground max-w-3xl text-lg leading-relaxed"
|
|
67
|
+
{(props) => (
|
|
68
|
+
<p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
|
|
68
69
|
)}
|
|
69
70
|
</statistics.Field>
|
|
70
71
|
</div>
|
|
@@ -76,13 +77,13 @@ function StatisticsComponent() {
|
|
|
76
77
|
<div className="w-0.5 bg-linear-to-b from-teal-400 to-blue-500" />
|
|
77
78
|
<div className="flex flex-col">
|
|
78
79
|
<stat.Field name="number">
|
|
79
|
-
{(
|
|
80
|
-
<div className="text-foreground mb-2 text-4xl font-bold"
|
|
80
|
+
{(props) => (
|
|
81
|
+
<div {...props} className="text-foreground mb-2 text-4xl font-bold" />
|
|
81
82
|
)}
|
|
82
83
|
</stat.Field>
|
|
83
84
|
<stat.Field name="label">
|
|
84
|
-
{(
|
|
85
|
-
<p className="text-muted-foreground text-sm leading-relaxed"
|
|
85
|
+
{(props) => (
|
|
86
|
+
<p {...props} className="text-muted-foreground text-sm leading-relaxed" />
|
|
86
87
|
)}
|
|
87
88
|
</stat.Field>
|
|
88
89
|
</div>
|
|
@@ -25,26 +25,25 @@ function TestimonialComponent() {
|
|
|
25
25
|
<div className="container mx-auto px-4">
|
|
26
26
|
<div className="mx-auto max-w-4xl text-center">
|
|
27
27
|
<testimonial.Field name="quote">
|
|
28
|
-
{(
|
|
29
|
-
<blockquote
|
|
30
|
-
|
|
28
|
+
{(props) => (
|
|
29
|
+
<blockquote
|
|
30
|
+
{...props}
|
|
31
|
+
className="text-foreground mb-8 text-2xl leading-relaxed font-medium sm:text-3xl"
|
|
32
|
+
>
|
|
33
|
+
"{props.children}"
|
|
31
34
|
</blockquote>
|
|
32
35
|
)}
|
|
33
36
|
</testimonial.Field>
|
|
34
37
|
<div className="flex flex-col items-center">
|
|
35
38
|
<testimonial.Field name="author">
|
|
36
|
-
{(
|
|
37
|
-
<cite className="text-foreground text-lg font-semibold not-italic"
|
|
39
|
+
{(props) => (
|
|
40
|
+
<cite {...props} className="text-foreground text-lg font-semibold not-italic" />
|
|
38
41
|
)}
|
|
39
42
|
</testimonial.Field>
|
|
40
43
|
<div className="text-muted-foreground flex flex-col sm:flex-row sm:items-center sm:gap-2">
|
|
41
|
-
<testimonial.Field name="title">
|
|
42
|
-
{(content) => <span>{content}</span>}
|
|
43
|
-
</testimonial.Field>
|
|
44
|
+
<testimonial.Field name="title">{(props) => <span {...props} />}</testimonial.Field>
|
|
44
45
|
<span className="hidden sm:inline">•</span>
|
|
45
|
-
<testimonial.Field name="company">
|
|
46
|
-
{(content) => <span>{content}</span>}
|
|
47
|
-
</testimonial.Field>
|
|
46
|
+
<testimonial.Field name="company">{(props) => <span {...props} />}</testimonial.Field>
|
|
48
47
|
</div>
|
|
49
48
|
</div>
|
|
50
49
|
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { StartClient } from "@tanstack/react-start/client";
|
|
2
|
+
import { StrictMode, startTransition } from "react";
|
|
3
|
+
import { hydrateRoot } from "react-dom/client";
|
|
4
|
+
|
|
5
|
+
startTransition(() => {
|
|
6
|
+
hydrateRoot(
|
|
7
|
+
document,
|
|
8
|
+
<StrictMode>
|
|
9
|
+
<StartClient />
|
|
10
|
+
</StrictMode>,
|
|
11
|
+
);
|
|
12
|
+
});
|
|
@@ -1,29 +1,36 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import type
|
|
3
|
-
import { cva } from "class-variance-authority";
|
|
4
|
-
import * as React from "react";
|
|
1
|
+
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
2
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
5
3
|
|
|
6
4
|
import { cn } from "@/lib/utils";
|
|
7
5
|
|
|
8
6
|
const buttonVariants = cva(
|
|
9
|
-
"inline-flex items-center justify-center
|
|
7
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
10
8
|
{
|
|
11
9
|
variants: {
|
|
12
10
|
variant: {
|
|
13
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/
|
|
14
|
-
destructive:
|
|
15
|
-
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
11
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
16
12
|
outline:
|
|
17
|
-
"border bg-background shadow-xs hover:bg-
|
|
18
|
-
secondary:
|
|
19
|
-
|
|
13
|
+
"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
14
|
+
secondary:
|
|
15
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
16
|
+
ghost:
|
|
17
|
+
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
18
|
+
destructive:
|
|
19
|
+
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
20
20
|
link: "text-primary underline-offset-4 hover:underline",
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
default:
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
default:
|
|
24
|
+
"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
25
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
26
|
+
sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
|
|
27
|
+
lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
26
28
|
icon: "size-9",
|
|
29
|
+
"icon-xs":
|
|
30
|
+
"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
|
|
31
|
+
"icon-sm":
|
|
32
|
+
"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
|
|
33
|
+
"icon-lg": "size-10",
|
|
27
34
|
},
|
|
28
35
|
},
|
|
29
36
|
defaultVariants: {
|
|
@@ -35,18 +42,12 @@ const buttonVariants = cva(
|
|
|
35
42
|
|
|
36
43
|
function Button({
|
|
37
44
|
className,
|
|
38
|
-
variant,
|
|
39
|
-
size,
|
|
40
|
-
asChild = false,
|
|
45
|
+
variant = "default",
|
|
46
|
+
size = "default",
|
|
41
47
|
...props
|
|
42
|
-
}:
|
|
43
|
-
VariantProps<typeof buttonVariants> & {
|
|
44
|
-
asChild?: boolean;
|
|
45
|
-
}) {
|
|
46
|
-
const Comp = asChild ? Slot : "button";
|
|
47
|
-
|
|
48
|
+
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
|
48
49
|
return (
|
|
49
|
-
<
|
|
50
|
+
<ButtonPrimitive
|
|
50
51
|
data-slot="button"
|
|
51
52
|
className={cn(buttonVariants({ variant, size, className }))}
|
|
52
53
|
{...props}
|
package/template/vite.config.ts
CHANGED
|
@@ -18,5 +18,9 @@ export default defineConfig(({ mode }) => {
|
|
|
18
18
|
react(),
|
|
19
19
|
babelPlugin({ presets: [reactCompilerPreset()] }),
|
|
20
20
|
],
|
|
21
|
+
optimizeDeps: {
|
|
22
|
+
// See https://github.com/TanStack/router/issues/5738#issuecomment-3512609172
|
|
23
|
+
include: ["@base-ui/utils"],
|
|
24
|
+
},
|
|
21
25
|
};
|
|
22
26
|
});
|