Skip to content
This repository was archived by the owner on Nov 20, 2025. It is now read-only.

Commit 1db0810

Browse files
Merge branch 'update-example-project' into canary
2 parents 21d1c1b + 41e3447 commit 1db0810

File tree

19 files changed

+471
-464
lines changed

19 files changed

+471
-464
lines changed
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import "@/styles/globals.css";
2-
import "section-blog-theme/styles.css";
1+
import "section-blog-theme/styles.css"
2+
import '@/styles/globals.css'
33
export default function App({ Component, pageProps }) {
44
return <Component {...pageProps} />;
55
}

examples/demo-section-blog/src/pages/index.mdx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis eros vit
3838
3939
Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis dolor, quis lacinia purus enim sed mauris. Nam viverra justo lectus, sit amet ultrices odio sodales eu.
4040

41+
<Space h={"sm"} />
42+
43+
4144
## Icons
4245

46+
4347
<div className="flex flex-row justify-between">
4448
<AlertTriangle />
4549
<Ban />
@@ -54,6 +58,7 @@ Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis d
5458
<Braces />
5559
</div>
5660

61+
5762
## Alert
5863

5964
<Alert>
@@ -65,9 +70,11 @@ Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis d
6570
</AlertDescription>
6671
</Alert>
6772

73+
6874
## Tabs
6975

7076
<Tabs defaultValue="npm" className="w-full md:w-[624px]">
77+
7178
<TabsList>
7279
<TabsTrigger className="mx-1" value="npm">NPM</TabsTrigger>
7380
<TabsTrigger className="mx-1" value="yarn">Yarn</TabsTrigger>
@@ -91,14 +98,15 @@ Aenean gravida, lacus non gravida fermentum, ante enim `console.log` facilisis d
9198

9299
</Tabs>
93100

101+
<Space h={"sm"} />
102+
94103
## Code Block
95104

96105
```js filename="example.js"
97106
function MyButton() {
98107
return <button>I'm a button</button>;
99108
}
100109
```
101-
102110
## Space
103111
104112
<Space h={"sm"} />
@@ -107,6 +115,8 @@ function MyButton() {
107115
108116
<Separator />
109117
118+
<Space h={"sm"} />
119+
110120
## Follow me
111121
112122
<div className="flex justify-between" id="badges">

examples/demo-section-blog/src/pages/posts/makdown.mdx

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,37 +77,45 @@ Superscript: X<sub>2</sub>Subscript: O<sup>2</sup>
7777
2. Item B
7878
3. Item C
7979

80-
### Tables
80+
## Tables
8181

8282
First table
83+
84+
First Header | Second Header
85+
------------- | -------------
86+
Content Cell | Content Cell
87+
Content Cell | Content Cell
8388

84-
| First Header | Second Header |
85-
| ------------ | ------------- |
86-
| Content Cell | Content Cell |
87-
| Content Cell | Content Cell |
8889

89-
Second table
90+
### Second table
9091

91-
| Function name | Description |
92-
| ------------- | -------------------------- |
93-
| `help()` | Display the help window. |
94-
| `destroy()` | **Destroy your computer!** |
9592

96-
Third table
93+
| Function name | Description |
94+
| ------------- | ------------------------------ |
95+
| `help()` | Display the help window. |
96+
| `destroy()` | **Destroy your computer!** |
97+
98+
99+
### Third table
100+
101+
102+
| Item | Value |
103+
| --------- | -----:|
104+
| Computer | $1600 |
105+
| Phone | $12 |
106+
| Pipe | $1 |
97107

98-
| Item | Value |
99-
| -------- | ----: |
100-
| Computer | $1600 |
101-
| Phone | $12 |
102-
| Pipe | $1 |
103108

104109
Four table
105110

111+
106112
| Left-Aligned | Center Aligned | Right Aligned |
107-
| :------------ | :-------------: | ------------: |
108-
| col 3 is | some wordy text | $1600 |
109-
| col 2 is | centered | $12 |
110-
| zebra stripes | are neat | $1 |
113+
| :------------ |:---------------:| -----:|
114+
| col 3 is | some wordy text | $1600 |
115+
| col 2 is | centered | $12 |
116+
| zebra stripes | are neat | $1 |
117+
118+
111119

112120
### GFM task list
113121

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import * as React from "react";
2-
import { cva, type VariantProps } from "class-variance-authority";
1+
import * as React from "react"
2+
import { cva, type VariantProps } from "class-variance-authority"
33

4-
import { cn } from "@/utility/utils";
4+
import { cn } from "@/utility/utils"
55

66
const alertVariants = cva(
7-
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
7+
"nx-relative nx-w-full nx-rounded-lg nx-border nx-px-4 nx-py-3 nx-text-sm [&>svg+div]:nx-translate-y-[-3px] [&>svg]:nx-absolute [&>svg]:nx-left-4 [&>svg]:nx-top-4 [&>svg]:nx-text-foreground [&>svg~*]:nx-pl-7",
88
{
99
variants: {
1010
variant: {
11-
default: "bg-background text-foreground",
11+
default: "nx-bg-background nx-text-foreground",
1212
destructive:
13-
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
13+
"nx-border-destructive/50 nx-text-destructive dark:nx-border-destructive [&>svg]:nx-text-destructive",
1414
},
1515
},
1616
defaultVariants: {
1717
variant: "default",
1818
},
19-
},
20-
);
19+
}
20+
)
2121

2222
const Alert = React.forwardRef<
2323
HTMLDivElement,
@@ -29,31 +29,31 @@ const Alert = React.forwardRef<
2929
className={cn(alertVariants({ variant }), className)}
3030
{...props}
3131
/>
32-
));
33-
Alert.displayName = "Alert";
32+
))
33+
Alert.displayName = "Alert"
3434

3535
const AlertTitle = React.forwardRef<
3636
HTMLParagraphElement,
3737
React.HTMLAttributes<HTMLHeadingElement>
3838
>(({ className, ...props }, ref) => (
3939
<h5
4040
ref={ref}
41-
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
41+
className={cn("nx-mb-1 nx-font-medium nx-leading-none nx-tracking-tight", className)}
4242
{...props}
4343
/>
44-
));
45-
AlertTitle.displayName = "AlertTitle";
44+
))
45+
AlertTitle.displayName = "AlertTitle"
4646

4747
const AlertDescription = React.forwardRef<
4848
HTMLParagraphElement,
4949
React.HTMLAttributes<HTMLParagraphElement>
5050
>(({ className, ...props }, ref) => (
5151
<div
5252
ref={ref}
53-
className={cn("text-sm [&_p]:leading-relaxed", className)}
53+
className={cn("nx-text-sm [&_p]:nx-leading-relaxed", className)}
5454
{...props}
5555
/>
56-
));
57-
AlertDescription.displayName = "AlertDescription";
56+
))
57+
AlertDescription.displayName = "AlertDescription"
5858

59-
export { Alert, AlertTitle, AlertDescription };
59+
export { Alert, AlertTitle, AlertDescription }
Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import * as React from "react";
2-
import * as AvatarPrimitive from "@radix-ui/react-avatar";
1+
import * as React from "react"
2+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
33

4-
import { cn } from "@/utility/utils";
4+
import { cn } from "@/utility/utils"
55

66
const Avatar = React.forwardRef<
77
React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -10,25 +10,25 @@ const Avatar = React.forwardRef<
1010
<AvatarPrimitive.Root
1111
ref={ref}
1212
className={cn(
13-
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
14-
className,
13+
"nx-relative nx-flex nx-h-10 nx-w-10 nx-shrink-0 nx-overflow-hidden nx-rounded-full",
14+
className
1515
)}
1616
{...props}
1717
/>
18-
));
19-
Avatar.displayName = AvatarPrimitive.Root.displayName;
18+
))
19+
Avatar.displayName = AvatarPrimitive.Root.displayName
2020

2121
const AvatarImage = React.forwardRef<
2222
React.ElementRef<typeof AvatarPrimitive.Image>,
2323
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
2424
>(({ className, ...props }, ref) => (
2525
<AvatarPrimitive.Image
2626
ref={ref}
27-
className={cn("aspect-square h-full w-full", className)}
27+
className={cn("nx-aspect-square nx-h-full nx-w-full", className)}
2828
{...props}
2929
/>
30-
));
31-
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
30+
))
31+
AvatarImage.displayName = AvatarPrimitive.Image.displayName
3232

3333
const AvatarFallback = React.forwardRef<
3434
React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -37,12 +37,12 @@ const AvatarFallback = React.forwardRef<
3737
<AvatarPrimitive.Fallback
3838
ref={ref}
3939
className={cn(
40-
"flex h-full w-full items-center justify-center rounded-full bg-muted",
41-
className,
40+
"nx-flex nx-h-full nx-w-full nx-items-center nx-justify-center nx-rounded-full nx-bg-muted",
41+
className
4242
)}
4343
{...props}
4444
/>
45-
));
46-
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
45+
))
46+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
4747

48-
export { Avatar, AvatarImage, AvatarFallback };
48+
export { Avatar, AvatarImage, AvatarFallback }
Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,57 @@
1-
import * as React from "react";
2-
import { Slot } from "@radix-ui/react-slot";
3-
import { cva, type VariantProps } from "class-variance-authority";
4-
import { cn } from "@/utility/utils";
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/utility/utils"
56

67
const buttonVariants = cva(
7-
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
8+
"nx-inline-flex nx-items-center nx-justify-center nx-whitespace-nowrap nx-rounded-md nx-text-sm nx-font-medium nx-transition-colors focus-visible:nx-outline-none focus-visible:nx-ring-1 focus-visible:nx-ring-ring disabled:nx-pointer-events-none disabled:nx-opacity-50",
89
{
910
variants: {
1011
variant: {
1112
default:
12-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
13+
"nx-bg-primary nx-text-primary-foreground nx-shadow hover:nx-bg-primary/90",
1314
destructive:
14-
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
15+
"nx-bg-destructive nx-text-destructive-foreground nx-shadow-sm hover:nx-bg-destructive/90",
1516
outline:
16-
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
17+
"nx-border nx-border-input nx-bg-background nx-shadow-sm hover:nx-bg-accent hover:nx-text-accent-foreground",
1718
secondary:
18-
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
19-
ghost: "hover:bg-accent hover:text-accent-foreground",
20-
link: "text-primary underline-offset-4 hover:underline",
19+
"nx-bg-secondary nx-text-secondary-foreground nx-shadow-sm hover:nx-bg-secondary/80",
20+
ghost: "hover:nx-bg-accent hover:nx-text-accent-foreground",
21+
link: "nx-text-primary nx-underline-offset-4 hover:nx-underline",
2122
},
2223
size: {
23-
default: "h-9 px-4 py-2",
24-
sm: "h-8 rounded-md px-3 text-xs",
25-
lg: "h-10 rounded-md px-8",
26-
icon: "h-9 w-9",
24+
default: "nx-h-9 nx-px-4 nx-py-2",
25+
sm: "nx-h-8 nx-rounded-md nx-px-3 nx-text-xs",
26+
lg: "nx-h-10 nx-rounded-md nx-px-8",
27+
icon: "nx-h-9 nx-w-9",
2728
},
2829
},
2930
defaultVariants: {
3031
variant: "default",
3132
size: "default",
3233
},
33-
},
34-
);
34+
}
35+
)
3536

3637
export interface ButtonProps
3738
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
3839
VariantProps<typeof buttonVariants> {
39-
asChild?: boolean;
40+
asChild?: boolean
4041
}
4142

4243
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
4344
({ className, variant, size, asChild = false, ...props }, ref) => {
44-
const Comp = asChild ? Slot : "button";
45+
const Comp = asChild ? Slot : "button"
4546
return (
4647
<Comp
4748
className={cn(buttonVariants({ variant, size, className }))}
4849
ref={ref}
4950
{...props}
5051
/>
51-
);
52-
},
53-
);
54-
Button.displayName = "Button";
52+
)
53+
}
54+
)
55+
Button.displayName = "Button"
5556

56-
export { Button, buttonVariants };
57+
export { Button, buttonVariants }

0 commit comments

Comments
 (0)