@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/atoms/calendar/Calendar.svelte

@@ -0,0 +1,181 @@
+<!--
+  src/lib/components/ui/calendar/Calendar.svelte
+  Date picker calendar grid.
+
+  Usage:
+  <Calendar bind:selectedDate bind:month bind:year onSelect={handleDateSelect} />
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    selectedDate = $bindable(undefined),
+    month = $bindable(new Date().getMonth()),
+    year = $bindable(new Date().getFullYear()),
+    class: className = '',
+    onSelect,
+    ...rest
+  }: {
+    selectedDate?: Date | undefined;
+    month?: number;
+    year?: number;
+    class?: string;
+    onSelect?: (date: Date) => void;
+    [key: string]: unknown;
+  } = $props();
+
+  const dayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+  let today = $derived(new Date());
+  let todayStr = $derived(`${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`);
+
+  let firstDay = $derived(new Date(year, month, 1));
+  let startDayOfWeek = $derived(firstDay.getDay());
+  let daysInMonth = $derived(new Date(year, month + 1, 0).getDate());
+  let daysInPrevMonth = $derived(new Date(year, month, 0).getDate());
+
+  let monthName = $derived(new Date(year, month).toLocaleString('default', { month: 'long' }));
+
+  interface CalendarDay {
+    date: number;
+    month: number;
+    year: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    key: string;
+  }
+
+  let calendarDays = $derived(buildCalendar(year, month, selectedDate));
+
+  function buildCalendar(y: number, m: number, sel: Date | undefined): CalendarDay[] {
+    const days: CalendarDay[] = [];
+
+    // Previous month trailing days
+    for (let i = startDayOfWeek - 1; i >= 0; i--) {
+      const d = daysInPrevMonth - i;
+      const pm = m === 0 ? 11 : m - 1;
+      const py = m === 0 ? y - 1 : y;
+      days.push({
+        date: d, month: pm, year: py,
+        isCurrentMonth: false,
+        isToday: `${py}-${pm}-${d}` === todayStr,
+        isSelected: isSameDate(sel, py, pm, d),
+        key: `${py}-${pm}-${d}`
+      });
+    }
+
+    // Current month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      days.push({
+        date: d, month: m, year: y,
+        isCurrentMonth: true,
+        isToday: `${y}-${m}-${d}` === todayStr,
+        isSelected: isSameDate(sel, y, m, d),
+        key: `${y}-${m}-${d}`
+      });
+    }
+
+    // Next month leading days
+    const remaining = 42 - days.length;
+    const nm = m === 11 ? 0 : m + 1;
+    const ny = m === 11 ? y + 1 : y;
+    for (let d = 1; d <= remaining; d++) {
+      days.push({
+        date: d, month: nm, year: ny,
+        isCurrentMonth: false,
+        isToday: `${ny}-${nm}-${d}` === todayStr,
+        isSelected: isSameDate(sel, ny, nm, d),
+        key: `${ny}-${nm}-${d}`
+      });
+    }
+
+    return days;
+  }
+
+  function isSameDate(sel: Date | undefined, y: number, m: number, d: number): boolean {
+    if (!sel) return false;
+    return sel.getFullYear() === y && sel.getMonth() === m && sel.getDate() === d;
+  }
+
+  function selectDay(day: CalendarDay) {
+    const newDate = new Date(day.year, day.month, day.date);
+    selectedDate = newDate;
+    month = day.month;
+    year = day.year;
+    onSelect?.(newDate);
+  }
+
+  function prevMonth() {
+    if (month === 0) {
+      month = 11;
+      year -= 1;
+    } else {
+      month -= 1;
+    }
+  }
+
+  function nextMonth() {
+    if (month === 11) {
+      month = 0;
+      year += 1;
+    } else {
+      month += 1;
+    }
+  }
+</script>
+
+<div class={cn('p-3', className)} {...rest}>
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-2">
+    <button
+      type="button"
+      class="inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+      onclick={prevMonth}
+      aria-label="Previous month"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+    <span class="text-sm font-medium">{monthName} {year}</span>
+    <button
+      type="button"
+      class="inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+      onclick={nextMonth}
+      aria-label="Next month"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Day-of-week headers -->
+  <div class="grid grid-cols-7 mb-1">
+    {#each dayLabels as label}
+      <div class="flex items-center justify-center h-8 text-xs text-muted-foreground font-medium">
+        {label}
+      </div>
+    {/each}
+  </div>
+
+  <!-- Day grid -->
+  <div class="grid grid-cols-7">
+    {#each calendarDays as day (day.key)}
+      <button
+        type="button"
+        class={cn(
+          'flex items-center justify-center h-8 w-8 mx-auto rounded text-sm transition-colors',
+          day.isSelected && 'bg-primary text-primary-foreground',
+          !day.isSelected && day.isToday && 'font-bold',
+          !day.isSelected && day.isCurrentMonth && 'text-foreground hover:bg-accent',
+          !day.isSelected && !day.isCurrentMonth && 'text-muted-foreground hover:bg-accent'
+        )}
+        onclick={() => selectDay(day)}
+      >
+        {day.date}
+      </button>
+    {/each}
+  </div>
+</div>

package/src/registry/atoms/calendar/index.ts

@@ -0,0 +1 @@
+export { default as Calendar } from './Calendar.svelte';

package/src/registry/atoms/dialog/Dialog.svelte

@@ -0,0 +1,179 @@
+<!--
+  src/lib/components/ui/dialog/Dialog.svelte
+  SHADCN-Svelte Dialog Component
+
+  AI SYSTEMS: Use this component for modal dialogs.
+  Provides proper focus management, keyboard navigation, and accessibility.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { X } from 'lucide-svelte';
+  import { cn } from '$lib/utils/cn';
+
+  // Component props
+  let {
+    open = $bindable(false),
+    closeOnEscape = true,
+    closeOnClickOutside = true,
+    preventScroll = true,
+    onOpenChange,
+    onClose,
+    children,
+  }: {
+    open?: boolean;
+    closeOnEscape?: boolean;
+    closeOnClickOutside?: boolean;
+    preventScroll?: boolean;
+    onOpenChange?: (detail: { open: boolean }) => void;
+    onClose?: () => void;
+    children?: Snippet;
+  } = $props();
+
+  let dialogElement: HTMLDivElement;
+  let contentElement: HTMLDivElement;
+  let previousActiveElement: Element | null = $state(null);
+  let isAnimating = $state(false);
+
+  // Handle open state changes
+  $effect(() => {
+    if (open) {
+      openDialog();
+    } else {
+      closeDialog();
+    }
+  });
+
+  function openDialog() {
+    if (isAnimating) return;
+
+    previousActiveElement = document.activeElement;
+    isAnimating = true;
+
+    if (preventScroll) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Focus the dialog content after animation
+    setTimeout(() => {
+      contentElement?.focus();
+      isAnimating = false;
+    }, 150);
+  }
+
+  function closeDialog() {
+    if (isAnimating) return;
+
+    isAnimating = true;
+
+    if (preventScroll) {
+      document.body.style.overflow = '';
+    }
+
+    // Restore focus after animation
+    setTimeout(() => {
+      if (previousActiveElement instanceof HTMLElement) {
+        previousActiveElement.focus();
+      }
+      previousActiveElement = null;
+      isAnimating = false;
+    }, 150);
+  }
+
+  // Handle escape key
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && closeOnEscape) {
+      event.preventDefault();
+      handleClose();
+    }
+  }
+
+  // Handle backdrop click
+  function handleBackdropClick(event: MouseEvent) {
+    if (closeOnClickOutside && event.target === dialogElement) {
+      handleClose();
+    }
+  }
+
+  // Close dialog
+  function handleClose() {
+    open = false;
+    onOpenChange?.({ open: false });
+    onClose?.();
+  }
+
+  // Focus trap
+  function handleFocus(event: FocusEvent) {
+    if (!contentElement) return;
+
+    const focusableElements = contentElement.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    const firstFocusable = focusableElements[0] as HTMLElement;
+    const lastFocusable = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+    if (event.target === contentElement) {
+      firstFocusable?.focus();
+    }
+  }
+
+  // Trap focus within dialog
+  function trapFocus(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || !contentElement) return;
+
+    const focusableElements = Array.from(
+      contentElement.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ) as HTMLElement[];
+
+    if (focusableElements.length === 0) return;
+
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      }
+    } else {
+      if (document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+
+  // Cleanup on destroy
+  $effect(() => {
+    return () => {
+      if (preventScroll && open) {
+        document.body.style.overflow = '';
+      }
+    };
+  });
+</script>
+
+{#if open}
+  <!-- Backdrop -->
+  <div
+    bind:this={dialogElement}
+    class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    data-state={open ? 'open' : 'closed'}
+    onclick={handleBackdropClick}
+    onkeydown={handleKeydown}
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+  >
+    <!-- Dialog Content -->
+    <div
+      bind:this={contentElement}
+      class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full"
+      data-state={open ? 'open' : 'closed'}
+    >
+      {@render children?.()}
+    </div>
+  </div>
+{/if}

package/src/registry/atoms/dialog/DialogDescription.svelte

@@ -0,0 +1,16 @@
+<!--
+  src/lib/components/ui/dialog/DialogDescription.svelte
+  SHADCN-Svelte Dialog Description Component
+
+  AI SYSTEMS: Use this component for dialog descriptions and subtitles.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  let { class: className = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<p class={cn('text-sm text-muted-foreground', className)}>
+  {@render children?.()}
+</p>

package/src/registry/atoms/dialog/DialogFooter.svelte

@@ -0,0 +1,16 @@
+<!--
+  src/lib/components/ui/dialog/DialogFooter.svelte
+  SHADCN-Svelte Dialog Footer Component
+
+  AI SYSTEMS: Use this component as the footer area for dialog actions.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  let { class: className = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<div class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}>
+  {@render children?.()}
+</div>

package/src/registry/atoms/dialog/DialogHeader.svelte

@@ -0,0 +1,16 @@
+<!--
+  src/lib/components/ui/dialog/DialogHeader.svelte
+  SHADCN-Svelte Dialog Header Component
+
+  AI SYSTEMS: Use this component as the header area of dialogs.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  let { class: className = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}>
+  {@render children?.()}
+</div>

package/src/registry/atoms/dialog/DialogTitle.svelte

@@ -0,0 +1,16 @@
+<!--
+  src/lib/components/ui/dialog/DialogTitle.svelte
+  SHADCN-Svelte Dialog Title Component
+
+  AI SYSTEMS: Use this component for dialog titles.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  let { class: className = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<h1 class={cn('text-lg font-semibold leading-none tracking-tight', className)}>
+  {@render children?.()}
+</h1>

package/src/registry/atoms/dialog/index.ts

@@ -0,0 +1,10 @@
+/**
+ * src/lib/components/ui/dialog/index.ts
+ * Dialog component exports
+ */
+
+export { default as Dialog } from './Dialog.svelte';
+export { default as DialogHeader } from './DialogHeader.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';

package/src/registry/atoms/icon/BrandIcon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import * as si from 'simple-icons';
+	import { cn } from '@xbg.solutions/frontend-core';
+
+	interface Props {
+		/** Brand name as used by Simple Icons — e.g. "github", "twitter", "figma", "stripe".
+		 *  Full list at https://simpleicons.org  */
+		name: string;
+		/** Width and height in pixels. Default: 16 */
+		size?: number;
+		/** Override the brand color. Defaults to the official brand hex from Simple Icons.
+		 *  Pass "currentColor" to inherit from CSS. */
+		color?: string;
+		class?: string;
+	}
+
+	let { name, size = 16, color, class: className = '' }: Props = $props();
+
+	// Convert "github" → "siGithub", "stripe" → "siStripe", etc.
+	// Also handles multi-word slugs like "githubactions" → "siGithubactions"
+	const iconKey = $derived('si' + name.charAt(0).toUpperCase() + name.slice(1).replace(/-/g, ''));
+	const icon = $derived((si as Record<string, { title: string; path: string; hex: string } | undefined>)[iconKey]);
+	const fillColor = $derived(color ?? (icon ? `#${icon.hex}` : 'currentColor'));
+</script>
+
+{#if icon}
+	<svg
+		role="img"
+		viewBox="0 0 24 24"
+		width={size}
+		height={size}
+		fill={fillColor}
+		class={cn(className)}
+		aria-label={icon.title}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<title>{icon.title}</title>
+		<path d={icon.path} />
+	</svg>
+{:else}
+	<!-- Fallback: grey square placeholder when icon name is not found -->
+	<span
+		class={cn('inline-flex items-center justify-center rounded bg-gray-200 text-gray-400', className)}
+		style="width:{size}px;height:{size}px;font-size:{Math.floor(size * 0.5)}px;"
+		title="Icon not found: {name}"
+	>?</span>
+{/if}

package/src/registry/atoms/icon/DynamicIcon.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import * as Icons from 'lucide-svelte';
+	import { cn } from '@xbg.solutions/frontend-core';
+
+	interface Props {
+		/** Lucide icon name in PascalCase — e.g. "Home", "Settings", "ChevronDown".
+		 *  Full list at https://lucide.dev/icons */
+		name: string;
+		/** Width and height in pixels. Default: 16 */
+		size?: number;
+		/** Stroke width. Default: 2 */
+		strokeWidth?: number;
+		class?: string;
+	}
+
+	let { name, size = 16, strokeWidth = 2, class: className = '' }: Props = $props();
+
+	const icon = $derived((Icons as Record<string, unknown>)[name] as
+		| (new (...args: unknown[]) => unknown)
+		| undefined);
+</script>
+
+{#if icon}
+	<svelte:component
+		this={icon}
+		{size}
+		stroke-width={strokeWidth}
+		class={cn(className)}
+	/>
+{:else}
+	<!-- Fallback: circle with cross when icon name is not found -->
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={cn('text-gray-400', className)}
+		aria-label="Icon not found: {name}"
+	>
+		<circle cx="12" cy="12" r="10" />
+		<path d="m15 9-6 6" />
+		<path d="m9 9 6 6" />
+	</svg>
+{/if}

package/src/registry/atoms/icon/index.ts

@@ -0,0 +1,2 @@
+export { default as DynamicIcon } from './DynamicIcon.svelte';
+export { default as BrandIcon } from './BrandIcon.svelte';

package/src/registry/atoms/legend/Legend.svelte

@@ -0,0 +1,32 @@
+<!--
+  src/lib/components/ui/legend/Legend.svelte
+  Chart legend with colored dots and labels.
+
+  Usage:
+  <Legend items={[{ label: 'Revenue', color: '#3b82f6' }, { label: 'Expenses', color: '#ef4444' }]} />
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    items = [],
+    class: className = '',
+    ...rest
+  }: {
+    items?: Array<{ label: string; color: string }>;
+    class?: string;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<div class={cn('flex flex-wrap items-center gap-4', className)} {...rest}>
+  {#each items as item}
+    <div class="flex items-center gap-2">
+      <span
+        class="h-3 w-3 rounded-full flex-shrink-0"
+        style:background-color={item.color}
+      ></span>
+      <span class="text-sm text-muted-foreground">{item.label}</span>
+    </div>
+  {/each}
+</div>

package/src/registry/atoms/legend/index.ts

@@ -0,0 +1 @@
+export { default as Legend } from './Legend.svelte';

package/src/registry/atoms/menu/MenuItem.svelte

@@ -0,0 +1,85 @@
+<!--
+  src/lib/components/ui/menu/MenuItem.svelte
+  Navigation menu item with direction and state variants.
+
+  Usage:
+  <MenuItem href="/about" direction="horizontal" state="current">About</MenuItem>
+  <MenuItem direction="vertical" showIcon>
+    {#snippet icon()}<SettingsIcon />{/snippet}
+    Settings
+  </MenuItem>
+-->
+<script lang="ts">
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  const menuItemVariants = tv({
+    base: 'inline-flex items-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    variants: {
+      direction: {
+        horizontal: 'text-sm',
+        vertical: 'text-lg'
+      },
+      state: {
+        default: 'text-muted-foreground hover:text-foreground',
+        hover: 'text-foreground',
+        current: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      direction: 'horizontal',
+      state: 'default'
+    }
+  });
+
+  type Direction = VariantProps<typeof menuItemVariants>['direction'];
+  type State = VariantProps<typeof menuItemVariants>['state'];
+
+  let {
+    direction = 'horizontal',
+    showIcon = false,
+    state = 'default',
+    href = undefined,
+    class: className = '',
+    icon,
+    children,
+    ...rest
+  }: {
+    direction?: Direction;
+    showIcon?: boolean;
+    state?: State;
+    href?: string | undefined;
+    class?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+
+  let classes = $derived(cn(menuItemVariants({ direction, state }), className));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    aria-current={state === 'current' ? 'page' : undefined}
+    {...rest}
+  >
+    {#if showIcon}
+      {@render icon?.()}
+    {/if}
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    {...rest}
+  >
+    {#if showIcon}
+      {@render icon?.()}
+    {/if}
+    {@render children?.()}
+  </button>
+{/if}

package/src/registry/atoms/menu/index.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './MenuItem.svelte';