@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

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

@@ -0,0 +1,30 @@
+import defaultDayjs from './dayjs.js';
+export function createDateFactory(customDayjs) {
+    const d = customDayjs ?? defaultDayjs;
+    function createDate(date, format, options = {}) {
+        const { timezone, utc, strict = false, throwOnInvalid = false } = options;
+        const input = date ?? undefined;
+        let instance;
+        // 1. UTC takes highest priority
+        if (utc) {
+            instance = format ? d.utc(input, format, strict) : d.utc(input);
+        }
+        // 2. Timezone
+        else if (timezone) {
+            instance = format ? d.tz(input, format, timezone) : d.tz(input, timezone);
+        }
+        // 3. Local
+        else {
+            instance = format ? d(input, format, strict) : d(input);
+        }
+        // 4. Validation
+        if (throwOnInvalid && !instance.isValid()) {
+            throw new Error('Invalid date input');
+        }
+        return instance;
+    }
+    return {
+        createDate,
+        dayjs: d,
+    };
+}

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

@@ -0,0 +1,127 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# 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
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { createDateFactory } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+---
+
+## 🚀 Basic Usage
+
+### Default Factory
+
+<Source
+  dark
+  language="ts"
+  code={`
+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
+
+<Source
+  dark
+  language="ts"
+  code={`
+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
+
+<Source
+  dark
+  language="ts"
+  code={`
+{
+  createDate: Function,
+  dayjs: DayjsInstance
+}
+`}
+/>
+
+---
+
+## 🧪 Example: Multiple Factories
+
+<Source
+  dark
+  language="ts"
+  code={`
+const factoryA = createDateFactory(dayjsA);
+const factoryB = createDateFactory(dayjsB);
+
+factoryA.createDate("2025-01-01");
+factoryB.createDate("2025-01-01");
+`}
+/>

package/dist/utils/time/date-creator/createDateFactory/dayjs.d.ts

@@ -0,0 +1,3 @@
+import dayjsFactory from 'dayjs';
+declare const dayjs: typeof dayjsFactory;
+export default dayjs;

package/dist/utils/time/date-creator/createDateFactory/dayjs.js

@@ -0,0 +1,12 @@
+import dayjsFactory from 'dayjs';
+import utcPlugin from 'dayjs/plugin/utc.js';
+import timezonePlugin from 'dayjs/plugin/timezone.js';
+import customParseFormatPlugin from 'dayjs/plugin/customParseFormat.js';
+import isBetweenPlugin from 'dayjs/plugin/isBetween.js';
+const dayjs = dayjsFactory;
+// default plugin setup
+dayjs.extend(utcPlugin);
+dayjs.extend(timezonePlugin);
+dayjs.extend(customParseFormatPlugin);
+dayjs.extend(isBetweenPlugin);
+export default dayjs;

package/dist/utils/time/date-creator/createDateFactory/types.d.ts

@@ -0,0 +1,9 @@
+import type { ConfigType } from 'dayjs';
+export type CreateDateInput = ConfigType;
+export type CreateDateFormat = string | undefined;
+export interface CreateDateOptions {
+    timezone?: string;
+    utc?: boolean;
+    strict?: boolean;
+    throwOnInvalid?: boolean;
+}

package/dist/utils/time/timeout/timeout.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Creates a promise that resolves after a specified delay.
+ *
+ * Useful for pausing execution in async workflows,
+ * throttling operations, or simulating delays in tests.
+ *
+ * @group Time
+ *
+ * @param milliseconds - Time to wait in milliseconds.
+ * @param value - Optional value to resolve with.
+ *
+ * @returns A promise that resolves after the delay.
+ *
+ * @example
+ * await timeout(1000);
+ *
+ * @example
+ * const result = await timeout(1000, "done");
+ * console.log(result); // "done"
+ */
+export declare function timeout<T = void>(milliseconds: number, value?: T): Promise<T>;

package/dist/utils/time/timeout/timeout.js

@@ -0,0 +1,28 @@
+/**
+ * Creates a promise that resolves after a specified delay.
+ *
+ * Useful for pausing execution in async workflows,
+ * throttling operations, or simulating delays in tests.
+ *
+ * @group Time
+ *
+ * @param milliseconds - Time to wait in milliseconds.
+ * @param value - Optional value to resolve with.
+ *
+ * @returns A promise that resolves after the delay.
+ *
+ * @example
+ * await timeout(1000);
+ *
+ * @example
+ * const result = await timeout(1000, "done");
+ * console.log(result); // "done"
+ */
+export function timeout(milliseconds, value) {
+    if (milliseconds < 0) {
+        return Promise.reject(new Error('Timeout duration must be >= 0'));
+    }
+    return new Promise((resolve) => {
+        setTimeout(() => resolve(value), milliseconds);
+    });
+}

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

@@ -0,0 +1,134 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# timeout
+
+A simple utility to delay execution using Promises.
+
+Useful for **pausing async workflows**, **simulating delays**, or **controlling execution timing**.
+
+---
+
+## 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { timeout } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+---
+
+## 🚀 Basic Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+await timeout(1000); // waits 1 second
+`}
+/>
+
+---
+
+## 🎯 Resolve with Value
+
+You can optionally pass a value that will be returned after the delay.
+
+<Source
+  dark
+  language="ts"
+  code={`
+const result = await timeout(500, "done");
+
+console.log(result); // "done"
+`}
+/>
+
+---
+
+## ⚙️ API
+
+<Source
+  dark
+  language="ts"
+  code={`
+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:
+
+<Source
+  dark
+  language="ts"
+  code={`
+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
+
+<Source
+  dark
+  language="ts"
+  code={`
+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
+`}
+/>
+
+---

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "scripts": {
-    "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
-    "build": "vite build && pnpm copy-css && pnpm run prepack",
+    "scss:global": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/global/index.scss dist/styles/global.css\"",
+    "scss:components": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/components.scss dist/styles/components.css\"",
+    "scss": "pnpm scss:global && pnpm scss:components",
+    "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
     "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
+    "prepack": "svelte-kit sync && svelte-package && pnpm run scss && publint",
     "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
     "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format",
+    "create:component": "node --experimental-strip-types scripts/create-component/create-component.ts",
+    "test": "vitest run"
   },
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
@@ -43,60 +47,64 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "scss": "./dist/styles/scss/index.scss"
+      "svelte": "./dist/index.js"
     },
-    "./styles/global.css": "./dist/styles/global.css"
+    "./styles/global.css": "./dist/styles/global.css",
+    "./styles/components.css": "./dist/styles/components.css"
   },
   "peerDependencies": {
+    "@internationalized/date": "^3.0.0",
+    "bits-ui": "^2.0.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.0",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.33.0",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-svelte-csf": "5.0.7",
-    "@storybook/addon-vitest": "^9.1.1",
-    "@storybook/sveltekit": "^9.1.1",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.27.3",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
+    "@chromatic-com/storybook": "^5.1.1",
+    "@eslint/compat": "^2.0.4",
+    "@eslint/js": "^10.0.1",
+    "@iconify/svelte": "^5.2.1",
+    "@internationalized/date": "^3.12.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-svelte-csf": "^5.1.2",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/sveltekit": "^10.3.5",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.57.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/file-saver": "^2.0.7",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vueless/storybook-dark-mode": "^9.0.6",
-    "cpy-cli": "^5.0.0",
-    "eslint": "^9.33.0",
+    "@types/node": "^24",
+    "@vitest/browser": "^4.1.3",
+    "@vitest/browser-playwright": "^4.1.3",
+    "@vitest/coverage-v8": "^4.1.3",
+    "bits-ui": "^2.17.2",
+    "dayjs": "^1.11.20",
+    "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "9.1.1",
-    "eslint-plugin-svelte": "^3.11.0",
-    "globals": "^16.3.0",
-    "playwright": "^1.54.2",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.12",
-    "sass": "^1.90.0",
-    "storybook": "^9.1.1",
-    "svelte": "^5.38.0",
-    "svelte-check": "^4.3.1",
-    "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.1",
-    "vitest": "^3.2.4"
+    "eslint-plugin-storybook": "^10.3.5",
+    "eslint-plugin-svelte": "^3.17.0",
+    "esm-env": "^1.2.2",
+    "file-saver": "^2.0.5",
+    "globals": "^17.4.0",
+    "jsdom": "^29.0.2",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.5",
+    "svelte": "^5.55.2",
+    "svelte-check": "^4.4.6",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.1",
+    "vite": "^8.0.7",
+    "vitest": "^4.1.3"
   },
   "keywords": [
     "svelte"
-  ],
-  "volta": {
-    "node": "22.15.1",
-    "pnpm": "10.12.1"
-  },
-  "dependencies": {
-    "@iconify/svelte": "^5.0.1",
-    "dayjs": "^1.11.13",
-    "file-saver": "^2.0.5"
-  }
+  ]
 }

package/src/lib/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/src/lib/attributes/color.ts

@@ -0,0 +1,19 @@
+/** Component Color */
+export const COMPONENT_COLOR = {
+  priority: ['primary', 'secondary', 'neutral'],
+  severity: ['safe', 'warning', 'danger'],
+} as const;
+
+export type ComponentColorPriority = (typeof COMPONENT_COLOR.priority)[number];
+export type ComponentColorSeverity = (typeof COMPONENT_COLOR.severity)[number];
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+
+// Flat options (for Storybook, selects, etc.)
+export const componentColorOptions = [
+  ...COMPONENT_COLOR.priority,
+  ...COMPONENT_COLOR.severity,
+] as const satisfies readonly ComponentColor[];
+
+// Grouped options (no duplication)
+export const componentColorPriorityOptions = COMPONENT_COLOR.priority;
+export const componentColorSeverityOptions = COMPONENT_COLOR.severity;

package/src/lib/attributes/roundness.ts

@@ -0,0 +1,14 @@
+/** Component Roundness */
+export const COMPONENT_ROUNDNESS = {
+  numerical: [0, 1, 2, 3],
+  shape: [0, 1, 2, 3, 'pill'],
+  all: [0, 1, 2, 3, 'pill', 'full'],
+} as const;
+
+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 const componentRoundnessNumericalOptions = COMPONENT_ROUNDNESS.numerical;
+export const componenRoundnessShapeOptions = COMPONENT_ROUNDNESS.shape;
+export const componentRoundnessOptions = COMPONENT_ROUNDNESS.all;

package/src/lib/attributes/shadow.ts

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

package/src/lib/attributes/size.ts

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

package/src/lib/attributes/theme.ts

@@ -0,0 +1,17 @@
+/** Component Color */
+export const COMPONENT_THEME = {
+  colors: ['light', 'dark'],
+  auto: ['auto'],
+} as const;
+
+export type ComponentThemeColors = (typeof COMPONENT_THEME.colors)[number];
+export type ComponentTheme = ComponentThemeColors | (typeof COMPONENT_THEME.auto)[number];
+
+// Flat options (for Storybook, selects, etc.)
+export const componentThemeOptions = [
+  ...COMPONENT_THEME.colors,
+  ...COMPONENT_THEME.auto,
+] as const satisfies readonly ComponentTheme[];
+
+// Grouped options (no duplication)
+export const componentThemeColorsOptions = COMPONENT_THEME.colors;

package/src/lib/attributes/variant.ts

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