dystopia-linear-lib 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bagus Yanuar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.17.0 create --template library --types ts --add prettier eslint vitest="usages:unit,component" playwright tailwindcss="plugins:typography" storybook --install npm dystopia-soft-lib
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/components/accordion/Accordion.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { setAccordionContext } from './accordion-context.js';
+	import type { AccordionProps } from './Accordion.types.js';
+
+	let {
+		type = 'single',
+		value = $bindable(),
+		class: className,
+		children,
+		...restProps
+	}: AccordionProps = $props();
+
+	const baseId = $props.id();
+
+	function isOpen(itemValue: string): boolean {
+		if (type === 'multiple') {
+			return ((value as string[] | undefined) ?? []).includes(itemValue);
+		}
+		return value === itemValue;
+	}
+
+	function toggle(itemValue: string) {
+		if (type === 'multiple') {
+			const current = (value as string[] | undefined) ?? [];
+			value = current.includes(itemValue)
+				? current.filter((v) => v !== itemValue)
+				: [...current, itemValue];
+		} else {
+			value = value === itemValue ? '' : itemValue;
+		}
+	}
+
+	setAccordionContext({ baseId, isOpen, toggle });
+</script>
+
+<div class={cn('overflow-hidden rounded-lg border border-border', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionProps } from './Accordion.types.js';
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/accordion/Accordion.types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface AccordionBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    class?: string;
+    children: Snippet;
+}
+export type AccordionProps = AccordionBaseProps & ({
+    type?: 'single';
+    value?: string;
+} | {
+    type: 'multiple';
+    value?: string[];
+});
+export {};

package/dist/components/accordion/Accordion.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/accordion/AccordionItem.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { idFor } from '../../utils/id.js';
+	import { getAccordionContext } from './accordion-context.js';
+	import type { AccordionItemProps } from './AccordionItem.types.js';
+
+	let {
+		value,
+		class: className,
+		classes,
+		disabled = false,
+		trigger,
+		children,
+		...restProps
+	}: AccordionItemProps = $props();
+
+	const context = getAccordionContext();
+	const open = $derived(context.isOpen(value));
+	const triggerId = $derived(idFor(context.baseId, 'trigger', value));
+	const contentId = $derived(idFor(context.baseId, 'content', value));
+</script>
+
+<div class={cn('border-b border-border last:border-b-0', className)} {...restProps}>
+	<button
+		type="button"
+		id={triggerId}
+		{disabled}
+		aria-expanded={open}
+		aria-controls={contentId}
+		data-state={open ? 'open' : 'closed'}
+		onclick={() => context.toggle(value)}
+		class={cn(
+			'flex w-full items-center justify-between gap-tight rounded-md px-control-x py-compact text-left text-sm leading-snug font-medium text-foreground-soft transition-colors duration-150 hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+			classes?.trigger
+		)}
+	>
+		{@render trigger()}
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			class={cn(
+				'size-4 shrink-0 text-foreground-faint transition-transform duration-150',
+				open && 'rotate-180'
+			)}
+		>
+			<path d="m6 9 6 6 6-6" />
+		</svg>
+	</button>
+
+	<div
+		id={contentId}
+		data-state={open ? 'open' : 'closed'}
+		inert={!open}
+		class={cn(
+			'grid transition-[grid-template-rows] duration-200 ease-out',
+			open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+		)}
+	>
+		<div class="overflow-hidden">
+			<div class={cn('px-control-x pb-compact text-sm text-foreground-muted', classes?.content)}>
+				{@render children()}
+			</div>
+		</div>
+	</div>
+</div>

package/dist/components/accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionItemProps } from './AccordionItem.types.js';
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/accordion/AccordionItem.types.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    class?: string;
+    classes?: {
+        trigger?: string;
+        content?: string;
+    };
+    value: string;
+    disabled?: boolean;
+    trigger: Snippet;
+    children: Snippet;
+}

package/dist/components/accordion/AccordionItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/accordion/accordion-context.d.ts

@@ -0,0 +1,8 @@
+interface AccordionContext {
+    baseId: string;
+    isOpen: (value: string) => boolean;
+    toggle: (value: string) => void;
+}
+export declare function setAccordionContext(context: AccordionContext): void;
+export declare function getAccordionContext(): AccordionContext;
+export {};

package/dist/components/accordion/accordion-context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const ACCORDION_CONTEXT_KEY = Symbol('accordion');
+export function setAccordionContext(context) {
+    setContext(ACCORDION_CONTEXT_KEY, context);
+}
+export function getAccordionContext() {
+    const context = getContext(ACCORDION_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('AccordionItem must be rendered inside <Accordion>.');
+    }
+    return context;
+}

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.svelte';
+export type { AccordionProps } from './Accordion.types.js';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export type { AccordionItemProps } from './AccordionItem.types.js';

package/dist/components/accordion/index.js

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';

package/dist/components/alert/Alert.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { alertVariants } from './Alert.variants.js';
+	import type { AlertProps } from './Alert.types.js';
+
+	let {
+		variant,
+		class: className,
+		classes,
+		icon,
+		title,
+		description,
+		children,
+		...restProps
+	}: AlertProps = $props();
+
+	const tones = {
+		default: 'text-foreground-soft',
+		danger: 'text-danger',
+		warning: 'text-warning',
+		success: 'text-success'
+	} as const;
+	const tone = $derived(tones[variant ?? 'default']);
+</script>
+
+<div role="alert" class={cn(alertVariants({ variant }), className)} {...restProps}>
+	{#if icon}
+		<span aria-hidden="true" class={cn('shrink-0', tone, classes?.icon)}>
+			{@render icon()}
+		</span>
+	{/if}
+	<div class="min-w-0 flex-1 space-y-1">
+		{#if title}
+			<p class={cn('leading-snug font-medium', tone, classes?.title)}>
+				{@render title()}
+			</p>
+		{/if}
+		{#if description}
+			<p class={cn('leading-snug text-foreground-subtle', classes?.description)}>
+				{@render description()}
+			</p>
+		{/if}
+		{@render children?.()}
+	</div>
+</div>

package/dist/components/alert/Alert.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AlertProps } from './Alert.types.js';
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/alert/Alert.types.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { AlertVariantProps } from './Alert.variants.js';
+export interface AlertProps extends AlertVariantProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    class?: string;
+    classes?: {
+        icon?: string;
+        title?: string;
+        description?: string;
+    };
+    icon?: Snippet;
+    title?: Snippet;
+    description?: Snippet;
+    children?: Snippet;
+}

package/dist/components/alert/Alert.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/alert/Alert.variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const alertVariants: (props?: ({
+    variant?: "default" | "danger" | "warning" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertVariantProps = VariantProps<typeof alertVariants>;

package/dist/components/alert/Alert.variants.js

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+export const alertVariants = cva('flex gap-loose rounded-lg border bg-surface p-4 text-sm', {
+    variants: {
+        variant: {
+            default: 'border-border text-foreground-muted',
+            danger: 'border-danger-border text-foreground-muted',
+            warning: 'border-warning-border text-foreground-muted',
+            success: 'border-success-border text-foreground-muted'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});

package/dist/components/alert/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert.svelte';
+export type { AlertProps } from './Alert.types.js';
+export { alertVariants, type AlertVariantProps } from './Alert.variants.js';

package/dist/components/alert/index.js

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+export { alertVariants } from './Alert.variants.js';

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { AvatarProps } from './Avatar.types.js';
+
+	let { src, alt, classes, class: className, children, ...restProps }: AvatarProps = $props();
+
+	let status = $state<'loading' | 'loaded' | 'error'>('loading');
+
+	$effect(() => {
+		// Re-arm on every `src` change so a new image gets its own load/error
+		// cycle instead of inheriting the previous image's status.
+		void src;
+		status = 'loading';
+	});
+</script>
+
+<span
+	class={cn(
+		'relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-subtle text-sm',
+		className
+	)}
+	{...restProps}
+>
+	{#if src && status !== 'error'}
+		<img
+			{src}
+			{alt}
+			onload={() => (status = 'loaded')}
+			onerror={() => (status = 'error')}
+			class={cn('size-full object-cover', status !== 'loaded' && 'hidden', classes?.image)}
+		/>
+	{/if}
+	{#if status !== 'loaded'}
+		<span class={cn('font-medium text-foreground-subtle', classes?.fallback)}>
+			{@render children?.()}
+		</span>
+	{/if}
+</span>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from './Avatar.types.js';
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/avatar/Avatar.types.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    class?: string;
+    classes?: {
+        image?: string;
+        fallback?: string;
+    };
+    src?: string;
+    alt: string;
+    /** Shown while the image is loading, missing, or fails to load — e.g. initials. */
+    children?: Snippet;
+}

package/dist/components/avatar/Avatar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarProps } from './Avatar.types.js';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { badgeVariants } from './Badge.variants.js';
+	import type { BadgeProps } from './Badge.types.js';
+
+	let { variant, class: className, children, ...restProps }: BadgeProps = $props();
+</script>
+
+<span class={cn(badgeVariants({ variant }), className)} {...restProps}>
+	{@render children()}
+</span>

package/dist/components/badge/Badge.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BadgeProps } from './Badge.types.js';
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/badge/Badge.types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BadgeVariantProps } from './Badge.variants.js';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeVariantProps {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/badge/Badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/badge/Badge.variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "danger" | "secondary" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;

package/dist/components/badge/Badge.variants.js

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+export const badgeVariants = cva('inline-flex w-fit items-center gap-tight rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors duration-150', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground',
+            secondary: 'border border-border bg-surface-subtle text-foreground-soft',
+            outline: 'border border-border bg-transparent text-foreground-soft',
+            danger: 'bg-danger text-danger-foreground'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});

package/dist/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from './Badge.svelte';
+export type { BadgeProps } from './Badge.types.js';
+export { badgeVariants, type BadgeVariantProps } from './Badge.variants.js';

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export { badgeVariants } from './Badge.variants.js';

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { BreadcrumbProps } from './Breadcrumb.types.js';
+
+	let { class: className, children, ...restProps }: BreadcrumbProps = $props();
+</script>
+
+<nav aria-label="breadcrumb" class={className} {...restProps}>
+	{@render children()}
+</nav>

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbProps } from './Breadcrumb.types.js';
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/breadcrumb/Breadcrumb.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/breadcrumb/BreadcrumbEllipsis.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import Popover from '../popover/Popover.svelte';
+	import type { BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.types.js';
+
+	let {
+		classes,
+		open = $bindable(false),
+		placement = 'bottom-start',
+		labels,
+		children,
+		...restProps
+	}: BreadcrumbEllipsisProps = $props();
+</script>
+
+<Popover
+	bind:open
+	{placement}
+	{...restProps}
+	classes={{
+		trigger: cn(
+			'h-auto w-auto border-0 px-1 py-1 text-foreground-faint hover:bg-surface-subtle hover:text-foreground-soft',
+			classes?.trigger
+		),
+		content: cn('min-w-36 p-1', classes?.content)
+	}}
+>
+	{#snippet trigger()}
+		<span class="sr-only">{labels?.more ?? 'More'}</span>
+		<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-4">
+			<circle cx="5" cy="12" r="1.5" />
+			<circle cx="12" cy="12" r="1.5" />
+			<circle cx="19" cy="12" r="1.5" />
+		</svg>
+	{/snippet}
+	{@render children()}
+</Popover>

package/dist/components/breadcrumb/BreadcrumbEllipsis.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.types.js';
+declare const BreadcrumbEllipsis: import("svelte").Component<BreadcrumbEllipsisProps, {}, "open">;
+type BreadcrumbEllipsis = ReturnType<typeof BreadcrumbEllipsis>;
+export default BreadcrumbEllipsis;

package/dist/components/breadcrumb/BreadcrumbEllipsis.types.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { Placement } from '@floating-ui/dom';
+export interface BreadcrumbEllipsisProps extends Omit<HTMLButtonAttributes, 'children' | 'class'> {
+    classes?: {
+        trigger?: string;
+        content?: string;
+    };
+    open?: boolean;
+    placement?: Placement;
+    labels?: {
+        more?: string;
+    };
+    /** Popover content — typically the collapsed `BreadcrumbLink`/`BreadcrumbItem`s. */
+    children: Snippet;
+}

package/dist/components/breadcrumb/BreadcrumbEllipsis.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { BreadcrumbItemProps } from './BreadcrumbItem.types.js';
+
+	let { class: className, children, ...restProps }: BreadcrumbItemProps = $props();
+</script>
+
+<li class={cn('inline-flex items-center gap-tight', className)} {...restProps}>
+	{@render children()}
+</li>

package/dist/components/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types.js';
+declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/components/breadcrumb/BreadcrumbItem.types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BreadcrumbItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+    class?: string;
+    children: Snippet;
+}

package/dist/components/breadcrumb/BreadcrumbItem.types.js

@@ -0,0 +1 @@
+export {};