diff options
4 files changed, 53 insertions, 0 deletions
diff --git a/frontend/src/lib/components/ui/skeleton/index.ts b/frontend/src/lib/components/ui/skeleton/index.ts new file mode 100644 index 0000000..186db21 --- /dev/null +++ b/frontend/src/lib/components/ui/skeleton/index.ts @@ -0,0 +1,7 @@ +import Root from "./skeleton.svelte"; + +export { + Root, + // + Root as Skeleton, +}; diff --git a/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/frontend/src/lib/components/ui/skeleton/skeleton.svelte new file mode 100644 index 0000000..1a940ee --- /dev/null +++ b/frontend/src/lib/components/ui/skeleton/skeleton.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js"; + import type { HTMLAttributes } from "svelte/elements"; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="skeleton" + class={cn("bg-muted rounded-md animate-pulse", className)} + {...restProps} +></div> diff --git a/frontend/src/lib/components/ui/textarea/index.ts b/frontend/src/lib/components/ui/textarea/index.ts new file mode 100644 index 0000000..ace797a --- /dev/null +++ b/frontend/src/lib/components/ui/textarea/index.ts @@ -0,0 +1,7 @@ +import Root from "./textarea.svelte"; + +export { + Root, + // + Root as Textarea, +}; diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte new file mode 100644 index 0000000..76869d0 --- /dev/null +++ b/frontend/src/lib/components/ui/textarea/textarea.svelte @@ -0,0 +1,22 @@ +<script lang="ts"> + import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js"; + import type { HTMLTextareaAttributes } from "svelte/elements"; + + let { + ref = $bindable(null), + value = $bindable(), + class: className, + "data-slot": dataSlot = "textarea", + ...restProps + }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props(); +</script> + +<textarea + bind:this={ref} + data-slot={dataSlot} + class={cn( + "border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", + className + )} + bind:value + {...restProps}></textarea> |