@flightlesslabs/dodo-ui 0.22.1 → 0.23.0

package/README.md

@@ -1,9 +1 @@
-![Dodo logo](https://flightlesslabs.github.io/dodo-ui/og.png)
-
-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)
+# @flightlesslabs/dodo-ui

package/dist/index.d.ts

@@ -10,6 +10,10 @@ export { default as TextInput, type TextInputEvent, type TextInputFocusEvent, ty
  * InputEnclosure component and related prop types.
  */
 export { default as InputEnclosure, type InputEnclosureProps, } from './components/Form/InputEnclosure/InputEnclosure.svelte';
+/**
+ * Label component and related prop types.
+ */
+export { default as Label, type LabelProps } from './components/Form/Label/Label.svelte';
 /**
  * FormField component and related prop types.
  */

package/dist/index.js

@@ -13,6 +13,10 @@ export { default as TextInput, } from './components/Form/TextInput/TextInput.sve
  * InputEnclosure component and related prop types.
  */
 export { default as InputEnclosure, } from './components/Form/InputEnclosure/InputEnclosure.svelte';
+/**
+ * Label component and related prop types.
+ */
+export { default as Label } from './components/Form/Label/Label.svelte';
 /**
  * FormField component and related prop types.
  */

package/package.json

@@ -1,23 +1,8 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.22.1",
-  "scripts": {
-    "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 && 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",
-    "create:component": "node --experimental-strip-types scripts/create-component/create-component.ts",
-    "test": "vitest run"
+  "version": "0.23.0",
+  "publishConfig": {
+    "access": "public"
   },
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
@@ -31,12 +16,7 @@
     "!dist/**/*.spec.*",
     "src/lib",
     "!src/lib/**/*.test.*",
-    "!src/lib/**/*.spec.*",
-    "!src/lib/stories/**/*.stories.*",
-    "!src/lib/stories/**/*.mdx",
-    "!src/lib/stories/assets/**/*.png",
-    "!src/lib/stories/assets/**/*.jpg",
-    "!src/lib/stories/philosophy"
+    "!src/lib/**/*.spec.*"
   ],
   "sideEffects": [
     "**/*.css"
@@ -50,7 +30,11 @@
       "svelte": "./dist/index.js"
     },
     "./styles/global.css": "./dist/styles/global.css",
-    "./styles/components.css": "./dist/styles/components.css"
+    "./styles/components.css": "./dist/styles/components.css",
+    "./styles/*": {
+      "sass": "./dist/styles/*",
+      "default": "./dist/styles/*"
+    }
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
@@ -63,11 +47,6 @@
     "@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",
@@ -79,7 +58,6 @@
     "@types/file-saver": "^2.0.7",
     "@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",
@@ -91,12 +69,10 @@
     "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",
@@ -106,5 +82,19 @@
   },
   "keywords": [
     "svelte"
-  ]
-}
+  ],
+  "scripts": {
+    "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",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "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"
+  }
+}

package/src/lib/index.ts

@@ -30,6 +30,11 @@ export {
   type InputEnclosureProps,
 } from './components/Form/InputEnclosure/InputEnclosure.svelte';
 
+/**
+ * Label component and related prop types.
+ */
+export { default as Label, type LabelProps } from './components/Form/Label/Label.svelte';
+
 /**
  * FormField component and related prop types.
  */

package/src/lib/utils/time/date-creator/createDate/createDate.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest';
+import dayjs from 'dayjs';
+import { createDate } from './createDate.js';
+
+describe('createDate', () => {
+  it('should return current date when no args provided', () => {
+    const now = createDate();
+
+    expect(now.isValid()).toBe(true);
+
+    const diff = Math.abs(now.valueOf() - dayjs().valueOf());
+    expect(diff).toBeLessThan(1000);
+  });
+
+  it('should parse ISO string without format', () => {
+    const date = createDate('2025-01-01');
+
+    expect(date.isValid()).toBe(true);
+    expect(date.year()).toBe(2025);
+  });
+
+  it('should parse formatted date string', () => {
+    const date = createDate('01-02-2025', 'DD-MM-YYYY');
+
+    expect(date.isValid()).toBe(true);
+    expect(date.year()).toBe(2025);
+    expect(date.month()).toBe(1); // February (0-based)
+  });
+
+  it('should respect strict parsing (valid case)', () => {
+    const date = createDate('01-02-2025', 'DD-MM-YYYY', {
+      strict: true,
+    });
+
+    expect(date.isValid()).toBe(true);
+  });
+
+  it('should respect strict parsing (invalid case)', () => {
+    const date = createDate('1-2-2025', 'DD-MM-YYYY', {
+      strict: true,
+    });
+
+    expect(date.isValid()).toBe(false);
+  });
+
+  it('should throw when throwOnInvalid is true', () => {
+    expect(() => createDate('invalid-date', undefined, { throwOnInvalid: true })).toThrow(
+      'Invalid date input',
+    );
+  });
+
+  it('should NOT throw when throwOnInvalid is false', () => {
+    const date = createDate('invalid-date');
+
+    expect(date.isValid()).toBe(false);
+  });
+
+  it('should create UTC date when utc is true', () => {
+    const date = createDate('2025-01-01T00:00:00Z', undefined, {
+      utc: true,
+    });
+
+    expect(date.isValid()).toBe(true);
+    expect(date.isUTC()).toBe(true);
+  });
+
+  it('should prioritize UTC over timezone', () => {
+    const date = createDate('2025-01-01T00:00:00Z', undefined, {
+      utc: true,
+      timezone: 'Asia/Kolkata',
+    });
+
+    expect(date.isUTC()).toBe(true);
+  });
+
+  it('should handle timestamp input', () => {
+    const timestamp = Date.now();
+    const date = createDate(timestamp);
+
+    expect(date.isValid()).toBe(true);
+    expect(Math.abs(date.valueOf() - timestamp)).toBeLessThan(5);
+  });
+
+  it('should handle native Date object', () => {
+    const now = new Date();
+    const date = createDate(now);
+
+    expect(date.isValid()).toBe(true);
+    expect(Math.abs(date.valueOf() - now.valueOf())).toBeLessThan(5);
+  });
+
+  it('should apply timezone when provided', () => {
+    const date = createDate('01-01-2025', 'DD-MM-YYYY', {
+      timezone: 'Asia/Kolkata',
+    });
+
+    expect(date.isValid()).toBe(true);
+
+    // avoid fragile string checks; just ensure offset exists
+    expect(typeof date.utcOffset()).toBe('number');
+  });
+
+  it('should default to local time when no options provided', () => {
+    const date = createDate('2025-01-01');
+
+    expect(date.isValid()).toBe(true);
+    expect(date.isUTC()).toBe(false);
+  });
+});

package/src/lib/utils/time/date-creator/createDateFactory/createDateFactory.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+
+import { createDateFactory } from './createDateFactory.js';
+
+// extend test dayjs (important for factory injection tests)
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+
+describe('createDateFactory', () => {
+  it('should create a date with default factory', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate();
+
+    expect(date.isValid()).toBe(true);
+  });
+
+  it('should parse ISO string', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('2025-01-01');
+
+    expect(date.isValid()).toBe(true);
+    expect(date.year()).toBe(2025);
+  });
+
+  it('should parse formatted date', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('01-02-2025', 'DD-MM-YYYY');
+
+    expect(date.isValid()).toBe(true);
+    expect(date.year()).toBe(2025);
+    expect(date.month()).toBe(1);
+  });
+
+  it('should respect strict parsing (valid)', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('01-02-2025', 'DD-MM-YYYY', {
+      strict: true,
+    });
+
+    expect(date.isValid()).toBe(true);
+  });
+
+  it('should respect strict parsing (invalid)', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('1-2-2025', 'DD-MM-YYYY', {
+      strict: true,
+    });
+
+    expect(date.isValid()).toBe(false);
+  });
+
+  it('should throw on invalid date when enabled', () => {
+    const { createDate } = createDateFactory();
+
+    expect(() => createDate('invalid-date', undefined, { throwOnInvalid: true })).toThrow(
+      'Invalid date input',
+    );
+  });
+
+  it('should NOT throw on invalid date when disabled', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('invalid-date');
+
+    expect(date.isValid()).toBe(false);
+  });
+
+  it('should handle UTC mode', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('2025-01-01T00:00:00Z', undefined, {
+      utc: true,
+    });
+
+    expect(date.isUTC()).toBe(true);
+  });
+
+  it('should prioritize UTC over timezone', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('2025-01-01T00:00:00Z', undefined, {
+      utc: true,
+      timezone: 'Asia/Kolkata',
+    });
+
+    expect(date.isUTC()).toBe(true);
+  });
+
+  it('should apply timezone when provided', () => {
+    const { createDate } = createDateFactory();
+
+    const date = createDate('01-01-2025', 'DD-MM-YYYY', {
+      timezone: 'Asia/Kolkata',
+    });
+
+    expect(date.isValid()).toBe(true);
+    expect(typeof date.utcOffset()).toBe('number');
+  });
+
+  it('should handle timestamp input', () => {
+    const { createDate } = createDateFactory();
+
+    const ts = Date.now();
+    const date = createDate(ts);
+
+    expect(date.isValid()).toBe(true);
+    expect(Math.abs(date.valueOf() - ts)).toBeLessThan(5);
+  });
+
+  it('should handle native Date object', () => {
+    const { createDate } = createDateFactory();
+
+    const now = new Date();
+    const date = createDate(now);
+
+    expect(date.isValid()).toBe(true);
+    expect(Math.abs(date.valueOf() - now.valueOf())).toBeLessThan(5);
+  });
+
+  it('should work with custom Dayjs instance', () => {
+    const custom = dayjs;
+
+    const { createDate } = createDateFactory(custom);
+
+    const date = createDate('2025-01-01');
+
+    expect(date.isValid()).toBe(true);
+  });
+
+  it('should return same underlying dayjs instance from factory', () => {
+    const { dayjs: d1 } = createDateFactory();
+    const { dayjs: d2 } = createDateFactory();
+
+    expect(d1).toBe(d2);
+  });
+});

package/dist/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/dist/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 '../../../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';
-
-  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>

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

@@ -1,22 +0,0 @@
-import Button from './Button.svelte';
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;