pika-ux 1.0.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-ux",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "type": "module",
   "exports": {
     "./pika/*": "./src/pika/*",

package/src/app.css

@@ -92,6 +92,7 @@
         --accent-foreground: oklch(0.514 0.146 255.748);
         --destructive: oklch(0.577 0.215 27.311);
         --destructive-foreground: oklch(0.984 0.004 248.227);
+        --destructive-bg: oklch(0.95 0.08 25);
         --ring: var(--bluebright-100);
         --chart-1: oklch(0.646 0.222 41.116);
         --chart-2: oklch(0.6 0.118 184.704);
@@ -108,6 +109,21 @@
         --sidebar-border: oklch(0.873 0.115 95.71);
         --sidebar-ring: oklch(0.623 0.188 259.803);
 
+        /* Extended semantic colors for status/feedback */
+        --success: oklch(0.55 0.16 142);
+        --success-foreground: oklch(0.985 0 0);
+        --success-bg: oklch(0.95 0.05 142);
+        --warning: oklch(0.75 0.15 75);
+        --warning-foreground: oklch(0.2 0.02 45);
+        --warning-bg: oklch(0.95 0.05 75);
+        --info: oklch(0.55 0.15 250);
+        --info-foreground: oklch(0.985 0 0);
+        --info-bg: oklch(0.93 0.05 250);
+        --ai: oklch(0.55 0.2 280);
+        --ai-foreground: oklch(0.985 0 0);
+        --ai-bg: oklch(0.93 0.05 280);
+        --danger-bg: oklch(0.95 0.08 25);
+
         --prominent-50: oklch(0.984 0.018 96.452);
         --prominent-100: oklch(0.959 0.043 96.701);
         --prominent-200: oklch(0.926 0.075 96.972);
@@ -120,6 +136,7 @@
         --prominent-900: oklch(0.359 0.071 95.071);
 
         /* Gray color palette */
+        --gray-25: oklch(0.9901 0.0013 90);
         --gray-50: oklch(0.985 0.002 247.858);
         --gray-100: oklch(0.97 0.005 264.542);
         --gray-200: oklch(0.929 0.013 255.585);
@@ -151,6 +168,7 @@
         --accent-foreground: oklch(0.984 0.004 248.227);
         --destructive: oklch(0.396 0.133 25.712);
         --destructive-foreground: oklch(0.984 0.004 248.227);
+        --destructive-bg: oklch(0.25 0.1 25);
         --ring: oklch(0.625 0.05 253.665);
         --chart-1: oklch(0.488 0.243 264.376);
         --chart-2: oklch(0.696 0.17 162.48);
@@ -166,7 +184,23 @@
         --sidebar-border: oklch(0.712 0.141 92.714);
         --sidebar-ring: oklch(0.623 0.188 259.803);
 
+        /* Extended semantic colors for status/feedback (dark mode) */
+        --success: oklch(0.65 0.18 142);
+        --success-foreground: oklch(0.15 0.02 142);
+        --success-bg: oklch(0.25 0.08 142);
+        --warning: oklch(0.7 0.15 75);
+        --warning-foreground: oklch(0.15 0.02 75);
+        --warning-bg: oklch(0.25 0.08 75);
+        --info: oklch(0.6 0.16 250);
+        --info-foreground: oklch(0.15 0.02 250);
+        --info-bg: oklch(0.25 0.08 250);
+        --ai: oklch(0.6 0.22 280);
+        --ai-foreground: oklch(0.15 0.02 280);
+        --ai-bg: oklch(0.25 0.08 280);
+        --danger-bg: oklch(0.25 0.1 25);
+
         /* Dark mode gray colors */
+        --gray-25: oklch(0.16 0.025 258);
         --gray-50: oklch(0.221 0.022 256.975);
         --gray-100: oklch(0.313 0.032 256.627);
         --gray-200: oklch(0.403 0.041 257.509);
@@ -201,6 +235,7 @@
     --color-accent-foreground: var(--accent-foreground);
     --color-destructive: var(--destructive);
     --color-destructive-foreground: var(--destructive-foreground);
+    --color-destructive-bg: var(--destructive-bg);
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -218,6 +253,21 @@
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
 
+    /* Extended semantic colors for status/feedback */
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-success-bg: var(--success-bg);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-warning-bg: var(--warning-bg);
+    --color-info: var(--info);
+    --color-info-foreground: var(--info-foreground);
+    --color-info-bg: var(--info-bg);
+    --color-ai: var(--ai);
+    --color-ai-foreground: var(--ai-foreground);
+    --color-ai-bg: var(--ai-bg);
+    --color-danger-bg: var(--danger-bg);
+
     /* Custom color palettes */
     --color-gold-50: var(--gold-50);
     --color-gold-100: var(--gold-100);
@@ -296,6 +346,7 @@
     --color-prominent-800: var(--prominent-800);
     --color-prominent-900: var(--prominent-900);
 
+    --color-gray-25: var(--gray-25);
     --color-gray-50: var(--gray-50);
     --color-gray-100: var(--gray-100);
     --color-gray-200: var(--gray-200);

package/src/pika/expandable-container/expandable-container.svelte

@@ -80,18 +80,18 @@ Props:
             const firstStepNotDone = stepsInProcess.steps.find((step) => !step.done);
             if (currentStep?.done) {
                 // This step is done
-                return { iconColor: 'text-green-600', textColor: 'text-gray-600', icon: Check, titleIcon: undefined };
+                return { iconColor: 'text-success', textColor: 'text-muted-foreground', icon: Check, titleIcon: undefined };
             } else if (firstStepNotDone?.stepId === currentStep?.stepId) {
                 // This is the first step that hasn't been done
                 return {
-                    iconColor: 'text-purple-600',
-                    textColor: 'text-gray-600',
+                    iconColor: 'text-ai',
+                    textColor: 'text-muted-foreground',
                     icon: Circle,
                     titleIcon: ArrowBigRight
                 };
             } else {
                 // You can't do this step yet since it's after the current step
-                return { iconColor: 'text-yellow-600', textColor: 'text-gray-400', icon: Minus, titleIcon: undefined };
+                return { iconColor: 'text-warning', textColor: 'text-muted-foreground/60', icon: Minus, titleIcon: undefined };
             }
         }
 

package/src/pika/permanent-toast/permanent-toast.svelte

@@ -14,22 +14,22 @@
     const typeConfig = {
         info: {
             icon: Info,
-            bgColor: 'bg-blue-50',
-            iconColor: 'text-blue-500',
-            borderColor: 'border-blue-100',
+            bgColor: 'bg-info-bg',
+            iconColor: 'text-info',
+            borderColor: 'border-info/20'
         },
         warning: {
             icon: TriangleAlert,
-            bgColor: 'bg-yellow-50',
-            iconColor: 'text-yellow-500',
-            borderColor: 'border-yellow-100',
+            bgColor: 'bg-warning-bg',
+            iconColor: 'text-warning',
+            borderColor: 'border-warning/20'
         },
         error: {
             icon: CircleAlert,
-            bgColor: 'bg-red-50',
-            iconColor: 'text-red-500',
-            borderColor: 'border-red-100',
-        },
+            bgColor: 'bg-danger-bg',
+            iconColor: 'text-destructive',
+            borderColor: 'border-destructive/20'
+        }
     } as const;
 
     const config = typeConfig[type];
@@ -40,7 +40,7 @@
         {#if config.icon}
             <config.icon class="w-5 h-5 {config.iconColor}" />
         {/if}
-        <div class="text-sm text-gray-700">
+        <div class="text-sm text-foreground">
             {@render children?.()}
         </div>
     </div>

package/src/pika/pika-badge/pika-badge.svelte

@@ -7,7 +7,7 @@
                 default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
                 secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
                 destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
-                success: 'bg-green-700 text-white hover:bg-green-700 border-transparent shadow',
+                success: 'bg-success text-success-foreground hover:bg-success/90 border-transparent shadow',
                 outline: 'text-foreground'
             }
         },

package/src/pika/pika-table/pika-table-column-header.svelte

@@ -58,7 +58,7 @@
             <DropdownMenu.Root bind:open={dropdownOpen}>
                 <DropdownMenu.Trigger>
                     {#snippet child({ props })}
-                        <Button {...props} variant="ghost" size="icon" class="data-[state=open]:bg-blue-200 h-8 w-8 p-0 hover:bg-blue-200 {dropdownOpen ? 'bg-blue-200' : ''} ">
+                        <Button {...props} variant="ghost" size="icon" class="data-[state=open]:bg-accent h-8 w-8 p-0 hover:bg-accent {dropdownOpen ? 'bg-accent' : ''} ">
                             <EllipsisVertical class="text-muted-foreground/70 size-3.5" />
                         </Button>
                     {/snippet}

package/src/pika/pika-table/pika-table.svelte

@@ -302,7 +302,7 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
         <Table.Root class="h-full">
             <Table.Header>
                 {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-                    <Table.Row class="sticky top-0 bg-gray-50 shadow-[inset_0_-1px_0_#ededed]">
+                    <Table.Row class="sticky top-0 bg-muted shadow-[inset_0_-1px_0_var(--border)]">
                         {#each headerGroup.headers as header (header.id)}
                             <Table.Head colspan={header.colSpan}>
                                 {#if !header.isPlaceholder}

package/src/pika/pika-tabs/tabs-trigger.svelte

@@ -5,19 +5,40 @@
     let { ref = $bindable(null), class: className, value, ...restProps }: TabsPrimitive.TriggerProps = $props();
 </script>
 
-<!-- 
-    Modified from standard shadcn tabs trigger component:
-    Added 'data-[state=inactive]:hover:text-primary' to provide visual feedback 
-    when hovering over unselected tabs. This changes the text color to the theme's 
-    primary color on hover for better UX, indicating that the tabs are clickable.
+<!--
+    Uses explicit CSS for styling because Tailwind v4's @tailwindcss/vite plugin only generates
+    CSS for classes found in the consuming app's src/ directory. Classes unique to external
+    packages (like this one) won't have CSS generated unless they're also used in the main app.
+    
+    This means Tailwind utility classes from this component only work if the same class is
+    already used somewhere in apps/pika-chat/src/. The CSS block below ensures consistent
+    styling regardless of what classes the consuming app happens to use.
 -->
 
 <TabsPrimitive.Trigger
     bind:ref
     class={cn(
-        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:hover:text-primary inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+        'pika-tab-trigger ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
         className
     )}
     {value}
     {...restProps}
 />
+
+<style>
+    :global(.pika-tab-trigger[data-state='active']) {
+        background-color: var(--card);
+        color: var(--foreground);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        border-bottom: 2px solid var(--primary);
+    }
+
+    :global(.pika-tab-trigger[data-state='inactive']) {
+        color: var(--muted-foreground);
+    }
+
+    :global(.pika-tab-trigger[data-state='inactive']:hover) {
+        color: var(--primary);
+        background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
+    }
+</style>

package/src/pika/tooltip-plus/tooltip-plus.svelte

@@ -11,9 +11,24 @@
         children?: Snippet<[]>;
         delayDuration?: number;
         allowHoverOverTooltip?: boolean;
+        /** Position of the tooltip relative to the trigger */
+        side?: 'top' | 'right' | 'bottom' | 'left';
+        /** Offset from the trigger element in pixels */
+        sideOffset?: number;
+        /** Additional CSS classes to apply to the tooltip content */
+        contentClass?: string;
     }
 
-    const { tooltip, hotKey, children, delayDuration, allowHoverOverTooltip = false }: Props = $props();
+    const {
+        tooltip,
+        hotKey,
+        children,
+        delayDuration,
+        allowHoverOverTooltip = false,
+        side = 'top',
+        sideOffset,
+        contentClass
+    }: Props = $props();
 
     const appState = getContext<AppState>('appState');
     let hideTooltip = $derived(appState.settings.data.hideTooltips || !tooltip);
@@ -25,7 +40,7 @@
             <Tooltip.Trigger>
                 {@render children?.()}
             </Tooltip.Trigger>
-            <Tooltip.Content>
+            <Tooltip.Content {side} {sideOffset} class={contentClass}>
                 {#if typeof tooltip === 'string'}
                     {tooltip}
                 {:else}

package/src/shadcn/command/command-input.svelte

@@ -11,7 +11,8 @@
     <CommandPrimitive.Input
         data-slot="command-input"
         class={cn(
-            'placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50',
+            // PIKA CUSTOMIZATION: Added px-2 for padding inside focus ring (not in upstream shadcn-svelte)
+            'placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent px-2 py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50',
             className
         )}
         bind:ref