@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-1

package/README.md

@@ -5,3 +5,15 @@
 An open-source, opinionated UI framework for Svelte.
 
 [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`

package/dist/{stories/Home.mdx → Home.mdx}

@@ -1,5 +1,5 @@
 import { Source } from '@storybook/addon-docs/blocks';
-import item from '../../../package.json?raw';
+import item from '../../package.json?raw';
 
 <main style={{ textAlign: 'center' }}>
 
@@ -9,9 +9,11 @@ import item from '../../../package.json?raw';
 
 <h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
 
-<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
+<h3 style={{ fontWeight: 400 }}>
+  An open-source, opinionated UI framework for Svelte. based on [Bits UI](https://bits-ui.com/)
+</h3>
 
-### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui) - [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
 
 </main>
 
@@ -20,25 +22,15 @@ import item from '../../../package.json?raw';
 
 ## Install
 
-pnpm
-
 <Source
   dark
   language="bash"
   code={`
-pnpm add @flightlesslabs/dodo-ui
+pnpm add bits-ui @flightlesslabs/dodo-ui
 `}
 />
 
-npm
-
-<Source
-  dark
-  language="bash"
-  code={`
-npm i @flightlesslabs/dodo-ui
-`}
-/>
+We are using bits-ui@{JSON.parse(item).devDependencies['bits-ui']} internally
 
 ## Add css
 
@@ -65,8 +57,3 @@ import { Button } '@flightlesslabs/dodo-ui';
 />
 
 ## Explore more
-
-- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
-- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
-- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
-- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

package/dist/attributes/color.d.ts

@@ -0,0 +1,11 @@
+/** Component Color */
+export declare const COMPONENT_COLOR: {
+    readonly priority: readonly ["primary", "secondary", "neutral"];
+    readonly severity: readonly ["safe", "warning", "danger"];
+};
+export type ComponentColorPriority = (typeof COMPONENT_COLOR.priority)[number];
+export type ComponentColorSeverity = (typeof COMPONENT_COLOR.severity)[number];
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+export declare const componentColorOptions: readonly ["primary", "secondary", "neutral", "safe", "warning", "danger"];
+export declare const componentColorPriorityOptions: readonly ["primary", "secondary", "neutral"];
+export declare const componentColorSeverityOptions: readonly ["safe", "warning", "danger"];

package/dist/attributes/color.js

@@ -0,0 +1,13 @@
+/** Component Color */
+export const COMPONENT_COLOR = {
+    priority: ['primary', 'secondary', 'neutral'],
+    severity: ['safe', 'warning', 'danger'],
+};
+// Flat options (for Storybook, selects, etc.)
+export const componentColorOptions = [
+    ...COMPONENT_COLOR.priority,
+    ...COMPONENT_COLOR.severity,
+];
+// Grouped options (no duplication)
+export const componentColorPriorityOptions = COMPONENT_COLOR.priority;
+export const componentColorSeverityOptions = COMPONENT_COLOR.severity;

package/dist/attributes/roundness.d.ts

@@ -0,0 +1,12 @@
+/** Component Roundness */
+export declare const COMPONENT_ROUNDNESS: {
+    readonly numerical: readonly [0, 1, 2, 3];
+    readonly shape: readonly [0, 1, 2, 3, "pill"];
+    readonly all: readonly [0, 1, 2, 3, "pill", "full"];
+};
+export type ComponentRoundnessNumerical = (typeof COMPONENT_ROUNDNESS.numerical)[number];
+export type ComponentRoundnessShape = (typeof COMPONENT_ROUNDNESS.shape)[number];
+export type ComponentRoundness = (typeof COMPONENT_ROUNDNESS.all)[number];
+export declare const componentRoundnessNumericalOptions: readonly [0, 1, 2, 3];
+export declare const componenRoundnessShapeOptions: readonly [0, 1, 2, 3, "pill"];
+export declare const componentRoundnessOptions: readonly [0, 1, 2, 3, "pill", "full"];

package/dist/attributes/roundness.js

@@ -0,0 +1,9 @@
+/** Component Roundness */
+export const COMPONENT_ROUNDNESS = {
+    numerical: [0, 1, 2, 3],
+    shape: [0, 1, 2, 3, 'pill'],
+    all: [0, 1, 2, 3, 'pill', 'full'],
+};
+export const componentRoundnessNumericalOptions = COMPONENT_ROUNDNESS.numerical;
+export const componenRoundnessShapeOptions = COMPONENT_ROUNDNESS.shape;
+export const componentRoundnessOptions = COMPONENT_ROUNDNESS.all;

package/dist/attributes/size.d.ts

@@ -0,0 +1,6 @@
+/** Component Size */
+export declare const COMPONENT_SIZE: {
+    readonly all: readonly ["normal", "small", "large"];
+};
+export type ComponentSize = (typeof COMPONENT_SIZE.all)[number];
+export declare const componentSizeOptions: readonly ["normal", "small", "large"];

package/dist/attributes/size.js

@@ -0,0 +1,5 @@
+/** Component Size */
+export const COMPONENT_SIZE = {
+    all: ['normal', 'small', 'large'],
+};
+export const componentSizeOptions = COMPONENT_SIZE.all;

package/dist/attributes/variant.d.ts

@@ -0,0 +1,6 @@
+/** Component Variant */
+export declare const COMPONENT_VARIANT: {
+    readonly all: readonly ["solid", "text"];
+};
+export type ComponentVariant = (typeof COMPONENT_VARIANT.all)[number];
+export declare const componentVariantOptions: readonly ["solid", "text"];

package/dist/attributes/variant.js

@@ -0,0 +1,5 @@
+/** Component Variant */
+export const COMPONENT_VARIANT = {
+    all: ['solid', 'text'],
+};
+export const componentVariantOptions = COMPONENT_VARIANT.all;

package/dist/components/Form/Button/Button.scss

@@ -0,0 +1,164 @@
+@use '../../../styles/scss/mixins/button-color' as buttons;
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+$dodo-button-themes: neutral, primary, secondary, safe, warning, danger;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
+
+  @each $theme in $dodo-button-themes {
+    // Fixed: Added buttons. prefix
+    @include buttons.generate-dodo-ui-button-colors($theme, light);
+  }
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
+
+  @each $theme in $dodo-button-themes {
+    // Fixed: Added buttons. prefix
+    @include buttons.generate-dodo-ui-button-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-Button {
+  cursor: pointer;
+  transition:
+    background-color 70ms,
+    color 70ms,
+    border-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      height: var(--dodo-ui-element-height-normal);
+      font-size: 1rem;
+      padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      min-width: 45px;
+    }
+
+    &--small {
+      height: var(--dodo-ui-element-height-small);
+      padding: 0 var(--dodo-ui-space);
+      font-size: 0.9rem;
+      min-width: 35px;
+    }
+
+    &--large {
+      height: var(--dodo-ui-element-height-large);
+      font-size: 1.1rem;
+      padding: 0 calc(var(--dodo-ui-space) * 2);
+      min-width: 85px;
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Theme colors
+  // ----------------------------------------
+  &.color {
+    @each $theme in $dodo-button-themes {
+      // Fixed: Added buttons. prefix
+      @include buttons.generate-dodo-ui-button-color($theme);
+    }
+  }
+
+  // ----------------------------------------
+  // Disabled
+  // ----------------------------------------
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &.variant {
+      &--text,
+      &--solid {
+        background-color: var(--dodo-ui-Button-disabled-bg);
+        color: var(--dodo-ui-Button-disabled-color);
+
+        &.outline {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Compact
+  // ----------------------------------------
+  &.compact {
+    &.size {
+      &--normal,
+      &--small,
+      &--large {
+        min-width: initial;
+        padding: 0;
+      }
+
+      &--normal {
+        width: var(--dodo-ui-element-height-normal);
+      }
+
+      &--small {
+        width: var(--dodo-ui-element-height-small);
+      }
+
+      &--large {
+        width: var(--dodo-ui-element-height-large);
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Full width
+  // ----------------------------------------
+  &.fullWidth {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,148 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Button from './Button.svelte';
+import { componentColorOptions } from '../../../attributes/color.js';
+import { componentVariantOptions } from '../../../attributes/variant.js';
+import { componentSizeOptions } from '../../../attributes/size.js';
+import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+// ------------------------------
+// Storybook ArgTypes
+// ------------------------------
+export const storyButtonArgTypes = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { table: { category: 'API', subcategory: 'Base' } },
+    ref: { table: { category: 'API', subcategory: 'Base' } },
+    href: {
+        control: { type: 'text' },
+        description: 'Render as Anchor when provided',
+        table: { category: 'API', subcategory: 'Base' },
+    },
+    disabled: {
+        control: { type: 'boolean' },
+        description: 'Disable interactions',
+        table: { category: 'API', subcategory: 'Base' },
+    },
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    type: { table: { category: 'API', subcategory: 'Base' } },
+    // ------------------------------
+    // Appearance
+    // ------------------------------
+    color: {
+        control: { type: 'select' },
+        options: componentColorOptions,
+        description: 'Color theme token',
+        table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'primary' } },
+    },
+    variant: {
+        control: { type: 'select' },
+        options: componentVariantOptions,
+        description: 'Visual variant of the button',
+        table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'solid' } },
+    },
+    size: {
+        control: { type: 'select' },
+        options: componentSizeOptions,
+        description: 'Visual size token',
+        table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
+    },
+    roundness: {
+        control: { type: 'select' },
+        options: componentRoundnessOptions,
+        description: 'Border radius token',
+        table: { category: 'API', subcategory: 'Appearance' },
+    },
+    fullWidth: {
+        control: { type: 'boolean' },
+        description: 'Stretch button to full container width',
+        table: { category: 'API', subcategory: 'Appearance' },
+    },
+    compact: {
+        control: { type: 'boolean' },
+        description: 'Compact spacing (icon buttons)',
+        table: { category: 'API', subcategory: 'Appearance' },
+    },
+    outline: {
+        control: { type: 'boolean' },
+        description: 'Render outlined style',
+        table: { category: 'API', subcategory: 'Appearance' },
+    },
+    // ------------------------------
+    // Accessibility
+    // ------------------------------
+    'aria-label': {
+        control: { type: 'text' },
+        description: 'Accessible label (required for icon-only buttons)',
+        table: { category: 'API', subcategory: 'Accessibility' },
+    },
+    // ------------------------------
+    // Events (Svelte-style)
+    // ------------------------------
+    onclick: { table: { category: 'API', subcategory: 'Events' }, action: 'click' },
+};
+// ------------------------------
+// Storybook Meta
+// ------------------------------
+const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+});
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Primary">Click me!</Story>
+
+<Story name="Neutral" args={{ color: 'neutral', variant: 'text', outline: true }}>Click me!</Story>
+
+<Story
+  name="OnClick (Actions)"
+  args={{
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+>
+  Click me
+</Story>
+
+<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
+
+<Story name="Large Button" args={{ size: 'large' }}>Large</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
+
+<Story name="Safe" args={{ color: 'safe' }}>Safe</Story>
+
+<Story name="Danger / Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
+  Danger
+</Story>
+
+<Story name="Submit Button" args={{ type: 'submit' }}>Submit Form</Story>
+
+<Story name="Full Width" args={{ fullWidth: true }}>Click me!</Story>
+
+<Story
+  name="Link Button"
+  args={{
+    href: 'https://www.w3schools.com/tags/tag_a.asp',
+    target: '_blank',
+  }}
+>
+  External Link
+</Story>
+
+<Story
+  name="Icon Only (A11y Example)"
+  args={{
+    compact: true,
+    'aria-label': 'Add item',
+  }}
+>
+  +
+</Story>

package/dist/{stories/components → components}/Form/Button/Button.stories.svelte.d.ts

@@ -1,6 +1,7 @@
 import Button from './Button.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storyButtonArgTypes: StoryBookArgTypes;
+import type { ButtonProps } from './Button.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+export declare const storyButtonArgTypes: Partial<ArgTypes<ButtonProps>>;
 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;

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

@@ -0,0 +1,53 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import './Button.scss';
+import { Button as BitsUiButton } from 'bits-ui';
+/**
+ * Button component runtime props.
+ *
+ * These props are destructured from `$props()` and mapped to the underlying
+ * Bits UI Button root component, with semantic rendering based on `href`.
+ */
+let { children, size = 'normal', color = 'primary', roundness = 1, variant = 'solid', outline = false, compact = false, fullWidth = false, class: className = '', disabled = false, 'aria-label': ariaLabel, href, ref, type, ...restProps } = $props();
+/**
+ * Computed class list for the Button component.
+ */
+const classes = $derived([
+    'dodo-ui-Button',
+    `size--${size}`,
+    `color--${color}`,
+    `variant--${variant}`,
+    `roundness--${roundness}`,
+    outline && 'outline',
+    compact && 'compact',
+    fullWidth && 'fullWidth',
+    className,
+].filter(Boolean));
+</script>
+
+{#if href}
+  <!-- Anchor variant -->
+  <BitsUiButton.Root
+    {...restProps as Omit<HTMLAnchorAttributes, 'type'>}
+    {disabled}
+    aria-label={ariaLabel}
+    class={classes.join(' ')}
+    {ref}
+    {href}
+  >
+    {@render children?.()}
+  </BitsUiButton.Root>
+{:else}
+  <!-- Button variant -->
+  <BitsUiButton.Root
+    {...restProps as HTMLButtonAttributes}
+    {disabled}
+    aria-label={ariaLabel}
+    class={classes.join(' ')}
+    {ref}
+    {type}
+  >
+    {@render children?.()}
+  </BitsUiButton.Root>
+{/if}

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

@@ -0,0 +1,76 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+/**
+ * Shared base props for the Button component.
+ *
+ * These props apply to both the <button> and <a> render modes.
+ */
+interface ButtonBaseProps {
+    /** Button contents */
+    children?: Snippet;
+    /** Reference to the underlying button or anchor element */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
+    /** Visual size token */
+    size?: ComponentSize;
+    /** Stretch button to full container width */
+    fullWidth?: boolean;
+    /** Color theme token */
+    color?: ComponentColor;
+    /** Border radius token (0–3, "pill", "full") */
+    roundness?: ComponentRoundness;
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+    /** Add a border around the button */
+    outline?: boolean;
+    /** Compact spacing, typically for icon-only buttons */
+    compact?: boolean;
+    /** Custom CSS class names */
+    class?: string;
+    /** Accessible label (required for icon-only buttons) */
+    'aria-label'?: string;
+}
+/**
+ * Button component props (button variant).
+ *
+ * Renders a semantic <button> element when `href` is not provided.
+ * Inherits all native HTML button attributes.
+ */
+export type ButtonAsButtonProps = ButtonBaseProps & Omit<HTMLButtonAttributes, 'href'> & {
+    /** Render as link when provided (not allowed for button variant) */
+    href?: never;
+    /** Disabled state of the button */
+    disabled?: HTMLButtonAttributes['disabled'];
+};
+/**
+ * Button component props (anchor variant).
+ *
+ * Renders an <a> element when `href` is provided.
+ * Inherits all native HTML anchor attributes, except `type`.
+ */
+export type ButtonAsAnchorProps = ButtonBaseProps & Omit<HTMLAnchorAttributes, 'type'> & {
+    /** Render as link when provided */
+    href: HTMLAnchorAttributes['href'];
+    /** Button `type` is not supported when rendering as an anchor */
+    type?: never;
+    /** Disabled visual state (forwarded to button root for styling/ARIA) */
+    disabled?: HTMLButtonAttributes['disabled'];
+};
+/**
+ * Button component props.
+ *
+ * Renders a semantic <button> by default, or an <a> element when `href` is provided.
+ * Supports design-system tokens for size, color, variant, and roundness.
+ *
+ * This type is a discriminated union:
+ * - When `href` is present, anchor props are enabled and button-only props are disabled.
+ * - When `href` is absent, button props are enabled and anchor-only props are disabled.
+ */
+export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
+import './Button.scss';
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentColor } from '../../../attributes/color.js';
+import type { ComponentRoundness } from '../../../attributes/roundness.js';
+import type { ComponentVariant } from '../../../attributes/variant.js';
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Form/InputEnclosure/InputAffix.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, size = 'normal', placement } = $props();
+/**
+ * Computed class list for the InputAffix.
+ */
+const classes = $derived(['dodo-ui-InputAffix', `size--${size}`, `placement--${placement}`].filter(Boolean));
+</script>
+
+<span class={classes.join(' ')}>
+  {@render children?.()}
+</span>
+
+<style>.dodo-ui-InputAffix {
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  position: relative;
+}</style>

package/dist/components/Form/InputEnclosure/InputAffix.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { Snippet } from 'svelte';
+/**
+ * InputAffix props.
+ *
+ * Internal-only component used by InputEnclosure to render
+ * leading or trailing content (e.g. icons, buttons, prefixes/suffixes).
+ *
+ * This component is not part of the public API.
+ */
+export interface InputAffixProps {
+    /** Content rendered inside the affix (icon, button, text, etc.) */
+    children?: Snippet;
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+    /**
+     * Placement of the affix relative to the input.
+     *
+     * - "before": renders before the input control
+     * - "after": renders after the input control
+     */
+    placement: 'before' | 'after';
+}
+declare const InputAffix: import("svelte").Component<InputAffixProps, {}, "">;
+type InputAffix = ReturnType<typeof InputAffix>;
+export default InputAffix;