@sentropic/design-system-svelte 0.13.0 → 0.14.0

package/dist/Rating.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" module>
+  export type RatingSize = "sm" | "md" | "lg";
+</script>
+
+<script lang="ts">
+  import { Star, StarHalf } from "@lucide/svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type RatingProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Note courante (0..max). Pas de 1, ou 0.5 si `allowHalf`. */
+    value?: number;
+    /** Nombre d'étoiles. */
+    max?: number;
+    /** Appelé avec la nouvelle note au clic ou au clavier. */
+    onChange?: (value: number) => void;
+    /** Affichage seul : ni clic ni clavier n'émettent. */
+    readonly?: boolean;
+    /** Autorise les demi-étoiles (sélection au demi-point). */
+    allowHalf?: boolean;
+    size?: RatingSize;
+    /** Attribut name (utile dans un formulaire / pour la sémantique radio). */
+    name?: string;
+    /** Étiquette accessible du groupe. */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    value = 0,
+    max = 5,
+    onChange,
+    readonly = false,
+    allowHalf = false,
+    size = "md",
+    name,
+    label,
+    class: className,
+    ...rest
+  }: RatingProps = $props();
+
+  const iconSize = $derived(size === "sm" ? 16 : size === "lg" ? 28 : 22);
+
+  const classes = $derived(
+    ["st-rating", `st-rating--${size}`, readonly && "st-rating--readonly", className]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
+
+  // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+  const focusedStar = $derived(value > 0 ? Math.ceil(value) : 1);
+
+  function fill(star: number): "full" | "half" | "empty" {
+    if (value >= star) return "full";
+    if (allowHalf && value >= star - 0.5) return "half";
+    return "empty";
+  }
+
+  function commit(next: number) {
+    if (readonly) return;
+    const clamped = Math.max(0, Math.min(max, next));
+    value = clamped;
+    onChange?.(clamped);
+  }
+
+  function onStarClick(event: MouseEvent, star: number) {
+    if (readonly) return;
+    let next = star;
+    if (allowHalf) {
+      const target = event.currentTarget as HTMLElement;
+      const rect = target.getBoundingClientRect();
+      const isLeftHalf = event.clientX - rect.left < rect.width / 2;
+      next = isLeftHalf ? star - 0.5 : star;
+    }
+    // Re-cliquer la valeur déjà sélectionnée remet à zéro.
+    if (next === value) {
+      commit(0);
+      return;
+    }
+    commit(next);
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (readonly) return;
+    const step = allowHalf ? 0.5 : 1;
+    let handled = true;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        commit(Math.min(max, value + step));
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        commit(Math.max(0, value - step));
+        break;
+      case "Home":
+        commit(0);
+        break;
+      case "End":
+        commit(max);
+        break;
+      default:
+        handled = false;
+    }
+    if (handled) event.preventDefault();
+  }
+</script>
+
+<div
+  {...rest}
+  class={classes}
+  role="radiogroup"
+  aria-label={label}
+  aria-readonly={readonly ? "true" : undefined}
+>
+  {#each stars as star (star)}
+    {@const state = fill(star)}
+    <button
+      type="button"
+      class="st-rating__star"
+      class:st-rating__star--full={state === "full"}
+      class:st-rating__star--half={state === "half"}
+      role="radio"
+      name={name}
+      aria-checked={Math.ceil(value) === star ? "true" : "false"}
+      aria-label={`${star} / ${max}`}
+      tabindex={!readonly && star === focusedStar ? 0 : -1}
+      disabled={readonly}
+      onclick={(event) => onStarClick(event, star)}
+      onkeydown={onKeyDown}
+    >
+      {#if state === "half"}
+        <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+      {:else}
+        <Star
+          size={iconSize}
+          strokeWidth={1.75}
+          fill={state === "full" ? "currentColor" : "none"}
+          aria-hidden="true"
+        />
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .st-rating {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-rating__star {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-semantic-text-muted);
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+    padding: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-rating__star--full,
+  .st-rating__star--half {
+    color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
+  }
+
+  .st-rating__star:hover:not(:disabled) {
+    color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
+  }
+
+  .st-rating__star:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-rating__star:disabled {
+    cursor: default;
+  }
+
+  .st-rating--readonly .st-rating__star {
+    cursor: default;
+  }
+</style>

package/dist/Rating.svelte.d.ts

@@ -0,0 +1,24 @@
+export type RatingSize = "sm" | "md" | "lg";
+import type { HTMLAttributes } from "svelte/elements";
+type RatingProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Note courante (0..max). Pas de 1, ou 0.5 si `allowHalf`. */
+    value?: number;
+    /** Nombre d'étoiles. */
+    max?: number;
+    /** Appelé avec la nouvelle note au clic ou au clavier. */
+    onChange?: (value: number) => void;
+    /** Affichage seul : ni clic ni clavier n'émettent. */
+    readonly?: boolean;
+    /** Autorise les demi-étoiles (sélection au demi-point). */
+    allowHalf?: boolean;
+    size?: RatingSize;
+    /** Attribut name (utile dans un formulaire / pour la sémantique radio). */
+    name?: string;
+    /** Étiquette accessible du groupe. */
+    label?: string;
+    class?: string;
+};
+declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;
+//# sourceMappingURL=Rating.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Rating.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2GJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/SlideIndicator.svelte

@@ -0,0 +1,173 @@
+<script lang="ts" module>
+  export type SlideIndicatorVariant = "dots" | "bars";
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SlideIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Nombre total de diapositives. */
+    count: number;
+    /** Index de la diapositive courante (0-based). */
+    current?: number;
+    /** Appelé avec l'index ciblé au clic ou au clavier. */
+    onChange?: (index: number) => void;
+    size?: "sm" | "md" | "lg";
+    variant?: SlideIndicatorVariant;
+    /** Préfixe d'étiquette accessible de chaque point ("Diapositive 1"...). */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    count,
+    current = 0,
+    onChange,
+    size = "md",
+    variant = "dots",
+    label = "Diapositive",
+    class: className,
+    ...rest
+  }: SlideIndicatorProps = $props();
+
+  const classes = $derived(
+    [
+      "st-slideIndicator",
+      `st-slideIndicator--${size}`,
+      `st-slideIndicator--${variant}`,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const items = $derived(Array.from({ length: Math.max(0, count) }, (_, i) => i));
+
+  function select(index: number) {
+    if (index < 0 || index >= count || index === current) return;
+    onChange?.(index);
+  }
+
+  function onKeyDown(event: KeyboardEvent, index: number) {
+    let target = index;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        target = Math.min(count - 1, index + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        target = Math.max(0, index - 1);
+        break;
+      case "Home":
+        target = 0;
+        break;
+      case "End":
+        target = count - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    select(target);
+  }
+</script>
+
+<div {...rest} class={classes} role="tablist" aria-label={label}>
+  {#each items as index (index)}
+    <button
+      type="button"
+      class="st-slideIndicator__dot"
+      class:st-slideIndicator__dot--current={index === current}
+      role="tab"
+      aria-selected={index === current ? "true" : "false"}
+      aria-current={index === current ? "true" : undefined}
+      aria-label={`${label} ${index + 1}`}
+      tabindex={index === current ? 0 : -1}
+      onclick={() => select(index)}
+      onkeydown={(event) => onKeyDown(event, index)}
+    ></button>
+  {/each}
+</div>
+
+<style>
+  .st-slideIndicator {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-slideIndicator__dot {
+    background: var(--st-semantic-border-strong, var(--st-semantic-text-muted));
+    border: 0;
+    cursor: pointer;
+    opacity: 0.5;
+    padding: 0;
+    transition:
+      opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      width var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-slideIndicator__dot:hover {
+    opacity: 0.8;
+  }
+
+  .st-slideIndicator__dot:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-slideIndicator__dot--current {
+    background: var(--st-semantic-action-primary);
+    opacity: 1;
+  }
+
+  /* Variant dots: cercles */
+  .st-slideIndicator--dots .st-slideIndicator__dot {
+    border-radius: 50%;
+  }
+
+  .st-slideIndicator--dots.st-slideIndicator--sm .st-slideIndicator__dot {
+    height: 0.375rem;
+    width: 0.375rem;
+  }
+
+  .st-slideIndicator--dots.st-slideIndicator--md .st-slideIndicator__dot {
+    height: 0.5rem;
+    width: 0.5rem;
+  }
+
+  .st-slideIndicator--dots.st-slideIndicator--lg .st-slideIndicator__dot {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
+  /* Variant bars: barres, la courante s'allonge */
+  .st-slideIndicator--bars .st-slideIndicator__dot {
+    border-radius: 999px;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--sm .st-slideIndicator__dot {
+    height: 0.25rem;
+    width: 0.75rem;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--md .st-slideIndicator__dot {
+    height: 0.3125rem;
+    width: 1rem;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--lg .st-slideIndicator__dot {
+    height: 0.375rem;
+    width: 1.25rem;
+  }
+
+  .st-slideIndicator--bars .st-slideIndicator__dot--current {
+    width: 1.75rem;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--lg .st-slideIndicator__dot--current {
+    width: 2.25rem;
+  }
+</style>

package/dist/SlideIndicator.svelte.d.ts

@@ -0,0 +1,19 @@
+export type SlideIndicatorVariant = "dots" | "bars";
+import type { HTMLAttributes } from "svelte/elements";
+type SlideIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Nombre total de diapositives. */
+    count: number;
+    /** Index de la diapositive courante (0-based). */
+    current?: number;
+    /** Appelé avec l'index ciblé au clic ou au clavier. */
+    onChange?: (index: number) => void;
+    size?: "sm" | "md" | "lg";
+    variant?: SlideIndicatorVariant;
+    /** Préfixe d'étiquette accessible de chaque point ("Diapositive 1"...). */
+    label?: string;
+    class?: string;
+};
+declare const SlideIndicator: import("svelte").Component<SlideIndicatorProps, {}, "">;
+type SlideIndicator = ReturnType<typeof SlideIndicator>;
+export default SlideIndicator;
+//# sourceMappingURL=SlideIndicator.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuEJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}