@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,25 @@
+<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

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

package/dist/components/Layout/Card/Card.scss

@@ -0,0 +1,99 @@
+@use '../../../styles/scss/mixins/card-color' as cards;
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+$dodo-card-themes: neutral, primary, secondary, safe, warning, danger;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-Card-default-bg: var(--dodo-color-white);
+
+  @each $theme in $dodo-card-themes {
+    // Fixed: Added cards. prefix
+    @include cards.generate-dodo-ui-card-colors($theme, light);
+  }
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Card-default-bg: var(--dodo-color-neutral-100);
+
+  @each $theme in $dodo-card-themes {
+    // Fixed: Added cards. prefix
+    @include cards.generate-dodo-ui-card-colors($theme, dark);
+  }
+}
+
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+
+$roundness: (
+  1: var(--dodo-ui-element-roundness-1),
+  2: var(--dodo-ui-element-roundness-2),
+  3: var(--dodo-ui-element-roundness-3),
+  pill: 999px,
+  full: 50%,
+);
+
+// ----------------------------------------
+// Component CSS
+// ----------------------------------------
+.dodo-ui-Card {
+  transition:
+    background-color 70ms,
+    color 70ms,
+    border-color 70ms;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  width: var(--Card-width, initial);
+  height: var(--Card-height, initial);
+  min-width: var(--Card-min-width, initial);
+  min-height: var(--Card-min-height, initial);
+  max-width: var(--Card-max-width, initial);
+  max-height: var(--Card-max-height, initial);
+  overflow: hidden;
+
+  &.outline {
+    border-color: var(--dodo-color-neutral-400);
+  }
+
+  &.active {
+    cursor: pointer;
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Theme colors
+  // ----------------------------------------
+  &.color {
+    &--default {
+      &.variant {
+        &--text,
+        &--solid {
+          background-color: var(--dodo-ui-Card-default-bg);
+        }
+      }
+    }
+
+    @each $theme in $dodo-card-themes {
+      // Fixed: Added cards. prefix
+      @include cards.generate-dodo-ui-card-color($theme);
+    }
+  }
+}

package/dist/components/Layout/Card/Card.stories.svelte

@@ -0,0 +1,98 @@
+<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 '../../../attributes/variant.js';
+  import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+  import { ComponentShadowOptions } from '../../../attributes/shadow.js';
+  import { componentThemeColorsOptions } from '../../../attributes/theme.js';
+
+  // ------------------------------
+  // 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,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default"><p>Hello there</p></Story>
+
+<Story name="Primary" args={{ color: 'primary' }}><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="FixedSize" 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/dist/{stories/components/Form/DatePicker/Size/Size.stories.svelte.d.ts → components/Layout/Card/Card.stories.svelte.d.ts}

@@ -1,3 +1,7 @@
+import Card from './Card.svelte';
+import type { CardProps } from './Card.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+export declare const storyCardArgTypes: Partial<ArgTypes<CardProps>>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,8 +15,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Size: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Card: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Size = InstanceType<typeof Size>;
-export default Size;
+type Card = InstanceType<typeof Card>;
+export default Card;

package/dist/components/Layout/Card/Card.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" module>
+  import { componentColorOptions, type ComponentColor } from '../../../attributes/color.js';
+  import type { ComponentRoundness } from '../../../attributes/roundness.js';
+  import type { ComponentShadow } from '../../../attributes/shadow.js';
+  import type { ComponentThemeColors } from '../../../attributes/theme.js';
+  import type { ComponentVariant } from '../../../attributes/variant.js';
+  import type { Snippet } from 'svelte';
+
+  export const CARD_COLOR = {
+    all: ['default', 'transparent'],
+  } as const;
+
+  export type CardColor = ComponentColor | (typeof CARD_COLOR.all)[number];
+
+  // Flat options (for Storybook, selects, etc.)
+  export const cardColorOptions = [
+    ...componentColorOptions,
+    ...CARD_COLOR.all,
+  ] as const satisfies readonly CardColor[];
+
+  /**
+   * Card component props.
+   * Inherits all HTML div attributes.
+   */
+  export interface CardProps {
+    children?: Snippet;
+
+    /** Reference to the underlying input element */
+    ref?: HTMLDivElement;
+
+    /** Border radius token (e.g. 1–3, "pill", "full") */
+    roundness?: ComponentRoundness;
+
+    /** Drop shadow */
+    shadow?: ComponentShadow;
+
+    /** Render an outlined enclosure (shows border) */
+    outline?: boolean;
+
+    /** Add mouse hover and active effects */
+    active?: boolean;
+
+    /** Custom CSS class names applied to the InputEnclosure */
+    class?: string;
+
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+
+    /** Color theme token */
+    color?: CardColor;
+
+    /** max height */
+    'max-height'?: string;
+
+    /** max width */
+    'max-width'?: string;
+
+    /** min height */
+    'min-height'?: string;
+
+    /** min width */
+    'min-width'?: string;
+
+    /** height */
+    height?: string;
+
+    /** width */
+    width?: string;
+
+    /** Theme color */
+    theme?: ComponentThemeColors;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    color = 'default',
+    roundness = 1,
+    variant = 'text',
+    outline = false,
+    active = false,
+    children,
+    shadow = 1,
+    width,
+    height,
+    'min-height': minHeight,
+    'min-width': minWidth,
+    'max-height': maxHeight,
+    'max-width': maxWidth,
+    theme,
+    ...restProps
+  }: CardProps = $props();
+
+  const classes = $derived(
+    [
+      'dodo-ui-Card',
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      `dodo-shadow-${shadow}`,
+      outline && 'outline',
+      active && 'active',
+      theme ? `dodo-theme--${theme}` : '',
+      className,
+    ].filter(Boolean),
+  );
+
+  const inlineStyles = $derived(
+    [
+      width ? `--Card-width: ${width}` : '',
+      height ? `--Card-height: ${height}` : '',
+      minHeight ? `--Card-min-height: ${minHeight}` : '',
+      minWidth ? `--Card-min-width: ${minWidth}` : '',
+      maxHeight ? `--Card-max-height: ${maxHeight}` : '',
+      maxWidth ? `--Card-max-width: ${maxWidth}` : '',
+    ].filter(Boolean),
+  );
+</script>
+
+<div {...restProps} class={classes.join(' ')} style={inlineStyles.join(';')}>
+  {@render children?.()}
+</div>

package/dist/components/Layout/Card/Card.svelte.d.ts

@@ -0,0 +1,51 @@
+import { type ComponentColor } from '../../../attributes/color.js';
+import type { ComponentRoundness } from '../../../attributes/roundness.js';
+import type { ComponentShadow } from '../../../attributes/shadow.js';
+import type { ComponentThemeColors } from '../../../attributes/theme.js';
+import type { ComponentVariant } from '../../../attributes/variant.js';
+import type { Snippet } from 'svelte';
+export declare const CARD_COLOR: {
+    readonly all: readonly ["default", "transparent"];
+};
+export type CardColor = ComponentColor | (typeof CARD_COLOR.all)[number];
+export declare const cardColorOptions: readonly ["primary", "secondary", "neutral", "safe", "warning", "danger", "default", "transparent"];
+/**
+ * Card component props.
+ * Inherits all HTML div attributes.
+ */
+export interface CardProps {
+    children?: Snippet;
+    /** Reference to the underlying input element */
+    ref?: HTMLDivElement;
+    /** Border radius token (e.g. 1–3, "pill", "full") */
+    roundness?: ComponentRoundness;
+    /** Drop shadow */
+    shadow?: ComponentShadow;
+    /** Render an outlined enclosure (shows border) */
+    outline?: boolean;
+    /** Add mouse hover and active effects */
+    active?: boolean;
+    /** Custom CSS class names applied to the InputEnclosure */
+    class?: string;
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+    /** Color theme token */
+    color?: CardColor;
+    /** max height */
+    'max-height'?: string;
+    /** max width */
+    'max-width'?: string;
+    /** min height */
+    'min-height'?: string;
+    /** min width */
+    'min-width'?: string;
+    /** height */
+    height?: string;
+    /** width */
+    width?: string;
+    /** Theme color */
+    theme?: ComponentThemeColors;
+}
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Layout/Theme/Theme.stories.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Theme from './Theme.svelte';
+  import type { ThemeProps } from './Theme.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import { componentThemeOptions } from '../../../attributes/theme.js';
+
+  /**
+   * Storybook controls for Theme
+   */
+  export const ThemeArgTypes: Partial<ArgTypes<ThemeProps>> = {
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    type: {
+      control: { type: 'select' },
+      options: componentThemeOptions,
+      description: 'Theme color type: auto by defualt',
+      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'auto' } },
+    },
+    global: {
+      table: { category: 'API', subcategory: 'Base' },
+    },
+  };
+
+  const { Story } = defineMeta({
+    component: Theme,
+    tags: ['autodocs'],
+    argTypes: ThemeArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<!-- Wrap your app at the root with Theme to provide a consistent light or dark class (based on system or override) to all child components. -->
+<Story name="Auto"></Story>
+
+<Story name="Light" args={{ type: 'light' }}></Story>
+
+<Story name="Dark" args={{ type: 'dark' }} globals={{ backgrounds: { value: 'dark' } }}></Story>

package/dist/{stories/components/Form/DatePicker/Color/Color.stories.svelte.d.ts → components/Layout/Theme/Theme.stories.svelte.d.ts}

@@ -1,3 +1,10 @@
+import Theme from './Theme.svelte';
+import type { ThemeProps } from './Theme.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+/**
+ * Storybook controls for Theme
+ */
+export declare const ThemeArgTypes: Partial<ArgTypes<ThemeProps>>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,8 +18,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Color: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Theme: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Color = InstanceType<typeof Color>;
-export default Color;
+type Theme = InstanceType<typeof Theme>;
+export default Theme;

package/dist/components/Layout/Theme/Theme.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+  import { BROWSER } from 'esm-env';
+
+  import type { Snippet } from 'svelte';
+  import type { ComponentTheme, ComponentThemeColors } from '../../../attributes/theme.js';
+  import { setThemeContext } from './ThemeSystem/context.js';
+  import { useThemeStore } from './ThemeSystem/theme.svelte.js';
+
+  /**
+   * Public props for Theme
+   */
+  export interface ThemeProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Slot content */
+    children?: Snippet;
+
+    /** Theme mode: 'auto' | 'light' | 'dark' */
+    type?: ComponentTheme;
+
+    /** Syncs the theme with the global theme store */
+    global?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  let { class: className = '', children, type = 'auto', global = false }: ThemeProps = $props();
+
+  // 🔁 Local theme state
+  let theme = $state<ComponentThemeColors>('light');
+
+  /**
+   * 🌍 Global sync (store → local)
+   */
+  $effect(() => {
+    if (!global) return;
+
+    const storeTheme = useThemeStore.theme;
+
+    if (theme !== storeTheme) {
+      theme = storeTheme;
+    }
+  });
+
+  /**
+   * 🎛 Theme resolution (local logic)
+   */
+  $effect(() => {
+    if (global) return;
+
+    if (type !== 'auto') {
+      if (theme !== type) {
+        theme = type;
+      }
+      return;
+    }
+
+    if (!BROWSER) return;
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const apply = (isDark: boolean) => {
+      const next = isDark ? 'dark' : 'light';
+      if (theme !== next) theme = next;
+    };
+
+    apply(mq.matches);
+
+    const listener = (e: MediaQueryListEvent) => {
+      apply(e.matches);
+    };
+
+    mq.addEventListener('change', listener);
+
+    return () => {
+      mq.removeEventListener('change', listener);
+    };
+  });
+
+  /**
+   * 📡 Global sync (local → store)
+   */
+  $effect(() => {
+    if (!global) return;
+
+    const storeTheme = useThemeStore.theme;
+
+    if (storeTheme !== theme) {
+      useThemeStore.updateSystemTheme(theme);
+    }
+  });
+
+  /**
+   * 🧩 Context (reactive via getters)
+   */
+  setThemeContext({
+    get theme() {
+      return theme;
+    },
+  });
+
+  /**
+   * 🎨 Classes
+   */
+  const classes = $derived(['dodo-ui-Theme', `dodo-theme--${theme}`, className]);
+</script>
+
+<div class={classes.join(' ')}>
+  {@render children?.()}
+</div>