Skip to content

Commit 0ef8567

Browse files
huntabytehuntabyte
committed
toggle demo
1 parent 6bb1dd2 commit 0ef8567

21 files changed

+143
-128
lines changed

‎content/components/calendar.md

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ description: A calendar component.
2727
<Calendar.Heading />
2828
<Calendar.NextButton />
2929
</Calendar.Header>
30+
3031
{#each months as month}
3132
<Calendar.Grid>
3233
<Calendar.GridHead>

‎src/components/component-preview.svelte

+5-2
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,10 @@
6262
{/if}
6363
</Tabs.Trigger>
6464
</Tabs.List>
65-
<Tabs.Content value="code" class="focus-visible:outline-none">
65+
<Tabs.Content
66+
value="code"
67+
class="!focus-visible:ring-0 focus-visible:outline-none"
68+
>
6669
<div
6770
class="![&_pre]:mt-0 ![&_pre]:rounded-card w-full [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto"
6871
>
@@ -71,7 +74,7 @@
7174
</Tabs.Content>
7275
<Tabs.Content
7376
value="preview"
74-
class="relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none dark:bg-[#1f1f21]"
77+
class="!focus-visible:ring-0 relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none dark:bg-[#1f1f21]"
7578
>
7679
<div
7780
class={cn(

‎src/components/demos/accordion-demo.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
>
3232
{item.title}
3333
<span
34-
class="inline-flex h-8 w-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
34+
class="inline-flex items-center justify-center rounded-[7px] bg-transparent transition-all sq-8 hover:bg-dark-10"
3535
>
36-
<CaretDown class="h-[18px] w-[18px] transition-all duration-200" />
36+
<CaretDown class="transition-all duration-200 sq-[18px]" />
3737
</span>
3838
</Accordion.Trigger>
3939
</Accordion.Header>

‎src/components/demos/calendar-demo.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<Calendar.GridRow class="flex w-full justify-between">
3131
{#each daysOfWeek as day}
3232
<Calendar.HeadCell
33-
class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
33+
class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
3434
>
3535
<div>{day}</div>
3636
</Calendar.HeadCell>
@@ -43,12 +43,12 @@
4343
{#each weekDates as date}
4444
<Calendar.Cell
4545
{date}
46-
class="relative h-7 w-7 p-0 text-center text-sm"
46+
class="relative h-8 w-8 p-0 text-center text-sm"
4747
>
4848
<Calendar.Date
4949
{date}
5050
month={month.value}
51-
class="inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
51+
class="inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
5252
/>
5353
</Calendar.Cell>
5454
{/each}

‎src/components/demos/checkbox-demo.svelte

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88
<Checkbox.Root
99
id="terms"
1010
aria-labelledby="terms-label"
11-
class="peer inline-flex h-[25px] w-[25px] items-center justify-center rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
11+
class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
1212
checked="indeterminate"
1313
>
1414
<Checkbox.Indicator
1515
let:isChecked
1616
let:isIndeterminate
17-
class="inline-flex items-center justify-center"
17+
class="inline-flex items-center justify-center text-background"
1818
>
1919
{#if isChecked}
20-
<Check class="h-[15px] w-[15px] text-background" weight="bold" />
20+
<Check class="sq-[15px]" weight="bold" />
2121
{:else if isIndeterminate}
22-
<Minus class="h-[15px] w-[15px] text-background" weight="bold" />
22+
<Minus class="sq-[15px]" weight="bold" />
2323
{/if}
2424
</Checkbox.Indicator>
2525
</Checkbox.Root>

‎src/components/demos/collapsible-demo.svelte

+9-6
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,29 @@
88
<div class="flex items-center justify-between space-x-10">
99
<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
1010
<Collapsible.Trigger
11-
class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
11+
class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input bg-background text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
1212
>
13-
<CaretUpDown class="h-4 w-4 text-foreground" weight="bold" />
13+
<CaretUpDown class="sq-4 " weight="bold" />
1414
<span class="sr-only">Toggle</span>
1515
</Collapsible.Trigger>
1616
</div>
1717

18-
<Collapsible.Content class="space-y-2" transition={slide}>
18+
<Collapsible.Content
19+
class="space-y-2 font-mono text-[15px] tracking-[0.01em]"
20+
transition={slide}
21+
>
1922
<div
20-
class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
23+
class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
2124
>
2225
@huntabyte/bits-ui
2326
</div>
2427
<div
25-
class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
28+
class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
2629
>
2730
@huntabyte/shadcn-svelte
2831
</div>
2932
<div
30-
class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
33+
class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
3134
>
3235
@melt-ui/melt-ui
3336
</div>

‎src/components/demos/context-menu-demo.svelte

+17-17
Original file line numberDiff line numberDiff line change
@@ -24,101 +24,101 @@
2424
transition={flyAndScale}
2525
>
2626
<ContextMenu.Item
27-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
27+
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
2828
>
2929
<div class="flex items-center">
3030
<PencilSimpleLine class="mr-2 text-foreground-alt sq-5" />
3131
Edit
3232
</div>
3333
<div class="ml-auto flex items-center gap-px">
3434
<kbd
35-
class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
35+
class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd sq-5"
3636
>
3737
⌘
3838
</kbd>
3939
<kbd
40-
class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
40+
class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd sq-5"
4141
>
4242
E
4343
</kbd>
4444
</div>
4545
</ContextMenu.Item>
4646
<ContextMenu.Sub>
4747
<ContextMenu.SubTrigger
48-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
48+
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted data-[state=open]:bg-muted"
4949
>
5050
<div class="flex items-center">
5151
<PlusCircle class="mr-2 text-foreground-alt sq-5" />
5252
Add
5353
</div>
5454
<div class="ml-auto flex items-center gap-px">
5555
<kbd
56-
class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
56+
class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd sq-5"
5757
>
5858
⌘
5959
</kbd>
6060
<kbd
61-
class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
61+
class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd sq-5"
6262
>
6363
N
6464
</kbd>
6565
</div>
6666
</ContextMenu.SubTrigger>
6767
<ContextMenu.SubContent
68-
class="z-50 w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
68+
class="z-50 w-full max-w-[209px] select-none rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
6969
transition={flyAndScale}
7070
sideOffset={10}
7171
>
7272
<ContextMenu.Item
73-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
73+
class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
7474
>
7575
Header
7676
</ContextMenu.Item>
7777
<ContextMenu.Item
78-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
78+
class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
7979
>
8080
Paragraph
8181
</ContextMenu.Item>
8282
<ContextMenu.Item
83-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
83+
class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
8484
>
8585
Codeblock
8686
</ContextMenu.Item>
8787
<ContextMenu.Item
88-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
88+
class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
8989
>
9090
List
9191
</ContextMenu.Item>
9292
<ContextMenu.Item
93-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
93+
class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
9494
>
9595
Task
9696
</ContextMenu.Item>
9797
</ContextMenu.SubContent>
9898
</ContextMenu.Sub>
9999
<ContextMenu.Item
100-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
100+
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
101101
>
102102
<div class="flex items-center">
103103
<CopySimple class="mr-2 text-foreground-alt sq-5" />
104104
Duplicate
105105
</div>
106106
<div class="ml-auto flex items-center gap-px">
107107
<kbd
108-
class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
108+
class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd sq-5"
109109
>
110110
⌘
111111
</kbd>
112112
<kbd
113-
class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
113+
class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd sq-5"
114114
>
115115
D
116116
</kbd>
117117
</div>
118118
</ContextMenu.Item>
119-
<ContextMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
119+
<ContextMenu.Separator class="-mx-1 my-1 block h-px bg-muted" />
120120
<ContextMenu.Item
121-
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
121+
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
122122
>
123123
<div class="flex items-center">
124124
<Trash class="mr-2 text-foreground-alt sq-5" />

‎src/components/demos/date-picker-demo.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<DatePicker.Trigger
2525
class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
2626
>
27-
<CalendarBlank class="h-5 w-5" />
27+
<CalendarBlank class="sq-5" />
2828
</DatePicker.Trigger>
2929
</DatePicker.Input>
3030
<DatePicker.Content sideOffset={10} transition={flyAndScale}>
@@ -35,13 +35,13 @@
3535
>
3636
<DatePicker.CalendarHeader class="flex items-center justify-between">
3737
<DatePicker.CalendarPrevButton
38-
class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
38+
class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
3939
>
4040
<CaretLeft class="h-4 w-4" />
4141
</DatePicker.CalendarPrevButton>
4242
<DatePicker.CalendarHeading class="font-medium" />
4343
<DatePicker.CalendarNextButton
44-
class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
44+
class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
4545
>
4646
<CaretRight class="h-4 w-4" />
4747
</DatePicker.CalendarNextButton>

‎src/components/demos/dialog-demo.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
autocomplete="off"
4545
/>
4646
<LockKeyOpen
47-
class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
47+
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
4848
/>
4949
</div>
5050
</div>
@@ -59,7 +59,7 @@
5959
class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
6060
>
6161
<div>
62-
<X class="h-5 w-5 text-foreground" />
62+
<X class="text-foreground sq-5" />
6363
<span class="sr-only">Close</span>
6464
</div>
6565
</Dialog.Close>

0 commit comments

Comments
 (0)