@flightlesslabs/dodo-ui 0.22.2 → 0.24.0

package/src/lib/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/src/lib/components/Info/Calendar/Calendar.stories.svelte

@@ -1,134 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Calendar from './Calendar.svelte';
-  import type { CalendarProps } from './Calendar.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
-  import { CalendarDate, type DateValue } from '@internationalized/date';
-  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
-  import { componentVariantOptions } from '$lib/attributes/variant.js';
-  import { cardColorOptions } from '$lib/components/Layout/Card/Card.svelte';
-  import { componentThemeColorsOptions } from '$lib/attributes/theme.js';
-  import { ComponentShadowOptions } from '$lib/attributes/shadow.js';
-
-  const description = `
- a plug and play Calendar component based on bits-ui [calendar](https://bits-ui.com/docs/components/calendar).
-
- \`\`\`ts
- import { Calendar } from '@flightlesslabs/dodo-ui';
- \`\`\`
-`;
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    value: {
-      control: { type: 'text' },
-      table: { category: 'API', subcategory: 'Base' },
-    },
-
-    // ------------------------------
-    // State
-    // ------------------------------
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disabled state of the input',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    shadow: {
-      control: { type: 'select' },
-      options: ComponentShadowOptions,
-      description: 'Component Shadow',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
-    },
-    color: {
-      control: { type: 'select' },
-      options: cardColorOptions,
-      description: 'Color theme token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
-    },
-    variant: {
-      control: { type: 'select' },
-      options: componentVariantOptions,
-      description: 'Visual variant of the card',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined style',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    active: {
-      control: { type: 'boolean' },
-      description: 'Add mouse hover and active effects',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    theme: {
-      control: { type: 'select' },
-      options: componentThemeColorsOptions,
-      description: 'Theme color',
-      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Calendar,
-    tags: ['autodocs'],
-    argTypes: storyCalendarArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-
-  let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" />
-
-<Story name="Controlled" asChild>
-  <Calendar bind:value={myValue} />
-</Story>
-
-<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
-
-<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
-
-<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
-
-<Story name="Light Theme" asChild>
-  <Theme type="light">
-    <Calendar />
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <Calendar />
-  </Theme>
-</Story>

package/src/lib/components/Info/Calendar/Calendar.svelte

@@ -1,61 +0,0 @@
-<script lang="ts" module>
-  import type { CardProps } from '$lib/components/Layout/Card/Card.svelte';
-  import { useThemeContext } from '$lib/components/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/components/Layout/Card/Card.stories.svelte

@@ -1,113 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Card, { cardColorOptions } from './Card.svelte';
-  import type { CardProps } from './Card.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import { componentVariantOptions } from '$lib/attributes/variant.js';
-  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
-  import { ComponentShadowOptions } from '$lib/attributes/shadow.js';
-  import { componentThemeColorsOptions } from '$lib/attributes/theme.js';
-
-  const description = `
-a simple, customizable, and re-usable card component
-
- \`\`\`ts
- import { Card } from '@flightlesslabs/dodo-ui';
- \`\`\`
- `;
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyCardArgTypes: Partial<ArgTypes<CardProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    shadow: {
-      control: { type: 'select' },
-      options: ComponentShadowOptions,
-      description: 'Component Shadow',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
-    },
-    color: {
-      control: { type: 'select' },
-      options: cardColorOptions,
-      description: 'Color theme token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
-    },
-    variant: {
-      control: { type: 'select' },
-      options: componentVariantOptions,
-      description: 'Visual variant of the card',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined style',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    active: {
-      control: { type: 'boolean' },
-      description: 'Add mouse hover and active effects',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    theme: {
-      control: { type: 'select' },
-      options: componentThemeColorsOptions,
-      description: 'Theme color',
-      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Card,
-    tags: ['autodocs'],
-    argTypes: storyCardArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default"><p>Hello there</p></Story>
-
-<Story name="Color" args={{ color: 'safe' }}><p>Hello there</p></Story>
-
-<Story name="Active" args={{ color: 'primary', active: true }}><p>Hello there</p></Story>
-
-<Story name="Solid" args={{ color: 'primary', variant: 'solid' }}><p>Hello there</p></Story>
-
-<Story name="Outline" args={{ outline: true, shadow: 0 }}><p>Hello there</p></Story>
-
-<Story name="Fixed Size" args={{ height: '200px', width: '250px' }}><p>Hello there</p></Story>
-
-<Story name="Light Theme" args={{ theme: 'light' }}>
-  <p>Hello there</p>
-</Story>
-
-<Story name="Dark Theme" args={{ theme: 'dark' }} globals={{ backgrounds: { value: 'dark' } }}>
-  <p>Hello there</p>
-</Story>

package/src/lib/components/Layout/Grid/Column/Column.stories.svelte

@@ -1,66 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Column, { gridColumnSizeOptions } from './Column.svelte';
-  import type { GridColumnProps } from './Column.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyColumnArgTypes: Partial<ArgTypes<GridColumnProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // Size
-    // ------------------------------
-    size: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size', defaultValue: { summary: '12' } },
-    },
-    sm: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    md: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    lg: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    xl: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    xxl: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Column,
-    tags: ['autodocs'],
-    argTypes: storyColumnArgTypes,
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">Hello there</Story>