@flowdrop/flowdrop 1.0.0 → 1.1.0

package/dist/components/form/FormFieldLight.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FieldSchema } from './types.js';
+import type { FieldSchema } from "./types.js";
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;

package/dist/components/form/FormFieldWrapper.stories.svelte

@@ -1,53 +1,53 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import FormFieldWrapper from './FormFieldWrapper.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import FormFieldWrapper from "./FormFieldWrapper.svelte";
 
-	const { Story } = defineMeta({
-		title: 'Form/FormFieldWrapper',
-		component: FormFieldWrapper,
-		tags: ['autodocs'],
-		argTypes: {
-			label: { control: 'text' },
-			required: { control: 'boolean' },
-			description: { control: 'text' }
-		},
-		args: {
-			id: 'demo-wrapper',
-			label: 'Field Label'
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Form/FormFieldWrapper",
+    component: FormFieldWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+      label: { control: "text" },
+      required: { control: "boolean" },
+      description: { control: "text" },
+    },
+    args: {
+      id: "demo-wrapper",
+      label: "Field Label",
+    },
+  });
 </script>
 
-<Story name="Default" args={{ label: 'Username' }}>
-	<input
-		type="text"
-		id="demo-wrapper"
-		placeholder="Enter username"
-		style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);"
-	/>
+<Story name="Default" args={{ label: "Username" }}>
+  <input
+    type="text"
+    id="demo-wrapper"
+    placeholder="Enter username"
+    style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);"
+  />
 </Story>
 
 <Story
-	name="With Description"
-	args={{
-		label: 'Email',
-		description: "We'll never share your email with anyone.",
-		required: true
-	}}
+  name="With Description"
+  args={{
+    label: "Email",
+    description: "We'll never share your email with anyone.",
+    required: true,
+  }}
 >
-	<input
-		type="email"
-		id="demo-wrapper"
-		placeholder="email@example.com"
-		style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);"
-	/>
+  <input
+    type="email"
+    id="demo-wrapper"
+    placeholder="email@example.com"
+    style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);"
+  />
 </Story>
 
-<Story name="Required" args={{ label: 'Password', required: true }}>
-	<input
-		type="password"
-		id="demo-wrapper"
-		placeholder="Enter password"
-		style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);"
-	/>
+<Story name="Required" args={{ label: "Password", required: true }}>
+  <input
+    type="password"
+    id="demo-wrapper"
+    placeholder="Enter password"
+    style="width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-lg); font-size: var(--fd-text-sm);"
+  />
 </Story>

package/dist/components/form/FormFieldWrapper.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const FormFieldWrapper: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormFieldWrapper from './FormFieldWrapper.svelte';
+import FormFieldWrapper from "./FormFieldWrapper.svelte";
 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;

package/dist/components/form/FormFieldWrapper.svelte

@@ -10,116 +10,123 @@
 -->
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		/** Field identifier for label association */
-		id: string;
-		/** Display label text */
-		label: string;
-		/** Whether the field is required */
-		required?: boolean;
-		/** Description/help text for the field */
-		description?: string;
-		/** Animation delay in milliseconds */
-		animationDelay?: number;
-		/** Slot content for the field input */
-		children: Snippet;
-	}
-
-	let { id, label, required = false, description, animationDelay = 0, children }: Props = $props();
-
-	/**
-	 * Computed description ID for ARIA association
-	 */
-	const descriptionId = $derived(description ? `${id}-description` : undefined);
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Field identifier for label association */
+    id: string;
+    /** Display label text */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Description/help text for the field */
+    description?: string;
+    /** Animation delay in milliseconds */
+    animationDelay?: number;
+    /** Slot content for the field input */
+    children: Snippet;
+  }
+
+  let {
+    id,
+    label,
+    required = false,
+    description,
+    animationDelay = 0,
+    children,
+  }: Props = $props();
+
+  /**
+   * Computed description ID for ARIA association
+   */
+  const descriptionId = $derived(description ? `${id}-description` : undefined);
 </script>
 
 <div class="form-field" style="animation-delay: {animationDelay}ms">
-	<!-- Field Label -->
-	<label class="form-field__label" for={id}>
-		<span class="form-field__label-text">
-			{label}
-		</span>
-		{#if required}
-			<span class="form-field__required" aria-label="required">*</span>
-		{/if}
-	</label>
-
-	<!-- Field Input Container -->
-	<div class="form-field__input-wrapper">
-		{@render children()}
-	</div>
-
-	<!-- Field Description -->
-	{#if description}
-		<p id={descriptionId} class="form-field__description">
-			{description}
-		</p>
-	{/if}
+  <!-- Field Label -->
+  <label class="form-field__label" for={id}>
+    <span class="form-field__label-text">
+      {label}
+    </span>
+    {#if required}
+      <span class="form-field__required" aria-label="required">*</span>
+    {/if}
+  </label>
+
+  <!-- Field Input Container -->
+  <div class="form-field__input-wrapper">
+    {@render children()}
+  </div>
+
+  <!-- Field Description -->
+  {#if description}
+    <p id={descriptionId} class="form-field__description">
+      {description}
+    </p>
+  {/if}
 </div>
 
 <style>
-	/* ============================================
+  /* ============================================
 	   FIELD CONTAINER
 	   ============================================ */
 
-	.form-field {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		animation: fieldFadeIn 0.3s ease-out forwards;
-		opacity: 0;
-		transform: translateY(4px);
-	}
-
-	@keyframes fieldFadeIn {
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* ============================================
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    animation: fieldFadeIn 0.3s ease-out forwards;
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  @keyframes fieldFadeIn {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ============================================
 	   LABELS
 	   ============================================ */
 
-	.form-field__label {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: var(--fd-foreground);
-		letter-spacing: -0.01em;
-	}
-
-	.form-field__label-text {
-		line-height: 1.4;
-	}
-
-	.form-field__required {
-		color: var(--fd-error);
-		font-weight: 500;
-	}
-
-	/* ============================================
+  .form-field__label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--fd-foreground);
+    letter-spacing: -0.01em;
+  }
+
+  .form-field__label-text {
+    line-height: 1.4;
+  }
+
+  .form-field__required {
+    color: var(--fd-error);
+    font-weight: 500;
+  }
+
+  /* ============================================
 	   INPUT WRAPPER
 	   ============================================ */
 
-	.form-field__input-wrapper {
-		position: relative;
-	}
+  .form-field__input-wrapper {
+    position: relative;
+  }
 
-	/* ============================================
+  /* ============================================
 	   FIELD DESCRIPTION
 	   ============================================ */
 
-	.form-field__description {
-		margin: 0;
-		font-size: var(--fd-text-xs);
-		color: var(--fd-muted-foreground);
-		line-height: 1.5;
-		padding-left: 0.125rem;
-	}
+  .form-field__description {
+    margin: 0;
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    line-height: 1.5;
+    padding-left: 0.125rem;
+  }
 </style>

package/dist/components/form/FormFieldWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 interface Props {
     /** Field identifier for label association */
     id: string;

package/dist/components/form/FormFieldset.svelte

@@ -14,129 +14,129 @@
 -->
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { UISchemaGroup } from '../../types/uischema.js';
-	import Icon from '@iconify/svelte';
+  import type { Snippet } from "svelte";
+  import type { UISchemaGroup } from "../../types/uischema.js";
+  import Icon from "@iconify/svelte";
 
-	interface Props {
-		/** The UISchema Group element to render */
-		group: UISchemaGroup;
-		/** Slot content for the group's child elements */
-		children: Snippet;
-	}
+  interface Props {
+    /** The UISchema Group element to render */
+    group: UISchemaGroup;
+    /** Slot content for the group's child elements */
+    children: Snippet;
+  }
 
-	let { group, children }: Props = $props();
+  let { group, children }: Props = $props();
 
-	const isCollapsible = $derived(group.collapsible !== false);
-	const isDefaultOpen = $derived(group.defaultOpen !== false);
+  const isCollapsible = $derived(group.collapsible !== false);
+  const isDefaultOpen = $derived(group.defaultOpen !== false);
 </script>
 
 {#if isCollapsible}
-	<details class="flowdrop-details form-fieldset" open={isDefaultOpen}>
-		<summary class="flowdrop-details__summary form-fieldset__summary">
-			<div class="form-fieldset__label">
-				<Icon icon="heroicons:chevron-right" class="form-fieldset__chevron" />
-				<span class="form-fieldset__title">{group.label}</span>
-			</div>
-			{#if group.description}
-				<span class="form-fieldset__badge">{group.description}</span>
-			{/if}
-		</summary>
-		<div class="flowdrop-details__content form-fieldset__content">
-			<div class="form-fieldset__fields">
-				{@render children()}
-			</div>
-		</div>
-	</details>
+  <details class="flowdrop-details form-fieldset" open={isDefaultOpen}>
+    <summary class="flowdrop-details__summary form-fieldset__summary">
+      <div class="form-fieldset__label">
+        <Icon icon="heroicons:chevron-right" class="form-fieldset__chevron" />
+        <span class="form-fieldset__title">{group.label}</span>
+      </div>
+      {#if group.description}
+        <span class="form-fieldset__badge">{group.description}</span>
+      {/if}
+    </summary>
+    <div class="flowdrop-details__content form-fieldset__content">
+      <div class="form-fieldset__fields">
+        {@render children()}
+      </div>
+    </div>
+  </details>
 {:else}
-	<fieldset class="form-fieldset form-fieldset--static">
-		<legend class="form-fieldset__legend">{group.label}</legend>
-		{#if group.description}
-			<p class="form-fieldset__description">{group.description}</p>
-		{/if}
-		<div class="form-fieldset__fields">
-			{@render children()}
-		</div>
-	</fieldset>
+  <fieldset class="form-fieldset form-fieldset--static">
+    <legend class="form-fieldset__legend">{group.label}</legend>
+    {#if group.description}
+      <p class="form-fieldset__description">{group.description}</p>
+    {/if}
+    <div class="form-fieldset__fields">
+      {@render children()}
+    </div>
+  </fieldset>
 {/if}
 
 <style>
-	/* ============================================
+  /* ============================================
 	   COLLAPSIBLE FIELDSET
 	   Extends .flowdrop-details from base.css
 	   ============================================ */
 
-	.form-fieldset__summary {
-		gap: var(--fd-space-xs);
-	}
-
-	.form-fieldset__label {
-		display: flex;
-		align-items: center;
-		gap: var(--fd-space-xs);
-	}
-
-	.form-fieldset__title {
-		font-size: var(--fd-text-sm);
-		font-weight: 600;
-		color: var(--fd-foreground);
-	}
-
-	.form-fieldset :global(.form-fieldset__chevron) {
-		width: 1rem;
-		height: 1rem;
-		color: var(--fd-muted-foreground);
-		transition: transform var(--fd-transition-fast);
-		flex-shrink: 0;
-	}
-
-	/* Rotate chevron when details is open */
-	details.form-fieldset[open] :global(.form-fieldset__chevron) {
-		transform: rotate(90deg);
-	}
-
-	.form-fieldset__badge {
-		font-size: var(--fd-text-xs);
-		color: var(--fd-muted-foreground);
-		line-height: 1.4;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 200px;
-	}
-
-	.form-fieldset__content {
-		padding-top: var(--fd-space-xs);
-	}
-
-	.form-fieldset__fields {
-		display: flex;
-		flex-direction: column;
-		gap: var(--fd-space-2xl);
-	}
-
-	/* ============================================
+  .form-fieldset__summary {
+    gap: var(--fd-space-xs);
+  }
+
+  .form-fieldset__label {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+  }
+
+  .form-fieldset__title {
+    font-size: var(--fd-text-sm);
+    font-weight: 600;
+    color: var(--fd-foreground);
+  }
+
+  .form-fieldset :global(.form-fieldset__chevron) {
+    width: 1rem;
+    height: 1rem;
+    color: var(--fd-muted-foreground);
+    transition: transform var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  /* Rotate chevron when details is open */
+  details.form-fieldset[open] :global(.form-fieldset__chevron) {
+    transform: rotate(90deg);
+  }
+
+  .form-fieldset__badge {
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+  }
+
+  .form-fieldset__content {
+    padding-top: var(--fd-space-xs);
+  }
+
+  .form-fieldset__fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fd-space-2xl);
+  }
+
+  /* ============================================
 	   STATIC FIELDSET (non-collapsible)
 	   ============================================ */
 
-	.form-fieldset--static {
-		border: 1px solid var(--fd-border-muted);
-		border-radius: var(--fd-radius-lg);
-		padding: var(--fd-space-xl);
-		margin: 0;
-	}
-
-	.form-fieldset__legend {
-		padding: 0 var(--fd-space-xs);
-		font-size: var(--fd-text-sm);
-		font-weight: 600;
-		color: var(--fd-foreground);
-	}
-
-	.form-fieldset__description {
-		margin: 0 0 var(--fd-space-md) 0;
-		font-size: var(--fd-text-xs);
-		color: var(--fd-muted-foreground);
-		line-height: 1.4;
-	}
+  .form-fieldset--static {
+    border: 1px solid var(--fd-border-muted);
+    border-radius: var(--fd-radius-lg);
+    padding: var(--fd-space-xl);
+    margin: 0;
+  }
+
+  .form-fieldset__legend {
+    padding: 0 var(--fd-space-xs);
+    font-size: var(--fd-text-sm);
+    font-weight: 600;
+    color: var(--fd-foreground);
+  }
+
+  .form-fieldset__description {
+    margin: 0 0 var(--fd-space-md) 0;
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    line-height: 1.4;
+  }
 </style>

package/dist/components/form/FormFieldset.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { UISchemaGroup } from '../../types/uischema.js';
+import type { Snippet } from "svelte";
+import type { UISchemaGroup } from "../../types/uischema.js";
 interface Props {
     /** The UISchema Group element to render */
     group: UISchemaGroup;