@invopop/popui 0.0.103 → 0.1.1

package/dist/helpers.js

@@ -1,3 +1,5 @@
+import { CalendarDate } from '@internationalized/date';
+import { startOfWeek, endOfWeek, subWeeks, endOfMonth, startOfMonth, subMonths, startOfQuarter, endOfQuarter, subQuarters } from 'date-fns';
 export function toPascalCase(text) {
     return text.replace(/(^\w|-\w)/g, (text) => text.replace(/-/, '').toUpperCase());
 }
@@ -82,3 +84,36 @@ export function isInputFocused() {
     const isTextArea = activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable;
     return isInputText || isTextArea;
 }
+export function toCalendarDate(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+export function datesFromToday() {
+    const today = new Date();
+    const startOfThisWeek = startOfWeek(today, { weekStartsOn: 1 });
+    const endOfThisWeek = endOfWeek(today, { weekStartsOn: 1 });
+    const startOfLastWeek = subWeeks(startOfThisWeek, 1);
+    const endOfLastWeek = endOfWeek(startOfLastWeek, { weekStartsOn: 1 });
+    const startOfThisMonth = startOfMonth(today);
+    const endOfThisMonth = endOfMonth(today);
+    const startOfLastMonth = subMonths(startOfThisMonth, 1);
+    const endOfLastMonth = endOfMonth(startOfLastMonth);
+    const startOfThisQuarter = startOfQuarter(today);
+    const endOfThisQuarter = endOfQuarter(today);
+    const startOfLastQuarter = subQuarters(startOfThisQuarter, 1);
+    const endOfLastQuarter = endOfQuarter(startOfLastQuarter);
+    return {
+        today,
+        startOfThisWeek,
+        endOfThisWeek,
+        startOfLastWeek,
+        endOfLastWeek,
+        startOfThisMonth,
+        endOfThisMonth,
+        startOfLastMonth,
+        endOfLastMonth,
+        startOfThisQuarter,
+        endOfThisQuarter,
+        startOfLastQuarter,
+        endOfLastQuarter
+    };
+}

package/dist/index.d.ts

@@ -12,7 +12,6 @@ import ButtonFile from './ButtonFile.svelte';
 import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
-import ComboBox from './ComboBox.svelte';
 import CompanySelector from './CompanySelector.svelte';
 import CounterWorkflow from './CounterWorkflow.svelte';
 import DataListItem from './DataListItem.svelte';
@@ -44,7 +43,6 @@ import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import Notification from './Notification.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
 import ProfileSelector from './ProfileSelector.svelte';
-import ProgressBar from './ProgressBar.svelte';
 import SectionLayout from './SectionLayout.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
@@ -75,4 +73,4 @@ import twTheme from './tw.theme.js';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, ComboBox, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, ProgressBar, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -12,7 +12,6 @@ import ButtonFile from './ButtonFile.svelte'
 import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
-import ComboBox from './ComboBox.svelte'
 import CompanySelector from './CompanySelector.svelte'
 import CounterWorkflow from './CounterWorkflow.svelte'
 import DataListItem from './DataListItem.svelte'
@@ -44,7 +43,6 @@ import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
 import ProfileSelector from './ProfileSelector.svelte'
-import ProgressBar from './ProgressBar.svelte'
 import SectionLayout from './SectionLayout.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
@@ -87,7 +85,6 @@ export {
   ButtonUuidCopy,
   CardCheckbox,
   CardRelation,
-  ComboBox,
   CompanySelector,
   CounterWorkflow,
   DataListItem,
@@ -119,7 +116,6 @@ export {
   Notification,
   ProfileAvatar,
   ProfileSelector,
-  ProgressBar,
   SectionLayout,
   SeparatorHorizontal,
   ShortcutWrapper,

package/dist/range-calendar/index.d.ts

@@ -0,0 +1,20 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import Root from "./range-calendar.svelte";
+import Cell from "./range-calendar-cell.svelte";
+import Day from "./range-calendar-day.svelte";
+import Grid from "./range-calendar-grid.svelte";
+import Header from "./range-calendar-header.svelte";
+import Months from "./range-calendar-months.svelte";
+import GridRow from "./range-calendar-grid-row.svelte";
+import Heading from "./range-calendar-heading.svelte";
+import HeadCell from "./range-calendar-head-cell.svelte";
+import NextButton from "./range-calendar-next-button.svelte";
+import PrevButton from "./range-calendar-prev-button.svelte";
+import MonthSelect from "./range-calendar-month-select.svelte";
+import YearSelect from "./range-calendar-year-select.svelte";
+import Caption from "./range-calendar-caption.svelte";
+import Nav from "./range-calendar-nav.svelte";
+import Month from "./range-calendar-month.svelte";
+declare const GridHead: import("svelte").Component<RangeCalendarPrimitive.GridHeadProps, {}, "ref">;
+declare const GridBody: import("svelte").Component<RangeCalendarPrimitive.GridBodyProps, {}, "ref">;
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, MonthSelect, YearSelect, Caption, Nav, Month, Root as RangeCalendar, };

package/dist/range-calendar/index.js

@@ -0,0 +1,22 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import Root from "./range-calendar.svelte";
+import Cell from "./range-calendar-cell.svelte";
+import Day from "./range-calendar-day.svelte";
+import Grid from "./range-calendar-grid.svelte";
+import Header from "./range-calendar-header.svelte";
+import Months from "./range-calendar-months.svelte";
+import GridRow from "./range-calendar-grid-row.svelte";
+import Heading from "./range-calendar-heading.svelte";
+import HeadCell from "./range-calendar-head-cell.svelte";
+import NextButton from "./range-calendar-next-button.svelte";
+import PrevButton from "./range-calendar-prev-button.svelte";
+import MonthSelect from "./range-calendar-month-select.svelte";
+import YearSelect from "./range-calendar-year-select.svelte";
+import Caption from "./range-calendar-caption.svelte";
+import Nav from "./range-calendar-nav.svelte";
+import Month from "./range-calendar-month.svelte";
+const GridHead = RangeCalendarPrimitive.GridHead;
+const GridBody = RangeCalendarPrimitive.GridBody;
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, MonthSelect, YearSelect, Caption, Nav, Month, 
+//
+Root as RangeCalendar, };

package/dist/range-calendar/range-calendar-caption.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte'
+  import type RangeCalendar from './range-calendar.svelte'
+  import RangeCalendarMonthSelect from './range-calendar-month-select.svelte'
+  import RangeCalendarYearSelect from './range-calendar-year-select.svelte'
+  import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date'
+  let {
+    captionLayout,
+    months,
+    monthFormat,
+    years,
+    yearFormat,
+    month,
+    locale,
+    placeholder = $bindable(),
+    monthIndex = 0
+  }: {
+    captionLayout: ComponentProps<typeof RangeCalendar>['captionLayout']
+    months: ComponentProps<typeof RangeCalendarMonthSelect>['months']
+    monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>['monthFormat']
+    years: ComponentProps<typeof RangeCalendarYearSelect>['years']
+    yearFormat: ComponentProps<typeof RangeCalendarYearSelect>['yearFormat']
+    month: DateValue
+    placeholder: DateValue | undefined
+    locale: string
+    monthIndex: number
+  } = $props()
+  function formatYear(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone())
+    if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear())
+    return new DateFormatter(locale, { year: yearFormat }).format(dateObj)
+  }
+  function formatMonth(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone())
+    if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1)
+    return new DateFormatter(locale, { month: monthFormat }).format(dateObj)
+  }
+</script>
+
+{#snippet MonthSelect()}
+  <RangeCalendarMonthSelect
+    {months}
+    {monthFormat}
+    value={month.month}
+    onchange={(e) => {
+      if (!placeholder) return
+      const v = Number.parseInt(e.currentTarget.value)
+      const newPlaceholder = placeholder.set({ month: v })
+      placeholder = newPlaceholder.subtract({ months: monthIndex })
+    }}
+  />
+{/snippet}
+{#snippet YearSelect()}
+  <RangeCalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+{#if captionLayout === 'dropdown'}
+  {@render MonthSelect()}
+  {@render YearSelect()}
+{:else if captionLayout === 'dropdown-months'}
+  {@render MonthSelect()}
+  {#if placeholder}
+    {formatYear(placeholder)}
+  {/if}
+{:else if captionLayout === 'dropdown-years'}
+  {#if placeholder}
+    {formatMonth(placeholder)}
+  {/if}
+  {@render YearSelect()}
+{:else}
+  {formatMonth(month)} {formatYear(month)}
+{/if}

package/dist/range-calendar/range-calendar-caption.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import type RangeCalendar from './range-calendar.svelte';
+import RangeCalendarMonthSelect from './range-calendar-month-select.svelte';
+import RangeCalendarYearSelect from './range-calendar-year-select.svelte';
+import { type DateValue } from '@internationalized/date';
+type $$ComponentProps = {
+    captionLayout: ComponentProps<typeof RangeCalendar>['captionLayout'];
+    months: ComponentProps<typeof RangeCalendarMonthSelect>['months'];
+    monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>['monthFormat'];
+    years: ComponentProps<typeof RangeCalendarYearSelect>['years'];
+    yearFormat: ComponentProps<typeof RangeCalendarYearSelect>['yearFormat'];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+};
+declare const RangeCalendarCaption: import("svelte").Component<$$ComponentProps, {}, "placeholder">;
+type RangeCalendarCaption = ReturnType<typeof RangeCalendarCaption>;
+export default RangeCalendarCaption;

package/dist/range-calendar/range-calendar-cell.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.CellProps = $props()
+</script>
+
+<RangeCalendarPrimitive.Cell
+  bind:ref
+  class={cn(
+    'size-(--cell-size) dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
+    className
+  )}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarCell: import("svelte").Component<RangeCalendarPrimitive.CellProps, {}, "ref">;
+type RangeCalendarCell = ReturnType<typeof RangeCalendarCell>;
+export default RangeCalendarCell;

package/dist/range-calendar/range-calendar-day.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { buttonVariants } from '../button/index.js'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.DayProps = $props()
+</script>
+
+<RangeCalendarPrimitive.Day
+  bind:ref
+  class={cn(
+    buttonVariants({ variant: 'ghost' }),
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none',
+    // today
+    '[&[data-today]:not([data-selected])]:border-b [&[data-today]:not([data-selected])]:border-workspace-accent [&[data-today]:not([data-selected])]:rounded-none',
+    // range Start
+    'data-[range-start]:bg-workspace-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-active',
+    // range middle
+    'data-[range-middle]:rounded-none data-[range-middle]:bg-neutral-100',
+    // range End
+    'data-[range-end]:bg-workspace-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-active',
+    // Outside months
+    '[&[data-outside-month]]:text-transparent [&[data-outside-month]]:bg-transparent [&[data-outside-month]]:shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
+    // Disabled
+    'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    // Unavailable
+    'data-[unavailable]:line-through',
+    'dark:data-[range-middle]:hover:bg-accent/0',
+    // hover
+    'dark:hover:text-accent-foreground',
+    // focus
+    'focus:border-ring focus:ring-ring/50 focus:relative',
+    // inner spans
+    '[&>span]:text-xs [&>span]:opacity-70',
+    className
+  )}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-day.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarDay: import("svelte").Component<RangeCalendarPrimitive.DayProps, {}, "ref">;
+type RangeCalendarDay = ReturnType<typeof RangeCalendarDay>;
+export default RangeCalendarDay;

package/dist/range-calendar/range-calendar-grid-row.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.GridRowProps = $props()
+</script>
+
+<RangeCalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />

package/dist/range-calendar/range-calendar-grid-row.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarGridRow: import("svelte").Component<RangeCalendarPrimitive.GridRowProps, {}, "ref">;
+type RangeCalendarGridRow = ReturnType<typeof RangeCalendarGridRow>;
+export default RangeCalendarGridRow;

package/dist/range-calendar/range-calendar-grid.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.GridProps = $props()
+</script>
+
+<RangeCalendarPrimitive.Grid
+  bind:ref
+  class={cn('mt-4 flex w-full border-collapse flex-col gap-1', className)}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-grid.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarGrid: import("svelte").Component<RangeCalendarPrimitive.GridProps, {}, "ref">;
+type RangeCalendarGrid = ReturnType<typeof RangeCalendarGrid>;
+export default RangeCalendarGrid;

package/dist/range-calendar/range-calendar-head-cell.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.HeadCellProps = $props()
+</script>
+
+<RangeCalendarPrimitive.HeadCell
+  bind:ref
+  class={cn(
+    'text-[#989AA4] w-(--cell-size) h-(--cell-size) text-sm font-normal border-b border-neutral-100 flex items-center justify-center',
+    className
+  )}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-head-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarHeadCell: import("svelte").Component<RangeCalendarPrimitive.HeadCellProps, {}, "ref">;
+type RangeCalendarHeadCell = ReturnType<typeof RangeCalendarHeadCell>;
+export default RangeCalendarHeadCell;

package/dist/range-calendar/range-calendar-header.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.HeaderProps = $props()
+</script>
+
+<RangeCalendarPrimitive.Header
+  bind:ref
+  class={cn(
+    'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3',
+    className
+  )}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarHeader: import("svelte").Component<RangeCalendarPrimitive.HeaderProps, {}, "ref">;
+type RangeCalendarHeader = ReturnType<typeof RangeCalendarHeader>;
+export default RangeCalendarHeader;

package/dist/range-calendar/range-calendar-heading.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: RangeCalendarPrimitive.HeadingProps = $props()
+</script>
+
+<RangeCalendarPrimitive.Heading
+  bind:ref
+  class={cn('px-(--cell-size) text-sm font-medium', className)}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarHeading: import("svelte").Component<RangeCalendarPrimitive.HeadingProps, {}, "ref">;
+type RangeCalendarHeading = ReturnType<typeof RangeCalendarHeading>;
+export default RangeCalendarHeading;

package/dist/range-calendar/range-calendar-month-select.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn, type WithoutChildrenOrChild } from '../utils.js'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronDown } from '@invopop/ui-icons'
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    onchange,
+    ...restProps
+  }: WithoutChildrenOrChild<RangeCalendarPrimitive.MonthSelectProps> = $props()
+</script>
+
+<span
+  class={cn(
+    'has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border',
+    className
+  )}
+>
+  <RangeCalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+    {#snippet child({ props, monthItems, selectedMonthItem })}
+      <select {...props} {value} {onchange}>
+        {#each monthItems as monthItem (monthItem.value)}
+          <option
+            value={monthItem.value}
+            selected={value !== undefined
+              ? monthItem.value === value
+              : monthItem.value === selectedMonthItem.value}
+          >
+            {monthItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+        <Icon src={ChevronDown} class="size-4" />
+      </span>
+    {/snippet}
+  </RangeCalendarPrimitive.MonthSelect>
+</span>

package/dist/range-calendar/range-calendar-month-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarMonthSelect: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.MonthSelectProps, "child">, "children">, {}, "ref">;
+type RangeCalendarMonthSelect = ReturnType<typeof RangeCalendarMonthSelect>;
+export default RangeCalendarMonthSelect;

package/dist/range-calendar/range-calendar-month.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { type WithElementRef, cn } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
+</script>
+
+<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
+  {@render children?.()}
+</div>

package/dist/range-calendar/range-calendar-month.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const RangeCalendarMonth: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type RangeCalendarMonth = ReturnType<typeof RangeCalendarMonth>;
+export default RangeCalendarMonth;

package/dist/range-calendar/range-calendar-months.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  class={cn('relative flex flex-col gap-4 md:flex-row', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/range-calendar/range-calendar-months.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const RangeCalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type RangeCalendarMonths = ReturnType<typeof RangeCalendarMonths>;
+export default RangeCalendarMonths;

package/dist/range-calendar/range-calendar-nav.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
+</script>
+
+<nav
+  {...restProps}
+  bind:this={ref}
+  class={cn('absolute inset-x-0 top-2 flex w-full items-center justify-between gap-1', className)}
+>
+  {@render children?.()}
+</nav>

package/dist/range-calendar/range-calendar-nav.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const RangeCalendarNav: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type RangeCalendarNav = ReturnType<typeof RangeCalendarNav>;
+export default RangeCalendarNav;

package/dist/range-calendar/range-calendar-next-button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { buttonVariants, type ButtonVariant } from '../button/index.js'
+  import { cn } from '../utils.js'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronRight } from '@invopop/ui-icons'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = 'outline',
+    ...restProps
+  }: RangeCalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant
+  } = $props()
+</script>
+
+{#snippet Fallback()}
+  <Icon src={ChevronRight} class="size-4" />
+{/snippet}
+<RangeCalendarPrimitive.NextButton
+  bind:ref
+  class={cn(
+    buttonVariants({ variant, size: 'icon-sm' }),
+    'select-none disabled:opacity-50 rtl:rotate-180',
+    className
+  )}
+  children={children || Fallback}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-next-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import { type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = RangeCalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const RangeCalendarNextButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type RangeCalendarNextButton = ReturnType<typeof RangeCalendarNextButton>;
+export default RangeCalendarNextButton;

package/dist/range-calendar/range-calendar-prev-button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { buttonVariants, type ButtonVariant } from '../button/index.js'
+  import { cn } from '../utils.js'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronLeft } from '@invopop/ui-icons'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = 'outline',
+    ...restProps
+  }: RangeCalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant
+  } = $props()
+</script>
+
+{#snippet Fallback()}
+  <Icon src={ChevronLeft} class="size-4" />
+{/snippet}
+<RangeCalendarPrimitive.PrevButton
+  bind:ref
+  class={cn(
+    buttonVariants({ variant, size: 'icon-sm' }),
+    'select-none disabled:opacity-50 rtl:rotate-180',
+    className
+  )}
+  children={children || Fallback}
+  {...restProps}
+/>

package/dist/range-calendar/range-calendar-prev-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import { type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = RangeCalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const RangeCalendarPrevButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type RangeCalendarPrevButton = ReturnType<typeof RangeCalendarPrevButton>;
+export default RangeCalendarPrevButton;