dystopia-linear-lib 1.0.0

package/dist/components/calendar/Calendar.types.d.ts

@@ -0,0 +1,52 @@
+import type { CalendarDate } from '@internationalized/date';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface CalendarRangeValue {
+    start: CalendarDate | undefined;
+    end: CalendarDate | undefined;
+}
+/** All user-facing strings, structured so a consumer can fully localize — never hardcode English here. */
+export interface CalendarLabels {
+    previousMonth?: string;
+    nextMonth?: string;
+}
+export interface CalendarDaySnippetProps {
+    date: CalendarDate;
+    selected: boolean;
+    today: boolean;
+    outsideMonth: boolean;
+    disabled: boolean;
+    inRange: boolean;
+}
+interface CalendarBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    class?: string;
+    classes?: {
+        header?: string;
+        previousButton?: string;
+        nextButton?: string;
+        heading?: string;
+        weekdays?: string;
+        grid?: string;
+        day?: string;
+    };
+    /** BCP 47 locale used for week-start day and month/weekday formatting. Defaults to the browser locale. */
+    locale?: string;
+    /** Month shown initially when there's no `value` (or, in range mode, no `value.start`) to derive it from. Defaults to the current month. */
+    defaultMonth?: CalendarDate;
+    minValue?: CalendarDate;
+    maxValue?: CalendarDate;
+    isDateDisabled?: (date: CalendarDate) => boolean;
+    labels?: CalendarLabels;
+    /** Overrides the default rendering of a day cell. The rendered element is responsible for its own selection handling — see `Pagination`'s `item` snippet for the same escape-hatch shape. */
+    day?: Snippet<[CalendarDaySnippetProps]>;
+}
+export type CalendarProps = CalendarBaseProps & ({
+    type?: 'single';
+    value?: CalendarDate;
+    onValueChange?: (value: CalendarDate | undefined) => void;
+} | {
+    type: 'range';
+    value?: CalendarRangeValue;
+    onValueChange?: (value: CalendarRangeValue) => void;
+});
+export {};

package/dist/components/calendar/Calendar.types.js

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

package/dist/components/calendar/CalendarDay.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { calendarDayVariants } from './CalendarDay.variants.js';
+	import type { CalendarDayProps } from './CalendarDay.types.js';
+
+	let {
+		class: className,
+		selected = false,
+		today = false,
+		outsideMonth = false,
+		inRange = false,
+		disabled = false,
+		tabIndex = -1,
+		children,
+		...restProps
+	}: CalendarDayProps = $props();
+</script>
+
+<button
+	type="button"
+	role="gridcell"
+	tabindex={tabIndex}
+	aria-selected={selected}
+	aria-disabled={disabled || undefined}
+	data-today={today ? '' : undefined}
+	class={cn(calendarDayVariants({ selected, today, outsideMonth, inRange }), className)}
+	{...restProps}
+>
+	{@render children()}
+</button>

package/dist/components/calendar/CalendarDay.svelte.d.ts

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

package/dist/components/calendar/CalendarDay.types.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { CalendarDayVariantProps } from './CalendarDay.variants.js';
+export interface CalendarDayProps extends Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled'>, CalendarDayVariantProps {
+    class?: string;
+    /** Roving-tabindex position within the grid — only one cell is ever `0`. */
+    tabIndex?: 0 | -1;
+    /**
+     * Styled via `aria-disabled`, not the native `disabled` attribute — an
+     * ARIA grid keeps out-of-range/unavailable cells keyboard-reachable so
+     * arrow-key navigation can still traverse the full month, it just refuses
+     * to select them (see `Calendar.svelte`'s `selectDate`).
+     */
+    disabled?: boolean;
+    children: Snippet;
+}

package/dist/components/calendar/CalendarDay.types.js

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

package/dist/components/calendar/CalendarDay.variants.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const calendarDayVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    outsideMonth?: boolean | null | undefined;
+    inRange?: boolean | null | undefined;
+    today?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CalendarDayVariantProps = VariantProps<typeof calendarDayVariants>;

package/dist/components/calendar/CalendarDay.variants.js

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+export const calendarDayVariants = cva('inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-sm leading-snug transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:cursor-not-allowed aria-disabled:opacity-50', {
+    variants: {
+        selected: {
+            true: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+            false: 'text-foreground-soft hover:bg-surface-subtle'
+        },
+        outsideMonth: {
+            true: 'text-foreground-faint',
+            false: ''
+        },
+        inRange: {
+            true: 'bg-surface-subtle rounded-none',
+            false: ''
+        },
+        today: {
+            true: 'font-semibold',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        // Selection always wins visually over the softer in-range fill.
+        { selected: true, inRange: true, class: 'rounded-md' }
+    ],
+    defaultVariants: {
+        selected: false,
+        outsideMonth: false,
+        inRange: false,
+        today: false
+    }
+});

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

@@ -0,0 +1,5 @@
+export { default as Calendar } from './Calendar.svelte';
+export type { CalendarProps, CalendarRangeValue, CalendarLabels, CalendarDaySnippetProps } from './Calendar.types.js';
+export { default as CalendarDay } from './CalendarDay.svelte';
+export type { CalendarDayProps } from './CalendarDay.types.js';
+export { calendarDayVariants, type CalendarDayVariantProps } from './CalendarDay.variants.js';

package/dist/components/calendar/index.js

@@ -0,0 +1,3 @@
+export { default as Calendar } from './Calendar.svelte';
+export { default as CalendarDay } from './CalendarDay.svelte';
+export { calendarDayVariants } from './CalendarDay.variants.js';

package/dist/components/card/Card.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CardProps } from './Card.types.js';
+
+	let { class: className, children, ...restProps }: CardProps = $props();
+</script>
+
+<div class={cn('rounded-lg border border-border bg-surface', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/card/Card.svelte.d.ts

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

package/dist/components/card/Card.types.d.ts

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

package/dist/components/card/Card.types.js

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

package/dist/components/card/CardContent.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CardContentProps } from './CardContent.types.js';
+
+	let { class: className, children, ...restProps }: CardContentProps = $props();
+</script>
+
+<div class={cn('p-surface pt-0', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/card/CardContent.svelte.d.ts

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

package/dist/components/card/CardContent.types.d.ts

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

package/dist/components/card/CardContent.types.js

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

package/dist/components/card/CardDescription.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CardDescriptionProps } from './CardDescription.types.js';
+
+	let { class: className, children, ...restProps }: CardDescriptionProps = $props();
+</script>
+
+<div class={cn('text-sm leading-snug text-foreground-subtle', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/card/CardDescription.svelte.d.ts

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

package/dist/components/card/CardDescription.types.d.ts

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

package/dist/components/card/CardDescription.types.js

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

package/dist/components/card/CardFooter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CardFooterProps } from './CardFooter.types.js';
+
+	let { class: className, children, ...restProps }: CardFooterProps = $props();
+</script>
+
+<div class={cn('flex items-center gap-cozy p-surface pt-0', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/card/CardFooter.svelte.d.ts

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

package/dist/components/card/CardFooter.types.d.ts

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

package/dist/components/card/CardFooter.types.js

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

package/dist/components/card/CardHeader.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CardHeaderProps } from './CardHeader.types.js';
+
+	let { class: className, children, ...restProps }: CardHeaderProps = $props();
+</script>
+
+<div class={cn('flex flex-col gap-1.5 p-surface', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/card/CardHeader.svelte.d.ts

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

package/dist/components/card/CardHeader.types.d.ts

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

package/dist/components/card/CardHeader.types.js

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

package/dist/components/card/CardTitle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CardTitleProps } from './CardTitle.types.js';
+
+	let { class: className, children, ...restProps }: CardTitleProps = $props();
+</script>
+
+<div class={cn('text-lg leading-tight font-semibold text-foreground', className)} {...restProps}>
+	{@render children()}
+</div>

package/dist/components/card/CardTitle.svelte.d.ts

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

package/dist/components/card/CardTitle.types.d.ts

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

package/dist/components/card/CardTitle.types.js

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

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

@@ -0,0 +1,12 @@
+export { default as Card } from './Card.svelte';
+export type { CardProps } from './Card.types.js';
+export { default as CardHeader } from './CardHeader.svelte';
+export type { CardHeaderProps } from './CardHeader.types.js';
+export { default as CardTitle } from './CardTitle.svelte';
+export type { CardTitleProps } from './CardTitle.types.js';
+export { default as CardDescription } from './CardDescription.svelte';
+export type { CardDescriptionProps } from './CardDescription.types.js';
+export { default as CardContent } from './CardContent.svelte';
+export type { CardContentProps } from './CardContent.types.js';
+export { default as CardFooter } from './CardFooter.svelte';
+export type { CardFooterProps } from './CardFooter.types.js';

package/dist/components/card/index.js

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardContent } from './CardContent.svelte';
+export { default as CardFooter } from './CardFooter.svelte';

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { checkboxVariants } from './Checkbox.variants.js';
+	import type { CheckboxProps } from './Checkbox.types.js';
+
+	let {
+		size,
+		class: className,
+		classes,
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		disabled = false,
+		invalid = false,
+		...restProps
+	}: CheckboxProps = $props();
+</script>
+
+<span
+	class={cn(checkboxVariants({ size }), className)}
+	data-disabled={disabled ? '' : undefined}
+	data-invalid={invalid ? '' : undefined}
+>
+	<input
+		type="checkbox"
+		bind:this={ref}
+		bind:checked
+		bind:indeterminate
+		{disabled}
+		aria-invalid={invalid || undefined}
+		class={cn(
+			'peer absolute inset-0 size-full cursor-pointer appearance-none rounded-md border border-border bg-surface transition-colors duration-150 group-data-[invalid]:border-danger-border checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary hover:border-border-hover checked:hover:border-primary-hover checked:hover:bg-primary-hover indeterminate:hover:border-primary-hover indeterminate:hover:bg-primary-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none group-data-[invalid]:focus-visible:ring-danger disabled:cursor-not-allowed',
+			classes?.input
+		)}
+		{...restProps}
+	/>
+
+	<span
+		aria-hidden="true"
+		class={cn(
+			'pointer-events-none absolute inset-0 flex items-center justify-center text-primary-foreground opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0',
+			classes?.indicator
+		)}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="3"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="m5 13 4 4 10-10" />
+		</svg>
+	</span>
+
+	<span
+		aria-hidden="true"
+		class={cn(
+			'pointer-events-none absolute inset-0 flex items-center justify-center text-primary-foreground opacity-0 peer-indeterminate:opacity-100',
+			classes?.indicator
+		)}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="3"
+			stroke-linecap="round"
+		>
+			<path d="M6 12h12" />
+		</svg>
+	</span>
+</span>

package/dist/components/checkbox/Checkbox.svelte.d.ts

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

package/dist/components/checkbox/Checkbox.types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { CheckboxVariantProps } from './Checkbox.variants.js';
+export interface CheckboxProps extends Omit<HTMLInputAttributes, 'size' | 'type'>, CheckboxVariantProps {
+    /** Applied to the container element; `classes` targets the inner parts. */
+    class?: string;
+    classes?: {
+        input?: string;
+        indicator?: string;
+    };
+    ref?: HTMLInputElement | null;
+    checked?: boolean;
+    /** Mixed state, e.g. a parent of partially selected children. Cleared by the user clicking. */
+    indeterminate?: boolean;
+    invalid?: boolean;
+}

package/dist/components/checkbox/Checkbox.types.js

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

package/dist/components/checkbox/Checkbox.variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CheckboxVariantProps = VariantProps<typeof checkboxVariants>;

package/dist/components/checkbox/Checkbox.variants.js

@@ -0,0 +1,13 @@
+import { cva } from 'class-variance-authority';
+export const checkboxVariants = cva('group relative inline-flex shrink-0 align-middle data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50', {
+    variants: {
+        size: {
+            sm: 'size-4 [&_svg]:size-3',
+            md: 'size-5 [&_svg]:size-3.5',
+            lg: 'size-6 [&_svg]:size-4'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});

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

@@ -0,0 +1,3 @@
+export { default as Checkbox } from './Checkbox.svelte';
+export type { CheckboxProps } from './Checkbox.types.js';
+export { checkboxVariants, type CheckboxVariantProps } from './Checkbox.variants.js';

package/dist/components/checkbox/index.js

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

package/dist/components/collapsible/Collapsible.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { CollapsibleProps } from './Collapsible.types.js';
+
+	let {
+		class: className,
+		classes,
+		open = $bindable(false),
+		disabled = false,
+		trigger,
+		children,
+		...restProps
+	}: CollapsibleProps = $props();
+
+	const contentId = $props.id();
+</script>
+
+<div class={cn('rounded-lg border border-border', className)} {...restProps}>
+	<button
+		type="button"
+		{disabled}
+		aria-expanded={open}
+		aria-controls={contentId}
+		data-state={open ? 'open' : 'closed'}
+		onclick={() => (open = !open)}
+		class={cn(
+			'flex w-full items-center justify-between gap-tight rounded-lg 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/collapsible/Collapsible.svelte.d.ts

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

package/dist/components/collapsible/Collapsible.types.d.ts

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

package/dist/components/collapsible/Collapsible.types.js

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

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

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

package/dist/components/collapsible/index.js

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