@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/components/data-display/avatar/presence-dot.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The live "here now" mark: an 8px success dot, ringed in the card colour so
+ * it separates from whatever it sits on, with a ping so it reads as live
+ * rather than as a status colour. On its own so it can sit on any edge.
+ */
+export type PresenceDotProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    /** Read to screen readers, e.g. "Has this ticket open". */
+    label?: string;
+};
+declare const PresenceDot: import("svelte").Component<PresenceDotProps, {}, "ref">;
+type PresenceDot = ReturnType<typeof PresenceDot>;
+export default PresenceDot;

package/dist/components/data-display/badge/badge-variants.d.ts

@@ -0,0 +1,6 @@
+export type BadgeVariant = 'solid' | 'soft' | 'outline';
+export declare const badgeVariants: (props?: ({
+    variant?: "solid" | "soft" | "outline" | null | undefined;
+    count?: boolean | null | undefined;
+    tone?: "neutral" | "primary" | "info" | "success" | "warning" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/data-display/badge/badge-variants.js

@@ -0,0 +1,53 @@
+/**
+ * Origin: the React package 2.23.0 `badge.tsx` (`badgeVariants`), itself shadcn/ui new-york `badge`
+ * Diverged: split out of the component file, as button-variants.ts is.
+ *   Classes, variants and defaults unchanged.
+ */
+import { cva } from 'class-variance-authority';
+import { TONE_OUTLINE_CLASS, TONE_SOFT_CLASS, TONE_SOLID_CLASS, TONES, } from '../../../utils/tone.js';
+const TREATMENT = {
+    solid: TONE_SOLID_CLASS,
+    soft: TONE_SOFT_CLASS,
+    outline: TONE_OUTLINE_CLASS,
+};
+export const badgeVariants = cva('inline-flex items-center justify-center rounded-lg border border-transparent px-2 py-0.5 text-xs w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:opacity-90', {
+    variants: {
+        variant: {
+            solid: '',
+            soft: '',
+            outline: 'bg-transparent',
+        },
+        /**
+         * The label shape is `rounded-lg px-2`, sized for a word. Around one digit
+         * that is a squarish lozenge wider than it is tall. A count fixes the
+         * height and makes it the minimum width, so a single digit is a circle;
+         * `px-1.5` only takes over once a second digit outgrows it.
+         */
+        count: {
+            true: 'h-5 min-w-5 rounded-full px-1.5 py-0 tabular-nums',
+            false: '',
+        },
+        /**
+         * A neutral badge is regular weight; a toned one is medium.
+         *
+         * Counted before 2.0: 36 of 152 badges in the portals overrode the weight
+         * to `font-normal`, and 34 of those were neutral — `outline` or the old
+         * `secondary`. A neutral badge is a label on a row, and at medium weight
+         * a column of them outshouts the row's own title. Weight is for a state.
+         */
+        tone: {
+            neutral: 'font-normal',
+            primary: 'font-medium',
+            info: 'font-medium',
+            success: 'font-medium',
+            warning: 'font-medium',
+            critical: 'font-medium',
+        },
+    },
+    compoundVariants: ['solid', 'soft', 'outline'].flatMap((variant) => TONES.map((tone) => ({ variant, tone, class: TREATMENT[variant][tone] }))),
+    defaultVariants: {
+        variant: 'soft',
+        tone: 'neutral',
+        count: false,
+    },
+});

package/dist/components/data-display/badge/badge.svelte

@@ -0,0 +1,66 @@
+<!--
+  Origin: the React package 2.23.0 `badge.tsx`, itself shadcn/ui new-york `badge`
+  Svelte: shadcn-svelte `badge`
+  Diverged: `asChild` dropped for `href`, which renders an <a>; the
+    `[a&]:hover:opacity-90` class already styles that case.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+
+  import type { Tone } from '../../../utils/tone.js'
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { BadgeVariant } from './badge-variants.js'
+
+  /**
+   * A short label on a row: a status, a tag, a count. Colour and shape are two
+   * props because they are two decisions. Whether a badge is a state (`soft`),
+   * a thing done (`solid`) or a tag (`outline`) is the composition's call;
+   * what that state is (`success`, `critical`) is the data's.
+   */
+  export type BadgeProps = WithElementRef<HTMLAnchorAttributes> & {
+    /**
+     * `soft` is a state something is in. `solid` is a thing that was done, and
+     * shouts. `outline` is a tag: metadata the reader may want, not a state to
+     * act on.
+     */
+    variant?: BadgeVariant
+    tone?: Tone
+    /**
+     * A number on its own: one digit draws a circle and more stretch it into a
+     * pill of the same height, so a column of counts keeps one silhouette.
+     */
+    count?: boolean
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { badgeVariants } from './badge-variants.js'
+
+  let {
+    variant = 'soft',
+    tone = 'neutral',
+    count = false,
+    href,
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: BadgeProps = $props()
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  bind:this={ref}
+  {href}
+  data-slot="badge"
+  data-variant={variant}
+  data-tone={tone}
+  data-count={count || undefined}
+  class={cn(badgeVariants({ variant, tone, count }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/components/data-display/badge/badge.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { BadgeVariant } from './badge-variants.js';
+/**
+ * A short label on a row: a status, a tag, a count. Colour and shape are two
+ * props because they are two decisions. Whether a badge is a state (`soft`),
+ * a thing done (`solid`) or a tag (`outline`) is the composition's call;
+ * what that state is (`success`, `critical`) is the data's.
+ */
+export type BadgeProps = WithElementRef<HTMLAnchorAttributes> & {
+    /**
+     * `soft` is a state something is in. `solid` is a thing that was done, and
+     * shouts. `outline` is a tag: metadata the reader may want, not a state to
+     * act on.
+     */
+    variant?: BadgeVariant;
+    tone?: Tone;
+    /**
+     * A number on its own: one digit draws a circle and more stretch it into a
+     * pill of the same height, so a column of counts keeps one silhouette.
+     */
+    count?: boolean;
+    children?: Snippet;
+};
+declare const Badge: import("svelte").Component<BadgeProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/data-display/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { type BadgeProps, default as Badge } from './badge.svelte';
+export { type BadgeVariant, badgeVariants } from './badge-variants.js';

package/dist/components/data-display/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants } from './badge-variants.js';

package/dist/components/data-display/chart/chart-defaults.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Origin: the React package 2.23.0 `chart-defaults.ts`
+ * Diverged: LayerChart's props for recharts'. `chartAxis` is gone: the tick
+ *   lines and axis line it removed are removed by `ChartContainer`'s classes.
+ *   `chartGrid` keeps the horizontal lines only, as LayerChart's `x` and `y`
+ *   switches. The comparison series is a class, since LayerChart takes the
+ *   dash as CSS.
+ */
+/** Horizontal grid lines only: a vertical line per tick competes with the marks. */
+export declare const chartGrid: {
+    readonly x: false;
+    readonly y: true;
+};
+/** A light wash under an area, so the line stays the thing read. */
+export declare const chartAreaFillOpacity = 0.15;
+/** The weight of a series line. */
+export declare const chartLineStrokeWidth = 3;
+/**
+ * A comparison series (last period, a target): muted and dashed, so it reads
+ * as context behind the series that matters.
+ */
+export declare const chartComparisonSeriesClass = "stroke-muted-foreground [stroke-dasharray:6_4]";

package/dist/components/data-display/chart/chart-defaults.js

@@ -0,0 +1,19 @@
+/**
+ * Origin: the React package 2.23.0 `chart-defaults.ts`
+ * Diverged: LayerChart's props for recharts'. `chartAxis` is gone: the tick
+ *   lines and axis line it removed are removed by `ChartContainer`'s classes.
+ *   `chartGrid` keeps the horizontal lines only, as LayerChart's `x` and `y`
+ *   switches. The comparison series is a class, since LayerChart takes the
+ *   dash as CSS.
+ */
+/** Horizontal grid lines only: a vertical line per tick competes with the marks. */
+export const chartGrid = { x: false, y: true };
+/** A light wash under an area, so the line stays the thing read. */
+export const chartAreaFillOpacity = 0.15;
+/** The weight of a series line. */
+export const chartLineStrokeWidth = 3;
+/**
+ * A comparison series (last period, a target): muted and dashed, so it reads
+ * as context behind the series that matters.
+ */
+export const chartComparisonSeriesClass = 'stroke-muted-foreground [stroke-dasharray:6_4]';

package/dist/components/data-display/chart/chart-style.svelte

@@ -0,0 +1,49 @@
+<!--
+  Origin: the React package 2.23.0 `chart.tsx` (`ChartStyle`), itself shadcn/ui new-york `chart`
+  Svelte: shadcn-svelte `chart`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { ChartConfig } from './chart-utils.js'
+
+  /** The scoped `<style>` that writes a chart's colours for light and dark. */
+  export type ChartStyleProps = { id: string; config: ChartConfig }
+</script>
+
+<script lang="ts">
+  import { THEMES } from './chart-utils.js'
+
+  let { id, config }: ChartStyleProps = $props()
+
+  const colorConfig = $derived(
+    config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null,
+  )
+
+  const themeContents = $derived.by(() => {
+    if (!colorConfig?.length) return
+
+    const themeContents = []
+    for (const [_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/dist/components/data-display/chart/chart-style.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ChartConfig } from './chart-utils.js';
+/** The scoped `<style>` that writes a chart's colours for light and dark. */
+export type ChartStyleProps = {
+    id: string;
+    config: ChartConfig;
+};
+declare const ChartStyle: import("svelte").Component<ChartStyleProps, {}, "">;
+type ChartStyle = ReturnType<typeof ChartStyle>;
+export default ChartStyle;

package/dist/components/data-display/chart/chart-tooltip.svelte

@@ -0,0 +1,201 @@
+<!--
+  Origin: the React package 2.23.0 `chart.tsx` (`ChartTooltipContent`), itself shadcn/ui new-york `chart`
+  Svelte: shadcn-svelte `chart`
+  Diverged: LayerChart's tooltip for recharts', so `ChartTooltip` is one part
+    where React had `ChartTooltip` and `ChartTooltipContent`. Values are
+    `tabular-nums` without `font-mono`, which the package does not use.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef, WithoutChildren } from '../../../utils/types.js'
+  import type { TooltipPayload } from './chart-utils.js'
+
+  /**
+   * The hover card a chart draws: the point's label, then a row per series
+   * with its indicator, its config label and its value.
+   */
+  export type ChartTooltipProps = WithoutChildren<
+    WithElementRef<HTMLAttributes<HTMLDivElement>>
+  > & {
+    hideLabel?: boolean
+    label?: string
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+    hideIndicator?: boolean
+    labelClassName?: string
+    labelFormatter?:
+      | ((value: unknown, payload: TooltipPayload[]) => string | number | Snippet)
+      | null
+    formatter?: Snippet<
+      [
+        {
+          value: unknown
+          name: string
+          item: TooltipPayload
+          index: number
+          payload: TooltipPayload[]
+        },
+      ]
+    >
+  }
+</script>
+
+<script lang="ts">
+  import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart'
+  import { cn } from '../../../utils/cn.js'
+  import { getPayloadConfigFromPayload, useChart } from './chart-utils.js'
+
+  function defaultFormatter(value: unknown, _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
+  }: ChartTooltipProps = $props()
+
+  const chart = useChart()
+  const chartCtx = getChartContext()
+
+  // Filter to series with defined values (important for item-based charts like Pie/Arc
+  // where only the hovered item has a value)
+  const visibleSeries = $derived(
+    chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined),
+  )
+
+  const formattedLabel = $derived.by(() => {
+    if (hideLabel || !visibleSeries?.length) return null
+
+    const [item] = visibleSeries
+    const tooltipData = chartCtx.tooltip.data
+
+    // Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
+    const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined
+
+    const key = labelKey ?? item?.label ?? item?.key ?? 'value'
+    const itemConfig = getPayloadConfigFromPayload(
+      chart.config,
+      item,
+      key,
+      tooltipData as Record<string, unknown> | null,
+    )
+
+    let value: unknown
+    if (!labelKey && typeof label === 'string') {
+      value = chart.config[label as keyof typeof chart.config]?.label ?? label
+    } else if (labelKey) {
+      value = itemConfig?.label ?? dataLabel
+    } else {
+      value = dataLabel
+    }
+
+    if (value === undefined) return null
+    if (!labelFormatter) return value
+    return labelFormatter(value, visibleSeries)
+  })
+
+  const nestLabel = $derived(visibleSeries.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
+    bind:this={ref}
+    class={cn(
+      'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+      className,
+    )}
+    {...restProps}
+  >
+    {#if !nestLabel}
+      {@render TooltipLabel()}
+    {/if}
+    <div class="grid gap-1.5">
+      {#each visibleSeries as item, i (item.key + i)}
+        {@const key = `${nameKey || item.key || item.label || 'value'}`}
+        {@const itemConfig = getPayloadConfigFromPayload(
+          chart.config,
+          item,
+          key,
+          chartCtx.tooltip.data,
+        )}
+        {@const indicatorColor = color || item.config?.color || item.color}
+        <div
+          class={cn(
+            'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+            indicator === 'dot' && 'items-center',
+          )}
+        >
+          {#if formatter && item.value !== undefined && item.label}
+            {@render formatter({
+              value: item.value,
+              name: item.label,
+              item,
+              index: i,
+              payload: visibleSeries,
+            })}
+          {:else}
+            {#if itemConfig?.icon}
+              <itemConfig.icon />
+            {:else if !hideIndicator}
+              <div
+                style='--color-bg: {indicatorColor}; --color-border: {indicatorColor};'
+                class={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                  'h-2.5 w-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.label}
+                </span>
+              </div>
+              {#if item.value !== undefined}
+                <span class="font-medium text-foreground tabular-nums">
+                  {item.value.toLocaleString()}
+                </span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</TooltipPrimitive.Root>

package/dist/components/data-display/chart/chart-tooltip.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef, WithoutChildren } from '../../../utils/types.js';
+import type { TooltipPayload } from './chart-utils.js';
+/**
+ * The hover card a chart draws: the point's label, then a row per series
+ * with its indicator, its config label and its value.
+ */
+export type ChartTooltipProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: ((value: unknown, payload: TooltipPayload[]) => string | number | Snippet) | null;
+    formatter?: Snippet<[
+        {
+            value: unknown;
+            name: string;
+            item: TooltipPayload;
+            index: number;
+            payload: TooltipPayload[];
+        }
+    ]>;
+};
+declare const ChartTooltip: import("svelte").Component<ChartTooltipProps, {}, "ref">;
+type ChartTooltip = ReturnType<typeof ChartTooltip>;
+export default ChartTooltip;

package/dist/components/data-display/chart/chart-utils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Origin: the React package 2.23.0 `chart.tsx` (`ChartConfig`, `useChart`, `getPayloadConfigFromPayload`), itself shadcn/ui new-york `chart`
+ * Svelte: shadcn-svelte `chart`
+ * Diverged: LayerChart for recharts, as shadcn-svelte has it. The config, the
+ *   context and the payload lookup are shadcn-svelte's.
+ */
+import type { Tooltip } from 'layerchart';
+import { type Component, type Snippet } from 'svelte';
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+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 = Tooltip.TooltipSeries;
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string, data?: Record<string, unknown> | null): ({
+    label?: string;
+    icon?: Component;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})) | undefined;
+type ChartContextValue = {
+    config: ChartConfig;
+};
+export declare function setChartContext(value: ChartContextValue): ChartContextValue;
+export declare function useChart(): ChartContextValue;
+export {};

package/dist/components/data-display/chart/chart-utils.js

@@ -0,0 +1,42 @@
+/**
+ * Origin: the React package 2.23.0 `chart.tsx` (`ChartConfig`, `useChart`, `getPayloadConfigFromPayload`), itself shadcn/ui new-york `chart`
+ * Svelte: shadcn-svelte `chart`
+ * Diverged: LayerChart for recharts, as shadcn-svelte has it. The config, the
+ *   context and the payload lookup are shadcn-svelte's.
+ */
+import { getContext, setContext } from 'svelte';
+export const THEMES = { light: '', dark: '.dark' };
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(config, payload, key, data) {
+    if (typeof payload !== 'object' || payload === null)
+        return undefined;
+    const payloadConfig = 'config' in payload && typeof payload.config === 'object' && payload.config !== null
+        ? payload.config
+        : undefined;
+    let configLabelKey = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    }
+    else if (payload.label === key) {
+        configLabelKey = payload.label;
+    }
+    else if (key in payload && typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadConfig !== undefined &&
+        key in payloadConfig &&
+        typeof payloadConfig[key] === 'string') {
+        configLabelKey = payloadConfig[key];
+    }
+    else if (data != null && key in data && typeof data[key] === 'string') {
+        configLabelKey = data[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+const chartContextKey = Symbol('chart-context');
+export function setChartContext(value) {
+    return setContext(chartContextKey, value);
+}
+export function useChart() {
+    return getContext(chartContextKey);
+}