@ptengine/design-components 0.3.0

package/src/components/ui/calendar.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+    return (
+        <DayPicker
+            showOutsideDays={showOutsideDays}
+            className={cn('p-[12px]', className)}
+            classNames={{
+                months: 'flex flex-col sm:flex-row space-y-[16px] sm:space-x-[16px] sm:space-y-0',
+                month: 'space-y-[16px]',
+                caption: 'flex justify-center pt-[4px] relative items-center',
+                caption_label: 'text-[14px] leading-[20px] font-medium text-foreground',
+                nav: 'space-x-[4px] flex items-center',
+                nav_button: cn(buttonVariants({ variant: 'secondary' }), 'h-[24px] w-[24px] p-0'),
+                nav_button_previous: 'absolute left-[4px]',
+                nav_button_next: 'absolute right-[4px]',
+                table: 'w-full border-collapse space-y-[4px]',
+                head_row: 'flex',
+                head_cell: 'w-[32px] rounded-[var(--pt-radius-md)] text-[12px] leading-[16px] font-normal text-muted-foreground',
+                row: 'flex w-full mt-[8px]',
+                cell: cn(
+                    'relative p-0 text-center text-[14px] leading-[20px] focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-[var(--pt-radius-md)]',
+                    props.mode === 'range'
+                        ? '[&:has(>.day-range-end)]:rounded-r-[var(--pt-radius-md)] [&:has(>.day-range-start)]:rounded-l-[var(--pt-radius-md)] first:[&:has([aria-selected])]:rounded-l-[var(--pt-radius-md)] last:[&:has([aria-selected])]:rounded-r-[var(--pt-radius-md)]'
+                        : '[&:has([aria-selected])]:rounded-[var(--pt-radius-md)]'
+                ),
+                day: cn(
+                    buttonVariants({ variant: 'ghost' }),
+                    'h-[32px] w-[32px] p-0 font-normal aria-selected:opacity-100'
+                ),
+                day_range_start: 'day-range-start',
+                day_range_end: 'day-range-end',
+                day_selected:
+                    'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+                day_today: 'bg-accent text-accent-foreground',
+                day_outside: 'day-outside text-muted-foreground',
+                day_disabled: 'text-muted-foreground opacity-50',
+                day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+                day_hidden: 'invisible',
+                ...classNames
+            }}
+            components={{
+                IconLeft: ({ className, ...props }) => (
+                    <ChevronLeft className={cn('h-[16px] w-[16px]', className)} {...props} />
+                ),
+                IconRight: ({ className, ...props }) => (
+                    <ChevronRight className={cn('h-[16px] w-[16px]', className)} {...props} />
+                )
+            }}
+            {...props}
+        />
+    );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

package/src/components/ui/card.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn('rounded-[12px] border bg-card text-card-foreground', className)}
+            {...props}
+        />
+    )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex flex-col space-y-[6px] p-[24px]', className)} {...props} />
+    )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn('font-semibold leading-none tracking-tight', className)}
+            {...props}
+        />
+    )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('text-[14px] leading-[20px] text-muted-foreground', className)} {...props} />
+    )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('p-[24px] pt-0', className)} {...props} />
+    )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex items-center p-[24px] pt-0', className)} {...props} />
+    )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/ui/carousel.tsx

@@ -0,0 +1,252 @@
+import * as React from 'react';
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: 'horizontal' | 'vertical';
+    setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+    const context = React.useContext(CarouselContext);
+
+    if (!context) {
+        throw new Error('useCarousel must be used within a <Carousel />');
+    }
+
+    return context;
+}
+
+const Carousel = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+        {
+            ...opts,
+            axis: orientation === 'horizontal' ? 'x' : 'y'
+        },
+        plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+        if (!api) {
+            return;
+        }
+
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                scrollPrev();
+            } else if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                scrollNext();
+            }
+        },
+        [scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+        if (!api || !setApi) {
+            return;
+        }
+
+        setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+
+        onSelect(api);
+        api.on('reInit', onSelect);
+        api.on('select', onSelect);
+
+        return () => {
+            api?.off('select', onSelect);
+        };
+    }, [api, onSelect]);
+
+    return (
+        <CarouselContext.Provider
+            value={{
+                carouselRef,
+                api: api,
+                opts,
+                orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+                scrollPrev,
+                scrollNext,
+                canScrollPrev,
+                canScrollNext
+            }}
+        >
+            <div
+                ref={ref}
+                onKeyDownCapture={handleKeyDown}
+                className={cn('relative', className)}
+                role="region"
+                aria-roledescription="carousel"
+                {...props}
+            >
+                {children}
+            </div>
+        </CarouselContext.Provider>
+    );
+});
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { carouselRef, orientation } = useCarousel();
+
+        return (
+            <div ref={carouselRef} className="overflow-hidden">
+                <div
+                    ref={ref}
+                    className={cn(
+                        'flex',
+                        orientation === 'horizontal' ? '-ml-[16px]' : '-mt-[16px] flex-col',
+                        className
+                    )}
+                    {...props}
+                />
+            </div>
+        );
+    }
+);
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { orientation } = useCarousel();
+
+        return (
+            <div
+                ref={ref}
+                role="group"
+                aria-roledescription="slide"
+                className={cn(
+                    'min-w-0 shrink-0 grow-0 basis-full',
+                    orientation === 'horizontal' ? 'pl-[16px]' : 'pt-[16px]',
+                    className
+                )}
+                {...props}
+            />
+        );
+    }
+);
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<typeof Button> & { label?: string }
+>(
+    (
+        { className, variant = 'secondary', size = 'icon', label = 'Previous slide', ...props },
+        ref
+    ) => {
+        const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(
+                    'absolute h-[32px] w-[32px] rounded-full',
+                    orientation === 'horizontal'
+                        ? '-left-[48px] top-1/2 -translate-y-1/2'
+                        : '-top-[48px] left-1/2 -translate-x-1/2 rotate-90',
+                    className
+                )}
+                disabled={!canScrollPrev}
+                onClick={scrollPrev}
+                {...props}
+            >
+                <ArrowLeft className="h-[16px] w-[16px]" />
+                <span className="sr-only">{label}</span>
+            </Button>
+        );
+    }
+);
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<typeof Button> & { label?: string }
+>(
+    (
+        { className, variant = 'secondary', size = 'icon', label = 'Next slide', ...props },
+        ref
+    ) => {
+        const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(
+                    'absolute h-[32px] w-[32px] rounded-full',
+                    orientation === 'horizontal'
+                        ? '-right-[48px] top-1/2 -translate-y-1/2'
+                        : '-bottom-[48px] left-1/2 -translate-x-1/2 rotate-90',
+                    className
+                )}
+                disabled={!canScrollNext}
+                onClick={scrollNext}
+                {...props}
+            >
+                <ArrowRight className="h-[16px] w-[16px]" />
+                <span className="sr-only">{label}</span>
+            </Button>
+        );
+    }
+);
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+    type CarouselApi,
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselPrevious,
+    CarouselNext
+};

package/src/components/ui/chart.tsx

@@ -0,0 +1,323 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '../../lib/utils';
+
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & (
+        | { color?: string; theme?: never }
+        | { color?: never; theme: Record<keyof typeof THEMES, string> }
+    );
+};
+
+type ChartContextProps = {
+    config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+    const context = React.useContext(ChartContext);
+
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />');
+    }
+
+    return context;
+}
+
+const ChartContainer = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        config: ChartConfig;
+        children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+    }
+>(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+    return (
+        <ChartContext.Provider value={{ config }}>
+            <div
+                data-chart={chartId}
+                ref={ref}
+                className={cn(
+                    "flex aspect-video justify-center text-[13px] leading-[20px] [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+                    className
+                )}
+                {...props}
+            >
+                <ChartStyle id={chartId} config={config} />
+                <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+            </div>
+        </ChartContext.Provider>
+    );
+});
+ChartContainer.displayName = 'Chart';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+    if (!colorConfig.length) {
+        return null;
+    }
+
+    return (
+        <style
+            dangerouslySetInnerHTML={{
+                __html: Object.entries(THEMES)
+                    .map(
+                        ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+    .map(([key, itemConfig]) => {
+        const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+        return color ? `  --color-${key}: ${color};` : null;
+    })
+    .join('\n')}
+}
+`
+                    )
+                    .join('\n')
+            }}
+        />
+    );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+        React.ComponentProps<'div'> & {
+            hideLabel?: boolean;
+            hideIndicator?: boolean;
+            indicator?: 'line' | 'dot' | 'dashed';
+            nameKey?: string;
+            labelKey?: string;
+        }
+>(
+    (
+        {
+            active,
+            payload,
+            className,
+            indicator = 'dot',
+            hideLabel = false,
+            hideIndicator = false,
+            label,
+            labelFormatter,
+            labelClassName,
+            formatter,
+            color,
+            nameKey,
+            labelKey
+        },
+        ref
+    ) => {
+        const { config } = useChart();
+
+        const tooltipLabel = React.useMemo(() => {
+            if (hideLabel || !payload?.length) {
+                return null;
+            }
+
+            const [item] = payload;
+            const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const value =
+                !labelKey && typeof label === 'string'
+                    ? config[label as keyof typeof config]?.label || label
+                    : itemConfig?.label;
+
+            if (labelFormatter) {
+                return (
+                    <div className={cn('font-medium', labelClassName)}>
+                        {labelFormatter(value, payload)}
+                    </div>
+                );
+            }
+
+            if (!value) {
+                return null;
+            }
+
+            return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+        }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+        if (!active || !payload?.length) {
+            return null;
+        }
+
+        const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    'grid min-w-[8rem] items-start gap-[6px] rounded-[var(--pt-radius)] border bg-background px-[10px] py-[6px] text-[13px] leading-[20px] shadow-xl',
+                    className
+                )}
+            >
+                {!nestLabel ? tooltipLabel : null}
+                <div className="grid gap-[6px]">
+                    {payload.map((item, index) => {
+                        const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+                        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                        const indicatorColor = color || item.payload.fill || item.color;
+
+                        return (
+                            <div
+                                key={item.dataKey}
+                                className={cn(
+                                    'flex w-full flex-wrap items-stretch gap-[8px] [&>svg]:h-[10px] [&>svg]:w-[10px] [&>svg]:text-muted-foreground',
+                                    indicator === 'dot' && 'items-center'
+                                )}
+                            >
+                                {formatter && item?.value !== undefined && item.name ? (
+                                    formatter(item.value, item.name, item, index, item.payload)
+                                ) : (
+                                    <>
+                                        {itemConfig?.icon ? (
+                                            <itemConfig.icon />
+                                        ) : (
+                                            !hideIndicator && (
+                                                <div
+                                                    className={cn(
+                                                        'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                                                        {
+                                                            'h-[10px] w-[10px]': indicator === 'dot',
+                                                            'w-[4px]': indicator === 'line',
+                                                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                                                                indicator === 'dashed',
+                                                            'my-[2px]': nestLabel && indicator === 'dashed'
+                                                        }
+                                                    )}
+                                                    style={
+                                                        {
+                                                            '--color-bg': indicatorColor,
+                                                            '--color-border': indicatorColor
+                                                        } as React.CSSProperties
+                                                    }
+                                                />
+                                            )
+                                        )}
+                                        <div
+                                            className={cn(
+                                                'flex flex-1 justify-between leading-none',
+                                                nestLabel ? 'items-end' : 'items-center'
+                                            )}
+                                        >
+                                            <div className="grid gap-[6px]">
+                                                {nestLabel ? tooltipLabel : null}
+                                                <span className="text-muted-foreground">
+                                                    {itemConfig?.label || item.name}
+                                                </span>
+                                            </div>
+                                            {item.value && (
+                                                <span className="font-mono font-medium tabular-nums text-foreground">
+                                                    {item.value.toLocaleString()}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+);
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> &
+        Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+            hideIcon?: boolean;
+            nameKey?: string;
+        }
+>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+        return null;
+    }
+
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                'flex items-center justify-center gap-[16px]',
+                verticalAlign === 'top' ? 'pb-[12px]' : 'pt-[12px]',
+                className
+            )}
+        >
+            {payload.map(item => {
+                const key = `${nameKey || item.dataKey || 'value'}`;
+                const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+                return (
+                    <div
+                        key={item.value}
+                        className="flex items-center gap-[6px] text-foreground [&>svg]:h-[12px] [&>svg]:w-[12px] [&>svg]:text-muted-foreground"
+                    >
+                        {itemConfig?.icon && !hideIcon ? (
+                            <itemConfig.icon />
+                        ) : (
+                            <div
+                                className="h-[8px] w-[8px] shrink-0 rounded-[2px]"
+                                style={{ backgroundColor: item.color }}
+                            />
+                        )}
+                        {itemConfig?.label}
+                    </div>
+                );
+            })}
+        </div>
+    );
+});
+ChartLegendContent.displayName = 'ChartLegend';
+
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, 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 (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+        configLabelKey = payload[key as keyof typeof payload] as string;
+    } else if (
+        payloadPayload &&
+        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];
+}
+
+export {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    ChartLegend,
+    ChartLegendContent,
+    ChartStyle
+};