@sakaniui/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Samuel Okpere
+
+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,131 @@
+# Sakani Design System
+
+An open-source, token-driven React component library for SaaS products — **1,500+ accessible components and variants**, built 1:1 from a Figma design system and now spanning **1,500+ components and variants** across light and dark modes.
+
+**[Live Storybook →](https://main--6a5a658b3681fcc010430db5.chromatic.com)** · **[Figma file →](https://www.figma.com/design/Fd3uY263mEQKnaTEfrzQxh/)**
+
+![License](https://img.shields.io/badge/license-MIT-blue) ![React](https://img.shields.io/badge/React-18-61dafb) ![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6) ![Storybook](https://img.shields.io/badge/Storybook-10-ff4785)
+
+---
+
+## Why Sakani
+
+Most component libraries start in code and retrofit the design. Sakani was built the other way: every component is designed first in Figma with a strict three-layer token architecture, then implemented 1:1 in React — same variants, same states, same tokens. The Figma file has grown into a 1,500+ component-and-variant system across light and dark mode; the React library mirrors it component by component, with new ones landing as they're built out.
+
+- **Token-driven** — components bind only to semantic tokens (`bg/surface`, `fg/muted`, `accent/default`…), so the entire library re-themes from one place
+- **Light & dark mode** — add the `.dark` class to any container; every component re-themes automatically, no per-component dark styles
+- **Accessible by default** — WCAG AA contrast audited, global focus-ring system, `prefers-reduced-motion` support, full ARIA semantics (combobox active-descendant, calendar date labels, live-region toasts, focus-return popovers)
+- **Typed & composable** — strict TypeScript, generic `Table<T>`, slot-based composition, controlled + uncontrolled patterns
+- **Geist typography** and **Lucide icons** throughout, matching the Figma source exactly
+
+## Quick start
+
+```bash
+git clone https://github.com/samzydd/Sakani-design-system.git
+cd Sakani-design-system
+npm install
+npm run storybook
+```
+
+Storybook opens at `http://localhost:6006` with every component, all variants, and dark-mode stories.
+
+## Usage
+
+Components live in `src/components`, tokens in `src/styles/tokens.css`. Import the tokens once, then use any component:
+
+```tsx
+import '@/styles/tokens.css';
+import { Button } from '@/components/Button';
+import { StatCard } from '@/components/StatCard';
+import { DollarSign } from 'lucide-react';
+
+export const Dashboard = () => (
+  <>
+    <StatCard
+      variant="icon"
+      icon={DollarSign}
+      title="Revenue"
+      value="$48,120"
+      delta="+12.5%"
+      trend="up"
+      sparkline={[12, 18, 14, 22, 19, 28]}
+    />
+    <Button variant="primary" size="md">Get started</Button>
+  </>
+);
+```
+
+### Dark mode
+
+```tsx
+<div className="dark">
+  {/* everything inside re-themes automatically */}
+</div>
+```
+
+## Token architecture
+
+Three layers, defined in Figma and exported to `tokens.css`:
+
+1. **Primitives** — raw scales (`neutral/50–950`, `primary/…`, spacing, radii)
+2. **Semantic** — purpose-named aliases that flip between light and dark (`bg/surface`, `fg/default`, `border/subtle`, `accent/default`, `chart/1–5`)
+3. **Components** — bind *only* to semantic tokens, never to primitives
+
+Change a semantic token and every component follows — in both the design file and the code.
+
+## Components (66+, syncing toward Figma's 1,500+)
+
+**Core** — Button · Icon Button · Badge · Label · Divider · Link · Kbd · Spinner · Skeleton · Progress · Tooltip · Avatar · Avatar Group
+
+**Forms** — Input · Textarea · Select · Checkbox · Radio · Switch · Slider · Combobox (single/multi, async loading) · File Upload
+
+**Composite** — Card · Alert · Toast · Accordion · Tabs · Breadcrumb · Table (generic, selectable) · Stat Card (sparklines) · Stepper · Calendar (single + range, dropdown navigation) · Pagination · Popover · Segmented Control · List Item
+
+**Sidebar kit** — Sidebar · Header · Search · Item · Sub Item · Group Label · Divider · Promo · Footer — nine standalone parts that compose into full navigation
+
+**Charts** — Area · Bar · Donut · Funnel · Heatmap · Line · Pie · Radar · Radial — Recharts wrappers styled entirely with the `chart/1–6` tokens
+
+## Blocks
+
+Blocks are full sections assembled from Sakani components — **composition examples** you copy into your project and edit directly, rather than configurable components. Each ships with the states it needs (loading, empty, error, and so on).
+
+They live in `src/blocks`:
+
+| Block | States |
+|---|---|
+| **Data Table + Toolbar** | default · filtered · bulk selection · loading · empty · error |
+| **Kanban Board** | default · loading · empty column · dragging |
+
+```tsx
+import { DataTableBlock } from '@/blocks/DataTableBlock';
+
+// Copy the file, swap the sample data for your own, edit the columns.
+<DataTableBlock />
+```
+
+Browse every block and state in the [live Storybook](https://main--6a5a658b3681fcc010430db5.chromatic.com) under **Blocks**.
+
+## Accessibility
+
+The library ships with an audited AA baseline: contrast-checked token pairs in both modes, a global token-driven focus ring on every interactive element, reduced-motion support, Escape-dismissible tooltips, screen-reader-tracked combobox options, full-date calendar labels, assertive error toasts, and focus-returning popovers. See the Storybook docs tab on each component for its ARIA contract.
+
+## Roadmap
+
+- [ ] npm package (`@sakani/react`)
+- [ ] Figma Community publication
+- [ ] Theming CLI (custom brand token generation)
+- [ ] Vue port
+
+## Support
+
+If Sakani is useful to you, you can [tip the creator](https://csakani.gumroad.com/coffee). It funds the time that keeps the system maintained and growing.
+
+## Author
+
+**Sam Okpere** — senior UI/UX & design systems designer
+
+[Portfolio](https://samdesignworks.framer.website) · [Dribbble](https://dribbble.com/samthedes) · [LinkedIn](https://www.linkedin.com/in/samuel-okpere) · [GitHub](https://github.com/samzydd)
+
+## License
+
+MIT — free for personal and commercial use. If Sakani saves you time, a star ⭐ helps others find it.

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface AccordionItemProps {
+    title: string;
+    children: React.ReactNode;
+    /** Controlled open state (optional). */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+export declare const AccordionItem: React.FC<AccordionItemProps>;
+export interface AccordionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/** Accordion wrapper — groups items with a shared top/bottom border. */
+export declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

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

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem, default } from './Accordion';
+export type { AccordionProps, AccordionItemProps } from './Accordion';

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type AlertColor = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface AlertProps {
+    /** Figma Color axis. Defaults to "info". */
+    color?: AlertColor;
+    title?: string;
+    description?: string;
+    /** Override the default status icon. */
+    icon?: React.ReactNode;
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;
+export default Alert;

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

@@ -0,0 +1,2 @@
+export { Alert, default } from './Alert';
+export type { AlertProps, AlertColor } from './Alert';

package/dist/components/ApplicationComponents/ActivityFeed/ActivityFeed.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+/** Colors its children fg/default within an otherwise-muted description. */
+export declare const ActivityFeedHighlight: React.FC<{
+    children: React.ReactNode;
+}>;
+export type ActivityFeedVariant = 'default' | 'compact';
+export interface ActivityFeedItem {
+    id?: string | number;
+    /** Who performed the action — rendered in fg/default, the rest in fg/muted. */
+    actor: string;
+    /** Rest of the sentence, e.g. "commented on Design Review". Wrap the
+     * object/target span in `ActivityFeedHighlight` to color it fg/default. */
+    description: React.ReactNode;
+    timestamp: string;
+    /** Rail dot icon (variant="default"). Rendered at 16px, colored fg/muted. */
+    icon?: React.ReactNode;
+    /** Avatar image (variant="compact"). */
+    avatarSrc?: string;
+    avatarAlt?: string;
+}
+export interface ActivityFeedProps {
+    items: ActivityFeedItem[];
+    variant?: ActivityFeedVariant;
+    className?: string;
+}
+export declare const ActivityFeed: React.FC<ActivityFeedProps>;
+export default ActivityFeed;

package/dist/components/ApplicationComponents/ActivityFeed/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityFeed, ActivityFeedHighlight, default } from './ActivityFeed';
+export type { ActivityFeedProps, ActivityFeedItem, ActivityFeedVariant } from './ActivityFeed';

package/dist/components/ApplicationComponents/Announcement/Announcement.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export type AnnouncementVariant = 'neutral' | 'urgent';
+export interface AnnouncementProps {
+    message: string;
+    /** "Learn more"-style link, shown only for variant="neutral". */
+    linkLabel?: string;
+    linkHref?: string;
+    onLinkClick?: () => void;
+    /** Dismiss button only renders when this is provided. */
+    onDismiss?: () => void;
+    variant?: AnnouncementVariant;
+    className?: string;
+}
+export declare const Announcement: React.FC<AnnouncementProps>;
+export default Announcement;

package/dist/components/ApplicationComponents/Announcement/index.d.ts

@@ -0,0 +1,2 @@
+export { Announcement, default } from './Announcement';
+export type { AnnouncementProps, AnnouncementVariant } from './Announcement';

package/dist/components/ApplicationComponents/AvatarUpload/AvatarUpload.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export type AvatarUploadOrientation = 'vertical' | 'horizontal';
+export interface AvatarUploadProps {
+    /** Current photo URL. Filled/empty state is derived from this. */
+    src?: string;
+    alt?: string;
+    orientation?: AvatarUploadOrientation;
+    /** Passed to the hidden file input's `accept`. */
+    accept?: string;
+    title?: string;
+    hint?: string;
+    /** Fires with the chosen file -- this component doesn't upload it itself. */
+    onFileSelect?: (file: File) => void;
+    /** Horizontal "Remove" button handler, for real removal (e.g. an API call).
+     * Uncontrolled usage clears the local preview regardless of whether this is passed. */
+    onRemove?: () => void;
+    className?: string;
+}
+export declare const AvatarUpload: React.FC<AvatarUploadProps>;
+export default AvatarUpload;

package/dist/components/ApplicationComponents/AvatarUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarUpload, default } from './AvatarUpload';
+export type { AvatarUploadProps, AvatarUploadOrientation } from './AvatarUpload';

package/dist/components/ApplicationComponents/Balance/Balance.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface BalanceChangeInfo {
+    /** e.g. "+$1,240.50" -- sign/formatting is the caller's responsibility. */
+    value: string;
+    /** Defaults to "this month". */
+    label?: string;
+    direction?: 'up' | 'down';
+}
+export interface BalanceProps {
+    label?: string;
+    value: string;
+    change?: BalanceChangeInfo;
+    /** 0-100. Renders the small progress ring beside the content when set. */
+    progress?: number;
+    /** Controlled masked state. Omit to let the component manage it itself. */
+    hidden?: boolean;
+    onToggleHidden?: (hidden: boolean) => void;
+    className?: string;
+}
+export declare const Balance: React.FC<BalanceProps>;
+export default Balance;

package/dist/components/ApplicationComponents/Balance/index.d.ts

@@ -0,0 +1,2 @@
+export { Balance, default } from './Balance';
+export type { BalanceProps, BalanceChangeInfo } from './Balance';

package/dist/components/ApplicationComponents/CodeSnippet/CodeSnippet.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface CodeSnippetProps {
+    code: string;
+    /** Shows the filename header + copy button when set. */
+    filename?: string;
+    onCopy?: (code: string) => void;
+    /** Lets people type directly into the block. Defaults to false (read-only). */
+    editable?: boolean;
+    /** Fires with the new text on every keystroke. Only relevant when editable. */
+    onChange?: (code: string) => void;
+    /** Shown (via the real textarea's native placeholder) when editable and empty. */
+    placeholder?: string;
+    className?: string;
+}
+export declare const CodeSnippet: React.FC<CodeSnippetProps>;
+export default CodeSnippet;

package/dist/components/ApplicationComponents/CodeSnippet/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeSnippet, default } from './CodeSnippet';
+export type { CodeSnippetProps } from './CodeSnippet';

package/dist/components/ApplicationComponents/Expenses/Expenses.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface ExpenseCategory {
+    id?: string | number;
+    icon: React.ReactNode;
+    label: string;
+    /** Raw amount -- formatted for display via `formatAmount`. */
+    amount: number;
+}
+export type ExpensesVariant = 'default' | 'compact';
+export interface ExpensesProps {
+    categories: ExpenseCategory[];
+    variant?: ExpensesVariant;
+    /** Defaults to USD currency, 2 decimals (e.g. "$840.20"). */
+    formatAmount?: (amount: number) => string;
+    className?: string;
+}
+export declare const Expenses: React.FC<ExpensesProps>;
+export default Expenses;

package/dist/components/ApplicationComponents/Expenses/index.d.ts

@@ -0,0 +1,2 @@
+export { Expenses, default } from './Expenses';
+export type { ExpensesProps, ExpenseCategory, ExpensesVariant } from './Expenses';

package/dist/components/ApplicationComponents/InlineHint/InlineHint.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type InlineHintVariant = 'neutral' | 'warning';
+export interface InlineHintProps {
+    message: string;
+    variant?: InlineHintVariant;
+    className?: string;
+}
+export declare const InlineHint: React.FC<InlineHintProps>;
+export default InlineHint;

package/dist/components/ApplicationComponents/InlineHint/index.d.ts

@@ -0,0 +1,2 @@
+export { InlineHint, default } from './InlineHint';
+export type { InlineHintProps, InlineHintVariant } from './InlineHint';

package/dist/components/ApplicationComponents/Modal/Modal.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export type ModalVariant = 'default' | 'destructive';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    variant?: ModalVariant;
+    /** Overrides the default TriangleAlert icon (variant="destructive" only). */
+    icon?: React.ReactNode;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    /** Defaults to `onClose`. */
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    confirmLoading?: boolean;
+    closeOnEscape?: boolean;
+    closeOnBackdropClick?: boolean;
+    /** Custom body content (e.g. a form) rendered below `description`, above
+     *  the footer's Divider. Lets consumers like FormModalBlock reuse this
+     *  component's portal/focus-trap/dark-mode plumbing instead of
+     *  duplicating it just to swap in different body content. */
+    children?: React.ReactNode;
+    /** Hides the title+close-X header row entirely, so `children` owns the
+     *  whole top of the card (e.g. MultistepModalBlock's own steps-row +
+     *  title + description, which Figma draws with no header bar or close
+     *  control at all). `title` is still required and used as the dialog's
+     *  aria-label in this mode, since there's no #modal-title element to
+     *  point aria-labelledby at. */
+    hideHeader?: boolean;
+    /** Hides the Divider between the body and the footer buttons (Figma's
+     *  Multistep Modal has no such rule). */
+    hideFooterDivider?: boolean;
+    /** Footer button alignment. 'end' (default) clusters Cancel/Confirm at
+     *  the right, matching the base Modal's Figma spec. 'between' spreads
+     *  them across the full width (Figma: Multistep Modal's Back / Continue
+     *  footer), so the footer <div> fills the card instead of just wrapping
+     *  its two buttons. */
+    footerJustify?: 'end' | 'between';
+    className?: string;
+}
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/ApplicationComponents/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal, default } from './Modal';
+export type { ModalProps, ModalVariant } from './Modal';

package/dist/components/ApplicationComponents/NotificationItem/NotificationItem.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface NotificationItemProps {
+    icon?: React.ReactNode;
+    title: string;
+    /** Simple row only. */
+    timestamp?: string;
+    /** Simple row only -- false (default) shows the unread background + dot. */
+    read?: boolean;
+    /** Presence switches to the actionable card style. */
+    description?: string;
+    /** Fires from both the header's X and the footer's Dismiss button. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    className?: string;
+}
+export declare const NotificationItem: React.FC<NotificationItemProps>;
+export default NotificationItem;

package/dist/components/ApplicationComponents/NotificationItem/index.d.ts

@@ -0,0 +1,2 @@
+export { NotificationItem, default } from './NotificationItem';
+export type { NotificationItemProps } from './NotificationItem';

package/dist/components/ApplicationComponents/ProgressItem/ProgressItem.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export type ProgressItemOrientation = 'horizontal' | 'vertical';
+export interface ProgressItemProps {
+    step: number;
+    title: string;
+    description?: string;
+    /** Shows a checkmark in the circle instead of `step`. */
+    completed?: boolean;
+    orientation?: ProgressItemOrientation;
+    /** Hides the trailing connector -- the last row in a list. */
+    isLast?: boolean;
+    className?: string;
+}
+export declare const ProgressItem: React.FC<ProgressItemProps>;
+export default ProgressItem;

package/dist/components/ApplicationComponents/ProgressItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressItem, default } from './ProgressItem';
+export type { ProgressItemProps, ProgressItemOrientation } from './ProgressItem';

package/dist/components/ApplicationComponents/ProgressStat/ProgressStat.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface ProgressStatProps {
+    label: string;
+    /** Formatted value shown on the right, e.g. "80%" or "24 GB / 30 GB". */
+    value: string;
+    /** 0-100, drives the bar fill. */
+    progress: number;
+    className?: string;
+}
+export declare const ProgressStat: React.FC<ProgressStatProps>;
+export default ProgressStat;

package/dist/components/ApplicationComponents/ProgressStat/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressStat, default } from './ProgressStat';
+export type { ProgressStatProps } from './ProgressStat';

package/dist/components/ApplicationComponents/RichSeparator/RichSeparator.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface RichSeparatorProps {
+    /** Full custom content between the two lines (e.g. a brand badge or icon-wrap). */
+    children?: React.ReactNode;
+    /** Shorthand for the common case -- plain uppercase overline text. Ignored if `children` is set. */
+    label?: string;
+    className?: string;
+}
+export declare const RichSeparator: React.FC<RichSeparatorProps>;
+export default RichSeparator;

package/dist/components/ApplicationComponents/RichSeparator/index.d.ts

@@ -0,0 +1,2 @@
+export { RichSeparator, default } from './RichSeparator';
+export type { RichSeparatorProps } from './RichSeparator';

package/dist/components/ApplicationComponents/SpendingBalance/SpendingBalance.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface SpendingBalanceProps {
+    label?: string;
+    spent: number;
+    limit: number;
+    /** Defaults to USD currency, 2 decimals (e.g. "$1,240.00"). */
+    formatAmount?: (amount: number) => string;
+    className?: string;
+}
+export declare const SpendingBalance: React.FC<SpendingBalanceProps>;
+export default SpendingBalance;

package/dist/components/ApplicationComponents/SpendingBalance/index.d.ts

@@ -0,0 +1,2 @@
+export { SpendingBalance, default } from './SpendingBalance';
+export type { SpendingBalanceProps } from './SpendingBalance';

package/dist/components/ApplicationComponents/StockMarket/StockMarket.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { BarChartDatum } from '../../BarChart';
+export interface StockMarketChange {
+    amount: number;
+    percent: number;
+}
+export interface StockMarketProps {
+    logo: React.ReactNode;
+    symbol: string;
+    name: string;
+    price: number;
+    change: StockMarketChange;
+    /** Defaults to USD currency, 2 decimals. */
+    formatAmount?: (amount: number) => string;
+    /** Presence switches to the expanded Full card with a bar chart. */
+    chart?: BarChartDatum[];
+    periodLabel?: string;
+    onPeriodClick?: () => void;
+    className?: string;
+}
+export declare const StockMarket: React.FC<StockMarketProps>;
+export default StockMarket;

package/dist/components/ApplicationComponents/StockMarket/index.d.ts

@@ -0,0 +1,2 @@
+export { StockMarket, default } from './StockMarket';
+export type { StockMarketProps, StockMarketChange } from './StockMarket';

package/dist/components/ApplicationComponents/Tags/Tags.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface TagsProps {
+    tags: string[];
+    /** Presence makes every tag removable, showing an "x" that calls this with the removed tag. */
+    onRemove?: (tag: string, index: number) => void;
+    className?: string;
+}
+export declare const Tags: React.FC<TagsProps>;
+export default Tags;

package/dist/components/ApplicationComponents/Tags/index.d.ts

@@ -0,0 +1,2 @@
+export { Tags, default } from './Tags';
+export type { TagsProps } from './Tags';

package/dist/components/ApplicationComponents/Ticker/Ticker.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface TickerItem {
+    symbol: string;
+    changePercent: number;
+}
+export interface TickerProps {
+    items: TickerItem[];
+    /** Scroll speed in pixels/second. Defaults to 40. */
+    speed?: number;
+    formatChange?: (changePercent: number) => string;
+    className?: string;
+}
+export declare const Ticker: React.FC<TickerProps>;
+export default Ticker;

package/dist/components/ApplicationComponents/Ticker/index.d.ts

@@ -0,0 +1,2 @@
+export { Ticker, default } from './Ticker';
+export type { TickerProps, TickerItem } from './Ticker';

package/dist/components/ApplicationComponents/Transactions/Transactions.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface Transaction {
+    id?: string | number;
+    name: string;
+    category: string;
+    /** Positive = income (success), negative = expense (danger). */
+    amount: number;
+    icon: React.ReactNode;
+}
+export interface TransactionsProps {
+    transactions: Transaction[];
+    formatAmount?: (amount: number) => string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    className?: string;
+}
+export declare const Transactions: React.FC<TransactionsProps>;
+export default Transactions;

package/dist/components/ApplicationComponents/Transactions/index.d.ts

@@ -0,0 +1,2 @@
+export { Transactions, default } from './Transactions';
+export type { TransactionsProps, Transaction } from './Transactions';

package/dist/components/AreaChart/AreaChart.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AreaChartVariant = 'default' | 'stacked' | 'step' | 'linear';
+export interface AreaChartDatum {
+    label: string;
+    value: number;
+    /** Second series (Figma: "Revenue" alongside "Costs"). Renders a second
+     * area, stacked on top of `value` when `variant="stacked"`. */
+    value2?: number;
+}
+export interface AreaChartProps {
+    data: AreaChartDatum[];
+    variant?: AreaChartVariant;
+    /** Legend label for `value` / `value2` in the tooltip. */
+    seriesLabels?: [string, string?];
+    size?: ChartSize;
+    height?: number;
+    className?: string;
+}
+export declare const AreaChart: React.FC<AreaChartProps>;
+export default AreaChart;

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

@@ -0,0 +1,2 @@
+export { AreaChart, default } from './AreaChart';
+export type { AreaChartProps, AreaChartDatum, AreaChartVariant, ChartSize } from './AreaChart';

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps {
+    /** Figma AV axis. Defaults to "md". */
+    size?: AvatarSize;
+    /** Image URL — renders Image type. */
+    src?: string;
+    /** Alt text for the image. */
+    alt?: string;
+    /** 1–2 letters — renders Initials type when no src. */
+    initials?: string;
+    /** Custom icon — renders Icon type when no src/initials. */
+    icon?: React.ReactNode;
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

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

@@ -0,0 +1,2 @@
+export { Avatar, default } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar';