@ibis-design/svelte 0.5.0 → 0.7.0

package/dist/components/containers/PillTabs.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    children?: () => any;
+}
+declare const PillTabs: import("svelte").Component<Props, {}, "">;
+type PillTabs = ReturnType<typeof PillTabs>;
+export default PillTabs;

package/dist/components/containers/TipIndicator.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import '@ibis-design/css/components/tipIndicator.css';
+
+	interface Props {
+		/**
+		 * Controls the position of the tooltip relative to the indicator.
+		 *
+		 * @default "top"
+		 */
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		/**
+		 * The plain text content displayed inside the tooltip.
+		 */
+		text: string;
+		/**
+		 * Disables the tooltip from appearing on hover.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Controls the width of the tooltip.
+		 *
+		 * @default "auto"
+		 */
+		width?: 'auto' | '240' | '360';
+	}
+
+	let { position = 'top', text, disabled = false, width = 'auto' }: Props = $props();
+
+	let visible = $state(false);
+
+	const show = () => {
+		if (!disabled) visible = true;
+	};
+
+	const hide = () => {
+		visible = false;
+	};
+</script>
+
+<span
+	class="ibis-tip-indicator"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocus={show}
+	onblur={hide}
+	tabindex="0"
+	role="button"
+	aria-describedby="ibis-tip"
+>
+	<svg
+		class="ibis-tip-indicator__icon"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		aria-hidden="true"
+	>
+		<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+		<line
+			x1="12"
+			y1="11"
+			x2="12"
+			y2="17"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+		<circle cx="12" cy="7.5" r="1.2" fill="currentColor" />
+	</svg>
+
+	{#if visible}
+		<div id="ibis-tip" class="ibis-tip ibis-tip--{position} ibis-tip--width-{width}" role="tooltip">
+			<span class="ibis-tip__text">{text}</span>
+			<span class="ibis-tip__arrow"></span>
+		</div>
+	{/if}
+</span>

package/dist/components/containers/TipIndicator.svelte.d.ts

@@ -0,0 +1,28 @@
+import '@ibis-design/css/components/tipIndicator.css';
+interface Props {
+    /**
+     * Controls the position of the tooltip relative to the indicator.
+     *
+     * @default "top"
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * The plain text content displayed inside the tooltip.
+     */
+    text: string;
+    /**
+     * Disables the tooltip from appearing on hover.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls the width of the tooltip.
+     *
+     * @default "auto"
+     */
+    width?: 'auto' | '240' | '360';
+}
+declare const TipIndicator: import("svelte").Component<Props, {}, "">;
+type TipIndicator = ReturnType<typeof TipIndicator>;
+export default TipIndicator;

package/dist/components/containers/Toaster.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import '@ibis-design/css/components/toaster.css';
+	import type { Snippet } from 'svelte';
+
+	type ToastType = 'success' | 'error' | 'accent' | 'default';
+
+	interface Props {
+		type?: ToastType;
+		title?: string;
+		message?: string;
+		children?: Snippet;
+		icon?: Snippet;
+		iconText?: string;
+		closable?: boolean;
+		loading?: boolean;
+	}
+
+	let {
+		type = 'default',
+		title,
+		message,
+		children,
+		icon,
+		iconText,
+		closable,
+		loading
+	}: Props = $props();
+
+	let visible = $state(true);
+
+	const close = () => {
+		visible = false;
+	};
+</script>
+
+{#if visible}
+	<div
+		class="ibis-toaster"
+		role="status"
+		class:ibis-toaster--success={type === 'success'}
+		class:ibis-toaster--error={type === 'error'}
+		class:ibis-toaster--accent={type === 'accent'}
+		class:ibis-toaster--default={type === 'default'}
+	>
+		{#if loading || icon || iconText}
+			<div class="ibis-toaster__icon">
+				{#if loading}
+					<span class="ibis-toaster__loader" aria-hidden="true"></span>
+				{:else if icon}
+					{@render icon?.()}
+				{:else}
+					{iconText}
+				{/if}
+			</div>
+		{/if}
+
+		<div class="ibis-toaster__content">
+			{#if title}
+				<div class="ibis-toaster__title">{title}</div>
+			{/if}
+
+			<div class="ibis-toaster__message">
+				{#if children}
+					{@render children?.()}
+				{:else if message}
+					{message}
+				{/if}
+			</div>
+		</div>
+
+		{#if closable}
+			<button class="ibis-toaster__close" onclick={close} aria-label="Close"> x </button>
+		{/if}
+	</div>
+{/if}

package/dist/components/containers/Toaster.svelte.d.ts

@@ -0,0 +1,16 @@
+import '@ibis-design/css/components/toaster.css';
+import type { Snippet } from 'svelte';
+type ToastType = 'success' | 'error' | 'accent' | 'default';
+interface Props {
+    type?: ToastType;
+    title?: string;
+    message?: string;
+    children?: Snippet;
+    icon?: Snippet;
+    iconText?: string;
+    closable?: boolean;
+    loading?: boolean;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/containers/Tooltip.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Tooltip;
+type Tooltip = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/inputs/Checkbox.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import "@ibis-design/css/components/checkbox.css";
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends HTMLInputAttributes {
+    label?: string;
+    id?: string;
+    /**
+     * Defines whether the checkbox is checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    inputSize?: "sm" | "md" | "lg";
+    /**
+     * Defines whether the checkbox is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines whether the checkbox is in an invalid state.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    description?: string;
+    error?: string;
+    helpText?: string;
+    checkboxSnippet?: Snippet;
+  }
+
+  let {
+    id,
+    label,
+    checked = $bindable(false),
+    inputSize = "md",
+    disabled = false,
+    invalid = false,
+    description,
+    error,
+    helpText,
+    checkboxSnippet,
+    ...rest
+  }: Props = $props();
+
+  const fallbackId = `ibis-checkbox-${Math.random().toString(36).slice(2)}`;
+  const inputId = $derived(id ?? fallbackId);
+</script>
+
+<div
+  class="ibis-checkbox
+  ibis-checkbox--{inputSize}
+  {disabled ? 'ibis-checkbox--disabled' : ''}
+  {invalid ? 'ibis-checkbox--invalid' : ''}">
+  {#if label}
+    <div class="ibis-checkbox__label-wrapper">
+      <label class="ibis-checkbox__label" for={inputId}>{label}</label>
+
+      {#if description}
+        <div class="ibis-checkbox__description">{description}</div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="ibis-checkbox__wrapper">
+    <label class="ibis-checkbox__control">
+      <input
+        {...rest}
+        id={inputId}
+        type="checkbox"
+        bind:checked
+        {disabled}
+        aria-invalid={invalid}
+        class="ibis-checkbox__input" />
+
+      <span class="ibis-checkbox__box">
+        <span class="ibis-checkbox__icon">
+          {@render checkboxSnippet?.()}
+        </span>
+      </span>
+
+      {#if label}
+        <span class="ibis-checkbox__text">{label}</span>
+      {/if}
+    </label>
+  </div>
+
+  {#if invalid && error}
+    <div class="ibis-checkbox__error" role="alert">{error}</div>
+  {:else if helpText}
+    <div class="ibis-checkbox__help">{helpText}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,33 @@
+import "@ibis-design/css/components/checkbox.css";
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends HTMLInputAttributes {
+    label?: string;
+    id?: string;
+    /**
+     * Defines whether the checkbox is checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    inputSize?: "sm" | "md" | "lg";
+    /**
+     * Defines whether the checkbox is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines whether the checkbox is in an invalid state.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    description?: string;
+    error?: string;
+    helpText?: string;
+    checkboxSnippet?: Snippet;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/inputs/Chips.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import "@ibis-design/css/components/chips.css";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  // define props
+  interface Props extends HTMLButtonAttributes {
+    /**
+     * Defines the size of the chip.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Defines whether the chip is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines whether the chip is selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Shows a loading spinner and disables the chip.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disables the chip and applies skeleton styling
+     *
+     * @default false
+     */
+    skeleton?: boolean;
+    /**
+     * Plain text label for the chip. Use children snippet for complex content.
+     */
+    label?: string;
+    /**
+     * Plain text or emoji icon. Use icon snippet for complex content.
+     */
+    iconText?: string;
+    children?: Snippet;
+    icon?: Snippet<[]>;
+  }
+
+  let {
+    size = "md",
+    selected = $bindable(false),
+    disabled = false,
+    loading = false,
+    skeleton = false,
+    label,
+    iconText,
+    children,
+    icon,
+    ...rest
+  }: Props = $props();
+
+  const toggleSelected = () => {
+    if (disabled || loading || skeleton) return;
+    selected = !selected;
+  };
+</script>
+
+<!-- add how it would look in the DOM -->
+<button
+  {...rest}
+  {disabled}
+  aria-pressed={selected}
+  aria-busy={loading}
+  onclick={toggleSelected}
+  class="ibis-chips
+  ibis-chips--{size}
+  {selected ? 'ibis-chips--selected' : ''} 
+  {skeleton ? 'ibis-chips--skeleton' : ''}">
+  <span class="ibis-chips__content {skeleton ? 'ibis-chips__content--hidden' : ''}">
+    {#if icon || iconText}
+      <span class="ibis-chips__icon">
+        {#if icon}
+          {@render icon()}
+        {:else}
+          {iconText}
+        {/if}
+      </span>
+    {/if}
+
+    {#if children || label}
+      <span class="ibis-chips__label">
+        {#if children}
+          {@render children?.()}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    {/if}
+  </span>
+
+  {#if loading}
+    <span class="ibis-chips__loader" aria-hidden="true"></span>
+  {/if}
+</button>

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

@@ -0,0 +1,48 @@
+import "@ibis-design/css/components/chips.css";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+interface Props extends HTMLButtonAttributes {
+    /**
+     * Defines the size of the chip.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Defines whether the chip is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines whether the chip is selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Shows a loading spinner and disables the chip.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disables the chip and applies skeleton styling
+     *
+     * @default false
+     */
+    skeleton?: boolean;
+    /**
+     * Plain text label for the chip. Use children snippet for complex content.
+     */
+    label?: string;
+    /**
+     * Plain text or emoji icon. Use icon snippet for complex content.
+     */
+    iconText?: string;
+    children?: Snippet;
+    icon?: Snippet<[]>;
+}
+declare const Chips: import("svelte").Component<Props, {}, "selected">;
+type Chips = ReturnType<typeof Chips>;
+export default Chips;

package/dist/components/inputs/Dropdown.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import "@ibis-design/css/components/dropdown.css";
+  import TextInput from "./TextInput.svelte";
+
+  interface Options {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    label?: string;
+    value?: string;
+    options?: Options[];
+    placeholder?: string;
+    disabled?: boolean;
+  }
+
+  let {
+    label,
+    value = $bindable(""),
+    options = [],
+    placeholder = "Select...",
+    disabled = false,
+  }: Props = $props();
+
+  let open = $state(false);
+  let dropdownRef = $state<HTMLDivElement | null>(null);
+
+  const listboxId = `ibis-dropdown-listbox-${Math.random().toString(36).slice(2)}`;
+
+  const selectOption = (option: Options) => {
+    value = option.value;
+    open = false;
+  };
+
+  const toggleDropdown = () => {
+    if (!disabled) open = !open;
+  };
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") open = false;
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
+      open = false;
+    }
+  };
+
+  const selectedLabel = $derived(options.find((o) => o.value === value)?.label ?? value);
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+{#snippet suffixSnippet()}
+  ▾
+{/snippet}
+
+<div
+  class="ibis-dropdown {open ? 'ibis-dropdown--open' : ''}"
+  role="combobox"
+  tabindex="0"
+  aria-expanded={open}
+  aria-haspopup="listbox"
+  aria-controls={listboxId}
+  bind:this={dropdownRef}
+  onkeydown={handleKeydown}>
+  <button type="button" class="ibis-dropdown__trigger" onclick={toggleDropdown} {disabled}>
+    <TextInput {label} value={selectedLabel} {placeholder} {disabled} readonly {suffixSnippet} />
+  </button>
+
+  {#if open}
+    <ul id={listboxId} role="listbox" class="ibis-dropdown__menu">
+      {#each options as option (option.value)}
+        <li role="option" aria-selected={option.value === value}>
+          <button type="button" class="ibis-dropdown__item" onclick={() => selectOption(option)}>
+            {option.label}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+import "@ibis-design/css/components/dropdown.css";
+interface Options {
+    label: string;
+    value: string;
+}
+interface Props {
+    label?: string;
+    value?: string;
+    options?: Options[];
+    placeholder?: string;
+    disabled?: boolean;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "value">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;