Component Improvements & Docs Overhaul

.changeset/brave-schools-burn.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+remove `arrowSize` prop from menu Root components in favor of passing it as a prop to the Arrow components

.changeset/fresh-dryers-sneeze.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+New component: Date Range Picker

.changeset/mighty-cobras-care.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: Calendar

.changeset/old-dancers-allow.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+Breaking change: separate floating `positioning` props into individual props and move them to content components

.changeset/spotty-beans-return.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+New components: Range Calendar, Date Field, Date Range Field

.eslintignore

@@ -16,4 +16,5 @@ yarn.lock
 package.json
 
 vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+vite.config.ts.timestamp-*
+src/content/api-reference/extended-types/

.prettierrc

@@ -3,18 +3,19 @@
     "singleQuote": false,
     "trailingComma": "none",
     "printWidth": 100,
-    "plugins": [
-        "prettier-plugin-svelte"
-    ],
     "pluginSearchDirs": [
         "."
     ],
+    "plugins": [
+        "prettier-plugin-svelte",
+        "prettier-plugin-tailwindcss"
+    ],
     "overrides": [
         {
             "files": "*.svelte",
             "options": {
                 "parser": "svelte",
-                "printWidth": 100
+                "printWidth": 80
             }
         },
         {

content/components/accordion.md

@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: Organizes content into collapsable sections.
+description: Organizes content into collapsible sections, allowing users to focus on one section at a time.
 ---
 
 <script>

content/components/alert-dialog.md

@@ -1,6 +1,6 @@
 ---
 title: Alert Dialog
-description: Presents critical information or prompts to the user, typically requiring their attention or action.
+description: A modal window that alerts users with important information and awaits their acknowledgment or action.
 ---
 
 <script>

content/components/aspect-ratio.md

@@ -1,6 +1,6 @@
 ---
 title: Aspect Ratio
-description: Displays content with a specified aspect ratio, ensuring consistent and visually balanced presentation.
+description: Displays content while maintaining a specified aspect ratio, ensuring consistent visual proportions.
 ---
 
 <script>

content/components/avatar.md

@@ -1,6 +1,6 @@
 ---
 title: Avatar
-description: Displays user or entity images with a fallback option for failed loading, ensuring consistent visual representation.
+description: Represents a user or entity with a recognizable image or placeholder in UI elements.
 ---
 
 <script>

content/components/calendar.md

@@ -0,0 +1,58 @@
+---
+title: Calendar
+description: Displays dates and days of the week, facilitating date-related interactions.
+---
+
+<script>
+	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="calendar-demo" comp="Calendar">
+
+<CalendarDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Calendar } from "bits-ui";
+</script>
+
+<Calendar.Root let:months let:weekdays>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+
+	{#each months as month}
+		<Calendar.Grid>
+			<Calendar.GridHead>
+				<Calendar.GridRow>
+					{#each weekdays as day}
+						<Calendar.HeadCell>
+							{day}
+						</Calendar.HeadCell>
+					{/each}
+				</Calendar.GridRow>
+			</Calendar.GridHead>
+			<Calendar.GridBody>
+				{#each month.weeks as weekDates}
+					<Calendar.GridRow>
+						{#each weekDates as date}
+							<Calendar.Cell {date}>
+								<Calendar.Date {date} month={month.value} />
+							</Calendar.Cell>
+						{/each}
+					</Calendar.GridRow>
+				{/each}
+			</Calendar.GridBody>
+		</Calendar.Grid>
+	{/each}
+</Calendar.Root>
+```
+
+<APISection {schemas} />

content/components/checkbox.md

@@ -1,6 +1,6 @@
 ---
 title: Checkbox
-description: Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states.
+description: Allow users to switch between checked, unchecked, and indeterminate states.
 ---
 
 <script>

content/components/collapsible.md

@@ -1,6 +1,6 @@
 ---
 title: Collapsible
-description: An interactive component which expands and collapses content.
+description: Conceals or reveals content sections, enhancing space utilization and organization.
 ---
 
 <script>

content/components/context-menu.md

@@ -1,6 +1,6 @@
 ---
 title: Context Menu
-description: Displays a menu at the pointer's position when the trigger is right-clicked or long-pressed.
+description: Displays options or actions relevant to a specific context or selected item, triggered by a right-click.
 ---
 
 <script>

content/components/date-field.md

@@ -0,0 +1,36 @@
+---
+title: Date Field
+description: Enables users to input specific dates within a designated field.
+---
+
+<script>
+	import { APISection, ComponentPreview, DateFieldDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-field-demo" comp="Date Field">
+
+<DateFieldDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { DateField } from "$lib";
+</script>
+
+<DateField.Root>
+	<DateField.Label>Check-in date</DateField.Label>
+	<DateField.Input let:segments>
+		{#each segments as { part, value }}
+			<DateField.Segment {part}>
+				{value}
+			</DateField.Segment>
+		{/each}
+	</DateField.Input>
+</DateField.Root>
+```
+
+<APISection {schemas} />

content/components/date-picker.md

@@ -0,0 +1,70 @@
+---
+title: Date Picker
+description: Facilitates the selection of dates through an input and calendar-based interface.
+---
+
+<script>
+	import { APISection, ComponentPreview, DatePickerDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-picker-demo" comp="Date Picker">
+
+<DatePickerDemo slot="preview" />
+
+</ComponentPreview>
+
+## 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:weekdays>
+			<DatePicker.Header>
+				<DatePicker.PrevButton />
+				<DatePicker.Heading />
+				<DatePicker.NextButton />
+			</DatePicker.Header>
+			{#each months as month}
+				<DatePicker.Grid>
+					<DatePicker.GridHead>
+						<DatePicker.GridRow>
+							{#each weekdays as day}
+								<DatePicker.HeadCell>
+									{day}
+								</DatePicker.HeadCell>
+							{/each}
+						</DatePicker.GridRow>
+					</DatePicker.GridHead>
+					<DatePicker.GridBody>
+						{#each month.weeks as weekDates}
+							<DatePicker.GridRow>
+								{#each weekDates as date}
+									<DatePicker.Cell {date}>
+										<DatePicker.Date {date} month={month.value} />
+									</DatePicker.Cell>
+								{/each}
+							</DatePicker.GridRow>
+						{/each}
+					</DatePicker.GridBody>
+				</DatePicker.Grid>
+			{/each}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>
+```
+
+<APISection {schemas} />

content/components/date-range-field.md

@@ -0,0 +1,36 @@
+---
+title: Date Range Field
+description: Allows users to input a range of dates within a designated field.
+---
+
+<script>
+	import { APISection, ComponentPreview, DateRangeFieldDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-range-field-demo" comp="Date Range Field">
+
+<DateRangeFieldDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { DateField } from "$lib";
+</script>
+
+<DateField.Root>
+	<DateField.Label>Check-in date</DateField.Label>
+	<DateField.Input let:segments>
+		{#each segments as { part, value }}
+			<DateField.Segment {part}>
+				{value}
+			</DateField.Segment>
+		{/each}
+	</DateField.Input>
+</DateField.Root>
+```
+
+<APISection {schemas} />

content/components/date-range-picker.md

@@ -0,0 +1,70 @@
+---
+title: Date Range Picker
+description: Facilitates the selection of date ranges through an input and calendar-based interface.
+---
+
+<script>
+	import { APISection, ComponentPreview, DateRangePickerDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-range-picker-demo" comp="Date Range Picker">
+
+<DateRangePickerDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { DateRangePicker } from "bits-ui";
+</script>
+
+<DateRangePicker.Root>
+	<DateRangePicker.Label />
+	<DateRangePicker.Input let:segments>
+		{#each segments as { part, value }}
+			<DateRangePicker.Segment {part}>
+				{value}
+			</DateRangePicker.Segment>
+		{/each}
+		<DateRangePicker.Trigger />
+	</DateRangePicker.Input>
+	<DateRangePicker.Content>
+		<DateRangePicker.Calendar let:months let:weekdays>
+			<DateRangePicker.Header>
+				<DateRangePicker.PrevButton />
+				<DateRangePicker.Heading />
+				<DateRangePicker.NextButton />
+			</DateRangePicker.Header>
+			{#each months as month}
+				<DateRangePicker.Grid>
+					<DateRangePicker.GridHead>
+						<DateRangePicker.GridRow>
+							{#each weekdays as day}
+								<DateRangePicker.HeadCell>
+									{day}
+								</DateRangePicker.HeadCell>
+							{/each}
+						</DateRangePicker.GridRow>
+					</DateRangePicker.GridHead>
+					<DateRangePicker.GridBody>
+						{#each month.weeks as weekDates}
+							<DateRangePicker.GridRow>
+								{#each weekDates as date}
+									<DateRangePicker.Cell {date}>
+										<DateRangePicker.Date {date} month={month.value} />
+									</DateRangePicker.Cell>
+								{/each}
+							</DateRangePicker.GridRow>
+						{/each}
+					</DateRangePicker.GridBody>
+				</DateRangePicker.Grid>
+			{/each}
+		</DateRangePicker.Calendar>
+	</DateRangePicker.Content>
+</DateRangePicker.Root>
+```
+
+<APISection {schemas} />