sveltacular 0.0.76 → 1.0.0

package/dist/timeline/timeline-item.svelte.d.ts

@@ -1,24 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { DateTimeStyle, DateType } from '../index.js';
-declare const __propDef: {
-    props: {
-        dateType?: DateType | undefined;
-        dateStyle?: DateTimeStyle | undefined;
-        iconSize?: "sm" | "md" | "lg" | undefined;
-        date?: string | number | Date | undefined;
-        title?: string | undefined;
-        summary?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-    };
+import type { Snippet } from 'svelte';
+import type { DateTimeVariant, DateType } from '../types/date.js';
+type $$ComponentProps = {
+    dateType?: DateType;
+    dateStyle?: DateTimeVariant;
+    iconSize?: 'sm' | 'md' | 'lg';
+    date?: string | number | Date;
+    title?: string;
+    summary?: string;
+    icon?: Snippet;
 };
-export type TimelineItemProps = typeof __propDef.props;
-export type TimelineItemEvents = typeof __propDef.events;
-export type TimelineItemSlots = typeof __propDef.slots;
-export default class TimelineItem extends SvelteComponent<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
-}
-export {};
+declare const TimelineItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/timeline/timeline.svelte

@@ -1,13 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
 <ul>
-	<slot />
+	{@render children()}
 </ul>
 
 <style>ul {
   list-style: none;
-  padding-left: 0;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-left: var(--spacing-base);
+  padding-top: var(--spacing-base);
+  padding-bottom: var(--spacing-base);
   margin: 0;
-  border-left: 0.2rem solid #000;
-  font-family: var(--base-font-family, sans-serif);
+  border-left: var(--border-base) solid var(--base-color-fg);
+  font-family: var(--base-font-family);
 }</style>

package/dist/timeline/timeline.svelte.d.ts

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  TimelineProps */
-/** @typedef {typeof __propDef.events}  TimelineEvents */
-/** @typedef {typeof __propDef.slots}  TimelineSlots */
-export default class Timeline extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type TimelineProps = typeof __propDef.props;
-export type TimelineEvents = typeof __propDef.events;
-export type TimelineSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
 };
-export {};
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/types/data.d.ts

@@ -4,6 +4,57 @@ export type JsonValue = string | number | boolean | null | {
 export type JsonObject = {
     [key: string]: JsonValue;
 };
+interface BaseColumn<T extends JsonObject = JsonObject> {
+    key: keyof T & string;
+    label: string;
+    width?: string | number;
+    sortable?: boolean;
+    hidden?: boolean;
+    align?: 'left' | 'center' | 'right';
+    emptyText?: string;
+    nullText?: string;
+}
+export interface TextColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'text';
+    format?: (value: string, row: T) => string;
+    link?: (row: T) => string;
+}
+export interface NumberColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'number';
+    format?: (value: number, row: T) => string;
+    link?: (row: T) => string;
+}
+export interface CurrencyColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'currency';
+    currency?: string;
+    format?: (value: number, row: T) => string;
+    link?: (row: T) => string;
+}
+export interface DateColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'date';
+    format?: (value: string | Date, row: T) => string;
+    link?: (row: T) => string;
+}
+export interface DateTimeColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'date-time';
+    format?: (value: string | Date, row: T) => string;
+    link?: (row: T) => string;
+}
+export interface BooleanColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'boolean' | 'check';
+    trueText?: string;
+    falseText?: string;
+    link?: (row: T) => string;
+}
+export interface EmailColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'email';
+    format?: (value: string, row: T) => string;
+}
+export interface CustomColumn<T extends JsonObject = JsonObject> extends BaseColumn<T> {
+    type: 'custom';
+    render: (row: T) => string | number | boolean;
+}
+export type ColumnDef<T extends JsonObject = JsonObject> = TextColumn<T> | NumberColumn<T> | CurrencyColumn<T> | DateColumn<T> | DateTimeColumn<T> | BooleanColumn<T> | EmailColumn<T> | CustomColumn<T>;
 export type DataCol = {
     key: string;
     label: string;
@@ -20,3 +71,13 @@ export type PaginationProperties = {
     perPage: number;
     total?: number;
 };
+export type SortDirection = 'asc' | 'desc';
+export interface SortState {
+    column: string | null;
+    direction: SortDirection;
+}
+export interface SelectionState<T = string | number> {
+    selectedIds: Set<T>;
+    lastSelectedIndex: number | null;
+}
+export {};

package/dist/types/date.d.ts

@@ -1,4 +1,4 @@
-export type DateTimeStyle = 'full' | 'long' | 'short' | 'medium';
+export type DateTimeVariant = 'full' | 'long' | 'short' | 'medium';
 export type TZStyle = 'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric';
 export type DateType = 'date' | 'time' | 'datetime' | 'ago' | 'ymd' | 'ymdhm' | 'ymdhms' | 'ymdhmt' | 'ymdhmst';
 export type DateUnit = 'day' | 'month' | 'year' | 'minute' | 'hour' | 'second';

package/dist/types/form.d.ts

@@ -1,11 +1,29 @@
-export type FormFieldSizeOptions = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type ButtonStyle = 'primary' | 'secondary' | 'positive' | 'negative' | 'danger' | 'ghost' | 'outline' | 'link';
+export type { ComponentSize as FormFieldSizeOptions } from './size.js';
+/**
+ * Button variant options
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'positive' | 'danger' | 'outline' | 'link';
+/**
+ * Dropdown option structure
+ */
 export type DropdownOption = {
     value: string | null;
     name: string;
+    id?: string;
+    label?: string;
+    disabled?: boolean;
 };
+/**
+ * Menu option with optional index
+ */
 export type MenuOption = DropdownOption & {
     index?: number;
 };
+/**
+ * Allowed text input types
+ */
 export type AllowedTextInputTypes = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+/**
+ * Radio button value type
+ */
 export type RadioButtonValue = string | number | boolean | undefined;

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './data.js';
+export * from './date.js';
+export * from './form.js';
+export * from './generic.js';
+export * from './size.js';

package/dist/types/index.js

@@ -0,0 +1,5 @@
+export * from './data.js';
+export * from './date.js';
+export * from './form.js';
+export * from './generic.js';
+export * from './size.js';

package/dist/types/size.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Unified size type for all components
+ */
+export type ComponentSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Size utility functions for consistent spacing and sizing
+ */
+export declare const sizeMap: {
+    readonly sm: "10rem";
+    readonly md: "20rem";
+    readonly lg: "30rem";
+    readonly xl: "auto";
+    readonly full: "100%";
+};
+/**
+ * Get max width for a given size
+ */
+export declare const getMaxWidth: (size: ComponentSize) => string;
+/**
+ * Get display type for a given size (block for xl/full, inline-block for others)
+ */
+export declare const getDisplayType: (size: ComponentSize) => "block" | "inline-block";

package/dist/types/size.js

@@ -0,0 +1,22 @@
+/**
+ * Size utility functions for consistent spacing and sizing
+ */
+export const sizeMap = {
+    sm: '10rem',
+    md: '20rem',
+    lg: '30rem',
+    xl: 'auto',
+    full: '100%'
+};
+/**
+ * Get max width for a given size
+ */
+export const getMaxWidth = (size) => {
+    return sizeMap[size];
+};
+/**
+ * Get display type for a given size (block for xl/full, inline-block for others)
+ */
+export const getDisplayType = (size) => {
+    return ['xl', 'full'].includes(size) ? 'block' : 'inline-block';
+};

package/dist/typography/code-block.svelte

@@ -1,19 +1,98 @@
-<script>export let lang = "js";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { copyToClipboard, useCopyState } from '../helpers/copy-to-clipboard.svelte';
+	import CopyIcon from '../icons/copy-icon.svelte';
+
+	let {
+		lang = 'js',
+		children
+	}: {
+		lang?: string;
+		children: Snippet;
+	} = $props();
+
+	const copyState = useCopyState();
+	let preElement: HTMLPreElement;
+
+	async function handleCopy() {
+		if (!preElement) return;
+		const text = preElement.textContent || '';
+		const success = await copyToClipboard(text);
+		if (success) copyState.setCopied();
+	}
 </script>
 
-<pre class={lang}>
-<slot />
-</pre>
+<div class="code-block">
+	{#if lang}
+		<div class="lang-label">{lang}</div>
+	{/if}
+	<button class="copy-button" onclick={handleCopy} aria-label="Copy code to clipboard">
+		<CopyIcon copied={copyState.copied} />
+	</button>
+	<pre bind:this={preElement} class={lang}>{@render children()}</pre>
+</div>
 
-<style>pre {
+<style>.code-block {
+  position: relative;
+  margin-bottom: var(--spacing-base);
   background: #1e1e1e;
-  color: #fff;
-  padding: 1rem;
-  border-radius: 0.25rem;
-  font-family: var(--base-mono-font-family, monospace);
-  font-size: 0.875rem;
+  color: #d4d4d4;
+  padding: var(--spacing-base);
+  border-radius: var(--radius-md);
+}
+.code-block:hover .copy-button {
+  opacity: 1;
+}
+
+.lang-label {
+  font-size: var(--font-base);
+  font-weight: 500;
+  color: #858585;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.copy-button {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  background: #2d2d2d;
+  border: 1px solid #3e3e3e;
+  color: #d4d4d4;
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-xs);
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+.copy-button:hover {
+  background: #3e3e3e;
+  color: #ffffff;
+}
+.copy-button:active {
+  transform: scale(0.95);
+}
+.copy-button :global(.icon) {
+  width: 18px;
+  height: 18px;
+}
+
+pre {
+  font-family: var(--base-mono-font-family);
+  font-size: var(--font-base);
   line-height: 1.5;
   overflow-x: auto;
   width: 100%;
   display: block;
+  color: inherit;
 }</style>

package/dist/typography/code-block.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        lang?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    lang?: string;
+    children: Snippet;
 };
-export type CodeBlockProps = typeof __propDef.props;
-export type CodeBlockEvents = typeof __propDef.events;
-export type CodeBlockSlots = typeof __propDef.slots;
-export default class CodeBlock extends SvelteComponent<CodeBlockProps, CodeBlockEvents, CodeBlockSlots> {
-}
-export {};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/typography/code.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { copyToClipboard, useCopyState } from '../helpers/copy-to-clipboard.svelte';
+	import CopyIcon from '../icons/copy-icon.svelte';
+
+	let {
+		children
+	}: {
+		children: Snippet;
+	} = $props();
+
+	const copyState = useCopyState();
+	let codeElement: HTMLElement;
+
+	async function handleCopy() {
+		if (!codeElement) return;
+		const text = codeElement.textContent || '';
+		const success = await copyToClipboard(text);
+		if (success) copyState.setCopied();
+	}
+</script>
+
+<span class="inline-code-wrapper" class:copied={copyState.copied}>
+	<code class="inline-code" bind:this={codeElement}>{@render children()}</code>
+	<button class="copy-button" onclick={handleCopy} aria-label="Copy code to clipboard">
+		<CopyIcon copied={copyState.copied} />
+	</button>
+</span>
+
+<style>.inline-code-wrapper {
+  position: relative;
+  display: inline-block;
+  vertical-align: baseline;
+}
+.inline-code-wrapper:hover .copy-button {
+  opacity: 1;
+}
+.inline-code-wrapper.copied .inline-code {
+  background: var(--green-100);
+  border-color: var(--green-300);
+  color: var(--green-900);
+}
+.inline-code-wrapper.copied .copy-button {
+  background: var(--green-500);
+  color: white;
+}
+
+.inline-code {
+  background: var(--gray-100);
+  color: var(--gray-900);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-family: var(--base-mono-font-family);
+  font-size: 0.9em;
+  border: 1px solid var(--gray-200);
+  transition: all 0.2s ease;
+}
+
+.copy-button {
+  position: absolute;
+  top: 50%;
+  right: -24px;
+  transform: translateY(-50%);
+  background: var(--gray-700);
+  border: 1px solid var(--gray-600);
+  color: var(--gray-300);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.copy-button:hover {
+  background: var(--gray-600);
+  color: var(--gray-100);
+}
+.copy-button:active {
+  transform: translateY(-50%) scale(0.95);
+}
+.copy-button :global(.icon) {
+  width: 12px;
+  height: 12px;
+}</style>
+

package/dist/typography/code.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/typography/headline.svelte

@@ -1,21 +1,32 @@
-<script>import Text from "./text.svelte";
-export let transform = "none";
-export let level = 1;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SectionLevel } from '../types/generic.js';
+	import Text from './text.svelte';
+
+	let {
+		transform = 'none' as 'uppercase' | 'lowercase' | 'capitalize' | 'none',
+		level = 1 as SectionLevel,
+		children
+	}: {
+		transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+		level?: SectionLevel;
+		children: Snippet;
+	} = $props();
 </script>
 
 <Text {transform}>
 	{#if level === 1}
-		<h1><slot /></h1>
+		<h1>{@render children?.()}</h1>
 	{:else if level === 2}
-		<h2><slot /></h2>
+		<h2>{@render children?.()}</h2>
 	{:else if level === 3}
-		<h3><slot /></h3>
+		<h3>{@render children?.()}</h3>
 	{:else if level === 4}
-		<h4><slot /></h4>
+		<h4>{@render children?.()}</h4>
 	{:else if level === 5}
-		<h5><slot /></h5>
+		<h5>{@render children?.()}</h5>
 	{:else if level === 6}
-		<h6><slot /></h6>
+		<h6>{@render children?.()}</h6>
 	{/if}
 </Text>
 
@@ -27,6 +38,15 @@ h5,
 h6 {
   margin: 0;
   font-family: var(--base-headline-font-family, sans-serif);
+  color: #2d3748;
+}
+:global([data-theme="dark"]) h1,
+:global([data-theme="dark"]) h2,
+:global([data-theme="dark"]) h3,
+:global([data-theme="dark"]) h4,
+:global([data-theme="dark"]) h5,
+:global([data-theme="dark"]) h6 {
+  color: #e6edf3;
 }
 
 h1 {

package/dist/typography/headline.svelte.d.ts

@@ -1,20 +1,10 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { SectionLevel } from '../types/generic.js';
-declare const __propDef: {
-    props: {
-        transform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
-        level?: SectionLevel | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    level?: SectionLevel;
+    children: Snippet;
 };
-export type HeadlineProps = typeof __propDef.props;
-export type HeadlineEvents = typeof __propDef.events;
-export type HeadlineSlots = typeof __propDef.slots;
-export default class Headline extends SvelteComponent<HeadlineProps, HeadlineEvents, HeadlineSlots> {
-}
-export {};
+declare const Headline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Headline = ReturnType<typeof Headline>;
+export default Headline;

package/dist/typography/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Headline } from './headline.svelte';
+export { default as Subtitle } from './subtitle.svelte';
+export { default as Text } from './text.svelte';
+export { default as CodeBlock } from './code-block.svelte';
+export { default as Code } from './code.svelte';
+export { default as Paragraph } from './paragraph.svelte';

package/dist/typography/index.js

@@ -0,0 +1,6 @@
+export { default as Headline } from './headline.svelte';
+export { default as Subtitle } from './subtitle.svelte';
+export { default as Text } from './text.svelte';
+export { default as CodeBlock } from './code-block.svelte';
+export { default as Code } from './code.svelte';
+export { default as Paragraph } from './paragraph.svelte';

package/dist/typography/paragraph.svelte

@@ -1,13 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
 <p>
-	<slot />
+	{@render children?.()}
 </p>
 
-<style>
-	p {
-		margin-top: 0;
-		margin-bottom: 1rem;
-		font-weight: 300;
-		font-size: 1rem;
-		font-family: var(--base-font-family, sans-serif);
-	}
-</style>
+<style>p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-weight: 300;
+  font-size: 1rem;
+  font-family: var(--base-font-family, sans-serif);
+  color: #2d3748;
+}
+:global([data-theme="dark"]) p {
+  color: #e6edf3;
+}</style>