@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/dist/components/Form/Select/Select.svelte

@@ -0,0 +1,164 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type SelectOption = {
+    value: string;
+    label: string;
+  };
+
+  /**
+   * Shared base props for the Select component.
+   *
+   * These props control the visual wrapper (InputEnclosure) and
+   * common text-input behaviors.
+   */
+  type BaseProps = Omit<ComboboxSingleRootPropsWithoutHTML, 'type'> &
+    Omit<SelectSingleRootPropsWithoutHTML, 'type'>;
+
+  export type SelectProps = BaseProps & {
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+
+    /** Border radius token (e.g. 1–3, "pill") */
+    roundness?: ComponentRoundnessShape;
+
+    /** Render an outlined enclosure (shows border) */
+    outline?: boolean;
+
+    /** Custom CSS class names applied to the InputEnclosure */
+    class?: string;
+
+    /**
+     * Error visual state.
+     *
+     * When true, applies error styling to the enclosure.
+     * Intended for validation errors.
+     */
+    error?: boolean;
+
+    /**
+     * Focused visual state.
+     *
+     * When true, forces focused styling on the enclosure.
+     * Usually controlled automatically via focus/blur.
+     */
+    focused?: boolean;
+
+    /**
+     * Content rendered before the input (prefix).
+     *
+     * Use {#snippet before} in Svelte.
+     */
+    before?: Snippet;
+
+    /**
+     * Content rendered after the input (suffix).
+     *
+     * Use {#snippet after} in Svelte.
+     */
+    after?: Snippet;
+
+    /** Select list data */
+    options: SelectOption[];
+
+    /** Props for Popup */
+    popupProps?: SelectPopupProps;
+
+    /** is select searchable */
+    searchable?: boolean;
+
+    /** Select placeholder */
+    placeholder?: string;
+
+    /** Search Result Placeholder */
+    searchResultPlaceholder?: string;
+
+    /** bits ui ComboboxInputProps */
+    comboboxInputProps?: ComboboxInputProps;
+
+    /** bits ui comboboxTriggerProps */
+    comboboxTriggerProps?: ComboboxTriggerProps;
+  };
+</script>
+
+<script lang="ts">
+  import {
+    Combobox,
+    type ComboboxInputProps,
+    type ComboboxSingleRootPropsWithoutHTML,
+    type ComboboxTriggerProps,
+    type SelectSingleRootPropsWithoutHTML,
+  } from 'bits-ui';
+  import type { ComponentSize } from '../../../attributes/size.js';
+  import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+  import SelectInput from './SelectInput.svelte';
+  import SelectPopup, { type SelectPopupProps } from './SelectPopup.svelte';
+
+  let {
+    size = 'normal',
+    roundness = 1,
+    outline = true,
+    class: className = '',
+    popupProps,
+    disabled = false,
+    error = false,
+    focused: forcedFocused = false,
+    before,
+    after,
+    options,
+    searchable = false,
+    open = $bindable(false),
+    value = $bindable(undefined),
+    placeholder,
+    allowDeselect = false,
+    comboboxInputProps,
+    comboboxTriggerProps,
+    searchResultPlaceholder,
+    ...restProps
+  }: SelectProps = $props();
+
+  function updateOpenState(isOpen: boolean) {
+    open = isOpen;
+  }
+
+  let searchValue = $state('');
+
+  const filteredOptions = $derived(
+    searchValue === ''
+      ? options
+      : options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())),
+  );
+</script>
+
+<Combobox.Root
+  {...restProps}
+  bind:value
+  bind:open
+  {allowDeselect}
+  type="single"
+  onOpenChange={updateOpenState}
+  onOpenChangeComplete={(o) => {
+    if (!o) searchValue = '';
+  }}
+>
+  <SelectInput
+    {value}
+    {options}
+    {size}
+    {roundness}
+    {outline}
+    {disabled}
+    {error}
+    class={className}
+    {before}
+    {after}
+    focused={forcedFocused}
+    {comboboxInputProps}
+    {comboboxTriggerProps}
+    {placeholder}
+    {searchable}
+    {updateOpenState}
+    bind:searchValue
+  />
+  <SelectPopup options={filteredOptions} {searchResultPlaceholder} {...popupProps} />
+</Combobox.Root>

package/dist/components/Form/Select/Select.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { Snippet } from 'svelte';
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+/**
+ * Shared base props for the Select component.
+ *
+ * These props control the visual wrapper (InputEnclosure) and
+ * common text-input behaviors.
+ */
+type BaseProps = Omit<ComboboxSingleRootPropsWithoutHTML, 'type'> & Omit<SelectSingleRootPropsWithoutHTML, 'type'>;
+export type SelectProps = BaseProps & {
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+    /** Border radius token (e.g. 1–3, "pill") */
+    roundness?: ComponentRoundnessShape;
+    /** Render an outlined enclosure (shows border) */
+    outline?: boolean;
+    /** Custom CSS class names applied to the InputEnclosure */
+    class?: string;
+    /**
+     * Error visual state.
+     *
+     * When true, applies error styling to the enclosure.
+     * Intended for validation errors.
+     */
+    error?: boolean;
+    /**
+     * Focused visual state.
+     *
+     * When true, forces focused styling on the enclosure.
+     * Usually controlled automatically via focus/blur.
+     */
+    focused?: boolean;
+    /**
+     * Content rendered before the input (prefix).
+     *
+     * Use {#snippet before} in Svelte.
+     */
+    before?: Snippet;
+    /**
+     * Content rendered after the input (suffix).
+     *
+     * Use {#snippet after} in Svelte.
+     */
+    after?: Snippet;
+    /** Select list data */
+    options: SelectOption[];
+    /** Props for Popup */
+    popupProps?: SelectPopupProps;
+    /** is select searchable */
+    searchable?: boolean;
+    /** Select placeholder */
+    placeholder?: string;
+    /** Search Result Placeholder */
+    searchResultPlaceholder?: string;
+    /** bits ui ComboboxInputProps */
+    comboboxInputProps?: ComboboxInputProps;
+    /** bits ui comboboxTriggerProps */
+    comboboxTriggerProps?: ComboboxTriggerProps;
+};
+import { type ComboboxInputProps, type ComboboxSingleRootPropsWithoutHTML, type ComboboxTriggerProps, type SelectSingleRootPropsWithoutHTML } from 'bits-ui';
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+import { type SelectPopupProps } from './SelectPopup.svelte';
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Form/Select/SelectInput.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type SelectInputProps = {
+    options: SelectOption[];
+    value: string | undefined;
+    size?: ComponentSize;
+    roundness?: ComponentRoundnessShape;
+    outline?: boolean;
+    class?: string;
+    error?: boolean;
+    focused?: boolean;
+    before?: Snippet;
+    after?: Snippet;
+    searchable: boolean;
+    placeholder?: string;
+    comboboxInputProps?: ComboboxInputProps;
+    comboboxTriggerProps?: ComboboxTriggerProps;
+    disabled?: boolean;
+    searchValue?: string;
+    updateOpenState: (isOpen: boolean) => void;
+  };
+</script>
+
+<script lang="ts">
+  import { Combobox, type ComboboxInputProps, type ComboboxTriggerProps } from 'bits-ui';
+  import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
+  import type { ComponentSize } from '../../../attributes/size.js';
+  import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+  import Icon from '@iconify/svelte';
+  import type { SelectOption } from './Select.svelte';
+
+  let {
+    size = 'normal',
+    class: className = '',
+    disabled = false,
+    error = false,
+    focused: forcedFocused = false,
+    searchable = false,
+    placeholder,
+    comboboxInputProps,
+    comboboxTriggerProps,
+    searchValue = $bindable<string>(''),
+    after,
+    updateOpenState,
+    value,
+    options,
+    ...restProps
+  }: SelectInputProps = $props();
+
+  let defaultValue = $derived(options.find((item) => item.value === value)?.label);
+
+  let isFocused = $state(false);
+
+  function handleFocus() {
+    isFocused = true;
+  }
+
+  function handleBlur() {
+    isFocused = false;
+  }
+
+  const classes = $derived(['dodo-ui-Select', `size--${size}`, 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}
+>
+  <Combobox.Input
+    oninput={(e) => {
+      searchValue = e.currentTarget.value;
+    }}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    readonly={!searchable}
+    onclick={!searchable && !disabled ? () => updateOpenState(true) : undefined}
+    {placeholder}
+    {defaultValue}
+    {...comboboxInputProps}
+  />
+
+  {#snippet after()}
+    <Combobox.Trigger class={triggerClasses.join(' ')} {...comboboxTriggerProps}>
+      <Icon icon="material-symbols:arrow-drop-down-rounded" />
+    </Combobox.Trigger>
+    {@render after?.()}
+  {/snippet}
+</InputEnclosure>

package/dist/components/Form/Select/SelectInput.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type SelectInputProps = {
+    options: SelectOption[];
+    value: string | undefined;
+    size?: ComponentSize;
+    roundness?: ComponentRoundnessShape;
+    outline?: boolean;
+    class?: string;
+    error?: boolean;
+    focused?: boolean;
+    before?: Snippet;
+    after?: Snippet;
+    searchable: boolean;
+    placeholder?: string;
+    comboboxInputProps?: ComboboxInputProps;
+    comboboxTriggerProps?: ComboboxTriggerProps;
+    disabled?: boolean;
+    searchValue?: string;
+    updateOpenState: (isOpen: boolean) => void;
+};
+import { type ComboboxInputProps, type ComboboxTriggerProps } from 'bits-ui';
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+import type { SelectOption } from './Select.svelte';
+declare const SelectInput: import("svelte").Component<SelectInputProps, {}, "searchValue">;
+type SelectInput = ReturnType<typeof SelectInput>;
+export default SelectInput;

package/dist/components/Form/Select/SelectPopup.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type SelectPopupProps = SelectContentProps &
+    Omit<CardProps, 'children' | 'ref'> & {
+      options?: SelectOption[];
+      searchResultPlaceholder?: string;
+    };
+</script>
+
+<script lang="ts">
+  import { Combobox, type SelectContentProps } from 'bits-ui';
+  import Icon from '@iconify/svelte';
+  import type { SelectOption } from './Select.svelte';
+  import type { CardProps } from '../../Layout/Card/Card.svelte';
+  import { useThemeStore } from '../../Layout/Theme/ThemeSystem/theme.svelte.js';
+
+  let {
+    options = [],
+    shadow = 2,
+    roundness = 1,
+    class: className,
+    outline = false,
+    width,
+    height,
+    'min-height': minHeight,
+    'min-width': minWidth,
+    'max-height': maxHeight,
+    'max-width': maxWidth,
+    color = 'default',
+    variant = 'text',
+    active = false,
+    sideOffset = 10,
+    align = 'start',
+    searchResultPlaceholder = 'No results found, try again.',
+    theme: cardTheme,
+    ...restProps
+  }: SelectPopupProps = $props();
+
+  const theme = $derived(cardTheme || useThemeStore.theme);
+
+  const popupClasses = $derived(
+    [
+      'dodo-ui-Card',
+      'SelectPopup',
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      `dodo-shadow-${shadow}`,
+      outline && 'outline',
+      active && 'active',
+      theme ? `dodo-theme--${theme}` : '',
+      className,
+    ].filter(Boolean),
+  );
+
+  const popupInlineStyles = $derived(
+    [
+      width ? `--SelectPopup-width: ${width}` : '',
+      height ? `--SelectPopup-height: ${height}` : '',
+      minHeight ? `--SelectPopup-min-height: ${minHeight}` : '',
+      minWidth ? `--SelectPopup-min-width: ${minWidth}` : '',
+      maxHeight ? `--SelectPopup-max-height: ${maxHeight}` : '',
+      maxWidth ? `--SelectPopup-max-width: ${maxWidth}` : '',
+    ].filter(Boolean),
+  );
+</script>
+
+<Combobox.Portal>
+  <Combobox.Content
+    {...restProps}
+    {sideOffset}
+    {align}
+    style={popupInlineStyles.join(';')}
+    class={popupClasses.join(' ')}
+  >
+    <Combobox.ScrollUpButton>
+      <Icon icon="icon-park-outline:double-up" />
+    </Combobox.ScrollUpButton>
+    <Combobox.Viewport>
+      {#each options as option, i (i + option.value)}
+        <Combobox.Item value={option.value} label={option.label}>
+          {option.label}
+        </Combobox.Item>
+      {:else}
+        <span>{searchResultPlaceholder}</span>
+      {/each}
+    </Combobox.Viewport>
+    <Combobox.ScrollDownButton>
+      <Icon icon="icon-park-outline:double-down" />
+    </Combobox.ScrollDownButton>
+  </Combobox.Content>
+</Combobox.Portal>

package/dist/components/Form/Select/SelectPopup.svelte.d.ts

@@ -0,0 +1,10 @@
+export type SelectPopupProps = SelectContentProps & Omit<CardProps, 'children' | 'ref'> & {
+    options?: SelectOption[];
+    searchResultPlaceholder?: string;
+};
+import { type SelectContentProps } from 'bits-ui';
+import type { SelectOption } from './Select.svelte';
+import type { CardProps } from '../../Layout/Card/Card.svelte';
+declare const SelectPopup: import("svelte").Component<SelectPopupProps, {}, "">;
+type SelectPopup = ReturnType<typeof SelectPopup>;
+export default SelectPopup;

package/dist/components/Form/Switch/Switch.scss

@@ -0,0 +1,170 @@
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+
+$roundness: (
+  1: calc(var(--dodo-ui-element-roundness-1) / 2),
+  2: calc(var(--dodo-ui-element-roundness-2) / 2),
+  3: calc(var(--dodo-ui-element-roundness-3) / 2),
+  pill: 999px,
+);
+
+// ----------------------------------------
+// Switch styles
+// ----------------------------------------
+
+.dodo-ui-Switch {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--dodo-color-neutral-800);
+
+  .CheckEnclosure {
+    cursor: pointer;
+    transition: background-color 70ms;
+    text-decoration: none;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    font-family: inherit;
+    background-color: var(--dodo-color-neutral-100);
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
+    border-color: transparent;
+    color: inherit;
+    letter-spacing: 0.3px;
+    padding: 0;
+    position: relative;
+
+    &[data-state='checked'] {
+      .CheckThumb {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  .CheckComponentLabel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-left: var(--dodo-ui-space);
+  }
+
+  .CheckComponentCheckContainer {
+    display: flex;
+    align-items: center;
+  }
+
+  .CheckThumb {
+    margin-left: 0;
+    transition: margin 150ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 70ms ease;
+
+    .CheckThumbInternal {
+      border-radius: 50%;
+      width: 60%;
+      height: 60%;
+      display: inline-flex;
+      background-color: #000;
+    }
+  }
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      font-size: 1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-normal) / 1.2);
+        width: calc(var(--dodo-ui-element-height-normal) * 1.4);
+
+        .CheckThumb {
+          height: calc(var(--dodo-ui-element-height-normal) / 1.3);
+          width: calc(var(--dodo-ui-element-height-normal) / 1.3);
+        }
+
+        &[data-state='checked'] {
+          .CheckThumb {
+            transform: translateX(
+              calc(
+                calc(var(--dodo-ui-element-height-normal) * 1.4) - calc(
+                    var(--dodo-ui-element-height-normal) / 1.3
+                  ) -
+                  1px * 2
+              )
+            );
+          }
+        }
+      }
+    }
+
+    &--small {
+      font-size: 0.9rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-small) / 1.2);
+        width: calc(var(--dodo-ui-element-height-small) * 1.4);
+
+        .CheckThumb {
+          height: calc(var(--dodo-ui-element-height-small) / 1.3);
+          width: calc(var(--dodo-ui-element-height-small) / 1.3);
+        }
+
+        &[data-state='checked'] {
+          .CheckThumb {
+            transform: translateX(
+              calc(
+                calc(var(--dodo-ui-element-height-small) * 1.4) - calc(
+                    var(--dodo-ui-element-height-small) / 1.3
+                  ) -
+                  1px * 2
+              )
+            );
+          }
+        }
+      }
+    }
+
+    &--large {
+      font-size: 1.1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-large) / 1.2);
+        width: calc(var(--dodo-ui-element-height-large) * 1.4);
+
+        .CheckThumb {
+          height: calc(var(--dodo-ui-element-height-large) / 1.3);
+          width: calc(var(--dodo-ui-element-height-large) / 1.3);
+        }
+
+        &[data-state='checked'] {
+          .CheckThumb {
+            transform: translateX(
+              calc(
+                calc(var(--dodo-ui-element-height-large) * 1.4) - calc(
+                    var(--dodo-ui-element-height-large) / 1.3
+                  ) -
+                  1px * 2
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        .CheckEnclosure {
+          border-radius: $radius;
+        }
+      }
+    }
+  }
+}