@ibis-design/svelte 0.5.0 → 0.7.0

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

@@ -0,0 +1,140 @@
+import "@ibis-design/css/components/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;

package/dist/components/inputs/TextLink.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import "@ibis-design/css/components/textlink.css";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+
+  interface Props extends HTMLAnchorAttributes {
+    href?: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    underline?: "always" | "hover" | "none";
+    linkSize?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    loading?: boolean;
+    skeleton?: boolean;
+    label?: string;
+    children?: Snippet;
+    iconPrefix?: Snippet;
+    iconSuffix?: Snippet;
+    iconPrefixText?: string;
+    iconSuffixText?: string;
+  }
+
+  let {
+    href,
+    target,
+    underline = "hover",
+    linkSize = "md",
+    disabled = false,
+    loading = false,
+    skeleton = false,
+    rel,
+    label,
+    children,
+    iconPrefix,
+    iconSuffix,
+    iconPrefixText,
+    iconSuffixText,
+    ...rest
+  }: Props = $props();
+
+  const computedRel = $derived(target === "_blank" ? (rel ?? "noopener noreferrer") : rel);
+
+  $effect(() => {
+    if (disabled && href) {
+      console.warn("Disabled links should not have an href");
+    }
+    if (iconPrefix && iconPrefixText) {
+      console.warn("iconPrefix snippet takes priority over iconPrefixText when both are provided.");
+    }
+    if (iconSuffix && iconSuffixText) {
+      console.warn("iconSuffix snippet takes priority over iconSuffixText when both are provided.");
+    }
+  });
+</script>
+
+<a
+  {...rest}
+  // href={disabled || skeleton ? undefined : href}
+  {target}
+  rel={computedRel}
+  aria-disabled={disabled || skeleton}
+  aria-busy={loading}
+  class=" ibis-link
+ibis-link--{linkSize}
+ibis-link--underline-{underline}
+{disabled ? 'ibis-link--disabled' : ''}
+{loading ? 'ibis-link--loading' : ''}
+{skeleton ? 'ibis-link--skeleton' : ''}">
+  {#if iconPrefix || iconPrefixText}
+    <span class="ibis-link__icon ibis-link--prefix">
+      {#if iconPrefix}
+        {@render iconPrefix()}
+      {:else}
+        {iconPrefixText}
+      {/if}
+    </span>
+  {/if}
+
+  <span
+    class="ibis-link__content
+    {loading ? 'ibis-link__content--hidden' : ''} 
+    {skeleton ? 'ibis-link__content--skeleton' : ''}">
+    {#if children}
+      {@render children?.()}
+    {:else if label}
+      {label}
+    {/if}
+  </span>
+
+  {#if iconSuffix || iconSuffixText}
+    <span class="ibis-link__icon ibis-link--suffix">
+      {#if iconSuffix}
+        {@render iconSuffix()}
+      {:else}
+        {iconSuffixText}
+      {/if}
+    </span>
+  {/if}
+
+  {#if loading}
+    <span class="ibis-link__loader" aria-hidden="true"></span>
+  {/if}
+</a>

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

@@ -0,0 +1,21 @@
+import "@ibis-design/css/components/textlink.css";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+interface Props extends HTMLAnchorAttributes {
+    href?: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    underline?: "always" | "hover" | "none";
+    linkSize?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    loading?: boolean;
+    skeleton?: boolean;
+    label?: string;
+    children?: Snippet;
+    iconPrefix?: Snippet;
+    iconSuffix?: Snippet;
+    iconPrefixText?: string;
+    iconSuffixText?: string;
+}
+declare const TextLink: import("svelte").Component<Props, {}, "">;
+type TextLink = ReturnType<typeof TextLink>;
+export default TextLink;

package/dist/index.d.ts

@@ -13,23 +13,24 @@
  *
  * @packageDocumentation
  */
-export { default as Button } from './lib/components/buttons/Button.svelte';
-export { default as DropdownButton } from './lib/components/buttons/DropdownButton.svelte';
-export { default as Card } from './lib/components/containers/Card.svelte';
-export { default as AuthLayout } from './lib/layouts/AuthLayout.svelte';
-export { default as AppLayout } from './lib/layouts/AppLayout.svelte';
-export { default as DashboardLayout } from './lib/layouts/DashboardLayout.svelte';
-export { default as DateInput } from './lib/components/inputs/DateInput.svelte';
-export { default as DateInput2 } from './lib/components/inputs/DateInput2.svelte';
-export { default as Dropdown } from './lib/components/inputs/Dropdown.svelte';
-export { default as Chips } from './lib/components/inputs/Chips.svelte';
-export { default as TextInput } from './lib/components/inputs/TextInput.svelte';
-export { default as TextArea } from './lib/components/inputs/TextArea.svelte';
-export { default as Checkbox } from './lib/components/inputs/Checkbox.svelte';
-export { default as Radio } from './lib/components/inputs/Radio.svelte';
-export { default as Banner } from './lib/components/containers/Banner.svelte';
-export { default as PillTab } from './lib/components/buttons/PillTab.svelte';
-export { default as Toaster } from './lib/components/containers/Toaster.svelte';
-export { default as TextLink } from './lib/components/inputs/TextLink.svelte';
-export { default as Password } from './lib/components/inputs/Password.svelte';
-export * from './types/index';
+export { default as Button } from "./components/buttons/Button.svelte";
+export { default as DropdownButton } from "./components/buttons/DropdownButton.svelte";
+export { default as Card } from "./components/containers/Card.svelte";
+export { default as AuthLayout } from "./layouts/AuthLayout.svelte";
+export { default as AppLayout } from "./layouts/AppLayout.svelte";
+export { default as DashboardLayout } from "./layouts/DashboardLayout.svelte";
+export { default as Dropdown } from "./components/inputs/Dropdown.svelte";
+export { default as Chips } from "./components/inputs/Chips.svelte";
+export { default as TextInput } from "./components/inputs/TextInput.svelte";
+export { default as TextArea } from "./components/inputs/TextArea.svelte";
+export { default as Checkbox } from "./components/inputs/Checkbox.svelte";
+export { default as Radio } from "./components/inputs/Radio.svelte";
+export { default as Switch } from "./components/inputs/Switch.svelte";
+export { default as Banner } from "./components/containers/Banner.svelte";
+export { default as PillTab } from "./components/buttons/PillTab.svelte";
+export { default as Toaster } from "./components/containers/Toaster.svelte";
+export { default as TextLink } from "./components/inputs/TextLink.svelte";
+export { default as TipIndicator } from "./components/containers/TipIndicator.svelte";
+export { default as PillTabs } from "./components/containers/PillTabs.svelte";
+export { default as Tooltip } from "./components/containers/Tooltip.svelte";
+export * from "./types/index";