@ibis-design/svelte 0.2.0 → 0.6.0

package/dist/components/containers/tipIndicator.css

@@ -0,0 +1,79 @@
+.ibis-tip-indicator {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: var(--color-neutral-400);
+	transition: color var(--transition-duration-fast) var(--transition-timing-default);
+	outline: none;
+}
+
+.ibis-tip-indicator:hover,
+.ibis-tip-indicator:focus-visible {
+	color: var(--color-primary-500);
+}
+
+.ibis-tip-indicator__icon {
+	width: 1em;
+	height: 1em;
+	display: block;
+}
+
+/* Tooltip box */
+.ibis-tip {
+	position: absolute;
+	z-index: 100;
+	background-color: var(--color-neutral-600);
+	color: var(--color-white);
+	font-size: var(--font-size-normal-text-sm);
+	font-family: var(--font-family-sans);
+	padding: var(--spacing-2) var(--spacing-4);
+	border-radius: var(--border-radius-full);
+	pointer-events: none;
+	white-space: nowrap;
+}
+
+/* Width variants */
+.ibis-tip--width-auto {
+	white-space: nowrap;
+	width: auto;
+}
+
+.ibis-tip--width-240 {
+	width: 240px;
+	white-space: normal;
+}
+
+.ibis-tip--width-360 {
+	width: 360px;
+	white-space: normal;
+}
+
+/* Top */
+.ibis-tip--top {
+	bottom: calc(100% + 8px);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+/* Bottom */
+.ibis-tip--bottom {
+	top: calc(100% + 8px);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+/* Left */
+.ibis-tip--left {
+	right: calc(100% + 8px);
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+/* Right */
+.ibis-tip--right {
+	left: calc(100% + 8px);
+	top: 50%;
+	transform: translateY(-50%);
+}

package/dist/components/containers/toaster.css

@@ -0,0 +1,137 @@
+.ibis-toaster {
+	font-family: var(--font-family-sans);
+	display: flex;
+	align-items: center;
+	gap: 8px; /*hardcoded*/
+	padding: 8px 16px;
+	border-radius: 16px; /*hardcoded*/
+	border: var(--border-width-default) solid var(--color-neutral-200);
+	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+
+	max-width: 200px;
+	position: relative;
+	margin-bottom: 2px;
+}
+
+/* ICON */
+.ibis-toaster__icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 20px;
+	height: 20px;
+	top: 2px;
+	left: 2px;
+
+	flex-shrink: 0;
+
+	margin-top: 2px;
+	color: var(--color-white);
+}
+
+.ibis-toaster__icon :global(svg) {
+	width: 100%;
+	height: 100%;
+}
+
+.ibis-toaster__content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.ibis-toaster__title {
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-normal-text-sm);
+}
+
+.ibis-toaster__message {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-white);
+}
+
+.ibis-toaster--default .ibis-toaster__message {
+	font-size: var(--font-size-normal-text-sm);
+	color: var(--color-black);
+}
+
+.ibis-toaster--default .ibis-toaster__icon {
+	color: var(--color-black);
+}
+
+.ibis-toaster__close {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 18px; /*hardcoded*/
+	line-height: 1;
+	color: var(--color-white);
+	flex-shrink: 0;
+}
+
+.ibis-toaster--default .ibis-toaster__close {
+	color: var(--color-black);
+	border-color: var(--color-white);
+}
+
+/* SUCCESS */
+.ibis-toaster--success {
+	border-color: var(--color-status-success);
+	background-color: var(--color-status-success);
+}
+
+.ibis-toaster--success .ibis-toaster__title {
+	color: var(--color-white);
+}
+
+/* ERROR */
+.ibis-toaster--error {
+	border-color: var(--color-status-error);
+	background-color: var(--color-status-error);
+}
+
+.ibis-toaster--error .ibis-toaster__title {
+	color: var(--color-white);
+}
+
+/* ACCENT */
+.ibis-toaster--accent {
+	border-color: #920075; /*hardcoded*/
+	background-color: #920075; /*hardcoded*/
+}
+
+.ibis-toaster--accent .ibis-toaster__title {
+	color: var(--color-white);
+}
+
+/* DEFAULT */
+.ibis-toaster--default {
+	border-color: var(--color-neutral-100);
+	background-color: var(--color-neutral-100);
+}
+
+.ibis-toaster--default .ibis-toaster__title {
+	color: var(--color-black);
+}
+
+.ibis-toaster__loader {
+	width: 1em;
+	height: 1em;
+
+	border: var(--border-width-default) solid var(--color-primary-300);
+	border-top-color: var(--color-primary-900);
+	border-radius: 50%;
+
+	animation: ibis-spin 0.8s linear infinite;
+}
+
+@keyframes ibis-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}

package/dist/components/inputs/Checkbox.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import "./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 "./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 "./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 "./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 "./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 "./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;

package/dist/components/inputs/Radio.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  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;
+  }
+
+  let {
+    id,
+    label,
+    value,
+    group = $bindable(),
+    inputSize = "md",
+    disabled = false,
+    invalid = false,
+    description,
+    error,
+    helpText,
+    ...rest
+  }: Props = $props();
+
+  const fallbackId = `ibis-radio-${Math.random().toString(36).slice(2)}`;
+  const inputId = $derived(id ?? fallbackId);
+
+  const checked = $derived(group === value);
+</script>
+
+<div
+  class="ibis-radio
+  ibis-radio--{inputSize}
+  {disabled ? 'ibis-radio--disabled' : ''}
+  {invalid ? 'ibis-radio--invalid' : ''}">
+  {#if label}
+    <div class="ibis-radio__label-wrapper">
+      <label class="ibis-radio__label" for={inputId}>{label}</label>
+
+      {#if description}
+        <div class="ibis-radio__description">{description}</div>
+      {/if}
+    </div>
+  {/if}
+
+  <label class="ibis-radio__control" for={inputId}>
+    <input
+      {...rest}
+      id={inputId}
+      type="radio"
+      bind:group
+      {value}
+      {disabled}
+      class="ibis-radio__input" />
+
+    <span class="ibis-radio__circle">
+      <span class="ibis-radio__dot" class:ibis-radio__dot--active={checked}></span>
+    </span>
+
+    {#if label}
+      <span class="ibis-radio__text">{label}</span>
+    {/if}
+  </label>
+
+  {#if invalid && error}
+    <div class="ibis-radio__error" role="alert">{error}</div>
+  {:else if helpText}
+    <div class="ibis-radio__help">{helpText}</div>
+  {/if}
+</div>