pika-ux 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-ux",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "exports": {
     "./pika/*": "./src/pika/*",
@@ -29,14 +29,21 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.13",
     "@tsconfig/svelte": "^5.0.5",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.7",
     "@types/fs-extra": "^11.0.4",
     "@types/indefinite": "^2.3.4",
     "@types/inquirer": "^9.0.8",
     "@types/node": "^22.15.17",
     "@types/semver": "^7.7.0",
     "bits-ui": "^1.8.0",
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
     "eslint": "^9.26.0",
+    "layerchart": "^2.0.0-next.42",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.1",
     "tailwindcss": "^4.1.11",

package/src/icons/lucide/index.d.ts

@@ -1256,6 +1256,13 @@ declare module '$icons/lucide/bird' {
   export default component;
 }
 
+declare module '$icons/lucide/birdhouse' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/bitcoin' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';
@@ -5029,6 +5036,13 @@ declare module '$icons/lucide/gamepad-2' {
   export default component;
 }
 
+declare module '$icons/lucide/gamepad-directional' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/gauge' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';
@@ -7038,6 +7052,13 @@ declare module '$icons/lucide/monitor-check' {
   export default component;
 }
 
+declare module '$icons/lucide/monitor-cloud' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/monitor-cog' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';
@@ -7129,6 +7150,13 @@ declare module '$icons/lucide/moon-star' {
   export default component;
 }
 
+declare module '$icons/lucide/motorbike' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/mountain' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';

package/src/pika/copy-button/copy-button.svelte

@@ -21,9 +21,11 @@
 
         /** When provided, this is the title of the button */
         title?: string;
+
+        size?: 'small' | 'medium';
     }
 
-    const { children, value: propValue, embedded = false, truncateAfter = 0, showTextAsLink = false, linkCallbackFn, title }: Props = $props();
+    const { children, value: propValue, embedded = false, truncateAfter = 0, showTextAsLink = false, linkCallbackFn, title, size = 'medium' }: Props = $props();
 
     let hiddenRef = $state<HTMLElement>() as HTMLElement;
     let value: string | undefined = $state(undefined);
@@ -118,16 +120,16 @@
 
 <span class="inline-flex w-fit items-center {embedded ? '' : 'border border-gray-200 rounded-sm'}">
     {#if showTextAsLink}
-        <Button class="p-0" variant="link" onclick={() => linkCallbackFn?.()}>{buttonTitle}</Button>
+        <Button class="p-0 {size === 'small' ? 'text-xs' : ''}" variant="link" onclick={() => linkCallbackFn?.()}>{buttonTitle}</Button>
     {:else}
-        <span class={embedded ? '' : 'border-r border-gray-200 px-2'}>{buttonTitle}</span>
+        <span class="{embedded ? '' : 'border-r border-gray-200 px-2'} {size === 'small' ? 'text-xs' : ''}">{buttonTitle}</span>
     {/if}
-    <span class="w-6 h-6 flex items-center justify-center">
+    <span class="{size === 'small' ? 'w-4 h-4 ml-1' : 'w-6 h-6'} flex items-center justify-center">
         {#if showCheckmark}
-            <Check class="w-3.5 h-3.5 text-green-500" />
+            <Check class="{size === 'small' ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5'} text-green-500" />
         {:else}
             <Button variant="ghost" class="h-full w-full min-h-0 p-0 ml-1 rounded-none hover:border-blue-100 hover:border hover:rounded-sm" onclick={copy} disabled={!value}>
-                <Copy class="w-3.5 h-3.5 text-gray-400" />
+                <Copy class="{size === 'small' ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5'} text-gray-400" />
             </Button>
         {/if}
     </span>

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

@@ -2,7 +2,11 @@
     type TData = unknown;
 </script>
 
+<!-- @component
+PikaTablePagination - Pagination controls for PikaTable
+-->
 <script lang="ts" generics="TData">
+    // @ts-ignore - Props interface is private but this is a Svelte framework limitation
     import ChevronLeft from '$icons/lucide/chevron-left';
     import ChevronRight from '$icons/lucide/chevron-right';
     import ChevronsLeft from '$icons/lucide/chevrons-left';
@@ -15,48 +19,77 @@
     interface Props {
         table: Table<TData>;
         serverSide: ServerSideConfig;
+        showRowsPerPage?: boolean;
+        globalFilterActive?: boolean;
     }
 
-    let { table, serverSide }: Props = $props();
+    let { table, serverSide, showRowsPerPage = true, globalFilterActive = false }: Props = $props();
 
     // For cursor-based pagination, we can't jump to arbitrary pages
     const isCursorBased = $derived(serverSide?.paginationMode === 'cursor');
+
+    // Calculate counts for display
+    const totalLoadedRows = $derived(table.getCoreRowModel().rows.length);
+    const visibleRows = $derived(table.getRowModel().rows.length);
+    const selectedRows = $derived(table.getFilteredSelectedRowModel().rows.length);
 </script>
 
 <div class="flex items-center justify-between px-2">
-    <div class="text-muted-foreground flex-1 text-sm">
-        {#if serverSide?.tableState?.totalRecords !== undefined}
-            {table.getFilteredSelectedRowModel().rows.length} of
-            {serverSide.tableState.totalRecords} total row(s) selected.
+    <div class="flex-1 text-sm">
+        {#if globalFilterActive && visibleRows < totalLoadedRows}
+            <!-- Client-side filtering active -->
+            <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-blue-700">
+                    Showing {visibleRows} of {totalLoadedRows} loaded results
+                </span>
+                {#if selectedRows > 0}
+                    <span class="text-muted-foreground text-xs">
+                        ({selectedRows} selected)
+                    </span>
+                {/if}
+            </div>
+        {:else if selectedRows > 0}
+            <!-- No filtering, just show selection -->
+            <span class="text-muted-foreground">
+                {#if serverSide?.tableState?.totalRecords !== undefined}
+                    {selectedRows} of {serverSide.tableState.totalRecords} total row(s) selected.
+                {:else}
+                    {selectedRows} of {visibleRows} row(s) selected.
+                {/if}
+            </span>
         {:else}
-            {table.getFilteredSelectedRowModel().rows.length} of
-            {table.getFilteredRowModel().rows.length} row(s) selected.
+            <!-- No filtering, no selection -->
+            <span class="text-muted-foreground">
+                {totalLoadedRows} row(s) loaded
+            </span>
         {/if}
     </div>
-    <div class="flex items-center space-x-6 lg:space-x-8">
-        <div class="flex items-center space-x-2">
-            <p class="text-sm font-medium">Rows per page</p>
-            <Select.Root
-                allowDeselect={false}
-                type="single"
-                value={`${table.getState().pagination.pageSize}`}
-                onValueChange={(value) => {
-                    table.setPageSize(Number(value));
-                }}
-            >
-                <Select.Trigger class="h-8 w-[70px]">
-                    {String(table.getState().pagination.pageSize)}
-                </Select.Trigger>
-                <Select.Content side="top">
-                    {#each [10, 20, 50, 100, 500, 1000] as pageSize (pageSize)}
-                        <Select.Item value={`${pageSize}`}>
-                            {pageSize}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-        </div>
-        <div class="flex w-[100px] items-center justify-center text-sm font-medium">
+    <div class="flex items-center space-x-8">
+        {#if showRowsPerPage}
+            <div class="flex items-center space-x-2">
+                <p class="text-sm font-medium">Rows per page</p>
+                <Select.Root
+                    allowDeselect={false}
+                    type="single"
+                    value={`${table.getState().pagination.pageSize}`}
+                    onValueChange={(value) => {
+                        table.setPageSize(Number(value));
+                    }}
+                >
+                    <Select.Trigger class="h-8 w-[70px]">
+                        {String(table.getState().pagination.pageSize)}
+                    </Select.Trigger>
+                    <Select.Content side="top">
+                        {#each [10, 20, 50, 100, 500, 1000] as pageSize (pageSize)}
+                            <Select.Item value={`${pageSize}`}>
+                                {pageSize}
+                            </Select.Item>
+                        {/each}
+                    </Select.Content>
+                </Select.Root>
+            </div>
+        {/if}
+        <div class="flex w-[100px] items-center justify-center text-sm font-medium mr-2">
             {#if table.getPageCount() > 0}
                 Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
             {:else}

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

@@ -45,7 +45,7 @@
         {:else if 'menuItems' in item}
             {@render subMenu(item)}
         {:else}
-            <DropdownMenu.Item onclick={() => item.onclick?.(row, appState)}>
+            <DropdownMenu.Item onclick={() => item.onclick?.(row)}>
                 <div class="flex items-center gap-2">
                     {#if item.icon}
                         <item.icon />

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

@@ -3,8 +3,11 @@
     type TValue = unknown;
 </script>
 
+<!-- @component
+PikaTable - A reusable table component with server-side pagination, sorting, and filtering support
+-->
 <script lang="ts" generics="TData, TValue">
-    import type { AppState } from '$client/app/app.state.svelte';
+    // @ts-ignore - Props interface is private but this is a Svelte framework limitation
     import { createSvelteTable } from '../../shadcn/data-table/data-table.svelte';
     import FlexRender from '../../shadcn/data-table/flex-render.svelte';
     import * as Table from '../../shadcn/table';
@@ -20,10 +23,10 @@
         type RowSelectionState,
         type SortingState
     } from '@tanstack/table-core';
-    import { getContext, type Snippet } from 'svelte';
+    import { type Snippet } from 'svelte';
     import TablePagination from './pika-table-pagination.svelte';
     import TableToolbar from './pika-table-toolbar.svelte';
-    import type { FacetedFilters, GlobalFilterProps, ServerSideConfig, ServerSideTableState } from './types';
+    import type { FacetedFilters, GlobalFilterProps, ServerSideConfig, ServerSideTableState, TableSettingsFacade } from './types';
 
     interface Props {
         columns: ColumnDef<TData, TValue>[];
@@ -48,6 +51,15 @@
 
         // Server-side configuration
         serverSideConfig?: ServerSideConfig;
+
+        // Facade for table settings (required)
+        tableSettings: TableSettingsFacade;
+
+        // Show rows per page selector in pagination
+        showRowsPerPage?: boolean;
+
+        // Where to show pagination controls
+        paginationPlacement?: 'top' | 'bottom' | 'both';
     }
 
     let {
@@ -59,61 +71,64 @@
         toolbarContent,
         beneathToolbarContent,
         tableKey,
-        serverSideConfig = $bindable<ServerSideConfig>()
+        serverSideConfig = $bindable<ServerSideConfig>(),
+        tableSettings,
+        showRowsPerPage = true,
+        paginationPlacement = 'bottom'
     }: Props = $props();
 
-    const appState = getContext<AppState>('appState');
-    const appSettings = appState.settings;
-
     let rowSelection = $state<RowSelectionState>({});
-    let columnVisibility = $derived(appSettings.getTableColumnVisibilityObject(tableKey));
-    //$state<VisibilityState>(appSettings.getTableColumnVisibilityObject(tableKey));
+    let columnVisibility = $derived(tableSettings.getTableColumnVisibilityObject(tableKey));
     let columnFilters = $state<ColumnFiltersState>([]);
     let sorting = $state<SortingState>([]);
     let pageIndex = $state(0);
-    let pageSize = $derived(appSettings.getTableNumRows(tableKey, 10));
+    let pageSize = $derived(tableSettings.getTableNumRows(tableKey, 10));
 
     // === SERVER-SIDE LOGIC ===
 
     let debouncedRequestData: ((tableState: ServerSideTableState) => Promise<void>) | undefined;
 
     // Create debounced function when serverSide config changes
-    // $effect(() => {
-    //     const serverState = serverSideConfig;
-    //     if (serverState) {
-    //         const debounceMs = serverState.debounceMs ?? 300;
-    //         debouncedRequestData = debounce(async (tableState: ServerSideTableState) => {
-    //             try {
-    //                 await serverState.requestData(tableState);
-
-    //                 // If using new API, update the tableState
-    //                 if (serverSideConfig) {
-    //                     serverSideConfig.tableState = { ...serverSideConfig.tableState, ...tableState };
-    //                 }
-    //             } catch (error) {
-    //                 serverState.onError?.(error instanceof Error ? error.message : 'Unknown error');
-    //             }
-    //         }, debounceMs);
-    //     } else {
-    //         debouncedRequestData = undefined;
-    //     }
-    // });
+    $effect(() => {
+        const serverState = serverSideConfig;
+        if (serverState) {
+            const debounceMs = serverState.debounceMs ?? 300;
+            debouncedRequestData = debounce(async (tableState: ServerSideTableState) => {
+                try {
+                    await serverState.requestData(tableState);
+
+                    // If using new API, update the tableState
+                    if (serverSideConfig) {
+                        serverSideConfig.tableState = { ...serverSideConfig.tableState, ...tableState };
+                    }
+                } catch (error) {
+                    serverState.onError?.(error instanceof Error ? error.message : 'Unknown error');
+                }
+            }, debounceMs);
+        } else {
+            debouncedRequestData = undefined;
+        }
+    });
 
     // Trigger server request when table state changes
-    // function triggerServerRequest() {
-    //     const serverState = serverSideConfig;
-    //     if (!serverState || !debouncedRequestData) return;
+    function triggerServerRequest() {
+        const serverState = serverSideConfig;
+        if (!serverState || !debouncedRequestData) return;
 
-    //     const tableState: ServerSideTableState = {
-    //         pageIndex,
-    //         pageSize,
-    //         sorting,
-    //         columnFilters,
-    //         requestId: crypto.randomUUID(),
-    //     };
+        const tableState: ServerSideTableState = {
+            pageIndex,
+            pageSize,
+            sorting,
+            columnFilters,
+            totalRecords: serverState.tableState?.totalRecords,
+            scrollId: serverState.tableState?.scrollId,
+            hasNextPage: serverState.tableState?.hasNextPage,
+            isLoading: true,
+            requestId: crypto.randomUUID()
+        };
 
-    //     debouncedRequestData(tableState);
-    // }
+        debouncedRequestData(tableState);
+    }
 
     // Utility function for debouncing
     function debounce<T extends (...args: any[]) => any>(func: T, wait: number): T {
@@ -157,7 +172,9 @@
             return !!serverSideConfig;
         },
         get manualFiltering() {
-            return !!serverSideConfig;
+            // CRITICAL: If using client-side global filter, we must disable manualFiltering
+            // Otherwise TanStack skips ALL filtering logic before checking manualGlobalFilter
+            return serverSideConfig ? !serverSideConfig.clientSideGlobalFilter : false;
         },
         get manualPagination() {
             return !!serverSideConfig;
@@ -168,13 +185,19 @@
 
             const tableState = serverSideConfig?.tableState;
 
+            // For server-side pagination, use the pageSize from tableState if available
+            const effectivePageSize = tableState?.pageSize ?? pageSize;
+
             // Calculate pageCount if totalRecords is available, regardless of pagination mode
-            if (tableState?.totalRecords !== undefined && pageSize > 0) {
-                return Math.ceil(tableState.totalRecords / pageSize);
+            if (tableState?.totalRecords !== undefined && effectivePageSize > 0) {
+                return Math.ceil(tableState.totalRecords / effectivePageSize);
             }
             // For cursor-based pagination without totalRecords, we don't know the total
             if (serverState.paginationMode === 'cursor') {
-                return -1; // Unknown page count for cursor pagination without totalRecords
+                // For cursor pagination, determine page count based on hasNextPage
+                // If we're on page 0 and hasNextPage is false, we have 1 page
+                // If hasNextPage is true, we have at least 2 pages
+                return tableState?.hasNextPage ? pageIndex + 2 : pageIndex + 1;
             }
             return undefined; // Unknown page count
         },
@@ -194,9 +217,9 @@
             }
 
             // Trigger server request for server-side tables
-            // if (serverSideConfig) {
-            //     triggerServerRequest();
-            // }
+            if (serverSideConfig) {
+                triggerServerRequest();
+            }
         },
         onColumnFiltersChange: (updater) => {
             if (typeof updater === 'function') {
@@ -206,13 +229,13 @@
             }
 
             // Trigger server request for server-side tables
-            // if (serverSideConfig) {
-            //     triggerServerRequest();
-            // }
+            if (serverSideConfig) {
+                triggerServerRequest();
+            }
         },
         onColumnVisibilityChange: (updater) => {
             if (typeof updater === 'function') {
-                appSettings.setTableColumnVisibilityFromObject(tableKey, updater(columnVisibility));
+                tableSettings.setTableColumnVisibilityFromObject(tableKey, updater(columnVisibility));
             } else {
                 throw new Error('onColumnVisibilityChange updater must be a function');
                 //columnVisibility = updater;
@@ -222,12 +245,12 @@
             if (typeof updater === 'function') {
                 const val = updater({ pageIndex, pageSize });
                 pageIndex = val.pageIndex;
-                appSettings.setTableNumRows(tableKey, val.pageSize);
+                tableSettings.setTableNumRows(tableKey, val.pageSize);
 
                 // Trigger server request for server-side tables
-                // if (serverSideConfig) {
-                //     triggerServerRequest();
-                // }
+                if (serverSideConfig) {
+                    triggerServerRequest();
+                }
             } else {
                 throw new Error('onPaginationChange updater must be a function');
             }
@@ -236,17 +259,21 @@
             if (globalFilterProps?.showGlobalFilter) {
                 globalFilterProps.globalFilterValue = value;
 
-                // Trigger server request for server-side tables
-                // if (serverSideConfig) {
-                //     triggerServerRequest();
-                // }
+                // Only trigger server request if global filter is server-side (not client-side)
+                if (serverSideConfig && !serverSideConfig.clientSideGlobalFilter) {
+                    triggerServerRequest();
+                }
+                // Otherwise, global filter will work client-side automatically via getFilteredRowModel
             }
         },
 
         // === ROW MODELS ===
         getCoreRowModel: getCoreRowModel(),
         ...(serverSideConfig
-            ? {}
+            ? {
+                  // Include filtered row model ONLY if using client-side global filter
+                  ...(serverSideConfig.clientSideGlobalFilter ? { getFilteredRowModel: getFilteredRowModel() } : {})
+              }
             : {
                   getFilteredRowModel: getFilteredRowModel(),
                   getPaginationRowModel: getPaginationRowModel(),
@@ -257,8 +284,20 @@
     });
 </script>
 
-<div class="space-y-4 {classes ? classes : ''} ">
-    <TableToolbar {table} {globalFilterProps} {facetedFilters} {toolbarContent} {beneathToolbarContent} />
+<div class="{classes ? classes : ''} ">
+    <div class="mb-4">
+        <TableToolbar {table} {globalFilterProps} {facetedFilters} {toolbarContent} {beneathToolbarContent} />
+    </div>
+    {#if paginationPlacement === 'top' || paginationPlacement === 'both'}
+        <div class="mt-2 pb-1">
+            <TablePagination
+                {table}
+                serverSide={serverSideConfig}
+                {showRowsPerPage}
+                globalFilterActive={!!(serverSideConfig?.clientSideGlobalFilter && globalFilterProps?.globalFilterValue)}
+            />
+        </div>
+    {/if}
     <div class="rounded-md border h-full flex flex-col overflow-y-auto">
         <Table.Root class="h-full">
             <Table.Header>
@@ -291,5 +330,14 @@
             </Table.Body>
         </Table.Root>
     </div>
-    <TablePagination {table} serverSide={serverSideConfig} />
+    {#if paginationPlacement === 'bottom' || paginationPlacement === 'both'}
+        <div class="mt-2">
+            <TablePagination
+                {table}
+                serverSide={serverSideConfig}
+                {showRowsPerPage}
+                globalFilterActive={!!(serverSideConfig?.clientSideGlobalFilter && globalFilterProps?.globalFilterValue)}
+            />
+        </div>
+    {/if}
 </div>

package/src/pika/pika-table/types.ts

@@ -1,7 +1,17 @@
-import type { AppState } from '$client/app/app.state.svelte';
-import type { Column, ColumnFiltersState, Row, SortingState } from '@tanstack/table-core';
+import type { Column, ColumnFiltersState, Row, SortingState, VisibilityState } from '@tanstack/table-core';
 import type { Component } from 'svelte';
 
+/**
+ * Facade for table settings (column visibility, page size, etc.)
+ * This allows the pika-table component to be used without depending on AppState
+ */
+export interface TableSettingsFacade {
+    getTableColumnVisibilityObject(tableKey: string): VisibilityState;
+    getTableNumRows(tableKey: string, defaultValue: number): number;
+    setTableNumRows(tableKey: string, value: number): void;
+    setTableColumnVisibilityFromObject(tableKey: string, visibility: VisibilityState): void;
+}
+
 export interface FacetedFilterData {
     label: string;
     value: string;
@@ -44,7 +54,7 @@ export interface GlobalFilterProps {
 export interface RowActionMenuItemNode<TData> {
     label: string;
     icon?: Component;
-    onclick?: (row: Row<TData>, appState: AppState) => void;
+    onclick?: (row: Row<TData>) => void;
 }
 
 export interface RowActionMenuItemSubMenu<TData> {
@@ -101,6 +111,14 @@ export interface ServerSideConfig {
     // === ERROR HANDLING ===
     onError?: (error: string) => void;
 
+    // === CLIENT-SIDE FILTERING ===
+    /**
+     * When true, enables client-side global filter even in server-side mode.
+     * This allows users to quickly filter already-loaded results without triggering server requests.
+     * Column filters still work server-side, but the global filter searches loaded data only.
+     */
+    clientSideGlobalFilter?: boolean;
+
     // === DYNAMIC TABLE STATE ===
     tableState: ServerSideTableState;
 }

package/src/pika/pika-toggle/index.ts

@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

package/src/pika/pika-toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:bg-gray-200 hover:text-gray-900 data-[state=on]:bg-gray-200 data-[state=on]:text-gray-900 focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-white",
+				outline:
+					"border-input shadow-sm hover:bg-gray-200 hover:text-gray-900 border bg-white",
+			},
+			size: {
+				default: "h-9 min-w-9 px-3",
+				sm: "h-8 min-w-8 px-2",
+				lg: "h-10 min-w-10 px-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from '../../shadcn/utils.js';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/src/pika/pika-toggle-group/index.ts

@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};

package/src/pika/pika-toggle-group/toggle-group-item.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from '../../shadcn/utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		value: string;
+		class?: string;
+		disabled?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		value,
+		class: className,
+		disabled = false,
+		children
+	}: Props = $props();
+
+	const ctx = getToggleGroupCtx();
+	
+	const isSelected = $derived(() => {
+		const currentValue = ctx.getValue();
+		if (ctx.type === 'single') {
+			return currentValue === value;
+		} else {
+			const arr = Array.isArray(currentValue) ? currentValue : [];
+			return arr.includes(value);
+		}
+	});
+
+	function handleClick() {
+		if (!disabled) {
+			ctx.toggle(value);
+		}
+	}
+
+	// Determine if buttonWidth is a Tailwind class or CSS value
+	const widthClass = ctx.buttonWidth?.match(/^(w-|min-w-|max-w-)/) ? ctx.buttonWidth : undefined;
+	const widthStyle = ctx.buttonWidth && !widthClass ? `width: ${ctx.buttonWidth};` : '';
+</script>
+
+<button
+	type="button"
+	onclick={handleClick}
+	disabled={disabled}
+	class={cn(
+		// Base styles
+		'inline-flex items-center justify-center',
+		'text-sm font-medium',
+		'transition-colors',
+		'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+		'disabled:pointer-events-none disabled:opacity-50',
+		
+		// Size
+		'h-9 px-3',
+		
+		// White background by default
+		'bg-white',
+		
+		// Border for outline variant
+		'border border-input',
+		
+		// Selected state - gray background
+		isSelected() && 'bg-gray-100 text-gray-700',
+
+		// Hover state - use primary color from your theme
+		'hover:text-primary',
+		
+		// No rounded corners, borders between buttons
+		'border-l-0 first:border-l',
+		
+		// Focus
+		'focus:z-10 focus-visible:z-10',
+		
+		// Width
+		widthClass,
+		
+		// Flex
+		'min-w-0 flex-1 shrink-0',
+
+		
+		className
+	)}
+	style={widthStyle}
+>
+	{@render children?.()}
+</button>

package/src/pika/pika-toggle-group/toggle-group.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" module>
+    import { getContext, setContext } from 'svelte';
+    
+    type ToggleGroupContext = {
+        type: 'single' | 'multiple';
+        getValue: () => string | string[];
+        toggle: (itemValue: string) => void;
+        buttonWidth?: string;
+    };
+    
+    export function setToggleGroupCtx(ctx: ToggleGroupContext) {
+        setContext('pika-toggle-group', ctx);
+    }
+
+    export function getToggleGroupCtx() {
+        return getContext<ToggleGroupContext>('pika-toggle-group');
+    }
+</script>
+
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import type { Snippet } from 'svelte';
+
+    type Props = {
+        value?: string | string[];
+        type?: 'single' | 'multiple';
+        buttonWidth?: string;
+        class?: string;
+        variant?: 'default' | 'outline';
+        children?: Snippet;
+    };
+
+    let {
+        type = 'single',
+        value = $bindable(type === 'single' ? '' : []),
+        buttonWidth,
+        class: className,
+        variant = 'outline',
+        children
+    }: Props = $props();
+
+    function toggle(itemValue: string) {
+        if (type === 'single') {
+            value = value === itemValue ? '' : itemValue;
+        } else {
+            const arr = Array.isArray(value) ? value : [];
+            const index = arr.indexOf(itemValue);
+            if (index > -1) {
+                value = arr.filter(v => v !== itemValue);
+            } else {
+                value = [...arr, itemValue];
+            }
+        }
+    }
+
+    setToggleGroupCtx({
+        type,
+        getValue: () => value,
+        toggle,
+        buttonWidth
+    });
+</script>
+
+<div 
+    class={cn(
+        'flex w-fit items-center',
+        className
+    )}
+    role="group"
+>
+    {@render children?.()}
+</div>

package/src/pika/popup-help/popup-help.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import HelpCircleOutline from '$icons/ci/help-circle-outline';
+    import InfoIcon from '$icons/lucide/info';
+    import type { Snippet } from 'svelte';
     import * as Popover from '../../shadcn/popover';
     import { cn } from '../../shadcn/utils';
-    import type { Snippet } from 'svelte';
 
     interface Props {
         popoverClasses?: string;
         children?: Snippet;
+        useInfoIcon?: boolean;
     }
 
-    let { popoverClasses, children }: Props = $props();
+    let { popoverClasses, children, useInfoIcon = false }: Props = $props();
 
     let open = $state(false);
 </script>
@@ -24,7 +26,11 @@
             open = false;
         }}
     >
-        <HelpCircleOutline class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+        {#if useInfoIcon}
+            <InfoIcon class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+        {:else}
+            <HelpCircleOutline class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+        {/if}
     </Popover.Trigger>
 
     <Popover.Content class={cn('w-120', popoverClasses)}>

package/src/shadcn/chart/chart-container.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import ChartStyle from './chart-style.svelte';
+    import { setChartContext, type ChartConfig } from './chart-utils.js';
+    const uid = $props.id();
+    let {
+        ref = $bindable(null),
+        id = uid,
+        class: className,
+        children,
+        config,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        config: ChartConfig;
+    } = $props();
+    const chartId = `chart-${id || uid.replace(/:/g, '')}`;
+    setChartContext({
+        get config() {
+            return config;
+        }
+    });
+</script>
+
+<div
+    bind:this={ref}
+    data-chart={chartId}
+    data-slot="chart"
+    class={cn(
+        'flex aspect-video justify-center overflow-visible text-xs',
+        // Overrides
+        //
+        // Stroke around dots/marks when hovering
+        '[&_.stroke-white]:stroke-transparent',
+        // override the default stroke color of lines
+        '[&_.lc-line]:stroke-border/50',
+        // by default, layerchart shows a line intersecting the point when hovering, this hides that
+        '[&_.lc-highlight-line]:stroke-0',
+        // by default, when you hover a point on a stacked series chart, it will drop the opacity
+        // of the other series, this overrides that
+        '[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text-svg]:overflow-visible [&_.lc-text]:text-xs',
+        // We don't want the little tick lines between the axis labels and the chart, so we remove
+        // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+        // chart.
+        '[&_.lc-axis-tick]:stroke-0',
+        // We don't want to display the rule on the x/y axis, as there is already going to be
+        // a grid line there and rule ends up overlapping the marks because it is rendered after
+        // the marks
+        '[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
+        '[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border',
+        '[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border',
+        // Legend adjustments
+        '[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
+        '[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
+        '[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+        // Labels
+        '[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+        // Tick labels on th x/y axes
+        '[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
+        '[&_.lc-tooltip-rects-g]:fill-transparent',
+        '[&_.lc-layout-svg-g]:fill-transparent',
+        '[&_.lc-root-container]:w-full',
+        className
+    )}
+    {...restProps}
+>
+    <ChartStyle id={chartId} {config} />
+    {@render children?.()}
+</div>

package/src/shadcn/chart/chart-style.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { THEMES, type ChartConfig } from './chart-utils.js';
+    let { id, config }: { id: string; config: ChartConfig } = $props();
+    const colorConfig = $derived(config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null);
+    const themeContents = $derived.by(() => {
+        if (!colorConfig || !colorConfig.length) return;
+        const themeContents = [];
+        for (let [_theme, prefix] of Object.entries(THEMES)) {
+            let content = `${prefix} [data-chart=${id}] {\n`;
+            const color = colorConfig.map(([key, itemConfig]) => {
+                const theme = _theme as keyof typeof itemConfig.theme;
+                const color = itemConfig.theme?.[theme] || itemConfig.color;
+                return color ? `\t--color-${key}: ${color};` : null;
+            });
+            content += color.join('\n') + '\n}';
+            themeContents.push(content);
+        }
+        return themeContents.join('\n');
+    });
+</script>
+
+{#if themeContents}
+    {#key id}
+        <svelte:element this={'style'}>
+            {themeContents}
+        </svelte:element>
+    {/key}
+{/if}

package/src/shadcn/chart/chart-tooltip.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+    import { cn, type WithElementRef, type WithoutChildren } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils.js';
+    import { getTooltipContext, Tooltip as TooltipPrimitive } from 'layerchart';
+    import type { Snippet } from 'svelte';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+        return `${value}`;
+    }
+    let {
+        ref = $bindable(null),
+        class: className,
+        hideLabel = false,
+        indicator = 'dot',
+        hideIndicator = false,
+        labelKey,
+        label,
+        labelFormatter = defaultFormatter,
+        labelClassName,
+        formatter,
+        nameKey,
+        color,
+        ...restProps
+    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+        hideLabel?: boolean;
+        label?: string;
+        indicator?: 'line' | 'dot' | 'dashed';
+        nameKey?: string;
+        labelKey?: string;
+        hideIndicator?: boolean;
+        labelClassName?: string;
+        labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+        formatter?: Snippet<
+            [
+                {
+                    value: unknown;
+                    name: string;
+                    item: TooltipPayload;
+                    index: number;
+                    payload: TooltipPayload[];
+                }
+            ]
+        >;
+    } = $props();
+    const chart = useChart();
+    const tooltipCtx = getTooltipContext();
+    const formattedLabel = $derived.by(() => {
+        if (hideLabel || !tooltipCtx.payload?.length) return null;
+        const [item] = tooltipCtx.payload;
+        const key = labelKey ?? item?.label ?? item?.name ?? 'value';
+        const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+        const value = !labelKey && typeof label === 'string' ? (chart.config[label as keyof typeof chart.config]?.label ?? label) : (itemConfig?.label ?? item.label);
+        if (value === undefined) return null;
+        if (!labelFormatter) return value;
+        return labelFormatter(value, tooltipCtx.payload);
+    });
+    const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== 'dot');
+</script>
+
+{#snippet TooltipLabel()}
+    {#if formattedLabel}
+        <div class={cn('font-medium', labelClassName)}>
+            {#if typeof formattedLabel === 'function'}
+                {@render formattedLabel()}
+            {:else}
+                {formattedLabel}
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+<TooltipPrimitive.Root variant="none">
+    <div class={cn('border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className)} {...restProps}>
+        {#if !nestLabel}
+            {@render TooltipLabel()}
+        {/if}
+        <div class="grid gap-1.5">
+            {#each tooltipCtx.payload as item, i (item.key + i)}
+                {@const key = `${nameKey || item.key || item.name || 'value'}`}
+                {@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
+                {@const indicatorColor = color || item.payload?.color || item.color}
+                <div class={cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5', indicator === 'dot' && 'items-center')}>
+                    {#if formatter && item.value !== undefined && item.name}
+                        {@render formatter({
+                            value: item.value,
+                            name: item.name,
+                            item,
+                            index: i,
+                            payload: tooltipCtx.payload
+                        })}
+                    {:else}
+                        {#if itemConfig?.icon}
+                            <itemConfig.icon />
+                        {:else if !hideIndicator}
+                            <div
+                                style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+                                class={cn('border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]', {
+                                    'size-2.5': indicator === 'dot',
+                                    'h-full w-1': indicator === 'line',
+                                    'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                    'my-0.5': nestLabel && indicator === 'dashed'
+                                })}
+                            ></div>
+                        {/if}
+                        <div class={cn('flex flex-1 shrink-0 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>
+                            <div class="grid gap-1.5">
+                                {#if nestLabel}
+                                    {@render TooltipLabel()}
+                                {/if}
+                                <span class="text-muted-foreground">
+                                    {itemConfig?.label || item.name}
+                                </span>
+                            </div>
+                            {#if item.value !== undefined}
+                                <span class="text-foreground font-mono font-medium tabular-nums">
+                                    {item.value.toLocaleString()}
+                                </span>
+                            {/if}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+</TooltipPrimitive.Root>

package/src/shadcn/chart/chart-utils.ts

@@ -0,0 +1,37 @@
+import type { Tooltip } from 'layerchart';
+import { getContext, setContext, type Component, type ComponentProps, type Snippet } from 'svelte';
+export const THEMES = { light: '', dark: '.dark' } as const;
+export type ChartConfig = {
+    [k in string]: {
+        label?: string;
+        icon?: Component;
+    } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>['children']>['payload'][number];
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string) {
+    if (typeof payload !== 'object' || payload === null) return undefined;
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;
+    let configLabelKey: string = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    } else if (payload.name === key) {
+        configLabelKey = payload.name;
+    } else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+        configLabelKey = payload[key as keyof typeof payload] as string;
+    } else if (payloadPayload !== undefined && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string') {
+        configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+type ChartContextValue = {
+    config: ChartConfig;
+};
+const chartContextKey = Symbol('chart-context');
+export function setChartContext(value: ChartContextValue) {
+    return setContext(chartContextKey, value);
+}
+export function useChart() {
+    return getContext<ChartContextValue>(chartContextKey);
+}

package/src/shadcn/chart/index.ts

@@ -0,0 +1,4 @@
+import ChartContainer from './chart-container.svelte';
+import ChartTooltip from './chart-tooltip.svelte';
+export { getPayloadConfigFromPayload, type ChartConfig } from './chart-utils.js';
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };

package/src/shadcn/toggle/toggle.svelte

@@ -1,51 +1,42 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
-			},
-			size: {
-				default: "h-9 min-w-9 px-3",
-				sm: "h-8 min-w-8 px-2",
-				lg: "h-10 min-w-10 px-3",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
-	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
-	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+    import { type VariantProps, tv } from 'tailwind-variants';
+    export const toggleVariants = tv({
+        base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                default: 'bg-transparent',
+                outline: 'border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent'
+            },
+            size: {
+                default: 'h-9 min-w-9 px-2',
+                sm: 'h-8 min-w-8 px-1.5',
+                lg: 'h-10 min-w-10 px-2.5'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    });
+    export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+    export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+    export type ToggleVariants = VariantProps<typeof toggleVariants>;
 </script>
 
 <script lang="ts">
-	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "../utils.js";
-
-	let {
-		ref = $bindable(null),
-		pressed = $bindable(false),
-		class: className,
-		size = "default",
-		variant = "default",
-		...restProps
-	}: TogglePrimitive.RootProps & {
-		variant?: ToggleVariant;
-		size?: ToggleSize;
-	} = $props();
+    import { Toggle as TogglePrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+    let {
+        ref = $bindable(null),
+        pressed = $bindable(false),
+        class: className,
+        size = 'default',
+        variant = 'default',
+        ...restProps
+    }: TogglePrimitive.RootProps & {
+        variant?: ToggleVariant;
+        size?: ToggleSize;
+    } = $props();
 </script>
 
-<TogglePrimitive.Root
-	bind:ref
-	bind:pressed
-	class={cn(toggleVariants({ variant, size }), className)}
-	{...restProps}
-/>
+<TogglePrimitive.Root bind:ref bind:pressed data-slot="toggle" class={cn(toggleVariants({ variant, size }), className)} {...restProps} />

package/src/shadcn/toggle-group/toggle-group-item.svelte

@@ -1,30 +1,27 @@
 <script lang="ts">
-	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { getToggleGroupCtx } from "./toggle-group.svelte";
-	import { cn } from "../utils.js";
-	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
+    import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+    import { getToggleGroupCtx } from './toggle-group.svelte';
+    import { cn } from '../utils.js';
+    import { type ToggleVariants, toggleVariants } from '../toggle/index.js';
 
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		size,
-		variant,
-		...restProps
-	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+    let { ref = $bindable(null), value = $bindable(), class: className, size, variant, ...restProps }: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
 
-	const ctx = getToggleGroupCtx();
+    const ctx = getToggleGroupCtx();
 </script>
 
 <ToggleGroupPrimitive.Item
-	bind:ref
-	class={cn(
-		toggleVariants({
-			variant: ctx.variant || variant,
-			size: ctx.size || size,
-		}),
-		className
-	)}
-	{value}
-	{...restProps}
+    bind:ref
+    data-slot="toggle-group-item"
+    data-variant={ctx.variant || variant}
+    data-size={ctx.size || size}
+    class={cn(
+        toggleVariants({
+            variant: ctx.variant || variant,
+            size: ctx.size || size
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className
+    )}
+    {value}
+    {...restProps}
 />

package/src/shadcn/toggle-group/toggle-group.svelte

@@ -33,4 +33,12 @@
 Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
-<ToggleGroupPrimitive.Root bind:value={value as never} bind:ref class={cn('flex items-center justify-center gap-1', className)} {...restProps} />
+<ToggleGroupPrimitive.Root
+    bind:value={value as never}
+    bind:ref
+    data-slot="toggle-group"
+    data-variant={variant}
+    data-size={size}
+    class={cn('group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md', className)}
+    {...restProps}
+/>