Update layout to be a svelte monorepo with shadcn-svelte
Also: add the start of a.starrysky.fyi
diff --git a/packages/components/src/lib/ui/button/Button.svelte b/packages/components/src/lib/ui/button/Button.svelte
new file mode 100644
index 0000000..c65bd1d
--- /dev/null
+++ b/packages/components/src/lib/ui/button/Button.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+ import type { VariantProps } from "class-variance-authority";
+ import type {
+ HTMLAnchorAttributes,
+ HTMLButtonAttributes
+ } from "svelte/elements";
+ import { cn } from "$lib/utils";
+ import { buttonVariants } from ".";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+ export let href: HTMLAnchorAttributes["href"] = undefined;
+ export let type: HTMLButtonAttributes["type"] = undefined;
+ export let variant: VariantProps<typeof buttonVariants>["variant"] =
+ "default";
+ export let size: VariantProps<typeof buttonVariants>["size"] = "default";
+</script>
+
+<svelte:element
+ this={href ? "a" : "button"}
+ type={href ? undefined : type}
+ {href}
+ class={cn(buttonVariants({ variant, size, className }))}
+ {...$$restProps}
+ on:click
+ on:change
+ on:keydown
+ on:keyup
+ on:mouseenter
+ on:mouseleave
+>
+ <slot />
+</svelte:element>
diff --git a/packages/components/src/lib/ui/button/index.ts b/packages/components/src/lib/ui/button/index.ts
new file mode 100644
index 0000000..32393a4
--- /dev/null
+++ b/packages/components/src/lib/ui/button/index.ts
@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.svelte";
+
+export const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "underline-offset-4 hover:underline text-primary"
+ },
+ size: {
+ default: "h-10 py-2 px-4",
+ sm: "h-9 px-3 rounded-md",
+ lg: "h-11 px-8 rounded-md"
+ }
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default"
+ }
+ }
+);
diff --git a/packages/components/src/lib/ui/input/Input.svelte b/packages/components/src/lib/ui/input/Input.svelte
new file mode 100644
index 0000000..40b1ac9
--- /dev/null
+++ b/packages/components/src/lib/ui/input/Input.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+ import type { HTMLInputAttributes } from "svelte/elements";
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+
+ export let value: HTMLInputAttributes["value"] = undefined;
+ export { className as class };
+</script>
+
+<input
+ class={cn(
+ "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ className
+ )}
+ bind:value
+ on:blur
+ on:change
+ on:click
+ on:focus
+ on:keydown
+ on:keypress
+ on:keyup
+ on:mouseover
+ on:mouseenter
+ on:mouseleave
+ on:paste
+ on:input
+ {...$$restProps}
+/>
diff --git a/packages/components/src/lib/ui/input/index.ts b/packages/components/src/lib/ui/input/index.ts
new file mode 100644
index 0000000..06f880b
--- /dev/null
+++ b/packages/components/src/lib/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.svelte";