@getmicdrop/svelte-components 2.6.0 → 2.6.3

package/dist/components/Input/Search.svelte

@@ -1,173 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  // API compatible with flowbite-svelte Search
-  export let value = "";
-  export let placeholder = "Search";
-  export let size = "lg"; // sm, md, lg
-  export let disabled = false;
-  export let id = "";
-  export let name = "";
-
-  // Additional props
-  let className = "";
-  export { className as class };
-
-  const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: "h-8 text-xs pl-8", wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: "h-10 text-sm pl-9", wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: "h-11 text-sm pl-10", wrapper: "h-11" }
-  };
-
-  $: sizeConfig = sizes[size] || sizes.lg;
-
-  function handleInput(event) {
-    value = event.target.value;
-    dispatch("input", event);
-  }
-
-  function handleChange(event) {
-    dispatch("change", event);
-  }
-
-  function handleKeydown(event) {
-    dispatch("keydown", event);
-  }
-
-  function handleKeyup(event) {
-    dispatch("keyup", event);
-  }
-
-  function handleFocus(event) {
-    dispatch("focus", event);
-  }
-
-  function handleBlur(event) {
-    dispatch("blur", event);
-  }
-</script>
-
-<div class="search-wrapper {sizeConfig.wrapper} {className}">
-  <div class="search-icon-wrapper">
-    <svg
-      class="search-icon {sizeConfig.icon}"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  </div>
-  <input
-    type="search"
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    class="search-input {sizeConfig.input}"
-    bind:value
-    on:input={handleInput}
-    on:change={handleChange}
-    on:keydown={handleKeydown}
-    on:keyup={handleKeyup}
-    on:focus={handleFocus}
-    on:blur={handleBlur}
-    {...$$restProps}
-  />
-  {#if $$slots.default}
-    <div class="search-actions">
-      <slot />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .search-wrapper {
-    --search-bg: #f9fafb;
-    --search-text: #0d1526;
-    --search-text-placeholder: #6b7280;
-    --search-border: #e5e7eb;
-    --search-focus-ring: #3b82f6;
-    --search-icon-color: #6b7280;
-    position: relative;
-    width: 100%;
-  }
-
-  .search-icon-wrapper {
-    position: absolute;
-    inset-y: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    padding-left: 0.75rem;
-    pointer-events: none;
-  }
-
-  .search-icon {
-    color: var(--search-icon-color);
-  }
-
-  .search-input {
-    width: 100%;
-    padding-right: 0.75rem;
-    background-color: var(--search-bg);
-    color: var(--search-text);
-    font-weight: 500;
-    border: 1px solid var(--search-border);
-    border-radius: 0.5rem;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  }
-
-  .search-input:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--search-focus-ring);
-    border-color: var(--search-focus-ring);
-  }
-
-  .search-input:hover:not(:focus):not(:disabled) {
-    border-color: var(--search-focus-ring);
-  }
-
-  .search-input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .search-input::-moz-placeholder {
-    color: var(--search-text-placeholder);
-  }
-
-  .search-input::placeholder {
-    color: var(--search-text-placeholder);
-  }
-
-  /* Hide browser's default clear button on search inputs */
-  .search-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  .search-actions {
-    position: absolute;
-    inset-y: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    color: var(--search-icon-color);
-  }
-
-  /* Dark mode overrides */
-  :global(.dark) .search-wrapper {
-    --search-bg: #111827;
-    --search-text: #f7f7f8;
-    --search-text-placeholder: #9ca3af;
-    --search-border: #374151;
-    --search-icon-color: #9ca3af;
-  }
-</style>

package/dist/components/Input/Search.svelte.d.ts

@@ -1,68 +0,0 @@
-export default Search;
-type Search = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    size?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    id?: string | undefined;
-    placeholder?: string | undefined;
-}, {
-    default: {};
-}>, {
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    keydown: CustomEvent<any>;
-    keyup: CustomEvent<any>;
-    focus: CustomEvent<any>;
-    blur: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Search: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    size?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    id?: string | undefined;
-    placeholder?: string | undefined;
-}, {
-    default: {};
-}>, {
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    keydown: CustomEvent<any>;
-    keyup: CustomEvent<any>;
-    focus: CustomEvent<any>;
-    blur: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=Search.svelte.d.ts.map

package/dist/components/Input/Search.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Input/Textarea.svelte

@@ -1,160 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  // API compatible with flowbite-svelte Textarea
-  export let value = "";
-  export let placeholder = "";
-  export let rows = 4;
-  export let disabled = false;
-  export let required = false;
-  export let readonly = false;
-  export let id = "";
-  export let name = "";
-  export let label = "";
-  export let error = "";
-  export let maxlength = null;
-  export let minlength = null;
-
-  // Additional props
-  let className = "";
-  export { className as class };
-
-  function handleInput(event) {
-    value = event.target.value;
-    dispatch("input", { value });
-  }
-
-  function handleChange(event) {
-    dispatch("change", { value: event.target.value });
-  }
-
-  function handleBlur(event) {
-    dispatch("blur", event);
-  }
-
-  function handleFocus(event) {
-    dispatch("focus", event);
-  }
-</script>
-
-<div class="textarea-wrapper">
-  {#if label}
-    <label for={id || name} class="textarea-label">
-      {label}{#if required}<span class="textarea-required">*</span>{/if}
-    </label>
-  {/if}
-
-  <textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {maxlength}
-    {minlength}
-    class="textarea-field {error ? 'textarea-error' : ''} {className}"
-    bind:value
-    on:input={handleInput}
-    on:change={handleChange}
-    on:blur={handleBlur}
-    on:focus={handleFocus}
-    on:keydown
-    on:keyup
-    on:keypress
-    aria-required={required}
-    aria-invalid={!!error}
-    {...$$restProps}
-  ></textarea>
-
-  {#if error}
-    <p class="textarea-error-text">{error}</p>
-  {/if}
-</div>
-
-<style>
-  .textarea-wrapper {
-    --textarea-bg: #f9fafb;
-    --textarea-text: #0d1526;
-    --textarea-text-placeholder: #6b7280;
-    --textarea-border: #e5e7eb;
-    --textarea-border-error: #ff6666;
-    --textarea-focus-ring: #3b82f6;
-    --textarea-label-text: #0d1526;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .textarea-label {
-    color: var(--textarea-label-text);
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  .textarea-required {
-    color: var(--textarea-border-error);
-    font-weight: 500;
-    font-size: 0.875rem;
-    margin-left: 0.125rem;
-  }
-
-  .textarea-field {
-    width: 100%;
-    padding: 0.625rem 0.75rem;
-    background-color: var(--textarea-bg);
-    color: var(--textarea-text);
-    font-size: 0.875rem;
-    line-height: 1.5;
-    border: 1px solid var(--textarea-border);
-    border-radius: 0.5rem;
-    resize: vertical;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  }
-
-  .textarea-field:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--textarea-focus-ring);
-    border-color: var(--textarea-focus-ring);
-  }
-
-  .textarea-field:hover:not(:focus):not(:disabled) {
-    border-color: var(--textarea-focus-ring);
-  }
-
-  .textarea-field:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .textarea-field::-moz-placeholder {
-    color: var(--textarea-text-placeholder);
-  }
-
-  .textarea-field::placeholder {
-    color: var(--textarea-text-placeholder);
-  }
-
-  .textarea-field.textarea-error {
-    border-color: var(--textarea-border-error);
-  }
-
-  .textarea-error-text {
-    margin: 0;
-    color: var(--textarea-border-error);
-    font-size: 0.875rem;
-  }
-
-  /* Dark mode overrides */
-  :global(.dark) .textarea-wrapper {
-    --textarea-bg: #111827;
-    --textarea-text: #f7f7f8;
-    --textarea-text-placeholder: #9ca3af;
-    --textarea-border: #374151;
-    --textarea-label-text: #f7f7f8;
-  }
-</style>

package/dist/components/Input/Textarea.svelte.d.ts

@@ -1,69 +0,0 @@
-export default Textarea;
-type Textarea = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    placeholder?: string | undefined;
-    required?: boolean | undefined;
-    maxlength?: null | undefined;
-    minlength?: null | undefined;
-    readonly?: boolean | undefined;
-    rows?: number | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    blur: CustomEvent<any>;
-    focus: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    placeholder?: string | undefined;
-    required?: boolean | undefined;
-    maxlength?: null | undefined;
-    minlength?: null | undefined;
-    readonly?: boolean | undefined;
-    rows?: number | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    blur: CustomEvent<any>;
-    focus: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/components/Input/Textarea.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;;;;;;;;;;;;;;;mBAA0P;6CAT7M,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Label/Label.svelte

@@ -1,60 +0,0 @@
-<script>
-  // API compatible with flowbite-svelte Label
-  export let color = "gray";
-  export let defaultClass = "text-sm rtl:text-right font-medium block";
-  export let show = true;
-
-  // Additional props for convenience
-  let className = "";
-  export { className as class };
-
-  const colorClasses = {
-    gray: "label-gray",
-    green: "label-green",
-    red: "label-red",
-    disabled: "label-disabled"
-  };
-
-  $: labelClass = `label-wrapper ${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`;
-</script>
-
-{#if show}
-  <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label {...$$restProps} class={labelClass}><slot /></label>
-{:else}
-  <slot />
-{/if}
-
-<style>
-  .label-wrapper {
-    --label-text-gray: #111827;
-    --label-text-green: #047857;
-    --label-text-red: #dc2626;
-    --label-text-disabled: #9ca3af;
-  }
-
-  .label-gray {
-    color: var(--label-text-gray);
-  }
-
-  .label-green {
-    color: var(--label-text-green);
-  }
-
-  .label-red {
-    color: var(--label-text-red);
-  }
-
-  .label-disabled {
-    color: var(--label-text-disabled);
-    filter: grayscale(1) contrast(0.5);
-  }
-
-  /* Dark mode overrides */
-  :global(.dark) .label-wrapper {
-    --label-text-gray: #d1d5db;
-    --label-text-green: #34d399;
-    --label-text-red: #f87171;
-    --label-text-disabled: #6b7280;
-  }
-</style>

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

@@ -1,48 +0,0 @@
-export default Label;
-type Label = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    color?: string | undefined;
-    show?: boolean | undefined;
-    defaultClass?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    color?: string | undefined;
-    show?: boolean | undefined;
-    defaultClass?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=Label.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Label/Label.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgDA;;;;;;;;;;;;eAAyK;sCATnI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Layout/PageLayout.svelte

@@ -1,64 +0,0 @@
-<script>
-  import Breadcrumb from '../Breadcrumb/Breadcrumb.svelte';
-  import Card from '../Card.svelte';
-
-  /**
-   * Breadcrumb navigation data
-   * @type {Array<{name: string, href: string}>}
-   */
-  export let breadcrumb = [];
-
-  /**
-   * Page title displayed below breadcrumb
-   * @type {string}
-   */
-  export let title = '';
-
-  /**
-   * Subtitle displayed below title
-   * @type {string}
-   */
-  export let subtitle = '';
-
-  /**
-   * Layout variant
-   * - 'default': Content with standard padding, no wrapper
-   * - 'card': Content wrapped in Card component with max-width
-   * @type {'default' | 'card'}
-   */
-  export let variant = 'default';
-
-  /**
-   * Max width class for card variant (e.g., 'max-w-4xl', 'max-w-6xl')
-   * @type {string}
-   */
-  export let maxWidth = 'max-w-4xl';
-
-  /**
-   * Additional CSS classes for the content container
-   * @type {string}
-   */
-  export let className = '';
-
-  /**
-   * Whether to show the header (breadcrumb, title, subtitle)
-   * @type {boolean}
-   */
-  export let showHeader = true;
-</script>
-
-{#if showHeader}
-  <nav class="pt-4 px-4 text-text-primary text-lg font-semibold">
-    <Breadcrumb data={breadcrumb} {title} {subtitle} />
-  </nav>
-{/if}
-
-<div class="px-4 pb-20 md:pb-6 {className}">
-  {#if variant === 'card'}
-    <Card className="dark:bg-bg-primary {maxWidth}">
-      <slot />
-    </Card>
-  {:else}
-    <slot />
-  {/if}
-</div>