@flightlesslabs/dodo-ui 0.23.0 → 0.24.1

package/dist/components/Form/DatePicker/DatePickerInput/DatePickerInput.svelte

@@ -1,96 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export type DatePickerInputProps = {
-    size?: ComponentSize;
-    roundness?: ComponentRoundnessShape;
-    outline?: boolean;
-    class?: string;
-    error?: boolean;
-    focused?: boolean;
-    before?: Snippet;
-    after?: Snippet;
-    placeholder?: string;
-    dateFieldInputProps?: DateFieldInputProps;
-    datePickerTriggerProps?: DatePickerTriggerProps;
-    disabled?: boolean;
-    dateFormat?: DatePickerFormat;
-  };
-</script>
-
-<script lang="ts">
-  import { DatePicker, type DateFieldInputProps, type DatePickerTriggerProps } from 'bits-ui';
-  import type { ComponentSize } from '../../../../attributes/size.js';
-  import type { ComponentRoundnessShape } from '../../../../attributes/roundness.js';
-  import Icon from '@iconify/svelte';
-  import Segments from './Segments.svelte';
-  import InputEnclosure from '../../InputEnclosure/InputEnclosure.svelte';
-  import type { DatePickerFormat } from './utils.js';
-
-  let {
-    size = 'normal',
-    class: className = '',
-    disabled = false,
-    error = false,
-    focused: forcedFocused = false,
-    placeholder,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    after,
-    dateFieldInputProps,
-    datePickerTriggerProps,
-    dateFormat = 'dd/mm/yyyy',
-    ...restProps
-  }: DatePickerInputProps = $props();
-
-  let isFocused = $state(false);
-
-  function handleFocus() {
-    isFocused = true;
-  }
-
-  function handleBlur() {
-    isFocused = false;
-  }
-
-  const classes = $derived(['dodo-ui-DatePicker', className].filter(Boolean));
-
-  const triggerClasses = $derived(
-    [
-      'dodo-ui-UtilityButton',
-      `size--${size}`,
-      'compact',
-      'color--primary',
-      'roundness--full',
-      error && 'error',
-      disabled && 'disabled',
-    ].filter(Boolean),
-  );
-</script>
-
-<InputEnclosure
-  {size}
-  {disabled}
-  {error}
-  class={classes.join(' ')}
-  focused={forcedFocused || isFocused}
-  {...restProps}
->
-  <DatePicker.Input
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    {placeholder}
-    class="InputBox"
-    {...dateFieldInputProps}
-  >
-    {#snippet children({ segments })}
-      <Segments {segments} {dateFormat} />
-    {/snippet}
-  </DatePicker.Input>
-
-  {#snippet after()}
-    <DatePicker.Trigger class={triggerClasses.join(' ')} {...datePickerTriggerProps}>
-      <Icon icon="material-symbols:calendar-month-sharp" />
-    </DatePicker.Trigger>
-    {@render after?.()}
-  {/snippet}
-</InputEnclosure>

package/dist/components/Form/DatePicker/DatePickerInput/DatePickerInput.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { Snippet } from 'svelte';
-export type DatePickerInputProps = {
-    size?: ComponentSize;
-    roundness?: ComponentRoundnessShape;
-    outline?: boolean;
-    class?: string;
-    error?: boolean;
-    focused?: boolean;
-    before?: Snippet;
-    after?: Snippet;
-    placeholder?: string;
-    dateFieldInputProps?: DateFieldInputProps;
-    datePickerTriggerProps?: DatePickerTriggerProps;
-    disabled?: boolean;
-    dateFormat?: DatePickerFormat;
-};
-import { type DateFieldInputProps, type DatePickerTriggerProps } from 'bits-ui';
-import type { ComponentSize } from '../../../../attributes/size.js';
-import type { ComponentRoundnessShape } from '../../../../attributes/roundness.js';
-import type { DatePickerFormat } from './utils.js';
-declare const DatePickerInput: import("svelte").Component<DatePickerInputProps, {}, "">;
-type DatePickerInput = ReturnType<typeof DatePickerInput>;
-export default DatePickerInput;

package/dist/components/Form/DatePicker/DatePickerInput/Segments.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { DatePicker } from 'bits-ui';
-  import { formatSegments, type DatePickerFormat, type DateSegment } from './utils.js';
-
-  type Props = {
-    segments: DateSegment[];
-    dateFormat: DatePickerFormat;
-  };
-
-  let { segments, dateFormat }: Props = $props();
-</script>
-
-{#each formatSegments(segments, dateFormat) as { part, value }, i (part + i)}
-  <DatePicker.Segment {part}>
-    {value}
-  </DatePicker.Segment>
-{/each}

package/dist/components/Form/DatePicker/DatePickerInput/Segments.svelte.d.ts

@@ -1,8 +0,0 @@
-import { type DatePickerFormat, type DateSegment } from './utils.js';
-type Props = {
-    segments: DateSegment[];
-    dateFormat: DatePickerFormat;
-};
-declare const Segments: import("svelte").Component<Props, {}, "">;
-type Segments = ReturnType<typeof Segments>;
-export default Segments;

package/dist/components/Form/DatePicker/DatePickerInput/utils.d.ts

@@ -1,10 +0,0 @@
-import type { SegmentPart } from 'bits-ui';
-export type DateSegment = {
-    part: SegmentPart;
-    value: string;
-};
-export type FormatToken = 'dd' | 'mm' | 'yyyy' | 'hh' | 'min' | 'ss';
-type Separator = '/' | '-' | '.' | ' ';
-export type DatePickerFormat = `${FormatToken}${Separator}${FormatToken}${Separator}${FormatToken}` | `${FormatToken}${Separator}${FormatToken}` | `${FormatToken}`;
-export declare function formatSegments(segments: DateSegment[], format: DatePickerFormat): DateSegment[];
-export {};

package/dist/components/Form/DatePicker/DatePickerInput/utils.js

@@ -1,26 +0,0 @@
-// ---- Formatter ----
-export function formatSegments(segments, format) {
-    const segmentMap = Object.fromEntries(segments.map((s) => [s.part, s]));
-    const tokens = format.match(/dd|mm|yyyy|hh|min|ss|./g) ?? [];
-    return tokens.map((token) => {
-        switch (token) {
-            case 'dd':
-                return segmentMap.day ?? { part: 'day', value: '' };
-            case 'mm':
-                return segmentMap.month ?? { part: 'month', value: '' };
-            case 'yyyy':
-                return segmentMap.year ?? { part: 'year', value: '' };
-            case 'hh':
-                return segmentMap.hour ?? { part: 'hour', value: '' };
-            case 'min':
-                return segmentMap.minute ?? { part: 'minute', value: '' };
-            case 'ss':
-                return segmentMap.second ?? { part: 'second', value: '' };
-            default:
-                return {
-                    part: 'literal',
-                    value: token,
-                };
-        }
-    });
-}

package/dist/components/Form/DatePicker/DatePickerPopup/CalendarGrid.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { DatePicker, type CalendarRootSnippetProps } from 'bits-ui';
-
-  let { months, weekdays }: CalendarRootSnippetProps = $props();
-</script>
-
-<div class="CalendarGrid">
-  {#each months as month (month.value)}
-    <DatePicker.Grid>
-      <DatePicker.GridHead>
-        <DatePicker.GridRow>
-          {#each weekdays as day (day)}
-            <DatePicker.HeadCell>
-              <div>{day.slice(0, 2)}</div>
-            </DatePicker.HeadCell>
-          {/each}
-        </DatePicker.GridRow>
-      </DatePicker.GridHead>
-      <DatePicker.GridBody>
-        {#each month.weeks as weekDates (weekDates)}
-          <DatePicker.GridRow>
-            {#each weekDates as date (date)}
-              <DatePicker.Cell {date} month={month.value}>
-                <DatePicker.Day>
-                  <div></div>
-                  {date.day}
-                </DatePicker.Day>
-              </DatePicker.Cell>
-            {/each}
-          </DatePicker.GridRow>
-        {/each}
-      </DatePicker.GridBody>
-    </DatePicker.Grid>
-  {/each}
-</div>

package/dist/components/Form/DatePicker/DatePickerPopup/CalendarGrid.svelte.d.ts

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

package/dist/components/Form/DatePicker/DatePickerPopup/DatePickerPopup.svelte

@@ -1,52 +0,0 @@
-<script lang="ts" module>
-  import type { CardProps } from '../../../Layout/Card/Card.svelte';
-  import { useThemeContext } from '../../../Layout/Theme/ThemeSystem/context.js';
-
-  export type DatePickerPopupProps = DatePickerContentProps & Omit<CardProps, 'children' | 'ref'>;
-</script>
-
-<script lang="ts">
-  import { DatePicker, type DatePickerContentProps } from 'bits-ui';
-  import Header from './Header.svelte';
-  import CalendarGrid from './CalendarGrid.svelte';
-  let {
-    roundness = 1,
-    outline = false,
-    class: className = '',
-    theme: cardTheme,
-    color = 'default',
-    variant = 'text',
-    shadow = 2,
-    active = false,
-    sideOffset = 10,
-    align = 'end',
-    ...restProps
-  }: DatePickerPopupProps = $props();
-
-  const themeContext = useThemeContext();
-  const theme = $derived(cardTheme ? cardTheme : themeContext.theme);
-
-  const popupClasses = $derived(
-    [
-      'dodo-ui-Card',
-      'dodo-ui-Calendar',
-      `color--${color}`,
-      `variant--${variant}`,
-      `roundness--${roundness}`,
-      `dodo-shadow-${shadow}`,
-      outline && 'outline',
-      active && 'active',
-      theme ? `dodo-theme--${theme}` : '',
-      className,
-    ].filter(Boolean),
-  );
-</script>
-
-<DatePicker.Content class={popupClasses.join(' ')} {...restProps} {sideOffset} {align}>
-  <DatePicker.Calendar>
-    {#snippet children(calendarRootSnippetProps)}
-      <Header />
-      <CalendarGrid {...calendarRootSnippetProps} />
-    {/snippet}
-  </DatePicker.Calendar>
-</DatePicker.Content>

package/dist/components/Form/DatePicker/DatePickerPopup/DatePickerPopup.svelte.d.ts

@@ -1,6 +0,0 @@
-import type { CardProps } from '../../../Layout/Card/Card.svelte';
-export type DatePickerPopupProps = DatePickerContentProps & Omit<CardProps, 'children' | 'ref'>;
-import { type DatePickerContentProps } from 'bits-ui';
-declare const DatePickerPopup: import("svelte").Component<DatePickerPopupProps, {}, "">;
-type DatePickerPopup = ReturnType<typeof DatePickerPopup>;
-export default DatePickerPopup;

package/dist/components/Form/DatePicker/DatePickerPopup/Header.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import Icon from '@iconify/svelte';
-  import { DatePicker } from 'bits-ui';
-
-  const triggerClasses = $derived(
-    [
-      'dodo-ui-Button',
-      'compact',
-      'size--normal',
-      'variant--text',
-      'color--primary',
-      'roundness--1',
-    ].filter(Boolean),
-  );
-</script>
-
-<DatePicker.Header>
-  <DatePicker.PrevButton class={triggerClasses.join(' ')}>
-    <Icon icon="material-symbols:chevron-left-rounded" />
-  </DatePicker.PrevButton>
-  <DatePicker.Heading />
-  <DatePicker.NextButton class={triggerClasses.join(' ')}>
-    <Icon icon="material-symbols:chevron-right-rounded" />
-  </DatePicker.NextButton>
-</DatePicker.Header>

package/dist/components/Form/DatePicker/DatePickerPopup/Header.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
-type Header = ReturnType<typeof Header>;
-export default Header;

package/dist/components/Info/Calendar/Calendar.scss

@@ -1,147 +0,0 @@
-@use '../../../styles/global/breakpoints' as breakpoints;
-
-// ----------------------------------------
-// Theme tokens (global CSS variables)
-// ----------------------------------------
-:root {
-  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-500);
-  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-600);
-}
-
-.dodo-theme--dark {
-  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-300);
-  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-400);
-}
-
-.dodo-ui-Calendar {
-  font-size: 1rem;
-  color: var(--dodo-color-neutral-900);
-  display: inline-flex;
-  flex-direction: column;
-
-  @include breakpoints.up('sm') {
-    padding: var(--dodo-ui-space);
-  }
-
-  [data-calendar-header] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 calc(var(--dodo-ui-space) / 2);
-    margin-bottom: calc(var(--dodo-ui-space) * 2);
-    margin-top: var(--dodo-ui-space);
-  }
-
-  [data-calendar-heading] {
-    margin: 0 calc(var(--dodo-ui-space) / 2);
-    font-weight: 500;
-  }
-
-  button[data-calendar-next-button],
-  button[data-calendar-prev-button] {
-    font-size: 1.4em;
-  }
-
-  [data-calendar-grid] {
-    width: 100%;
-    user-select: none;
-  }
-
-  [data-calendar-grid-row] {
-    display: flex;
-    width: 100%;
-    justify-content: space-around;
-  }
-
-  [data-calendar-grid-head] {
-    margin-bottom: var(--dodo-ui-space);
-    display: block;
-  }
-
-  [data-calendar-head-cell] {
-    display: inline-flex;
-    width: var(--dodo-ui-element-height-normal);
-    justify-content: center;
-    font-weight: 600;
-    color: var(--dodo-color-neutral-600);
-    font-size: 0.9rem;
-  }
-
-  [data-calendar-cell] {
-    display: inline-flex;
-  }
-
-  [data-calendar-day] {
-    transition:
-      background-color 70ms,
-      color 70ms,
-      border-color 70ms;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: var(--dodo-ui-element-height-normal);
-    height: var(--dodo-ui-element-height-normal);
-    border-radius: var(--dodo-ui-element-roundness-1);
-    border: var(--dodo-ui-element-border-width) solid transparent;
-    position: relative;
-
-    &:hover {
-      background-color: var(--dodo-color-neutral-100);
-      border-color: var(--dodo-color-neutral-400);
-    }
-
-    &[data-selected] {
-      background-color: var(--dodo-ui-Calendar-date-selected-bg);
-      color: var(--dodo-color-constant-white);
-
-      &:hover {
-        background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
-      }
-
-      &[data-today] {
-        background-color: var(--dodo-ui-Calendar-date-selected-bg);
-        color: var(--dodo-color-constant-white);
-
-        &:hover {
-          background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
-        }
-
-        &::after {
-          background-color: var(--dodo-color-constant-white);
-
-          &:hover {
-            background-color: var(--dodo-color-constant-white);
-          }
-        }
-      }
-    }
-
-    &[data-today] {
-      background-color: var(--dodo-color-primary-50);
-      &::after {
-        content: '';
-        width: var(--dodo-ui-track-element-height-small);
-        height: var(--dodo-ui-track-element-height-small);
-        border-radius: 50%;
-        display: inline-flex;
-        background-color: var(--dodo-color-primary-600);
-        position: absolute;
-        bottom: 0.2em;
-      }
-    }
-
-    &[data-outside-month],
-    &[data-disabled] {
-      color: var(--dodo-color-neutral-400);
-
-      &:hover {
-        background-color: initial;
-        border-color: transparent;
-      }
-
-      &[data-today] {
-        background-color: initial;
-      }
-    }
-  }
-}

package/dist/components/Info/Calendar/Calendar.svelte

@@ -1,61 +0,0 @@
-<script lang="ts" module>
-  import type { CardProps } from '../../Layout/Card/Card.svelte';
-  import { useThemeContext } from '../../Layout/Theme/ThemeSystem/context.js';
-
-  export type CalendarProps = Omit<CalendarSingleRootProps, 'type'> &
-    Omit<CardProps, 'children' | 'ref'>;
-</script>
-
-<script lang="ts">
-  import { Calendar as CalendarBitsUi, type CalendarSingleRootProps } from 'bits-ui';
-  import Header from './Header.svelte';
-  import CalendarGrid from './CalendarGrid/CalendarGrid.svelte';
-  let {
-    roundness = 1,
-    outline = true,
-    class: className = '',
-    theme: cardTheme,
-    color = 'default',
-    variant = 'text',
-    shadow = 0,
-    active = false,
-    weekStartsOn = 1,
-    weekdayFormat = 'short',
-    fixedWeeks = true,
-    value = $bindable(undefined),
-    ...restProps
-  }: CalendarProps = $props();
-
-  const themeContext = useThemeContext();
-  const theme = $derived(cardTheme ? cardTheme : themeContext.theme);
-
-  const popupClasses = $derived(
-    [
-      'dodo-ui-Card',
-      'dodo-ui-Calendar',
-      `color--${color}`,
-      `variant--${variant}`,
-      `roundness--${roundness}`,
-      `dodo-shadow-${shadow}`,
-      outline && 'outline',
-      active && 'active',
-      theme ? `dodo-theme--${theme}` : '',
-      className,
-    ].filter(Boolean),
-  );
-</script>
-
-<CalendarBitsUi.Root
-  {...restProps}
-  {weekStartsOn}
-  {weekdayFormat}
-  {fixedWeeks}
-  bind:value
-  type="single"
-  class={popupClasses.join(' ')}
->
-  {#snippet children(calendarRootSnippetProps)}
-    <Header />
-    <CalendarGrid {...calendarRootSnippetProps} />
-  {/snippet}
-</CalendarBitsUi.Root>

package/dist/components/Info/Calendar/Calendar.svelte.d.ts

@@ -1,6 +0,0 @@
-import type { CardProps } from '../../Layout/Card/Card.svelte';
-export type CalendarProps = Omit<CalendarSingleRootProps, 'type'> & Omit<CardProps, 'children' | 'ref'>;
-import { type CalendarSingleRootProps } from 'bits-ui';
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "value">;
-type Calendar = ReturnType<typeof Calendar>;
-export default Calendar;

package/dist/components/Info/Calendar/CalendarGrid/CalendarGrid.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { Calendar, type CalendarRootSnippetProps } from 'bits-ui';
-  import TableHead from './TableHead.svelte';
-  import TableBody from './TableBody.svelte';
-
-  let { months, weekdays }: CalendarRootSnippetProps = $props();
-</script>
-
-<div class="CalendarGrid">
-  {#each months as month (month.value)}
-    <Calendar.Grid>
-      <TableHead {weekdays} />
-      <TableBody {month} />
-    </Calendar.Grid>
-  {/each}
-</div>

package/dist/components/Info/Calendar/CalendarGrid/CalendarGrid.svelte.d.ts

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

package/dist/components/Info/Calendar/CalendarGrid/TableBody.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import type { DateValue } from '@internationalized/date';
-  import { Calendar, type Month } from 'bits-ui';
-
-  type Props = {
-    month: Month<DateValue>;
-  };
-
-  let { month }: Props = $props();
-</script>
-
-<Calendar.GridBody>
-  {#each month.weeks as weekDates (weekDates)}
-    <Calendar.GridRow>
-      {#each weekDates as date (date)}
-        <Calendar.Cell {date} month={month.value}>
-          <Calendar.Day>
-            <div></div>
-            {date.day}
-          </Calendar.Day>
-        </Calendar.Cell>
-      {/each}
-    </Calendar.GridRow>
-  {/each}
-</Calendar.GridBody>

package/dist/components/Info/Calendar/CalendarGrid/TableBody.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { DateValue } from '@internationalized/date';
-import { type Month } from 'bits-ui';
-type Props = {
-    month: Month<DateValue>;
-};
-declare const TableBody: import("svelte").Component<Props, {}, "">;
-type TableBody = ReturnType<typeof TableBody>;
-export default TableBody;

package/dist/components/Info/Calendar/CalendarGrid/TableHead.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { Calendar } from 'bits-ui';
-
-  type Props = {
-    weekdays: string[];
-  };
-
-  let { weekdays }: Props = $props();
-</script>
-
-<Calendar.GridHead>
-  <Calendar.GridRow>
-    {#each weekdays as day (day)}
-      <Calendar.HeadCell>
-        <div>{day.slice(0, 2)}</div>
-      </Calendar.HeadCell>
-    {/each}
-  </Calendar.GridRow>
-</Calendar.GridHead>

package/dist/components/Info/Calendar/CalendarGrid/TableHead.svelte.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    weekdays: string[];
-};
-declare const TableHead: import("svelte").Component<Props, {}, "">;
-type TableHead = ReturnType<typeof TableHead>;
-export default TableHead;

package/dist/components/Info/Calendar/Header.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import Icon from '@iconify/svelte';
-  import { Calendar } from 'bits-ui';
-
-  const triggerClasses = $derived(
-    [
-      'dodo-ui-Button',
-      'compact',
-      'size--normal',
-      'variant--text',
-      'color--primary',
-      'roundness--1',
-    ].filter(Boolean),
-  );
-</script>
-
-<Calendar.Header>
-  <Calendar.PrevButton class={triggerClasses.join(' ')}>
-    <Icon icon="material-symbols:chevron-left-rounded" />
-  </Calendar.PrevButton>
-  <Calendar.Heading />
-  <Calendar.NextButton class={triggerClasses.join(' ')}>
-    <Icon icon="material-symbols:chevron-right-rounded" />
-  </Calendar.NextButton>
-</Calendar.Header>

package/dist/components/Info/Calendar/Header.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
-type Header = ReturnType<typeof Header>;
-export default Header;