@ibis-design/svelte 0.2.0 → 0.6.0

package/README.md

@@ -115,16 +115,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 +143,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

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

@@ -0,0 +1,69 @@
+import './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

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

@@ -0,0 +1,33 @@
+import './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

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

@@ -0,0 +1,55 @@
+import './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/buttons/button.css

@@ -0,0 +1,193 @@
+.ibis-button {
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	border: var(--border-width-default) solid transparent;
+	cursor: pointer;
+	transition:
+		filter var(--transition-duration-fast) var(--transition-timing-default),
+		transform var(--transition-duration-fast) var(--transition-timing-default),
+		box-shadow var(--transition-duration-fast) var(--transition-timing-default);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ibis-button :global(svg) {
+	width: 1em;
+	height: 1em;
+	display: inline-block;
+	vertical-align: middle;
+	gap: var(--spacing-1);
+}
+
+/* Content Layout */
+.ibis-button__content {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-1);
+}
+
+.ibis-button__content--hidden {
+	visibility: hidden;
+}
+
+/* Icon Only */
+.ibis-button--icon-only {
+	padding: var(--spacing-2);
+}
+
+.ibis-button--icon-only .ibis-button__content {
+	gap: 0;
+}
+
+/* Disabled State */
+.ibis-button:disabled {
+	opacity: var(--opacity-disabled);
+	cursor: not-allowed;
+}
+
+/* Loading State */
+.ibis-button--loading {
+	position: relative;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* Primary Variant */
+.ibis-button--primary {
+	background: linear-gradient(180deg, #9665df 0%, #7945c8 100%); /* Hardcoded */
+	color: var(--color-white);
+
+	box-shadow: var(--component-button-primary-default-shadow);
+	border: 0.5px solid #bd91ff; /* Hardcoded */
+}
+
+.ibis-button--primary:not(:disabled):hover,
+.ibis-button--primary:not(:disabled):active {
+	box-shadow: none;
+}
+
+.ibis-button--primary:not(:disabled):hover {
+	background: var(--color-primary-800);
+	border-color: none;
+	border-width: 0.7 px; /* Hardcoded */
+}
+
+.ibis-button--primary:not(:disabled):active {
+	background: var(--color-primary-800);
+	border-color: var(--color-primary-400);
+	border-width: var(--border-width-thin);
+}
+
+.ibis-button--primary:disabled {
+	background: var(--color-neutral-400);
+	color: var(--color-neutral-600);
+	border-color: var(--color-neutral-600);
+}
+
+/* Secondary Variant */
+.ibis-button--secondary {
+	background-color: transparent;
+	color: var(--color-primary-pink-500);
+	border-color: var(--color-primary-pink-700);
+}
+
+.ibis-button--secondary:not(:disabled):hover {
+	background-color: var(--color-primary-pink-100);
+}
+
+/* Variant Sizes */
+.ibis-button--sm {
+	padding: var(--spacing-1) var(--spacing-2);
+	font-size: var(--font-size-normal-text-sm);
+	border-radius: var(--component-button-size-sm-border-radius);
+}
+
+.ibis-button--md {
+	padding: var(--spacing-2) var(--spacing-4);
+	font-size: var(--font-size-normal-text-DEFAULT);
+	border-radius: var(--component-button-size-md-border-radius);
+}
+
+.ibis-button--lg {
+	padding: var(--spacing-3) var(--spacing-6);
+	font-size: var(--font-size-normal-text-lg);
+	border-radius: var(--component-button-size-lg-border-radius);
+}
+
+/* Loader Spinner */
+.ibis-button__loader {
+	position: absolute;
+	width: 1em;
+	height: 1em;
+	border: var(--border-width-default) solid var(--color-black);
+	border-top-color: var(--color-white);
+	border-radius: 50%;
+	animation: ibis-spin 0.8s linear infinite;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+@keyframes ibis-spin {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
+/* Skeleton State */
+.ibis-button--skeleton {
+	position: relative;
+	overflow: hidden;
+	background: var(--color-neutral-200);
+	color: transparent;
+	border-color: var(--color-neutral-500);
+	cursor: default;
+	pointer-events: none;
+}
+
+.ibis-button--skeleton::after {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 80%;
+	height: 1em;
+	background-color: var(--color-neutral-400);
+}
+
+.ibis-button--icon-only--skeleton::after {
+	width: 1em;
+	height: 1em;
+	border-radius: 4px;
+}
+
+.ibis-button--skeleton::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		90deg,
+		rgba(255, 255, 255, 0.25) 0%,
+		rgba(255, 255, 255, 0.6) 50%,
+		rgba(255, 255, 255, 0.25) 100%
+	);
+	transform: translateX(-100%);
+	animation: ibis-shimmer 2s infinite;
+	border-radius: inherit;
+}
+
+@keyframes ibis-shimmer {
+	0% {
+		transform: translateX(-100%);
+	}
+
+	100% {
+		transform: translateX(100%);
+	}
+}