date picker structure

Author: huntabyte

content/components/date-picker.md

@@ -16,4 +16,55 @@ description: A date picker component.
 
 ## Structure
 
+```svelte
+<script lang="ts">
+	import { DatePicker } from "bits-ui";
+</script>
+
+<DatePicker.Root>
+	<DatePicker.Label />
+	<DatePicker.Input let:segments>
+		{#each segments as { part, value }}
+			<DatePicker.Segment {part}>
+				{value}
+			</DatePicker.Segment>
+		{/each}
+		<DatePicker.Trigger />
+	</DatePicker.Input>
+	<DatePicker.Content>
+		<DatePicker.Calendar let:months let:daysOfWeek>
+			<DatePicker.CalendarHeader>
+				<DatePicker.CalendarPrevButton />
+				<DatePicker.CalendarHeading />
+				<DatePicker.CalendarNextButton />
+			</DatePicker.CalendarHeader>
+			{#each months as month}
+				<DatePicker.CalendarGrid>
+					<DatePicker.CalendarGridHead>
+						<DatePicker.CalendarGridRow>
+							{#each daysOfWeek as day}
+								<DatePicker.CalendarHeadCell>
+									{day}
+								</DatePicker.CalendarHeadCell>
+							{/each}
+						</DatePicker.CalendarGridRow>
+					</DatePicker.CalendarGridHead>
+					<DatePicker.CalendarGridBody>
+						{#each month.weeks as weekDates}
+							<DatePicker.CalendarGridRow>
+								{#each weekDates as date}
+									<DatePicker.CalendarCell {date}>
+										<DatePicker.CalendarDate {date} month={month.value} />
+									</DatePicker.CalendarCell>
+								{/each}
+							</DatePicker.CalendarGridRow>
+						{/each}
+					</DatePicker.CalendarGridBody>
+				</DatePicker.CalendarGrid>
+			{/each}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>
+```
+
 <APISection {schemas} />

src/components/demos/date-picker-demo.svelte

@@ -22,12 +22,12 @@
 				</div>
 			{/each}
 			<DatePicker.Trigger
-				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10"
+				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 			>
 				<CalendarBlank class="h-5 w-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
-		<DatePicker.Content sideOffset={8} transition={flyAndScale}>
+		<DatePicker.Content sideOffset={10} transition={flyAndScale}>
 			<DatePicker.Calendar
 				class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
 				let:months

src/components/demos/dropdown-menu-demo.svelte

@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>

src/lib/bits/date-picker/ctx.ts

@@ -5,7 +5,7 @@ import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
 import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
 import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
 import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
-import { get, type Writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "date-picker";
@@ -33,13 +33,11 @@ const defaultPlacement = {
 } satisfies PositioningProps;
 
 export function updatePositioning(props: PositioningProps) {
-	console.log("updating positioning");
 	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
 	const {
 		options: { positioning }
 	} = getCtx();
 
 	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
 	updater(withDefaults);
-	console.log(get(positioning));
 }