[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

Configure Feed

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

refactor

Florian (Mar 24, 2025, 10:57 AM +0100) 07f2ebae dc6d71f9

+21 -20
+8
src/lib/index.ts
··· 5 5 export { Alert, AlertDescription, AlertTitle } from '$lib/components/base/alert'; 6 6 export { Avatar, AvatarGroup } from '$lib/components/base/avatar'; 7 7 export { Badge } from '$lib/components/base/badge'; 8 + 8 9 export { Button } from '$lib/components/base/button'; 10 + export { type ButtonProps } from '$lib/components/base/button/Button.svelte'; 11 + export { type ButtonSize, type ButtonVariant, buttonVariants } from '$lib/components/base/button/'; 12 + 9 13 export { default as Box } from '$lib/components/base/box/Box.svelte'; 10 14 export { default as ImageCard } from '$lib/components/base/card/ImageCard.svelte'; 11 15 export { default as ChatBubble } from '$lib/components/base/chat-bubble/ChatBubble.svelte'; ··· 13 17 export { default as Head } from '$lib/components/base/head/Head.svelte'; 14 18 export { default as Heading } from '$lib/components/base/heading/Heading.svelte'; 15 19 export { default as Image } from '$lib/components/base/image/Image.svelte'; 20 + export { type ImageProps } from '$lib/components/base/image/Image.svelte'; 16 21 export { default as ImageContainer } from '$lib/components/base/image-container/ImageContainer.svelte'; 17 22 export { Input } from '$lib/components/base/input/'; 18 23 export { Label } from '$lib/components/base/label/'; ··· 31 36 export { Tooltip } from '$lib/components/base/tooltip'; 32 37 export { default as Popover } from '$lib/components/base/popover/Popover.svelte'; 33 38 export { default as Subheading } from '$lib/components/base/heading/Subheading.svelte'; 39 + 40 + export { default as AddCopyCodeButtons } from '$lib/components/base/copy-code-button/AddCopyCodeButtons.svelte'; 41 + 34 42 35 43 // colors components 36 44 export { default as ColorGradientPicker } from '$lib/components/colors/color-gradient-picker/ColorGradientPicker.svelte';
+1 -1
src/lib/components/base/avatar/Avatar.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '$lib'; 3 3 import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 4 - import Image from '../image/Image.svelte'; 4 + import { Image } from '$lib'; 5 5 6 6 let { 7 7 src,
+1 -1
src/lib/components/base/card/ImageCard.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '$lib'; 3 - import ImageContainer from '../image-container/ImageContainer.svelte'; 3 + import { ImageContainer } from '$lib'; 4 4 5 5 const { 6 6 src,
-2
src/lib/components/base/head/Head.svelte
··· 1 1 <script lang="ts"> 2 - import { page } from '$app/state'; 3 - 4 2 const { 5 3 title, 6 4 description,
+1 -1
src/lib/components/base/image-container/ImageContainer.svelte
··· 1 1 <script lang="ts"> 2 2 import { cn } from '$lib'; 3 - import Image, { type ImageProps } from '../image/Image.svelte'; 3 + import { Image, type ImageProps } from '$lib'; 4 4 5 5 let { ref = $bindable(null), containerClasses, ...restProps }: ImageProps = $props(); 6 6 </script>
+1 -1
src/lib/components/base/modal/Modal.svelte
··· 1 1 <script lang="ts"> 2 2 import type { Snippet } from 'svelte'; 3 3 import { Dialog, type WithoutChild } from 'bits-ui'; 4 - import { Button, type ButtonProps } from '../button'; 4 + import { Button, type ButtonProps } from '$lib'; 5 5 import { cn } from '$lib'; 6 6 7 7 type Props = Dialog.RootProps & {
+2 -2
src/lib/components/base/number-input/NumberInput.svelte
··· 1 1 <script lang="ts" module> 2 2 import type { WithElementRef } from 'bits-ui'; 3 - import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'; 4 3 import { type VariantProps, tv } from 'tailwind-variants'; 5 4 import { cn } from '$lib'; 6 5 ··· 88 87 ...restProps 89 88 }: NumberInputProps = $props(); 90 89 91 - let input: HTMLInputElement; 92 90 let animated = $state(true); 93 91 let showCaret = $state(true); 92 + 94 93 function handleInput() { 95 94 if (!inputRef) return; 96 95 animated = false; ··· 104 103 inputRef.value = String(next); 105 104 value = next; 106 105 } 106 + 107 107 function handlePointerDown(event: PointerEvent, diff: number) { 108 108 animated = true; 109 109 if (event.pointerType === 'mouse') {
+2 -3
src/lib/components/base/popover/Popover.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib'; 3 - import { buttonVariants, type ButtonSize, type ButtonVariant } from '$lib/components/base/button'; 4 - import * as Popover from '$lib/components/base/popover'; 2 + import { cn, buttonVariants, type ButtonSize, type ButtonVariant } from '$lib'; 3 + import * as Popover from '.'; 5 4 import { Popover as PopoverPrimitive } from 'bits-ui'; 6 5 7 6 type Props = PopoverPrimitive.RootProps & {
+2 -2
src/lib/components/base/prose/Prose.svelte
··· 1 1 <script lang="ts"> 2 + import { AddCopyCodeButtons } from '$lib'; 3 + 2 4 let { children } = $props(); 3 - 4 - import AddCopyCodeButtons from '$lib/components/base/copy-code-button/AddCopyCodeButtons.svelte'; 5 5 6 6 // this is fucking hacky, todo fix that 7 7 </script>
+1 -1
src/lib/components/base/scroll-area/ScrollArea.svelte
··· 22 22 } 23 23 </script> 24 24 25 - <div class={cn('scrollbar', getOrientationClasses(), className)}> 25 + <div class={cn('scrollbar', getOrientationClasses(), className)} {...restProps}> 26 26 {@render children?.()} 27 27 </div> 28 28
-1
src/lib/components/base/select/Select.svelte
··· 1 1 <script lang="ts"> 2 2 import { Toolbar, type WithoutChildrenOrChild } from 'bits-ui'; 3 - import { cn } from '$lib'; 4 3 5 4 type Item = 6 5 | {
+1 -2
src/lib/components/base/sidebar/Sidebar.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import ScrollArea from '../scroll-area/ScrollArea.svelte'; 5 - import { cn } from '$lib'; 4 + import { cn, ScrollArea } from '$lib'; 6 5 7 6 const { 8 7 class: className,
-1
src/lib/components/base/slider/SliderNumber.svelte
··· 1 1 <script lang="ts"> 2 2 import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 3 import { Slider } from '.'; 4 - import { cn } from '$lib'; 5 4 import NumberFlow from '@number-flow/svelte'; 6 5 7 6 let {
+1 -2
src/lib/components/base/theme-toggle/ThemeToggle.svelte
··· 6 6 7 7 <script lang="ts"> 8 8 import { onMount } from 'svelte'; 9 - import Button, { type ButtonProps } from '../button/Button.svelte'; 10 - import { cn } from '$lib'; 9 + import { Button, type ButtonProps, cn } from '$lib'; 11 10 12 11 onMount(() => { 13 12 // load from local storage