@trackany-device/components 1.0.0

package/src/components/ui/chart.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import * as RechartsPrimitive from 'recharts';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+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;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+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;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  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
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {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(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                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-2.5 w-2.5': indicator === 'dot',
+                          'w-1': indicator === 'line',
+                          'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                          'my-0.5': 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-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+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 };

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+import { Check, Minus } from 'lucide-react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+// Define the variants for the Checkbox using cva.
+const checkboxVariants = cva(
+  `
+    group peer bg-background shrink-0 rounded-md border border-input ring-offset-background focus-visible:outline-none 
+    focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 
+    aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
+    [[data-invalid=true]_&]:border-destructive/60 [[data-invalid=true]_&]:ring-destructive/10  dark:[[data-invalid=true]_&]:border-destructive dark:[[data-invalid=true]_&]:ring-destructive/20,
+    data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground
+    `,
+  {
+    variants: {
+      size: {
+        sm: 'size-4.5 [&_svg]:size-3',
+        md: 'size-5 [&_svg]:size-3.5',
+        lg: 'size-5.5 [&_svg]:size-4',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+function Checkbox({
+  className,
+  size,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>) {
+  return (
+    <CheckboxPrimitive.Root data-slot="checkbox" className={cn(checkboxVariants({ size }), className)} {...props}>
+      <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+        <Check className="group-data-[state=indeterminate]:hidden" />
+        <Minus className="hidden group-data-[state=indeterminate]:block" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/ui/code.tsx

@@ -0,0 +1,45 @@
+/**
+ * Code — inline + block code wrappers, monospace and tinted surface.
+ *
+ *   Inline: <Code>P901-00042</Code>
+ *   Block:  <CodeBlock>{`const x = 1`}</CodeBlock>
+ */
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+export function Code({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLElement>) {
+    return (
+        <code
+            className={cn(
+                'rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </code>
+    );
+}
+
+export function CodeBlock({
+    className,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLPreElement>) {
+    return (
+        <pre
+            className={cn(
+                'overflow-x-auto rounded-lg border bg-surface-raised p-4 font-mono text-xs leading-relaxed text-foreground',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </pre>
+    );
+}

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/ui/command-palette.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+/**
+ * CommandPalette — global Ctrl+K / ⌘K launcher.
+ *
+ * Renders a centred dialog with a fuzzy-searchable list of commands.
+ * Mount once near the app root (already added in app.tsx via
+ * <CommandPaletteRoot/>). Pass the commands as a prop or extend via
+ * the global window event `command-palette:register`.
+ *
+ *   <CommandPaletteRoot commands={[
+ *     { id: 'orders', label: 'Go to Orders', href: '/orders', icon: ShoppingBag },
+ *   ]} />
+ *
+ * available in the consuming app.
+ */
+import { Command } from 'cmdk';
+import type { LucideIcon } from 'lucide-react';
+import { PlatformLink, usePlatformNavigate } from '../../platform/context';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Dialog, DialogContent } from './dialog';
+import { Kbd } from './kbd';
+import { cn } from '../../lib/utils';
+
+export type CommandItem = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: LucideIcon;
+    href?: string;
+    /** Custom handler — fires before closing the palette. */
+    onSelect?: () => void;
+    /** Group label; items without a group fall under "Commands". */
+    group?: string;
+    /** Extra search terms not visible in the label. */
+    keywords?: string[];
+};
+
+type Props = {
+    commands?: CommandItem[];
+};
+
+export function CommandPaletteRoot({ commands = [] }: Props) {
+    const navigate = usePlatformNavigate();
+    const [open, setOpen] = React.useState(false);
+
+    React.useEffect(() => {
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                setOpen((prev) => !prev);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+
+    React.useEffect(() => {
+        const onOpen = () => setOpen(true);
+        window.addEventListener('command-palette:open', onOpen);
+        return () =>
+            window.removeEventListener('command-palette:open', onOpen);
+    }, []);
+
+    const groups = React.useMemo(() => {
+        const buckets = new Map<string, CommandItem[]>();
+        for (const cmd of commands) {
+            const key = cmd.group ?? 'Commands';
+            if (!buckets.has(key)) buckets.set(key, []);
+            buckets.get(key)!.push(cmd);
+        }
+        return Array.from(buckets.entries());
+    }, [commands]);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent
+                showCloseButton={false}
+                className="overflow-hidden p-0 sm:max-w-[560px]"
+            >
+                <Command
+                    label="Global command palette"
+                    className="flex flex-col"
+                >
+                    <div className="flex items-center gap-2 border-b px-3 py-2.5">
+                        <Search
+                            aria-hidden="true"
+                            className="size-4 text-muted-foreground"
+                        />
+                        <Command.Input
+                            autoFocus
+                            placeholder="Search commands…"
+                            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                        />
+                        <Kbd>esc</Kbd>
+                    </div>
+                    <Command.List className="max-h-[360px] overflow-y-auto p-1">
+                        <Command.Empty className="py-6 text-center text-sm text-muted-foreground">
+                            No matches.
+                        </Command.Empty>
+                        {groups.map(([group, items]) => (
+                            <Command.Group
+                                key={group}
+                                heading={group}
+                                className="px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground [&_[cmdk-group-heading]]:px-1 [&_[cmdk-group-heading]]:py-1"
+                            >
+                                {items.map((cmd) => {
+                                    const Icon = cmd.icon;
+                                    const onSelect = () => {
+                                        cmd.onSelect?.();
+                                        if (cmd.href) navigate(cmd.href);
+                                        setOpen(false);
+                                    };
+                                    return (
+                                        <Command.Item
+                                            key={cmd.id}
+                                            value={[
+                                                cmd.label,
+                                                cmd.description ?? '',
+                                                ...(cmd.keywords ?? []),
+                                            ].join(' ')}
+                                            onSelect={onSelect}
+                                            className={cn(
+                                                'flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm text-foreground transition-colors',
+                                                'aria-selected:bg-accent aria-selected:text-accent-foreground',
+                                            )}
+                                        >
+                                            {Icon && (
+                                                <Icon
+                                                    aria-hidden="true"
+                                                    className="size-4 text-muted-foreground"
+                                                />
+                                            )}
+                                            <span className="flex-1">
+                                                {cmd.label}
+                                            </span>
+                                            {cmd.description && (
+                                                <span className="text-xs text-muted-foreground">
+                                                    {cmd.description}
+                                                </span>
+                                            )}
+                                        </Command.Item>
+                                    );
+                                })}
+                            </Command.Group>
+                        ))}
+                    </Command.List>
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+/** Convenience link for the top bar trigger — pairs a search icon + shortcut hint. */
+export function CommandPaletteTrigger({
+    className,
+}: {
+    className?: string;
+}) {
+    return (
+        <button
+            type="button"
+            onClick={() =>
+                window.dispatchEvent(new CustomEvent('command-palette:open'))
+            }
+            className={cn(
+                'inline-flex items-center gap-2 rounded-md border bg-surface px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+                className,
+            )}
+        >
+            <Search aria-hidden="true" className="size-3.5" />
+            <span>Search…</span>
+            <Kbd className="ml-2">⌘K</Kbd>
+        </button>
+    );
+}
+
+/** Static fallback for SSR / tests where Link isn't useful. */
+export function CommandPaletteLink({
+    href,
+    children,
+}: {
+    href: string;
+    children: React.ReactNode;
+}) {
+    return <PlatformLink href={href}>{children}</PlatformLink>;
+}