@max-ts/svelte 0.1.1

package/README.md

@@ -0,0 +1,161 @@
+# @max-ts/svelte
+
+Svelte UI-kit with vanilla-extract CSS-in-JS styling.
+
+## Installation
+
+```bash
+npm install @max-ts/svelte
+# or
+pnpm add @max-ts/svelte
+# or
+yarn add @max-ts/svelte
+```
+
+## Usage
+
+```svelte
+<script>
+  import { Button } from '@max-ts/svelte';
+  import '@max-ts/svelte/styles.css';
+</script>
+
+<Button variant="default" size="md">
+  {#snippet children()}
+    Click me!
+  {/snippet}
+</Button>
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+#### Props
+
+- `variant?: 'default' | 'destructive' | 'outline' | 'ghost' | 'link'` - Button style variant (default: 'default')
+- `size?: 'sm' | 'md' | 'lg' | 'icon' | 'iconSm'` - Button size (default: 'md')
+- `isLoading?: boolean` - Show loading spinner (default: false)
+- `fullWidth?: boolean` - Make button full width (default: false)
+- `disabled?: boolean` - Disable button (default: false)
+- `type?: 'button' | 'submit' | 'reset'` - Button type (default: 'button')
+- `class?: string` - Additional CSS classes
+- `onclick?: () => void` - Click handler
+- `children?: Snippet` - Button content (Svelte 5 snippet)
+- `startAdornment?: Snippet` - Content before button text
+- `endAdornment?: Snippet` - Content after button text
+
+#### Examples
+
+```svelte
+<!-- Basic usage -->
+<Button>
+  {#snippet children()}Default Button{/snippet}
+</Button>
+
+<!-- Different variants -->
+<Button variant="destructive">
+  {#snippet children()}Delete{/snippet}
+</Button>
+
+<Button variant="outline">
+  {#snippet children()}Outline{/snippet}
+</Button>
+
+<Button variant="ghost">
+  {#snippet children()}Ghost{/snippet}
+</Button>
+
+<Button variant="link">
+  {#snippet children()}Link{/snippet}
+</Button>
+
+<!-- Different sizes -->
+<Button size="sm">
+  {#snippet children()}Small{/snippet}
+</Button>
+
+<Button size="lg">
+  {#snippet children()}Large{/snippet}
+</Button>
+
+<!-- Icon button -->
+<Button size="icon" variant="outline">
+  {#snippet children()}🔍{/snippet}
+</Button>
+
+<!-- Loading state -->
+<Button isLoading={true}>
+  {#snippet children()}Loading...{/snippet}
+</Button>
+
+<!-- With adornments -->
+<Button>
+  {#snippet startAdornment()}📧{/snippet}
+  {#snippet children()}Send Email{/snippet}
+</Button>
+
+<!-- Full width -->
+<Button fullWidth={true}>
+  {#snippet children()}Full Width{/snippet}
+</Button>
+```
+
+## Styling
+
+This package uses vanilla-extract for type-safe CSS-in-JS. The theme tokens are shared with `@max-ts/kit` package, ensuring consistent design across React and Svelte components.
+
+### Theme tokens
+
+The package includes theme tokens for:
+- Colors (primary, secondary, error, success, warning, info, text, background)
+- Spacing (1-20 scale)
+- Font sizes (xs, sm, base, lg, xl, 2xl, 3xl, 4xl)
+- Font weights (normal, medium, semibold, bold)
+- Border radius (sm, md, lg)
+- Elevation (shadows 1-6)
+
+### Custom styling
+
+You can override styles using CSS classes:
+
+```svelte
+<Button class="my-custom-button">
+  {#snippet children()}Custom{/snippet}
+</Button>
+
+<style>
+  :global(.my-custom-button) {
+    /* Your custom styles */
+  }
+</style>
+```
+
+## Development
+
+```bash
+# Build the package
+pnpm build
+
+# Watch mode for development
+pnpm dev
+
+# Run Storybook
+pnpm storybook
+
+# Type checking
+pnpm lint:types
+```
+
+## Architecture
+
+- **Svelte 5**: Uses modern Svelte 5 syntax with runes and snippets
+- **vanilla-extract**: Type-safe CSS-in-JS with zero runtime
+- **Vite**: Fast build tool for library bundling
+- **Native Svelte features**: Uses Svelte's `class:` directive instead of external class utilities
+
+## License
+
+MIT

package/lib/components/Accordion/Content/index.d.ts

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

package/lib/components/Accordion/Content/styles.css.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    content: string;
+    inner: string;
+};
+export default _default;

package/lib/components/Accordion/Item/index.d.ts

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

package/lib/components/Accordion/Item/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    item: string;
+};
+export default _default;

package/lib/components/Accordion/Trigger/index.d.ts

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

package/lib/components/Accordion/Trigger/styles.css.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    header: string;
+    trigger: string;
+    icon: string;
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+declare const Accordion: {
+    Trigger: import("svelte/legacy").LegacyComponentType;
+    Item: import("svelte/legacy").LegacyComponentType;
+    Content: import("svelte/legacy").LegacyComponentType;
+    Root: import("svelte/legacy").LegacyComponentType;
+};
+export { Accordion };

package/lib/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.svelte';
+export { buttonVariants } from './styles.css';
+export type { ButtonSize, ButtonVariant } from './types';

package/lib/components/Button/styles.css.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonSize, ButtonVariant } from './types';
+export declare const buttonVariants: Record<ButtonVariant, string>;
+declare const _default: {
+    buttonSizes: Record<ButtonSize, string>;
+    buttonVariants: Record<ButtonVariant, string>;
+    fullWidth: string;
+    loading: string;
+};
+export default _default;

package/lib/components/Button/types.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'ghost' | 'link';
+export type ButtonSize = 'medium' | 'small' | 'large' | 'icon' | 'iconSmall';
+export type ButtonProps = HTMLButtonAttributes & {
+    variant?: ButtonVariant;
+    loading?: boolean;
+    fullWidth?: boolean;
+    size?: ButtonSize;
+    label?: string;
+    href?: string;
+    ref?: HTMLElement | null;
+};

package/lib/components/Calendar/Caption/index.d.ts

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

package/lib/components/Calendar/Cell/index.d.ts

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

package/lib/components/Calendar/Cell/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    cell: string;
+};
+export default _default;

package/lib/components/Calendar/Day/index.d.ts

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

package/lib/components/Calendar/Day/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    day: string;
+};
+export default _default;

package/lib/components/Calendar/Grid/index.d.ts

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

package/lib/components/Calendar/Grid/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    grid: string;
+};
+export default _default;

package/lib/components/Calendar/GridBody/index.d.ts

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

package/lib/components/Calendar/GridHead/index.d.ts

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

package/lib/components/Calendar/GridRow/index.d.ts

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

package/lib/components/Calendar/GridRow/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    gridRow: string;
+};
+export default _default;

package/lib/components/Calendar/HeadCell/index.d.ts

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

package/lib/components/Calendar/HeadCell/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    headCell: string;
+};
+export default _default;

package/lib/components/Calendar/Header/index.d.ts

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

package/lib/components/Calendar/Header/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    header: string;
+};
+export default _default;

package/lib/components/Calendar/Heading/index.d.ts

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

package/lib/components/Calendar/Heading/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    heading: string;
+};
+export default _default;

package/lib/components/Calendar/Month/index.d.ts

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

package/lib/components/Calendar/MonthSelect/index.d.ts

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

package/lib/components/Calendar/MonthSelect/styles.css.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    wrapper: string;
+    select: string;
+    visiblePart: string;
+};
+export default _default;

package/lib/components/Calendar/Months/index.d.ts

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

package/lib/components/Calendar/Months/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    months: string;
+};
+export default _default;

package/lib/components/Calendar/Nav/index.d.ts

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

package/lib/components/Calendar/Nav/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    nav: string;
+};
+export default _default;

package/lib/components/Calendar/NextButton/index.d.ts

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

package/lib/components/Calendar/NextButton/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    nextButton: string;
+};
+export default _default;

package/lib/components/Calendar/PrevButton/index.d.ts

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

package/lib/components/Calendar/PrevButton/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    prevButton: string;
+};
+export default _default;

package/lib/components/Calendar/YearSelect/index.d.ts

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

package/lib/components/Calendar/YearSelect/styles.css.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    wrapper: string;
+    select: string;
+    visiblePart: string;
+};
+export default _default;

package/lib/components/Calendar/index.d.ts

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

package/lib/components/Calendar/styles.css.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    calendar: string;
+    gridRow: string;
+    gridRowHead: string;
+};
+export default _default;

package/lib/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './Checkbox.svelte';
+export { Root as Checkbox, Root, };

package/lib/components/Checkbox/styles.css.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    checkboxBase: string;
+    checkboxIndicator: string;
+};
+export default _default;

package/lib/components/CircularProgress/index.d.ts

@@ -0,0 +1,3 @@
+import CircularProgress from './CircularProgress.svelte';
+export type { CircularProgressProps } from './types';
+export { CircularProgress };

package/lib/components/CircularProgress/styles.css.d.ts

@@ -0,0 +1,9 @@
+export declare const colors: Record<"primary" | "secondary" | "inherit", string>;
+declare const _default: {
+    root: string;
+    svg: string;
+    circle: string;
+    variants: Record<"indeterminate" | "determinate", string>;
+    colors: Record<"primary" | "secondary" | "inherit", string>;
+};
+export default _default;

package/lib/components/CircularProgress/types.d.ts

@@ -0,0 +1,8 @@
+export type CircularProgressProps = {
+    size?: number;
+    thickness?: number;
+    color?: 'primary' | 'secondary' | 'inherit';
+    value?: number;
+    variant?: 'indeterminate' | 'determinate';
+    class?: string;
+};

package/lib/components/DataGrid/Body/index.d.ts

@@ -0,0 +1,3 @@
+import Body from './Body.svelte';
+export type { BodyProps } from './types';
+export { Body };

package/lib/components/DataGrid/Body/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    container: string;
+};
+export default _default;

package/lib/components/DataGrid/Body/types.d.ts

@@ -0,0 +1,4 @@
+import type { DataGridProps } from '../types';
+export type BodyProps<TRow> = Pick<DataGridProps<TRow>, 'emptyState' | 'errorState' | 'isLoading' | 'isError' | 'columns' | 'rows' | 'onRowClick' | 'keyId' | 'onRetry'> & {
+    rowHeight: number;
+};

package/lib/components/DataGrid/Cell/index.d.ts

@@ -0,0 +1,3 @@
+import Cell from './Cell.svelte';
+export type { CellProps } from './types';
+export { Cell };

package/lib/components/DataGrid/Cell/styles.css.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    cell: string;
+    disabled: string;
+};
+export default _default;

package/lib/components/DataGrid/Cell/types.d.ts

@@ -0,0 +1,7 @@
+import type { DataGridColumn } from '../types';
+export type CellProps<TRow> = {
+    row: TRow;
+    column: DataGridColumn<TRow>;
+    rowIndex: number;
+    height: number;
+};

package/lib/components/DataGrid/Footer/index.d.ts

@@ -0,0 +1,2 @@
+import Footer from './Footer.svelte';
+export { Footer };

package/lib/components/DataGrid/Footer/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    footer: string;
+};
+export default _default;

package/lib/components/DataGrid/Header/index.d.ts

@@ -0,0 +1,3 @@
+import Header from './Header.svelte';
+export { Header };
+export type { HeaderProps } from './types';

package/lib/components/DataGrid/Header/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    sticky: string;
+};
+export default _default;

package/lib/components/DataGrid/Header/types.d.ts

@@ -0,0 +1,6 @@
+import type { DataGridColumn } from '../types';
+export type HeaderProps<TRow> = {
+    columns: DataGridColumn<TRow>[];
+    height: string | number;
+    sticky?: boolean;
+};

package/lib/components/DataGrid/HeaderCell/index.d.ts

@@ -0,0 +1,3 @@
+import HeaderCell from './HeaderCell.svelte';
+export type { HeaderCellProps } from './types';
+export { HeaderCell };

package/lib/components/DataGrid/HeaderCell/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    cell: string;
+};
+export default _default;

package/lib/components/DataGrid/HeaderCell/types.d.ts

@@ -0,0 +1,6 @@
+import type { DataGridColumn } from '../types';
+export type HeaderCellProps<T> = {
+    column: DataGridColumn<T>;
+    height?: string | number;
+    width?: string | number;
+};

package/lib/components/DataGrid/Row/index.d.ts

@@ -0,0 +1,3 @@
+import Row from './Row.svelte';
+export type { RowProps } from './types';
+export { Row };

package/lib/components/DataGrid/Row/styles.css.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    row: string;
+    selectable: string;
+};
+export default _default;

package/lib/components/DataGrid/Row/types.d.ts

@@ -0,0 +1,9 @@
+import type { DataGridColumn } from '../types';
+export type RowProps<TRow> = {
+    row: TRow;
+    columns: DataGridColumn<TRow>[];
+    rowIndex: number;
+    rowId: string;
+    rowHeight: number;
+    onRowClick?: (row: TRow) => void;
+};

package/lib/components/DataGrid/State/index.d.ts

@@ -0,0 +1,3 @@
+import State from './State.svelte';
+export type { StateProps } from './types';
+export { State };

package/lib/components/DataGrid/State/styles.css.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    container: string;
+    loader: string;
+};
+export default _default;

package/lib/components/DataGrid/State/types.d.ts

@@ -0,0 +1,10 @@
+import type { DataGridState } from '../types';
+export type StateProps = {
+    isLoading?: boolean;
+    isEmpty?: boolean;
+    isError?: boolean;
+    columnsLength: number;
+    emptyState?: DataGridState;
+    errorState?: DataGridState;
+    onRetry?: () => void;
+};

package/lib/components/DataGrid/constants.d.ts

@@ -0,0 +1 @@
+export declare const ROW_HEIGHT = 40;

package/lib/components/DataGrid/index.d.ts

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

package/lib/components/DataGrid/styles.css.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    container: string;
+    table: string;
+    fullHeight: string;
+    disabled: string;
+    loading: string;
+    title: string;
+};
+export default _default;

package/lib/components/DataGrid/types.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+export type DataGridColumn<TRow> = {
+    title: string;
+    field?: keyof TRow;
+    width?: number | string;
+    align?: 'left' | 'center' | 'right' | 'justify';
+    isDisabled?: boolean;
+    color?: string;
+    headerCell?: Snippet<[
+        Omit<DataGridColumn<TRow>, 'headerCell' | 'cell' | 'format' | 'cellClassName' | 'cellColor'>
+    ]>;
+    cell?: Snippet<[TRow, number]>;
+    format?: (row: TRow) => string | number | null | undefined;
+    cellClassName?: (row: TRow) => string;
+    cellColor?: (row: TRow) => string;
+};
+export type DataGridColumns<TRow> = DataGridColumn<TRow>[];
+export type AlignVariant = 'left' | 'center' | 'right' | 'justify';
+export type DataGridState = {
+    text: string;
+    imgSrc?: string;
+    imgAlt?: string;
+    actions?: Snippet;
+    errorList?: string[];
+    onRetry?: () => void;
+};
+export type DataGridProps<TRow> = {
+    rows: TRow[];
+    columns: DataGridColumn<TRow>[];
+    class?: string;
+    height?: string | number;
+    rowHeight?: number;
+    headerHeight?: number;
+    keyId: keyof TRow;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isError?: boolean;
+    stickyHeader?: boolean;
+    emptyState?: DataGridState;
+    errorState?: DataGridState;
+    onRowClick?: (row: TRow) => void;
+    onRetry?: () => void;
+    title?: string;
+    footer?: Snippet<[]>;
+};

package/lib/components/DataGridSortHeader/index.d.ts

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

package/lib/components/DataGridSortHeader/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const wrapper: string;
+export declare const alignments: Record<"left" | "right" | "center" | "justify", string>;
+declare const _default: {
+    wrapper: string;
+    alignments: Record<"left" | "right" | "center" | "justify", string>;
+};
+export default _default;

package/lib/components/DataGridSortHeader/types.d.ts

@@ -0,0 +1,11 @@
+import type { DataGridColumn } from '../DataGrid/types';
+export type DataGridSorting<TData> = {
+    key: keyof TData;
+    order: 'asc' | 'desc';
+};
+export type DataGridSortHeaderProps<TData> = {
+    column: DataGridColumn<TData>;
+    sorting: DataGridSorting<TData>;
+    setSorting: (sorting: DataGridSorting<TData>) => void;
+    class?: string;
+};