Skip to content

Commit 31eaa9f

Browse files
irsyadadlirsyadadl
authored
Merge pull request #358 from irsyadadl/next
Next
2 parents f56cfb3 + 8be3500 commit 31eaa9f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+139
-195
lines changed

Diff for: ‎app/(app)/colors/(colors)/color-generator.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export function ColorGenerator() {
128128
textValue={colorValue}
129129
onAction={() => handleCopy(colorValue, shade)}
130130
key={colorValue?.toString()}
131-
className="group relative inset-shadow-white/15 inset-shadow-xs flex h-20 w-1/7 min-w-10 cursor-pointer items-end justify-center gap-x-2 rounded-lg p-2 font-mono text-xs ring-1 ring-white/10 ring-inset focus:outline-hidden data-focused:ring-white/25 *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:mx-auto *:data-[slot=icon]:hidden *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:opacity-90 *:data-[slot=icon]:group-hover:block *:data-[slot=icon]:group-data-focus-visible:block sm:w-full"
131+
className="group relative inset-shadow-white/15 inset-shadow-xs flex h-20 w-1/7 min-w-10 cursor-pointer items-end justify-center gap-x-2 rounded-lg p-2 font-mono text-xs ring-1 ring-white/10 ring-inset focus:outline-hidden focus:ring-white/25 *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:mx-auto *:data-[slot=icon]:hidden *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:opacity-90 *:data-[slot=icon]:group-hover:block *:data-[slot=icon]:group-data-focus-visible:block sm:w-full"
132132
style={{
133133
color: getTextColor(colorValue),
134134
backgroundColor: colorValue,

Diff for: ‎app/(app)/colors/(colors)/color-item.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export function ColorItem({ color }: { color: keyof typeof colors }) {
7979
textValue={colorValue}
8080
onAction={() => handleCopy(colorValue, shade)}
8181
key={colorValue?.toString()}
82-
className="group relative inset-shadow-white/15 inset-shadow-xs flex h-20 w-1/7 min-w-10 cursor-pointer items-end justify-center gap-x-2 rounded-lg p-2 font-mono text-xs ring-1 ring-white/10 ring-inset focus:outline-hidden data-focused:ring-white/25 *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:mx-auto *:data-[slot=icon]:hidden *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:opacity-90 *:data-[slot=icon]:group-hover:block *:data-[slot=icon]:group-data-focus-visible:block sm:w-full"
82+
className="group relative inset-shadow-white/15 inset-shadow-xs flex h-20 w-1/7 min-w-10 cursor-pointer items-end justify-center gap-x-2 rounded-lg p-2 font-mono text-xs ring-1 ring-white/10 ring-inset focus:outline-hidden focus:ring-white/25 *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:mx-auto *:data-[slot=icon]:hidden *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:opacity-90 *:data-[slot=icon]:group-hover:block *:data-[slot=icon]:group-data-focus-visible:block sm:w-full"
8383
style={{
8484
color: getTextColor(colorValue),
8585
backgroundColor: colorValue,

Diff for: ‎app/(app)/icons/partials/styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const styles = tv({
55
box: "flex flex-wrap justify-around gap-4",
66
item: [
77
"grid size-8 cursor-pointer place-content-center rounded-md text-fg/80 sm:size-14",
8-
"data-focused:bg-primary data-focused:text-primary-fg data-focused:outline-hidden",
8+
"focus:bg-primary focus:text-primary-fg focus:outline-hidden",
99
"selected:bg-primary selected:text-primary-fg",
1010
"data-[open=true]:bg-primary data-[open=true]:text-primary-fg",
1111
"hover:bg-secondary hover:text-secondary-fg",

Diff for: ‎app/(app)/showcase/partials/list-sites.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function ListSites({ sites }: Props) {
2727
<ListBoxItem
2828
rel="nofollow"
2929
target="_blank"
30-
className="flex items-center gap-x-3 rounded-lg bg-secondary/70 px-3 py-2.5 ring-1 ring-border transition hover:bg-secondary data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-ring"
30+
className="flex items-center gap-x-3 rounded-lg bg-secondary/70 px-3 py-2.5 ring-1 ring-border transition hover:bg-secondary focus:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-ring"
3131
textValue={item.name}
3232
href={`${item.url}?ref=getjustd.com/showcase`}
3333
id={getSiteName(item.url)}

Diff for: ‎app/layout.tsx

-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Providers } from "@/components/providers"
44
import { siteConfig } from "@/resources/config/site"
55
import { cn } from "@/utils/classes"
66
import "@/resources/styles/app.css"
7-
import { OpenPanelComponent } from "@openpanel/nextjs"
87
import type { Metadata, Viewport } from "next"
98
import { Geist_Mono } from "next/font/google"
109
import localFont from "next/font/local"
@@ -81,14 +80,6 @@ export default function RootLayout({
8180
<Providers>
8281
<Toast />
8382
<main>{children}</main>
84-
{process.env.NODE_ENV === "production" && (
85-
<OpenPanelComponent
86-
clientSecret={process.env.ANALYTICS_CLIENT_SECRET as string}
87-
clientId={process.env.ANALYTICS_CLIENT_ID as string}
88-
trackScreenViews={true}
89-
trackAttributes={true}
90-
/>
91-
)}
9283
</Providers>
9384
</body>
9485
</html>

Diff for: ‎bun.lockb

-1.19 KB
Binary file not shown.

Diff for: ‎components/aside.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function AsideLink({ href, ...props }: AsideLinkProps) {
4747
ref={ref as any}
4848
className={twMerge(
4949
"-ml-3 mb-0.5 flex items-center justify-between rounded-lg px-3 py-1.5 text-base text-muted-fg sm:text-sm",
50-
"data-focused:outline-hidden",
50+
"focus:outline-hidden",
5151
"hover:bg-muted hover:text-secondary-fg",
5252
isActive && [
5353
"font-medium",

Diff for: ‎components/code/anatomy.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React, { useState } from "react"
44

55
import { CodeHighlighter } from "@/components/code/code-highlighter"
6-
import { CopyMotionButton } from "@/components/code/copy-button"
6+
import { CopyButton } from "@/components/code/copy-button"
77
import { extractImports, extractJSX } from "@/resources/lib/utils"
88
import { Group } from "react-aria-components"
99

@@ -37,7 +37,7 @@ export const Anatomy = ({ show, ...props }: AnatomyProps) => {
3737
}, [show])
3838
if (processedSourceCode) {
3939
return (
40-
<section className="not-prose my-6">
40+
<section className="not-prose group/how my-6">
4141
<p className="-mt-2 mb-4">
4242
{props.message
4343
? props.message
@@ -47,7 +47,7 @@ export const Anatomy = ({ show, ...props }: AnatomyProps) => {
4747
{processedSourceCode && (
4848
<>
4949
<Group className="group relative">
50-
<CopyMotionButton
50+
<CopyButton
5151
className="absolute top-2 right-1.5"
5252
text={extractImports(processedSourceCode as string)}
5353
/>
@@ -60,7 +60,7 @@ export const Anatomy = ({ show, ...props }: AnatomyProps) => {
6060
/>
6161
</Group>
6262
<Group className="group relative mt-4">
63-
<CopyMotionButton
63+
<CopyButton
6464
className="absolute top-2 right-1.5"
6565
text={extractJSX(processedSourceCode as string) as any}
6666
/>

Diff for: ‎components/code/copy-button.tsx

+19-50
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"
22

33
import { copyToClipboard } from "@/resources/lib/copy"
44
import { cn } from "@/utils/classes"
5+
import { IconCheck, IconDuplicate } from "justd-icons"
56
import { Button } from "react-aria-components"
67
import { composeTailwindRenderProps } from "ui"
78

@@ -56,58 +57,26 @@ export function CopyButton({
5657
)}
5758
{...props}
5859
>
59-
{isCopied ? <ClipboardCheck /> : <Clipboard />}
60+
{isCopied ? <IconCheck /> : <IconDuplicate />}
6061
</Button>
6162
)
6263
}
6364

64-
function Clipboard() {
65-
return (
66-
<svg
67-
xmlns="http://www.w3.org/2000/svg"
68-
width={16}
69-
height={16}
70-
fill="currentColor"
71-
className="size-3.5"
72-
viewBox="0 0 16 16"
73-
>
74-
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z" />
75-
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z" />
76-
</svg>
77-
)
78-
}
79-
80-
function ClipboardCheck() {
81-
return (
82-
<svg
83-
xmlns="http://www.w3.org/2000/svg"
84-
width={16}
85-
height={16}
86-
fill="currentColor"
87-
className="size-3.5"
88-
viewBox="0 0 16 16"
89-
>
90-
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5z" />
91-
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708" />
92-
</svg>
93-
)
94-
}
95-
96-
function ClipboardIcon(props: React.ComponentPropsWithoutRef<"svg">) {
97-
return (
98-
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
99-
<path
100-
strokeWidth="0"
101-
d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
102-
/>
103-
<path
104-
fill="none"
105-
strokeLinejoin="round"
106-
d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
107-
/>
108-
</svg>
109-
)
110-
}
65+
// function ClipboardIcon(props: React.ComponentPropsWithoutRef<"svg">) {
66+
// return (
67+
// <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
68+
// <path
69+
// strokeWidth="0"
70+
// d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
71+
// />
72+
// <path
73+
// fill="none"
74+
// strokeLinejoin="round"
75+
// d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
76+
// />
77+
// </svg>
78+
// )
79+
// }
11180

11281
export function CopyMotionButton({ className, text }: { className?: string; text: string }) {
11382
const [copyCount, setCopyCount] = useState(0)
@@ -126,7 +95,7 @@ export function CopyMotionButton({ className, text }: { className?: string; text
12695
<button
12796
type="button"
12897
className={cn(
129-
"group/button -top-0.5 absolute right-0 overflow-hidden rounded-sm py-1 pr-2.5 pl-1.5 font-medium text-[0.70rem]/[1.20rem] opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100 group-data-hovered/tabs:opacity-100",
98+
"group/button -top-0.5 absolute right-0 overflow-hidden rounded-sm py-1 pr-2.5 pl-1.5 font-medium text-[0.70rem]/[1.20rem] opacity-0 backdrop-blur transition focus:opacity-100 group-hover/how:opacity-100",
13099
copied
131100
? "bg-blue-400/10 ring-1 ring-blue-400/20 ring-inset"
132101
: "bg-secondary/80 text-secondary-fg ring-1 ring-fg/10 ring-inset",
@@ -145,7 +114,7 @@ export function CopyMotionButton({ className, text }: { className?: string; text
145114
copied && "-translate-y-1.5 opacity-0",
146115
)}
147116
>
148-
<ClipboardIcon className="size-5 fill-zinc-600/20 stroke-zinc-600 transition-colors group-hover/button:stroke-zinc-500 dark:fill-zinc-500/20 dark:stroke-zinc-500 dark:group-hover/button:stroke-zinc-400" />
117+
<IconDuplicate className="size-3.5 fill-zinc-600/20 stroke-zinc-600 transition-colors group-hover/button:stroke-zinc-500 dark:fill-zinc-500/20 dark:stroke-zinc-500 dark:group-hover/button:stroke-zinc-400" />
149118
Copy
150119
</span>
151120
<span

Diff for: ‎components/code/doc-how.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,11 @@ export const DocHow = ({
7474
}
7575
const divProps = { ...props } as React.HTMLProps<HTMLDivElement>
7676
return (
77-
<div className={cn("not-prose forced-color-adjust-non relative my-4", className)} {...divProps}>
78-
<Tabs className="group" aria-label="Packages">
77+
<div
78+
className={cn("not-prose group/how forced-color-adjust-non relative my-4", className)}
79+
{...divProps}
80+
>
81+
<Tabs aria-label="Packages">
7982
<TabsList copyButton={copyButton} code={processedSourceCode as string} src={src} />
8083
<Tabs.Panel className="w-full" id="preview">
8184
<div

Diff for: ‎components/code/plain-code.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
useCallback,
1313
useRef,
1414
} from "react"
15+
import { twMerge } from "tailwind-merge"
1516
import { buttonStyles } from "ui"
1617

1718
export type PreProps = HTMLAttributes<HTMLElement> & {
@@ -108,7 +109,7 @@ export const PlainCode = ({
108109
</div>
109110
) : (
110111
allowCopy && (
111-
<CopyButton className="absolute top-2 right-2 z-[2] backdrop-blur-md" onCopy={onCopy} />
112+
<CopyButton className="absolute top-0 right-0 z-[2] backdrop-blur-md" onCopy={onCopy} />
112113
)
113114
)}
114115
<ScrollArea ref={areaRef} className="w-full" dir="ltr">
@@ -140,19 +141,18 @@ function CopyButton({
140141
buttonStyles({
141142
size: "square-petite",
142143
intent: "plain",
144+
className: twMerge(
145+
"transition-opacity hover:bg-transparent group-hover:opacity-100",
146+
!checked && "opacity-0",
147+
className,
148+
),
143149
}),
144-
"transition-opacity group-hover:opacity-100",
145-
!checked && "opacity-0",
146-
className,
147150
)}
148151
aria-label="Copy Text"
149152
onClick={onClick}
150153
{...props}
151154
>
152-
<IconCheck className={cn("size-3.5 transition-transform", !checked && "scale-0")} />
153-
<IconDuplicate
154-
className={cn("absolute size-3.5 transition-transform", checked && "scale-0")}
155-
/>
155+
{checked ? <IconCheck /> : <IconDuplicate />}
156156
</button>
157157
)
158158
}

Diff for: ‎components/docs/buttons/button/button-intent-demo.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
"use client"
2+
23
import { Button } from "ui"
34

45
export default function ButtonIntentDemo() {
56
return (
6-
<div className="flex max-w-sm flex-wrap gap-2">
7-
<Button intent="primary">Label</Button>
8-
<Button intent="secondary">Label</Button>
9-
<Button intent="warning">Label</Button>
10-
<Button intent="danger">Label</Button>
11-
<Button intent="outline">Label</Button>
12-
<Button intent="plain">Label</Button>
7+
<div className="grid grid-cols-2 gap-2 *:flex *:flex-col *:gap-y-2">
8+
<div>
9+
<Button intent="primary">Label</Button>
10+
<Button intent="secondary">Label</Button>
11+
<Button intent="warning">Label</Button>
12+
</div>
13+
<div>
14+
<Button intent="danger">Label</Button>
15+
<Button intent="outline">Label</Button>
16+
<Button intent="plain">Label</Button>
17+
</div>
1318
</div>
1419
)
1520
}

Diff for: ‎components/docs/media/carousel-api-demo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function CarouselDApiDemo() {
4848
{Array.from({ length: 10 }).map((_, index) => (
4949
<Button
5050
className={twJoin(
51-
"rounded-xl transition data-focused:outline-hidden",
51+
"rounded-xl transition focus:outline-hidden",
5252
current === index + 1
5353
? "h-3 w-5 bg-primary transition-all hover:bg-primary/80"
5454
: "h-3 w-3 bg-fg/10 hover:bg-fg/15",

Diff for: ‎components/docs/overlays/tooltip/tooltip-placement-demo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type Placement = Pick<TooltipProps, "placement">["placement"]
77
const placements: Placement[] = ["bottom", "top", "left", "start", "right", "end"]
88
export default function TooltipPlacementDemo() {
99
return (
10-
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6 [&_.kbt32x]:w-full">
10+
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6 **:[button]:w-full">
1111
{placements.map((placement, idx) => (
1212
<Tooltip key={idx}>
1313
<Button className="mx-auto" size="small" intent="outline">

Diff for: ‎components/docs/pickers/select/select-searchable-demo.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client"
22

3-
import { useFilter } from "react-aria"
4-
import { Autocomplete } from "react-aria-components"
3+
import { Autocomplete, useFilter } from "react-aria-components"
54
import { ListBox, PopoverContent, SearchField, Select } from "ui"
65
const languages = [
76
{ id: "en", name: "English" },

Diff for: ‎components/experimental/cmd.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export function CmdK() {
6565
return (
6666
<>
6767
<Button
68-
className="flex items-center gap-1 self-center rounded px-4 py-2 text-stone-800 ring-stone-600 ring-offset-2 transition hover:bg-stone-100 focus-visible:ring-3 data-focused:outline-hidden"
68+
className="flex items-center gap-1 self-center rounded px-4 py-2 text-stone-800 ring-stone-600 ring-offset-2 transition hover:bg-stone-100 focus:outline-hidden focus-visible:ring-3"
6969
onPress={() => setOpen(true)}
7070
>
7171
<kbd className="rounded-md border border-stone-400 border-b-2 p-1">cmd+k</kbd>
@@ -76,7 +76,7 @@ export function CmdK() {
7676
className="entering:fade-in fixed inset-0 z-10 flex min-h-full entering:animate-in justify-center overflow-y-auto bg-black/25 p-4 pt-[33dvh] text-center backdrop-blur-sm duration-150"
7777
>
7878
<Modal>
79-
<Dialog className="data-focused:outline-hidden" aria-label="command bar">
79+
<Dialog className="focus:outline-hidden" aria-label="command bar">
8080
<ComboBox
8181
aria-label="command bar"
8282
items={filteredItems}
@@ -92,7 +92,7 @@ export function CmdK() {
9292
ref={inputRef}
9393
aria-label="Search for apps, files, anything..."
9494
placeholder="Search for apps, files, anything..."
95-
className="w-[66vw] rounded-t-lg bg-stone-100 p-3 text-stone-800 data-focused:outline-hidden"
95+
className="w-[66vw] rounded-t-lg bg-stone-100 p-3 text-stone-800 focus:outline-hidden"
9696
/>
9797
{filteredItems.length === 0 ? (
9898
<Text
@@ -114,7 +114,7 @@ export function CmdK() {
114114
{(i: (typeof items)[number]) => (
115115
<ListBoxItem
116116
textValue={i.name}
117-
className="flex items-center gap-4 rounded-md p-2 data-focused:bg-stone-200"
117+
className="flex items-center gap-4 rounded-md p-2 focus:bg-stone-200"
118118
>
119119
{i.name}
120120
</ListBoxItem>

0 commit comments

Comments
 (0)