seblify 0.3.0 → 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/relative-time/RelativeTime.svelte

@@ -3,8 +3,10 @@
     FormatRelativeTimeOptions,
     RelativeTimeInput,
     RelativeTimeLabel,
+    RelativeTimeUnit,
     RelativeTimeMode,
     RelativeTimePresentation,
+    RelativeTimeRounding,
     RelativeTimeStyle,
     RelativeTimeUnitSteps,
   } from '../../../../utility/format/relative-time/formatRelativeTime';
@@ -20,9 +22,14 @@
     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;
@@ -33,9 +40,14 @@
     class: className,
     from,
     labels,
+    largestUnit,
     locale,
+    maxUnits,
+    minUnits,
     mode = 'time',
     presentation = 'relative',
+    rounding,
+    smallestUnit,
     unitStyle = 'long',
     unitSteps = 'detailed',
     update = 'auto',
@@ -49,9 +61,14 @@
   const formatterOptions = $derived<FormatRelativeTimeOptions>({
     from: from ?? currentFrom,
     labels,
+    largestUnit,
     locale,
+    maxUnits,
+    minUnits,
     mode,
     presentation,
+    rounding,
+    smallestUnit,
     style: unitStyle,
     unitSteps,
   });

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

@@ -1,12 +1,17 @@
-import type { RelativeTimeInput, RelativeTimeLabel, RelativeTimeMode, RelativeTimePresentation, RelativeTimeStyle, RelativeTimeUnitSteps } from '../../../../utility/format/relative-time/formatRelativeTime';
+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;

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;