internal refactors & update melt version (huntabyte#141)

tmarnet · Oct 26, 2023 · f50a4eb · f50a4eb
1 parent 7442394
commit f50a4eb
Show file tree

Hide file tree

Showing 164 changed files with 1,538 additions and 1,194 deletions.
diff --git a/.changeset/large-clocks-knock.md b/.changeset/large-clocks-knock.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Update Melt UI to v0.57.0
diff --git a/content/components/accordion.md b/content/components/accordion.md
@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: Organizes content in collapsible sections, enabling users to expand or collapse them as needed.
+description: Organizes content into collapsable sections.
 ---
 
 <script>

diff --git a/content/components/switch.md b/content/components/switch.md
@@ -3,6 +3,17 @@ title: Switch
 description: Enables users to toggle between two states.
 ---
 
+<script>
+	import { APISection, ComponentPreview, SwitchDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="switch-demo" comp="Switch">
+
+<SwitchDemo slot="preview" />
+
+</ComponentPreview>
+
 ## Structure
 
 ```svelte

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
 		"lucide-svelte": "^0.268.0",
+		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.8",
@@ -85,7 +86,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.56.0",
+		"@melt-ui/svelte": "0.57.0",
 		"nanoid": "^5.0.2"
 	},
 	"peerDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import * as Tabs from "@/components/ui/tabs";
+	import PreviewSwitch from "./preview-switch.svelte";
 	import { cn } from "@/utils";
 	let className: string;
 	export let align: "center" | "start" | "end" = "center";
 	export { className as class };
+
+	let showCode = false;
 </script>
 
 {#if dev}
@@ -13,45 +15,33 @@
 		{...$$restProps}
 		data-preview
 	>
-		<Tabs.Root value="preview" class="relative mr-auto w-full">
-			<div class="flex items-center justify-between">
-				<Tabs.List
-					class="absolute w-full justify-end rounded-none bg-transparent p-0 z-20 top-5 right-4"
-				>
-					<Tabs.Trigger
-						value="preview"
-						class="relative h-9 rounded-lg bg-muted px-3 py-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:bg-background data-[state=active]:text-foreground hover:bg-primary/5 transition-all"
-					>
-						Preview
-					</Tabs.Trigger>
-					<Tabs.Trigger
-						value="code"
-						class="relative h-9 rounded-lg bg-muted px-3 py-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:bg-background data-[state=active]:text-foreground hover:bg-primary/5 transition-all"
-					>
-						&lt;Code/&gt;
-					</Tabs.Trigger>
-				</Tabs.List>
+		<div class="relative mr-auto w-full">
+			<div class="absolute rounded-none bg-transparent p-0 z-20 top-5 right-4">
+				<PreviewSwitch bind:checked={showCode} />
 			</div>
-			<Tabs.Content value="preview" class="relative rounded-md bg-muted">
-				<div
-					class={cn(
-						"preview flex min-h-[350px] w-full justify-center p-10",
-						{
-							"items-center": align === "center",
-							"items-start": align === "start",
-							"items-end": align === "end"
-						},
-						className
-					)}
-				>
-					<slot name="preview" />
+			{#if showCode}
+				<div>
+					<div class="w-full rounded-md ![&_pre]:mt-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+						<slot />
+					</div>
 				</div>
-			</Tabs.Content>
-			<Tabs.Content value="code">
-				<div class="w-full rounded-md ![&_pre]:mt-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
-					<slot />
+			{:else}
+				<div class="relative rounded-md bg-secondary border border-border">
+					<div
+						class={cn(
+							"preview flex min-h-[350px] w-full justify-center p-12",
+							{
+								"items-center": align === "center",
+								"items-start": align === "start",
+								"items-end": align === "end"
+							},
+							className
+						)}
+					>
+						<slot name="preview" />
+					</div>
 				</div>
-			</Tabs.Content>
-		</Tabs.Root>
+			{/if}
+		</div>
 	</div>
 {/if}
diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
@@ -1,20 +1,36 @@
 <script lang="ts">
-	import * as RadioGroup from "@/components/ui/radio-group";
-	import * as Label from "@/components/ui/label";
+	import { RadioGroup, Label } from "$lib";
 </script>
 
-<RadioGroup.Root value="comfortable">
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="default" id="r1" />
-		<Label.Root for="r1">Default</Label.Root>
+<RadioGroup.Root class="flex flex-col gap-3">
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="amazing"
+			value="amazing"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+		/>
+		<Label.Root for="amazing" class="font-medium text-sm">Amazing</Label.Root>
 	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="comfortable" id="r2" />
-		<Label.Root for="r2">Comfortable</Label.Root>
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="average"
+			value="average"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1 "
+		/>
+		<Label.Root for="average" class="font-medium text-sm">Average</Label.Root>
 	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="compact" id="r3" />
-		<Label.Root for="r3">Compact</Label.Root>
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="terrible"
+			value="terrible"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+		/>
+		<Label.Root for="terrible" class="font-medium text-sm">Terrible</Label.Root>
 	</div>
-	<RadioGroup.Input name="spacing" />
 </RadioGroup.Root>
diff --git a/src/components/demos/switch-demo.svelte b/src/components/demos/switch-demo.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
-	import * as Label from "@/components/ui/label";
-	import * as Switch from "@/components/ui/switch";
+	import { Switch, Label } from "$lib";
 </script>
 
 <div class="flex items-center space-x-2">
-	<Switch.Root id="airplane-mode" />
-	<Label.Root for="airplane-mode">Airplane Mode</Label.Root>
+	<Switch.Root
+		id="airplane-mode"
+		class="peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60"
+	>
+		<Switch.Thumb
+			class="pointer-events-none relative inline-block h-4 w-4 rounded-full data-[state=unchecked]:bg-accent shadow-lg ring-0 transition-all transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4 ease-in-out data-[state=checked]:bg-background"
+		/>
+	</Switch.Root>
+	<Label.Root for="airplane-mode" class="text-sm font-medium">Airplane Mode</Label.Root>
 </div>
diff --git a/src/components/markdown/pre.svelte b/src/components/markdown/pre.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <pre
-	class={cn("mb-4 mt-6 overflow-x-auto rounded-lg border py-4 bg-primary/5", className)}
+	class={cn("mb-4 mt-6 overflow-x-auto rounded-lg border py-4 bg-accent", className)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />

diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
@@ -6,9 +6,9 @@
 
 {#if items.length}
 	<aside
-		class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-64px)] lg:sticky lg:top-[60px] py-10 pr-2"
+		class="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto border-r border-border"
 	>
-		<div class="relative">
+		<div class="h-full py-6 lg:py-8 pr-8">
 			<nav class="space-y-3">
 				<div class="flex flex-col w-full">
 					{#each items as item, index (index)}

diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
@@ -5,7 +5,7 @@
 	export { className as class };
 </script>
 
-<p class={cn("text-xl font-semibold text-foreground/40 mt-4 tracking-tight", className)}>
+<p class={cn("text-lg font-medium text-foreground/40 mt-4 tracking-tight", className)}>
 	<Balancer>
 		<slot />
 	</Balancer>

diff --git a/src/components/page-header/page-header-heading.svelte b/src/components/page-header/page-header-heading.svelte
@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-tight", className)}>
+<h1 class={cn("scroll-m-20 text-4xl font-semibold tracking-tight", className)}>
 	<slot />
 </h1>
diff --git a/src/components/page-header/page-header.svelte b/src/components/page-header/page-header.svelte
@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<section class={cn("relative pt-[72px]", className)}>
+<section class={cn("relative", className)}>
 	<slot />
 </section>
diff --git a/src/components/preview-switch.svelte b/src/components/preview-switch.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch } from "@/lib";
+	import { cn } from "@/utils";
+
+	type $$Props = Switch.Props;
+	type $$Events = Switch.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<Switch.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60",
+		className
+	)}
+	on:click
+	on:keydown
+>
+	<Switch.Thumb
+		class={cn(
+			"pointer-events-none relative inline-block h-4 w-4 rounded-full data-[state=unchecked]:bg-accent shadow-lg ring-0 transition-all transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4 ease-in-out data-[state=checked]:bg-background"
+		)}
+	/>
+</Switch.Root>
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <header class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50">
-	<div class="mx-auto px-4 container">
+	<div class="container">
 		<div class="flex items-center justify-between gap-3 h-16">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />