@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/README.md

@@ -1,7 +1,9 @@
 ![Dodo logo](https://flightlesslabs.github.io/dodo-ui/og.png)
 
-# Dodo Ui
-
-An open-source, opinionated UI framework for Svelte.
+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](./docs/Develop.md)
+* [Library Guide](./docs/LibraryGuide.md)

package/dist/Home.mdx

@@ -0,0 +1,80 @@
+import { Source } from '@storybook/addon-docs/blocks';
+import item from '../../package.json?raw';
+
+<main style={{ textAlign: 'center' }}>
+
+<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
+
+# Dodo UI
+
+<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
+
+<h3 style={{ fontWeight: 400 }}>
+  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)
+
+</main>
+
+<br />
+<br />
+
+## Install
+
+<Source
+  dark
+  language="bash"
+  code={`
+pnpm add bits-ui @internationalized/date @flightlesslabs/dodo-ui
+`}
+/>
+
+We are using **bits-ui@{JSON.parse(item).devDependencies['bits-ui']}** internally
+
+## Add css
+
+Add global css in your `+layout.svelte` file
+
+<Source
+  dark
+  language="js"
+  code={`
+import '@flightlesslabs/dodo-ui/styles/global.css';
+import '@flightlesslabs/dodo-ui/styles/components.css';
+`}
+/>
+
+## Theme
+
+We recommend that the [Theme](?path=/docs/components-layout-theme--docs) component should be imported in the `_layout.svelte` (SvelteKit) or any other root location.
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Theme } '@flightlesslabs/dodo-ui';
+
+ <Theme>
+  // Content will go here
+ </Theme>
+`}
+/>
+
+## Use it!
+
+Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+## Explore more
+
+- [Button](?path=/docs/components-form-button--docs)
+- [TextInput](?path=/docs/components-form-textinput--docs)
+- [Tailwind CSS Color Generator](https://uicolors.app/generate/1cc049)

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/shadow.d.ts

@@ -0,0 +1,6 @@
+/** Component Shadow */
+export declare const COMPONENT_SHADOW: {
+    readonly all: readonly [0, 1, 2, 3, 4, 5];
+};
+export type ComponentShadow = (typeof COMPONENT_SHADOW.all)[number];
+export declare const ComponentShadowOptions: readonly [0, 1, 2, 3, 4, 5];

package/dist/attributes/shadow.js

@@ -0,0 +1,5 @@
+/** Component Shadow */
+export const COMPONENT_SHADOW = {
+    all: [0, 1, 2, 3, 4, 5],
+};
+export const ComponentShadowOptions = COMPONENT_SHADOW.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/theme.d.ts

@@ -0,0 +1,9 @@
+/** Component Color */
+export declare const COMPONENT_THEME: {
+    readonly colors: readonly ["light", "dark"];
+    readonly auto: readonly ["auto"];
+};
+export type ComponentThemeColors = (typeof COMPONENT_THEME.colors)[number];
+export type ComponentTheme = ComponentThemeColors | (typeof COMPONENT_THEME.auto)[number];
+export declare const componentThemeOptions: readonly ["light", "dark", "auto"];
+export declare const componentThemeColorsOptions: readonly ["light", "dark"];

package/dist/attributes/theme.js

@@ -0,0 +1,12 @@
+/** Component Color */
+export const COMPONENT_THEME = {
+    colors: ['light', 'dark'],
+    auto: ['auto'],
+};
+// Flat options (for Storybook, selects, etc.)
+export const componentThemeOptions = [
+    ...COMPONENT_THEME.colors,
+    ...COMPONENT_THEME.auto,
+];
+// Grouped options (no duplication)
+export const componentThemeColorsOptions = COMPONENT_THEME.colors;

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,168 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import type { ButtonProps } from './Button.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import { componentColorOptions } from '../../../attributes/color.js';
+  import { componentVariantOptions } from '../../../attributes/variant.js';
+  import { componentSizeOptions } from '../../../attributes/size.js';
+  import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+  import Theme from '../../Layout/Theme/Theme.svelte';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyButtonArgTypes: Partial<ArgTypes<ButtonProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    children: { 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>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <Button>Hello</Button>
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <Button>Hello</Button>
+  </Theme>
+</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;