pika-ux 1.0.0-beta.8 → 1.0.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 (56) hide show
  1. package/dist/cli/template-files/pnpm-workspace.yaml +3 -3
  2. package/dist/cli/template-files/src/App.svelte +1 -1
  3. package/package.json +13 -13
  4. package/src/.DS_Store +0 -0
  5. package/src/App.svelte +2 -4
  6. package/src/icons/lucide/index.d.ts +397 -40
  7. package/src/pika/confirm-dialog/confirm-dialog.svelte +1 -1
  8. package/src/pika/scrollable-tabs/README.md +192 -0
  9. package/src/pika/scrollable-tabs/add-button.svelte +33 -0
  10. package/src/pika/scrollable-tabs/content.svelte +23 -0
  11. package/src/pika/scrollable-tabs/context.svelte.ts +23 -0
  12. package/src/pika/scrollable-tabs/example.svelte +81 -0
  13. package/src/pika/scrollable-tabs/index.ts +31 -0
  14. package/src/pika/scrollable-tabs/list.svelte +15 -0
  15. package/src/pika/scrollable-tabs/overflow-menu.svelte +119 -0
  16. package/src/pika/scrollable-tabs/pinned-section.svelte +138 -0
  17. package/src/pika/scrollable-tabs/pinned-trigger.svelte +81 -0
  18. package/src/pika/scrollable-tabs/root.svelte +34 -0
  19. package/src/pika/scrollable-tabs/scrollable-section.svelte +120 -0
  20. package/src/pika/scrollable-tabs/trigger.svelte +82 -0
  21. package/src/shadcn/carousel/carousel-content.svelte +36 -31
  22. package/src/shadcn/carousel/carousel-item.svelte +22 -18
  23. package/src/shadcn/carousel/carousel-next.svelte +29 -22
  24. package/src/shadcn/carousel/carousel-previous.svelte +29 -22
  25. package/src/shadcn/carousel/carousel.svelte +77 -73
  26. package/src/shadcn/carousel/context.ts +37 -32
  27. package/src/shadcn/dropdown-menu/dropdown-menu-group.svelte +2 -3
  28. package/src/shadcn/dropdown-menu/dropdown-menu-item.svelte +1 -1
  29. package/src/shadcn/dropdown-menu/dropdown-menu-label.svelte +1 -7
  30. package/src/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte +3 -13
  31. package/src/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte +0 -1
  32. package/src/shadcn/dropdown-menu/dropdown-menu-separator.svelte +1 -7
  33. package/src/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte +2 -13
  34. package/src/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte +0 -1
  35. package/src/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -2
  36. package/src/shadcn/dropdown-menu/dropdown-menu-trigger.svelte +2 -3
  37. package/src/shadcn/dropdown-menu/index.ts +44 -45
  38. package/src/shadcn/dropdown-menu copy/dropdown-menu-checkbox-item.svelte +41 -0
  39. package/src/shadcn/dropdown-menu copy/dropdown-menu-content.svelte +27 -0
  40. package/src/shadcn/dropdown-menu copy/dropdown-menu-group-heading.svelte +22 -0
  41. package/src/shadcn/dropdown-menu copy/dropdown-menu-group.svelte +7 -0
  42. package/src/shadcn/dropdown-menu copy/dropdown-menu-item.svelte +27 -0
  43. package/src/shadcn/dropdown-menu copy/dropdown-menu-label.svelte +24 -0
  44. package/src/shadcn/dropdown-menu copy/dropdown-menu-radio-group.svelte +16 -0
  45. package/src/shadcn/dropdown-menu copy/dropdown-menu-radio-item.svelte +26 -0
  46. package/src/shadcn/dropdown-menu copy/dropdown-menu-separator.svelte +13 -0
  47. package/src/shadcn/dropdown-menu copy/dropdown-menu-shortcut.svelte +20 -0
  48. package/src/shadcn/dropdown-menu copy/dropdown-menu-sub-content.svelte +16 -0
  49. package/src/shadcn/dropdown-menu copy/dropdown-menu-sub-trigger.svelte +29 -0
  50. package/src/shadcn/dropdown-menu copy/dropdown-menu-trigger.svelte +7 -0
  51. package/src/shadcn/spinner/index.ts +1 -0
  52. package/src/shadcn/spinner/spinner.svelte +9 -0
  53. package/src/shadcn/toggle-group/toggle-group.svelte +23 -28
  54. package/src/pika/index.ts +0 -29
  55. package/src/shadcn/index.ts +0 -40
  56. /package/dist/cli/template-files/src/lib/{Counter.svelte → counter.svelte} +0 -0
@@ -0,0 +1,16 @@
1
+ <script lang="ts">
2
+ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
3
+
4
+ let {
5
+ ref = $bindable(null),
6
+ value = $bindable(),
7
+ ...restProps
8
+ }: DropdownMenuPrimitive.RadioGroupProps = $props();
9
+ </script>
10
+
11
+ <DropdownMenuPrimitive.RadioGroup
12
+ bind:ref
13
+ bind:value
14
+ data-slot="dropdown-menu-radio-group"
15
+ {...restProps}
16
+ />
@@ -0,0 +1,26 @@
1
+ <script lang="ts">
2
+ import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
3
+ import CircleIcon from '$icons/lucide/circle';
4
+ import { cn, type WithoutChild } from '../utils.js';
5
+
6
+ let { ref = $bindable(null), class: className, children: childrenProp, ...restProps }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
7
+ </script>
8
+
9
+ <DropdownMenuPrimitive.RadioItem
10
+ bind:ref
11
+ data-slot="dropdown-menu-radio-item"
12
+ class={cn(
13
+ "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
14
+ className
15
+ )}
16
+ {...restProps}
17
+ >
18
+ {#snippet children({ checked })}
19
+ <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
20
+ {#if checked}
21
+ <CircleIcon class="size-2 fill-current" />
22
+ {/if}
23
+ </span>
24
+ {@render childrenProp?.({ checked })}
25
+ {/snippet}
26
+ </DropdownMenuPrimitive.RadioItem>
@@ -0,0 +1,13 @@
1
+ <script lang="ts">
2
+ import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
3
+ import { cn } from '../utils.js';
4
+
5
+ let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
6
+ </script>
7
+
8
+ <DropdownMenuPrimitive.Separator
9
+ bind:ref
10
+ data-slot="dropdown-menu-separator"
11
+ class={cn('bg-border -mx-1 my-1 h-px', className)}
12
+ {...restProps}
13
+ />
@@ -0,0 +1,20 @@
1
+ <script lang="ts">
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import { cn, type WithElementRef } from '../utils.js';
4
+
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ children,
9
+ ...restProps
10
+ }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
11
+ </script>
12
+
13
+ <span
14
+ bind:this={ref}
15
+ data-slot="dropdown-menu-shortcut"
16
+ class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
17
+ {...restProps}
18
+ >
19
+ {@render children?.()}
20
+ </span>
@@ -0,0 +1,16 @@
1
+ <script lang="ts">
2
+ import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
3
+ import { cn } from '../utils.js';
4
+
5
+ let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
6
+ </script>
7
+
8
+ <DropdownMenuPrimitive.SubContent
9
+ bind:ref
10
+ data-slot="dropdown-menu-sub-content"
11
+ class={cn(
12
+ 'bg-popover text-popover-foreground 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-[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 origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
13
+ className
14
+ )}
15
+ {...restProps}
16
+ />
@@ -0,0 +1,29 @@
1
+ <script lang="ts">
2
+ import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
3
+ import ChevronRightIcon from '$icons/lucide/chevron-right';
4
+ import { cn } from '../utils.js';
5
+
6
+ let {
7
+ ref = $bindable(null),
8
+ class: className,
9
+ inset,
10
+ children,
11
+ ...restProps
12
+ }: DropdownMenuPrimitive.SubTriggerProps & {
13
+ inset?: boolean;
14
+ } = $props();
15
+ </script>
16
+
17
+ <DropdownMenuPrimitive.SubTrigger
18
+ bind:ref
19
+ data-slot="dropdown-menu-sub-trigger"
20
+ data-inset={inset}
21
+ class={cn(
22
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
23
+ className
24
+ )}
25
+ {...restProps}
26
+ >
27
+ {@render children?.()}
28
+ <ChevronRightIcon class="ml-auto size-4" />
29
+ </DropdownMenuPrimitive.SubTrigger>
@@ -0,0 +1,7 @@
1
+ <script lang="ts">
2
+ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
3
+
4
+ let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
5
+ </script>
6
+
7
+ <DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
@@ -0,0 +1 @@
1
+ export { default as Spinner } from './spinner.svelte';
@@ -0,0 +1,9 @@
1
+ <script lang="ts">
2
+ import { cn } from '../utils.js';
3
+ import Loader2Icon from '$icons/lucide/loader-circle';
4
+ import type { ComponentProps } from 'svelte';
5
+ type Props = ComponentProps<typeof Loader2Icon>;
6
+ let { class: className, ...restProps }: Props = $props();
7
+ </script>
8
+
9
+ <Loader2Icon role="status" aria-label="Loading" class={cn('size-4 animate-spin', className)} {...restProps} />
@@ -1,41 +1,36 @@
1
1
  <script lang="ts" module>
2
- import { getContext, setContext } from "svelte";
3
- import type { ToggleVariants } from "$ui/shadcn/toggle/index.js";
4
- export function setToggleGroupCtx(props: ToggleVariants) {
5
- setContext("toggleGroup", props);
6
- }
2
+ import { getContext, setContext } from 'svelte';
3
+ import type { ToggleVariants } from '../toggle/index';
4
+ export function setToggleGroupCtx(props: ToggleVariants) {
5
+ setContext('toggleGroup', props);
6
+ }
7
7
 
8
- export function getToggleGroupCtx() {
9
- return getContext<ToggleVariants>("toggleGroup");
10
- }
8
+ export function getToggleGroupCtx() {
9
+ return getContext<ToggleVariants>('toggleGroup');
10
+ }
11
11
  </script>
12
12
 
13
13
  <script lang="ts">
14
- import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
15
- import { cn } from "../utils.js";
14
+ import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
15
+ import { cn } from '../utils.js';
16
16
 
17
- let {
18
- ref = $bindable(null),
19
- value = $bindable(),
20
- class: className,
21
- size = "default",
22
- variant = "default",
23
- ...restProps
24
- }: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
17
+ let {
18
+ ref = $bindable(null),
19
+ value = $bindable(),
20
+ class: className,
21
+ size = 'default',
22
+ variant = 'default',
23
+ ...restProps
24
+ }: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
25
25
 
26
- setToggleGroupCtx({
27
- variant,
28
- size,
29
- });
26
+ setToggleGroupCtx({
27
+ variant,
28
+ size
29
+ });
30
30
  </script>
31
31
 
32
32
  <!--
33
33
  Discriminated Unions + Destructing (required for bindable) do not
34
34
  get along, so we shut typescript up by casting `value` to `never`.
35
35
  -->
36
- <ToggleGroupPrimitive.Root
37
- bind:value={value as never}
38
- bind:ref
39
- class={cn("flex items-center justify-center gap-1", className)}
40
- {...restProps}
41
- />
36
+ <ToggleGroupPrimitive.Root bind:value={value as never} bind:ref class={cn('flex items-center justify-center gap-1', className)} {...restProps} />
package/src/pika/index.ts DELETED
@@ -1,29 +0,0 @@
1
- // Pika UI Components - Non-conflicting exports
2
- export * from './chip';
3
- export * from './combobox';
4
- export * from './confirm-dialog';
5
- export * from './copy-button';
6
- export * from './create-copy-link-button';
7
- export * from './date-picker';
8
- export * from './date-range-picker';
9
- export * from './date-time-picker';
10
- export * from './expandable-container';
11
- export * from './markdown-editor';
12
- export * from './permanent-toast';
13
- export * from './pika-alert';
14
- export * from './pika-badge';
15
- export * from './pika-table';
16
- export * from './popup-help';
17
- export * from './simple-dropdown';
18
- export * from './text-wave-shimmer';
19
- export * from './tooltip-plus';
20
-
21
- // Selective exports to avoid naming conflicts
22
- // List component - renamed to avoid conflict with TabsList
23
- export { List as PikaList, type ListMapping } from './list';
24
-
25
- // Tabs component - only export aliased versions to avoid "Content" and "List" conflicts
26
- export { Tabs, TabsContent, TabsList, TabsTrigger } from './pika-tabs';
27
-
28
- // Slideout component - only export aliased versions to avoid "Content" conflict
29
- export { Slideout, SlideoutContent, SlideoutPanel, SlideoutProvider, useSlideout } from './slideout';
@@ -1,40 +0,0 @@
1
- // shadcn UI Components
2
- export * from './alert';
3
- export * from './avatar';
4
- export * from './badge';
5
- export * from './breadcrumb';
6
- export * from './button';
7
- export * from './calendar';
8
- export * from './card';
9
- export * from './carousel';
10
- export * from './checkbox';
11
- export * from './collapsible';
12
- export * from './command';
13
- export * from './data-table';
14
- export * from './dialog';
15
- export * from './dropdown-menu';
16
- export * from './input';
17
- export * from './label';
18
- export * from './popover';
19
- export * from './radio-group';
20
- export * from './range-calendar';
21
- export * from './resizable';
22
- export * from './scroll-area';
23
- export * from './select';
24
- export * from './separator';
25
- export * from './sheet';
26
- export * from './sidebar';
27
- export * from './skeleton';
28
- export * from './slider';
29
- export * from './sonner';
30
- export * from './switch';
31
- export * from './table';
32
- export * from './tabs';
33
- export * from './textarea';
34
- export * from './toggle';
35
- export * from './toggle-group';
36
- export * from './tooltip';
37
-
38
- // Utilities
39
- export * from './utils';
40
- export * from './is-mobile.svelte';