Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: pagination overflowing #614

Merged
merged 8 commits into from
Jan 7, 2024
Merged

fix: pagination overflowing #614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
105daa1
Only show current page and ellipsis on small screen
HubbeDev Jan 6, 2024
b68f222
Rename prop & made it optional
HubbeDev Jan 6, 2024
9c3ee43
Added isVisible prop to docs example
HubbeDev Jan 6, 2024
43b3b9f
Some cleanup and new-york version update
HubbeDev Jan 6, 2024
69dee82
Move logic outside of components.
HubbeDev Jan 7, 2024
83772c4
Test to get svelte-legos mediaQuery to work
HubbeDev Jan 7, 2024
b440d28
Merge branch 'main' into docs/pagination-overflowing
HubbeDev Jan 7, 2024
c35e887
update bits-ui to fix pagination bug
huntabyte Jan 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
"@internationalized/date": "^3.5.1",
"@unovis/svelte": "^1.3.1",
"@unovis/ts": "^1.3.1",
"bits-ui": "0.13.3",
"bits-ui": "0.13.4",
"clsx": "^2.1.0",
"cmdk-sv": "^0.0.12",
"d3-scale": "^4.0.2",
Expand Down
10 changes: 5 additions & 5 deletions apps/www/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion apps/www/src/content/components/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ npm install bits-ui
<Pagination.Ellipsis />
</Pagination.Item>
{:else}
<Pagination.Item>
<Pagination.Item isVisible={currentPage == page.value}>
<Pagination.Link {page} isActive={currentPage == page.value}>
{page.value}
</Pagination.Link>
Expand Down
21 changes: 16 additions & 5 deletions apps/www/src/lib/registry/default/example/pagination-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
<script lang="ts">
import * as Pagination from "@/registry/default/ui/pagination";
import { ChevronLeft, ChevronRight } from "lucide-svelte";
import { mediaQuery } from "svelte-legos";

let count = 100;
let perPage = 10;
const isDesktop = mediaQuery("(min-width: 768px)");

let count = 20;
$: perPage = $isDesktop ? 3 : 8;
$: siblingCount = $isDesktop ? 1 : 0;
</script>

<Pagination.Root {count} {perPage} let:pages let:currentPage>
<Pagination.Root {count} {perPage} {siblingCount} let:pages let:currentPage>
<Pagination.Content>
<Pagination.Item>
<Pagination.PrevButton />
<Pagination.PrevButton>
<ChevronLeft class="h-4 w-4" />
<span class="hidden sm:block">Previous</span>
</Pagination.PrevButton>
</Pagination.Item>
{#each pages as page (page.key)}
{#if page.type === "ellipsis"}
Expand All @@ -27,7 +35,10 @@
{/if}
{/each}
<Pagination.Item>
<Pagination.NextButton />
<Pagination.NextButton>
<span class="hidden sm:block">Next</span>
<ChevronRight class="h-4 w-4" />
</Pagination.NextButton>
</Pagination.Item>
</Pagination.Content>
</Pagination.Root>
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/ui/pagination/pagination-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import type { HTMLAttributes } from "svelte/elements";

type $$Props = HTMLAttributes<HTMLLIElement>;

let className: $$Props["class"] = undefined;

export { className as class };
</script>

Expand Down
8 changes: 5 additions & 3 deletions apps/www/src/lib/registry/default/ui/pagination/pagination-next-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
<PaginationPrimitive.NextButton asChild let:builder>
<Button
variant="ghost"
class={cn("gap-1 pl-2.5", className)}
class={cn("gap-1 pr-2.5", className)}
builders={[builder]}
on:click
{...$$restProps}
>
<span>Next</span>
<ChevronRight class="h-4 w-4" />
<slot>
<span>Next</span>
<ChevronRight class="h-4 w-4" />
</slot>
</Button>
</PaginationPrimitive.NextButton>
6 changes: 4 additions & 2 deletions apps/www/src/lib/registry/default/ui/pagination/pagination-prev-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@
on:click
{...$$restProps}
>
<ChevronLeft class="h-4 w-4" />
<span>Previous</span>
<slot>
<ChevronLeft class="h-4 w-4" />
<span>Previous</span>
</slot>
</Button>
</PaginationPrimitive.PrevButton>
19 changes: 15 additions & 4 deletions apps/www/src/lib/registry/new-york/example/pagination-demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
<script lang="ts">
import * as Pagination from "@/registry/new-york/ui/pagination";
import { ChevronLeft, ChevronRight } from "radix-icons-svelte";
import { mediaQuery } from "svelte-legos";

const isDesktop = mediaQuery("(min-width: 768px)");

let count = 20;
let perPage = 3;
$: perPage = $isDesktop ? 3 : 8;
$: siblingCount = $isDesktop ? 1 : 0;
</script>

<Pagination.Root {count} {perPage} let:pages let:currentPage>
<Pagination.Root {count} {perPage} {siblingCount} let:pages let:currentPage>
<Pagination.Content>
<Pagination.Item>
<Pagination.PrevButton />
<Pagination.PrevButton>
<ChevronLeft class="h-4 w-4" />
<span class="hidden sm:block">Previous</span>
</Pagination.PrevButton>
</Pagination.Item>
{#each pages as page (page.key)}
{#if page.type === "ellipsis"}
Expand All @@ -27,7 +35,10 @@
{/if}
{/each}
<Pagination.Item>
<Pagination.NextButton />
<Pagination.NextButton>
<span class="hidden sm:block">Next</span>
<ChevronRight class="h-4 w-4" />
</Pagination.NextButton>
</Pagination.Item>
</Pagination.Content>
</Pagination.Root>
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/new-york/ui/pagination/pagination-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import type { HTMLAttributes } from "svelte/elements";

type $$Props = HTMLAttributes<HTMLLIElement>;

let className: $$Props["class"] = undefined;

export { className as class };
</script>

Expand Down
8 changes: 5 additions & 3 deletions apps/www/src/lib/registry/new-york/ui/pagination/pagination-next-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
<PaginationPrimitive.NextButton asChild let:builder>
<Button
variant="ghost"
class={cn("gap-1 pl-2.5", className)}
class={cn("gap-1 pr-2.5", className)}
builders={[builder]}
on:click
{...$$restProps}
>
<span>Next</span>
<ChevronRight class="h-4 w-4" />
<slot>
<span>Next</span>
<ChevronRight class="h-4 w-4" />
</slot>
</Button>
</PaginationPrimitive.NextButton>
6 changes: 4 additions & 2 deletions apps/www/src/lib/registry/new-york/ui/pagination/pagination-prev-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@
on:click
{...$$restProps}
>
<ChevronLeft class="h-4 w-4" />
<span>Previous</span>
<slot>
<ChevronLeft class="h-4 w-4" />
<span>Previous</span>
</slot>
</Button>
</PaginationPrimitive.PrevButton>
4 changes: 2 additions & 2 deletions apps/www/static/registry/styles/default/input.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
"files": [
{
"name": "index.ts",
"content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
"content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tfocusin: FormInputEvent<FocusEvent>;\n\tfocusout: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
},
{
"name": "input.svelte",
"content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
"content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:focusin\n\ton:focusout\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
}
],
"type": "components:ui"
Expand Down
6 changes: 3 additions & 3 deletions apps/www/static/registry/styles/default/pagination.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,19 @@
},
{
"name": "pagination-item.svelte",
"content": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLLIElement>;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<li class={cn(\"\", className)} {...$$restProps}>\n\t<slot />\n</li>\n"
"content": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLLIElement>;\n\tlet className: $$Props[\"class\"] = undefined;\n\n\texport { className as class };\n</script>\n\n<li class={cn(\"\", className)} {...$$restProps}>\n\t<slot />\n</li>\n"
},
{
"name": "pagination-link.svelte",
"content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils\";\n\timport { buttonVariants, type Props } from \"@/registry/default/ui/button\";\n\n\ttype $$Props = PaginationPrimitive.PageProps &\n\t\tProps & {\n\t\t\tisActive: boolean;\n\t\t};\n\n\ttype $$Events = PaginationPrimitive.PageEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let page: $$Props[\"page\"];\n\texport let size: $$Props[\"size\"] = \"icon\";\n\texport let isActive: $$Props[\"isActive\"] = false;\n\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.Page\n\tbind:page\n\tclass={cn(\n\t\tbuttonVariants({\n\t\t\tvariant: isActive ? \"outline\" : \"ghost\",\n\t\t\tsize\n\t\t}),\n\t\tclassName\n\t)}\n\t{...$$restProps}\n\ton:click\n>\n\t<slot>{page.value}</slot>\n</PaginationPrimitive.Page>\n"
},
{
"name": "pagination-next-button.svelte",
"content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronRight } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.NextButtonProps;\n\ttype $$Events = PaginationPrimitive.NextButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.NextButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pl-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<span>Next</span>\n\t\t<ChevronRight class=\"h-4 w-4\" />\n\t</Button>\n</PaginationPrimitive.NextButton>\n"
"content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronRight } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.NextButtonProps;\n\ttype $$Events = PaginationPrimitive.NextButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.NextButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pr-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<slot>\n\t\t\t<span>Next</span>\n\t\t\t<ChevronRight class=\"h-4 w-4\" />\n\t\t</slot>\n\t</Button>\n</PaginationPrimitive.NextButton>\n"
},
{
"name": "pagination-prev-button.svelte",
"content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronLeft } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.PrevButtonProps;\n\ttype $$Events = PaginationPrimitive.PrevButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.PrevButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pl-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<ChevronLeft class=\"h-4 w-4\" />\n\t\t<span>Previous</span>\n\t</Button>\n</PaginationPrimitive.PrevButton>\n"
"content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronLeft } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.PrevButtonProps;\n\ttype $$Events = PaginationPrimitive.PrevButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.PrevButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pl-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<slot>\n\t\t\t<ChevronLeft class=\"h-4 w-4\" />\n\t\t\t<span>Previous</span>\n\t\t</slot>\n\t</Button>\n</PaginationPrimitive.PrevButton>\n"
},
{
"name": "pagination.svelte",
Expand Down
4 changes: 2 additions & 2 deletions apps/www/static/registry/styles/new-york/input.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
"files": [
{
"name": "index.ts",
"content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
"content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tfocusin: FormInputEvent<FocusEvent>;\n\tfocusout: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
},
{
"name": "input.svelte",
"content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
"content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:focusin\n\ton:focusout\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
}
],
"type": "components:ui"
Expand Down
Loading