seblify 0.2.1 → 0.4.0

package/dist/components/display/annotation/tag/Tag.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 type TagBorder = 'none' | 'solid' | 'dash';
 type TagRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-type TagTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type TagTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type TagSurface = 'default' | 'inverse';
 type TagVariant = 'solid' | 'soft' | 'tint' | 'plain';
 declare const Tag: import("svelte").Component<{
     border?: TagBorder | undefined;
@@ -9,6 +10,7 @@ declare const Tag: import("svelte").Component<{
     end?: Snippet | undefined;
     radius?: TagRadius | undefined;
     start?: Snippet | undefined;
+    surface?: TagSurface | undefined;
     tone?: TagTone | undefined;
     variant?: TagVariant | undefined;
 }, {}, "">;

package/dist/components/display/data-display/metric/date-time/DateTimeValue.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type {
+    DateTimeDateStyle,
+    DateTimeInput,
+    DateTimeTimeStyle,
+    FormatDateTimeOptions,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import {
+    dateTimeIsoString,
+    formatDateTime,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    dateStyle?: DateTimeDateStyle;
+    hour12?: boolean;
+    locale?: Intl.LocalesArgument;
+    timestamp: DateTimeInput;
+    timeStyle?: DateTimeTimeStyle;
+    timeZone?: string;
+  }>;
+
+  let {
+    class: className,
+    dateStyle = 'medium',
+    hour12,
+    locale,
+    timestamp,
+    timeStyle = 'short',
+    timeZone,
+    ...restProps
+  }: Props = $props();
+
+  const formatterOptions = $derived<FormatDateTimeOptions>({
+    dateStyle,
+    hour12,
+    locale,
+    timeStyle,
+    timeZone,
+  });
+  const text = $derived(formatDateTime(timestamp, formatterOptions));
+  const dateTime = $derived(dateTimeIsoString(timestamp));
+</script>
+
+<time
+  {...restProps}
+  class={`date-time-value${className ? ` ${className}` : ''}`}
+  datetime={dateTime}
+>
+  {text}
+</time>
+
+<style>
+  .date-time-value {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/date-time/DateTimeValue.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DateTimeDateStyle, DateTimeInput, DateTimeTimeStyle } from '../../../../utility/format/date-time/formatDateTime';
+declare const DateTimeValue: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    dateStyle?: DateTimeDateStyle | undefined;
+    hour12?: boolean | undefined;
+    locale?: Intl.LocalesArgument;
+    timestamp: DateTimeInput;
+    timeStyle?: DateTimeTimeStyle | undefined;
+    timeZone?: string | undefined;
+}, {}, "">;
+type DateTimeValue = ReturnType<typeof DateTimeValue>;
+export default DateTimeValue;

package/dist/components/display/data-display/metric/date-time/DateValue.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type {
+    DateTimeDateStyle,
+    DateTimeInput,
+    FormatDateOptions,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import {
+    dateTimeIsoString,
+    formatDate,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    dateStyle?: DateTimeDateStyle;
+    locale?: Intl.LocalesArgument;
+    timestamp: DateTimeInput;
+    timeZone?: string;
+  }>;
+
+  let {
+    class: className,
+    dateStyle = 'medium',
+    locale,
+    timestamp,
+    timeZone,
+    ...restProps
+  }: Props = $props();
+
+  const formatterOptions = $derived<FormatDateOptions>({
+    dateStyle,
+    locale,
+    timeZone,
+  });
+  const text = $derived(formatDate(timestamp, formatterOptions));
+  const dateTime = $derived(dateTimeIsoString(timestamp));
+</script>
+
+<time
+  {...restProps}
+  class={`date-value${className ? ` ${className}` : ''}`}
+  datetime={dateTime}
+>
+  {text}
+</time>
+
+<style>
+  .date-value {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/date-time/DateValue.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DateTimeDateStyle, DateTimeInput } from '../../../../utility/format/date-time/formatDateTime';
+declare const DateValue: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    dateStyle?: DateTimeDateStyle | undefined;
+    locale?: Intl.LocalesArgument;
+    timestamp: DateTimeInput;
+    timeZone?: string | undefined;
+}, {}, "">;
+type DateValue = ReturnType<typeof DateValue>;
+export default DateValue;

package/dist/components/display/data-display/metric/date-time/TimeValue.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type {
+    DateTimeInput,
+    DateTimeTimeStyle,
+    FormatTimeOptions,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import {
+    dateTimeIsoString,
+    formatTime,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    hour12?: boolean;
+    locale?: Intl.LocalesArgument;
+    timestamp: DateTimeInput;
+    timeStyle?: DateTimeTimeStyle;
+    timeZone?: string;
+  }>;
+
+  let {
+    class: className,
+    hour12,
+    locale,
+    timestamp,
+    timeStyle = 'short',
+    timeZone,
+    ...restProps
+  }: Props = $props();
+
+  const formatterOptions = $derived<FormatTimeOptions>({
+    hour12,
+    locale,
+    timeStyle,
+    timeZone,
+  });
+  const text = $derived(formatTime(timestamp, formatterOptions));
+  const dateTime = $derived(dateTimeIsoString(timestamp));
+</script>
+
+<time
+  {...restProps}
+  class={`time-value${className ? ` ${className}` : ''}`}
+  datetime={dateTime}
+>
+  {text}
+</time>
+
+<style>
+  .time-value {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/date-time/TimeValue.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DateTimeInput, DateTimeTimeStyle } from '../../../../utility/format/date-time/formatDateTime';
+declare const TimeValue: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    hour12?: boolean | undefined;
+    locale?: Intl.LocalesArgument;
+    timestamp: DateTimeInput;
+    timeStyle?: DateTimeTimeStyle | undefined;
+    timeZone?: string | undefined;
+}, {}, "">;
+type TimeValue = ReturnType<typeof TimeValue>;
+export default TimeValue;

package/dist/components/display/data-display/metric/duration/Duration.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type {
+    DurationFormat,
+    DurationRounding,
+    DurationStyle,
+    DurationUnit,
+    FormatDurationOptions,
+  } from '../../../../utility/format/duration/formatDuration';
+  import { formatDuration } from '../../../../utility/format/duration/formatDuration';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    format?: DurationFormat;
+    largestUnit?: DurationUnit;
+    locale?: Intl.LocalesArgument;
+    maxUnits?: number;
+    minUnits?: number;
+    rounding?: DurationRounding;
+    smallestUnit?: DurationUnit;
+    unitStyle?: DurationStyle;
+    value: number;
+  }>;
+
+  let {
+    class: className,
+    format = 'unit',
+    largestUnit = 'day',
+    locale,
+    maxUnits = 2,
+    minUnits = 1,
+    rounding,
+    smallestUnit = 'second',
+    unitStyle = 'long',
+    value,
+    ...restProps
+  }: Props = $props();
+
+  const formatterOptions = $derived<FormatDurationOptions>({
+    format,
+    largestUnit,
+    locale,
+    maxUnits,
+    minUnits,
+    rounding,
+    smallestUnit,
+    style: unitStyle,
+  });
+  const text = $derived(formatDuration(value, formatterOptions));
+</script>
+
+<span
+  {...restProps}
+  class={`duration${className ? ` ${className}` : ''}`}
+>
+  {text}
+</span>
+
+<style>
+  .duration {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/duration/Duration.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DurationFormat, DurationRounding, DurationStyle, DurationUnit } from '../../../../utility/format/duration/formatDuration';
+declare const Duration: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    format?: DurationFormat | undefined;
+    largestUnit?: DurationUnit | undefined;
+    locale?: Intl.LocalesArgument;
+    maxUnits?: number | undefined;
+    minUnits?: number | undefined;
+    rounding?: DurationRounding | undefined;
+    smallestUnit?: DurationUnit | undefined;
+    unitStyle?: DurationStyle | undefined;
+    value: number;
+}, {}, "">;
+type Duration = ReturnType<typeof Duration>;
+export default Duration;

package/dist/components/display/data-display/metric/relative-time/RelativeTime.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type {
+    FormatRelativeTimeOptions,
+    RelativeTimeInput,
+    RelativeTimeLabel,
+    RelativeTimeUnit,
+    RelativeTimeMode,
+    RelativeTimePresentation,
+    RelativeTimeRounding,
+    RelativeTimeStyle,
+    RelativeTimeUnitSteps,
+  } from '../../../../utility/format/relative-time/formatRelativeTime';
+  import {
+    formatRelativeTime,
+    getRelativeTimeState,
+    relativeTimeDateTime,
+  } from '../../../../utility/format/relative-time/formatRelativeTime';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    from?: RelativeTimeInput;
+    labels?: readonly RelativeTimeLabel[];
+    largestUnit?: RelativeTimeUnit;
+    locale?: Intl.LocalesArgument;
+    maxUnits?: number;
+    minUnits?: number;
+    mode?: RelativeTimeMode;
+    presentation?: RelativeTimePresentation;
+    rounding?: RelativeTimeRounding;
+    smallestUnit?: RelativeTimeUnit;
+    unitStyle?: RelativeTimeStyle;
+    unitSteps?: RelativeTimeUnitSteps;
+    update?: 'auto' | false | number;
+    value: RelativeTimeInput;
+  }>;
+
+  let {
+    class: className,
+    from,
+    labels,
+    largestUnit,
+    locale,
+    maxUnits,
+    minUnits,
+    mode = 'time',
+    presentation = 'relative',
+    rounding,
+    smallestUnit,
+    unitStyle = 'long',
+    unitSteps = 'detailed',
+    update = 'auto',
+    value,
+    ...restProps
+  }: Props = $props();
+
+  let currentFrom = $state(new Date());
+  let updateTimer: ReturnType<typeof window.setTimeout> | undefined;
+
+  const formatterOptions = $derived<FormatRelativeTimeOptions>({
+    from: from ?? currentFrom,
+    labels,
+    largestUnit,
+    locale,
+    maxUnits,
+    minUnits,
+    mode,
+    presentation,
+    rounding,
+    smallestUnit,
+    style: unitStyle,
+    unitSteps,
+  });
+  const text = $derived(formatRelativeTime(value, formatterOptions));
+  const dateTime = $derived(relativeTimeDateTime(value));
+
+  function clearUpdateTimer(): void {
+    if (updateTimer === undefined) {
+      return;
+    }
+
+    window.clearTimeout(updateTimer);
+    updateTimer = undefined;
+  }
+
+  function updateCurrentFrom(): void {
+    currentFrom = new Date();
+  }
+
+  $effect(() => {
+    clearUpdateTimer();
+
+    if (from !== undefined || update === false) {
+      return;
+    }
+
+    const delay =
+      update === 'auto'
+        ? getRelativeTimeState(value, formatterOptions).updateInMilliseconds
+        : Math.max(1, update);
+
+    updateTimer = window.setTimeout(updateCurrentFrom, delay);
+
+    return clearUpdateTimer;
+  });
+</script>
+
+<time
+  {...restProps}
+  class={`relative-time${className ? ` ${className}` : ''}`}
+  datetime={dateTime}
+>
+  {text}
+</time>
+
+<style>
+  .relative-time {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/relative-time/RelativeTime.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { RelativeTimeInput, RelativeTimeLabel, RelativeTimeUnit, RelativeTimeMode, RelativeTimePresentation, RelativeTimeRounding, RelativeTimeStyle, RelativeTimeUnitSteps } from '../../../../utility/format/relative-time/formatRelativeTime';
+declare const RelativeTime: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    from?: RelativeTimeInput | undefined;
+    labels?: readonly RelativeTimeLabel[] | undefined;
+    largestUnit?: RelativeTimeUnit | undefined;
+    locale?: Intl.LocalesArgument;
+    maxUnits?: number | undefined;
+    minUnits?: number | undefined;
+    mode?: RelativeTimeMode | undefined;
+    presentation?: RelativeTimePresentation | undefined;
+    rounding?: RelativeTimeRounding | undefined;
+    smallestUnit?: RelativeTimeUnit | undefined;
+    unitStyle?: RelativeTimeStyle | undefined;
+    unitSteps?: RelativeTimeUnitSteps | undefined;
+    update?: "auto" | false | number | undefined;
+    value: RelativeTimeInput;
+}, {}, "">;
+type RelativeTime = ReturnType<typeof RelativeTime>;
+export default RelativeTime;

package/dist/components/display/data-display/metric/timestamp-card/TimestampCard.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type {
+    DateTimeDateStyle,
+    DateTimeInput,
+    DateTimeTimeStyle,
+  } from '../../../../utility/format/date-time/formatDateTime';
+  import type {
+    RelativeTimeInput,
+    RelativeTimeLabel,
+    RelativeTimeMode,
+    RelativeTimeRounding,
+    RelativeTimeStyle,
+    RelativeTimeUnit,
+    RelativeTimeUnitSteps,
+  } from '../../../../utility/format/relative-time/formatRelativeTime';
+  import type { SeblifyProps } from 'seblify';
+  import DateValue from '../date-time/DateValue.svelte';
+  import RelativeTime from '../relative-time/RelativeTime.svelte';
+  import TimeValue from '../date-time/TimeValue.svelte';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    dateStyle?: DateTimeDateStyle;
+    hour12?: boolean;
+    locale?: Intl.LocalesArgument;
+    relativeFrom?: RelativeTimeInput;
+    relativeLabels?: readonly RelativeTimeLabel[];
+    relativeLargestUnit?: RelativeTimeUnit;
+    relativeMaxUnits?: number;
+    relativeMinUnits?: number;
+    relativeMode?: RelativeTimeMode;
+    relativeRounding?: RelativeTimeRounding;
+    relativeSmallestUnit?: RelativeTimeUnit;
+    relativeUnitSteps?: RelativeTimeUnitSteps;
+    relativeUnitStyle?: RelativeTimeStyle;
+    relativeUpdate?: 'auto' | false | number;
+    timestamp: DateTimeInput;
+    timeStyle?: DateTimeTimeStyle;
+    timeZone?: string;
+  }>;
+
+  let {
+    class: className,
+    dateStyle = 'long',
+    hour12,
+    locale,
+    relativeFrom,
+    relativeLabels,
+    relativeLargestUnit,
+    relativeMaxUnits = 2,
+    relativeMinUnits,
+    relativeMode = 'time',
+    relativeRounding,
+    relativeSmallestUnit = 'second',
+    relativeUnitSteps = 'detailed',
+    relativeUnitStyle = 'long',
+    relativeUpdate = 'auto',
+    timestamp,
+    timeStyle = 'medium',
+    timeZone,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<span
+  {...restProps}
+  class={`timestamp-card${className ? ` ${className}` : ''}`}
+>
+  <span class="timestamp-card__relative">
+    <RelativeTime
+      from={relativeFrom}
+      labels={relativeLabels}
+      largestUnit={relativeLargestUnit}
+      locale={locale}
+      maxUnits={relativeMaxUnits}
+      minUnits={relativeMinUnits}
+      mode={relativeMode}
+      rounding={relativeRounding}
+      smallestUnit={relativeSmallestUnit}
+      unitSteps={relativeUnitSteps}
+      unitStyle={relativeUnitStyle}
+      update={relativeUpdate}
+      value={timestamp}
+    />
+  </span>
+  <span class="timestamp-card__absolute">
+    <DateValue {dateStyle} {locale} {timestamp} {timeZone} />
+    <TimeValue {hour12} {locale} {timestamp} {timeStyle} {timeZone} />
+  </span>
+</span>
+
+<style>
+  .timestamp-card {
+    display: grid;
+    min-width: min(16rem, 100%);
+    gap: 0.375rem;
+    box-sizing: border-box;
+    color: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.35;
+    text-align: start;
+  }
+
+  .timestamp-card__relative {
+    display: block;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .timestamp-card__absolute {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: baseline;
+    gap: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    opacity: 0.82;
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/timestamp-card/TimestampCard.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DateTimeDateStyle, DateTimeInput, DateTimeTimeStyle } from '../../../../utility/format/date-time/formatDateTime';
+import type { RelativeTimeInput, RelativeTimeLabel, RelativeTimeMode, RelativeTimeRounding, RelativeTimeStyle, RelativeTimeUnit, RelativeTimeUnitSteps } from '../../../../utility/format/relative-time/formatRelativeTime';
+declare const TimestampCard: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    dateStyle?: DateTimeDateStyle | undefined;
+    hour12?: boolean | undefined;
+    locale?: Intl.LocalesArgument;
+    relativeFrom?: RelativeTimeInput | undefined;
+    relativeLabels?: readonly RelativeTimeLabel[] | undefined;
+    relativeLargestUnit?: RelativeTimeUnit | undefined;
+    relativeMaxUnits?: number | undefined;
+    relativeMinUnits?: number | undefined;
+    relativeMode?: RelativeTimeMode | undefined;
+    relativeRounding?: RelativeTimeRounding | undefined;
+    relativeSmallestUnit?: RelativeTimeUnit | undefined;
+    relativeUnitSteps?: RelativeTimeUnitSteps | undefined;
+    relativeUnitStyle?: RelativeTimeStyle | undefined;
+    relativeUpdate?: "auto" | false | number | undefined;
+    timestamp: DateTimeInput;
+    timeStyle?: DateTimeTimeStyle | undefined;
+    timeZone?: string | undefined;
+}, {}, "">;
+type TimestampCard = ReturnType<typeof TimestampCard>;
+export default TimestampCard;