@sentropic/design-system-svelte 0.10.5 → 0.12.0

package/dist/Hidden.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type HiddenBreakpoint = "sm" | "md" | "lg" | "xl";
+
+  export type HiddenProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Hide when viewport is narrower than this breakpoint. */
+    below?: HiddenBreakpoint;
+    /** Hide when viewport is at or wider than this breakpoint. */
+    above?: HiddenBreakpoint;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    below,
+    above,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: HiddenProps = $props();
+
+  const classes = $derived(
+    [
+      "st-hidden",
+      below && `st-hidden--below-${below}`,
+      above && `st-hidden--above-${above}`,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+<svelte:element this={as} {...rest} class={classes}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .st-hidden {
+    display: contents;
+  }
+
+  /* Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280. */
+
+  /* below: hidden when viewport < breakpoint */
+  @media (max-width: 639.98px) {
+    .st-hidden--below-sm {
+      display: none !important;
+    }
+  }
+  @media (max-width: 767.98px) {
+    .st-hidden--below-md {
+      display: none !important;
+    }
+  }
+  @media (max-width: 1023.98px) {
+    .st-hidden--below-lg {
+      display: none !important;
+    }
+  }
+  @media (max-width: 1279.98px) {
+    .st-hidden--below-xl {
+      display: none !important;
+    }
+  }
+
+  /* above: hidden when viewport >= breakpoint */
+  @media (min-width: 640px) {
+    .st-hidden--above-sm {
+      display: none !important;
+    }
+  }
+  @media (min-width: 768px) {
+    .st-hidden--above-md {
+      display: none !important;
+    }
+  }
+  @media (min-width: 1024px) {
+    .st-hidden--above-lg {
+      display: none !important;
+    }
+  }
+  @media (min-width: 1280px) {
+    .st-hidden--above-xl {
+      display: none !important;
+    }
+  }
+</style>

package/dist/Hidden.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type HiddenBreakpoint = "sm" | "md" | "lg" | "xl";
+export type HiddenProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Hide when viewport is narrower than this breakpoint. */
+    below?: HiddenBreakpoint;
+    /** Hide when viewport is at or wider than this breakpoint. */
+    above?: HiddenBreakpoint;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Hidden: import("svelte").Component<HiddenProps, {}, "">;
+type Hidden = ReturnType<typeof Hidden>;
+export default Hidden;
+//# sourceMappingURL=Hidden.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hidden.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Hidden.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkCJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Inline.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { FlexAlign, FlexJustify } from "./Flex.svelte";
+
+  export type InlineProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Flex from "./Flex.svelte";
+
+  let {
+    gap,
+    align,
+    justify,
+    wrap = true,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: InlineProps = $props();
+
+  const classes = $derived(["st-inline", className].filter(Boolean).join(" "));
+</script>
+
+<Flex {...rest} {as} {gap} {align} {justify} {wrap} direction="row" class={classes}>
+  {@render children?.()}
+</Flex>

package/dist/Inline.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { FlexAlign, FlexJustify } from "./Flex.svelte";
+export type InlineProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Inline: import("svelte").Component<InlineProps, {}, "">;
+type Inline = ReturnType<typeof Inline>;
+export default Inline;
+//# sourceMappingURL=Inline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Inline.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8BJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/RadioGroup.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+  export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import Radio from "./Radio.svelte";
+
+  type RadioGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onchange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    legend,
+    value,
+    onchange,
+    orientation = "vertical",
+    name,
+    options = [],
+    helperText,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: RadioGroupProps = $props();
+
+  const classes = $derived(
+    ["st-radioGroup", `st-radioGroup--${orientation}`, className].filter(Boolean).join(" ")
+  );
+
+  function select(optionValue: string) {
+    if (optionValue === value) return;
+    onchange?.(optionValue);
+  }
+</script>
+
+<fieldset {...rest} class={classes} {disabled}>
+  <legend class="st-radioGroup__legend">{legend}</legend>
+  {#if helperText}
+    <p class="st-radioGroup__help">{helperText}</p>
+  {/if}
+  <div class="st-radioGroup__options">
+    {#each options as option (option.value)}
+      <Radio
+        label={option.label}
+        helperText={option.helperText}
+        {name}
+        value={option.value}
+        checked={value === option.value}
+        disabled={option.disabled}
+        onchange={() => select(option.value)}
+      />
+    {/each}
+    {@render children?.()}
+  </div>
+</fieldset>
+
+<style>
+  .st-radioGroup {
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .st-radioGroup__legend {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    font-size: 0.9375rem;
+    font-weight: 650;
+    line-height: 1.3;
+    padding: 0;
+  }
+
+  .st-radioGroup__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+    margin: 0.25rem 0 0;
+  }
+
+  .st-radioGroup__options {
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-radioGroup--vertical .st-radioGroup__options {
+    flex-direction: column;
+  }
+
+  .st-radioGroup--horizontal .st-radioGroup__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+</style>

package/dist/RadioGroup.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type RadioGroupProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "class" | "onchange"> & {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onchange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvF,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkDJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Row.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { FlexAlign, FlexJustify } from "./Flex.svelte";
+
+  export type RowProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Spacing scale step (0..12) used for the column gutter. */
+    gutter?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import { spacingToken, alignValue, justifyValue } from "./Flex.svelte";
+
+  let {
+    gutter = 4,
+    align,
+    justify,
+    wrap = true,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: RowProps = $props();
+
+  const classes = $derived(["st-row", className].filter(Boolean).join(" "));
+  const gap = $derived(spacingToken(gutter) ?? "0");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  class={classes}
+  style:flex-wrap={wrap ? "wrap" : "nowrap"}
+  style:align-items={alignValue(align)}
+  style:justify-content={justifyValue(justify)}
+  style:gap={gap}
+  style:--st-row-gutter={gap}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .st-row {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    inline-size: 100%;
+    min-width: 0;
+  }
+</style>

package/dist/Row.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { FlexAlign, FlexJustify } from "./Flex.svelte";
+export type RowProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Spacing scale step (0..12) used for the column gutter. */
+    gutter?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Row: import("svelte").Component<RowProps, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;
+//# sourceMappingURL=Row.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Row.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiCJ,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/Stack.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { FlexAlign, FlexJustify } from "./Flex.svelte";
+
+  export type StackProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Flex from "./Flex.svelte";
+
+  let {
+    gap,
+    align,
+    justify,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: StackProps = $props();
+
+  const classes = $derived(["st-stack", className].filter(Boolean).join(" "));
+</script>
+
+<Flex {...rest} {as} {gap} {align} {justify} direction="column" class={classes}>
+  {@render children?.()}
+</Flex>

package/dist/Stack.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { FlexAlign, FlexJustify } from "./Flex.svelte";
+export type StackProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Stack: import("svelte").Component<StackProps, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;
+//# sourceMappingURL=Stack.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Stack.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6BJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}