seblify 0.2.1 → 0.3.0

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,104 @@
+<script lang="ts">
+  import type {
+    FormatRelativeTimeOptions,
+    RelativeTimeInput,
+    RelativeTimeLabel,
+    RelativeTimeMode,
+    RelativeTimePresentation,
+    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[];
+    locale?: Intl.LocalesArgument;
+    mode?: RelativeTimeMode;
+    presentation?: RelativeTimePresentation;
+    unitStyle?: RelativeTimeStyle;
+    unitSteps?: RelativeTimeUnitSteps;
+    update?: 'auto' | false | number;
+    value: RelativeTimeInput;
+  }>;
+
+  let {
+    class: className,
+    from,
+    labels,
+    locale,
+    mode = 'time',
+    presentation = 'relative',
+    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,
+    locale,
+    mode,
+    presentation,
+    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,16 @@
+import type { RelativeTimeInput, RelativeTimeLabel, RelativeTimeMode, RelativeTimePresentation, 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;
+    locale?: Intl.LocalesArgument;
+    mode?: RelativeTimeMode | undefined;
+    presentation?: RelativeTimePresentation | 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/visual/timeline/TimelineItem.svelte

@@ -174,6 +174,14 @@
   --seblify-tone-border: var(--seblify-color-border, #c8d2df);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='primary']) {
   --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
   --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
@@ -182,6 +190,17 @@
   --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='success']) {
   --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
   --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);

package/dist/components/display/feedback/loading/loading-dots/LoadingDots.svelte

@@ -73,6 +73,14 @@
   --seblify-tone-border: var(--seblify-color-border, #c8d2df);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='primary']) {
   --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
   --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
@@ -81,6 +89,17 @@
   --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='success']) {
   --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
   --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);

package/dist/components/display/feedback/loading/spinner/Spinner.svelte

@@ -69,6 +69,14 @@
   --seblify-tone-border: var(--seblify-color-border, #c8d2df);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='primary']) {
   --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
   --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
@@ -77,6 +85,17 @@
   --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
 }
 
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
 :where(.seblify-tone-context[data-seblify-tone='success']) {
   --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
   --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);

package/dist/components/display/motion/collapse/Collapse.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type CollapseElement = keyof HTMLElementTagNameMap;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    as?: CollapseElement;
+    children?: Snippet;
+    class?: string;
+    closeEasing?: string;
+    collapsedHeight?: number | CustomCssSize;
+    duration?: number;
+    easing?: string;
+    expanded?: boolean;
+    openEasing?: string;
+  }>;
+
+  let {
+    as = 'div',
+    children,
+    class: className,
+    closeEasing = 'cubic-bezier(0, 0, 0.2, 1)',
+    collapsedHeight = 0,
+    duration = 220,
+    easing,
+    expanded = false,
+    openEasing = 'cubic-bezier(0, 0, 0.2, 1)',
+    ...restProps
+  }: Props = $props();
+
+  let contentElement: HTMLDivElement | undefined;
+  let measuredHeight = $state(0);
+
+  function cssLength(value: number | CustomCssSize): string {
+    return typeof value === 'number' ? `${Math.max(0, value)}px` : value;
+  }
+
+  function cssDuration(value: number): string {
+    if (!Number.isFinite(value)) {
+      return '0ms';
+    }
+
+    return `${Math.max(0, value)}ms`;
+  }
+
+  function measureContentHeight() {
+    measuredHeight = contentElement?.scrollHeight ?? 0;
+  }
+
+  const collapsedHeightValue = $derived(cssLength(collapsedHeight));
+  const durationValue = $derived(cssDuration(duration));
+  const expandedHeightValue = $derived(`${measuredHeight}px`);
+  const resolvedHeight = $derived(
+    expanded ? expandedHeightValue : collapsedHeightValue,
+  );
+  const resolvedEasing = $derived(
+    easing ?? (expanded ? openEasing : closeEasing),
+  );
+
+  $effect(() => {
+    if (!contentElement) {
+      return;
+    }
+
+    measureContentHeight();
+
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const observer = new ResizeObserver(measureContentHeight);
+    observer.observe(contentElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`collapse${className ? ` ${className}` : ''}`}
+  data-state={expanded ? 'expanded' : 'collapsed'}
+  style:--collapse-collapsed-height={collapsedHeightValue}
+  style:--collapse-duration={durationValue}
+  style:--collapse-easing={resolvedEasing}
+  style:--collapse-expanded-height={expandedHeightValue}
+  style:--collapse-height={resolvedHeight}
+>
+  <div class="collapse__content" bind:this={contentElement}>
+    {@render children?.()}
+  </div>
+</svelte:element>
+
+<style>
+  .collapse {
+    display: block;
+    height: var(--collapse-height);
+    overflow: hidden;
+    transition: height var(--collapse-duration) var(--collapse-easing);
+  }
+
+  .collapse__content {
+    min-height: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .collapse {
+      transition-duration: 0ms;
+    }
+  }
+</style>

package/dist/components/display/motion/collapse/Collapse.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type CollapseElement = keyof HTMLElementTagNameMap;
+declare const Collapse: import("svelte").Component<{
+    [x: string]: unknown;
+    as?: CollapseElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    closeEasing?: string | undefined;
+    collapsedHeight?: (number | CustomCssSize) | undefined;
+    duration?: number | undefined;
+    easing?: string | undefined;
+    expanded?: boolean | undefined;
+    openEasing?: string | undefined;
+}, {}, "">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;