pika-ux 1.0.0-beta.0

package/src/pika/confirm-dialog/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmDialog } from './confirm-dialog.svelte';

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

@@ -0,0 +1,134 @@
+<script lang="ts">
+    import Check from '$icons/lucide/check';
+    import Copy from '$icons/lucide/copy';
+    import { Button } from '../../shadcn/button';
+    import { tick, type Snippet } from 'svelte';
+
+    interface Props {
+        children?: Snippet<[]>;
+        value?: string;
+        /** When embedded in other elements, like a table, we don't want borders */
+        embedded?: boolean;
+
+        /** Truncate the value after this many characters showing a ...*/
+        truncateAfter?: number;
+
+        /** If true, the text will be shown as a link */
+        showTextAsLink?: boolean;
+
+        /** If showTextAsLink is true, this function will be called when the link is clicked */
+        linkCallbackFn?: () => void;
+
+        /** When provided, this is the title of the button */
+        title?: string;
+    }
+
+    const { children, value: propValue, embedded = false, truncateAfter = 0, showTextAsLink = false, linkCallbackFn, title }: Props = $props();
+
+    let hiddenRef = $state<HTMLElement>() as HTMLElement;
+    let value: string | undefined = $state(undefined);
+    let truncatedValue: string | undefined = $state(undefined);
+    let showCheckmark = $state(false);
+
+    let buttonTitle = $derived.by(() => {
+        const t = title;
+        const tv = truncatedValue;
+        const v = value;
+        if (t) {
+            return t;
+        } else if (tv) {
+            return tv;
+        } else if (v) {
+            return v;
+        } else {
+            return 'Copy';
+        }
+    });
+
+    $effect(() => {
+        if (propValue !== undefined) {
+            value = propValue;
+            updateTruncatedValue();
+        } else if (children) {
+            // Fall back to extracting from children
+            extractValue().catch((e) => {
+                throw new Error(`Failed to extract value: ${e instanceof Error ? e.message + ' ' + e.stack : String(e)}`);
+            });
+        }
+    });
+
+    async function extractValue() {
+        // We need to wait for the DOM to update
+        await tick();
+
+        if (!hiddenRef) return;
+
+        // Extract text content
+        value = (hiddenRef.textContent || '').trim();
+        updateTruncatedValue();
+    }
+
+    function updateTruncatedValue() {
+        if (!value) {
+            throw new Error('Did not find any text in the hidden container of ValueToCopy');
+        }
+        if (truncateAfter && truncateAfter > 0 && value.length > truncateAfter) {
+            // Check if there are enough characters to make the "start...end" format worthwhile
+            // We need at least truncateAfter + 7 characters (3 for "..." + 4 for end)
+            // to make the start...end format meaningful
+            const minLengthForStartEnd = truncateAfter + 7;
+
+            if (value.length >= minLengthForStartEnd) {
+                // Use "start...end" format
+                truncatedValue = `${value.slice(0, truncateAfter)}...${value.slice(-4)}`;
+            } else {
+                // Just truncate with "..." at the end
+                truncatedValue = `${value.slice(0, truncateAfter)}...`;
+            }
+        }
+    }
+
+    function copy() {
+        if (!value) {
+            console.error('No value to copy');
+            return;
+        }
+
+        if (!navigator || !navigator.clipboard) {
+            console.error('Clipboard API not supported');
+            return;
+        }
+
+        try {
+            navigator.clipboard.writeText(value);
+            showCheckmark = true;
+            setTimeout(() => {
+                showCheckmark = false;
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy value:', err);
+            showCheckmark = false;
+        }
+    }
+</script>
+
+{#if !propValue}
+    <pre class="hidden-container" bind:this={hiddenRef} style="display: none; position: absolute; left: -9999px;">{#if children}{@render children()}{/if}</pre>
+{/if}
+
+<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>
+    {:else}
+        <span class={embedded ? '' : 'border-r border-gray-200 px-2'}>{buttonTitle}</span>
+    {/if}
+    <span class="w-6 h-6 flex items-center justify-center">
+        {#if showCheckmark}
+            <Check class="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" />
+            </Button>
+        {/if}
+    </span>
+</span>

package/src/pika/copy-button/index.ts

@@ -0,0 +1 @@
+export { default as CopyButton } from './copy-button.svelte';

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+    import Check from '$icons/lucide/check';
+    import Copy from '$icons/lucide/copy';
+    import Link from '$icons/lucide/link';
+    import Loader from '$icons/lucide/loader';
+    import { Button } from '../../shadcn/button';
+
+    interface Props {
+        /** If this doesn't exist, we assume that we need to create the link */
+        linkUrl?: string;
+
+        /** If not provided, will show Click button to create link */
+        valueToShowBeforeLinkIsCreated?: string;
+
+        /** When the user clicks the create link button, this function will be called */
+        createLinkFn: () => void;
+
+        /** If true, will show a loader and the button will be disabled */
+        creatingLink: boolean;
+
+        /** When set, will disable the create link button */
+        disableCreateLinkButton?: boolean;
+
+        /** Truncate the linkUrl or valueToShowBeforeLinkIsCreated after this many characters showing a ...*/
+        truncateAfter?: number;
+
+        /** Defaults to 100px */
+        width?: number;
+    }
+
+    const { linkUrl, valueToShowBeforeLinkIsCreated, createLinkFn, creatingLink, disableCreateLinkButton, truncateAfter = 0, width = 100 }: Props = $props();
+
+    const height = 50;
+
+    let showCheckmark = $state(false);
+    let value = $derived.by(() => {
+        if (linkUrl) {
+            return linkUrl;
+        } else {
+            return valueToShowBeforeLinkIsCreated ?? 'Click button to create link';
+        }
+    });
+    let truncatedValue = $derived.by(() => {
+        let result = value;
+        if (truncateAfter && truncateAfter > 0 && result.length > truncateAfter) {
+            result = `${result.slice(0, truncateAfter)}...`;
+        }
+        return result;
+    });
+
+    function copy() {
+        if (!linkUrl) {
+            console.error('No linkUrl to copy');
+            return;
+        }
+
+        if (!navigator || !navigator.clipboard) {
+            console.error('Clipboard API not supported');
+            return;
+        }
+
+        try {
+            navigator.clipboard.writeText(linkUrl);
+            showCheckmark = true;
+            setTimeout(() => {
+                showCheckmark = false;
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy value:', err);
+            showCheckmark = false;
+        }
+    }
+</script>
+
+<div class="flex items-center w-[{width}px] h-[{height}px] border border-gray-200 rounded-xl">
+    <div class="flex-1 p-4 {!linkUrl ? 'text-gray-400' : ''}">{truncatedValue}</div>
+    <div class="w-[150px] h-[{height}px] flex items-center justify-center mr-4">
+        {#if showCheckmark}
+            <Check class="w-3.5 h-3.5 text-green-600 mr-2" /> <span class="text-green-600">Copied!</span>
+        {:else}
+            <Button
+                class="h-[{height}px] w-[150px] ml-1"
+                onclick={() => {
+                    if (linkUrl) {
+                        copy();
+                    } else {
+                        createLinkFn();
+                    }
+                }}
+                disabled={creatingLink || (disableCreateLinkButton && !linkUrl)}
+            >
+                {#if creatingLink}
+                    <Loader class="w-3.5 h-3.5 animate-spin white" /> Creating...
+                {:else if linkUrl}
+                    <Copy class="w-3.5 h-3.5 white" /> Copy link
+                {:else}
+                    <Link class="w-3.5 h-3.5 white" /> Create link
+                {/if}
+            </Button>
+        {/if}
+    </div>
+</div>
+
+<!-- <div class="flex h-[{height}px] w-[{width}px] items-center {'border border-gray-200 rounded-sm'}">
+    
+    <div class={'border-r border-gray-200 px-2 h-[100px] flex items-center flex-1'}>{truncatedValue}</div>
+    <div class="w-[100px] h-[36px] flex items-center justify-center">
+        {#if showCheckmark}
+            <Check class="w-3.5 h-3.5 text-green-500" /> Copied!
+        {:else}
+            <Button
+                variant="ghost"
+                class="h-[36px] w-[100px] ml-1 rounded-none hover:border-blue-100 hover:border hover:rounded-sm"
+                onclick={() => {
+                    if (linkUrl) {
+                        copy();
+                    } else {
+                        createLinkFn();
+                    }
+                }}
+                disabled={creatingLink || (disableCreateLinkButton && !linkUrl)}
+            >
+                {#if creatingLink}
+                    <Loader class="w-3.5 h-3.5 animate-spin" /> Copying...
+                {:else if linkUrl}
+                    <Copy class="w-3.5 h-3.5 text-gray-400" /> Copy link
+                {:else}
+                    <Link class="w-3.5 h-3.5 text-gray-400" /> Create link
+                {/if}
+            </Button>
+        {/if}
+    </div>
+</div> -->

package/src/pika/create-copy-link-button/index.ts

@@ -0,0 +1 @@
+export { default as CreateCopyLinkButton } from './create-copy-link-button.svelte';

package/src/pika/date-picker/date-picker.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { buttonVariants } from '../../shadcn/button/index.js';
+    import { Calendar } from '../../shadcn/calendar/index.js';
+    import * as Popover from '../../shadcn/popover/index.js';
+    import { cn } from '../../shadcn/utils.js';
+    import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
+    import CalendarIcon from '$icons/lucide/calendar';
+
+    const df = new DateFormatter('en-US', {
+        dateStyle: 'long'
+    });
+
+    let value = $state<DateValue | undefined>();
+    let contentRef = $state<HTMLElement | null>(null);
+</script>
+
+<Popover.Root>
+    <Popover.Trigger
+        class={cn(
+            buttonVariants({
+                variant: 'outline',
+                class: 'w-[280px] justify-start text-left font-normal'
+            }),
+            !value && 'text-muted-foreground'
+        )}
+    >
+        <CalendarIcon />
+        {value ? df.format(value.toDate(getLocalTimeZone())) : 'Pick a date'}
+    </Popover.Trigger>
+    <Popover.Content bind:ref={contentRef} class="w-auto p-0">
+        <Calendar type="single" bind:value />
+    </Popover.Content>
+</Popover.Root>

package/src/pika/date-picker/index.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './date-picker.svelte';

package/src/pika/date-range-picker/date-range-picker.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { buttonVariants } from '../../shadcn/button/index.js';
+    import * as Popover from '../../shadcn/popover/index.js';
+    import { RangeCalendar } from '../../shadcn/range-calendar/index.js';
+    import { cn } from '../../shadcn/utils.js';
+    import { CalendarDate, DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
+    import CalendarIcon from '$icons/lucide/calendar';
+    import type { DateRange } from 'bits-ui';
+
+    const df = new DateFormatter('en-US', {
+        dateStyle: 'medium'
+    });
+
+    let value: DateRange = $state({
+        start: new CalendarDate(2022, 1, 20),
+        end: new CalendarDate(2022, 1, 20).add({ days: 20 })
+    });
+
+    let startValue: DateValue | undefined = $state(undefined);
+</script>
+
+<div class="grid gap-2">
+    <Popover.Root>
+        <Popover.Trigger class={cn(buttonVariants({ variant: 'outline' }), !value && 'text-muted-foreground')}>
+            <CalendarIcon class="mr-2 size-4" />
+            {#if value && value.start}
+                {#if value.end}
+                    {df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(value.end.toDate(getLocalTimeZone()))}
+                {:else}
+                    {df.format(value.start.toDate(getLocalTimeZone()))}
+                {/if}
+            {:else if startValue}
+                {df.format(startValue.toDate(getLocalTimeZone()))}
+            {:else}
+                Pick a date
+            {/if}
+        </Popover.Trigger>
+        <Popover.Content class="w-auto p-0" align="start">
+            <RangeCalendar
+                bind:value
+                onStartValueChange={(v) => {
+                    startValue = v;
+                }}
+                numberOfMonths={2}
+            />
+        </Popover.Content>
+    </Popover.Root>
+</div>

package/src/pika/date-range-picker/index.ts

@@ -0,0 +1 @@
+export { default as DateRangePicker } from './date-range-picker.svelte';