npm - @ibis-design/svelte - Versions diffs - 0.5.0 → 0.7.0 - Mend

@ibis-design/svelte 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/README.md +42 -10
package/dist/components/buttons/Button.svelte +106 -0
package/dist/components/buttons/Button.svelte.d.ts +69 -0
package/dist/components/buttons/DropdownButton.svelte +91 -0
package/dist/components/buttons/DropdownButton.svelte.d.ts +33 -0
package/dist/components/buttons/PillTab.svelte +84 -0
package/dist/components/buttons/PillTab.svelte.d.ts +55 -0
package/dist/components/containers/Banner.svelte +73 -0
package/dist/components/containers/Banner.svelte.d.ts +16 -0
package/dist/components/containers/Card.svelte +34 -0
package/dist/components/containers/Card.svelte.d.ts +14 -0
package/dist/components/containers/PillTabs.svelte +22 -0
package/dist/components/containers/PillTabs.svelte.d.ts +6 -0
package/dist/components/containers/TipIndicator.svelte +78 -0
package/dist/components/containers/TipIndicator.svelte.d.ts +28 -0
package/dist/components/containers/Toaster.svelte +75 -0
package/dist/components/containers/Toaster.svelte.d.ts +16 -0
package/dist/components/containers/Tooltip.svelte.d.ts +26 -0
package/dist/components/inputs/.gitkeep +0 -0
package/dist/components/inputs/Checkbox.svelte +95 -0
package/dist/components/inputs/Checkbox.svelte.d.ts +33 -0
package/dist/components/inputs/Chips.svelte +104 -0
package/dist/components/inputs/Chips.svelte.d.ts +48 -0
package/dist/components/inputs/Dropdown.svelte +83 -0
package/dist/components/inputs/Dropdown.svelte.d.ts +15 -0
package/dist/components/inputs/Radio.svelte +109 -0
package/dist/components/inputs/Radio.svelte.d.ts +49 -0
package/dist/components/inputs/Switch.svelte +45 -0
package/dist/components/inputs/Switch.svelte.d.ts +21 -0
package/dist/components/inputs/TextArea.svelte +65 -0
package/dist/components/inputs/TextArea.svelte.d.ts +14 -0
package/dist/components/inputs/TextInput.svelte +273 -0
package/dist/components/inputs/TextInput.svelte.d.ts +140 -0
package/dist/components/inputs/TextLink.svelte +102 -0
package/dist/components/inputs/TextLink.svelte.d.ts +21 -0
package/dist/index.d.ts +21 -20
package/dist/index.js +36 -3187
package/dist/layouts/AppLayout.svelte +83 -0
package/dist/layouts/AppLayout.svelte.d.ts +20 -0
package/dist/layouts/AuthLayout.svelte +63 -0
package/dist/layouts/AuthLayout.svelte.d.ts +18 -0
package/dist/layouts/DashboardLayout.svelte +88 -0
package/dist/layouts/DashboardLayout.svelte.d.ts +20 -0
package/dist/types/button.js +5 -0
package/dist/types/index.d.ts +2 -2
package/dist/types/index.js +5 -0
package/dist/types/layout.d.ts +1 -1
package/dist/types/layout.js +1 -0
package/package.json +16 -11
package/dist/index.css +0 -1
package/dist/index.js.map +0 -1
package/dist/lib/components/buttons/Button.svelte.d.ts +0 -1
package/dist/lib/components/buttons/DropdownButton.svelte.d.ts +0 -1
package/dist/lib/components/buttons/PillTab.svelte.d.ts +0 -1
package/dist/lib/components/containers/Banner.svelte.d.ts +0 -1
package/dist/lib/components/containers/Card.svelte.d.ts +0 -1
package/dist/lib/components/containers/Toaster.svelte.d.ts +0 -1
package/dist/lib/components/inputs/Checkbox.svelte.d.ts +0 -1
package/dist/lib/components/inputs/Chips.svelte.d.ts +0 -1
package/dist/lib/components/inputs/DateInput.svelte.d.ts +0 -1
package/dist/lib/components/inputs/DateInput2.svelte.d.ts +0 -1
package/dist/lib/components/inputs/Dropdown.svelte.d.ts +0 -1
package/dist/lib/components/inputs/Password.svelte.d.ts +0 -1
package/dist/lib/components/inputs/Radio.svelte.d.ts +0 -1
package/dist/lib/components/inputs/TextArea.svelte.d.ts +0 -1
package/dist/lib/components/inputs/TextInput.svelte.d.ts +0 -1
package/dist/lib/components/inputs/TextLink.svelte.d.ts +0 -1
package/dist/lib/layouts/AppLayout.svelte.d.ts +0 -1
package/dist/lib/layouts/AuthLayout.svelte.d.ts +0 -1
package/dist/lib/layouts/DashboardLayout.svelte.d.ts +0 -1
/package/dist/{types/input.d.ts → components/containers/Tooltip.svelte} +0 -0

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@ Svelte 5 component library for the IBIS design system. Provides primitives (Butt
 ## Requirements
 - **Svelte 5** (runes and snippets; no slots).
-- **@ibis-design/css** — design tokens. The consuming application must load the token stylesheet once so `:root` variables are available.
+- **@ibis-design/css** — design tokens. Load the stylesheet once and set `data-theme` on `<html>` (`ib-light`, `ib-dark`, `alc-light`, `alc-dark`).
 ## Installation
@@ -15,16 +15,38 @@ npm install @ibis-design/svelte @ibis-design/css
 ## Token CSS
-Import the design tokens in your application entry or root layout so all components receive the correct variables:
+Import tokens and set the theme on the document root:
-```js
-// e.g. in your app entry (main.ts, +layout.svelte, or App.svelte)
-import '@ibis-design/css';
-// or
-import '@ibis-design/css/ibis-design.css';
+```svelte
+<script>
+  import '@ibis-design/css';
+  if (typeof document !== 'undefined') {
+    document.documentElement.dataset.theme = 'ib-light'; // or alc-dark, etc.
+  }
+</script>
+```
+Without the CSS import and `data-theme`, components will not resolve design-system variables.
+### Canonical variable names
+Use semantic tokens from the active theme, for example:
+- `--font-size-body-sm` (not legacy `normal-text` names)
+- `--color-brand-secondary` for secondary actions
+- `--shadow-focus-default` for focus rings
+- `--border-radius-md`, `--border-color-button`
+### Shared component CSS
+All component styles live in `@ibis-design/css` (`packages/css/src/styles/components/`). Each Svelte component imports its stylesheet from the CSS package, for example in `Button.svelte`:
+```ts
+import '@ibis-design/css/components/button.css';
 ```
-Without this import, components will not have colors, spacing, or typography from the design system.
+Consumers get styles automatically when they import the component; no separate CSS import is required unless you use the classes outside these components.
 ## Usage
@@ -115,16 +137,26 @@ With inline snippets:
 ## Build
+This package is built with **`@sveltejs/package`** (`svelte-package`), the supported Svelte library pipeline. It preprocesses Svelte, transpiles TypeScript, and emits **`.d.ts` next to outputs** so consumers get correct component prop types (not a separate Vite “library mode” + `vite-plugin-dts` flow).
 From the package directory:
 ```bash
 npm run build
 ```
+This runs `svelte-kit sync` (generates `.svelte-kit` types for the minimal Kit shell) then `svelte-package`, writing output to `dist/`.
+Watch mode during development:
+```bash
+npm run dev
+```
 From the monorepo root:
 ```bash
-npm run build --workspaces
+npm run build -w @ibis-design/svelte
 ```
 ## Type checking
@@ -133,4 +165,4 @@ npm run build --workspaces
 npm run check
 ```
-Runs `svelte-check` with the package `tsconfig.json`.
+Runs `svelte-kit sync` then `svelte-check` with the package `tsconfig.json`.

package/dist/components/buttons/Button.svelte ADDED Viewed

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import '@ibis-design/css/components/button.css';
+	import type { Snippet } from 'svelte';
+	import type { ButtonVariant, ButtonSize } from '../../types/button';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	interface Props extends HTMLButtonAttributes {
+		/**
+		 * Native button variants.
+		 *
+		 * Determines the visual style of the button, affecting its colors and borders.
+		 *
+		 * @default "primary"
+		 * @example
+		 * - `primary`: <Button variant="primary">Save</Button>
+		 * - `secondary`: <Button variant="secondary">Cancel</Button>
+		 */
+		variant?: ButtonVariant;
+		/**
+		 * Native button sizes.
+		 *
+		 * Determines the size of the button, affecting its padding and font size.
+		 *
+		 * @default "md"
+		 * @example
+		 * - `sm`: <Button size="sm">Small</Button>
+		 * - `md`: <Button size="md">Medium</Button>
+		 * - `lg`: <Button size="lg">Large</Button>
+		 */
+		size?: ButtonSize;
+		/**
+		 * Native button behavior types.
+		 *
+		 * Determines how the button behaves when clicked.
+		 *
+		 * @default "button"
+		 * @remarks
+		 * Use `submit` for form submission and `reset` to clear form fields.
+		 * Avoid using `submit` for non-form actions
+		 */
+		type?: 'button' | 'submit' | 'reset';
+		/**
+		 * Disables the button, preventing user interaction and applying disabled styles.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Shows a loading spinner and disables the button to indicate an ongoing action.
+		 *
+		 * @default false
+		 */
+		loading?: boolean;
+		/**
+		 * Applies a skeleton loading state to the button, showing a placeholder style while content is loading.
+		 *
+		 * @default false`
+		 */
+		skeleton?: boolean;
+		/**
+		 * If true, the button is styled for icon-only content, removing extra padding and centering the icon.
+		 *
+		 * @default false
+		 */
+		iconOnly?: boolean;
+		label?: string;
+		children?: Snippet;
+	}
+	let {
+		variant = 'primary',
+		size = 'md',
+		type = 'button',
+		disabled = false,
+		loading = false,
+		skeleton = false,
+		iconOnly = false,
+		label,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+<button
+	{...rest}
+	{type}
+	{disabled}
+	aria-busy={loading}
+	class="ibis-button
+  ibis-button--{variant}
+  ibis-button--{size}
+  {loading ? 'ibis-button--loading' : ''}
+  {skeleton ? 'ibis-button--skeleton' : ''}
+  {iconOnly ? 'ibis-button--icon-only' : ''}"
+>
+	<span class="ibis-button__content {loading || skeleton ? 'ibis-button__content--hidden' : ''}">
+		{#if children}
+			{@render children?.()}
+		{:else if label}
+			{label}
+		{/if}
+	</span>
+	{#if loading}
+		<span class="ibis-button__loader" aria-hidden="true"></span>
+	{/if}
+</button>

package/dist/components/buttons/Button.svelte.d.ts ADDED Viewed

@@ -0,0 +1,69 @@
+import '@ibis-design/css/components/button.css';
+import type { Snippet } from 'svelte';
+import type { ButtonVariant, ButtonSize } from '../../types/button';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    /**
+     * Native button variants.
+     *
+     * Determines the visual style of the button, affecting its colors and borders.
+     *
+     * @default "primary"
+     * @example
+     * - `primary`: <Button variant="primary">Save</Button>
+     * - `secondary`: <Button variant="secondary">Cancel</Button>
+     */
+    variant?: ButtonVariant;
+    /**
+     * Native button sizes.
+     *
+     * Determines the size of the button, affecting its padding and font size.
+     *
+     * @default "md"
+     * @example
+     * - `sm`: <Button size="sm">Small</Button>
+     * - `md`: <Button size="md">Medium</Button>
+     * - `lg`: <Button size="lg">Large</Button>
+     */
+    size?: ButtonSize;
+    /**
+     * Native button behavior types.
+     *
+     * Determines how the button behaves when clicked.
+     *
+     * @default "button"
+     * @remarks
+     * Use `submit` for form submission and `reset` to clear form fields.
+     * Avoid using `submit` for non-form actions
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Disables the button, preventing user interaction and applying disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows a loading spinner and disables the button to indicate an ongoing action.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Applies a skeleton loading state to the button, showing a placeholder style while content is loading.
+     *
+     * @default false`
+     */
+    skeleton?: boolean;
+    /**
+     * If true, the button is styled for icon-only content, removing extra padding and centering the icon.
+     *
+     * @default false
+     */
+    iconOnly?: boolean;
+    label?: string;
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/buttons/DropdownButton.svelte ADDED Viewed

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import '@ibis-design/css/components/dropdownButton.css';
+	import Button from './Button.svelte';
+	import type { Snippet } from 'svelte';
+	interface Props {
+		/**
+		 * The label shown in the trigger button when an option is selected.
+		 */
+		label?: string;
+		/**
+		 * Placeholder text shown in the trigger button when no option is selected.
+		 *
+		 * @default "Select..."
+		 */
+		placeholder?: string;
+		/**
+		 * Custom trigger content via Snippet.
+		 * Falls back to label or placeholder if not provided.
+		 */
+		trigger?: Snippet;
+		/**
+		 * Custom menu content via Snippet.
+		 * Use this to pass menu items.
+		 */
+		menu?: Snippet<[close: () => void]>;
+		/**
+		 * Disables the dropdown, preventing interaction.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+	}
+	let { label, placeholder = 'Select...', trigger, menu, disabled = false }: Props = $props();
+	let open = $state(false);
+	let dropdownRef = $state<HTMLDivElement | null>(null);
+	const menuId = `ibis-dropdown-button-${Math.random().toString(36).slice(2)}`;
+	const toggle = () => {
+		if (disabled) return;
+		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;
+		}
+	};
+</script>
+<svelte:window onclick={handleClickOutside} />
+<div
+	class="dropdown-button {open ? 'dropdown-button--open' : ''}"
+	bind:this={dropdownRef}
+	onkeydown={handleKeydown}
+	role="combobox"
+	tabindex="0"
+	aria-expanded={open}
+	aria-haspopup="listbox"
+	aria-controls={menuId}
+>
+	<!-- Trigger -->
+	<Button onclick={toggle} {disabled}>
+		{#if trigger}
+			{@render trigger()}
+		{:else}
+			{label || placeholder}
+		{/if}
+		<svg class="caret {open ? 'caret--open' : ''}" viewBox="0 0 16 16" aria-hidden="true">
+			<path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" />
+		</svg>
+	</Button>
+	<!-- Menu -->
+	{#if open}
+		<ul class="dropdown-menu" role="listbox">
+			{#if menu}
+				{@render menu(() => (open = false))}
+			{/if}
+		</ul>
+	{/if}
+</div>

package/dist/components/buttons/DropdownButton.svelte.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import '@ibis-design/css/components/dropdownButton.css';
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * The label shown in the trigger button when an option is selected.
+     */
+    label?: string;
+    /**
+     * Placeholder text shown in the trigger button when no option is selected.
+     *
+     * @default "Select..."
+     */
+    placeholder?: string;
+    /**
+     * Custom trigger content via Snippet.
+     * Falls back to label or placeholder if not provided.
+     */
+    trigger?: Snippet;
+    /**
+     * Custom menu content via Snippet.
+     * Use this to pass menu items.
+     */
+    menu?: Snippet<[close: () => void]>;
+    /**
+     * Disables the dropdown, preventing interaction.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const DropdownButton: import("svelte").Component<Props, {}, "">;
+type DropdownButton = ReturnType<typeof DropdownButton>;
+export default DropdownButton;

package/dist/components/buttons/PillTab.svelte ADDED Viewed

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import '@ibis-design/css/components/pillTab.css';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	interface Props extends HTMLInputAttributes {
+		/**
+		 * The visible text label displayed inside the pill tab.
+		 *
+		 * @example
+		 * <PillTab label="Overview" value="overview" />
+		 */
+		label?: string;
+		/**
+		 * The unique identifier for the input element.
+		 *
+		 * If not provided, a random ID is generated automatically.
+		 */
+		id?: string;
+		/**
+		 * The currently selected value in the radio group.
+		 *
+		 * When `group` matches `value`, the pill tab appears active.
+		 * Bind this to a shared variable across all tabs in the same group.
+		 *
+		 * @example
+		 * <PillTab bind:group={activeTab} value="overview" label="Overview" />
+		 */
+		group?: string | number;
+		/**
+		 * The value this pill tab represents in the radio group.
+		 *
+		 * When `group === value`, this tab is considered active.
+		 *
+		 * @example
+		 * <PillTab value="settings" label="Settings" />
+		 */
+		value: string | number;
+		/**
+		 * The name attribute shared across all radio inputs in the same group.
+		 *
+		 * Required for native radio group behavior — all tabs in the same
+		 * group must share the same `name`.
+		 *
+		 * @example
+		 * <PillTab name="main-nav" value="overview" label="Overview" />
+		 */
+		name?: string;
+		/**
+		 * Disables the pill tab, preventing user interaction and applying disabled styles.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+	}
+	let { id, label, group = $bindable(), value, name, disabled = false, ...rest }: Props = $props();
+	const fallbackId = `ibis-pill-tab-${Math.random().toString(36).slice(2)}`;
+	const inputId = $derived(id ?? fallbackId);
+	const checked = $derived(group === value);
+</script>
+<label
+	class="ibis-pill-tab
+{checked ? 'ibis-pill-tab--active' : ''}
+{disabled ? 'ibis-pill-tab--disabled' : ''}"
+	for={inputId}
+>
+	<input
+		{...rest}
+		id={inputId}
+		type="radio"
+		{name}
+		bind:group
+		{value}
+		{disabled}
+		class="ibis-pill-tab__input"
+	/>
+	<span class="ibis-pill-tab__content">
+		{label}
+	</span>
+</label>

package/dist/components/buttons/PillTab.svelte.d.ts ADDED Viewed

@@ -0,0 +1,55 @@
+import '@ibis-design/css/components/pillTab.css';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    /**
+     * The visible text label displayed inside the pill tab.
+     *
+     * @example
+     * <PillTab label="Overview" value="overview" />
+     */
+    label?: string;
+    /**
+     * The unique identifier for the input element.
+     *
+     * If not provided, a random ID is generated automatically.
+     */
+    id?: string;
+    /**
+     * The currently selected value in the radio group.
+     *
+     * When `group` matches `value`, the pill tab appears active.
+     * Bind this to a shared variable across all tabs in the same group.
+     *
+     * @example
+     * <PillTab bind:group={activeTab} value="overview" label="Overview" />
+     */
+    group?: string | number;
+    /**
+     * The value this pill tab represents in the radio group.
+     *
+     * When `group === value`, this tab is considered active.
+     *
+     * @example
+     * <PillTab value="settings" label="Settings" />
+     */
+    value: string | number;
+    /**
+     * The name attribute shared across all radio inputs in the same group.
+     *
+     * Required for native radio group behavior — all tabs in the same
+     * group must share the same `name`.
+     *
+     * @example
+     * <PillTab name="main-nav" value="overview" label="Overview" />
+     */
+    name?: string;
+    /**
+     * Disables the pill tab, preventing user interaction and applying disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare const PillTab: import("svelte").Component<Props, {}, "group">;
+type PillTab = ReturnType<typeof PillTab>;
+export default PillTab;

package/dist/components/containers/Banner.svelte ADDED Viewed

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import "@ibis-design/css/components/banner.css";
+  import type { Snippet } from "svelte";
+  type BannerType = "success" | "error" | "default";
+  interface Props {
+    type?: BannerType;
+    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-banner"
+    role="status"
+    class:ibis-banner--success={type === "success"}
+    class:ibis-banner--error={type === "error"}
+    class:ibis-banner--default={type === "default"}>
+    {#if loading || icon || iconText}
+      <div class="ibis-banner__icon">
+        {#if loading}
+          <span class="ibis-banner__loader" aria-hidden="true"></span>
+        {:else if icon}
+          {@render icon?.()}
+        {:else}
+          {iconText}
+        {/if}
+      </div>
+    {/if}
+    <div class="ibis-banner__content">
+      {#if title}
+        <div class="ibis-banner__title">{title}</div>
+      {/if}
+      <div class="ibis-banner__message">
+        {#if children}
+          {@render children?.()}
+        {:else if message}
+          {message}
+        {/if}
+      </div>
+    </div>
+    {#if closable}
+      <button class="ibis-banner__close" onclick={close} aria-label="Close"> x </button>
+    {/if}
+  </div>
+{/if}

package/dist/components/containers/Banner.svelte.d.ts ADDED Viewed

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

package/dist/components/containers/Card.svelte ADDED Viewed

@@ -0,0 +1,34 @@
+<!--
+  Card – Container with token-based padding, radius, and shadow.
+  @component
+  @param {Snippet} [children] - Snippet content for the card body.
+  @example
+  <Card>Card content</Card>
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  interface Props {
+    children?: Snippet;
+  }
+  let { children }: Props = $props();
+</script>
+<div class="ibis-card">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+<style>
+  .ibis-card {
+    background-color: var(--color-backgrounds-classic-light);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-default);
+    padding: var(--spacing-4);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-normal);
+  }
+</style>

package/dist/components/containers/Card.svelte.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children?: Snippet;
+}
+/**
+ * Card – Container with token-based padding, radius, and shadow.
+ *
+ * @param {Snippet} [children] - Snippet content for the card body.
+ * @example
+ * <Card>Card content</Card>
+ */
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/containers/PillTabs.svelte ADDED Viewed

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    children?: () => any;
+  }
+  let { children }: Props = $props();
+</script>
+<div class="ibis-pill-tabs">
+  {@render children?.()}
+</div>
+<style>
+  .ibis-pill-tabs {
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: var(--border-radius-full);
+    background: var(--color-white);
+    padding: 4px;
+    gap: 4px;
+  }
+</style>