-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Updated to svelte 5 && reworked styling && skills list
- Loading branch information
Showing
32 changed files
with
488 additions
and
396 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,16 @@ | ||
| <script lang="ts"> | ||
| import type { HTMLAttributes } from 'svelte/elements'; | ||
| import { cn } from '$lib/utils.js'; | ||
| import type { WithElementRef } from "bits-ui"; | ||
| import type { HTMLAttributes } from "svelte/elements"; | ||
| import { cn } from "$lib/utils.js"; | ||
| type $$Props = HTMLAttributes<HTMLDivElement>; | ||
| let className: $$Props['class'] = undefined; | ||
| export { className as class }; | ||
| let { | ||
| ref = $bindable(null), | ||
| class: className, | ||
| children, | ||
| ...restProps | ||
| }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); | ||
| </script> | ||
|
|
||
| <div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}> | ||
| <slot /> | ||
| <div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}> | ||
| {@render children?.()} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,25 @@ | ||
| <script lang="ts"> | ||
| import type { HTMLAttributes } from 'svelte/elements'; | ||
| import type { HeadingLevel } from './index.js'; | ||
| import { cn } from '$lib/utils.js'; | ||
| import type { HTMLAttributes } from "svelte/elements"; | ||
| import type { WithElementRef } from "bits-ui"; | ||
| import { cn } from "$lib/utils.js"; | ||
| type $$Props = HTMLAttributes<HTMLHeadingElement> & { | ||
| level?: HeadingLevel; | ||
| }; | ||
| let className: $$Props['class'] = undefined; | ||
| export let level: $$Props['level'] = 'h5'; | ||
| export { className as class }; | ||
| let { | ||
| ref = $bindable(null), | ||
| class: className, | ||
| level = 5, | ||
| children, | ||
| ...restProps | ||
| }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { | ||
| level?: 1 | 2 | 3 | 4 | 5 | 6; | ||
| } = $props(); | ||
| </script> | ||
|
|
||
| <svelte:element | ||
| this={level} | ||
| class={cn('mb-1 font-medium leading-none tracking-tight', className)} | ||
| {...$$restProps} | ||
| <div | ||
| role="heading" | ||
| aria-level={level} | ||
| bind:this={ref} | ||
| class={cn("mb-1 font-medium leading-none tracking-tight", className)} | ||
| {...restProps} | ||
| > | ||
| <slot /> | ||
| </svelte:element> | ||
| {@render children?.()} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,39 @@ | ||
| <script lang="ts"> | ||
| import type { HTMLAttributes } from 'svelte/elements'; | ||
| import { type Variant, alertVariants } from './index.js'; | ||
| import { cn } from '$lib/utils.js'; | ||
| <script lang="ts" module> | ||
| import { type VariantProps, tv } from "tailwind-variants"; | ||
| export const alertVariants = tv({ | ||
| base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", | ||
| variants: { | ||
| variant: { | ||
| default: "bg-background text-foreground", | ||
| destructive: | ||
| "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| }, | ||
| }); | ||
| type $$Props = HTMLAttributes<HTMLDivElement> & { | ||
| variant?: Variant; | ||
| }; | ||
| export type AlertVariant = VariantProps<typeof alertVariants>["variant"]; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import type { HTMLAttributes } from "svelte/elements"; | ||
| import type { WithElementRef } from "bits-ui"; | ||
| import { cn } from "$lib/utils.js"; | ||
| let className: $$Props['class'] = undefined; | ||
| export let variant: $$Props['variant'] = 'default'; | ||
| export { className as class }; | ||
| let { | ||
| ref = $bindable(null), | ||
| class: className, | ||
| variant = "default", | ||
| children, | ||
| ...restProps | ||
| }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { | ||
| variant?: AlertVariant; | ||
| } = $props(); | ||
| </script> | ||
|
|
||
| <div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert"> | ||
| <slot /> | ||
| <div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert"> | ||
| {@render children?.()} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| <script lang="ts"> | ||
| import { Avatar as AvatarPrimitive } from 'bits-ui'; | ||
| import { cn } from '$lib/utils.js'; | ||
| import { Avatar as AvatarPrimitive } from "bits-ui"; | ||
| import { cn } from "$lib/utils.js"; | ||
| type $$Props = AvatarPrimitive.FallbackProps; | ||
| let className: $$Props['class'] = undefined; | ||
| export { className as class }; | ||
| let { | ||
| ref = $bindable(null), | ||
| class: className, | ||
| ...restProps | ||
| }: AvatarPrimitive.FallbackProps = $props(); | ||
| </script> | ||
|
|
||
| <AvatarPrimitive.Fallback | ||
| class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)} | ||
| {...$$restProps} | ||
| > | ||
| <slot /> | ||
| </AvatarPrimitive.Fallback> | ||
| bind:ref | ||
| class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)} | ||
| {...restProps} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,16 @@ | ||
| <script lang="ts"> | ||
| import { Avatar as AvatarPrimitive } from 'bits-ui'; | ||
| import { cn } from '$lib/utils.js'; | ||
| import { Avatar as AvatarPrimitive } from "bits-ui"; | ||
| import { cn } from "$lib/utils.js"; | ||
| type $$Props = AvatarPrimitive.ImageProps; | ||
| let className: $$Props['class'] = undefined; | ||
| export let src: $$Props['src'] = undefined; | ||
| export let alt: $$Props['alt'] = undefined; | ||
| export { className as class }; | ||
| let { | ||
| ref = $bindable(null), | ||
| class: className, | ||
| ...restProps | ||
| }: AvatarPrimitive.ImageProps = $props(); | ||
| </script> | ||
|
|
||
| <AvatarPrimitive.Image | ||
| {src} | ||
| {alt} | ||
| class={cn('aspect-square h-full w-full', className)} | ||
| {...$$restProps} | ||
| bind:ref | ||
| class={cn("aspect-square h-full w-full", className)} | ||
| {...restProps} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,50 @@ | ||
| <script lang="ts" module> | ||
| import { type VariantProps, tv } from "tailwind-variants"; | ||
| export const badgeVariants = tv({ | ||
| base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", | ||
| variants: { | ||
| variant: { | ||
| default: | ||
| "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent", | ||
| secondary: | ||
| "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent", | ||
| destructive: | ||
| "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent", | ||
| outline: "text-foreground", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| }, | ||
| }); | ||
| export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"]; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import { type Variant, badgeVariants } from './index.js'; | ||
| import { cn } from '$lib/utils.js'; | ||
| import type { WithElementRef } from "bits-ui"; | ||
| import type { HTMLAnchorAttributes } from "svelte/elements"; | ||
| import { cn } from "$lib/utils.js"; | ||
| let className: string | undefined | null = undefined; | ||
| export let href: string | undefined = undefined; | ||
| export let variant: Variant = 'default'; | ||
| export { className as class }; | ||
| let { | ||
| ref = $bindable(null), | ||
| href, | ||
| class: className, | ||
| variant = "default", | ||
| children, | ||
| ...restProps | ||
| }: WithElementRef<HTMLAnchorAttributes> & { | ||
| variant?: BadgeVariant; | ||
| } = $props(); | ||
| </script> | ||
|
|
||
| <svelte:element | ||
| this={href ? 'a' : 'span'} | ||
| this={href ? "a" : "span"} | ||
| bind:this={ref} | ||
| {href} | ||
| class={cn(badgeVariants({ variant, className }))} | ||
| {...$$restProps} | ||
| {...restProps} | ||
| > | ||
| <slot /> | ||
| {@render children?.()} | ||
| </svelte:element> |
Oops, something went wrong.