Skip to content

Commit

Permalink
feat: sonner component slots with default icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Carlos-err406
Carlos-err406 committed May 6, 2024
1 parent 9feefd3 commit cc46e8e
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 7 deletions.
2 changes: 1 addition & 1 deletion apps/www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,4 @@
"vaul-svelte": "^0.0.6",
"zod": "^3.22.4"
}
}
}
13 changes: 12 additions & 1 deletion apps/www/src/lib/registry/default/ui/sonner/sonner.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<script lang="ts">
import AlertTriangle from "lucide-svelte/icons/triangle-alert";
import Check from "lucide-svelte/icons/check";
import Info from "lucide-svelte/icons/info";
import Loader from "lucide-svelte/icons/loader";
import CircleX from "lucide-svelte/icons/circle-x";
import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
import { mode } from "mode-watcher";
Expand All @@ -17,4 +22,10 @@
},
}}
{...$$restProps}
/>
>
<slot slot="loading-icon" name="loading-icon"><Loader class="animate-spin" /></slot>
<slot slot="success-icon" name="success-icon"><Check /></slot>
<slot slot="error-icon" name="error-icon"><CircleX /></slot>
<slot slot="warning-icon" name="warning-icon"><AlertTriangle /></slot>
<slot slot="info-icon" name="info-icon"><Info /></slot>
</Sonner>
13 changes: 12 additions & 1 deletion apps/www/src/lib/registry/new-york/ui/sonner/sonner.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<script lang="ts">
import AlertTriangle from "lucide-svelte/icons/triangle-alert";
import Check from "lucide-svelte/icons/check";
import Info from "lucide-svelte/icons/info";
import Loader from "lucide-svelte/icons/loader";
import CircleX from "lucide-svelte/icons/circle-x";
import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
import { mode } from "mode-watcher";
Expand All @@ -17,4 +22,10 @@
},
}}
{...$$restProps}
/>
>
<slot slot="loading-icon" name="loading-icon"><Loader class="animate-spin" /></slot>
<slot slot="success-icon" name="success-icon"><Check /></slot>
<slot slot="error-icon" name="error-icon"><CircleX /></slot>
<slot slot="warning-icon" name="warning-icon"><AlertTriangle /></slot>
<slot slot="info-icon" name="info-icon"><Info /></slot>
</Sonner>
3 changes: 2 additions & 1 deletion apps/www/static/registry/styles/default-js/sonner.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "sonner",
"dependencies": [
"lucide-svelte",
"svelte-sonner",
"mode-watcher"
],
Expand All @@ -12,7 +13,7 @@
},
{
"name": "sonner.svelte",
"content": "<script>\n\timport { Toaster as Sonner } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n/>\n"
"content": "<script>\n\timport AlertTriangle from \"lucide-svelte/icons/triangle-alert\";\n\timport Check from \"lucide-svelte/icons/check\";\n\timport Info from \"lucide-svelte/icons/info\";\n\timport Loader from \"lucide-svelte/icons/loader\";\n\timport CircleX from \"lucide-svelte/icons/circle-x\";\n\timport { Toaster as Sonner } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n>\n\t<slot slot=\"loading-icon\" name=\"loading-icon\"><Loader class=\"animate-spin\" /></slot>\n\t<slot slot=\"success-icon\" name=\"success-icon\"><Check /></slot>\n\t<slot slot=\"error-icon\" name=\"error-icon\"><CircleX /></slot>\n\t<slot slot=\"warning-icon\" name=\"warning-icon\"><AlertTriangle /></slot>\n\t<slot slot=\"info-icon\" name=\"info-icon\"><Info /></slot>\n</Sonner>\n"
}
],
"type": "components:ui"
Expand Down
3 changes: 2 additions & 1 deletion apps/www/static/registry/styles/default/sonner.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "sonner",
"dependencies": [
"lucide-svelte",
"svelte-sonner",
"mode-watcher"
],
Expand All @@ -12,7 +13,7 @@
},
{
"name": "sonner.svelte",
"content": "<script lang=\"ts\">\n\timport { Toaster as Sonner, type ToasterProps as SonnerProps } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n\n\ttype $$Props = SonnerProps;\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n/>\n"
"content": "<script lang=\"ts\">\n\timport AlertTriangle from \"lucide-svelte/icons/triangle-alert\";\n\timport Check from \"lucide-svelte/icons/check\";\n\timport Info from \"lucide-svelte/icons/info\";\n\timport Loader from \"lucide-svelte/icons/loader\";\n\timport CircleX from \"lucide-svelte/icons/circle-x\";\n\timport { Toaster as Sonner, type ToasterProps as SonnerProps } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n\n\ttype $$Props = SonnerProps;\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n>\n\t<slot slot=\"loading-icon\" name=\"loading-icon\"><Loader class=\"animate-spin\" /></slot>\n\t<slot slot=\"success-icon\" name=\"success-icon\"><Check /></slot>\n\t<slot slot=\"error-icon\" name=\"error-icon\"><CircleX /></slot>\n\t<slot slot=\"warning-icon\" name=\"warning-icon\"><AlertTriangle /></slot>\n\t<slot slot=\"info-icon\" name=\"info-icon\"><Info /></slot>\n</Sonner>\n"
}
],
"type": "components:ui"
Expand Down
3 changes: 2 additions & 1 deletion apps/www/static/registry/styles/new-york-js/sonner.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "sonner",
"dependencies": [
"lucide-svelte",
"svelte-sonner",
"mode-watcher"
],
Expand All @@ -12,7 +13,7 @@
},
{
"name": "sonner.svelte",
"content": "<script>\n\timport { Toaster as Sonner } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n/>\n"
"content": "<script>\n\timport AlertTriangle from \"lucide-svelte/icons/triangle-alert\";\n\timport Check from \"lucide-svelte/icons/check\";\n\timport Info from \"lucide-svelte/icons/info\";\n\timport Loader from \"lucide-svelte/icons/loader\";\n\timport CircleX from \"lucide-svelte/icons/circle-x\";\n\timport { Toaster as Sonner } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n>\n\t<slot slot=\"loading-icon\" name=\"loading-icon\"><Loader class=\"animate-spin\" /></slot>\n\t<slot slot=\"success-icon\" name=\"success-icon\"><Check /></slot>\n\t<slot slot=\"error-icon\" name=\"error-icon\"><CircleX /></slot>\n\t<slot slot=\"warning-icon\" name=\"warning-icon\"><AlertTriangle /></slot>\n\t<slot slot=\"info-icon\" name=\"info-icon\"><Info /></slot>\n</Sonner>\n"
}
],
"type": "components:ui"
Expand Down
3 changes: 2 additions & 1 deletion apps/www/static/registry/styles/new-york/sonner.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "sonner",
"dependencies": [
"lucide-svelte",
"svelte-sonner",
"mode-watcher"
],
Expand All @@ -12,7 +13,7 @@
},
{
"name": "sonner.svelte",
"content": "<script lang=\"ts\">\n\timport { Toaster as Sonner, type ToasterProps as SonnerProps } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n\n\ttype $$Props = SonnerProps;\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n/>\n"
"content": "<script lang=\"ts\">\n\timport AlertTriangle from \"lucide-svelte/icons/triangle-alert\";\n\timport Check from \"lucide-svelte/icons/check\";\n\timport Info from \"lucide-svelte/icons/info\";\n\timport Loader from \"lucide-svelte/icons/loader\";\n\timport CircleX from \"lucide-svelte/icons/circle-x\";\n\timport { Toaster as Sonner, type ToasterProps as SonnerProps } from \"svelte-sonner\";\n\timport { mode } from \"mode-watcher\";\n\n\ttype $$Props = SonnerProps;\n</script>\n\n<Sonner\n\ttheme={$mode}\n\tclass=\"toaster group\"\n\ttoastOptions={{\n\t\tclasses: {\n\t\t\ttoast: \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n\t\t\tdescription: \"group-[.toast]:text-muted-foreground\",\n\t\t\tactionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n\t\t\tcancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n\t\t},\n\t}}\n\t{...$$restProps}\n>\n\t<slot slot=\"loading-icon\" name=\"loading-icon\"><Loader class=\"animate-spin\" /></slot>\n\t<slot slot=\"success-icon\" name=\"success-icon\"><Check /></slot>\n\t<slot slot=\"error-icon\" name=\"error-icon\"><CircleX /></slot>\n\t<slot slot=\"warning-icon\" name=\"warning-icon\"><AlertTriangle /></slot>\n\t<slot slot=\"info-icon\" name=\"info-icon\"><Info /></slot>\n</Sonner>\n"
}
],
"type": "components:ui"
Expand Down
51 changes: 51 additions & 0 deletions pnpm-lock.yaml
View file

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

0 comments on commit cc46e8e

Please sign in to comment.