@tabelhadev/tabelhawebui 0.28.4

package/dist/components/timeline/TimelineItem.svelte

@@ -0,0 +1,220 @@
+<script module lang="ts">
+	export type TimelineItemProps = {
+		title: string;
+		/** Stable unique key for Svelte's keyed `{#each}`. Falls back to the item index when omitted. */
+		key?: string;
+		subtitle?: string;
+		date?: string;
+		start?: string;
+		end?: string;
+		location?: string;
+		link?: string;
+		details?: string[];
+		skills?: string[];
+		isLast?: boolean;
+		nowLabel?: string;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		subtitle,
+		date,
+		start,
+		end,
+		location,
+		link,
+		details = [],
+		skills = [],
+		isLast = false,
+		nowLabel = 'agora'
+	}: TimelineItemProps = $props();
+
+	const current = $derived(!date && !!start && !end);
+	const meta = $derived(date ?? (start ? `${start} — ${end || nowLabel}` : ''));
+</script>
+
+<li class="twui-timeline-item">
+	<div class="twui-timeline-col">
+		{#if !isLast}
+			<span class="twui-timeline-rail" aria-hidden="true"></span>
+		{/if}
+		<span
+			class="twui-timeline-dot {current ? 'twui-timeline-dot-current' : ''}"
+			aria-hidden="true"
+		></span>
+	</div>
+	<div class="twui-timeline-body">
+		{#if meta || location}
+			<div class="twui-timeline-meta">
+				{#if meta}
+					<span class="twui-timeline-date {current ? 'twui-timeline-date-current' : ''}"
+						>{meta}</span
+					>
+				{/if}
+				{#if location}
+					<span class="twui-timeline-location">· {location}</span>
+				{/if}
+			</div>
+		{/if}
+		<h3 class="twui-timeline-title">
+			{#if link}
+				<a href={link} target="_blank" rel="noreferrer">{title}</a>
+			{:else}
+				{title}
+			{/if}
+		</h3>
+		{#if subtitle}
+			<p class="twui-timeline-subtitle">{subtitle}</p>
+		{/if}
+		{#if details.length > 0}
+			<ul class="twui-timeline-details">
+				{#each details as detail (detail)}
+					<li>{detail}</li>
+				{/each}
+			</ul>
+		{/if}
+		{#if skills.length > 0}
+			<div class="twui-timeline-skills">
+				{#each skills as skill (skill)}
+					<span class="twui-timeline-skill"
+						><span class="twui-timeline-skill-bracket">[</span>{skill}<span
+							class="twui-timeline-skill-bracket"
+							>]</span
+						></span
+					>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</li>
+
+<style>
+	.twui-timeline-item {
+		display: grid;
+		grid-template-columns: 1.5rem 1fr;
+		column-gap: 16px;
+	}
+
+	.twui-timeline-col {
+		position: relative;
+	}
+
+	.twui-timeline-rail {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		width: 1px;
+		transform: translateX(-50%);
+		background: var(--twui-rule);
+	}
+
+	.twui-timeline-dot {
+		display: block;
+		position: relative;
+		z-index: 10;
+		margin-top: 6px;
+		margin-left: auto;
+		margin-right: auto;
+		width: 10px;
+		height: 10px;
+		border: 2px solid var(--twui-accent);
+		border-radius: 9999px;
+		background: var(--twui-paper);
+	}
+
+	.twui-timeline-dot-current {
+		border-color: var(--twui-signal);
+		background: var(--twui-signal-soft);
+	}
+
+	.twui-timeline-body {
+		min-width: 0;
+		padding-bottom: 40px;
+	}
+
+	.twui-timeline-meta {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0 12px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-timeline-date-current {
+		color: var(--twui-signal);
+	}
+
+	.twui-timeline-title {
+		margin: 6px 0 0;
+		font-family: var(--twui-font-serif, 'Newsreader', Georgia, serif);
+		font-size: 20px;
+		font-weight: 500;
+		color: var(--twui-ink);
+	}
+
+	.twui-timeline-title a {
+		color: inherit;
+		text-decoration: underline;
+		text-decoration-color: var(--twui-rule);
+		text-decoration-thickness: 1px;
+		text-underline-offset: 4px;
+		transition:
+			color 0.15s ease,
+			text-decoration-color 0.15s ease;
+	}
+
+	.twui-timeline-title a:hover {
+		color: var(--twui-accent);
+		text-decoration-color: var(--twui-accent);
+	}
+
+	.twui-timeline-subtitle {
+		margin: 2px 0 0;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-timeline-details {
+		margin: 12px 0 0;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		font-family: var(--twui-font-serif, 'Newsreader', Georgia, serif);
+		font-size: 16px;
+		color: var(--twui-ink-soft);
+		list-style: none;
+		padding: 0;
+	}
+
+	.twui-timeline-details li {
+		position: relative;
+		padding-left: 16px;
+	}
+
+	.twui-timeline-details li::before {
+		content: '—';
+		position: absolute;
+		left: 0;
+		color: var(--twui-ink-faint);
+	}
+
+	.twui-timeline-skills {
+		margin-top: 16px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 12px;
+		font-family: var(--twui-font-mono);
+		font-size: 12px;
+		color: var(--twui-ink-soft);
+	}
+
+	.twui-timeline-skill-bracket {
+		color: var(--twui-ink-faint);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+export type TimelineItemProps = {
+    title: string;
+    /** Stable unique key for Svelte's keyed `{#each}`. Falls back to the item index when omitted. */
+    key?: string;
+    subtitle?: string;
+    date?: string;
+    start?: string;
+    end?: string;
+    location?: string;
+    link?: string;
+    details?: string[];
+    skills?: string[];
+    isLast?: boolean;
+    nowLabel?: string;
+};
+declare const TimelineItem: import("svelte").Component<TimelineItemProps, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/index.d.ts

@@ -0,0 +1,156 @@
+import CardRoot from "./components/card/Card.svelte";
+import CardHeader from "./components/card/CardHeader.svelte";
+import CardTitle from "./components/card/CardTitle.svelte";
+import CardDescription from "./components/card/CardDescription.svelte";
+import CardContent from "./components/card/CardContent.svelte";
+import CardFooter from "./components/card/CardFooter.svelte";
+import CardAction from "./components/card/CardAction.svelte";
+import List from "./components/list/List.svelte";
+import ListItem from "./components/list/ListItem.svelte";
+import TimelineRoot from "./components/timeline/Timeline.svelte";
+import TimelineItem from "./components/timeline/TimelineItem.svelte";
+import type { TimelineItemProps } from "./components/timeline/TimelineItem.svelte";
+import type { ButtonSize, ButtonVariant } from "./components/actions/Button.svelte";
+import type { SelectOption } from "./components/forms/Select.svelte";
+import type { FileUploadError, FileUploadHandler, FileUploadMode } from "./components/forms/FileUpload.svelte";
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+    Action: typeof CardAction;
+};
+export declare const Timeline: typeof TimelineRoot & {
+    Item: typeof TimelineItem;
+};
+export declare namespace Timeline {
+    type ItemProps = TimelineItemProps;
+}
+export { List, ListItem };
+export { default as Table } from "./components/table/Table.svelte";
+export { buttonVariants, default as Button, } from "./components/actions/Button.svelte";
+export { clickOutside } from "./actions/click-outside";
+export { lockScroll } from "./actions/scroll-lock";
+export { trapFocus } from "./actions/focus-trap";
+export { comboboxKeydown } from "./actions/combobox-keyboard-nav";
+export declare namespace Button {
+    type Variant = ButtonVariant;
+    type Size = ButtonSize;
+}
+export { default as Input } from "./components/forms/Input.svelte";
+export { default as Textarea } from "./components/forms/Textarea.svelte";
+export { default as Label } from "./components/forms/Label.svelte";
+export { default as Field } from "./components/forms/Field.svelte";
+export { default as Radio } from "./components/forms/Radio.svelte";
+export { default as Checkbox } from "./components/forms/Checkbox.svelte";
+export { default as Select } from "./components/forms/Select.svelte";
+export { default as DatePicker } from "./components/forms/DatePicker.svelte";
+export { default as FileUpload } from "./components/forms/FileUpload.svelte";
+export { default as TagInput } from "./components/forms/TagInput.svelte";
+export declare namespace Select {
+    type Option = SelectOption;
+}
+export declare namespace FileUpload {
+    type Error = FileUploadError;
+    type Mode = FileUploadMode;
+    type Handler = FileUploadHandler;
+}
+export { default as Toggle } from "./components/choice/Toggle.svelte";
+export { default as Rating } from "./components/choice/Rating.svelte";
+export { default as MultiSelect } from "./components/choice/MultiSelect.svelte";
+export { default as Listbox } from "./components/choice/Listbox.svelte";
+export { default as Badge } from "./components/feedback/Badge.svelte";
+export { default as Status } from "./components/feedback/Status.svelte";
+export { default as StatusPill } from "./components/feedback/StatusPill.svelte";
+export { default as Message } from "./components/feedback/Message.svelte";
+export { default as ProgressBar } from "./components/feedback/ProgressBar.svelte";
+export { default as ErrorPage } from "./components/feedback/ErrorPage.svelte";
+export { default as Skeleton } from "./components/feedback/Skeleton.svelte";
+export { default as Tooltip } from "./components/feedback/Tooltip.svelte";
+export { default as Toaster } from "./components/feedback/Toaster.svelte";
+export { toast } from "./components/feedback/toast.svelte.js";
+import DialogRoot from "./components/overlay/Dialog.svelte";
+import DialogActions from "./components/overlay/DialogActions.svelte";
+export declare const Dialog: typeof DialogRoot & {
+    Actions: typeof DialogActions;
+};
+export { default as Sidebar } from "./components/overlay/Sidebar.svelte";
+export { default as Dropdown } from "./components/overlay/Dropdown.svelte";
+export { default as FloatingActionPill } from "./components/overlay/FloatingActionPill.svelte";
+export { default as Tabs } from "./components/navigation/Tabs.svelte";
+export { default as Accordion } from "./components/navigation/Accordion.svelte";
+export { default as Stepper } from "./components/navigation/Stepper.svelte";
+export { default as Carousel } from "./components/navigation/Carousel.svelte";
+export { default as Nav } from "./components/navigation/Nav.svelte";
+export { default as ThemeToggle } from "./components/navigation/ThemeToggle.svelte";
+export { default as TabCard } from "./components/navigation/TabCard.svelte";
+import InstructionSteps from "./components/navigation/InstructionSteps.svelte";
+import InstructionStep from "./components/navigation/InstructionStep.svelte";
+export declare const Instruction: {
+    Steps: import("svelte").Component<{
+        children: import("svelte").Snippet;
+        class?: string;
+    }, {}, "">;
+    Step: import("svelte").Component<{
+        title?: string;
+        action?: import("svelte").Snippet;
+        n?: number;
+        children: import("svelte").Snippet;
+    }, {}, "">;
+};
+export { InstructionSteps, InstructionStep };
+export { default as Panel } from "./components/layout/Panel.svelte";
+export { default as RuleCard } from "./components/layout/RuleCard.svelte";
+export { default as Divider } from "./components/layout/Divider.svelte";
+export { default as Eyebrow } from "./components/layout/Eyebrow.svelte";
+export { default as BracketLink } from "./components/layout/BracketLink.svelte";
+export { default as SectionHeading } from "./components/layout/SectionHeading.svelte";
+export { default as TerminalWindow } from "./components/layout/TerminalWindow.svelte";
+export { default as Wordmark } from "./components/layout/Wordmark.svelte";
+export { default as PageHeader } from "./components/layout/PageHeader.svelte";
+export { default as StatTile } from "./components/layout/StatTile.svelte";
+export { default as Prose } from "./components/layout/Prose.svelte";
+import PageShell from "./components/layout/PageShell.svelte";
+import PageHeader from "./components/layout/PageHeader.svelte";
+import PageSeo from "./components/layout/PageSeo.svelte";
+export declare const Page: typeof PageShell & {
+    Header: typeof PageHeader;
+    Seo: typeof PageSeo;
+    Shell: typeof PageShell;
+};
+export { default as ChatMessage } from "./components/chat/ChatMessage.svelte";
+import LandingRoot from "./components/landing/Landing.svelte";
+import LandingHero from "./components/landing/LandingHero.svelte";
+import LandingSteps from "./components/landing/LandingSteps.svelte";
+import LandingFeatures from "./components/landing/LandingFeatures.svelte";
+import LandingRoadmap from "./components/landing/LandingRoadmap.svelte";
+import LandingSection from "./components/landing/LandingSection.svelte";
+import LandingSectionHeading from "./components/landing/LandingSectionHeading.svelte";
+import MarketingShellRoot from "./components/marketing/MarketingShell.svelte";
+import MarketingShellFooter from "./components/marketing/MarketingShellFooter.svelte";
+import AppShellRoot from "./components/appshell/AppShell.svelte";
+import AppShellSidebar from "./components/appshell/AppShellSidebar.svelte";
+import AppShellBottomNav from "./components/appshell/AppShellBottomNav.svelte";
+import AppShellContent from "./components/appshell/AppShellContent.svelte";
+import type { AppShellNavItem } from "./components/appshell/types";
+export declare const Landing: typeof LandingRoot & {
+    Hero: typeof LandingHero;
+    Steps: typeof LandingSteps;
+    Features: typeof LandingFeatures;
+    Roadmap: typeof LandingRoadmap;
+    Section: typeof LandingSection & {
+        Heading: typeof LandingSectionHeading;
+    };
+};
+export declare const MarketingShell: typeof MarketingShellRoot & {
+    Footer: typeof MarketingShellFooter;
+};
+export declare const AppShell: typeof AppShellRoot & {
+    Sidebar: typeof AppShellSidebar;
+    BottomNav: typeof AppShellBottomNav;
+    Content: typeof AppShellContent;
+};
+export declare namespace AppShell {
+    type NavItem = AppShellNavItem;
+}

package/dist/index.js

@@ -0,0 +1,149 @@
+// tabelhawebui — shared theme + chrome for web apps.
+//
+// Usage:
+//   import '@tabelhadev/tabelhawebui/theme.css';  // once in the app (or in each app in the family)
+//   import { Card, Table, Badge, Button, Toaster } from '@tabelhadev/tabelhawebui';
+import CardRoot from "./components/card/Card.svelte";
+import CardHeader from "./components/card/CardHeader.svelte";
+import CardTitle from "./components/card/CardTitle.svelte";
+import CardDescription from "./components/card/CardDescription.svelte";
+import CardContent from "./components/card/CardContent.svelte";
+import CardFooter from "./components/card/CardFooter.svelte";
+import CardAction from "./components/card/CardAction.svelte";
+import List from "./components/list/List.svelte";
+import ListItem from "./components/list/ListItem.svelte";
+import TimelineRoot from "./components/timeline/Timeline.svelte";
+import TimelineItem from "./components/timeline/TimelineItem.svelte";
+// Compound components: `Card.Header`/`Card.Footer`, `Timeline.Item` — one
+// single export per module, no loose exports of parts.
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Content: CardContent,
+    Footer: CardFooter,
+    Action: CardAction,
+});
+export const Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });
+// Lists
+export { List, ListItem };
+// Data
+export { default as Table } from "./components/table/Table.svelte";
+// Actions
+export { buttonVariants, default as Button, } from "./components/actions/Button.svelte";
+// Shared actions (Svelte actions + helpers)
+export { clickOutside } from "./actions/click-outside";
+export { lockScroll } from "./actions/scroll-lock";
+export { trapFocus } from "./actions/focus-trap";
+export { comboboxKeydown } from "./actions/combobox-keyboard-nav";
+// Forms
+export { default as Input } from "./components/forms/Input.svelte";
+export { default as Textarea } from "./components/forms/Textarea.svelte";
+export { default as Label } from "./components/forms/Label.svelte";
+export { default as Field } from "./components/forms/Field.svelte";
+export { default as Radio } from "./components/forms/Radio.svelte";
+export { default as Checkbox } from "./components/forms/Checkbox.svelte";
+export { default as Select } from "./components/forms/Select.svelte";
+export { default as DatePicker } from "./components/forms/DatePicker.svelte";
+export { default as FileUpload } from "./components/forms/FileUpload.svelte";
+export { default as TagInput } from "./components/forms/TagInput.svelte";
+// Choice
+export { default as Toggle } from "./components/choice/Toggle.svelte";
+export { default as Rating } from "./components/choice/Rating.svelte";
+export { default as MultiSelect } from "./components/choice/MultiSelect.svelte";
+export { default as Listbox } from "./components/choice/Listbox.svelte";
+// Feedback
+export { default as Badge } from "./components/feedback/Badge.svelte";
+export { default as Status } from "./components/feedback/Status.svelte";
+export { default as StatusPill } from "./components/feedback/StatusPill.svelte";
+export { default as Message } from "./components/feedback/Message.svelte";
+export { default as ProgressBar } from "./components/feedback/ProgressBar.svelte";
+export { default as ErrorPage } from "./components/feedback/ErrorPage.svelte";
+export { default as Skeleton } from "./components/feedback/Skeleton.svelte";
+export { default as Tooltip } from "./components/feedback/Tooltip.svelte";
+export { default as Toaster } from "./components/feedback/Toaster.svelte";
+export { toast } from "./components/feedback/toast.svelte.js";
+// Overlay
+import DialogRoot from "./components/overlay/Dialog.svelte";
+import DialogActions from "./components/overlay/DialogActions.svelte";
+// Compound: `Dialog` with `Dialog.Actions` — one single export per module,
+// no loose exports of parts (same convention as `Card` and `Timeline`).
+// `Dialog.Actions` is for components that render INSIDE a dialog body and own
+// their buttons; dialog owners use the docked `footerStart`/`footerEnd`.
+export const Dialog = Object.assign(DialogRoot, { Actions: DialogActions });
+export { default as Sidebar } from "./components/overlay/Sidebar.svelte";
+export { default as Dropdown } from "./components/overlay/Dropdown.svelte";
+export { default as FloatingActionPill } from "./components/overlay/FloatingActionPill.svelte";
+// Navigation / structure
+export { default as Tabs } from "./components/navigation/Tabs.svelte";
+export { default as Accordion } from "./components/navigation/Accordion.svelte";
+export { default as Stepper } from "./components/navigation/Stepper.svelte";
+export { default as Carousel } from "./components/navigation/Carousel.svelte";
+export { default as Nav } from "./components/navigation/Nav.svelte";
+export { default as ThemeToggle } from "./components/navigation/ThemeToggle.svelte";
+export { default as TabCard } from "./components/navigation/TabCard.svelte";
+import InstructionSteps from "./components/navigation/InstructionSteps.svelte";
+import InstructionStep from "./components/navigation/InstructionStep.svelte";
+export const Instruction = { Steps: InstructionSteps, Step: InstructionStep };
+export { InstructionSteps, InstructionStep };
+// Layout
+export { default as Panel } from "./components/layout/Panel.svelte";
+export { default as RuleCard } from "./components/layout/RuleCard.svelte";
+export { default as Divider } from "./components/layout/Divider.svelte";
+export { default as Eyebrow } from "./components/layout/Eyebrow.svelte";
+export { default as BracketLink } from "./components/layout/BracketLink.svelte";
+export { default as SectionHeading } from "./components/layout/SectionHeading.svelte";
+export { default as TerminalWindow } from "./components/layout/TerminalWindow.svelte";
+export { default as Wordmark } from "./components/layout/Wordmark.svelte";
+export { default as PageHeader } from "./components/layout/PageHeader.svelte";
+export { default as StatTile } from "./components/layout/StatTile.svelte";
+export { default as Prose } from "./components/layout/Prose.svelte";
+// Page compound component
+import PageShell from "./components/layout/PageShell.svelte";
+import PageHeader from "./components/layout/PageHeader.svelte";
+import PageSeo from "./components/layout/PageSeo.svelte";
+export const Page = Object.assign(PageShell, {
+    Header: PageHeader,
+    Seo: PageSeo,
+    Shell: PageShell,
+});
+// Chat
+export { default as ChatMessage } from "./components/chat/ChatMessage.svelte";
+// Landing sections
+import LandingRoot from "./components/landing/Landing.svelte";
+import LandingHero from "./components/landing/LandingHero.svelte";
+import LandingSteps from "./components/landing/LandingSteps.svelte";
+import LandingFeatures from "./components/landing/LandingFeatures.svelte";
+import LandingRoadmap from "./components/landing/LandingRoadmap.svelte";
+import LandingSection from "./components/landing/LandingSection.svelte";
+import LandingSectionHeading from "./components/landing/LandingSectionHeading.svelte";
+// Marketing shell
+import MarketingShellRoot from "./components/marketing/MarketingShell.svelte";
+import MarketingShellFooter from "./components/marketing/MarketingShellFooter.svelte";
+import AppShellRoot from "./components/appshell/AppShell.svelte";
+import AppShellSidebar from "./components/appshell/AppShellSidebar.svelte";
+import AppShellBottomNav from "./components/appshell/AppShellBottomNav.svelte";
+import AppShellContent from "./components/appshell/AppShellContent.svelte";
+// Compound component: `Landing` (root wrapper with gradient) with sub-components:
+// `Landing.Hero`, `Landing.Steps`, `Landing.Features`, `Landing.Roadmap`,
+// `Landing.Section`, `Landing.Section.Heading` — one single export per module,
+// no loose exports of parts (same convention as `Card` and `Timeline`).
+export const Landing = Object.assign(LandingRoot, {
+    Hero: LandingHero,
+    Steps: LandingSteps,
+    Features: LandingFeatures,
+    Roadmap: LandingRoadmap,
+    Section: Object.assign(LandingSection, {
+        Heading: LandingSectionHeading,
+    }),
+});
+// MarketingShell
+export const MarketingShell = Object.assign(MarketingShellRoot, {
+    Footer: MarketingShellFooter,
+});
+// AppShell
+export const AppShell = Object.assign(AppShellRoot, {
+    Sidebar: AppShellSidebar,
+    BottomNav: AppShellBottomNav,
+    Content: AppShellContent,
+});