@flightlesslabs/dodo-ui 0.20.0 → 0.22.0

package/src/lib/components/Form/DatePicker/DatePicker.scss

@@ -1,20 +1,9 @@
-
-
 .dodo-ui-DatePicker {
   button[data-popover-trigger] {
     font-size: 1.4em;
   }
 
   [data-date-field-input] {
-    flex: 1;
-    border: 0;
-    outline: 0;
-    height: 100%;
-    background-color: transparent;
-    font-family: inherit;
-    color: inherit;
-    letter-spacing: 0.3px;
-    margin: 0;
     display: flex;
     align-items: center;
   }
@@ -34,11 +23,6 @@
   // ----------------------------------------
   &.size {
     &--normal {
-      [data-date-field-input] {
-        font-size: 1rem;
-        padding: 0 calc(var(--dodo-ui-space-small) * 2);
-      }
-
       button[data-popover-trigger] {
         margin: 0 calc(var(--dodo-ui-space) / 2.5);
       }
@@ -49,11 +33,6 @@
     }
 
     &--small {
-      [data-date-field-input] {
-        padding: 0 var(--dodo-ui-space);
-        font-size: 0.9rem;
-      }
-
       button[data-popover-trigger] {
         margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
       }
@@ -64,11 +43,6 @@
     }
 
     &--large {
-      [data-date-field-input] {
-        font-size: 1.1rem;
-        padding: 0 calc(var(--dodo-ui-space) * 2);
-      }
-
       button[data-popover-trigger] {
         margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
       }

package/src/lib/components/Form/DatePicker/DatePicker.svelte

@@ -109,7 +109,14 @@
   }: DatePickerProps = $props();
 </script>
 
-<DatePickerBitsUi.Root {...restProps} bind:value {weekdayFormat} {weekStartsOn} {fixedWeeks}>
+<DatePickerBitsUi.Root
+  {...restProps}
+  bind:value
+  bind:open
+  {weekdayFormat}
+  {weekStartsOn}
+  {fixedWeeks}
+>
   <DatepickerInput
     {size}
     {roundness}

package/src/lib/components/Form/DatePicker/DatePickerInput/DatePickerInput.svelte

@@ -34,6 +34,7 @@
     error = false,
     focused: forcedFocused = false,
     placeholder,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     after,
     dateFieldInputProps,
     datePickerTriggerProps,
@@ -51,7 +52,7 @@
     isFocused = false;
   }
 
-  const classes = $derived(['dodo-ui-DatePicker', `size--${size}`, className].filter(Boolean));
+  const classes = $derived(['dodo-ui-DatePicker', className].filter(Boolean));
 
   const triggerClasses = $derived(
     [
@@ -78,6 +79,7 @@
     onfocus={handleFocus}
     onblur={handleBlur}
     {placeholder}
+    class="InputBox"
     {...dateFieldInputProps}
   >
     {#snippet children({ segments })}

package/src/lib/components/Form/DatePicker/DatePickerPopup/CalendarGrid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { DatePicker, type CalendarRootSnippetProps, type Month } from 'bits-ui';
+  import { DatePicker, type CalendarRootSnippetProps } from 'bits-ui';
 
   let { months, weekdays }: CalendarRootSnippetProps = $props();
 </script>

package/src/lib/components/Form/InputEnclosure/InputEnclosure.scss

@@ -62,6 +62,19 @@ $states: (
     border-color: var(--dodo-ui-InputEnclosure-border-color);
   }
 
+  // input tag is styled here
+  .InputBox {
+    flex: 1;
+    border: 0;
+    outline: 0;
+    height: 100%;
+    background-color: transparent;
+    font-family: inherit;
+    color: inherit;
+    letter-spacing: 0.3px;
+    margin: 0;
+  }
+
   // ----------------------------------------
   // Visual states (focused, error)
   // ----------------------------------------
@@ -90,6 +103,27 @@ $states: (
         height: $height;
       }
     }
+
+    &--normal {
+      .InputBox {
+        font-size: 1rem;
+        padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      }
+    }
+
+    &--small {
+      .InputBox {
+        padding: 0 var(--dodo-ui-space);
+        font-size: 0.9rem;
+      }
+    }
+
+    &--large {
+      .InputBox {
+        font-size: 1.1rem;
+        padding: 0 calc(var(--dodo-ui-space) * 2);
+      }
+    }
   }
 
   // ----------------------------------------

package/src/lib/components/Form/InputEnclosure/InputEnclosure.stories.svelte

@@ -88,31 +88,31 @@
 <!-- ------------------------------ -->
 
 <Story name="Default (Outlined)">
-  <input placeholder="Type something…" />
+  <input placeholder="Type something…" class="InputBox" />
 </Story>
 
 <Story name="No Outline" args={{ outline: false }}>
-  <input placeholder="No outline…" />
+  <input placeholder="No outline…" class="InputBox" />
 </Story>
 
 <Story name="Focused" args={{ focused: true }}>
-  <input placeholder="Focused state…" />
+  <input placeholder="Focused state…" class="InputBox" />
 </Story>
 
 <Story name="Error" args={{ error: true }}>
-  <input placeholder="Error state…" />
+  <input placeholder="Error state…" class="InputBox" />
 </Story>
 
 <Story name="Disabled" args={{ disabled: true }}>
-  <input placeholder="Disabled state…" disabled />
+  <input placeholder="Disabled state…" disabled class="InputBox" />
 </Story>
 
 <Story name="Large" args={{ size: 'large' }}>
-  <input placeholder="Large input…" />
+  <input placeholder="Large input…" class="InputBox" />
 </Story>
 
 <Story name="Pill Shape" args={{ roundness: 'pill' }}>
-  <input placeholder="Pill shaped input…" />
+  <input placeholder="Pill shaped input…" class="InputBox" />
 </Story>
 
 <Story name="With Before (Icon Prefix)" asChild>
@@ -121,7 +121,7 @@
       <span style="color: #888;">🔍</span>
     {/snippet}
 
-    <input placeholder="Search…" />
+    <input placeholder="Search…" class="InputBox" />
   </InputEnclosure>
 </Story>
 
@@ -131,14 +131,14 @@
       <span style="color: #888;">.com</span>
     {/snippet}
 
-    <input placeholder="Website" />
+    <input placeholder="Website" class="InputBox" />
   </InputEnclosure>
 </Story>
 
 <Story name="Light Theme" asChild>
   <Theme type="light">
     <InputEnclosure>
-      <input placeholder="Type something…" />
+      <input placeholder="Type something…" class="InputBox" />
     </InputEnclosure>
   </Theme>
 </Story>
@@ -146,7 +146,7 @@
 <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
   <Theme type="dark">
     <InputEnclosure>
-      <input placeholder="Type something…" />
+      <input placeholder="Type something…" class="InputBox" />
     </InputEnclosure>
   </Theme>
 </Story>

package/src/lib/components/Form/Label/Label.svelte

@@ -29,6 +29,6 @@
   const classes = $derived(['dodo-ui-Label', className].filter(Boolean));
 </script>
 
-<LabelBitUi.Root {...restProps} class="{classes.join(' ')} bind:ref">
+<LabelBitUi.Root {...restProps} class={classes.join(' ')} bind:ref>
   {@render children?.()}
 </LabelBitUi.Root>

package/src/lib/components/Form/Select/Select.scss

@@ -15,50 +15,23 @@
     font-size: 1.5em;
   }
 
-  input[data-combobox-input] {
-    flex: 1;
-    border: 0;
-    outline: 0;
-    height: 100%;
-    background-color: transparent;
-    font-family: inherit;
-    color: inherit;
-    letter-spacing: 0.3px;
-    margin: 0;
-  }
-
   // ----------------------------------------
   // Sizes
   // ----------------------------------------
   &.size {
     &--normal {
-      input[data-combobox-input] {
-        font-size: 1rem;
-        padding: 0 calc(var(--dodo-ui-space-small) * 2);
-      }
-
       button[data-combobox-trigger] {
         margin: 0 calc(var(--dodo-ui-space) / 2.5);
       }
     }
 
     &--small {
-      input[data-combobox-input] {
-        padding: 0 var(--dodo-ui-space);
-        font-size: 0.9rem;
-      }
-
       button[data-combobox-trigger] {
         margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
       }
     }
 
     &--large {
-      input[data-combobox-input] {
-        font-size: 1.1rem;
-        padding: 0 calc(var(--dodo-ui-space) * 2);
-      }
-
       button[data-combobox-trigger] {
         margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
       }

package/src/lib/components/Form/Select/SelectInput.svelte

@@ -40,7 +40,9 @@
     placeholder,
     comboboxInputProps,
     comboboxTriggerProps,
+    // eslint-disable-next-line no-useless-assignment
     searchValue = $bindable<string>(''),
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     after,
     updateOpenState,
     value,
@@ -84,6 +86,7 @@
   {...restProps}
 >
   <Combobox.Input
+    {...comboboxInputProps}
     oninput={(e) => {
       searchValue = e.currentTarget.value;
     }}
@@ -93,7 +96,7 @@
     onclick={!searchable && !disabled ? () => updateOpenState(true) : undefined}
     {placeholder}
     {defaultValue}
-    {...comboboxInputProps}
+    class="InputBox"
   />
 
   {#snippet after()}

package/src/lib/components/Form/TextInput/TextInput.svelte

@@ -115,7 +115,7 @@
   /**
    * Computed class list for the InputEnclosure component.
    */
-  const classes = $derived(['dodo-ui-TextInput', `size--${size}`].filter(Boolean));
+  const classes = $derived(['dodo-ui-TextInput', className].filter(Boolean));
 </script>
 
 <InputEnclosure
@@ -125,16 +125,16 @@
   {disabled}
   {error}
   focused={forcedFocused || isFocused}
-  class={className}
+  class={classes.join(' ')}
   {before}
   {after}
 >
   <input
     {...restProps}
-    class={classes.join(' ')}
     bind:this={ref}
     {disabled}
     onfocus={handleFocus}
     onblur={handleBlur}
+    class="InputBox"
   />
 </InputEnclosure>

package/src/lib/components/Layout/Card/Card.stories.svelte

@@ -6,8 +6,7 @@
   import { componentVariantOptions } from '$lib/attributes/variant.js';
   import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
   import { ComponentShadowOptions } from '$lib/attributes/shadow.js';
-  import Theme from '../Theme/Theme.svelte';
-  import { componentThemeColorsOptions, componentThemeOptions } from '$lib/attributes/theme.js';
+  import { componentThemeColorsOptions } from '$lib/attributes/theme.js';
 
   // ------------------------------
   // Storybook ArgTypes

package/src/lib/components/Layout/Card/Card.svelte

@@ -40,7 +40,7 @@
     /** Add mouse hover and active effects */
     active?: boolean;
 
-    /** Custom CSS class names applied to the InputEnclosure */
+    /** Custom CSS class names applied to the Card */
     class?: string;
 
     /** Visual variant (e.g. solid, text) */

package/src/lib/components/Layout/Grid/Column/Column.scss

@@ -0,0 +1,78 @@
+// Grid-Column
+@use '../../../../styles/global/breakpoints' as breakpoints;
+@use 'sass:math';
+@use 'sass:map';
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+
+$grid-columns: 12;
+
+$breakpoint-keys: (default, sm, md, lg, xl, xxl);
+
+// ----------------------------------------
+// Function
+// ----------------------------------------
+
+@function col($n) {
+  @return math.div(100%, $grid-columns) * $n;
+}
+
+// ----------------------------------------
+// Column map
+// ----------------------------------------
+
+$column-size: ();
+
+@for $i from 1 through $grid-columns {
+  $column-size: map.set($column-size, $i, col($i));
+}
+
+// ----------------------------------------
+// Mixin (core logic)
+// ----------------------------------------
+
+@mixin column-styles($bp) {
+  @each $name, $size in $column-size {
+    &--#{$name} {
+      @if $bp == default {
+        width: $size;
+        flex: initial;
+      } @else {
+        @include breakpoints.up($bp) {
+          width: $size;
+          flex: initial;
+        }
+      }
+    }
+  }
+
+  &--flex {
+    @if $bp == default {
+      flex: 1;
+    } @else {
+      @include breakpoints.up($bp) {
+        flex: 1;
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Component
+// ----------------------------------------
+
+.dodo-ui-Grid-Column {
+  display: block;
+  min-width: 0;
+  padding: calc(var(--dodo-ui-space) * var(--Grid-gap));
+
+  &.column-size {
+    @each $bp in $breakpoint-keys {
+      &--#{$bp} {
+        @include column-styles($bp);
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export const GRID_COLUMN_BREAKPOINT = {
+    numerical: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    flex: ['flex'],
+  } as const;
+
+  export type GridColumnSizeNumerical = (typeof GRID_COLUMN_BREAKPOINT.numerical)[number];
+  type GridColumnSizeFlex = (typeof GRID_COLUMN_BREAKPOINT.flex)[number];
+  export type GridColumnSize = GridColumnSizeNumerical | GridColumnSizeFlex;
+
+  export const gridColumnSizeOptions = [
+    ...GRID_COLUMN_BREAKPOINT.numerical,
+    ...GRID_COLUMN_BREAKPOINT.flex,
+  ] as const satisfies readonly GridColumnSize[];
+
+  export const gridColumnSizeNumericalOptions = GRID_COLUMN_BREAKPOINT.numerical;
+
+  export interface GridColumnProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Column contents go here */
+    children?: Snippet;
+
+    /** GridColumn ref */
+    ref?: HTMLDivElement | null;
+
+    /** Breakpoint: size (default unit) */
+    size?: GridColumnSize;
+
+    /** Breakpoint: sm */
+    sm?: GridColumnSize;
+
+    /** Breakpoint: md */
+    md?: GridColumnSize;
+
+    /** Breakpoint: lg */
+    lg?: GridColumnSize;
+
+    /** Breakpoint: xl */
+    xl?: GridColumnSize;
+
+    /** Breakpoint: xxl */
+    xxl?: GridColumnSize;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable(null),
+    children,
+    size = 12,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+  }: GridColumnProps = $props();
+
+  const classes = $derived(
+    [
+      'dodo-ui-Grid-Column',
+      `column-size--default--${size}`,
+      sm ? `column-size--sm--${sm}` : '',
+      md ? `column-size--md--${md}` : '',
+      lg ? `column-size--lg--${lg}` : '',
+      xl ? `column-size--xl--${xl}` : '',
+      xxl ? `column-size--xxl--${xxl}` : '',
+      className,
+    ].filter(Boolean),
+  );
+</script>
+
+<div class={classes.join(' ')} bind:this={ref}>
+  {@render children?.()}
+</div>

package/src/lib/components/Layout/Grid/Grid.scss

@@ -0,0 +1,8 @@
+// Grid
+
+.dodo-ui-Grid {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin: calc(calc(var(--dodo-ui-space) * var(--Grid-gap)) * -1);
+}