@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/Toggle.stories.svelte

@@ -0,0 +1,93 @@
+<script context="module">
+  import Toggle from './Toggle.svelte';
+
+  export const meta = {
+    title: 'Components/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  let toggleState = false;
+  let disabledToggle = true;
+</script>
+
+<Template let:args>
+  <Toggle {...args} />
+</Template>
+
+<Story
+  name="Default (Unchecked)"
+  args={{
+    checked: false,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Checked"
+  args={{
+    checked: true,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Disabled Unchecked"
+  args={{
+    checked: false,
+    disabled: true,
+  }}
+/>
+
+<Story
+  name="Disabled Checked"
+  args={{
+    checked: true,
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <div class="space-y-4">
+    <div class="flex items-center gap-3">
+      <Toggle bind:checked={toggleState} />
+      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Settings List">
+  <div class="max-w-md space-y-4">
+    <div class="flex items-center justify-between p-4 bg-white rounded-lg border">
+      <div>
+        <div class="font-medium">Email Notifications</div>
+        <div class="text-sm text-gray-500">Receive updates via email</div>
+      </div>
+      <Toggle bind:checked={toggleState} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-white rounded-lg border">
+      <div>
+        <div class="font-medium">Dark Mode</div>
+        <div class="text-sm text-gray-500">Use dark color scheme</div>
+      </div>
+      <Toggle checked={false} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border">
+      <div>
+        <div class="font-medium text-gray-400">Premium Feature</div>
+        <div class="text-sm text-gray-400">Requires subscription</div>
+      </div>
+      <Toggle disabled={true} checked={false} />
+    </div>
+  </div>
+</Story>

package/dist/components/Toggle.stories.svelte.d.ts

@@ -0,0 +1,41 @@
+export namespace meta {
+    export let title: string;
+    export { Toggle as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace checked {
+            let control: string;
+        }
+        namespace disabled {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  ToggleProps */
+/** @typedef {typeof __propDef.events}  ToggleEvents */
+/** @typedef {typeof __propDef.slots}  ToggleSlots */
+export default class Toggle extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+import Toggle from './Toggle.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Toggle.stories.svelte.d.ts.map

package/dist/components/Toggle.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA2FA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;CACC;0BALa,OAAO,SAAS,CAAC,KAAK;2BACtB,OAAO,SAAS,CAAC,MAAM;0BACvB,OAAO,SAAS,CAAC,KAAK;mBA1Ff,iBAAiB;gCAHN,QAAQ;AA0FxC;;;;;;;;;;EAAgF"}

package/dist/components/Toggle.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let checked = false;
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick() {
+    if (!disabled) {
+      checked = !checked;
+      dispatch('change', { checked });
+    }
+  }
+
+  function handleKeydown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  {disabled}
+  class="toggle {checked ? 'toggle-checked' : ''} {disabled ? 'toggle-disabled' : ''}"
+  on:click={handleClick}
+  on:keydown={handleKeydown}
+>
+  <span class="toggle-thumb"></span>
+</button>
+
+<style>
+  .toggle {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    background-color: #d1d5db;
+    border: none;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #3b82f6;
+  }
+
+  .toggle-checked {
+    background-color: #3b82f6;
+  }
+
+  .toggle-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    border-radius: 9999px;
+    transition: transform 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .toggle-checked .toggle-thumb {
+    transform: translateX(20px);
+  }
+</style>

package/dist/components/Toggle.svelte.d.ts

@@ -0,0 +1,32 @@
+/** @typedef {typeof __propDef.props}  ToggleProps */
+/** @typedef {typeof __propDef.events}  ToggleEvents */
+/** @typedef {typeof __propDef.slots}  ToggleSlots */
+export default class Toggle extends SvelteComponent<{
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        checked?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/components/Toggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.svelte.js"],"names":[],"mappings":"AAqCA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;;;;CACC;0BALa,OAAO,SAAS,CAAC,KAAK;2BACtB,OAAO,SAAS,CAAC,MAAM;0BACvB,OAAO,SAAS,CAAC,KAAK;gCAvCJ,QAAQ;AAoCxC;;;;;;;;;;;;;EAAwG"}

package/dist/components/ValidationError.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationError.spec.d.ts.map

package/dist/components/ValidationError.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.spec.d.ts","sourceRoot":"","sources":["../../src/lib/components/ValidationError.spec.js"],"names":[],"mappings":""}

package/dist/components/ValidationError.spec.js

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ValidationError from './ValidationError.svelte';
+
+describe('ValidationError Component', () => {
+  it('renders error message when error prop is provided', () => {
+    const { container, getByText } = render(ValidationError, {
+      props: { error: 'This field is required' },
+    });
+    expect(getByText('This field is required')).toBeTruthy();
+  });
+
+  it('does not render when error is empty', () => {
+    const { container } = render(ValidationError, {
+      props: { error: '' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: false },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('has role="alert" attribute', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('has red text styling', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('text-red-500')).toBe(true);
+  });
+
+  it('renders WarningIcon', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    // The WarningIcon should render an SVG
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('renders error text in a paragraph', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Custom error text' },
+    });
+    const paragraph = container.querySelector('p');
+    expect(paragraph).toBeTruthy();
+    expect(paragraph.textContent).toBe('Custom error text');
+  });
+
+  it('shows when show is true and error exists', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: true },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('flex')).toBe(true);
+    expect(alert.classList.contains('items-center')).toBe(true);
+  });
+});

package/dist/components/ValidationError.stories.svelte

@@ -0,0 +1,88 @@
+<script context="module">
+  import ValidationError from './ValidationError.svelte';
+
+  export const meta = {
+    title: 'Components/ValidationError',
+    component: ValidationError,
+    tags: ['autodocs'],
+    argTypes: {
+      error: { control: 'text' },
+      show: { control: 'boolean' },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+  <ValidationError {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    error: 'This field is required',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Email Validation"
+  args={{
+    error: 'Please enter a valid email address',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Password Validation"
+  args={{
+    error: 'Password must be at least 8 characters',
+    show: true,
+  }}
+/>
+
+<Story name="With Input Field">
+  <div class="max-w-md">
+    <label class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      type="email"
+      class="w-full px-3 py-2 border border-red-300 rounded"
+      value="invalid-email"
+    />
+    <ValidationError error="Please enter a valid email address" show={true} />
+  </div>
+</Story>
+
+<Story name="Multiple Validation Errors">
+  <div class="max-w-md space-y-4">
+    <div>
+      <label class="block text-sm font-medium mb-1">Username</label>
+      <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Username is required" show={true} />
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium mb-1">Email</label>
+      <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Invalid email format" show={true} />
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium mb-1">Password</label>
+      <input type="password" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Password must contain at least one number" show={true} />
+    </div>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <div class="max-w-md">
+    <label class="block text-sm font-medium mb-1">Email</label>
+    <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded" />
+    <ValidationError error="This error is hidden" show={false} />
+    <p class="text-sm text-gray-500 mt-2">Validation error is hidden until field is touched</p>
+  </div>
+</Story>

package/dist/components/ValidationError.stories.svelte.d.ts

@@ -0,0 +1,41 @@
+export namespace meta {
+    export let title: string;
+    export { ValidationError as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace error {
+            let control: string;
+        }
+        namespace show {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  ValidationErrorProps */
+/** @typedef {typeof __propDef.events}  ValidationErrorEvents */
+/** @typedef {typeof __propDef.slots}  ValidationErrorSlots */
+export default class ValidationError extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ValidationErrorProps = typeof __propDef.props;
+export type ValidationErrorEvents = typeof __propDef.events;
+export type ValidationErrorSlots = typeof __propDef.slots;
+import ValidationError from './ValidationError.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ValidationError.stories.svelte.d.ts.map

package/dist/components/ValidationError.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ValidationError.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAqFA,8DAA8D;AAC9D,gEAAgE;AAChE,8DAA8D;AAE9D;;;;;CACC;mCALa,OAAO,SAAS,CAAC,KAAK;oCACtB,OAAO,SAAS,CAAC,MAAM;mCACvB,OAAO,SAAS,CAAC,KAAK;4BApFN,0BAA0B;gCAHxB,QAAQ;AAoFxC;;;;;;;;;;EAAgF"}

package/dist/components/ValidationError.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "./Icons/WarningIcon.svelte";
+
+  export let error = "";
+  export let show = true;
+</script>
+
+{#if error && show}
+  <div
+    transition:slide={{ duration: 300, easing: cubicOut }}
+    class="flex items-center gap-1.5 text-red-500 mt-2"
+    role="alert"
+  >
+    <WarningIcon className="shrink-0" />
+    <p class="text-sm font-medium">{error}</p>
+  </div>
+{/if}

package/dist/components/ValidationError.svelte.d.ts

@@ -0,0 +1,28 @@
+/** @typedef {typeof __propDef.props}  ValidationErrorProps */
+/** @typedef {typeof __propDef.events}  ValidationErrorEvents */
+/** @typedef {typeof __propDef.slots}  ValidationErrorSlots */
+export default class ValidationError extends SvelteComponent<{
+    error?: string | undefined;
+    show?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ValidationErrorProps = typeof __propDef.props;
+export type ValidationErrorEvents = typeof __propDef.events;
+export type ValidationErrorSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        error?: string | undefined;
+        show?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ValidationError.svelte.d.ts.map

package/dist/components/ValidationError.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ValidationError.svelte.js"],"names":[],"mappings":"AA0BA,8DAA8D;AAC9D,gEAAgE;AAChE,8DAA8D;AAE9D;;;;;;CACC;mCALa,OAAO,SAAS,CAAC,KAAK;oCACtB,OAAO,SAAS,CAAC,MAAM;mCACvB,OAAO,SAAS,CAAC,KAAK;gCA5BJ,QAAQ;AAyBxC;;;;;;;;;;;EAAkG"}

package/dist/components/pages/performers/AvailabilityCalendarModal.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AvailabilityCalendarModal.spec.d.ts.map

package/dist/components/pages/performers/AvailabilityCalendarModal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvailabilityCalendarModal.spec.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/AvailabilityCalendarModal.spec.js"],"names":[],"mappings":""}