From 25cfd691f95ed0d5bcf1b155652dab9030fae673 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Sat, 5 Oct 2024 11:19:18 +0200
Subject: [PATCH] choicebox draft

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 .../ui/choicebox/choicebox-checkbox.svelte    | 70 ++++++++++++++++++
 .../ui/choicebox/choicebox-radio.svelte       | 73 +++++++++++++++++++
 .../components/ui/choicebox/choicebox.svelte  | 57 +++++++++++++++
 src/lib/components/ui/choicebox/index.ts      | 12 +++
 src/lib/components/ui/radio/radio-item.svelte |  1 -
 src/lib/config/sitemap.ts                     |  2 +-
 src/routes/choicebox/+page.svelte             | 27 ++++++-
 src/routes/choicebox/+page.ts                 | 22 ++++++
 src/routes/choicebox/disabled.svelte          | 26 +++++++
 src/routes/choicebox/multi-select.svelte      |  8 ++
 src/routes/choicebox/single-select.svelte     |  8 ++
 13 files changed, 309 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/ui/choicebox/choicebox-checkbox.svelte
 create mode 100644 src/lib/components/ui/choicebox/choicebox-radio.svelte
 create mode 100644 src/lib/components/ui/choicebox/choicebox.svelte
 create mode 100644 src/lib/components/ui/choicebox/index.ts
 create mode 100644 src/routes/choicebox/+page.ts
 create mode 100644 src/routes/choicebox/disabled.svelte
 create mode 100644 src/routes/choicebox/multi-select.svelte
 create mode 100644 src/routes/choicebox/single-select.svelte

diff --git a/package.json b/package.json
index 5c07ae0..0565fc3 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "1.0.0-next.8",
+		"bits-ui": "1.0.0-next.9",
 		"clsx": "^2.1.1",
 		"runed": "^0.15.3",
 		"tailwind-merge": "^2.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d14a7fd..6ea5b04 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       bits-ui:
-        specifier: 1.0.0-next.8
-        version: 1.0.0-next.8(svelte@5.0.0-next.260)
+        specifier: 1.0.0-next.9
+        version: 1.0.0-next.9(svelte@5.0.0-next.260)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -541,8 +541,8 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  bits-ui@1.0.0-next.8:
-    resolution: {integrity: sha512-3/uViRov9U3joTXBfUVZL+mvOfJTxAszj1kbt2uFqO3jZHbXurL0ZytM8Fxd3kcUzR981FX70vVDQfSSg70K5Q==}
+  bits-ui@1.0.0-next.9:
+    resolution: {integrity: sha512-ZFg7PVCY8rf29Mk0pPJ/uRMY6Iz+SJIIsXSw/f5RLTwvv1JHQwDgPoxc4ow26I94X6STNK38l6g3PcN95/f/ig==}
     engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
       svelte: ^5.0.0-next.1
@@ -1872,7 +1872,7 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@1.0.0-next.8(svelte@5.0.0-next.260):
+  bits-ui@1.0.0-next.9(svelte@5.0.0-next.260):
     dependencies:
       '@floating-ui/core': 1.6.8
       '@floating-ui/dom': 1.6.11
diff --git a/src/lib/components/ui/choicebox/choicebox-checkbox.svelte b/src/lib/components/ui/choicebox/choicebox-checkbox.svelte
new file mode 100644
index 0000000..10cf46f
--- /dev/null
+++ b/src/lib/components/ui/choicebox/choicebox-checkbox.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { cn } from '$lib/utils.js';
+	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	type Props = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
+		title: string;
+		children?: Snippet;
+		'aria-labelledby'?: string;
+		description?: string;
+	};
+
+	let {
+		class: class_name = undefined,
+		checked = $bindable(false),
+		id = undefined,
+		title,
+		description,
+		'aria-labelledby': aria_labelledby = undefined,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<label
+	id={aria_labelledby}
+	for={id}
+	class={cn(
+		'inline-flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border p-3 transition-colors',
+		"hover:border-gray-500 hover:bg-gray-100 hover:has-[button[aria-checked='true']]:bg-blue-200",
+		"has-[button[aria-checked='true']]:border-blue-600 has-[button[aria-checked='true']]:bg-blue-100",
+		// disabled
+		"has-[button[disabled='']]:cursor-not-allowed has-[button[disabled='']]:hover:border-gray-400 has-[button[disabled='']]:hover:bg-transparent"
+	)}
+>
+	<CheckboxPrimitive.Root
+		{id}
+		class={cn(
+			'peer order-2 box-content size-4 shrink-0 items-center gap-2 rounded-[4px] border border-gray-700 bg-background-100 ring-offset-background-200 transition-[border-color,background,box-shadow] delay-0 duration-200 ease-in-out hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-color focus-visible:ring-offset-2',
+			// checked
+			'data-[state=checked]:border-blue-900 data-[state=checked]:bg-blue-900 data-[state=checked]:text-background-200',
+			// disabled
+			'disabled:cursor-not-allowed disabled:border-gray-500 disabled:bg-gray-100 disabled:text-gray-500 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-gray-500 data-[disabled=true]:bg-gray-100 data-[disabled=true]:text-gray-500',
+			// disabled & checked
+			'data-[state=checked]:data-[disabled=true]:border-gray-600 data-[state=checked]:data-[disabled=true]:bg-gray-600 data-[state=checked]:data-[disabled=true]:text-background-200',
+			class_name
+		)}
+		bind:checked
+		{...rest}
+	>
+		{#snippet children({ checked })}
+			<div class={cn('flex size-4 items-center justify-center p-0.5 text-current')}>
+				{#if checked === true}
+					<Icons.Check aria-hidden="true" class="size-4" />
+				{:else if checked === 'indeterminate'}
+					<Icons.Minus aria-hidden="true" class="size-4" />
+				{/if}
+			</div>
+		{/snippet}
+	</CheckboxPrimitive.Root>
+	<div
+		class="grid grow gap-2 text-sm transition-colors peer-disabled:text-gray-500 peer-aria-checked:text-blue-900 peer-disabled:[&_p]:text-gray-500 peer-aria-checked:[&_p]:text-blue-900"
+	>
+		<p class="font-medium">{title}</p>
+		{#if description}
+			<p class="text-gray-900">{description}</p>
+		{/if}
+	</div>
+</label>
diff --git a/src/lib/components/ui/choicebox/choicebox-radio.svelte b/src/lib/components/ui/choicebox/choicebox-radio.svelte
new file mode 100644
index 0000000..259b6b1
--- /dev/null
+++ b/src/lib/components/ui/choicebox/choicebox-radio.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { RadioGroup as ChoiceboxRadioPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	type Props = WithoutChildrenOrChild<ChoiceboxRadioPrimitive.ItemProps> & {
+		title: string;
+		description?: string;
+		children?: Snippet;
+	};
+
+	let {
+		title,
+		description,
+		class: class_name = undefined,
+		value,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<!-- TODO: Move focus ring from the dot to the parent -->
+<label
+	for={value}
+	class={cn(
+		'group flex w-full cursor-pointer items-center gap-2 rounded-md border p-3 transition-colors',
+		"hover:border-gray-500 hover:bg-gray-100 hover:has-[button[aria-checked='true']]:bg-blue-200",
+		"has-[button[aria-checked='true']]:border-blue-600 has-[button[aria-checked='true']]:bg-blue-100",
+		// disabled
+		"has-[button[disabled='']]:cursor-not-allowed has-[button[disabled='']]:hover:border-gray-400 has-[button[disabled='']]:hover:bg-transparent"
+	)}
+>
+	<ChoiceboxRadioPrimitive.Item
+		id={value}
+		{value}
+		class={cn(
+			'peer order-2 aspect-square size-4 cursor-pointer rounded-full border border-gray-500 text-gray-1000 transition-[color,background-color] ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-color focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-gray-500 disabled:text-gray-500 disabled:hover:bg-transparent aria-checked:border-blue-900',
+			'group-hover:bg-background-200',
+			class_name
+		)}
+		{...rest}
+	>
+		{#snippet children({ checked })}
+			<div class="flex items-center justify-center">
+				{#if checked === true}
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="size-2.5 fill-blue-900 text-blue-900"
+					>
+						<circle cx="12" cy="12" r="10"></circle>
+					</svg>
+				{/if}
+			</div>
+		{/snippet}
+	</ChoiceboxRadioPrimitive.Item>
+	<div
+		class="grid grow gap-2 text-sm transition-colors peer-disabled:text-gray-500 peer-aria-checked:text-blue-900 peer-disabled:[&_p]:text-gray-500 peer-aria-checked:[&_p]:text-blue-900"
+	>
+		<p class="font-medium">{title}</p>
+		{#if description}
+			<p class="text-gray-900">{description}</p>
+		{/if}
+	</div>
+</label>
+
+<!-- TODO: Add a custom component prop here. Only issue is, how to access `checked` outside of the designated snippet -->
diff --git a/src/lib/components/ui/choicebox/choicebox.svelte b/src/lib/components/ui/choicebox/choicebox.svelte
new file mode 100644
index 0000000..28646d9
--- /dev/null
+++ b/src/lib/components/ui/choicebox/choicebox.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { RadioGroup as ChoiceboxGroupPrimitive } from 'bits-ui';
+
+	// TODO: This is poor implementation of the choicebox. Needs to be re-written.
+	type Props = ChoiceboxGroupPrimitive.RootProps & {
+		direction?: 'row' | 'column';
+		type: 'radio' | 'checkbox';
+		label?: string;
+	};
+
+	let {
+		class: class_name = undefined,
+		value = $bindable(undefined),
+		direction = 'column',
+		label = undefined,
+		type,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div class="grid gap-2">
+	{#if label}
+		<span class="text-xs text-gray-700">{label}</span>
+	{/if}
+	{#if type === 'radio'}
+		<ChoiceboxGroupPrimitive.Root
+			bind:value
+			class={cn(
+				'flex gap-3',
+				{
+					'flex-col': direction === 'column',
+					'flex-row': direction === 'row'
+				},
+				class_name
+			)}
+			{...rest}
+		>
+			{@render children?.()}
+		</ChoiceboxGroupPrimitive.Root>
+	{:else if type === 'checkbox'}
+		<div
+			class={cn(
+				'flex gap-3',
+				{
+					'flex-col': direction === 'column',
+					'flex-row': direction === 'row'
+				},
+				class_name
+			)}
+			{...rest}
+		>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/ui/choicebox/index.ts b/src/lib/components/ui/choicebox/index.ts
new file mode 100644
index 0000000..960d5c2
--- /dev/null
+++ b/src/lib/components/ui/choicebox/index.ts
@@ -0,0 +1,12 @@
+import Checkbox from './choicebox-checkbox.svelte';
+import Radio from './choicebox-radio.svelte';
+import Root from './choicebox.svelte';
+
+export {
+	Checkbox,
+	Checkbox as ChoiceboxCheckbox,
+	Root as ChoiceboxGroup,
+	Radio as ChoiceboxGroupRadio,
+	Radio,
+	Root
+};
diff --git a/src/lib/components/ui/radio/radio-item.svelte b/src/lib/components/ui/radio/radio-item.svelte
index 30337d9..d529754 100644
--- a/src/lib/components/ui/radio/radio-item.svelte
+++ b/src/lib/components/ui/radio/radio-item.svelte
@@ -20,7 +20,6 @@
 			class_name
 		)}
 		{...rest}
-		on:click
 	>
 		{#snippet children({ checked })}
 			<div class="flex items-center justify-center">
diff --git a/src/lib/config/sitemap.ts b/src/lib/config/sitemap.ts
index 0852ce8..3ca07d4 100644
--- a/src/lib/config/sitemap.ts
+++ b/src/lib/config/sitemap.ts
@@ -79,7 +79,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Choicebox',
 			href: '/choicebox',
-			status: 'soon'
+			status: 'draft'
 		},
 		{
 			title: 'Code Block',
diff --git a/src/routes/choicebox/+page.svelte b/src/routes/choicebox/+page.svelte
index c3039ed..4719e9a 100644
--- a/src/routes/choicebox/+page.svelte
+++ b/src/routes/choicebox/+page.svelte
@@ -1 +1,26 @@
-<h1>choicebox</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Disabled from './disabled.svelte';
+	import disabled_code from './disabled.svelte?raw';
+	import MultiSelect from './multi-select.svelte';
+	import multi_select_code from './multi-select.svelte?raw';
+	import SingleSelect from './single-select.svelte';
+	import single_select_code from './single-select.svelte?raw';
+
+	let { data } = $props();
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="single-select" class="space-y-2" code={single_select_code}>
+		<SingleSelect />
+	</Demo>
+
+	<Demo id="multi-select" class="space-y-2" code={multi_select_code}>
+		<MultiSelect />
+	</Demo>
+
+	<Demo id="disabled" class="space-y-2" code={disabled_code}>
+		<Disabled />
+	</Demo>
+</PageWrapper>
diff --git a/src/routes/choicebox/+page.ts b/src/routes/choicebox/+page.ts
new file mode 100644
index 0000000..cce9388
--- /dev/null
+++ b/src/routes/choicebox/+page.ts
@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Choicebox';
+	const description =
+		'A larger form of Radio or Checkbox, where the user has a larger tap target and more details.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}
diff --git a/src/routes/choicebox/disabled.svelte b/src/routes/choicebox/disabled.svelte
new file mode 100644
index 0000000..9e68184
--- /dev/null
+++ b/src/routes/choicebox/disabled.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import * as ChoiceboxGroup from '$lib/components/ui/choicebox';
+</script>
+
+<div class="grid gap-6">
+	<ChoiceboxGroup.Root
+		direction="row"
+		disabled
+		label="Choicebox group disabled"
+		type="radio"
+		value=""
+	>
+		<ChoiceboxGroup.Radio description="Free for two weeks" title="Pro Trial" value="trial_2" />
+		<ChoiceboxGroup.Radio description="Get started now" title="Pro" value="pro_2" />
+	</ChoiceboxGroup.Root>
+
+	<ChoiceboxGroup.Root direction="row" label="Single input disabled" type="checkbox">
+		<ChoiceboxGroup.Checkbox
+			description="Free for two weeks"
+			disabled
+			title="Pro Trial"
+			value="trial_2"
+		/>
+		<ChoiceboxGroup.Checkbox description="Get started now" title="Pro" value="pro_2" />
+	</ChoiceboxGroup.Root>
+</div>
diff --git a/src/routes/choicebox/multi-select.svelte b/src/routes/choicebox/multi-select.svelte
new file mode 100644
index 0000000..9a93f10
--- /dev/null
+++ b/src/routes/choicebox/multi-select.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import * as ChoiceboxGroup from '$lib/components/ui/choicebox';
+</script>
+
+<ChoiceboxGroup.Root direction="row" type="checkbox">
+	<ChoiceboxGroup.Checkbox description="Free for two weeks" title="Pro Trial" value="trial" />
+	<ChoiceboxGroup.Checkbox description="Get started now" title="Pro" value="pro" />
+</ChoiceboxGroup.Root>
diff --git a/src/routes/choicebox/single-select.svelte b/src/routes/choicebox/single-select.svelte
new file mode 100644
index 0000000..5dc9760
--- /dev/null
+++ b/src/routes/choicebox/single-select.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import * as ChoiceboxGroup from '$lib/components/ui/choicebox';
+</script>
+
+<ChoiceboxGroup.Root value="trial" direction="row" type="radio">
+	<ChoiceboxGroup.Radio description="Free for two weeks" title="Pro Trial" value="trial" />
+	<ChoiceboxGroup.Radio description="Get started now" title="Pro" value="pro" />
+</ChoiceboxGroup.Root>