@getmicdrop/svelte-components 5.3.2 → 5.3.6

package/dist/stories/PrimitivesGallery.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const PrimitivesGallery: import("svelte").Component<Record<string, never>, {}, "">;
+type PrimitivesGallery = ReturnType<typeof PrimitivesGallery>;
+export default PrimitivesGallery;
+//# sourceMappingURL=PrimitivesGallery.svelte.d.ts.map

package/dist/stories/PrimitivesGallery.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/PrimitivesGallery.svelte.ts"],"names":[],"mappings":"AAuxBA,QAAA,MAAM,iBAAiB,2DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/stories/RecipesGallery.stories.svelte

@@ -0,0 +1,19 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RecipesGallery from './RecipesGallery.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Visual Galleries/Recipes',
+    component: RecipesGallery,
+    parameters: {
+      layout: 'fullscreen',
+      docs: {
+        description: {
+          component: 'Complete visual gallery of all recipe components (Layer 2) - Domain-agnostic compositions.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="All Recipes" />

package/dist/stories/RecipesGallery.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default RecipesGallery;
+type RecipesGallery = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const RecipesGallery: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import RecipesGallery from './RecipesGallery.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=RecipesGallery.stories.svelte.d.ts.map

package/dist/stories/RecipesGallery.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipesGallery.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/RecipesGallery.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAiCA;;;;mBAA0H;2BA7B7F,yBAAyB;6CAoBT,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/stories/RecipesGallery.svelte

@@ -0,0 +1,441 @@
+<script lang="ts">
+  // ============================================================================
+  // RECIPES VISUAL GALLERY
+  // Displays ALL recipe components (Layer 2) - Domain-agnostic compositions
+  // ============================================================================
+
+  // Feedback
+  import EmptyState from '../recipes/feedback/EmptyState/EmptyState.svelte';
+  import ErrorDisplay from '../recipes/feedback/ErrorDisplay.svelte';
+  import StatusIndicator from '../recipes/feedback/StatusIndicator/StatusIndicator.svelte';
+
+  // Inputs
+  import MultiSelect from '../recipes/inputs/MultiSelect.svelte';
+  import OTPInput from '../recipes/inputs/OTPInput.svelte';
+  import PasswordInput from '../recipes/inputs/PasswordInput.svelte';
+  import PasswordStrengthIndicator from '../recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
+  import Search from '../recipes/inputs/Search.svelte';
+  import SelectDropdown from '../recipes/inputs/SelectDropdown.svelte';
+
+  // Modals
+  import AlertModal from '../recipes/modals/AlertModal.svelte';
+  import ConfirmationModal from '../recipes/modals/ConfirmationModal.svelte';
+  import InputModal from '../recipes/modals/InputModal.svelte';
+  import StatusModal from '../recipes/modals/StatusModal.svelte';
+
+  // Fields
+  import CheckboxField from '../recipes/fields/CheckboxField.svelte';
+  import FormField from '../recipes/fields/FormField.svelte';
+  import RadioGroup from '../recipes/fields/RadioGroup.svelte';
+  import SelectField from '../recipes/fields/SelectField.svelte';
+  import TextareaField from '../recipes/fields/TextareaField.svelte';
+  import ToggleField from '../recipes/fields/ToggleField.svelte';
+
+  // Primitives for demos
+  import Button from '../primitives/Button/Button.svelte';
+  import Card from '../primitives/Card.svelte';
+
+  // State
+  let isDark = $state(false);
+
+  // Modal states
+  let showAlertModal = $state(false);
+  let showConfirmModal = $state(false);
+  let showInputModal = $state(false);
+  let showStatusModal = $state(false);
+  let statusModalType = $state<'success' | 'error' | 'loading'>('success');
+
+  // Input states
+  let otpValue = $state('');
+  let passwordValue = $state('');
+  let searchValue = $state('');
+  let multiSelectValue = $state<string[]>([]);
+  let selectDropdownValue = $state('');
+
+  // Field states
+  let checkboxChecked = $state(false);
+  let toggleChecked = $state(false);
+  let radioValue = $state('');
+  let textareaValue = $state('');
+  let selectFieldValue = $state('');
+  let formFieldValue = $state('');
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  // Section styling
+  const sectionClass = (dark: boolean) =>
+    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
+
+  const headingClass = (dark: boolean) =>
+    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
+
+  const subheadingClass = (dark: boolean) =>
+    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
+
+  // Demo data
+  const multiSelectOptions = [
+    { value: 'react', label: 'React' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'solid', label: 'Solid' },
+  ];
+
+  const selectOptions = [
+    { value: 'sm', label: 'Small' },
+    { value: 'md', label: 'Medium' },
+    { value: 'lg', label: 'Large' },
+    { value: 'xl', label: 'Extra Large' },
+  ];
+
+  const radioOptions = [
+    { value: 'daily', label: 'Daily', description: 'Get updates every day' },
+    { value: 'weekly', label: 'Weekly', description: 'Get updates once a week' },
+    { value: 'monthly', label: 'Monthly', description: 'Get updates once a month' },
+  ];
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-8">
+    <div>
+      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Recipes Gallery</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Domain-agnostic compositions (Layer 2)</p>
+    </div>
+    <button
+      onclick={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
+  <!-- ========== FEEDBACK COMPONENTS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Feedback Components</h2>
+    <p class={subheadingClass(isDark)}>EmptyState, ErrorDisplay, StatusIndicator</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <Card>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">EmptyState</p>
+        <EmptyState
+          title="No items yet"
+          description="Get started by creating your first item"
+        >
+          <Button size="sm">Create Item</Button>
+        </EmptyState>
+      </Card>
+
+      <Card>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">ErrorDisplay</p>
+        <ErrorDisplay
+          title="Something went wrong"
+          message="We couldn't load the data. Please try again."
+        >
+          <Button size="sm" variant="outline">Retry</Button>
+        </ErrorDisplay>
+      </Card>
+    </div>
+
+    <div class="mt-6">
+      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">StatusIndicator</p>
+      <div class="flex flex-wrap gap-6">
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="active" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Active</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="pending" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Pending</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="inactive" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Inactive</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="error" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Error</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="success" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Success</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== FORM FIELDS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Form Fields</h2>
+    <p class={subheadingClass(isDark)}>Composed field components with labels, validation, and help text</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div>
+        <FormField
+          label="Full Name"
+          placeholder="John Doe"
+          helperText="Enter your legal name"
+          bind:value={formFieldValue}
+        />
+      </div>
+
+      <div>
+        <FormField
+          label="Email (with error)"
+          placeholder="email@example.com"
+          error="Please enter a valid email address"
+        />
+      </div>
+
+      <div>
+        <SelectField
+          label="Size"
+          options={selectOptions}
+          bind:value={selectFieldValue}
+          placeholder="Choose a size"
+        />
+      </div>
+
+      <div>
+        <TextareaField
+          label="Bio"
+          placeholder="Tell us about yourself..."
+          bind:value={textareaValue}
+          helperText="Maximum 500 characters"
+        />
+      </div>
+    </div>
+
+    <div class="mt-6 space-y-4">
+      <CheckboxField
+        label="I agree to the terms and conditions"
+        description="You must agree to continue"
+        bind:checked={checkboxChecked}
+      />
+
+      <ToggleField
+        label="Enable notifications"
+        description="Receive email updates about your account"
+        bind:checked={toggleChecked}
+      />
+
+      <div class="max-w-md">
+        <RadioGroup
+          label="Update frequency"
+          options={radioOptions}
+          bind:value={radioValue}
+        />
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== SPECIAL INPUTS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Special Inputs</h2>
+    <p class={subheadingClass(isDark)}>Password, OTP, Search, MultiSelect, SelectDropdown</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">PasswordInput</p>
+        <PasswordInput
+          label="Password"
+          placeholder="Enter password"
+          bind:value={passwordValue}
+        />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">PasswordStrengthIndicator</p>
+        <PasswordStrengthIndicator password={passwordValue} />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">OTPInput (6 digits)</p>
+        <OTPInput
+          length={6}
+          bind:value={otpValue}
+        />
+        <p class="text-sm text-gray-500 mt-2">Value: {otpValue || '(empty)'}</p>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Search</p>
+        <Search
+          placeholder="Search..."
+          bind:value={searchValue}
+        />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">MultiSelect</p>
+        <MultiSelect
+          label="Frameworks"
+          options={multiSelectOptions}
+          bind:selected={multiSelectValue}
+          placeholder="Select frameworks"
+        />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">SelectDropdown</p>
+        <SelectDropdown
+          label="Priority"
+          options={[
+            { value: 'low', label: 'Low Priority' },
+            { value: 'medium', label: 'Medium Priority' },
+            { value: 'high', label: 'High Priority' },
+          ]}
+          bind:value={selectDropdownValue}
+        />
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== MODALS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Modals</h2>
+    <p class={subheadingClass(isDark)}>AlertModal, ConfirmationModal, InputModal, StatusModal</p>
+
+    <div class="flex flex-wrap gap-4">
+      <Button onclick={() => showAlertModal = true}>
+        Open AlertModal
+      </Button>
+
+      <Button variant="alternative" onclick={() => showConfirmModal = true}>
+        Open ConfirmationModal
+      </Button>
+
+      <Button variant="outline" onclick={() => showInputModal = true}>
+        Open InputModal
+      </Button>
+
+      <Button variant="ghost" onclick={() => {
+        statusModalType = 'success';
+        showStatusModal = true;
+        setTimeout(() => showStatusModal = false, 2000);
+      }}>
+        StatusModal (Success)
+      </Button>
+
+      <Button variant="ghost" onclick={() => {
+        statusModalType = 'error';
+        showStatusModal = true;
+        setTimeout(() => showStatusModal = false, 2000);
+      }}>
+        StatusModal (Error)
+      </Button>
+
+      <Button variant="ghost" onclick={() => {
+        statusModalType = 'loading';
+        showStatusModal = true;
+        setTimeout(() => showStatusModal = false, 2000);
+      }}>
+        StatusModal (Loading)
+      </Button>
+    </div>
+  </section>
+
+  <!-- AlertModal -->
+  <AlertModal
+    bind:open={showAlertModal}
+    title="Alert"
+    message="This is an alert message that requires your attention."
+    confirmText="OK"
+    onconfirm={() => showAlertModal = false}
+  />
+
+  <!-- ConfirmationModal -->
+  <ConfirmationModal
+    bind:open={showConfirmModal}
+    title="Confirm Action"
+    message="Are you sure you want to proceed? This action cannot be undone."
+    confirmText="Yes, proceed"
+    cancelText="Cancel"
+    onconfirm={() => {
+      showConfirmModal = false;
+      console.log('Confirmed!');
+    }}
+    oncancel={() => showConfirmModal = false}
+  />
+
+  <!-- InputModal -->
+  <InputModal
+    bind:open={showInputModal}
+    title="Enter Information"
+    label="Name"
+    placeholder="Enter your name"
+    confirmText="Submit"
+    onconfirm={(value) => {
+      console.log('Submitted:', value);
+      showInputModal = false;
+    }}
+    oncancel={() => showInputModal = false}
+  />
+
+  <!-- StatusModal -->
+  <StatusModal
+    bind:open={showStatusModal}
+    type={statusModalType}
+    title={statusModalType === 'loading' ? 'Processing...' : statusModalType === 'success' ? 'Success!' : 'Error'}
+    message={statusModalType === 'loading' ? 'Please wait...' : statusModalType === 'success' ? 'Operation completed successfully.' : 'Something went wrong.'}
+  />
+
+  <!-- ========== COMMON PATTERNS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Common Recipe Patterns</h2>
+    <p class={subheadingClass(isDark)}>How recipes compose together</p>
+
+    <div class="space-y-6">
+      <Card>
+        <h4 class="font-medium mb-4">Registration Form Pattern</h4>
+        <div class="space-y-4 max-w-md">
+          <FormField
+            label="Email"
+            type="email"
+            placeholder="email@example.com"
+          />
+          <PasswordInput
+            label="Password"
+            placeholder="Create a password"
+            bind:value={passwordValue}
+          />
+          <PasswordStrengthIndicator password={passwordValue} />
+          <CheckboxField
+            label="I agree to the Terms of Service"
+          />
+          <Button size="full">Create Account</Button>
+        </div>
+      </Card>
+
+      <Card>
+        <h4 class="font-medium mb-4">Settings Form Pattern</h4>
+        <div class="space-y-4 max-w-md">
+          <ToggleField
+            label="Email notifications"
+            description="Receive updates via email"
+          />
+          <ToggleField
+            label="Push notifications"
+            description="Receive mobile push notifications"
+          />
+          <SelectField
+            label="Language"
+            options={[
+              { value: 'en', label: 'English' },
+              { value: 'es', label: 'Spanish' },
+              { value: 'fr', label: 'French' },
+            ]}
+            placeholder="Select language"
+          />
+          <div class="flex justify-end gap-2 pt-4">
+            <Button variant="ghost">Cancel</Button>
+            <Button>Save Changes</Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </section>
+</div>

package/dist/stories/RecipesGallery.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const RecipesGallery: import("svelte").Component<Record<string, never>, {}, "">;
+type RecipesGallery = ReturnType<typeof RecipesGallery>;
+export default RecipesGallery;
+//# sourceMappingURL=RecipesGallery.svelte.d.ts.map

package/dist/stories/RecipesGallery.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/RecipesGallery.svelte.ts"],"names":[],"mappings":"AAoXA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.3.2",
+  "version": "5.3.6",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -145,7 +145,7 @@
     "filepond-plugin-image-preview": "^4.6.12",
     "jwt-decode": "^4.0.0",
     "sortablejs": "^1.15.6",
-    "svelte-easy-crop": "^3.0.0",
+    "svelte-easy-crop": "^5.0.0",
     "svelte-filepond": "^0.2.2",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.4",
@@ -166,6 +166,7 @@
     "@sveltejs/kit": "^2.49.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@tailwindcss/forms": "^0.5.11",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/svelte": "^5.2.0",
     "@types/cookie": "^1.0.0",