@finggujadhav/svelte 0.9.0

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@finggujadhav/svelte",
+    "version": "0.9.0",
+    "description": "Svelte adapter for FingguFlux UI library",
+    "main": "dist/index.js",
+    "module": "src/index.ts",
+    "types": "src/index.ts",
+    "scripts": {
+        "build": "echo 'Svelte components do not require pre-build for this release'"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "exports": {
+        ".": {
+            "types": "./src/index.ts",
+            "import": "./src/index.ts"
+        }
+    },
+    "dependencies": {
+        "@finggujadhav/core": "0.9.0",
+        "@finggujadhav/js-helper": "0.9.0"
+    },
+    "peerDependencies": {
+        "svelte": ">=3.0.0"
+    },
+    "devDependencies": {
+        "svelte": "^3.0.0",
+        "typescript": "^5.0.0"
+    }
+}

package/src/Button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" context="module">
+  const VARIANTS = {
+    primary: 'ff-btn-primary',
+    secondary: 'ff-btn-secondary',
+    ghost: 'ff-btn-ghost',
+    outline: 'ff-btn-outline'
+  } as const;
+
+  const SIZES = {
+    sm: 'ff-btn-sm',
+    md: 'ff-btn-md',
+    lg: 'ff-btn-lg'
+  } as const;
+
+  const MOTIONS = {
+    fade: 'ff-fade-in',
+    'slide-up': 'ff-slide-up',
+    'scale-in': 'ff-scale-in',
+    lift: 'ff-hover-lift'
+  } as const;
+
+  export const __ffClasses_Button = [
+    'ff-btn',
+    ...Object.values(VARIANTS),
+    ...Object.values(SIZES),
+    ...Object.values(MOTIONS),
+    'ff-card-glass'
+  ];
+</script>
+
+<script lang="ts">
+  import { useFinggu } from './context';
+  
+  export let variant: keyof typeof VARIANTS = 'primary';
+  export let size: keyof typeof SIZES = 'md';
+  export let motion: keyof typeof MOTIONS | undefined = undefined;
+  export let glass: boolean = false;
+
+  const finggu = useFinggu();
+
+  $: ffClasses = $finggu.resolveAll([
+    'ff-btn',
+    VARIANTS[variant],
+    SIZES[size],
+    glass && 'ff-card-glass',
+    motion && MOTIONS[motion],
+    $$props.class
+  ]);
+</script>
+
+<button class={ffClasses} {...$$restProps}>
+  <slot />
+</button>

package/src/Card.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" context="module">
+  const VARIANTS = {
+    outline: 'ff-card-outline',
+    glass: 'ff-card-glass'
+  } as const;
+
+  const PADDINGS = {
+    none: 'ff-p-0',
+    sm: 'ff-p-2',
+    md: 'ff-p-4',
+    lg: 'ff-p-8'
+  } as const;
+
+  export const __ffClasses_Card = [
+    'ff-card',
+    'ff-card-header',
+    'ff-card-body',
+    ...Object.values(VARIANTS),
+    ...Object.values(PADDINGS)
+  ];
+</script>
+
+<script lang="ts">
+  import { useFinggu } from './context';
+
+  export let variant: keyof typeof VARIANTS | undefined = undefined;
+  export let padding: keyof typeof PADDINGS = 'md';
+
+  const finggu = useFinggu();
+
+  $: ffClasses = $finggu.resolveAll([
+    'ff-card',
+    variant && VARIANTS[variant],
+    PADDINGS[padding],
+    $$props.class
+  ]);
+</script>
+
+<div class={ffClasses} {...$$restProps}>
+  <slot />
+</div>

package/src/Dropdown.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" context="module">
+  export const __ffClasses_Dropdown = [
+    'ff-dropdown',
+    'ff-dropdown-trigger',
+    'ff-dropdown-menu',
+    'ff-dropdown-menu-right',
+    'ff-dropdown-item'
+  ];
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { useFinggu } from './context';
+
+  export let align: 'left' | 'right' = 'left';
+
+  const finggu = useFinggu();
+  let isOpen = false;
+  let container: HTMLElement;
+
+  function toggle() { isOpen = !isOpen; }
+  function close() { isOpen = false; }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (container && !container.contains(event.target as Node)) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    if (typeof document !== 'undefined') {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+  });
+
+  $: ffContainerClasses = $finggu.resolveAll(['ff-dropdown']);
+  $: ffTriggerClasses = $finggu.resolveAll(['ff-dropdown-trigger']);
+  $: ffMenuClasses = $finggu.resolveAll([
+    'ff-dropdown-menu',
+    align === 'right' && 'ff-dropdown-menu-right'
+  ]);
+</script>
+
+<div class={ffContainerClasses} bind:this={container}>
+  <button
+    type="button"
+    class={ffTriggerClasses}
+    on:click={toggle}
+    aria-haspopup="true"
+    aria-expanded={isOpen}
+  >
+    <slot name="trigger" />
+  </button>
+
+  <div
+    class={ffMenuClasses}
+    data-ff-state={isOpen ? 'open' : 'closed'}
+    role="menu"
+    aria-hidden={!isOpen}
+  >
+    <slot />
+  </div>
+</div>

package/src/DropdownItem.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { useFinggu } from './context';
+  const finggu = useFinggu();
+  $: ffClasses = $finggu.resolveAll(['ff-dropdown-item', $$props.class]);
+</script>
+
+<div class={ffClasses} {...$$restProps}>
+  <slot />
+</div>

package/src/Input.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" context="module">
+  export const __ffClasses_Input = [
+    'ff-input',
+    'ff-input-error'
+  ];
+</script>
+
+<script lang="ts">
+  import { useFinggu } from './context';
+
+  export let error: boolean = false;
+
+  const finggu = useFinggu();
+
+  $: ffClasses = $finggu.resolveAll([
+    'ff-input',
+    error && 'ff-input-error',
+    $$props.class
+  ]);
+</script>
+
+<input class={ffClasses} {...$$restProps} />

package/src/Modal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" context="module">
+  export const __ffClasses_Modal = [
+    'ff-modal',
+    'ff-modal-open',
+    'ff-modal-closed',
+    'ff-modal-overlay',
+    'ff-modal-content'
+  ];
+</script>
+
+<script lang="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { useFinggu } from './context';
+
+  export let isOpen: boolean = false;
+
+  const dispatch = createEventDispatcher();
+  const finggu = useFinggu();
+  
+  let mounted = false;
+  let animating = false;
+
+  onMount(() => {
+    mounted = true;
+  });
+
+  $: if (isOpen) {
+    if (typeof document !== 'undefined') {
+      document.body.style.overflow = 'hidden';
+      animating = true;
+    }
+  } else {
+    if (typeof document !== 'undefined') {
+      setTimeout(() => {
+        animating = false;
+        document.body.style.overflow = '';
+      }, 300); // Exit animation duration
+    }
+  }
+
+  $: ffContainerClasses = $finggu.resolveAll([
+    'ff-modal',
+    isOpen ? 'ff-modal-open' : 'ff-modal-closed'
+  ]);
+
+  $: ffContentClasses = $finggu.resolveAll([
+    'ff-modal-content',
+    $$props.class
+  ]);
+</script>
+
+{#if mounted && (isOpen || animating)}
+  <div class={ffContainerClasses} aria-hidden={!isOpen}>
+    <div class="ff-modal-overlay" on:click={() => dispatch('close')} />
+    <div class={ffContentClasses}>
+      <slot />
+    </div>
+  </div>
+{/if}

package/src/TabContent.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { TABS_KEY, type TabsContext } from './tabs-shared';
+
+  export let value: string;
+  const context = getContext<TabsContext>(TABS_KEY);
+
+  $: active = $context?.activeTab ? $context.activeTab : null;
+  $: visible = $active === value;
+</script>
+
+{#if visible}
+  <div class="ff-tab-content" {...$$restProps}>
+    <slot />
+  </div>
+{/if}

package/src/TabList.svelte

@@ -0,0 +1,3 @@
+<div class="ff-tab-list" role="tablist" {...$$restProps}>
+  <slot />
+</div>

package/src/TabTrigger.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { TABS_KEY, type TabsContext } from './tabs-shared';
+  import { useFinggu } from './context';
+
+  export let value: string;
+
+  const finggu = useFinggu();
+  const context = getContext<TabsContext>(TABS_KEY);
+
+  $: isActive = $context?.activeTab ? $context.activeTab : null;
+  $: active = $isActive === value;
+
+  $: ffClasses = $finggu.resolveAll([
+    'ff-tab',
+    active && 'ff-tab-active',
+    $$props.class
+  ]);
+
+  function select() {
+    context?.activeTab.set(value);
+  }
+</script>
+
+<button
+  role="tab"
+  aria-selected={active}
+  class={ffClasses}
+  on:click={select}
+  {...$$restProps}
+>
+  <slot />
+</button>

package/src/Tabs.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { TABS_KEY } from './tabs-shared';
+
+  export let defaultValue: string;
+  const activeTab = writable(defaultValue);
+  setContext(TABS_KEY, { activeTab });
+</script>
+
+<div class="ff-tabs" {...$$restProps}>
+  <slot />
+</div>

package/src/context.ts

@@ -0,0 +1,82 @@
+import { setContext, getContext } from 'svelte';
+import { writable, derived, type Readable } from 'svelte/store';
+import { setTheme, FingguTheme } from '@finggujadhav/js-helper';
+
+export interface FingguMapping {
+    _version?: string;
+    [key: string]: string | undefined;
+}
+
+export interface FingguContextValue {
+    mapping: FingguMapping | null;
+    mode: 'dev' | 'opt' | 'ext';
+    version?: string;
+    theme?: FingguTheme;
+}
+
+const FINGGU_KEY = Symbol('FingguFlux');
+
+/**
+ * Initialize FingguFlux context in a layout or root component.
+ */
+export function setFingguContext(initial: FingguContextValue & { theme?: FingguTheme }) {
+    const theme = initial.theme || 'system';
+    const store = writable<FingguContextValue & { theme: FingguTheme }>({
+        ...initial,
+        theme
+    });
+
+    // Version Guard
+    if (initial.mapping && initial.version && initial.mapping._version && initial.mapping._version !== initial.version) {
+        console.warn(`[FingguFlux] Version Mismatch: mapping.json (${initial.mapping._version}) does not match expected CSS version (${initial.version})`);
+    }
+
+    // Apply theme
+    if (typeof document !== 'undefined') {
+        setTheme(theme);
+    }
+
+    setContext(FINGGU_KEY, store);
+    return store;
+}
+
+/**
+ * useFinggu for class resolution within Svelte components.
+ */
+export function useFinggu() {
+    const store = getContext<Readable<FingguContextValue>>(FINGGU_KEY);
+
+    // Fallback if context is missing (SSR safety or misconfiguration)
+    const fallback: FingguContextValue = { mapping: null, mode: 'dev' };
+
+    return derived(store || writable(fallback), ($finggu) => {
+        const resolve = (className: string): string => {
+            if ($finggu.mode === 'dev' || !$finggu.mapping) return className;
+
+            const mapped = $finggu.mapping[className];
+            if ($finggu.mode === 'ext' && !mapped && className.startsWith('ff-')) {
+                const errorMsg = `[FingguFlux] Critical: Class '${className}' not found in mapping.json in Extreme mode. This will cause broken styles in production.`;
+
+                // SvelteKit dev check
+                // @ts-ignore
+                const isDev = typeof process !== 'undefined' ? process.env.NODE_ENV === 'development' : (import.meta as any).env?.DEV;
+
+                if (isDev) {
+                    throw new Error(errorMsg);
+                } else {
+                    console.error(errorMsg);
+                }
+            }
+            return mapped || className;
+        };
+
+        const resolveAll = (classes: (string | undefined | null | false)[]): string => {
+            return classes
+                .filter(Boolean)
+                .map(c => resolve(c as string))
+                .join(' ');
+        };
+
+        return { resolve, resolveAll, mode: $finggu.mode, theme: $finggu.theme };
+    });
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+export * from './context';
+export * from './tabs-shared';
+
+// Components
+export { default as Button, __ffClasses_Button } from './Button.svelte';
+export { default as Card, __ffClasses_Card } from './Card.svelte';
+export { default as Input, __ffClasses_Input } from './Input.svelte';
+export { default as Modal, __ffClasses_Modal } from './Modal.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as TabTrigger } from './TabTrigger.svelte';
+export { default as TabContent } from './TabContent.svelte';
+export { default as Dropdown, __ffClasses_Dropdown } from './Dropdown.svelte';
+export { default as DropdownItem } from './DropdownItem.svelte';
+
+// Re-export shared for manifest consistency
+export { __ffClasses_Tabs } from './tabs-shared';

package/src/tabs-shared.ts

@@ -0,0 +1,15 @@
+import { writable, type Writable } from 'svelte/store';
+
+export const TABS_KEY = Symbol('FingguTabs');
+
+export interface TabsContext {
+    activeTab: Writable<string>;
+}
+
+export const __ffClasses_Tabs = [
+    'ff-tabs',
+    'ff-tab-list',
+    'ff-tab',
+    'ff-tab-active',
+    'ff-tab-content'
+];