kumo-svelte 0.1.0-beta.0

package/dist/components/button/Button.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+  import { Loader } from '../loader';
+  import { Tooltip } from '../tooltip';
+
+  export const KUMO_BUTTON_VARIANTS = {
+    shape: {
+      base: {
+        classes: '',
+        description: 'Default rectangular button shape'
+      },
+      square: {
+        classes: 'items-center justify-center p-0',
+        description: 'Square button for icon-only actions'
+      },
+      circle: {
+        classes: 'items-center justify-center p-0 rounded-full',
+        description: 'Circular button for icon-only actions'
+      }
+    },
+    size: {
+      xs: {
+        classes: 'h-5 gap-1 rounded-sm px-1.5 text-xs',
+        description: 'Extra small button for compact UIs'
+      },
+      sm: {
+        classes: 'h-6.5 gap-1 rounded-md px-2 text-xs',
+        description: 'Small button for secondary actions'
+      },
+      base: {
+        classes: 'h-9 gap-1.5 rounded-lg px-3 text-base',
+        description: 'Default button size'
+      },
+      lg: {
+        classes: 'h-10 gap-2 rounded-lg px-4 text-base',
+        description: 'Large button for primary CTAs'
+      }
+    },
+    compactSize: {
+      xs: { classes: 'size-3.5' },
+      sm: { classes: 'size-6.5' },
+      base: { classes: 'size-9' },
+      lg: { classes: 'size-10' }
+    },
+    variant: {
+      primary: {
+        classes: 'bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50',
+        description: 'High-emphasis button for primary actions'
+      },
+      secondary: {
+        classes:
+          'bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base',
+        description: 'Default button style for most actions'
+      },
+      ghost: {
+        classes: 'text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit',
+        description: 'Minimal button with no background'
+      },
+      destructive: {
+        classes: 'bg-kumo-danger !text-white hover:bg-kumo-danger/70',
+        description: 'Danger button for destructive actions like delete'
+      },
+      'secondary-destructive': {
+        classes:
+          'bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base',
+        description: 'Secondary button with destructive text for less prominent dangerous actions'
+      },
+      outline: {
+        classes: 'bg-transparent text-kumo-default ring ring-kumo-hairline',
+        description: 'Bordered button with transparent background'
+      }
+    }
+  } as const;
+
+  export const KUMO_BUTTON_DEFAULT_VARIANTS = {
+    shape: 'base',
+    size: 'base',
+    variant: 'secondary'
+  } as const;
+
+  type Shape = keyof typeof KUMO_BUTTON_VARIANTS.shape;
+  type Size = keyof typeof KUMO_BUTTON_VARIANTS.size;
+  type Variant = keyof typeof KUMO_BUTTON_VARIANTS.variant;
+
+  export function buttonVariants({
+    variant = KUMO_BUTTON_DEFAULT_VARIANTS.variant,
+    size = KUMO_BUTTON_DEFAULT_VARIANTS.size,
+    shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape
+  }: {
+    shape?: Shape;
+    size?: Size;
+    variant?: Variant;
+  } = {}) {
+    const isCompactShape = shape === 'square' || shape === 'circle';
+
+    return cn(
+      'group flex w-max shrink-0 items-center font-medium select-none',
+      'border-0 shadow-xs',
+      'focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand',
+      'cursor-pointer',
+      'disabled:cursor-not-allowed disabled:text-kumo-subtle',
+      KUMO_BUTTON_VARIANTS.variant[variant].classes,
+      KUMO_BUTTON_VARIANTS.size[size].classes,
+      KUMO_BUTTON_VARIANTS.shape[shape].classes,
+      isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes
+    );
+  }
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    href?: string;
+    external?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    shape?: Shape;
+    size?: Size;
+    variant?: Variant;
+    loading?: boolean;
+    title?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    icon: IconComponent,
+    href,
+    external = false,
+    type = 'button',
+    disabled = false,
+    shape = 'base',
+    size = 'base',
+    variant = 'secondary',
+    loading = false,
+    title,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    cn(
+      buttonVariants({ variant, size, shape }),
+      disabled && 'cursor-not-allowed opacity-50',
+      href && 'flex items-center no-underline!',
+      className
+    )
+  );
+
+  const loaderSize = $derived(size === 'lg' ? 16 : 14);
+  const externalProps = $derived(external ? { target: '_blank', rel: 'noopener noreferrer' } : {});
+</script>
+
+{#snippet buttonElement()}
+  <svelte:element
+    this={href ? 'a' : 'button'}
+    class={classes}
+    href={href}
+    type={href ? undefined : type}
+    disabled={href ? undefined : disabled || loading}
+    aria-busy={loading || undefined}
+    {...externalProps}
+    {...rest}
+  >
+    {#if loading}
+      <Loader size={loaderSize} />
+    {:else if IconComponent}
+      <IconComponent />
+    {/if}
+    {#if children}
+      <span class="contents">{@render children()}</span>
+    {/if}
+  </svelte:element>
+{/snippet}
+
+{#if title}
+  <Tooltip trigger={buttonElement}>{title}</Tooltip>
+{:else}
+  {@render buttonElement()}
+{/if}

package/dist/components/button/Button.svelte.d.ts

@@ -0,0 +1,103 @@
+import type { Component, Snippet } from 'svelte';
+declare const Button: Component<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    href?: string;
+    external?: boolean;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    shape?: "base" | "circle" | "square";
+    size?: "base" | "xs" | "sm" | "lg";
+    variant?: "secondary" | "primary" | "ghost" | "destructive" | "secondary-destructive" | "outline";
+    loading?: boolean;
+    title?: string;
+}, {
+    KUMO_BUTTON_VARIANTS: {
+        readonly shape: {
+            readonly base: {
+                readonly classes: "";
+                readonly description: "Default rectangular button shape";
+            };
+            readonly square: {
+                readonly classes: "items-center justify-center p-0";
+                readonly description: "Square button for icon-only actions";
+            };
+            readonly circle: {
+                readonly classes: "items-center justify-center p-0 rounded-full";
+                readonly description: "Circular button for icon-only actions";
+            };
+        };
+        readonly size: {
+            readonly xs: {
+                readonly classes: "h-5 gap-1 rounded-sm px-1.5 text-xs";
+                readonly description: "Extra small button for compact UIs";
+            };
+            readonly sm: {
+                readonly classes: "h-6.5 gap-1 rounded-md px-2 text-xs";
+                readonly description: "Small button for secondary actions";
+            };
+            readonly base: {
+                readonly classes: "h-9 gap-1.5 rounded-lg px-3 text-base";
+                readonly description: "Default button size";
+            };
+            readonly lg: {
+                readonly classes: "h-10 gap-2 rounded-lg px-4 text-base";
+                readonly description: "Large button for primary CTAs";
+            };
+        };
+        readonly compactSize: {
+            readonly xs: {
+                readonly classes: "size-3.5";
+            };
+            readonly sm: {
+                readonly classes: "size-6.5";
+            };
+            readonly base: {
+                readonly classes: "size-9";
+            };
+            readonly lg: {
+                readonly classes: "size-10";
+            };
+        };
+        readonly variant: {
+            readonly primary: {
+                readonly classes: "bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50";
+                readonly description: "High-emphasis button for primary actions";
+            };
+            readonly secondary: {
+                readonly classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base";
+                readonly description: "Default button style for most actions";
+            };
+            readonly ghost: {
+                readonly classes: "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit";
+                readonly description: "Minimal button with no background";
+            };
+            readonly destructive: {
+                readonly classes: "bg-kumo-danger !text-white hover:bg-kumo-danger/70";
+                readonly description: "Danger button for destructive actions like delete";
+            };
+            readonly 'secondary-destructive': {
+                readonly classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base";
+                readonly description: "Secondary button with destructive text for less prominent dangerous actions";
+            };
+            readonly outline: {
+                readonly classes: "bg-transparent text-kumo-default ring ring-kumo-hairline";
+                readonly description: "Bordered button with transparent background";
+            };
+        };
+    };
+    KUMO_BUTTON_DEFAULT_VARIANTS: {
+        readonly shape: "base";
+        readonly size: "base";
+        readonly variant: "secondary";
+    };
+    buttonVariants: ({ variant, size, shape }?: {
+        shape?: "base" | "circle" | "square";
+        size?: "base" | "xs" | "sm" | "lg";
+        variant?: "secondary" | "primary" | "ghost" | "destructive" | "secondary-destructive" | "outline";
+    }) => string;
+}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/button/LinkButton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import Button from './Button.svelte';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    href?: string;
+    external?: boolean;
+    linksExternal?: boolean;
+    shape?: 'base' | 'square' | 'circle';
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'secondary-destructive' | 'outline';
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    icon,
+    href,
+    external = false,
+    linksExternal,
+    shape = 'base',
+    size = 'base',
+    variant = 'ghost',
+    ...rest
+  }: Props = $props();
+</script>
+
+<Button
+  {href}
+  {external}
+  {icon}
+  {shape}
+  {size}
+  {variant}
+  class={className}
+  {...rest}
+>
+  {@render children?.()}
+</Button>

package/dist/components/button/LinkButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+    icon?: Component;
+    href?: string;
+    external?: boolean;
+    linksExternal?: boolean;
+    shape?: 'base' | 'square' | 'circle';
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'secondary-destructive' | 'outline';
+    [key: string]: unknown;
+}
+declare const LinkButton: Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/components/button/RefreshButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { ArrowClockwise } from 'phosphor-svelte';
+  import { cn } from '../../utils/cn';
+  import Button from './Button.svelte';
+
+  interface Props {
+    class?: string;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'secondary-destructive' | 'outline';
+    'aria-label'?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    class: className,
+    loading = false,
+    size = 'base',
+    variant = 'secondary',
+    'aria-label': ariaLabel = 'Refresh',
+    ...rest
+  }: Props = $props();
+</script>
+
+<Button shape="square" {size} {variant} aria-label={ariaLabel} class={className} {...rest}>
+  <ArrowClockwise
+    class={cn({
+      'animate-refresh': loading,
+      'size-4.5': size === 'base',
+      'size-4': size === 'sm' || size === 'xs',
+      'size-5': size === 'lg'
+    })}
+  />
+</Button>

package/dist/components/button/RefreshButton.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'secondary-destructive' | 'outline';
+    'aria-label'?: string;
+    [key: string]: unknown;
+}
+declare const RefreshButton: import("svelte").Component<Props, {}, "">;
+type RefreshButton = ReturnType<typeof RefreshButton>;
+export default RefreshButton;

package/dist/components/button/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.svelte';
+export { default as LinkButton } from './LinkButton.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';

package/dist/components/button/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.svelte';
+export { default as LinkButton } from './LinkButton.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';

package/dist/components/chart/Chart.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { EChartsOption, SetOptionOpts, TooltipComponentOption } from 'echarts';
+  import type { EChartsType } from 'echarts/core';
+  import { cn } from '../../utils/cn';
+  import { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from './Color';
+
+  export type SafeTooltipOption = Omit<TooltipComponentOption, 'formatter'> & {
+    dangerousHtmlFormatter?: TooltipComponentOption['formatter'];
+  };
+
+  export type KumoChartOption = {
+    [K in keyof EChartsOption]: K extends 'tooltip' ? SafeTooltipOption | SafeTooltipOption[] | undefined : EChartsOption[K];
+  };
+
+  export type ChartEvents = Record<string, (params: any) => void>;
+
+  interface Props {
+    echarts: any;
+    options: KumoChartOption;
+    optionUpdateBehavior?: SetOptionOpts;
+    class?: string;
+    isDarkMode?: boolean;
+    height?: number;
+    onEvents?: Partial<ChartEvents>;
+    chartRef?: EChartsType | null;
+  }
+
+  let {
+    echarts,
+    options,
+    optionUpdateBehavior,
+    class: className,
+    isDarkMode = false,
+    height = 350,
+    onEvents = {},
+    chartRef = $bindable(null)
+  }: Props = $props();
+
+  let el: HTMLDivElement;
+  let chart: EChartsType | null = null;
+  let resizeObserver: ResizeObserver | null = null;
+  const eventWrappers = new Map<string, (params: any) => void>();
+  let boundEvents = new Set<string>();
+
+  const transformTooltip = (tooltipObj: SafeTooltipOption) => {
+    const { dangerousHtmlFormatter, ...restOfTooltip } = tooltipObj;
+    return { ...restOfTooltip, formatter: dangerousHtmlFormatter };
+  };
+
+  const prepareChartOptions = (rawOptions: KumoChartOption): EChartsOption => {
+    if (!rawOptions.tooltip) return rawOptions as EChartsOption;
+    return {
+      ...rawOptions,
+      tooltip: Array.isArray(rawOptions.tooltip) ? rawOptions.tooltip.map(transformTooltip) : transformTooltip(rawOptions.tooltip)
+    } as EChartsOption;
+  };
+
+  const bindEvents = () => {
+    if (!chart) return;
+    const nextBound = new Set<string>();
+    for (const [event, handler] of Object.entries(onEvents ?? {})) {
+      if (typeof handler !== 'function') continue;
+      nextBound.add(event);
+      if (!eventWrappers.has(event)) {
+        eventWrappers.set(event, (params: any) => onEvents?.[event]?.(params));
+      }
+      if (!boundEvents.has(event)) chart.on(event, eventWrappers.get(event)!);
+    }
+    for (const event of boundEvents) {
+      if (nextBound.has(event)) continue;
+      const wrapper = eventWrappers.get(event);
+      if (wrapper) chart.off(event, wrapper);
+    }
+    boundEvents = nextBound;
+  };
+
+  const initChart = () => {
+    if (!el) return;
+    chart?.dispose();
+    const nextChart = echarts.init(el, isDarkMode ? 'dark' : { color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS }, { renderer: 'canvas' });
+    chart = nextChart;
+    chartRef = nextChart;
+    nextChart.setOption(prepareChartOptions(options), { notMerge: false, lazyUpdate: true, ...optionUpdateBehavior });
+    bindEvents();
+  };
+
+  onMount(() => {
+    initChart();
+    let isInitialResize = true;
+    resizeObserver = new ResizeObserver(() => {
+      if (isInitialResize) {
+        isInitialResize = false;
+        return;
+      }
+      chart?.resize();
+    });
+    resizeObserver.observe(el);
+    return () => {
+      resizeObserver?.disconnect();
+      for (const event of boundEvents) {
+        const wrapper = eventWrappers.get(event);
+        if (wrapper) chart?.off(event, wrapper);
+      }
+      chart?.dispose();
+      chart = null;
+      chartRef = null;
+    };
+  });
+
+  $effect(() => {
+    if (chart) {
+      chart.setOption(prepareChartOptions(options), { notMerge: false, lazyUpdate: true, ...optionUpdateBehavior });
+      bindEvents();
+    }
+  });
+
+  $effect(() => {
+    isDarkMode;
+    if (chart) initChart();
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div bind:this={el} class={cn('w-full', className)} style:height={`${height}px`} tabindex={options.aria?.enabled ? 0 : undefined} role={options.aria?.enabled ? 'img' : undefined}></div>

package/dist/components/chart/Chart.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { EChartsOption, SetOptionOpts, TooltipComponentOption } from 'echarts';
+import type { EChartsType } from 'echarts/core';
+export type SafeTooltipOption = Omit<TooltipComponentOption, 'formatter'> & {
+    dangerousHtmlFormatter?: TooltipComponentOption['formatter'];
+};
+export type KumoChartOption = {
+    [K in keyof EChartsOption]: K extends 'tooltip' ? SafeTooltipOption | SafeTooltipOption[] | undefined : EChartsOption[K];
+};
+export type ChartEvents = Record<string, (params: any) => void>;
+interface Props {
+    echarts: any;
+    options: KumoChartOption;
+    optionUpdateBehavior?: SetOptionOpts;
+    class?: string;
+    isDarkMode?: boolean;
+    height?: number;
+    onEvents?: Partial<ChartEvents>;
+    chartRef?: EChartsType | null;
+}
+declare const Chart: import("svelte").Component<Props, {}, "chartRef">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/chart/ChartLegend.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    variant?: 'large' | 'small';
+    name: string;
+    color: string;
+    value: string;
+    unit?: string;
+    inactive?: boolean;
+  }
+
+  let { variant = 'small', name, color, value, unit, inactive = false }: Props = $props();
+</script>
+
+{#if variant === 'large'}
+  <div class="inline-flex min-w-42 flex-col gap-2 py-2">
+    <div class="flex items-center gap-2">
+      <span class={cn('inline-block size-2 rounded-full', inactive && 'opacity-50')} style:background-color={color}></span>
+      <span class={cn('text-xs', inactive && 'opacity-50')}>{name}</span>
+    </div>
+    <div class="flex items-baseline gap-0.5">
+      <span class={cn('text-lg leading-none font-medium', inactive && 'opacity-50')}>{value}</span>
+      {#if unit}<span class={cn('text-xs leading-none text-kumo-subtle', inactive && 'opacity-50')}>{unit}</span>{/if}
+    </div>
+  </div>
+{:else}
+  <div class="inline-flex items-center gap-2">
+    <span class={cn('inline-block size-2 rounded-full', inactive && 'opacity-50')} style:background-color={color}></span>
+    <span class={cn('text-xs', inactive && 'opacity-50')}>{name}</span>
+    <span class={cn('text-xs font-medium', inactive && 'opacity-50')}>{value}</span>
+    {#if unit}<span class={cn('text-xs text-kumo-subtle', inactive && 'opacity-50')}>{unit}</span>{/if}
+  </div>
+{/if}

package/dist/components/chart/ChartLegend.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    variant?: 'large' | 'small';
+    name: string;
+    color: string;
+    value: string;
+    unit?: string;
+    inactive?: boolean;
+}
+declare const ChartLegend: import("svelte").Component<Props, {}, "">;
+type ChartLegend = ReturnType<typeof ChartLegend>;
+export default ChartLegend;

package/dist/components/chart/Color.d.ts

@@ -0,0 +1,29 @@
+declare enum ChartCategoricalLightColors {
+    Blue = "#4290F0",
+    Yellow = "#F5B647",
+    Pink = "#E8649D",
+    Purple = "#8D58EE",
+    Teal = "#50C3B6",
+    Orange = "#D37536"
+}
+declare enum ChartCategoricalDarkColors {
+    Blue = "#4290F0",
+    Yellow = "#EEB720",
+    Pink = "#E8649D",
+    Purple = "#8D58EE",
+    Teal = "#50C3B6",
+    Orange = "#D37536"
+}
+export type ChartSemanticColorName = 'Attention' | 'Warning' | 'Success' | 'Neutral' | 'Disabled' | 'Skeleton';
+declare const sequentialLight: {
+    blues: string[];
+};
+export declare const CHART_LIGHT_COLORS: ChartCategoricalLightColors[];
+export declare const CHART_DARK_COLORS: ChartCategoricalDarkColors[];
+export declare namespace ChartPalette {
+    function semantic(name: ChartSemanticColorName, isDarkMode?: boolean): string;
+    function categorical(index: number, isDarkMode?: boolean): string;
+    function sequential(palette: keyof typeof sequentialLight, isDarkMode?: boolean): string[];
+    function text(variant: 'primary' | 'secondary', isDarkMode?: boolean): string;
+}
+export {};