@sentropic/design-system-svelte 0.4.0 → 0.5.0

package/dist/ContentSwitcher.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  type ContentSwitcherItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  };
+
+  type ContentSwitcherProps = {
+    items: ContentSwitcherItem[];
+    value?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    onchange?: (value: string) => void;
+    class?: string;
+  };
+
+  let {
+    items,
+    value = $bindable(""),
+    label,
+    size = "md",
+    onchange,
+    class: className
+  }: ContentSwitcherProps = $props();
+
+  const groupClasses = () =>
+    ["st-contentSwitcher", `st-contentSwitcher--${size}`, className].filter(Boolean).join(" ");
+
+  function select(item: ContentSwitcherItem) {
+    if (item.disabled) return;
+    if (value === item.value) return;
+    value = item.value;
+    onchange?.(item.value);
+  }
+
+  function onKeydown(event: KeyboardEvent, index: number) {
+    const last = items.length - 1;
+    let target = -1;
+    if (event.key === "ArrowRight") target = index === last ? 0 : index + 1;
+    else if (event.key === "ArrowLeft") target = index === 0 ? last : index - 1;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = last;
+    if (target < 0) return;
+    event.preventDefault();
+    const item = items[target];
+    if (item) select(item);
+  }
+</script>
+
+<div class={groupClasses()} role="tablist" aria-label={label}>
+  {#each items as item, i (item.value)}
+    {@const selected = value === item.value}
+    <button
+      type="button"
+      class="st-contentSwitcher__option"
+      class:st-contentSwitcher__option--selected={selected}
+      role="tab"
+      aria-selected={selected ? "true" : "false"}
+      aria-disabled={item.disabled ? "true" : undefined}
+      tabindex={selected ? 0 : -1}
+      disabled={item.disabled}
+      onclick={() => select(item)}
+      onkeydown={(event) => onKeydown(event, i)}
+    >
+      {item.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .st-contentSwitcher {
+    background: var(--st-semantic-surface-subtle);
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    display: inline-flex;
+    padding: 0.125rem;
+  }
+
+  .st-contentSwitcher__option {
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 500;
+    padding: 0 0.875rem;
+    transition:
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-contentSwitcher--sm .st-contentSwitcher__option {
+    font-size: 0.75rem;
+    min-height: 1.75rem;
+  }
+
+  .st-contentSwitcher--md .st-contentSwitcher__option {
+    font-size: 0.875rem;
+    min-height: 2.25rem;
+  }
+
+  .st-contentSwitcher--lg .st-contentSwitcher__option {
+    font-size: 0.9375rem;
+    min-height: 2.75rem;
+  }
+
+  .st-contentSwitcher__option:hover:not([disabled]):not(.st-contentSwitcher__option--selected) {
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-contentSwitcher__option:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 1px;
+  }
+
+  .st-contentSwitcher__option--selected {
+    background: var(--st-semantic-surface-default);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-contentSwitcher__option:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+</style>

package/dist/ContentSwitcher.svelte.d.ts

@@ -0,0 +1,17 @@
+type ContentSwitcherItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type ContentSwitcherProps = {
+    items: ContentSwitcherItem[];
+    value?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    onchange?: (value: string) => void;
+    class?: string;
+};
+declare const ContentSwitcher: import("svelte").Component<ContentSwitcherProps, {}, "value">;
+type ContentSwitcher = ReturnType<typeof ContentSwitcher>;
+export default ContentSwitcher;
+//# sourceMappingURL=ContentSwitcher.svelte.d.ts.map

package/dist/ContentSwitcher.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSwitcher.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContentSwitcher.svelte.ts"],"names":[],"mappings":"AAGE,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmDJ,QAAA,MAAM,eAAe,+DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/CopyButton.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
+    value: string;
+    label?: string;
+    copiedLabel?: string;
+    feedbackTimeoutMs?: number;
+    size?: "sm" | "md" | "lg";
+    onCopied?: (value: string) => void;
+    onError?: (err: unknown) => void;
+    class?: string;
+  };
+
+  let {
+    value,
+    label = "Copy",
+    copiedLabel = "Copied",
+    feedbackTimeoutMs = 1500,
+    size = "md",
+    onCopied,
+    onError,
+    disabled,
+    class: className,
+    ...rest
+  }: CopyButtonProps = $props();
+
+  let copied = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  const classes = () =>
+    ["st-copyButton", `st-copyButton--${size}`, copied ? "st-copyButton--copied" : null, className]
+      .filter(Boolean)
+      .join(" ");
+
+  async function copy() {
+    if (disabled) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      copied = true;
+      onCopied?.(value);
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        copied = false;
+      }, feedbackTimeoutMs);
+    } catch (err) {
+      onError?.(err);
+    }
+  }
+</script>
+
+<button
+  {...rest}
+  type="button"
+  class={classes()}
+  {disabled}
+  aria-live="polite"
+  onclick={copy}
+>
+  <span class="st-copyButton__icon" aria-hidden="true">
+    {#if copied}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" width="14" height="14">
+        <path d="m3 8 3.5 3.5L13 5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    {:else}
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
+        <rect x="4" y="4" width="9" height="10" rx="1.5" />
+        <path d="M3 11V3a1 1 0 0 1 1-1h7" />
+      </svg>
+    {/if}
+  </span>
+  <span class="st-copyButton__label">{copied ? copiedLabel : label}</span>
+</button>
+
+<style>
+  .st-copyButton {
+    align-items: center;
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-component-control-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: 0.375rem;
+    padding: 0 0.625rem;
+    transition:
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-copyButton--sm {
+    font-size: 0.75rem;
+    min-height: var(--st-component-control-smHeight, 2rem);
+  }
+
+  .st-copyButton--md {
+    font-size: 0.875rem;
+    min-height: var(--st-component-control-mdHeight, 2.5rem);
+  }
+
+  .st-copyButton--lg {
+    font-size: 0.9375rem;
+    min-height: var(--st-component-control-lgHeight, 3rem);
+  }
+
+  .st-copyButton:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-copyButton:focus-visible {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-copyButton:disabled {
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+
+  .st-copyButton--copied {
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-copyButton__icon {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+  }
+</style>

package/dist/CopyButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
+    value: string;
+    label?: string;
+    copiedLabel?: string;
+    feedbackTimeoutMs?: number;
+    size?: "sm" | "md" | "lg";
+    onCopied?: (value: string) => void;
+    onError?: (err: unknown) => void;
+    class?: string;
+};
+declare const CopyButton: import("svelte").Component<CopyButtonProps, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;
+//# sourceMappingURL=CopyButton.svelte.d.ts.map

package/dist/CopyButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}