@ibis-design/svelte 0.2.0 → 0.6.0

package/dist/components/inputs/Radio.svelte.d.ts

@@ -0,0 +1,49 @@
+import "./radio.css";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends HTMLInputAttributes {
+    /**
+     * The text label displayed next to the radio button, describing its purpose or option.
+     */
+    label?: string;
+    id?: string;
+    /**
+     * The value associated with the radio button.
+     *
+     * Determines which option is selected within a group of radio buttons.
+     *
+     * @default ""
+     */
+    value: string | number;
+    /**
+     * The name of the radio button group.
+     *
+     * Radio buttons with the same `name` are grouped together, allowing only one to be selected at a time.
+     *
+     * @default undefined
+     */
+    group?: string | number;
+    /**
+     * Determines the size of the radio button input.
+     *
+     * @default "md"
+     */
+    inputSize?: "sm" | "md" | "lg";
+    /**
+     * Disables the radio button, preventing user interaction and applying disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the radio button as invalid, applying error styles and showing error messages if provided.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    description?: string;
+    error?: string;
+    helpText?: string;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/inputs/Switch.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import "./switch.css";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends HTMLInputAttributes {
+    id?: string;
+    label?: string;
+    /**
+     * Determines whether the Switch is in the "on" (checked) or "off" (unchecked) state.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Disables the Switch, preventing user interaction and applying disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+  }
+
+  let { id, label, checked = $bindable(false), disabled = false, ...rest }: Props = $props();
+
+  const fallbackId = `ibis-switch-${Math.random().toString(36).slice(2)}`;
+  const inputId = $derived(id ?? fallbackId);
+</script>
+
+<div class="ibis-switch {disabled ? 'ibis-switch--disabled' : ''}">
+  <label class="ibis-switch__control" for={inputId}>
+    <input
+      {...rest}
+      id={inputId}
+      type="checkbox"
+      bind:checked
+      {disabled}
+      class="ibis-switch__input" />
+    <span class="ibis-switch__track">
+      <span class="ibis-switch__thumb"></span>
+    </span>
+
+    {#if label}
+      <span class="ibis-switch__label">{label}</span>
+    {/if}
+  </label>
+</div>

package/dist/components/inputs/Switch.svelte.d.ts

@@ -0,0 +1,21 @@
+import "./switch.css";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends HTMLInputAttributes {
+    id?: string;
+    label?: string;
+    /**
+     * Determines whether the Switch is in the "on" (checked) or "off" (unchecked) state.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Disables the Switch, preventing user interaction and applying disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/inputs/TextArea.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import "./textarea.css";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+
+  interface Props extends HTMLTextareaAttributes {
+    label?: string;
+    id?: string;
+    inputSize?: "sm" | "md" | "lg";
+    loading?: boolean;
+    invalid?: boolean;
+    error?: string;
+    rows?: number;
+  }
+
+  let {
+    id,
+    label,
+    placeholder,
+    value = $bindable(""),
+    inputSize = "md",
+    disabled = false,
+    loading = false,
+    invalid = false,
+    error,
+    rows = 5,
+    ...rest
+  }: Props = $props();
+
+  const fallbackId = `ibis-textarea-${Math.random().toString(36).slice(2)}`;
+  let textareaId = $derived(id ?? fallbackId);
+</script>
+
+<div
+  class="ibis-input
+  ibis-input--{inputSize}
+  {disabled ? 'ibis-input--disabled' : ''}
+  {loading ? 'ibis-input--loading' : ''}
+  {invalid ? 'ibis-input--invalid' : ''}">
+  {#if label}
+    <label class="ibis-input__label" for={textareaId}>{label}</label>
+  {/if}
+
+  <div class="ibis-input__wrapper">
+    <textarea
+      {...rest}
+      id={textareaId}
+      bind:value
+      {placeholder}
+      {disabled}
+      {rows}
+      aria-invalid={invalid}
+      aria-busy={loading}
+      class="ibis-input__field"></textarea>
+
+    {#if loading}
+      <span class="ibis-input__loader" aria-hidden="true"></span>
+    {/if}
+  </div>
+
+  {#if invalid && error}
+    <div class="ibis-input__error" role="alert">
+      {error}
+    </div>
+  {/if}
+</div>

package/dist/components/inputs/TextArea.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./textarea.css";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+interface Props extends HTMLTextareaAttributes {
+    label?: string;
+    id?: string;
+    inputSize?: "sm" | "md" | "lg";
+    loading?: boolean;
+    invalid?: boolean;
+    error?: string;
+    rows?: number;
+}
+declare const TextArea: import("svelte").Component<Props, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/components/inputs/TextInput.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+  import "./textInput.css";
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends HTMLInputAttributes {
+    /**
+     * The label for the input field.
+     *
+     * Provides a descriptive text for the input.
+     *
+     * @example
+     * <TextInput label="Username" placeholder="Enter your username" />
+     */
+    label?: string;
+    /**
+     * The size of the input field.
+     *
+     * @default "md"
+     * @example
+     * - `sm`: <TextInput inputSize="sm" />
+     * - `md`: <TextInput inputSize="md" />
+     * - `lg`: <TextInput inputSize="lg" />
+     */
+    inputSize?: "sm" | "md" | "lg";
+    /**
+     * Shows a loading spinner inside the input field and disables interaction.
+     *
+     * Use when the input is waiting for async data, such as validating a field
+     * against a server or fetching autocomplete suggestions.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Denotes the input field as invalid.
+     *
+     * @default false
+     * @example
+     * <TextInput invalid={true} error="Please enter a valid email address." />
+     */
+    invalid?: boolean;
+    /**
+     * A short description displayed below the label.
+     *
+     * Use to provide additional context about what the field expects,
+     * such as format requirements or usage guidance.
+     *
+     * @example
+     * <TextInput label="Username" description="This will be publicly visible." />
+     */
+    description?: string;
+    /**
+     * The error message displayed when the input is invalid.
+     *
+     * Only rendered when both `invalid` is true and `error` is provided.
+     * Announced to screen readers via `role="alert"`.
+     *
+     * @example
+     * <TextInput invalid={true} error="This field is required." />
+     */
+    error?: string;
+    /**
+     * Helper text displayed below the input field.
+     *
+     * Use to provide supplementary guidance such as formatting hints or
+     * privacy notes. Not shown when the input is in an invalid state.
+     *
+     * @example
+     * <TextInput helpText="We'll never share your email with anyone else." />
+     */
+    helpText?: string;
+    /**
+     * A Svelte Snippet rendered inside the input field, before the text.
+     *
+     * Use for complex content like icons or custom markup.
+     * For plain text, use `prefixText` instead.
+     * Cannot be used together with `prependSnippet`.
+     *
+     * @example
+     * {#snippet prefix()}<SearchIcon />{/snippet}
+     * <TextInput prefixSnippet={prefix} />
+     */
+    prefixSnippet?: Snippet;
+    /**
+     * A Svelte Snippet rendered inside the input field, after the text.
+     *
+     * Use for complex content like icons or custom markup.
+     * For plain text, use `suffixText` instead.
+     *
+     * @example
+     * {#snippet suffix()}<EyeIcon />{/snippet}
+     * <TextInput suffixSnippet={suffix} />
+     */
+    suffixSnippet?: Snippet;
+    /**
+     * A Svelte Snippet rendered outside and before the input field as an attached block.
+     *
+     * Use for complex content like icons or custom markup.
+     * For plain text, use `prependText` instead.
+     * Cannot be used together with `prefixSnippet`.
+     *
+     * @example
+     * {#snippet prepend()}<span>https://</span>{/snippet}
+     * <TextInput prependSnippet={prepend} />
+     */
+    prependSnippet?: Snippet;
+    /**
+     * Plain text rendered inside the input field, before the text.
+     *
+     * Use for simple symbols or short strings like `$` or `@`.
+     * For complex content, use `prefixSnippet` instead.
+     *
+     * @example
+     * <TextInput prefixText="$" placeholder="0.00" />
+     */
+    prefixText?: string;
+    /**
+     * Plain text rendered inside the input field, after the text.
+     *
+     * Use for simple strings like units or currency codes, e.g. `EUR` or `kg`.
+     * For complex content, use `suffixSnippet` instead.
+     *
+     * @example
+     * <TextInput suffixText="EUR" placeholder="0.00" />
+     */
+    suffixText?: string;
+    /**
+     * Plain text rendered outside and before the input field as an attached block.
+     *
+     * Use for simple strings like `https://` or `+1`.
+     * For complex content, use `prependSnippet` instead.
+     * Cannot be used together with `prefixText`.
+     *
+     * @example
+     * <TextInput prependText="https://" placeholder="example.com" />
+     */
+    prependText?: string;
+  }
+
+  let {
+    id,
+    label,
+    placeholder,
+    value = $bindable(""),
+    type = "text",
+    inputSize = "md",
+    disabled = false,
+    loading = false,
+    invalid = false,
+    description,
+    error,
+    helpText,
+    prefixSnippet,
+    suffixSnippet,
+    prependSnippet,
+    prefixText,
+    suffixText,
+    prependText,
+    ...rest
+  }: Props = $props();
+
+  const fallbackId = `ibis-input-${Math.random().toString(36).slice(2)}`;
+  const inputId = $derived(id ?? fallbackId);
+
+  const hasPrepend = $derived(!!prependSnippet || !!prependText);
+
+  $effect(() => {
+    if (prependSnippet && prefixSnippet) {
+      console.warn("Use either prependSnippet OR prefixSnippet, not both.");
+    }
+    if (prependSnippet && prependText) {
+      console.warn("prependSnippet takes priority over prependText when both are provided.");
+    }
+    if (prefixSnippet && prefixText) {
+      console.warn("prefixSnippet takes priority over prefixText when both are provided.");
+    }
+    if (suffixSnippet && suffixText) {
+      console.warn("suffixSnippet takes priority over suffixText when both are provided.");
+    }
+  });
+</script>
+
+<div
+  class="ibis-input
+ibis-input--{inputSize}
+{disabled ? 'ibis-input--disabled' : ''}
+{loading ? 'ibis-input--loading' : ''}
+{invalid ? 'ibis-input--invalid' : ''}">
+  {#if label}
+    <div class="ibis-input__label-wrapper">
+      <label class="ibis-input__label" for={inputId}>{label}</label>
+
+      {#if description}
+        <div class="ibis-input__description">
+          {description}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="ibis-input__wrapper {hasPrepend ? 'ibis-input__wrapper--with-prepend' : ''}">
+    {#if prependSnippet || prependText}
+      <div class="ibis-input__prepend">
+        {#if prependSnippet}
+          {@render prependSnippet()}
+        {:else}
+          {prependText}
+        {/if}
+      </div>
+    {/if}
+
+    <div class="ibis-input__field-wrapper">
+      {#if prefixSnippet || prefixText}
+        <span class="ibis-input__prefix" aria-hidden="true">
+          {#if prefixSnippet}
+            {@render prefixSnippet?.()}
+          {:else}
+            {prefixText}
+          {/if}
+        </span>
+      {/if}
+
+      <input
+        {...rest}
+        id={inputId}
+        {type}
+        {placeholder}
+        bind:value
+        {disabled}
+        aria-invalid={invalid}
+        aria-busy={loading}
+        class="ibis-input__field" />
+
+      {#if suffixSnippet || suffixText}
+        <span class="ibis-input__suffix" aria-hidden="true">
+          {#if suffixSnippet}
+            {@render suffixSnippet?.()}
+          {:else}
+            {suffixText}
+          {/if}
+        </span>
+      {/if}
+
+      {#if loading}
+        <span class="ibis-input__loader" aria-hidden="true"></span>
+      {/if}
+    </div>
+  </div>
+
+  {#if invalid && error}
+    <div class="ibis-input__error" role="alert">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        color="#b70c00"
+        fill="none"
+        viewBox="0 0 24 24"
+        ><path
+          d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12ZM12 6.25C12.4142 6.25 12.75 6.58579 12.75 7V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V7C11.25 6.58579 11.5858 6.25 12 6.25ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+          clip-rule="evenodd"></path
+        ></svg>
+      {error}
+    </div>
+  {:else if helpText}
+    <div class="ibis-input__help">
+      {helpText}
+    </div>
+  {/if}
+</div>

package/dist/components/inputs/TextInput.svelte.d.ts

@@ -0,0 +1,140 @@
+import "./textInput.css";
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends HTMLInputAttributes {
+    /**
+     * The label for the input field.
+     *
+     * Provides a descriptive text for the input.
+     *
+     * @example
+     * <TextInput label="Username" placeholder="Enter your username" />
+     */
+    label?: string;
+    /**
+     * The size of the input field.
+     *
+     * @default "md"
+     * @example
+     * - `sm`: <TextInput inputSize="sm" />
+     * - `md`: <TextInput inputSize="md" />
+     * - `lg`: <TextInput inputSize="lg" />
+     */
+    inputSize?: "sm" | "md" | "lg";
+    /**
+     * Shows a loading spinner inside the input field and disables interaction.
+     *
+     * Use when the input is waiting for async data, such as validating a field
+     * against a server or fetching autocomplete suggestions.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Denotes the input field as invalid.
+     *
+     * @default false
+     * @example
+     * <TextInput invalid={true} error="Please enter a valid email address." />
+     */
+    invalid?: boolean;
+    /**
+     * A short description displayed below the label.
+     *
+     * Use to provide additional context about what the field expects,
+     * such as format requirements or usage guidance.
+     *
+     * @example
+     * <TextInput label="Username" description="This will be publicly visible." />
+     */
+    description?: string;
+    /**
+     * The error message displayed when the input is invalid.
+     *
+     * Only rendered when both `invalid` is true and `error` is provided.
+     * Announced to screen readers via `role="alert"`.
+     *
+     * @example
+     * <TextInput invalid={true} error="This field is required." />
+     */
+    error?: string;
+    /**
+     * Helper text displayed below the input field.
+     *
+     * Use to provide supplementary guidance such as formatting hints or
+     * privacy notes. Not shown when the input is in an invalid state.
+     *
+     * @example
+     * <TextInput helpText="We'll never share your email with anyone else." />
+     */
+    helpText?: string;
+    /**
+     * A Svelte Snippet rendered inside the input field, before the text.
+     *
+     * Use for complex content like icons or custom markup.
+     * For plain text, use `prefixText` instead.
+     * Cannot be used together with `prependSnippet`.
+     *
+     * @example
+     * {#snippet prefix()}<SearchIcon />{/snippet}
+     * <TextInput prefixSnippet={prefix} />
+     */
+    prefixSnippet?: Snippet;
+    /**
+     * A Svelte Snippet rendered inside the input field, after the text.
+     *
+     * Use for complex content like icons or custom markup.
+     * For plain text, use `suffixText` instead.
+     *
+     * @example
+     * {#snippet suffix()}<EyeIcon />{/snippet}
+     * <TextInput suffixSnippet={suffix} />
+     */
+    suffixSnippet?: Snippet;
+    /**
+     * A Svelte Snippet rendered outside and before the input field as an attached block.
+     *
+     * Use for complex content like icons or custom markup.
+     * For plain text, use `prependText` instead.
+     * Cannot be used together with `prefixSnippet`.
+     *
+     * @example
+     * {#snippet prepend()}<span>https://</span>{/snippet}
+     * <TextInput prependSnippet={prepend} />
+     */
+    prependSnippet?: Snippet;
+    /**
+     * Plain text rendered inside the input field, before the text.
+     *
+     * Use for simple symbols or short strings like `$` or `@`.
+     * For complex content, use `prefixSnippet` instead.
+     *
+     * @example
+     * <TextInput prefixText="$" placeholder="0.00" />
+     */
+    prefixText?: string;
+    /**
+     * Plain text rendered inside the input field, after the text.
+     *
+     * Use for simple strings like units or currency codes, e.g. `EUR` or `kg`.
+     * For complex content, use `suffixSnippet` instead.
+     *
+     * @example
+     * <TextInput suffixText="EUR" placeholder="0.00" />
+     */
+    suffixText?: string;
+    /**
+     * Plain text rendered outside and before the input field as an attached block.
+     *
+     * Use for simple strings like `https://` or `+1`.
+     * For complex content, use `prependSnippet` instead.
+     * Cannot be used together with `prefixText`.
+     *
+     * @example
+     * <TextInput prependText="https://" placeholder="example.com" />
+     */
+    prependText?: string;
+}
+declare const TextInput: import("svelte").Component<Props, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;