@classic-homes/theme-svelte 0.1.0 → 0.1.2

package/dist/lib/components/AlertDialog.svelte

@@ -81,7 +81,7 @@
 
 <AlertDialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   {#if trigger}
-    <AlertDialogPrimitive.Trigger asChild>
+    <AlertDialogPrimitive.Trigger>
       {#snippet child({ props })}
         <span {...props}>
           {@render trigger()}

package/dist/lib/components/DataTable.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts" generics="T extends object">
   /**
    * DataTable - A sortable, accessible data table component
    *

package/dist/lib/components/DataTable.svelte.d.ts

@@ -52,7 +52,7 @@
    */
 import type { DataTableColumn } from '../types/components.js';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends Record<string, unknown>>(): {
+declare function $$render<T extends object>(): {
     props: {
         /** Array of data rows */
         data: T[];
@@ -84,7 +84,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends Record<string, unknown>> {
+declare class __sveltets_Render<T extends object> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -92,12 +92,12 @@ declare class __sveltets_Render<T extends Record<string, unknown>> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataTable: $$IsomorphicComponent;
-type DataTable<T extends Record<string, unknown>> = InstanceType<typeof DataTable<T>>;
+type DataTable<T extends object> = InstanceType<typeof DataTable<T>>;
 export default DataTable;

package/dist/lib/components/Dialog.svelte

@@ -20,6 +20,10 @@
     trigger?: Snippet;
     /** Optional footer element */
     footer?: Snippet;
+    /** Optional header actions (rendered before the close button) */
+    headerActions?: Snippet;
+    /** Whether to show the close button (default: true) */
+    showClose?: boolean;
   }
 
   let {
@@ -31,17 +35,24 @@
     children,
     trigger,
     footer,
+    headerActions,
+    showClose = true,
   }: Props = $props();
 
   function handleOpenChange(newOpen: boolean) {
     open = newOpen;
     onOpenChange?.(newOpen);
   }
+
+  function handleClose() {
+    open = false;
+    onOpenChange?.(false);
+  }
 </script>
 
 <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   {#if trigger}
-    <DialogPrimitive.Trigger asChild>
+    <DialogPrimitive.Trigger>
       {#snippet child({ props })}
         <span {...props}>
           {@render trigger()}
@@ -56,56 +67,74 @@
     />
     <DialogPrimitive.Content
       class={cn(
-        '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',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background 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 overflow-hidden',
         className
       )}
     >
-      {#if title || description}
-        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
-          {#if title}
-            <DialogPrimitive.Title class="text-lg font-semibold leading-none tracking-tight">
-              {title}
-            </DialogPrimitive.Title>
-          {/if}
-          {#if description}
-            <DialogPrimitive.Description class="text-sm text-muted-foreground">
-              {description}
-            </DialogPrimitive.Description>
-          {/if}
+      <!-- Header section with title and actions -->
+      {#if title || description || headerActions || showClose}
+        <div
+          class="flex items-start justify-between gap-4 border-b border-border bg-muted/30 px-6 py-4"
+        >
+          <!-- Title section -->
+          <div class="flex flex-col space-y-1.5 min-w-0 flex-1">
+            {#if title}
+              <DialogPrimitive.Title class="text-lg font-semibold leading-none tracking-tight">
+                {title}
+              </DialogPrimitive.Title>
+            {/if}
+            {#if description}
+              <DialogPrimitive.Description class="text-sm text-muted-foreground">
+                {description}
+              </DialogPrimitive.Description>
+            {/if}
+          </div>
+
+          <!-- Actions section -->
+          <div class="flex items-center gap-1 shrink-0 -mr-2 -mt-1">
+            {#if headerActions}
+              {@render headerActions()}
+            {/if}
+            {#if showClose}
+              <DialogPrimitive.Close
+                class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color] duration-150 ease-in-out hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
+                aria-label="Close dialog"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-5 w-5"
+                >
+                  <path d="M18 6 6 18" />
+                  <path d="m6 6 12 12" />
+                </svg>
+                <span class="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            {/if}
+          </div>
         </div>
       {/if}
 
-      <div class="dialog-content">
+      <!-- Content section -->
+      <div class="dialog-content px-6 py-2">
         {@render children()}
       </div>
 
+      <!-- Footer section -->
       {#if footer}
-        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <div
+          class="flex flex-col-reverse border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2"
+        >
           {@render footer()}
         </div>
       {/if}
-
-      <DialogPrimitive.Close
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-        aria-label="Close dialog"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="h-4 w-4"
-        >
-          <path d="M18 6 6 18" />
-          <path d="m6 6 12 12" />
-        </svg>
-        <span class="sr-only">Close</span>
-      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPrimitive.Portal>
 </DialogPrimitive.Root>

package/dist/lib/components/Dialog.svelte.d.ts

@@ -16,6 +16,10 @@ interface Props {
     trigger?: Snippet;
     /** Optional footer element */
     footer?: Snippet;
+    /** Optional header actions (rendered before the close button) */
+    headerActions?: Snippet;
+    /** Whether to show the close button (default: true) */
+    showClose?: boolean;
 }
 declare const Dialog: import("svelte").Component<Props, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;

package/dist/lib/components/DropdownMenu.svelte

@@ -56,7 +56,7 @@
 </script>
 
 <DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
-  <DropdownMenuPrimitive.Trigger asChild>
+  <DropdownMenuPrimitive.Trigger>
     {#snippet child({ props })}
       <span {...props}>
         {@render trigger()}
@@ -93,8 +93,9 @@
                 disabled={subItem.disabled}
                 onSelect={() => subItem.onSelect?.()}
                 class={cn(
-                  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-                  subItem.destructive && 'text-destructive focus:text-destructive'
+                  'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
+                  subItem.destructive &&
+                    'text-destructive hover:text-destructive focus:text-destructive data-[highlighted]:text-destructive'
                 )}
               >
                 {subItem.label}
@@ -118,8 +119,9 @@
           disabled={item.disabled}
           onSelect={() => item.onSelect?.()}
           class={cn(
-            'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            item.destructive && 'text-destructive focus:text-destructive'
+            'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default',
+            item.destructive &&
+              'text-destructive hover:text-destructive focus:text-destructive data-[highlighted]:text-destructive'
           )}
         >
           {item.label}

package/dist/lib/components/FormField.svelte

@@ -9,8 +9,8 @@
     label: string;
     /** Input ID for association */
     id: string;
-    /** Input type (text, email, password, tel, url, number, textarea) */
-    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'textarea';
+    /** Input type (text, email, password, tel, url, number, date, textarea) */
+    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'date' | 'textarea';
     /** Field value (bindable) */
     value?: string;
     /** Error message */

package/dist/lib/components/FormField.svelte.d.ts

@@ -3,8 +3,8 @@ interface Props {
     label: string;
     /** Input ID for association */
     id: string;
-    /** Input type (text, email, password, tel, url, number, textarea) */
-    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'textarea';
+    /** Input type (text, email, password, tel, url, number, date, textarea) */
+    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'date' | 'textarea';
     /** Field value (bindable) */
     value?: string;
     /** Error message */

package/dist/lib/components/Select.svelte

@@ -33,6 +33,10 @@
     class?: string;
     /** Optional label */
     label?: string;
+    /** Element ID for accessibility */
+    id?: string;
+    /** Error message to display */
+    error?: string;
   }
 
   let {
@@ -45,6 +49,8 @@
     required = false,
     class: className,
     label,
+    id,
+    error,
   }: Props = $props();
 
   // Validate props in development
@@ -111,11 +117,14 @@
   onValueChange={handleValueChange}
 >
   <SelectPrimitive.Trigger
+    {id}
     class={cn(
       '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 [&>span]:line-clamp-1',
+      error && 'border-destructive focus:ring-destructive',
       className
     )}
     aria-label={label || placeholder}
+    aria-invalid={error ? 'true' : undefined}
   >
     <span class={value ? '' : 'text-muted-foreground'}>
       {selectedLabel || placeholder}
@@ -152,8 +161,26 @@
                 value={option.value}
                 label={option.label}
                 disabled={option.disabled}
-                class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
               >
+                {#if option.value === value}
+                  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="h-4 w-4"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  </span>
+                {/if}
                 {option.label}
               </SelectPrimitive.Item>
             {/each}
@@ -163,8 +190,26 @@
             value={item.value}
             label={item.label}
             disabled={item.disabled}
-            class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+            class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors duration-75 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
           >
+            {#if item.value === value}
+              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-4 w-4"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </span>
+            {/if}
             {item.label}
           </SelectPrimitive.Item>
         {/if}
@@ -172,3 +217,9 @@
     </div>
   </SelectPrimitive.Content>
 </SelectPrimitive.Root>
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

package/dist/lib/components/Select.svelte.d.ts

@@ -26,6 +26,10 @@ interface Props {
     class?: string;
     /** Optional label */
     label?: string;
+    /** Element ID for accessibility */
+    id?: string;
+    /** Error message to display */
+    error?: string;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/lib/components/Tooltip.svelte

@@ -30,7 +30,7 @@
 
 <TooltipPrimitive.Provider>
   <TooltipPrimitive.Root {delayDuration}>
-    <TooltipPrimitive.Trigger asChild>
+    <TooltipPrimitive.Trigger>
       {#snippet child({ props })}
         <span {...props} class="inline-flex">
           {@render children()}

package/dist/lib/performance.js

@@ -19,31 +19,8 @@
  * });
  * ```
  */
-// Detect development mode
-const getIsDev = () => {
-    try {
-        // @ts-expect-error - import.meta.env may not exist
-        if (typeof import.meta !== 'undefined' && import.meta.env?.DEV !== undefined) {
-            // @ts-expect-error - accessing env.DEV
-            return import.meta.env.DEV === true;
-        }
-    }
-    catch {
-        // Ignore
-    }
-    try {
-        // @ts-expect-error - process may not exist
-        if (typeof process !== 'undefined' && process.env?.NODE_ENV !== undefined) {
-            // @ts-expect-error - accessing process.env
-            return process.env.NODE_ENV !== 'production';
-        }
-    }
-    catch {
-        // Ignore
-    }
-    return false;
-};
-const isDev = getIsDev();
+import { DEV } from 'esm-env';
+const isDev = DEV;
 const marks = new Map();
 /** Threshold in ms for logging slow operations (1 frame at 60fps) */
 const SLOW_THRESHOLD = 16;

package/dist/lib/types/components.d.ts

@@ -7,16 +7,13 @@
 /**
  * Dropdown Menu Types
  */
-import type { Snippet } from 'svelte';
 export interface DropdownMenuItem {
-    type?: 'item' | 'checkbox' | 'radio' | 'separator' | 'label';
+    type?: 'item' | 'separator' | 'label';
     label?: string;
     value?: string;
     disabled?: boolean;
-    checked?: boolean;
     onSelect?: () => void;
     destructive?: boolean;
-    icon?: Snippet;
     shortcut?: string;
 }
 export interface DropdownMenuGroup {
@@ -67,7 +64,7 @@ export interface FileMetadata {
 /**
  * DataTable Types
  */
-export interface DataTableColumn<T = Record<string, unknown>> {
+export interface DataTableColumn<T = object> {
     /** Unique column identifier */
     id: string;
     /** Column header text */

package/dist/lib/validation.js

@@ -4,34 +4,8 @@
  * These utilities provide development-time warnings for common prop mistakes.
  * They are designed to be tree-shaken in production builds.
  */
-// Detect development mode in a way that works across different environments
-const getIsDev = () => {
-    try {
-        // Vite/SvelteKit environment
-        // @ts-expect-error - import.meta.env may not exist in all environments
-        if (typeof import.meta !== 'undefined' && import.meta.env?.DEV !== undefined) {
-            // @ts-expect-error - accessing env.DEV
-            return import.meta.env.DEV === true;
-        }
-    }
-    catch {
-        // Ignore errors from import.meta access
-    }
-    try {
-        // Node.js environment
-        // @ts-expect-error - process may not exist in browser
-        if (typeof process !== 'undefined' && process.env?.NODE_ENV !== undefined) {
-            // @ts-expect-error - accessing process.env
-            return process.env.NODE_ENV !== 'production';
-        }
-    }
-    catch {
-        // Ignore errors from process access
-    }
-    // Default to false (production mode) if we can't determine
-    return false;
-};
-const isDev = getIsDev();
+import { DEV } from 'esm-env';
+const isDev = DEV;
 /**
  * Validate that a required array prop is non-empty
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",
@@ -43,6 +43,7 @@
     "@classic-homes/theme-tokens": "*",
     "bits-ui": "^1.0.0",
     "clsx": "^2.1.0",
+    "esm-env": "1.2.2",
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.3.0",
     "zod": "^3.23.0"