flo-bit.dev / ui-kit
[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4 flo-bit.dev/ui-kit/
svelte tailwindcss ui-components
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request #82 from flo-bit/switch-to-lucide-icons

switch to lucide icons

authored by

Florian and committed by
GitHub (Apr 13, 2026, 4:32 AM +0200) 72796cc9 d0f65d23

+344 -882
+24
pnpm-lock.yaml
··· 411 411 '@fontsource-variable/geist-mono': 412 412 specifier: ^5.2.7 413 413 version: 5.2.7 414 + '@jis3r/icons': 415 + specifier: ^2.7.0 416 + version: 2.7.0(svelte@5.53.2) 417 + '@lucide/svelte': 418 + specifier: ^1.8.0 419 + version: 1.8.0(svelte@5.53.2) 414 420 '@number-flow/svelte': 415 421 specifier: ^0.4.0 416 422 version: 0.4.0(svelte@5.53.2) ··· 1467 1473 '@internationalized/date@3.11.0': 1468 1474 resolution: {integrity: sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q==} 1469 1475 1476 + '@jis3r/icons@2.7.0': 1477 + resolution: {integrity: sha512-RXee+W1AoWFHtFliLZ7SQxVopAezmCH0xU45HKTvvpDQ+6Y3g6tUHvKOK16J52TM8YsN4WDnsiOmcwau+bHmwg==} 1478 + peerDependencies: 1479 + svelte: ^5.0.0 1480 + 1470 1481 '@jridgewell/gen-mapping@0.3.13': 1471 1482 resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} 1472 1483 ··· 1482 1493 1483 1494 '@jridgewell/trace-mapping@0.3.31': 1484 1495 resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} 1496 + 1497 + '@lucide/svelte@1.8.0': 1498 + resolution: {integrity: sha512-+zYQUKqEOVP5lxbGmxL1OVgGMQtRK91eIJ0bR+3Cr1ts4oQEsQfxyzzd5X47psJlblAuGFrl2xm4YuATjR9oaA==} 1499 + peerDependencies: 1500 + svelte: ^5 1485 1501 1486 1502 '@manypkg/find-root@1.1.0': 1487 1503 resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} ··· 4758 4774 dependencies: 4759 4775 '@swc/helpers': 0.5.19 4760 4776 4777 + '@jis3r/icons@2.7.0(svelte@5.53.2)': 4778 + dependencies: 4779 + svelte: 5.53.2 4780 + 4761 4781 '@jridgewell/gen-mapping@0.3.13': 4762 4782 dependencies: 4763 4783 '@jridgewell/sourcemap-codec': 1.5.5 ··· 4776 4796 dependencies: 4777 4797 '@jridgewell/resolve-uri': 3.1.2 4778 4798 '@jridgewell/sourcemap-codec': 1.5.5 4799 + 4800 + '@lucide/svelte@1.8.0(svelte@5.53.2)': 4801 + dependencies: 4802 + svelte: 5.53.2 4779 4803 4780 4804 '@manypkg/find-root@1.1.0': 4781 4805 dependencies:
+6
.changeset/soft-boats-stand.md
··· 1 + --- 2 + '@foxui/core': minor 3 + '@foxui/all': minor 4 + --- 5 + 6 + switch to lucide icons
+16
packages/all/package.json
··· 25 25 ".": { 26 26 "types": "./src/lib/index.ts", 27 27 "svelte": "./src/lib/index.ts" 28 + }, 29 + "./icons": { 30 + "types": "./src/lib/icons/index.ts", 31 + "svelte": "./src/lib/icons/index.ts" 32 + }, 33 + "./moving-icons": { 34 + "types": "./src/lib/moving-icons/index.ts", 35 + "svelte": "./src/lib/moving-icons/index.ts" 28 36 } 29 37 }, 30 38 "types": "./src/lib/index.ts", ··· 38 46 ".": { 39 47 "types": "./dist/types.d.ts", 40 48 "svelte": "./dist/index.js" 49 + }, 50 + "./icons": { 51 + "types": "./dist/icons/index.d.ts", 52 + "svelte": "./dist/icons/index.js" 53 + }, 54 + "./moving-icons": { 55 + "types": "./dist/moving-icons/index.d.ts", 56 + "svelte": "./dist/moving-icons/index.js" 41 57 } 42 58 }, 43 59 "types": "./dist/types.d.ts"
+18
packages/core/package.json
··· 26 26 "types": "./src/lib/index.ts", 27 27 "svelte": "./src/lib/index.ts" 28 28 }, 29 + "./icons": { 30 + "types": "./src/lib/icons/index.ts", 31 + "svelte": "./src/lib/icons/index.ts" 32 + }, 33 + "./moving-icons": { 34 + "types": "./src/lib/moving-icons/index.ts", 35 + "svelte": "./src/lib/moving-icons/index.ts" 36 + }, 29 37 "./theme.css": "./src/lib/theme.css" 30 38 }, 31 39 "types": "./src/lib/index.ts", ··· 39 47 ".": { 40 48 "types": "./dist/types.d.ts", 41 49 "svelte": "./dist/index.js" 50 + }, 51 + "./icons": { 52 + "types": "./dist/icons/index.d.ts", 53 + "svelte": "./dist/icons/index.js" 54 + }, 55 + "./moving-icons": { 56 + "types": "./dist/moving-icons/index.d.ts", 57 + "svelte": "./dist/moving-icons/index.js" 42 58 }, 43 59 "./theme.css": "./dist/theme.css" 44 60 }, ··· 72 88 "dependencies": { 73 89 "@fontsource-variable/geist": "^5.2.8", 74 90 "@fontsource-variable/geist-mono": "^5.2.7", 91 + "@jis3r/icons": "^2.7.0", 92 + "@lucide/svelte": "^1.8.0", 75 93 "@number-flow/svelte": "^0.4.0", 76 94 "bits-ui": "^2.16.2", 77 95 "clsx": "^2.1.1",
+3 -28
apps/docs/src/lib/site-components/API.svelte
··· 1 1 <script lang="ts"> 2 2 import type { APISchema, PropSchema } from '$lib/types/schema'; 3 3 import { Button, Popover, Badge } from '@foxui/all'; 4 + import { Info } from '@foxui/all/icons'; 4 5 5 6 const { props: schema }: { props: APISchema } = $props(); 6 7 ··· 12 13 </script> 13 14 14 15 {#snippet infoIcon()} 15 - <svg 16 - xmlns="http://www.w3.org/2000/svg" 17 - fill="none" 18 - viewBox="0 0 24 24" 19 - stroke-width="1.5" 20 - stroke="currentColor" 21 - class="size-4" 22 - > 23 - <path 24 - stroke-linecap="round" 25 - stroke-linejoin="round" 26 - d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" 27 - /> 28 - </svg> 16 + <Info size={16} strokeWidth={1.5} /> 29 17 {/snippet} 30 18 31 19 {#snippet tagBadges(prop: PropSchema)} ··· 127 115 <Popover side="left" sideOffset={8}> 128 116 {#snippet child({ props: popoverProps })} 129 117 <Button {...popoverProps} variant="ghost" size="icon" class="text-base-400 hover:text-base-600 dark:text-base-500 dark:hover:text-base-300"> 130 - <svg 131 - xmlns="http://www.w3.org/2000/svg" 132 - fill="none" 133 - viewBox="0 0 24 24" 134 - stroke-width="1.5" 135 - stroke="currentColor" 136 - class="size-5" 137 - > 138 - <path 139 - stroke-linecap="round" 140 - stroke-linejoin="round" 141 - d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" 142 - /> 143 - </svg> 118 + <Info size={20} strokeWidth={1.5} /> 144 119 </Button> 145 120 {/snippet} 146 121 <div class="w-64 space-y-3 text-sm">
+6 -6
apps/docs/src/lib/site-components/CopyUrl.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '@foxui/all'; 3 + import { Copy, Check } from '@foxui/all/moving-icons'; 3 4 4 5 let { url, class: className }: { url: string; class?: string } = $props(); 5 6 let copied = $state(false); 7 + let hovered = $state(false); 6 8 7 9 async function copy() { 8 10 try { ··· 25 27 <button 26 28 type="button" 27 29 onclick={copy} 30 + onmouseenter={() => (hovered = true)} 31 + onmouseleave={() => (hovered = false)} 28 32 class={cn( 29 33 'shrink-0 cursor-pointer inline-flex size-8 items-center justify-center rounded-ui-sm border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500', 30 34 copied ··· 34 38 aria-label="Copy URL" 35 39 > 36 40 {#if copied} 37 - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"> 38 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 39 - </svg> 41 + <Check size={16} strokeWidth={2} animate /> 40 42 {:else} 41 - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"> 42 - <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" /> 43 - </svg> 43 + <Copy size={16} strokeWidth={1.5} animate={hovered} /> 44 44 {/if} 45 45 </button> 46 46 </div>
+12 -15
apps/docs/src/lib/site-components/LlmsButton.svelte
··· 1 1 <script lang="ts"> 2 2 import { Button } from '@foxui/all'; 3 + import { FileText } from '@foxui/all/moving-icons'; 3 4 import { resolve } from '$app/paths'; 4 5 5 6 let { href }: { href: string } = $props(); 7 + let hovered = $state(false); 6 8 </script> 7 9 8 - <Button size="sm" class="not-prose mb-1" variant="secondary" href={resolve(href)} target="_blank"> 9 - <svg 10 - xmlns="http://www.w3.org/2000/svg" 11 - width="16" 12 - height="16" 13 - viewBox="0 0 24 24" 14 - fill="none" 15 - stroke="currentColor" 16 - stroke-width="2" 17 - stroke-linecap="round" 18 - stroke-linejoin="round" 19 - ><path 20 - d="M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35" 21 - /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="m5 16-3 3 3 3" /><path d="m9 22 3-3-3-3" /></svg 22 - > 10 + <Button 11 + size="sm" 12 + class="not-prose mb-1" 13 + variant="secondary" 14 + href={resolve(href)} 15 + target="_blank" 16 + onmouseenter={() => (hovered = true)} 17 + onmouseleave={() => (hovered = false)} 18 + > 19 + <FileText size={16} strokeWidth={2} animate={hovered} /> 23 20 <span>llms.txt</span> 24 21 </Button>
+2 -12
apps/docs/src/lib/site-components/Navbar.svelte
··· 1 1 <script lang="ts"> 2 2 import { Button, ThemeToggle, Navbar } from '@foxui/all'; 3 + import { Menu } from '@foxui/all/icons'; 3 4 4 5 import Logo from './Logo.svelte'; 5 6 import { Github } from '@foxui/all'; ··· 11 12 <Navbar {hasSidebar}> 12 13 <div class="flex items-center gap-2"> 13 14 <Button variant="link" class="block font-normal lg:hidden backdrop-blur-none" popovertarget="mobile-menu"> 14 - <svg 15 - xmlns="http://www.w3.org/2000/svg" 16 - viewBox="0 0 24 24" 17 - fill="currentColor" 18 - class="size-6!" 19 - > 20 - <path 21 - fill-rule="evenodd" 22 - d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" 23 - clip-rule="evenodd" 24 - ></path> 25 - </svg> 15 + <Menu size={24} strokeWidth={2} /> 26 16 </Button> 27 17 28 18 <Logo class={showLogo ? 'lg:ml-5' : 'lg:hidden'} />
+8
apps/docs/src/lib/site-components/Sidebar.svelte
··· 46 46 class="mb-1 w-full justify-start backdrop-blur-none">Customization</Button 47 47 > 48 48 <Button 49 + data-current={page.url.pathname === `${base}/docs/icons`} 50 + data-sveltekit-keepfocus 51 + variant="ghost" 52 + onclick={handleClick} 53 + href={resolve('/docs/icons')} 54 + class="mb-1 w-full justify-start backdrop-blur-none">Icons</Button 55 + > 56 + <Button 49 57 data-current={page.url.pathname === `${base}/docs/haptics`} 50 58 data-sveltekit-keepfocus 51 59 variant="ghost"
+1
packages/all/src/lib/icons/index.ts
··· 1 + export * from '@foxui/core/icons';
+1
packages/all/src/lib/moving-icons/index.ts
··· 1 + export * from '@foxui/core/moving-icons';
+3
packages/core/src/lib/icons/index.ts
··· 1 + // Re-export all Lucide icons (static) from @lucide/svelte. 2 + // Usage: import { ArrowRight, Check } from '@foxui/core/icons'; 3 + export * from '@lucide/svelte';
+4
packages/core/src/lib/moving-icons/index.ts
··· 1 + // Re-export all Moving Icons (animated Lucide-style) from @jis3r/icons. 2 + // Usage: import { Copy, Check } from '@foxui/core/moving-icons'; 3 + // Each icon accepts an `animate` prop to trigger motion. 4 + export * from '@jis3r/icons';
+2 -8
apps/docs/src/lib/blueprints/default/A.svelte
··· 1 1 <script lang="ts"> 2 2 import type { HTMLAnchorAttributes } from 'svelte/elements'; 3 3 import type { Snippet } from 'svelte'; 4 + import { ExternalLink } from '@foxui/all/icons'; 4 5 5 6 let { href, children, ...restProps }: HTMLAnchorAttributes & { children: Snippet } = $props(); 6 7 ··· 11 12 <a {href} {target} class="inline-flex items-center justify-center gap-1" {...restProps}> 12 13 {@render children?.()} 13 14 {#if isExternal} 14 - <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 15 - <path 16 - stroke-linecap="round" 17 - stroke-linejoin="round" 18 - stroke-width="2" 19 - d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" 20 - /> 21 - </svg> 15 + <ExternalLink size={16} strokeWidth={2} /> 22 16 {/if} 23 17 </a>
+6 -25
apps/docs/src/lib/blueprints/default/CopyCode.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '@foxui/all'; 3 + import { Copy, Check } from '@foxui/all/moving-icons'; 3 4 import type { Snippet } from 'svelte'; 4 5 5 6 let { code, children }: { code: string; children: Snippet } = $props(); 6 7 7 8 let copied = $state(false); 9 + let hovered = $state(false); 8 10 9 11 async function copyToClipboard() { 10 12 try { ··· 29 31 'dark:bg-base-800 border-base-400 dark:border-base-700 dark:hover:bg-base-700 hover:bg-base-300 rounded-ui border' 30 32 )} 31 33 onclick={copyToClipboard} 34 + onmouseenter={() => (hovered = true)} 35 + onmouseleave={() => (hovered = false)} 32 36 > 33 - <svg 34 - xmlns="http://www.w3.org/2000/svg" 35 - fill="none" 36 - viewBox="0 0 24 24" 37 - stroke-width="1.5" 38 - stroke="currentColor" 39 - class="size-4.5" 40 - > 41 - <path 42 - stroke-linecap="round" 43 - stroke-linejoin="round" 44 - d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" 45 - /> 46 - </svg> 47 - 37 + <Copy size={18} strokeWidth={1.5} animate={hovered} /> 48 38 <span class="sr-only">copy code</span> 49 39 </button> 50 40 {:else} ··· 54 44 'inline-flex size-8 items-center justify-center rounded-ui border p-1 transition-opacity duration-500' 55 45 )} 56 46 > 57 - <svg 58 - xmlns="http://www.w3.org/2000/svg" 59 - fill="none" 60 - viewBox="0 0 24 24" 61 - stroke-width="1.5" 62 - stroke="currentColor" 63 - class="size-4.5" 64 - > 65 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 66 - </svg> 47 + <Check size={18} strokeWidth={1.5} animate /> 67 48 </div> 68 49 {/if} 69 50 </div>
+3 -13
packages/core/src/lib/components/accordion/accordion-trigger.svelte
··· 1 1 <script lang="ts"> 2 2 import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui'; 3 + import { ChevronDown } from '@jis3r/icons'; 3 4 import { cn } from '../../utils'; 4 5 5 6 let { ··· 17 18 <AccordionPrimitive.Trigger 18 19 bind:ref 19 20 class={cn( 20 - 'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-950 dark:text-base-50 hover:text-accent-600 dark:hover:text-accent-400 my-2 flex w-full flex-1 cursor-pointer items-center justify-between gap-2 rounded-ui py-2 font-medium transition-all focus-visible:outline-2 focus-visible:outline-offset-2 [&[data-state=open]>svg]:rotate-180', 21 + 'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-950 dark:text-base-50 hover:text-accent-600 dark:hover:text-accent-400 my-2 flex w-full flex-1 cursor-pointer items-center justify-between gap-2 rounded-ui py-2 font-medium transition-all focus-visible:outline-2 focus-visible:outline-offset-2 [&[data-state=open]_.accordion-chevron]:rotate-180', 21 22 className 22 23 )} 23 24 {...restProps} 24 25 > 25 26 {@render children?.()} 26 27 27 - <svg 28 - xmlns="http://www.w3.org/2000/svg" 29 - viewBox="0 0 24 24" 30 - fill="currentColor" 31 - class="size-4 shrink-0 transition-transform duration-200" 32 - > 33 - <path 34 - fill-rule="evenodd" 35 - d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" 36 - clip-rule="evenodd" 37 - /> 38 - </svg> 28 + <ChevronDown size={16} class="accordion-chevron shrink-0 transition-transform duration-200" /> 39 29 </AccordionPrimitive.Trigger> 40 30 </AccordionPrimitive.Header>
+9 -31
packages/core/src/lib/components/alert/alert.svelte
··· 2 2 import { type VariantProps, tv } from 'tailwind-variants'; 3 3 4 4 export const alertVariants = tv({ 5 - base: 'text-xs relative w-full rounded-ui border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7 ', 5 + base: 'text-xs relative w-full rounded-ui border p-4 [&>[role=img]]:absolute [&>[role=img]]:left-4 [&>[role=img]]:top-4 [&>[role=img]~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7', 6 6 variants: { 7 7 variant: { 8 8 default: 9 - 'bg-accent-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-accent-700/5 dark:inset-shadow-accent-500/2 shadow-accent-500/5 dark:shadow-accent-500/2 dark:bg-accent-950/20 [&>div:first-of-type]:text-accent-800 [&>svg]:text-accent-700 dark:[&>svg]:text-accent-400 dark:[&>div:first-of-type]:text-accent-300 text-accent-800 dark:text-accent-300 border-accent-500/20 dark:border-accent-500/10', 9 + 'bg-accent-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-accent-700/5 dark:inset-shadow-accent-500/2 shadow-accent-500/5 dark:shadow-accent-500/2 dark:bg-accent-950/20 [&>div:first-of-type]:text-accent-800 [&>[role=img]]:text-accent-700 dark:[&>[role=img]]:text-accent-400 [&>svg]:text-accent-700 dark:[&>svg]:text-accent-400 dark:[&>div:first-of-type]:text-accent-300 text-accent-800 dark:text-accent-300 border-accent-500/20 dark:border-accent-500/10', 10 10 secondary: 11 - 'bg-base-200/70 shadow-lg transform-all inset-shadow-sm inset-shadow-base-700/5 dark:inset-shadow-base-500/2 shadow-base-500/5 dark:shadow-base-950/10 dark:bg-base-900/40 [&>div:first-of-type]:text-base-800 [&>svg]:text-base-700 dark:[&>svg]:text-base-400 dark:[&>div:first-of-type]:text-base-200 text-base-800 dark:text-base-300 border-base-500/20 dark:border-base-500/10', 11 + 'bg-base-200/70 shadow-lg transform-all inset-shadow-sm inset-shadow-base-700/5 dark:inset-shadow-base-500/2 shadow-base-500/5 dark:shadow-base-950/10 dark:bg-base-900/40 [&>div:first-of-type]:text-base-800 [&>[role=img]]:text-base-700 dark:[&>[role=img]]:text-base-400 [&>svg]:text-base-700 dark:[&>svg]:text-base-400 dark:[&>div:first-of-type]:text-base-200 text-base-800 dark:text-base-300 border-base-500/20 dark:border-base-500/10', 12 12 }, 13 13 type: { 14 14 default: '', ··· 32 32 import type { WithElementRef } from 'bits-ui'; 33 33 import { AlertTitle } from '.'; 34 34 import { cn } from '../../utils'; 35 + import { TriangleAlert, CircleCheck, CircleX } from '@jis3r/icons'; 36 + import { Info } from '@lucide/svelte'; 35 37 36 38 let { 37 39 ref = $bindable(null), ··· 55 57 role="alert" 56 58 > 57 59 {#if type === 'warning'} 58 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 59 - <path 60 - fill-rule="evenodd" 61 - d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" 62 - clip-rule="evenodd" 63 - /> 64 - </svg> 60 + <TriangleAlert size={16} strokeWidth={2} animate /> 65 61 {:else if type === 'success'} 66 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 67 - <path 68 - fill-rule="evenodd" 69 - d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" 70 - clip-rule="evenodd" 71 - /> 72 - </svg> 62 + <CircleCheck size={16} strokeWidth={2} animate /> 73 63 {:else if type === 'info'} 74 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 75 - <path 76 - fill-rule="evenodd" 77 - d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" 78 - clip-rule="evenodd" 79 - /> 80 - </svg> 64 + <Info size={16} strokeWidth={2} /> 81 65 {:else if type === 'error'} 82 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 83 - <path 84 - fill-rule="evenodd" 85 - d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" 86 - clip-rule="evenodd" 87 - /> 88 - </svg> 66 + <CircleX size={16} strokeWidth={2} animate /> 89 67 {/if} 90 68 {#if title} 91 69 <AlertTitle>{title}</AlertTitle>
+1 -1
packages/core/src/lib/components/avatar/Avatar.svelte
··· 35 35 36 36 <div 37 37 class={cn( 38 - 'not-prose border-base-300 bg-base-200 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative isolate flex size-10 shrink-0 overflow-hidden rounded-full border', 38 + 'not-prose border-base-300 bg-base-200 text-base-900 dark:border-base-800 dark:bg-base-950 dark:text-base-50 relative isolate flex size-10 shrink-0 overflow-hidden rounded-full border', 39 39 className 40 40 )} 41 41 {...restProps}
+4 -30
packages/core/src/lib/components/checkbox/checkbox.svelte
··· 2 2 import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 3 import { type VariantProps, tv } from 'tailwind-variants'; 4 4 import { cn } from '../../utils'; 5 - import { draw } from 'svelte/transition'; 5 + import { Check, Minus } from '@jis3r/icons'; 6 6 7 7 export const checkboxVariants = tv({ 8 8 base: 'peer cursor-pointer box-content shrink-0 inline-flex items-center justify-center rounded-ui-sm border transition-colors duration-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-500 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50', ··· 54 54 {...restProps} 55 55 > 56 56 {#snippet children({ checked, indeterminate })} 57 + {@const iconSize = sizeVariant === 'sm' ? 14 : sizeVariant === 'lg' ? 18 : 16} 57 58 <div class="flex size-4 items-center justify-center text-current"> 58 59 {#if indeterminate} 59 - <svg 60 - xmlns="http://www.w3.org/2000/svg" 61 - fill="none" 62 - viewBox="0 0 24 24" 63 - stroke-width="2.5" 64 - stroke="currentColor" 65 - class={[ 66 - sizeVariant === 'sm' && 'size-3.5', 67 - sizeVariant === 'default' && 'size-4', 68 - sizeVariant === 'lg' && 'size-4.5' 69 - ]} 70 - > 71 - <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /> 72 - </svg> 60 + <Minus size={iconSize} strokeWidth={2.5} /> 73 61 {:else if checked} 74 - <svg 75 - xmlns="http://www.w3.org/2000/svg" 76 - fill="none" 77 - viewBox="0 0 24 24" 78 - stroke-width="3" 79 - stroke="currentColor" 80 - class={[ 81 - sizeVariant === 'sm' && 'size-3.5', 82 - sizeVariant === 'default' && 'size-4', 83 - sizeVariant === 'lg' && 'size-4.5', 84 - !checked && 'text-transparent' 85 - ]} 86 - > 87 - <path in:draw={{ duration: 100 }} stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 88 - </svg> 62 + <Check size={iconSize} strokeWidth={3} animate /> 89 63 {/if} 90 64 </div> 91 65 {/snippet}
+6 -25
packages/core/src/lib/components/copy-code-button/CopyCodeButton.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '../../utils'; 3 3 import { Portal } from 'bits-ui'; 4 + import { Copy, Check } from '@jis3r/icons'; 4 5 5 6 let { element, text }: { element: HTMLElement; text?: string } = $props(); 6 7 7 8 let copied = $state(false); 9 + let hovered = $state(false); 8 10 9 11 async function clickedCopy() { 10 12 if (!text) { ··· 29 31 'dark:bg-base-800 border-base-400 dark:border-base-700 dark:hover:bg-base-700 hover:bg-base-300 absolute top-3 right-3 rounded-ui border' 30 32 )} 31 33 onclick={clickedCopy} 34 + onmouseenter={() => (hovered = true)} 35 + onmouseleave={() => (hovered = false)} 32 36 > 33 - <svg 34 - xmlns="http://www.w3.org/2000/svg" 35 - fill="none" 36 - viewBox="0 0 24 24" 37 - stroke-width="1.5" 38 - stroke="currentColor" 39 - class="size-4.5" 40 - > 41 - <path 42 - stroke-linecap="round" 43 - stroke-linejoin="round" 44 - d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" 45 - /> 46 - </svg> 47 - 37 + <Copy size={18} strokeWidth={1.5} animate={hovered} /> 48 38 <span class="sr-only">copy code</span> 49 39 </button> 50 40 {:else} ··· 54 44 'inline-flex size-8 items-center justify-center rounded-ui border p-1 transition-opacity duration-500' 55 45 )} 56 46 > 57 - <svg 58 - xmlns="http://www.w3.org/2000/svg" 59 - fill="none" 60 - viewBox="0 0 24 24" 61 - stroke-width="1.5" 62 - stroke="currentColor" 63 - class="size-4.5" 64 - > 65 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 66 - </svg> 47 + <Check size={18} strokeWidth={1.5} animate /> 67 48 </div> 68 49 {/if} 69 50 </Portal>
+5 -15
packages/core/src/lib/components/download-button/DownloadButton.svelte
··· 1 1 <script lang="ts"> 2 2 import { Box } from '../box'; 3 + import { Download } from '@jis3r/icons'; 3 4 4 5 let { 5 6 title, ··· 9 10 }: { title: string; description?: string; fileUrl: string; fileName?: string } = $props(); 10 11 11 12 fileName ??= fileUrl.split('/').pop()?.split('?')[0] || 'download'; 13 + 14 + let hovered = $state(false); 12 15 </script> 13 16 14 - <Box class="not-prose group"> 17 + <Box class="not-prose group" onmouseenter={() => (hovered = true)} onmouseleave={() => (hovered = false)}> 15 18 <div class="flex flex-col gap-2"> 16 19 <h3 17 20 class="text-base-950 dark:text-base-50 inline-flex items-center gap-2 text-lg font-semibold" 18 21 > 19 - <svg 20 - xmlns="http://www.w3.org/2000/svg" 21 - fill="none" 22 - viewBox="0 0 24 24" 23 - stroke-width="1.5" 24 - stroke="currentColor" 25 - class="size-5" 26 - > 27 - <path 28 - stroke-linecap="round" 29 - stroke-linejoin="round" 30 - d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" 31 - /> 32 - </svg> 22 + <Download size={20} strokeWidth={1.5} animate={hovered} /> 33 23 {title} 34 24 </h3> 35 25
+2 -13
packages/core/src/lib/components/modal/Modal.svelte
··· 1 1 <script lang="ts" module> 2 2 import { Dialog, type WithoutChild } from 'bits-ui'; 3 + import { X } from '@jis3r/icons'; 3 4 import { cn } from '../../utils.js'; 4 5 5 6 export type ModalProps = Dialog.RootProps & { ··· 48 49 <Dialog.Close 49 50 class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute top-2 right-2 cursor-pointer rounded-ui-sm p-1 transition-colors focus:outline-2 focus:outline-offset-2" 50 51 > 51 - <svg 52 - xmlns="http://www.w3.org/2000/svg" 53 - viewBox="0 0 24 24" 54 - fill="currentColor" 55 - class="size-4" 56 - > 57 - <path 58 - fill-rule="evenodd" 59 - d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" 60 - clip-rule="evenodd" 61 - /> 62 - </svg> 63 - 52 + <X size={16} /> 64 53 <span class="sr-only">Close</span> 65 54 </Dialog.Close> 66 55 {/if}
+3 -24
packages/core/src/lib/components/select/Select.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '../../utils'; 3 3 import { Select as SelectPrimitive, type WithoutChildren } from 'bits-ui'; 4 + import { ChevronDown, Check } from '@jis3r/icons'; 4 5 5 6 type Props = WithoutChildren<SelectPrimitive.RootProps> & { 6 7 placeholder?: string; ··· 20 21 > 21 22 {selectedLabel ? selectedLabel : placeholder} 22 23 23 - <svg 24 - xmlns="http://www.w3.org/2000/svg" 25 - fill="none" 26 - viewBox="0 0 24 24" 27 - stroke-width="2.5" 28 - stroke="currentColor" 29 - class="size-4" 30 - > 31 - <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> 32 - </svg> 24 + <ChevronDown size={16} strokeWidth={2.5} /> 33 25 </div> 34 26 </SelectPrimitive.Trigger> 35 27 <SelectPrimitive.Portal> ··· 55 47 )} 56 48 > 57 49 {#if selected} 58 - <svg 59 - xmlns="http://www.w3.org/2000/svg" 60 - fill="none" 61 - viewBox="0 0 24 24" 62 - stroke-width="2.5" 63 - stroke="currentColor" 64 - class="size-4" 65 - > 66 - <path 67 - stroke-linecap="round" 68 - stroke-linejoin="round" 69 - d="m4.5 12.75 6 6 9-13.5" 70 - /> 71 - </svg> 50 + <Check size={16} strokeWidth={2.5} /> 72 51 {:else} 73 52 <div class="size-4"></div> 74 53
+2 -13
packages/core/src/lib/components/select/SelectItem.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '../../utils'; 3 2 import { Select } from 'bits-ui'; 3 + import { Check } from '@jis3r/icons'; 4 4 5 5 let { value = $bindable(), label, children: myChildren, ...props }: Select.ItemProps = $props(); 6 - 7 - console.log(value); 8 6 </script> 9 7 10 8 <Select.Item {value} {label} {...props}> 11 9 {#snippet children(props)} 12 10 {#if props.selected} 13 - <svg 14 - xmlns="http://www.w3.org/2000/svg" 15 - fill="none" 16 - viewBox="0 0 24 24" 17 - stroke-width="1.5" 18 - stroke="currentColor" 19 - class="size-6" 20 - > 21 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 22 - </svg> 11 + <Check size={24} strokeWidth={1.5} /> 23 12 {/if} 24 13 25 14 {#if myChildren}
+3 -28
packages/core/src/lib/components/theme-toggle/ThemeToggle.svelte
··· 2 2 import { Button, type ButtonProps } from '../button'; 3 3 import { cn } from '../../utils'; 4 4 import { ModeWatcher, toggleMode } from 'mode-watcher'; 5 + import { Sun, Moon } from '@lucide/svelte'; 5 6 6 7 let { 7 8 class: className, ··· 26 27 {...restProps} 27 28 size="icon" 28 29 > 29 - <svg 30 - xmlns="http://www.w3.org/2000/svg" 31 - fill="none" 32 - viewBox="0 0 24 24" 33 - stroke-width="1.5" 34 - stroke="currentColor" 35 - class="size-5! block transition-colors duration-500 dark:hidden" 36 - > 37 - <path 38 - stroke-linecap="round" 39 - stroke-linejoin="round" 40 - d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" 41 - /> 42 - </svg> 43 - <svg 44 - xmlns="http://www.w3.org/2000/svg" 45 - fill="none" 46 - viewBox="0 0 24 24" 47 - stroke-width="1.5" 48 - stroke="currentColor" 49 - class="size-5! hidden transition-colors duration-500 dark:block dark:text-white" 50 - > 51 - <path 52 - stroke-linecap="round" 53 - stroke-linejoin="round" 54 - d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" 55 - /> 56 - </svg> 30 + <Sun size={20} strokeWidth={1.5} class="block dark:hidden" /> 31 + <Moon size={20} strokeWidth={1.5} class="hidden dark:block" /> 57 32 58 33 <span class="sr-only">Toggle theme</span> 59 34 </Button>
+6 -20
apps/docs/src/lib/docs/core/accordion/Card.svelte
··· 1 + <script> 2 + import { ChevronDown } from '@foxui/all/icons'; 3 + </script> 4 + 1 5 <div class="text-base-900 dark:text-base-100 w-full text-sm"> 2 6 <div class="flex items-center justify-between font-semibold"> 3 7 <span>Accordion Item A</span> 4 - <svg 5 - xmlns="http://www.w3.org/2000/svg" 6 - fill="none" 7 - viewBox="0 0 24 24" 8 - stroke-width="1.5" 9 - stroke="currentColor" 10 - class="size-5 rotate-180" 11 - > 12 - <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> 13 - </svg> 8 + <ChevronDown size={20} strokeWidth={1.5} class="rotate-180" /> 14 9 </div> 15 10 <div 16 11 class="text-base-500 dark:text-base-400 border-base-200 dark:border-base-900 mt-2 border-b pb-4 text-sm" ··· 20 15 21 16 <div class="mt-4 flex items-center justify-between font-semibold"> 22 17 <span>Accordion Item B</span> 23 - <svg 24 - xmlns="http://www.w3.org/2000/svg" 25 - fill="none" 26 - viewBox="0 0 24 24" 27 - stroke-width="1.5" 28 - stroke="currentColor" 29 - class="size-5" 30 - > 31 - <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> 32 - </svg> 18 + <ChevronDown size={20} strokeWidth={1.5} /> 33 19 </div> 34 20 </div>
+2 -11
apps/docs/src/lib/docs/core/alert/Card.svelte
··· 1 1 <script> 2 2 import { Alert, AlertDescription, AlertTitle } from '@foxui/all'; 3 + import { GraduationCap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <Alert> 6 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 7 - <path 8 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 9 - /> 10 - <path 11 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 12 - /> 13 - <path 14 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 15 - /> 16 - </svg> 7 + <GraduationCap size={24} strokeWidth={2} /> 17 8 <AlertTitle>Alert Title</AlertTitle> 18 9 <AlertDescription>Alert Description</AlertDescription> 19 10 </Alert>
+3 -22
apps/docs/src/lib/docs/core/alert/Example.svelte
··· 1 1 <script> 2 2 import { Alert, AlertDescription, AlertTitle } from '@foxui/all'; 3 + import { GraduationCap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <Alert class="mb-2"> 6 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 7 - <path 8 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 9 - /> 10 - <path 11 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 12 - /> 13 - <path 14 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 15 - /> 16 - </svg> 7 + <GraduationCap size={24} strokeWidth={2} /> 17 8 <AlertTitle class="text-rose-500 dark:text-rose-500">Default Alert</AlertTitle> 18 9 <AlertDescription>Alert Description</AlertDescription> 19 10 </Alert> 20 11 21 12 <Alert variant="secondary" class="mb-4"> 22 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 23 - <path 24 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 25 - /> 26 - <path 27 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 28 - /> 29 - <path 30 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 31 - /> 32 - </svg> 13 + <GraduationCap size={24} strokeWidth={2} /> 33 14 <AlertTitle>Secondary Alert</AlertTitle> 34 15 <AlertDescription>Alert Description</AlertDescription> 35 16 </Alert>
+3 -26
apps/docs/src/lib/docs/core/badge/Card.svelte
··· 1 1 <script> 2 2 import { Badge } from '@foxui/all'; 3 + import { GraduationCap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 - <Badge size="sm" 6 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 7 - <path 8 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 9 - /> 10 - <path 11 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 12 - /> 13 - <path 14 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 15 - /> 16 - </svg>Badge</Badge 17 - > 6 + <Badge size="sm"><GraduationCap size={16} strokeWidth={2} />Badge</Badge> 18 7 19 - <Badge size="sm" variant="secondary" 20 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 21 - <path 22 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 23 - /> 24 - <path 25 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 26 - /> 27 - <path 28 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 29 - /> 30 - </svg>Badge</Badge 31 - > 8 + <Badge size="sm" variant="secondary"><GraduationCap size={16} strokeWidth={2} />Badge</Badge>
+4 -39
apps/docs/src/lib/docs/core/badge/Example.svelte
··· 1 1 <script> 2 2 import { Badge } from '@foxui/all'; 3 + import { GraduationCap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <h3>Primary</h3> 6 7 7 8 <div class="flex items-center gap-2"> 8 - <Badge size="sm" 9 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 10 - <path 11 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 12 - /> 13 - <path 14 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 15 - /> 16 - <path 17 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 18 - /> 19 - </svg>default</Badge 20 - > 21 - <Badge size="md" 22 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 23 - <path 24 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 25 - /> 26 - <path 27 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 28 - /> 29 - <path 30 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 31 - /> 32 - </svg>md</Badge 33 - > 34 - <Badge size="lg" 35 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 36 - <path 37 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 38 - /> 39 - <path 40 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 41 - /> 42 - <path 43 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 44 - /> 45 - </svg>lg</Badge 46 - > 9 + <Badge size="sm"><GraduationCap size={16} strokeWidth={2} />default</Badge> 10 + <Badge size="md"><GraduationCap size={16} strokeWidth={2} />md</Badge> 11 + <Badge size="lg"><GraduationCap size={20} strokeWidth={2} />lg</Badge> 47 12 </div> 48 13 49 14 <h3>Secondary</h3>
+11 -130
apps/docs/src/lib/docs/core/button/Example.svelte
··· 1 1 <script> 2 2 import { Button } from '@foxui/all'; 3 + import { GraduationCap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <h3>Primary</h3> 6 7 7 8 <div class="flex items-center gap-2 flex-wrap"> 8 - <Button size="sm" 9 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 10 - <path 11 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 12 - /> 13 - <path 14 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 15 - /> 16 - <path 17 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 18 - /> 19 - </svg>small</Button 20 - > 9 + <Button size="sm"><GraduationCap size={16} strokeWidth={2} />small</Button> 21 10 22 - <Button 23 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 24 - <path 25 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 26 - /> 27 - <path 28 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 29 - /> 30 - <path 31 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 32 - /> 33 - </svg>normal</Button 34 - > 11 + <Button><GraduationCap size={20} strokeWidth={2} />normal</Button> 35 12 36 - <Button size="lg" 37 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 38 - <path 39 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 40 - /> 41 - <path 42 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 43 - /> 44 - <path 45 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 46 - /> 47 - </svg>large</Button 48 - > 13 + <Button size="lg"><GraduationCap size={20} strokeWidth={2} />large</Button> 49 14 50 15 51 - <Button disabled 52 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 53 - <path 54 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 55 - /> 56 - <path 57 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 58 - /> 59 - <path 60 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 61 - /> 62 - </svg>disabled</Button 63 - > 16 + <Button disabled><GraduationCap size={20} strokeWidth={2} />disabled</Button> 64 17 65 18 </div> 66 19 ··· 76 29 <h3>Link</h3> 77 30 78 31 <div class="flex items-center gap-2"> 79 - <Button variant="link" size="sm" 80 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 81 - <path 82 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 83 - /> 84 - <path 85 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 86 - /> 87 - <path 88 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 89 - /> 90 - </svg>small</Button 91 - > 92 - <Button variant="link" 93 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 94 - <path 95 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 96 - /> 97 - <path 98 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 99 - /> 100 - <path 101 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 102 - /> 103 - </svg>normal</Button 104 - > 105 - <Button variant="link" size="lg" 106 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 107 - <path 108 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 109 - /> 110 - <path 111 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 112 - /> 113 - <path 114 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 115 - /> 116 - </svg>large</Button 117 - > 32 + <Button variant="link" size="sm"><GraduationCap size={16} strokeWidth={2} />small</Button> 33 + <Button variant="link"><GraduationCap size={20} strokeWidth={2} />normal</Button> 34 + <Button variant="link" size="lg"><GraduationCap size={20} strokeWidth={2} />large</Button> 118 35 </div> 119 36 120 37 <h3>Icons</h3> 121 38 122 39 <div> 123 - <Button size="iconSm" 124 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 125 - <path 126 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 127 - /> 128 - <path 129 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 130 - /> 131 - <path 132 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 133 - /> 134 - </svg></Button 135 - > 40 + <Button size="iconSm"><GraduationCap size={16} strokeWidth={2} /></Button> 136 41 137 - <Button size="icon" 138 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 139 - <path 140 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 141 - /> 142 - <path 143 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 144 - /> 145 - <path 146 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 147 - /> 148 - </svg></Button 149 - > 42 + <Button size="icon"><GraduationCap size={20} strokeWidth={2} /></Button> 150 43 151 - <Button size="iconLg" 152 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 153 - <path 154 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 155 - /> 156 - <path 157 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 158 - /> 159 - <path 160 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 161 - /> 162 - </svg></Button 163 - > 44 + <Button size="iconLg"><GraduationCap size={24} strokeWidth={2} /></Button> 164 45 </div> 165 46 166 47 <h3>Colors</h3>
+2 -7
apps/docs/src/lib/docs/core/modal/Card.svelte
··· 1 1 <script> 2 2 import { Button } from '@foxui/all'; 3 + import { X } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div ··· 16 17 <div 17 18 class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute top-2 right-2 cursor-pointer rounded-ui-sm p-1 transition-colors focus:outline-2 focus:outline-offset-2" 18 19 > 19 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"> 20 - <path 21 - fill-rule="evenodd" 22 - d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" 23 - clip-rule="evenodd" 24 - /> 25 - </svg> 20 + <X size={16} strokeWidth={2} /> 26 21 27 22 <span class="sr-only">Close</span> 28 23 </div>
+3 -20
apps/docs/src/lib/docs/core/popover/Card.svelte
··· 1 1 <script> 2 2 import { Box, Button, Paragraph } from '@foxui/all'; 3 + import { Check, X } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <Box class="flex items-center justify-between gap-2"> ··· 7 8 8 9 <div> 9 10 <Button tabindex={-1} variant="secondary" size="iconSm"> 10 - <svg 11 - xmlns="http://www.w3.org/2000/svg" 12 - fill="none" 13 - viewBox="0 0 24 24" 14 - stroke-width="1.5" 15 - stroke="currentColor" 16 - class="size-6" 17 - > 18 - <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 19 - </svg> 11 + <X size={24} strokeWidth={1.5} /> 20 12 </Button> 21 13 22 14 <Button tabindex={-1} size="iconSm"> 23 - <svg 24 - xmlns="http://www.w3.org/2000/svg" 25 - fill="none" 26 - viewBox="0 0 24 24" 27 - stroke-width="1.5" 28 - stroke="currentColor" 29 - class="size-6" 30 - > 31 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 32 - </svg> 15 + <Check size={24} strokeWidth={1.5} /> 33 16 </Button> 34 17 </div> 35 18 </Box>
+3 -20
apps/docs/src/lib/docs/core/popover/Example.svelte
··· 1 1 <script lang="ts"> 2 2 import { Popover, Button, toast } from '@foxui/all'; 3 + import { Check, X } from '@foxui/all/icons'; 3 4 4 5 let open = $state(false); 5 6 ··· 24 25 toast('Fair enough!'); 25 26 }} 26 27 > 27 - <svg 28 - xmlns="http://www.w3.org/2000/svg" 29 - fill="none" 30 - viewBox="0 0 24 24" 31 - stroke-width="1.5" 32 - stroke="currentColor" 33 - class="size-6" 34 - > 35 - <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 36 - </svg> 28 + <X size={24} strokeWidth={1.5} /> 37 29 </Button> 38 30 39 31 <Button ··· 43 35 toast('Good choice!'); 44 36 }} 45 37 > 46 - <svg 47 - xmlns="http://www.w3.org/2000/svg" 48 - fill="none" 49 - viewBox="0 0 24 24" 50 - stroke-width="1.5" 51 - stroke="currentColor" 52 - class="size-6" 53 - > 54 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 55 - </svg> 38 + <Check size={24} strokeWidth={1.5} /> 56 39 </Button> 57 40 </div> 58 41 </div>
+5 -10
apps/docs/src/lib/docs/core/select/Card.svelte
··· 1 + <script> 2 + import { Check } from '@foxui/all/icons'; 3 + </script> 4 + 1 5 <div class={'flex min-w-max items-center justify-center gap-4 rounded-full'}> 2 6 <div 3 7 class="bg-base-100 dark:bg-base-900 text-base-900 dark:text-base-50 border-base-200 dark:border-base-800 divide-base-200 dark:divide-base-800 flex w-28 flex-col gap-x-1 divide-y overflow-hidden rounded-ui border text-sm" ··· 8 12 'text-accent-700 dark:text-accent-300' 9 13 ]} 10 14 > 11 - <svg 12 - xmlns="http://www.w3.org/2000/svg" 13 - fill="none" 14 - viewBox="0 0 24 24" 15 - stroke-width="2" 16 - stroke="currentColor" 17 - class="mr-1.5 size-3.5" 18 - > 19 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 20 - </svg> 15 + <Check size={14} strokeWidth={2} class="mr-1.5" /> 21 16 22 17 Apple 23 18 </div>
+2 -7
apps/docs/src/lib/docs/core/sonner/Card.svelte
··· 1 1 <script lang="ts"> 2 2 import { Alert, AlertDescription, AlertTitle } from '@foxui/all'; 3 + import { TriangleAlert } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="flex h-full w-full items-end justify-end"> 6 7 <Alert class="ml-10"> 7 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 8 - <path 9 - fill-rule="evenodd" 10 - d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" 11 - clip-rule="evenodd" 12 - /> 13 - </svg> 8 + <TriangleAlert size={24} strokeWidth={2} /> 14 9 15 10 <AlertTitle class="text-rose-500 dark:text-rose-500">Attention required</AlertTitle> 16 11 <AlertDescription>This is important</AlertDescription>
+7 -28
apps/docs/src/lib/docs/core/theme-toggle/Card.svelte
··· 1 1 <script> 2 2 import { cn, toggleVariants } from '@foxui/all'; 3 + import { Sun, Moon } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="flex gap-4"> 6 - <svg 7 - xmlns="http://www.w3.org/2000/svg" 8 - fill="none" 9 - viewBox="0 0 24 24" 10 - stroke-width="1.5" 11 - stroke="currentColor" 12 - class="block size-5 transition-colors duration-500" 13 - > 14 - <path 15 - stroke-linecap="round" 16 - stroke-linejoin="round" 17 - d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" 18 - /> 19 - </svg> 7 + <Sun size={20} strokeWidth={1.5} class="block transition-colors duration-500" /> 20 8 21 - <svg 22 - xmlns="http://www.w3.org/2000/svg" 23 - fill="none" 24 - viewBox="0 0 24 24" 25 - stroke-width="1.5" 26 - stroke="currentColor" 27 - class="size-5 transition-colors duration-500 dark:block dark:text-white" 28 - > 29 - <path 30 - stroke-linecap="round" 31 - stroke-linejoin="round" 32 - d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" 33 - /> 34 - </svg> 9 + <Moon 10 + size={20} 11 + strokeWidth={1.5} 12 + class="transition-colors duration-500 dark:block dark:text-white" 13 + /> 35 14 </div>
+5 -17
apps/docs/src/lib/docs/core/toggle-group/Card.svelte
··· 1 1 <script> 2 2 import { cn, toggleVariants } from '@foxui/all'; 3 + import { Bold, Italic, Underline, Strikethrough } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="flex gap-2"> 6 7 <div class={toggleVariants()} data-state="on"> 7 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 8 - <path fill-rule="evenodd" d="M5.246 3.744a.75.75 0 0 1 .75-.75h7.125a4.875 4.875 0 0 1 3.346 8.422 5.25 5.25 0 0 1-2.97 9.58h-7.5a.75.75 0 0 1-.75-.75V3.744Zm7.125 6.75a2.625 2.625 0 0 0 0-5.25H8.246v5.25h4.125Zm-4.125 2.251v6h4.5a3 3 0 0 0 0-6h-4.5Z" clip-rule="evenodd" /> 9 - </svg> 10 - 8 + <Bold size={24} strokeWidth={2} /> 11 9 </div> 12 10 13 11 <div class={toggleVariants()} data-state="on"> 14 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 15 - <path fill-rule="evenodd" d="M10.497 3.744a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-3.275l-5.357 15.002h2.632a.75.75 0 1 1 0 1.5h-7.5a.75.75 0 1 1 0-1.5h3.275l5.357-15.002h-2.632a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> 16 - </svg> 17 - 12 + <Italic size={24} strokeWidth={2} /> 18 13 </div> 19 14 <div class={toggleVariants()}> 20 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 21 - <path fill-rule="evenodd" d="M5.995 2.994a.75.75 0 0 1 .75.75v7.5a5.25 5.25 0 1 0 10.5 0v-7.5a.75.75 0 0 1 1.5 0v7.5a6.75 6.75 0 1 1-13.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-3 17.252a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5h-16.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> 22 - </svg> 23 - 24 - 15 + <Underline size={24} strokeWidth={2} /> 25 16 </div> 26 17 <div class={toggleVariants()}> 27 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 28 - <path fill-rule="evenodd" d="M9.657 4.728c-1.086.385-1.766 1.057-1.979 1.85-.214.8.046 1.733.81 2.616.746.862 1.93 1.612 3.388 2.003.07.019.14.037.21.053h8.163a.75.75 0 0 1 0 1.5h-8.24a.66.66 0 0 1-.02 0H3.75a.75.75 0 0 1 0-1.5h4.78a7.108 7.108 0 0 1-1.175-1.074C6.372 9.042 5.849 7.61 6.229 6.19c.377-1.408 1.528-2.38 2.927-2.876 1.402-.497 3.127-.55 4.855-.086A8.937 8.937 0 0 1 16.94 4.6a.75.75 0 0 1-.881 1.215 7.437 7.437 0 0 0-2.436-1.14c-1.473-.394-2.885-.331-3.966.052Zm6.533 9.632a.75.75 0 0 1 1.03.25c.592.974.846 2.094.55 3.2-.378 1.408-1.529 2.38-2.927 2.876-1.402.497-3.127.55-4.855.087-1.712-.46-3.168-1.354-4.134-2.47a.75.75 0 0 1 1.134-.982c.746.862 1.93 1.612 3.388 2.003 1.473.394 2.884.331 3.966-.052 1.085-.384 1.766-1.056 1.978-1.85.169-.628.046-1.33-.381-2.032a.75.75 0 0 1 .25-1.03Z" clip-rule="evenodd" /> 29 - </svg> 30 - 18 + <Strikethrough size={24} strokeWidth={2} /> 31 19 </div> 32 20 </div>
+7 -35
apps/docs/src/lib/docs/core/toggle-group/Example.svelte
··· 1 1 <script> 2 2 import { ToggleGroup, ToggleGroupItem } from '@foxui/all'; 3 + import { SlidersHorizontal, Download, CircleArrowLeft } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="flex items-center gap-2"> ··· 10 11 </ToggleGroup> 11 12 12 13 <ToggleGroup type="single"> 13 - <ToggleGroupItem value="1" 14 - ><svg 15 - xmlns="http://www.w3.org/2000/svg" 16 - viewBox="0 0 24 24" 17 - fill="currentColor" 18 - class="size-6" 19 - > 20 - <path 21 - d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" 22 - /> 23 - </svg> 14 + <ToggleGroupItem value="1"> 15 + <SlidersHorizontal size={24} strokeWidth={2} /> 24 16 </ToggleGroupItem> 25 - <ToggleGroupItem value="2" 26 - ><svg 27 - xmlns="http://www.w3.org/2000/svg" 28 - viewBox="0 0 24 24" 29 - fill="currentColor" 30 - class="size-6" 31 - > 32 - <path 33 - d="M12 1.5a.75.75 0 0 1 .75.75V7.5h-1.5V2.25A.75.75 0 0 1 12 1.5ZM11.25 7.5v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V7.5h3.75a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h3.75Z" 34 - /> 35 - </svg> 17 + <ToggleGroupItem value="2"> 18 + <Download size={24} strokeWidth={2} /> 36 19 </ToggleGroupItem> 37 - <ToggleGroupItem value="3" 38 - ><svg 39 - xmlns="http://www.w3.org/2000/svg" 40 - viewBox="0 0 24 24" 41 - fill="currentColor" 42 - class="size-6" 43 - > 44 - <path 45 - fill-rule="evenodd" 46 - d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z" 47 - clip-rule="evenodd" 48 - /> 49 - </svg> 20 + <ToggleGroupItem value="3"> 21 + <CircleArrowLeft size={24} strokeWidth={2} /> 50 22 </ToggleGroupItem> 51 23 </ToggleGroup> 52 24 </div>
+3 -12
apps/docs/src/lib/docs/core/toggle/Card.svelte
··· 1 1 <script> 2 2 import { cn, toggleVariants } from '@foxui/all'; 3 + import { ZapOff, Zap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="flex gap-4"> 6 7 <div class={toggleVariants()}> 7 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 8 - <path 9 - d="m20.798 11.012-3.188 3.416L9.462 6.28l4.24-4.542a.75.75 0 0 1 1.272.71L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262ZM3.202 12.988 6.39 9.572l8.148 8.148-4.24 4.542a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262ZM3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18Z" 10 - /> 11 - </svg> 8 + <ZapOff size={24} strokeWidth={2} /> 12 9 </div> 13 10 14 11 <div class={toggleVariants()} data-state="on"> 15 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 16 - <path 17 - fill-rule="evenodd" 18 - d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" 19 - clip-rule="evenodd" 20 - /> 21 - </svg> 12 + <Zap size={24} strokeWidth={2} /> 22 13 </div> 23 14 </div>
+11 -60
apps/docs/src/lib/docs/core/toggle/Example.svelte
··· 1 1 <script> 2 2 import { Toggle } from '@foxui/all'; 3 + import { GraduationCap } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="flex items-center gap-2"> 6 7 <Toggle>Toggle</Toggle> 7 8 8 - <Toggle 9 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 10 - <path 11 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 12 - /> 13 - <path 14 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 15 - /> 16 - <path 17 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 18 - /> 19 - </svg> 9 + <Toggle> 10 + <GraduationCap size={20} strokeWidth={2} /> 20 11 </Toggle> 21 - <Toggle size="xs" 22 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 23 - <path 24 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 25 - /> 26 - <path 27 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 28 - /> 29 - <path 30 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 31 - /> 32 - </svg> 12 + <Toggle size="xs"> 13 + <GraduationCap size={16} strokeWidth={2} /> 33 14 </Toggle> 34 - <Toggle size="sm" 35 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 36 - <path 37 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 38 - /> 39 - <path 40 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 41 - /> 42 - <path 43 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 44 - /> 45 - </svg> 15 + <Toggle size="sm"> 16 + <GraduationCap size={16} strokeWidth={2} /> 46 17 </Toggle> 47 18 48 - <Toggle size="lg" 49 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 50 - <path 51 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 52 - /> 53 - <path 54 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 55 - /> 56 - <path 57 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 58 - /> 59 - </svg> 19 + <Toggle size="lg"> 20 + <GraduationCap size={20} strokeWidth={2} /> 60 21 </Toggle> 61 22 62 - <Toggle 63 - ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> 64 - <path 65 - d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" 66 - /> 67 - <path 68 - d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" 69 - /> 70 - <path 71 - d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" 72 - /> 73 - </svg> 23 + <Toggle> 24 + <GraduationCap size={24} strokeWidth={2} /> 74 25 Toggle 75 26 </Toggle> 76 27 </div>
+3 -20
apps/docs/src/lib/docs/social/card-swiper/Card.svelte
··· 1 1 <script> 2 2 import { Button } from '@foxui/all'; 3 + import { X, Heart } from '@foxui/all/icons'; 3 4 </script> 4 5 5 6 <div class="relative flex p-8"> ··· 12 13 13 14 <div class="absolute bottom-2 -ml-10 flex w-full justify-between px-2"> 14 15 <Button size="iconSm"> 15 - <svg 16 - xmlns="http://www.w3.org/2000/svg" 17 - fill="none" 18 - viewBox="0 0 24 24" 19 - stroke-width="2.5" 20 - stroke="currentColor" 21 - class="size-6" 22 - > 23 - <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 24 - </svg> 16 + <X size={24} strokeWidth={2.5} /> 25 17 </Button> 26 18 <Button size="iconSm"> 27 - <svg 28 - xmlns="http://www.w3.org/2000/svg" 29 - viewBox="0 0 24 24" 30 - fill="currentColor" 31 - class="size-6" 32 - > 33 - <path 34 - d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" 35 - /> 36 - </svg> 19 + <Heart size={24} strokeWidth={2} /> 37 20 </Button> 38 21 </div> 39 22 </div>
+3 -20
apps/docs/src/lib/docs/social/card-swiper/Example.svelte
··· 1 1 <script lang="ts"> 2 2 import { Button } from '@foxui/all'; 3 3 import { CardSwiper } from '@foxui/all'; 4 + import { X, Heart } from '@foxui/all/icons'; 4 5 5 6 import profile1 from '$lib/assets/profiles/0.webp'; 6 7 import profile2 from '$lib/assets/profiles/1.webp'; ··· 41 42 42 43 <div class="absolute bottom-2 flex w-full justify-between px-2"> 43 44 <Button onclick={() => swipe('left')} size="iconLg"> 44 - <svg 45 - xmlns="http://www.w3.org/2000/svg" 46 - fill="none" 47 - viewBox="0 0 24 24" 48 - stroke-width="2.5" 49 - stroke="currentColor" 50 - class="size-6" 51 - > 52 - <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 53 - </svg> 45 + <X size={24} strokeWidth={2.5} /> 54 46 </Button> 55 47 <Button onclick={() => swipe('right')} size="iconLg"> 56 - <svg 57 - xmlns="http://www.w3.org/2000/svg" 58 - viewBox="0 0 24 24" 59 - fill="currentColor" 60 - class="size-6" 61 - > 62 - <path 63 - d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" 64 - /> 65 - </svg> 48 + <Heart size={24} strokeWidth={2} /> 66 49 </Button> 67 50 </div> 68 51 </div>
+2 -16
apps/docs/src/lib/docs/social/emoji-picker/Example.svelte
··· 1 1 <script lang="ts"> 2 2 import { Button } from '@foxui/all'; 3 3 import { EmojiPicker, PopoverEmojiPicker } from '@foxui/all'; 4 + import { Smile } from '@foxui/all/icons'; 4 5 5 6 let emojis: string[] = $state([]); 6 7 </script> ··· 19 20 <PopoverEmojiPicker onpicked={(emoji) => emojis.unshift(emoji.unicode)} triggerText="Emoji Picker"> 20 21 {#snippet child({ props })} 21 22 <Button size="iconLg" {...props}> 22 - <svg 23 - xmlns="http://www.w3.org/2000/svg" 24 - viewBox="0 0 24 24" 25 - fill="none" 26 - stroke="currentColor" 27 - stroke-width="1.5" 28 - stroke-linecap="round" 29 - stroke-linejoin="round" 30 - class="lucide lucide-smile-icon lucide-smile" 31 - ><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line 32 - x1="9" 33 - x2="9.01" 34 - y1="9" 35 - y2="9" 36 - /><line x1="15" x2="15.01" y1="9" y2="9" /></svg 37 - > 23 + <Smile size={24} strokeWidth={1.5} /> 38 24 </Button> 39 25 {/snippet} 40 26 </PopoverEmojiPicker>
+2 -14
apps/docs/src/lib/docs/social/microblogging-post-creator/Example.svelte
··· 9 9 EmbedImage, 10 10 Box 11 11 } from '@foxui/all'; 12 + import { X } from '@foxui/all/icons'; 12 13 import Avatar from '../../../../../../../packages/core/src/lib/components/avatar/Avatar.svelte'; 13 14 14 15 let content: MicrobloggingPostContent = $state({ text: '', json: { type: 'doc' } }); ··· 82 83 class="bg-base-900/60 hover:bg-base-900/80 absolute top-2 right-2 z-10 cursor-pointer rounded-full p-1 text-white" 83 84 onclick={() => removeEmbed(i)} 84 85 > 85 - <svg 86 - xmlns="http://www.w3.org/2000/svg" 87 - fill="none" 88 - viewBox="0 0 24 24" 89 - stroke-width="2" 90 - stroke="currentColor" 91 - class="size-4" 92 - > 93 - <path 94 - stroke-linecap="round" 95 - stroke-linejoin="round" 96 - d="M6 18 18 6M6 6l12 12" 97 - /> 98 - </svg> 86 + <X size={16} strokeWidth={2} /> 99 87 </button> 100 88 </div> 101 89 {/each}
+6 -20
apps/docs/src/lib/docs/text/embed/Card.svelte
··· 1 + <script> 2 + import { Play, Link } from '@foxui/all/icons'; 3 + </script> 4 + 1 5 <div class="flex h-full w-full items-center justify-center p-4"> 2 6 <div class="w-full space-y-2"> 3 7 <div 4 8 class="bg-base-200 dark:bg-base-700 flex h-20 w-full items-center justify-center rounded-ui-sm" 5 9 > 6 - <svg 7 - class="text-base-400 h-8 w-8" 8 - fill="currentColor" 9 - viewBox="0 0 24 24" 10 - > 11 - <path d="M8 5v14l11-7z" /> 12 - </svg> 10 + <Play size={32} strokeWidth={2} class="text-base-400" /> 13 11 </div> 14 12 <div 15 13 class="bg-base-200 dark:bg-base-700 flex h-5 w-full items-center gap-1.5 rounded-full px-2.5" 16 14 > 17 - <svg 18 - class="text-base-400 h-2.5 w-2.5 shrink-0" 19 - fill="none" 20 - stroke="currentColor" 21 - stroke-width="2" 22 - viewBox="0 0 24 24" 23 - > 24 - <path 25 - stroke-linecap="round" 26 - stroke-linejoin="round" 27 - d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" 28 - /> 29 - </svg> 15 + <Link size={10} strokeWidth={2} class="text-base-400 shrink-0" /> 30 16 <div class="bg-base-300 dark:bg-base-600 h-1.5 w-full rounded-full"></div> 31 17 </div> 32 18 </div>
+5 -13
apps/docs/src/lib/docs/text/image/Card.svelte
··· 1 + <script> 2 + import { Image } from '@foxui/all/icons'; 3 + </script> 4 + 1 5 <div class="flex h-full w-full items-center justify-center p-4"> 2 6 <div class="w-full space-y-2"> 3 7 <div 4 8 class="bg-base-200 dark:bg-base-700 flex h-20 w-full items-center justify-center rounded-ui-sm" 5 9 > 6 - <svg 7 - class="text-base-400 h-8 w-8" 8 - fill="none" 9 - stroke="currentColor" 10 - stroke-width="1.5" 11 - viewBox="0 0 24 24" 12 - > 13 - <path 14 - stroke-linecap="round" 15 - stroke-linejoin="round" 16 - d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Zm14.25-12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" 17 - /> 18 - </svg> 10 + <Image size={32} strokeWidth={1.5} class="text-base-400" /> 19 11 </div> 20 12 <div class="bg-base-200 dark:bg-base-700 h-1.5 w-full rounded-full"> 21 13 <div class="bg-accent-500 h-1.5 w-3/5 rounded-full"></div>
+13
apps/docs/src/routes/(main)/docs/icons/+page.svelte
··· 1 + <script lang="ts"> 2 + import IconsDocs from './Icons.md'; 3 + import { Prose } from '@foxui/all'; 4 + import LlmsButton from '$lib/site-components/LlmsButton.svelte'; 5 + </script> 6 + 7 + <div class="mb-2 flex justify-end"> 8 + <LlmsButton href="/docs/icons/llms.txt" /> 9 + </div> 10 + 11 + <Prose> 12 + <IconsDocs /> 13 + </Prose>
+78
apps/docs/src/routes/(main)/docs/icons/Icons.md
··· 1 + # Icons 2 + 3 + foxui re-exports two icon libraries so your icons match the components out of the box. 4 + 5 + - **Static icons** — [Lucide](https://lucide.dev) (~1500 icons). The de-facto Svelte icon set. Clean, consistent, friendly. 6 + - **Animated icons** — [Moving Icons](https://www.movingicons.dev) (~500 icons). Hand-crafted animated versions of popular Lucide icons, built natively for Svelte 5. 7 + 8 + Both use the same API (size, color, strokeWidth, class). Moving Icons additionally accept an `animate` prop to trigger motion. 9 + 10 + ## Static icons 11 + 12 + Import any [Lucide icon](https://lucide.dev/icons) in PascalCase: 13 + 14 + ```svelte 15 + <script> 16 + import { ArrowRight, Check, User } from '@foxui/core/icons'; 17 + </script> 18 + 19 + <ArrowRight size={20} /> 20 + <Check size={16} strokeWidth={2.5} /> 21 + <User class="text-accent-500" /> 22 + ``` 23 + 24 + Browse the full icon set at [lucide.dev/icons](https://lucide.dev/icons). 25 + 26 + ## Animated icons 27 + 28 + Import any [Moving Icon](https://www.movingicons.dev/icons) with the same name as its Lucide counterpart: 29 + 30 + ```svelte 31 + <script> 32 + import { Bell } from '@foxui/core/moving-icons'; 33 + 34 + let animate = $state(false); 35 + </script> 36 + 37 + <button 38 + onmouseenter={() => (animate = true)} 39 + onmouseleave={() => (animate = false)} 40 + > 41 + <Bell size={20} {animate} /> 42 + </button> 43 + ``` 44 + 45 + Set `animate={true}` to play the motion once (useful for mount / state change) or bind it to hover/focus state for interactive animations. 46 + 47 + Browse the animated set at [movingicons.dev/icons](https://www.movingicons.dev/icons). 48 + 49 + ## Props 50 + 51 + Both libraries share the same core props: 52 + 53 + - `size` — Icon size in pixels (default: `24`) 54 + - `color` — Stroke color, any CSS color (default: `'currentColor'`) 55 + - `strokeWidth` — SVG stroke width (default: `2`) 56 + - `class` — Tailwind or custom classes 57 + 58 + Moving icons add one more: 59 + 60 + - `animate` — Boolean. When `true`, plays the icon's animation. 61 + 62 + ## Using with @foxui/all 63 + 64 + If you use the metapackage, the same subpaths work: 65 + 66 + ```svelte 67 + <script> 68 + import { Check } from '@foxui/all/icons'; 69 + import { Copy } from '@foxui/all/moving-icons'; 70 + </script> 71 + ``` 72 + 73 + ## Picking the right one 74 + 75 + - Use **static** icons for most cases — in-page UI, content, buttons without interaction feedback 76 + - Use **animated** icons for moments that deserve motion — copy success, notification bells, menu toggles, hover feedback on important actions 77 + 78 + Both libraries are fully tree-shaken, so only the icons you actually import end up in your bundle.
+2 -1
apps/docs/src/routes/(main)/docs/llms.txt/+server.ts
··· 22 22 'quick-start': 'Quick Start', 23 23 philosophy: 'Philosophy', 24 24 customization: 'Customization', 25 + icons: 'Icons', 25 26 haptics: 'Haptics', 26 27 llms: 'Using foxui with AI Assistants' 27 28 }; 28 29 29 30 // Keep a stable sidebar-like order; anything new gets appended alphabetically. 30 - const order = ['quick-start', 'philosophy', 'customization', 'haptics', 'llms']; 31 + const order = ['quick-start', 'philosophy', 'customization', 'icons', 'haptics', 'llms']; 31 32 32 33 // Stable ordering for component categories, matching the sidebar 33 34 const categoryOrder = [
+3 -27
apps/docs/src/routes/(main)/components/[category]/[slug]/+page.svelte
··· 1 1 <script lang="ts"> 2 2 import { page } from '$app/state'; 3 3 import { error } from '@sveltejs/kit'; 4 - import { Prose, Button } from '@foxui/all'; 4 + import { Prose } from '@foxui/all'; 5 5 import Api from '$lib/site-components/API.svelte'; 6 + import LlmsButton from '$lib/site-components/LlmsButton.svelte'; 6 7 import type { ComponentDoc } from '$lib/types/schema'; 7 - import { resolve } from '$app/paths'; 8 8 9 9 type ModuleEntry = { 10 10 default: ComponentDoc; ··· 28 28 <Prose> 29 29 <div class="flex items-end gap-4"> 30 30 <h1 class="my-0!">{componentDoc.title}</h1> 31 - <Button 32 - size="sm" 33 - class="not-prose mb-1" 34 - variant="secondary" 35 - href={resolve(`/components/${category}/${slug}/llms.txt`)} 36 - target="_blank" 37 - > 38 - <svg 39 - xmlns="http://www.w3.org/2000/svg" 40 - width="16" 41 - height="16" 42 - viewBox="0 0 24 24" 43 - fill="none" 44 - stroke="currentColor" 45 - stroke-width="2" 46 - stroke-linecap="round" 47 - stroke-linejoin="round" 48 - ><path 49 - d="M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35" 50 - /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="m5 16-3 3 3 3" /><path 51 - d="m9 22 3-3-3-3" 52 - /></svg 53 - > 54 - <span>llms.txt</span> 55 - </Button> 31 + <LlmsButton href={`/components/${category}/${slug}/llms.txt`} /> 56 32 </div> 57 33 {#if componentDoc.example} 58 34 {@const Example = componentDoc.example}