@flightlesslabs/dodo-ui 0.20.0 → 0.22.0

package/README.md

@@ -4,209 +4,6 @@ Opinionated UI framework for Svelte, based on [Bits UI](https://bits-ui.com/)
 
 [Github](https://github.com/flightlesslabs/dodo-ui) | [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
 
-# Develop
 
-## Run app
-
-1. `pnpm i`
-2. `pnpm dev`
-
-## Build app
-
-1. `pnpm check`
-2. `pnpm build`
-
----
-
-# Library Guide
-
----
-
-# 🧩 Creating a New Component
-
-This guide explains how to add a new UI component to the `dodo-ui` library.  
-Components are grouped by **category** (e.g. `Form`, `Layout`, `DataDisplay`, etc.).
-
----
-
-## Use Scaffolding script
-
-### ▶️ Usage
-
-```bash
-pnpm create:component Form Checkbox
-```
-
-This will generate:
-
-```txt
-src/lib/components/Form/Checkbox/
-├── Checkbox.svelte
-├── Checkbox.scss
-└── Checkbox.stories.svelte
-```
-
-And auto-append:
-
-```scss
-@use '../components/Form/Checkbox/Checkbox.scss';
-```
-
-to:
-
-```txt
-src/lib/styles/components.scss
-```
-
----
-
-## 📁 Folder Structure
-
-All components follow this structure:
-
-```txt
-components/<Category>/<ComponentName>/
-├── ComponentName.svelte
-├── ComponentName.stories.svelte
-└── ComponentName.scss
-```
-
-Examples
-
-```txt
-components/Form/TextInput/
-components/Form/Button/
-components/Layout/Stack/
-components/Layout/Container/
-```
-
-✅ Rules
-
-- Use PascalCase for component names
-- ategory names should be PascalCase (e.g. Form, Layout)
-- Folder and file names must match the component name exactly
-
----
-
-## 🎨 Register Component Styles
-
-All component styles must be imported into:
-
-**styles/components.scss**
-
-```scss
-// Form
-@use '../components/Form/Button/Button.scss';
-@use '../components/Form/InputEnclosure/InputEnclosure.scss';
-@use '../components/Form/TextInput/TextInput.scss';
-
-// Layout (future example)
-// @use '../components/Layout/Stack/Stack.scss';
-
-// Add new components here
-@use '../components/<Category>/<ComponentName>/<ComponentName>.scss';
-```
-
-⚠️ If you forget to register the SCSS here, the styles will not be bundled or published.
-
----
-
-## 🧱 Component Template
-
-Replace `ComponentName` and `<Category>` everywhere.
-
-ComponentName.svelte
-
-```svelte
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export interface ComponentNameProps {
-    class?: string;
-    disabled?: boolean;
-    children?: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    class: className = '',
-    disabled = false,
-    children,
-    ...restProps
-  }: ComponentNameProps = $props();
-
-  const classes = $derived(['dodo-ui-ComponentName', className].filter(Boolean));
-</script>
-
-<div class={classes.join(' ')} aria-disabled={disabled} {...restProps}>
-  {@render children?.()}
-</div>
-```
-
-ComponentName.scss
-
-```scss
-.dodo-ui-ComponentName {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  font-family: inherit;
-  font-size: 1rem;
-
-  padding: var(--dodo-ui-space-small);
-  border-radius: var(--dodo-ui-radius-1);
-
-  background: var(--dodo-ui-color-surface);
-  color: var(--dodo-ui-color-text);
-
-  &[aria-disabled='true'] {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-```
-
-ComponentName.stories.svelte
-
-```svelte
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import ComponentName from './ComponentName.svelte';
-  import type { ComponentNameProps } from './ComponentName.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-
-  export const componentNameArgTypes: Partial<ArgTypes<ComponentNameProps>> = {
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    disabled: {
-      control: { type: 'boolean' },
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-  };
-
-  const { Story } = defineMeta({
-    component: ComponentName,
-    tags: ['autodocs'],
-    argTypes: componentNameArgTypes,
-  });
-</script>
-
-<Story name="Default">
-  <ComponentName>Default Component</ComponentName>
-</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>
-  <ComponentName>Disabled Component</ComponentName>
-</Story>
-```
-
-## ✅ Checklist
-
-- [ ] Folder created under correct category
-- [ ] ComponentName.svelte created
-- [ ] ComponentName.scss created
-- [ ] ComponentName.stories.svelte created
-- [ ] SCSS imported into styles/components.scss
-- [ ] Storybook renders correctly
-- [ ] publint passes
+* [Develop](./docs/Develop.md)
+* [Library Guide](./docs/LibraryGuide.md)

package/dist/components/Form/Button/ButtonAsAnchor.svelte

@@ -16,7 +16,7 @@
     type WithoutChildren,
   } from 'bits-ui';
 
-  let { children, ref = $bindable(null), type, ...restProps }: ButtonAsAnchorProps = $props();
+  let { children, ref = $bindable(null), ...restProps }: ButtonAsAnchorProps = $props();
 </script>
 
 <BitsUiButton.Root {...restProps} bind:ref>

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/components/Layout/Card/Card.stories.svelte

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

package/dist/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/dist/components/Layout/Card/Card.svelte.d.ts

@@ -25,7 +25,7 @@ export interface CardProps {
     outline?: boolean;
     /** 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) */
     variant?: ComponentVariant;

package/dist/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);
+      }
+    }
+  }
+}