@flightlesslabs/dodo-ui 0.22.2 → 0.24.0

package/dist/storybook-types.d.ts

@@ -1,129 +0,0 @@
-type ControlType = 'object' | 'boolean' | 'check' | 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select' | 'number' | 'range' | 'file' | 'color' | 'date' | 'text';
-interface ControlBase {
-    [key: string]: any;
-    /** @see https://storybook.js.org/docs/api/arg-types#controltype */
-    type?: ControlType;
-    disable?: boolean;
-}
-type Control = ControlType | false | (ControlBase & (ControlBase | {
-    type: 'color';
-    /** @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors */
-    presetColors?: string[];
-} | {
-    type: 'file';
-    /** @see https://storybook.js.org/docs/api/arg-types#controlaccept */
-    accept?: string;
-} | {
-    type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
-    /** @see https://storybook.js.org/docs/api/arg-types#controllabels */
-    labels?: {
-        [options: string]: string;
-    };
-} | {
-    type: 'number' | 'range';
-    /** @see https://storybook.js.org/docs/api/arg-types#controlmax */
-    max?: number;
-    /** @see https://storybook.js.org/docs/api/arg-types#controlmin */
-    min?: number;
-    /** @see https://storybook.js.org/docs/api/arg-types#controlstep */
-    step?: number;
-}));
-type ConditionalTest = {
-    truthy?: boolean;
-} | {
-    exists: boolean;
-} | {
-    eq: any;
-} | {
-    neq: any;
-};
-type ConditionalValue = {
-    arg: string;
-} | {
-    global: string;
-};
-type Conditional = ConditionalValue & ConditionalTest;
-interface Args {
-    [name: string]: any;
-}
-interface SBBaseType {
-    required?: boolean;
-    raw?: string;
-}
-type SBScalarType = SBBaseType & {
-    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
-};
-type SBArrayType = SBBaseType & {
-    name: 'array';
-    value: SBType;
-};
-type SBObjectType = SBBaseType & {
-    name: 'object';
-    value: Record<string, SBType>;
-};
-type SBEnumType = SBBaseType & {
-    name: 'enum';
-    value: (string | number)[];
-};
-type SBIntersectionType = SBBaseType & {
-    name: 'intersection';
-    value: SBType[];
-};
-type SBUnionType = SBBaseType & {
-    name: 'union';
-    value: SBType[];
-};
-type SBOtherType = SBBaseType & {
-    name: 'other';
-    value: string;
-};
-type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
-interface InputType {
-    /** @see https://storybook.js.org/docs/api/arg-types#control */
-    control?: Control;
-    /** @see https://storybook.js.org/docs/api/arg-types#description */
-    description?: string;
-    /** @see https://storybook.js.org/docs/api/arg-types#if */
-    if?: Conditional;
-    /** @see https://storybook.js.org/docs/api/arg-types#mapping */
-    mapping?: {
-        [key: string]: any;
-    };
-    /** @see https://storybook.js.org/docs/api/arg-types#name */
-    name?: string;
-    /** @see https://storybook.js.org/docs/api/arg-types#options */
-    options?: readonly any[];
-    /** @see https://storybook.js.org/docs/api/arg-types#table */
-    table?: {
-        [key: string]: unknown;
-        /** @see https://storybook.js.org/docs/api/arg-types#tablecategory */
-        category?: string;
-        /** @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue */
-        defaultValue?: {
-            summary?: string;
-            detail?: string;
-        };
-        /** @see https://storybook.js.org/docs/api/arg-types#tabledisable */
-        disable?: boolean;
-        /** @see https://storybook.js.org/docs/api/arg-types#tablesubcategory */
-        subcategory?: string;
-        /** @see https://storybook.js.org/docs/api/arg-types#tabletype */
-        type?: {
-            summary?: string;
-            detail?: string;
-        };
-    };
-    /** @see https://storybook.js.org/docs/api/arg-types#type */
-    type?: SBType | SBScalarType['name'];
-    /**
-     * @deprecated Use `table.defaultValue.summary` instead.
-     * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
-     */
-    defaultValue?: any;
-    [key: string]: any;
-}
-export type ArgTypes<TArgs = Args> = {
-    [name in keyof TArgs]: InputType;
-};
-export type StoryBookArgTypes = Partial<ArgTypes<Args>>;
-export {};

package/dist/storybook-types.js

@@ -1 +0,0 @@
-export {};

package/dist/utils/time/date-creator/createDate/createDate.mdx

@@ -1,98 +0,0 @@
-# createDate
-
-A centralized date factory built on top of `dayjs`.
-
-This utility ensures **consistent parsing, timezone handling, and validation** across your application.
-
-## 📦 Import
-
-```ts
-import { createDate } from '@flightlesslabs/dodo-ui';
-```
-
-## 🚀 Basic Usage
-
-### Current Date
-
-```ts
-const now = createDate();
-console.log(now.format());
-```
-
-
-### Parse a Date
-
-```ts
-const date = createDate("01-02-2025", "DD-MM-YYYY");
-console.log(date.format());
-```
-
-## 🌍 Timezone & UTC
-
-### UTC Mode
-
-```ts
-const utcDate = createDate("2025-01-01T12:00:00Z", undefined, {
-  utc: true,
-});
-```
-
-### Timezone Conversion
-
-```ts
-const indiaTime = createDate("01-01-2025", "DD-MM-YYYY", {
-  timezone: "Asia/Kolkata",
-});
-```
-
-## ⚙️ Options
-
-```ts
-interface CreateDateOptions {
-  timezone?: string;
-  utc?: boolean;
-  strict?: boolean;
-  throwOnInvalid?: boolean;
-}
-```
-
-## 🔁 Behavior Priority
-
-1. utc (highest priority)
-2. timezone
-3. local
-
----
-
-### timezone
-
-- IANA timezone string
-- Interprets input in given timezone
-
----
-
-### utc
-
-- Forces UTC mode
-
----
-
-### strict
-
-- Only applies when format is provided
-- Has no effect on ISO / timestamps
-
----
-
-### throwOnInvalid
-
-- Throws error if date is invalid
-
----
-
-## 📥 Supported Inputs
-
-- string
-- number (timestamp)
-- Date object
-- undefined

package/dist/utils/time/date-creator/createDateFactory/createDateFactory.mdx

@@ -1,104 +0,0 @@
-# createDateFactory
-
-A **factory function** that creates a `createDate` utility with an optional custom `dayjs` instance.
-
-This allows advanced users to:
-
-- Inject their own configured `dayjs`
-- Share plugins across multiple libraries
-- Avoid global `dayjs.extend` pollution
-- Create isolated date environments
-
----
-
-## 📦 Import
-
-```ts
-import { createDateFactory } from '@flightlesslabs/dodo-ui';
-```
-
----
-
-## 🚀 Basic Usage
-
-### Default Factory
-
-```ts
-import { createDateFactory } from '@flightlesslabs/dodo-ui';
-
-const { createDate } = createDateFactory();
-
-const now = createDate();
-console.log(now.format());
-```
-
----
-
-## 🧠 Why Use a Factory?
-
-Instead of relying on global `dayjs.extend`, you can:
-
-- isolate plugin setups
-- avoid conflicts in monorepos
-- support multiple configurations
-- improve testability
-
----
-
-## 🔌 Custom Dayjs Instance
-
-### Inject your own configured instance
-
-```ts
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const { createDate } = createDateFactory(dayjs);
-
-const date = createDate("2025-01-01", "YYYY-MM-DD");
-```
-
----
-
-## ⚙️ Behavior
-
-The factory wraps your `dayjs` instance and preserves:
-
-- UTC handling
-- Timezone support
-- Strict parsing
-- Validation options
-
----
-
-## 🔁 Priority Order
-
-1. utc (highest priority)
-2. timezone
-3. local parsing
-
----
-
-## 📥 Returned API
-
-```ts
-{
-  createDate: Function,
-  dayjs: DayjsInstance
-}
-```
-
-## 🧪 Example: Multiple Factories
-
-
-```ts
-const factoryA = createDateFactory(dayjsA);
-const factoryB = createDateFactory(dayjsB);
-
-factoryA.createDate("2025-01-01");
-factoryB.createDate("2025-01-01");
-```

package/dist/utils/time/timeout/timeout.mdx

@@ -1,114 +0,0 @@
-# timeout
-
-A simple utility to delay execution using Promises.
-
-Useful for **pausing async workflows**, **simulating delays**, or **controlling execution timing**.
-
----
-
-## 📦 Import
-
-```ts
-import { timeout } from '@flightlesslabs/dodo-ui';
-```
-
----
-
-## 🚀 Basic Usage
-
-
-
-```ts
-await timeout(1000); // waits 1 second
-```
-
----
-
-## 🎯 Resolve with Value
-
-You can optionally pass a value that will be returned after the delay.
-
-```ts
-const result = await timeout(500, "done");
-
-console.log(result); // "done"
-```
-
----
-
-## ⚙️ API
-
-```ts
-function timeout<T = void>(
-  milliseconds: number,
-  value?: T
-): Promise<T>
-```
-
----
-
-### `milliseconds`
-
-- Time to wait before resolving (in ms)
-- Must be `>= 0`
-
----
-
-### `value`
-
-- Optional value to resolve with
-- Defaults to `undefined`
-
----
-
-## ⚠️ Error Handling
-
-If a negative duration is provided, the promise will reject:
-
-```ts
-await timeout(-1); // ❌ throws Error
-```
-
----
-
-## 🧠 Use Cases
-
-- Delay execution in async functions
-- Simulate API latency in tests
-- Simple throttling or pacing logic
-
----
-
-## 🔍 Examples
-
-### Async Flow
-
-```ts
-async function run() {
-  console.log("Start");
-
-await timeout(1000);
-
-console.log("End");
-}
-```
-
----
-
-### With Data
-
-<Source
-  dark
-  language="ts"
-  code={`
-const data = await timeout(300, { success: true });
-
-console.log(data.success); // true
-`}
-/>
-
-```ts
-const data = await timeout(300, { success: true });
-
-console.log(data.success); // true
-```

package/src/lib/Home.mdx

@@ -1,69 +0,0 @@
-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 />
-
-## 🚀 Installation
-
-
-```bash
-pnpm add bits-ui @internationalized/date @flightlesslabs/dodo-ui
-```
-
-We are using **bits-ui@{JSON.parse(item).devDependencies['bits-ui']}** internally
-
-## 🎨 Add Styles
-
-Import global styles in your root component. use the root layout (`+layout.svelte`) for SvelteKit.
-
-```ts
-import '@flightlesslabs/dodo-ui/styles/global.css';
-import '@flightlesslabs/dodo-ui/styles/components.css';
-```
-
-## 🌗 Theme Setup
-
-Wrap your application with the [Theme](?path=/docs/components-layout-theme--docs) component at the root level.
-
-
-```ts
-import { Theme } from '@flightlesslabs/dodo-ui';
-
-<Theme global>
-  <!-- Your app -->
-</Theme>
-```
-
-Recommended: Place this in your root layout (`+layout.svelte`) for SvelteKit.
-
-✨ Usage
-
-Start by importing components like [Button](?path=/docs/components-form-button--docs).
-
-```ts
-import { Button } '@flightlesslabs/dodo-ui';
-
-<Button>Hello</Button>
-```
-
-## 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/src/lib/components/Form/Button/Button.stories.svelte

@@ -1,178 +0,0 @@
-<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 '$lib/attributes/color.js';
-  import { componentVariantOptions } from '$lib/attributes/variant.js';
-  import { componentSizeOptions } from '$lib/attributes/size.js';
-  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
-  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
-
-  const description = `
- A flexible Button component based on bits-ui [button](https://bits-ui.com/docs/components/button).
- \`\`\`ts
- import { Button } from '@flightlesslabs/dodo-ui';
- \`\`\`
-`;
-
-  // ------------------------------
-  // 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,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">Click me!</Story>
-
-<Story
-  name="Link Button"
-  args={{
-    href: 'https://www.w3schools.com/tags/tag_a.asp',
-    target: '_blank',
-  }}
->
-  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="Color" args={{ color: 'safe' }}>Click me</Story>
-
-<Story name="Text" args={{ variant: 'text' }}>Click me!</Story>
-
-<Story name="Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
-
-<Story name="Size" args={{ size: 'large' }}>Click me!</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
-
-<Story name="Submit Button" args={{ type: 'submit' }}>Click me!</Story>
-
-<Story name="Full Width" args={{ fullWidth: true }}>Click me!</Story>
-
-<Story
-  name="Compact"
-  args={{
-    compact: true,
-    'aria-label': 'Add item',
-  }}
->
-  +
-</Story>
-
-<Story name="Light Theme" asChild>
-  <Theme type="light">
-    <Button>Click me!</Button>
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <Button>Click me!</Button>
-  </Theme>
-</Story>