pika-ux 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/app.css +11 -5
  3. package/src/pika/tooltip-plus/tooltip-plus.svelte +17 -2
  4. package/src/shadcn/command/command-input.svelte +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pika-ux",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  "./pika/*": "./src/pika/*",
package/src/app.css CHANGED
@@ -92,6 +92,7 @@
92
92
  --accent-foreground: oklch(0.514 0.146 255.748);
93
93
  --destructive: oklch(0.577 0.215 27.311);
94
94
  --destructive-foreground: oklch(0.984 0.004 248.227);
95
+ --destructive-bg: oklch(0.95 0.08 25);
95
96
  --ring: var(--bluebright-100);
96
97
  --chart-1: oklch(0.646 0.222 41.116);
97
98
  --chart-2: oklch(0.6 0.118 184.704);
@@ -113,7 +114,7 @@
113
114
  --success-foreground: oklch(0.985 0 0);
114
115
  --success-bg: oklch(0.95 0.05 142);
115
116
  --warning: oklch(0.75 0.15 75);
116
- --warning-foreground: oklch(0.20 0.02 45);
117
+ --warning-foreground: oklch(0.2 0.02 45);
117
118
  --warning-bg: oklch(0.95 0.05 75);
118
119
  --info: oklch(0.55 0.15 250);
119
120
  --info-foreground: oklch(0.985 0 0);
@@ -135,6 +136,7 @@
135
136
  --prominent-900: oklch(0.359 0.071 95.071);
136
137
 
137
138
  /* Gray color palette */
139
+ --gray-25: oklch(0.9901 0.0013 90);
138
140
  --gray-50: oklch(0.985 0.002 247.858);
139
141
  --gray-100: oklch(0.97 0.005 264.542);
140
142
  --gray-200: oklch(0.929 0.013 255.585);
@@ -166,6 +168,7 @@
166
168
  --accent-foreground: oklch(0.984 0.004 248.227);
167
169
  --destructive: oklch(0.396 0.133 25.712);
168
170
  --destructive-foreground: oklch(0.984 0.004 248.227);
171
+ --destructive-bg: oklch(0.25 0.1 25);
169
172
  --ring: oklch(0.625 0.05 253.665);
170
173
  --chart-1: oklch(0.488 0.243 264.376);
171
174
  --chart-2: oklch(0.696 0.17 162.48);
@@ -185,18 +188,19 @@
185
188
  --success: oklch(0.65 0.18 142);
186
189
  --success-foreground: oklch(0.15 0.02 142);
187
190
  --success-bg: oklch(0.25 0.08 142);
188
- --warning: oklch(0.70 0.15 75);
191
+ --warning: oklch(0.7 0.15 75);
189
192
  --warning-foreground: oklch(0.15 0.02 75);
190
193
  --warning-bg: oklch(0.25 0.08 75);
191
- --info: oklch(0.60 0.16 250);
194
+ --info: oklch(0.6 0.16 250);
192
195
  --info-foreground: oklch(0.15 0.02 250);
193
196
  --info-bg: oklch(0.25 0.08 250);
194
- --ai: oklch(0.60 0.22 280);
197
+ --ai: oklch(0.6 0.22 280);
195
198
  --ai-foreground: oklch(0.15 0.02 280);
196
199
  --ai-bg: oklch(0.25 0.08 280);
197
- --danger-bg: oklch(0.25 0.10 25);
200
+ --danger-bg: oklch(0.25 0.1 25);
198
201
 
199
202
  /* Dark mode gray colors */
203
+ --gray-25: oklch(0.16 0.025 258);
200
204
  --gray-50: oklch(0.221 0.022 256.975);
201
205
  --gray-100: oklch(0.313 0.032 256.627);
202
206
  --gray-200: oklch(0.403 0.041 257.509);
@@ -231,6 +235,7 @@
231
235
  --color-accent-foreground: var(--accent-foreground);
232
236
  --color-destructive: var(--destructive);
233
237
  --color-destructive-foreground: var(--destructive-foreground);
238
+ --color-destructive-bg: var(--destructive-bg);
234
239
  --color-border: var(--border);
235
240
  --color-input: var(--input);
236
241
  --color-ring: var(--ring);
@@ -341,6 +346,7 @@
341
346
  --color-prominent-800: var(--prominent-800);
342
347
  --color-prominent-900: var(--prominent-900);
343
348
 
349
+ --color-gray-25: var(--gray-25);
344
350
  --color-gray-50: var(--gray-50);
345
351
  --color-gray-100: var(--gray-100);
346
352
  --color-gray-200: var(--gray-200);
package/src/pika/tooltip-plus/tooltip-plus.svelte CHANGED
@@ -11,9 +11,24 @@
11
11
  children?: Snippet<[]>;
12
12
  delayDuration?: number;
13
13
  allowHoverOverTooltip?: boolean;
14
+ /** Position of the tooltip relative to the trigger */
15
+ side?: 'top' | 'right' | 'bottom' | 'left';
16
+ /** Offset from the trigger element in pixels */
17
+ sideOffset?: number;
18
+ /** Additional CSS classes to apply to the tooltip content */
19
+ contentClass?: string;
14
20
  }
15
21
 
16
- const { tooltip, hotKey, children, delayDuration, allowHoverOverTooltip = false }: Props = $props();
22
+ const {
23
+ tooltip,
24
+ hotKey,
25
+ children,
26
+ delayDuration,
27
+ allowHoverOverTooltip = false,
28
+ side = 'top',
29
+ sideOffset,
30
+ contentClass
31
+ }: Props = $props();
17
32
 
18
33
  const appState = getContext<AppState>('appState');
19
34
  let hideTooltip = $derived(appState.settings.data.hideTooltips || !tooltip);
@@ -25,7 +40,7 @@
25
40
  <Tooltip.Trigger>
26
41
  {@render children?.()}
27
42
  </Tooltip.Trigger>
28
- <Tooltip.Content>
43
+ <Tooltip.Content {side} {sideOffset} class={contentClass}>
29
44
  {#if typeof tooltip === 'string'}
30
45
  {tooltip}
31
46
  {:else}
package/src/shadcn/command/command-input.svelte CHANGED
@@ -11,7 +11,8 @@
11
11
  <CommandPrimitive.Input
12
12
  data-slot="command-input"
13
13
  class={cn(
14
- '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',
14
+ // PIKA CUSTOMIZATION: Added px-2 for padding inside focus ring (not in upstream shadcn-svelte)
15
+ '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',
15
16
  className
16
17
  )}
17
18
  bind:ref