@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/atoms/message/Message.svelte

@@ -0,0 +1,62 @@
+<!--
+  src/lib/components/ui/message/Message.svelte
+  Message list item with sender, subject, preview, and time.
+
+  Usage:
+  <Message
+    sender="Jane Smith"
+    subject="Meeting Tomorrow"
+    preview="Hey, just wanted to confirm our meeting..."
+    time="2:30 PM"
+    state="active"
+  />
+-->
+<script lang="ts">
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { cn } from '$lib/utils/cn';
+
+  const messageVariants = tv({
+    base: 'flex flex-col gap-1 px-4 py-3 transition-colors cursor-pointer',
+    variants: {
+      state: {
+        default: 'hover:bg-muted/50',
+        hover: 'bg-muted/50',
+        active: 'bg-muted border-l-2 border-primary'
+      }
+    },
+    defaultVariants: {
+      state: 'default'
+    }
+  });
+
+  type State = VariantProps<typeof messageVariants>['state'];
+
+  let {
+    sender,
+    subject,
+    preview,
+    time,
+    state = 'default',
+    class: className = '',
+    ...rest
+  }: {
+    sender: string;
+    subject: string;
+    preview: string;
+    time: string;
+    state?: State;
+    class?: string;
+    [key: string]: unknown;
+  } = $props();
+
+  let classes = $derived(cn(messageVariants({ state }), className));
+</script>
+
+<div class={classes} {...rest}>
+  <div class="flex items-center justify-between gap-2">
+    <span class="text-sm font-semibold text-foreground truncate">{sender}</span>
+    <span class="text-xs text-muted-foreground flex-shrink-0">{time}</span>
+  </div>
+  <p class="text-sm font-medium text-foreground truncate">{subject}</p>
+  <p class="text-xs text-muted-foreground line-clamp-2">{preview}</p>
+</div>

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

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

package/src/registry/atoms/nav/NavItem.svelte

@@ -0,0 +1,67 @@
+<!--
+  src/lib/components/ui/nav/NavItem.svelte
+  Icon-based navigation item with states.
+
+  Usage:
+  <NavItem state="current" href="/dashboard">
+    {#snippet icon()}<HomeIcon />{/snippet}
+  </NavItem>
+-->
+<script lang="ts">
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  const navItemVariants = tv({
+    base: 'inline-flex items-center justify-center h-8 w-8 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    variants: {
+      state: {
+        default: 'rounded-lg bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        hover: 'rounded-lg bg-accent text-accent-foreground',
+        current: 'rounded-full bg-primary text-primary-foreground',
+        focused: 'rounded-lg bg-accent text-accent-foreground ring-2 ring-ring ring-offset-2'
+      }
+    },
+    defaultVariants: {
+      state: 'default'
+    }
+  });
+
+  type State = VariantProps<typeof navItemVariants>['state'];
+
+  let {
+    state = 'default',
+    href = undefined,
+    class: className = '',
+    icon,
+    ...rest
+  }: {
+    state?: State;
+    href?: string | undefined;
+    class?: string;
+    icon?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+
+  let classes = $derived(cn(navItemVariants({ state }), className));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    aria-current={state === 'current' ? 'page' : undefined}
+    {...rest}
+  >
+    {@render icon?.()}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    aria-current={state === 'current' ? 'page' : undefined}
+    {...rest}
+  >
+    {@render icon?.()}
+  </button>
+{/if}

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

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

package/src/registry/atoms/notification-badge/NotificationBadge.svelte

@@ -0,0 +1,30 @@
+<!--
+  src/lib/components/ui/notification-badge/NotificationBadge.svelte
+  Small circular count badge.
+
+  Usage:
+  <NotificationBadge count={5} />
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    count,
+    class: className = '',
+    ...rest
+  }: {
+    count: number;
+    class?: string;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<span
+  class={cn(
+    'inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary text-primary-foreground text-xs font-semibold',
+    className
+  )}
+  {...rest}
+>
+  {count}
+</span>

package/src/registry/atoms/notification-badge/index.ts

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

package/src/registry/atoms/otp-input/OtpInput.svelte

@@ -0,0 +1,108 @@
+<!--
+  src/lib/components/ui/otp-input/OtpInput.svelte
+  OTP code entry with auto-focus behavior.
+
+  Usage:
+  <OtpInput bind:value length={6} onComplete={handleComplete} />
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    length = 6,
+    value = $bindable(''),
+    class: className = '',
+    onComplete,
+    onfocus,
+    onblur,
+    ...rest
+  }: {
+    length?: number;
+    value?: string;
+    class?: string;
+    onComplete?: (value: string) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    [key: string]: unknown;
+  } = $props();
+
+  let inputs: HTMLInputElement[] = $state([]);
+  let digits: string[] = $state([]);
+
+  // Initialize digits from value
+  $effect(() => {
+    digits = value.split('').slice(0, length);
+    while (digits.length < length) digits.push('');
+  });
+
+  // Sync value from digits
+  function updateValue() {
+    value = digits.join('');
+    if (value.length === length && !digits.includes('')) {
+      onComplete?.(value);
+    }
+  }
+
+  function handleInput(index: number, e: Event) {
+    const target = e.target as HTMLInputElement;
+    const char = target.value.replace(/\D/g, '').slice(-1);
+
+    digits[index] = char;
+    digits = digits;
+    updateValue();
+
+    if (char && index < length - 1) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handleKeyDown(index: number, e: KeyboardEvent) {
+    if (e.key === 'Backspace') {
+      if (!digits[index] && index > 0) {
+        inputs[index - 1]?.focus();
+        digits[index - 1] = '';
+        digits = digits;
+        updateValue();
+      } else {
+        digits[index] = '';
+        digits = digits;
+        updateValue();
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      inputs[index - 1]?.focus();
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    e.preventDefault();
+    const pasted = (e.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, length);
+    for (let i = 0; i < length; i++) {
+      digits[i] = pasted[i] || '';
+    }
+    digits = digits;
+    updateValue();
+
+    const focusIndex = Math.min(pasted.length, length - 1);
+    inputs[focusIndex]?.focus();
+  }
+</script>
+
+<div class={cn('flex items-center gap-2', className)} {...rest}>
+  {#each Array(length) as _, i}
+    <input
+      bind:this={inputs[i]}
+      type="text"
+      inputmode="numeric"
+      maxlength="1"
+      value={digits[i] || ''}
+      class="h-10 w-10 rounded-md border border-input bg-background text-center text-sm font-medium shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      oninput={(e) => handleInput(i, e)}
+      onkeydown={(e) => handleKeyDown(i, e)}
+      onpaste={handlePaste}
+      {onfocus}
+      {onblur}
+    />
+  {/each}
+</div>

package/src/registry/atoms/otp-input/index.ts

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

package/src/registry/atoms/select/Select.svelte

@@ -0,0 +1,216 @@
+<!--
+  src/lib/components/ui/select/Select.svelte
+  SHADCN-Svelte Select Component
+
+  AI SYSTEMS: Use this component for dropdown selections.
+  Supports single selection with keyboard navigation and proper accessibility.
+-->
+<script lang="ts">
+  import { ChevronDown, Check } from 'lucide-svelte';
+  import { cn } from '$lib/utils/cn';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const selectTriggerVariants = tv({
+    base: 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    variants: {
+      size: {
+        sm: 'h-8 px-2 text-xs',
+        md: 'h-10 px-3 text-sm',
+        lg: 'h-12 px-4 text-base'
+      }
+    },
+    defaultVariants: {
+      size: 'md'
+    }
+  });
+
+  type SelectSize = VariantProps<typeof selectTriggerVariants>['size'];
+
+  // Component props
+  let {
+    value = $bindable(undefined),
+    placeholder = 'Select an option...',
+    disabled = false,
+    size = 'md',
+    options = [],
+    name = undefined,
+    id = undefined,
+    onchange,
+  }: {
+    value?: string | undefined;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SelectSize;
+    options?: Array<{ value: string; label: string; disabled?: boolean }>;
+    name?: string | undefined;
+    id?: string | undefined;
+    onchange?: (detail: { value: string; option: { value: string; label: string } }) => void;
+  } = $props();
+
+  // Local state
+  let isOpen = $state(false);
+  let triggerElement: HTMLButtonElement;
+  let contentElement: HTMLDivElement;
+
+  // Generate unique ID for accessibility
+  const listboxId = `select-listbox-${Math.random().toString(36).substr(2, 9)}`;
+
+  // Get selected option
+  let selectedOption = $derived(options.find(option => option.value === value));
+
+  // Handle option selection
+  function selectOption(option: { value: string; label: string; disabled?: boolean }) {
+    if (option.disabled) return;
+
+    value = option.value;
+    isOpen = false;
+    onchange?.({ value: option.value, option });
+  }
+
+  // Handle keyboard navigation
+  function handleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        isOpen = !isOpen;
+        break;
+      case 'Escape':
+        isOpen = false;
+        triggerElement?.focus();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (isOpen) {
+          // Focus first non-disabled option
+          const firstOption = contentElement?.querySelector('[role="option"]:not([data-disabled="true"])') as HTMLElement;
+          firstOption?.focus();
+        } else {
+          isOpen = true;
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (isOpen) {
+          // Focus last non-disabled option
+          const opts = contentElement?.querySelectorAll('[role="option"]:not([data-disabled="true"])');
+          const lastOption = opts?.[opts.length - 1] as HTMLElement;
+          lastOption?.focus();
+        } else {
+          isOpen = true;
+        }
+        break;
+    }
+  }
+
+  // Handle option keyboard navigation
+  function handleOptionKeydown(event: KeyboardEvent, option: { value: string; label: string; disabled?: boolean }) {
+    if (option.disabled) return;
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        selectOption(option);
+        triggerElement?.focus();
+        break;
+      case 'Escape':
+        isOpen = false;
+        triggerElement?.focus();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        const nextOption = (event.target as HTMLElement)?.nextElementSibling as HTMLElement;
+        if (nextOption && !nextOption.dataset.disabled) {
+          nextOption.focus();
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        const prevOption = (event.target as HTMLElement)?.previousElementSibling as HTMLElement;
+        if (prevOption && !prevOption.dataset.disabled) {
+          prevOption.focus();
+        }
+        break;
+    }
+  }
+
+  // Close dropdown when clicking outside
+  function handleClickOutside(event: MouseEvent) {
+    if (!triggerElement?.contains(event.target as Node) && !contentElement?.contains(event.target as Node)) {
+      isOpen = false;
+    }
+  }
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div class="relative">
+  <!-- Hidden select for form submission -->
+  {#if name}
+    <select {name} {id} bind:value class="sr-only" tabindex="-1" aria-hidden="true">
+      <option value="">Choose...</option>
+      {#each options as option}
+        <option value={option.value} disabled={option.disabled}>{option.label}</option>
+      {/each}
+    </select>
+  {/if}
+
+  <!-- Select Trigger -->
+  <button
+    bind:this={triggerElement}
+    type="button"
+    class={cn(selectTriggerVariants({ size }))}
+    {disabled}
+    role="combobox"
+    aria-expanded={isOpen}
+    aria-controls={listboxId}
+    aria-haspopup="listbox"
+    aria-label={placeholder}
+    onclick={() => !disabled && (isOpen = !isOpen)}
+    onkeydown={handleKeydown}
+  >
+    <span class="block truncate">
+      {selectedOption?.label || placeholder}
+    </span>
+    <ChevronDown class="h-4 w-4 opacity-50" />
+  </button>
+
+  <!-- Select Content -->
+  {#if isOpen}
+    <div
+      bind:this={contentElement}
+      id={listboxId}
+      class="absolute z-50 min-w-[8rem] w-full overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 top-full mt-1"
+      role="listbox"
+      data-side="bottom"
+    >
+      {#each options as option}
+        <div
+          role="option"
+          tabindex={option.disabled ? -1 : 0}
+          data-disabled={option.disabled || undefined}
+          data-selected={option.value === value || undefined}
+          aria-selected={option.value === value}
+          class={cn(
+            'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
+            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+            option.disabled && 'pointer-events-none opacity-50',
+            option.value === value && 'bg-accent text-accent-foreground'
+          )}
+          onclick={() => selectOption(option)}
+          onkeydown={(e) => handleOptionKeydown(e, option)}
+        >
+          {#if option.value === value}
+            <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+              <Check class="h-4 w-4" />
+            </span>
+          {/if}
+          <span class="block truncate">{option.label}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,6 @@
+/**
+ * src/lib/components/ui/select/index.ts
+ * Select component exports
+ */
+
+export { default as Select } from './Select.svelte';

package/src/registry/atoms/settings-card/SettingsCard.svelte

@@ -0,0 +1,48 @@
+<!--
+  src/lib/components/ui/settings-card/SettingsCard.svelte
+  Settings form card with title, description, content slot, and optional footer.
+
+  Usage:
+  <SettingsCard title="Profile" description="Manage your profile settings.">
+    <Input label="Name" value="John" />
+    {#snippet footer()}<Button>Save changes</Button>{/snippet}
+  </SettingsCard>
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from '$lib/components/ui/card';
+  import type { Snippet } from 'svelte';
+
+  let {
+    title,
+    description = '',
+    class: className = '',
+    children,
+    footer,
+    ...rest
+  }: {
+    title: string;
+    description?: string;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<Card class={className} {...rest}>
+  <CardHeader>
+    <CardTitle>{title}</CardTitle>
+    {#if description}
+      <CardDescription>{description}</CardDescription>
+    {/if}
+  </CardHeader>
+  <CardContent>
+    {@render children?.()}
+  </CardContent>
+  {#if footer}
+    <CardFooter>
+      {@render footer?.()}
+    </CardFooter>
+  {/if}
+</Card>

package/src/registry/atoms/settings-card/index.ts

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

package/src/registry/atoms/sidebar-item/SidebarItem.svelte

@@ -0,0 +1,90 @@
+<!--
+  src/lib/components/ui/sidebar-item/SidebarItem.svelte
+  Sidebar navigation item with icon, text, and optional notification badge.
+
+  Usage:
+  <SidebarItem href="/inbox" state="current" notificationCount={5}>
+    {#snippet icon()}<InboxIcon />{/snippet}
+    Inbox
+  </SidebarItem>
+-->
+<script lang="ts">
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  const sidebarItemVariants = tv({
+    base: 'flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    variants: {
+      state: {
+        default: 'text-muted-foreground hover:bg-muted hover:text-foreground',
+        hover: 'bg-muted text-foreground',
+        current: 'bg-muted text-primary'
+      }
+    },
+    defaultVariants: {
+      state: 'default'
+    }
+  });
+
+  type State = VariantProps<typeof sidebarItemVariants>['state'];
+
+  let {
+    state = 'default',
+    notificationCount = undefined,
+    href = undefined,
+    class: className = '',
+    icon,
+    children,
+    ...rest
+  }: {
+    state?: State;
+    notificationCount?: number | undefined;
+    href?: string | undefined;
+    class?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+
+  let classes = $derived(cn(sidebarItemVariants({ state }), className));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    aria-current={state === 'current' ? 'page' : undefined}
+    {...rest}
+  >
+    <span class="flex-shrink-0 w-4 h-4">
+      {@render icon?.()}
+    </span>
+    <span class="flex-1 truncate">
+      {@render children?.()}
+    </span>
+    {#if notificationCount !== undefined && notificationCount > 0}
+      <span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-primary-foreground text-xs font-semibold">
+        {notificationCount}
+      </span>
+    {/if}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    {...rest}
+  >
+    <span class="flex-shrink-0 w-4 h-4">
+      {@render icon?.()}
+    </span>
+    <span class="flex-1 truncate text-left">
+      {@render children?.()}
+    </span>
+    {#if notificationCount !== undefined && notificationCount > 0}
+      <span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-primary-foreground text-xs font-semibold">
+        {notificationCount}
+      </span>
+    {/if}
+  </button>
+{/if}

package/src/registry/atoms/sidebar-item/index.ts

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