@ton/appkit-react 0.0.1-alpha.1 → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TonTech
+
+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

@@ -1,13 +1,209 @@
 # @ton/appkit-react
 
-> TON AppKit React — React bindings for TON AppKit
+React components and hooks for AppKit.
 
-This package is under active development. Stay tuned for updates.
+## Overview
+
+- [Initialization](#initialization)
+- [Basic Usage](#basic-usage)
+- [Swap](#swap)
+- [Creating a Swap Provider](./docs/creating-swap-provider.md): Implement your own swap provider for any DEX or protocol.
+- [Hooks](./docs/hooks.md): React hooks for wallet connection, state, and data fetching.
+- [Components](./docs/components.md): UI components for AppKit.
 
 ## Installation
 
 ```bash
-npm install @ton/appkit-react
+npm install @ton/appkit-react @tanstack/react-query @tonconnect/ui-react @ton/core @ton/crypto
+```
+
+## Dependencies
+
+`@ton/appkit-react` requires the following peer dependencies:
+
+-   `react` (>= 18.0.0)
+-   `react-dom` (>= 18.0.0)
+-   `@tanstack/react-query` (>= 5.0.0)
+-   `@tonconnect/ui-react` (>= 2.4.1)
+
+## Initialization
+
+Initialize `QueryClient` and `AppKit`, then wrap your application in `QueryClientProvider` and `AppKitProvider`.
+
+> [!NOTE]
+> Don't forget to import styles from `@ton/appkit-react/styles.css`.
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AppKit, Network, TonConnectConnector } from '@ton/appkit';
+import { AppKitProvider } from '@ton/appkit-react';
+import type { FC } from 'react';
+
+// Import styles
+import '@ton/appkit-react/styles.css';
+
+// Initialize QueryClient
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+
+// Initialize AppKit
+const appKit = new AppKit({
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: {
+                url: 'https://toncenter.com',
+                key: 'your-key',
+            },
+        },
+        // Optional: add testnet
+        // [Network.testnet().chainId]: {
+        //     apiClient: {
+        //         url: 'https://testnet.toncenter.com',
+        //         key: 'your-key',
+        //     },
+        // },
+    },
+    connectors: [
+        new TonConnectConnector({
+            tonConnectOptions: {
+                manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
+            },
+        }),
+    ],
+});
+
+export const App: FC = () => {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <AppKitProvider appKit={appKit}>{/* <AppContent /> */}</AppKitProvider>
+        </QueryClientProvider>
+    );
+};
+```
+[Read more about TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
+
+### TonConnect Configuration
+
+When using `TonConnectConnector`, you can pass `tonConnectOptions` which accepts standard [TonConnectUI options](https://github.com/ton-connect/sdk/tree/main/packages/ui-react#parameters), including `manifestUrl`, `uiOptions`, etc.
+
+## Basic Usage
+
+### Connect Wallet
+
+Use `TonConnectButton` to allow users to connect their wallets. It handles the connection flow and UI.
+
+```tsx
+import { TonConnectButton } from '@ton/appkit-react';
+
+export const Header = () => {
+    return (
+        <header>
+            <TonConnectButton />
+        </header>
+    );
+};
+```
+
+### Get Wallet Address
+
+Use `useAddress` to get the currently connected wallet address.
+
+```tsx
+import { useAddress } from '@ton/appkit-react';
+
+export const AddressBlock = () => {
+    const address = useAddress();
+
+    if (!address) {
+        return <div>Wallet not connected</div>;
+    }
+
+    return <div>Address: {address}</div>;
+};
+```
+
+### Get Balance
+
+Use `useBalance` to fetch the TON balance of the connected wallet.
+
+```tsx
+import { useBalance } from '@ton/appkit-react';
+
+export const Balance = () => {
+    const { data: balance, isLoading } = useBalance();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    return <div>Balance: {balance?.toString()} TON</div>;
+};
+```
+
+> See [Hooks Documentation](./docs/hooks.md) for all available hooks and [Components Documentation](./docs/components.md) for UI components.
+
+## Swap
+
+AppKit uses a provider-based architecture for swaps. Any DEX or protocol can implement a swap provider by extending the `SwapProvider` class — AppKit handles routing, hooks, and transaction building through a unified interface.
+
+`OmnistonSwapProvider` is an available provider. You can use it, replace it, or run multiple providers side by side. To implement your own, see [Creating a Swap Provider](./docs/creating-swap-provider.md).
+
+### Installation
+
+```bash
+npm install @ston-fi/omniston-sdk
+```
+
+### Setup
+
+Initialize `AppKit` with `OmnistonSwapProvider`:
+
+```ts
+// Initialize AppKit with swap provider
+const appKit = new AppKit({
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: {
+                url: 'https://toncenter.com',
+                key: 'your-key',
+            },
+        },
+    },
+    providers: [
+        new OmnistonSwapProvider({
+            // Optional configuration
+            apiUrl: 'https://api.ston.fi',
+            defaultSlippageBps: 100, // 1%
+        }),
+    ],
+});
+```
+
+### Hooks
+
+Use `useSwapQuote` to get a quote and `useBuildSwapTransaction` to build the transaction.
+
+See [Swap Hooks](./docs/hooks.md#swap) for usage examples.
+
+## Migration from TonConnect UI
+
+`AppKitProvider` automatically bridges TonConnect if a `TonConnectConnector` is configured, so `@tonconnect/ui-react` hooks (like `useTonAddress`, `useTonWallet`, etc.) work out of the box inside `AppKitProvider`.
+
+You can use standard TonConnect hooks in your components:
+
+```tsx
+import { useTonAddress } from '@tonconnect/ui-react';
+
+export const AppContent: FC = () => {
+    const address = useTonAddress();
+
+    return <p>Address: {address}</p>;
+};
 ```
 
 ## License

package/dist/components/block/block.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { FC, ComponentProps } from 'react';
+export interface BlockProps extends ComponentProps<'div'> {
+    direction?: 'row' | 'column';
+}
+export declare const Block: FC<BlockProps>;
+//# sourceMappingURL=block.d.ts.map

package/dist/components/block/block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../src/components/block/block.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAChC;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAEhC,CAAC"}

package/dist/components/block/block.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var styles = require('./block.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Block = ({ className, direction = "column", ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default(styles__default.default.block, direction === "row" && styles__default.default.row, className), ...props });
+};
+
+exports.Block = Block;
+//# sourceMappingURL=block.js.map
+//# sourceMappingURL=block.js.map

package/dist/components/block/block.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/block/block.tsx"],"names":["jsx","clsx","styles"],"mappings":";;;;;;;;;;;AAiBO,MAAM,KAAA,GAAwB,CAAC,EAAE,SAAA,EAAW,YAAY,QAAA,EAAU,GAAG,OAAM,KAAM;AACpF,EAAA,uBAAOA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,qBAAA,CAAKC,uBAAA,CAAO,KAAA,EAAO,SAAA,KAAc,KAAA,IAASA,uBAAA,CAAO,GAAA,EAAK,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACxG","file":"block.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { FC, ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './block.module.css';\n\nexport interface BlockProps extends ComponentProps<'div'> {\n    direction?: 'row' | 'column';\n}\n\nexport const Block: FC<BlockProps> = ({ className, direction = 'column', ...props }) => {\n    return <div className={clsx(styles.block, direction === 'row' && styles.row, className)} {...props} />;\n};\n"]}

package/dist/components/block/block.mjs

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './block.module.css';
+
+const Block = ({ className, direction = "column", ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.block, direction === "row" && styles.row, className), ...props });
+};
+
+export { Block };
+//# sourceMappingURL=block.mjs.map
+//# sourceMappingURL=block.mjs.map

package/dist/components/block/block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/block/block.tsx"],"names":[],"mappings":";;;;AAiBO,MAAM,KAAA,GAAwB,CAAC,EAAE,SAAA,EAAW,YAAY,QAAA,EAAU,GAAG,OAAM,KAAM;AACpF,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,KAAA,EAAO,SAAA,KAAc,KAAA,IAAS,MAAA,CAAO,GAAA,EAAK,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACxG","file":"block.mjs","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { FC, ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './block.module.css';\n\nexport interface BlockProps extends ComponentProps<'div'> {\n    direction?: 'row' | 'column';\n}\n\nexport const Block: FC<BlockProps> = ({ className, direction = 'column', ...props }) => {\n    return <div className={clsx(styles.block, direction === 'row' && styles.row, className)} {...props} />;\n};\n"]}

package/dist/components/block/block.module.css

@@ -0,0 +1,13 @@
+.block {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: var(--ta-border-radius-l);
+  background-color: var(--ta-color-block);
+}
+.row {
+  flex-direction: row;
+  align-items: center;
+}
+/*# sourceMappingURL=block.module.css.map */

package/dist/components/block/block.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/block/block.module.css"],"sourcesContent":[".block {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--ta-border-radius-l);\n  background-color: var(--ta-color-block);\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n}\n"],"mappings":"AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,cAAY;AACZ,WAAS;AACT,iBAAe,IAAI;AACnB,oBAAkB,IAAI;AACxB;AAEA,CAAC;AACC,kBAAgB;AAChB,eAAa;AACf;","names":[]}

package/dist/components/block/block.stories.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Block } from './block';
+declare const meta: Meta<typeof Block>;
+export default meta;
+type Story = StoryObj<typeof Block>;
+export declare const Column: Story;
+export declare const Row: Story;
+//# sourceMappingURL=block.stories.d.ts.map

package/dist/components/block/block.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.stories.d.ts","sourceRoot":"","sources":["../../../src/components/block/block.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAU5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAWjB,CAAC"}

package/dist/components/block/block.stories.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var block = require('./block');
+
+const meta = {
+  title: "Private/Components/Block",
+  component: block.Block,
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: "radio",
+      options: ["row", "column"]
+    }
+  }
+};
+var block_stories_default = meta;
+const Column = {
+  args: {
+    direction: "column",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 1" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 3" })
+    ] })
+  }
+};
+const Row = {
+  args: {
+    direction: "row",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 1" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 3" })
+    ] })
+  }
+};
+
+exports.Column = Column;
+exports.Row = Row;
+exports.default = block_stories_default;
+//# sourceMappingURL=block.stories.js.map
+//# sourceMappingURL=block.stories.js.map

package/dist/components/block/block.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/block/block.stories.tsx"],"names":["Block","jsxs","Fragment","jsx"],"mappings":";;;;;;;AAYA,MAAM,IAAA,GAA2B;AAAA,EAC7B,KAAA,EAAO,0BAAA;AAAA,EACP,SAAA,EAAWA,WAAA;AAAA,EACX,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,QAAA,EAAU;AAAA,IACN,SAAA,EAAW;AAAA,MACP,OAAA,EAAS,OAAA;AAAA,MACT,OAAA,EAAS,CAAC,KAAA,EAAO,QAAQ;AAAA;AAC7B;AAER,CAAA;AAEA,IAAO,qBAAA,GAAQ;AAIR,MAAM,MAAA,GAAgB;AAAA,EACzB,IAAA,EAAM;AAAA,IACF,SAAA,EAAW,QAAA;AAAA,IACX,0BACIC,eAAA,CAAAC,mBAAA,EAAA,EACI,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,YAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7EA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7EA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM;AAAA,KAAA,EACjF;AAAA;AAGZ;AAEO,MAAM,GAAA,GAAa;AAAA,EACtB,IAAA,EAAM;AAAA,IACF,SAAA,EAAW,KAAA;AAAA,IACX,0BACIF,eAAA,CAAAC,mBAAA,EAAA,EACI,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,YAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7EA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7EA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM;AAAA,KAAA,EACjF;AAAA;AAGZ","file":"block.stories.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Block } from './block';\n\nconst meta: Meta<typeof Block> = {\n    title: 'Private/Components/Block',\n    component: Block,\n    tags: ['autodocs'],\n    argTypes: {\n        direction: {\n            control: 'radio',\n            options: ['row', 'column'],\n        },\n    },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Block>;\n\nexport const Column: Story = {\n    args: {\n        direction: 'column',\n        children: (\n            <>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 1</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 2</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 3</div>\n            </>\n        ),\n    },\n};\n\nexport const Row: Story = {\n    args: {\n        direction: 'row',\n        children: (\n            <>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 1</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 2</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 3</div>\n            </>\n        ),\n    },\n};\n"]}

package/dist/components/block/block.stories.mjs

@@ -0,0 +1,39 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Block } from './block';
+
+const meta = {
+  title: "Private/Components/Block",
+  component: Block,
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: "radio",
+      options: ["row", "column"]
+    }
+  }
+};
+var block_stories_default = meta;
+const Column = {
+  args: {
+    direction: "column",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 1" }),
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 2" }),
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 3" })
+    ] })
+  }
+};
+const Row = {
+  args: {
+    direction: "row",
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 1" }),
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 2" }),
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px", background: "#0098EB", color: "white" }, children: "Item 3" })
+    ] })
+  }
+};
+
+export { Column, Row, block_stories_default as default };
+//# sourceMappingURL=block.stories.mjs.map
+//# sourceMappingURL=block.stories.mjs.map

package/dist/components/block/block.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/block/block.stories.tsx"],"names":[],"mappings":";;;AAYA,MAAM,IAAA,GAA2B;AAAA,EAC7B,KAAA,EAAO,0BAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,QAAA,EAAU;AAAA,IACN,SAAA,EAAW;AAAA,MACP,OAAA,EAAS,OAAA;AAAA,MACT,OAAA,EAAS,CAAC,KAAA,EAAO,QAAQ;AAAA;AAC7B;AAER,CAAA;AAEA,IAAO,qBAAA,GAAQ;AAIR,MAAM,MAAA,GAAgB;AAAA,EACzB,IAAA,EAAM;AAAA,IACF,SAAA,EAAW,QAAA;AAAA,IACX,0BACI,IAAA,CAAA,QAAA,EAAA,EACI,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,YAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7E,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7E,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM;AAAA,KAAA,EACjF;AAAA;AAGZ;AAEO,MAAM,GAAA,GAAa;AAAA,EACtB,IAAA,EAAM;AAAA,IACF,SAAA,EAAW,KAAA;AAAA,IACX,0BACI,IAAA,CAAA,QAAA,EAAA,EACI,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,YAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7E,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC7E,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,OAAA,EAAS,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,KAAA,EAAO,OAAA,EAAQ,EAAG,QAAA,EAAA,QAAA,EAAM;AAAA,KAAA,EACjF;AAAA;AAGZ","file":"block.stories.mjs","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Block } from './block';\n\nconst meta: Meta<typeof Block> = {\n    title: 'Private/Components/Block',\n    component: Block,\n    tags: ['autodocs'],\n    argTypes: {\n        direction: {\n            control: 'radio',\n            options: ['row', 'column'],\n        },\n    },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Block>;\n\nexport const Column: Story = {\n    args: {\n        direction: 'column',\n        children: (\n            <>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 1</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 2</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 3</div>\n            </>\n        ),\n    },\n};\n\nexport const Row: Story = {\n    args: {\n        direction: 'row',\n        children: (\n            <>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 1</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 2</div>\n                <div style={{ padding: '8px', background: '#0098EB', color: 'white' }}>Item 3</div>\n            </>\n        ),\n    },\n};\n"]}

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export * from './block';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,SAAS,CAAC"}

package/dist/components/block/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var block = require('./block');
+
+
+
+Object.keys(block).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return block[k]; }
+	});
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/components/block/index.mjs

@@ -0,0 +1,3 @@
+export * from './block';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/block/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}

package/dist/components/button/button.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { FC, ComponentProps } from 'react';
+export declare const Button: FC<ComponentProps<'button'>>;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,CAE/C,CAAC"}

package/dist/components/button/button.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var styles = require('./button.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Button = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: clsx__default.default(styles__default.default.button, className), ...props });
+};
+
+exports.Button = Button;
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":["jsx","clsx","styles"],"mappings":";;;;;;;;;;;AAaO,MAAM,SAAuC,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,KAAM;AAC7E,EAAA,uBAAOA,cAAA,CAAC,YAAO,SAAA,EAAWC,qBAAA,CAAKC,wBAAO,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACzE","file":"button.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { FC, ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './button.module.css';\n\nexport const Button: FC<ComponentProps<'button'>> = ({ className, ...props }) => {\n    return <button className={clsx(styles.button, className)} {...props} />;\n};\n"]}

package/dist/components/button/button.mjs

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './button.module.css';
+
+const Button = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("button", { className: clsx(styles.button, className), ...props });
+};
+
+export { Button };
+//# sourceMappingURL=button.mjs.map
+//# sourceMappingURL=button.mjs.map

package/dist/components/button/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";;;;AAaO,MAAM,SAAuC,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,KAAM;AAC7E,EAAA,uBAAO,GAAA,CAAC,YAAO,SAAA,EAAW,IAAA,CAAK,OAAO,MAAA,EAAQ,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACzE","file":"button.mjs","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { FC, ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './button.module.css';\n\nexport const Button: FC<ComponentProps<'button'>> = ({ className, ...props }) => {\n    return <button className={clsx(styles.button, className)} {...props} />;\n};\n"]}

package/dist/components/button/button.module.css

@@ -0,0 +1,33 @@
+.button {
+  composes: bodyMedium from "../../styles/typography.module.css";
+  appearance: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--ta-color-primary);
+  color: var(--ta-color-primary-foreground);
+  transition: transform 0.125s ease-in-out, background-color 0.2s ease;
+  will-change: transform;
+}
+.button:hover {
+  transform: scale(1.02);
+}
+.button:active {
+  transform: scale(0.98);
+}
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.button:disabled:hover,
+.button:disabled:active {
+  transform: none;
+}
+/*# sourceMappingURL=button.module.css.map */

package/dist/components/button/button.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.module.css"],"sourcesContent":[".button {\n  composes: bodyMedium from \"../../styles/typography.module.css\";\n  appearance: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  border-radius: 20px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n\n  background-color: var(--ta-color-primary); \n  color: var(--ta-color-primary-foreground);\n  transition: transform 0.125s ease-in-out, background-color 0.2s ease;\n  will-change: transform;\n}\n\n.button:hover {\n  transform: scale(1.02);\n}\n\n.button:active {\n  transform: scale(0.98);\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.button:disabled:hover,\n.button:disabled:active {\n  transform: none;\n}\n"],"mappings":"AAAA,CAAC;AACC,YAAU,WAAW,KAAK;AAC1B,cAAY;AACZ,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,cAAY;AACZ,WAAS,IAAI;AACb,iBAAe;AAEf,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AAEL,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,cAAY,UAAU,OAAO,WAAW,EAAE,iBAAiB,KAAK;AAChE,eAAa;AACf;AAEA,CArBC,MAqBM;AACL,aAAW,MAAM;AACnB;AAEA,CAzBC,MAyBM;AACL,aAAW,MAAM;AACnB;AAEA,CA7BC,MA6BM;AACL,WAAS;AACT,UAAQ;AACV;AAEA,CAlCC,MAkCM,SAAS;AAChB,CAnCC,MAmCM,SAAS;AACd,aAAW;AACb;","names":[]}

package/dist/components/button/button.stories.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const WithIcon: Story;
+//# sourceMappingURL=button.stories.d.ts.map

package/dist/components/button/button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAS7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC"}

package/dist/components/button/button.stories.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('./button');
+
+const meta = {
+  title: "Public/Components/Button",
+  component: button.Button,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean"
+    }
+  }
+};
+var button_stories_default = meta;
+const Default = {
+  args: {
+    children: "Click me"
+  }
+};
+const Disabled = {
+  args: {
+    children: "Disabled Button",
+    disabled: true
+  }
+};
+const WithIcon = {
+  args: {
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 5V19M5 12H19",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }),
+      "Add Item"
+    ] })
+  }
+};
+
+exports.Default = Default;
+exports.Disabled = Disabled;
+exports.WithIcon = WithIcon;
+exports.default = button_stories_default;
+//# sourceMappingURL=button.stories.js.map
+//# sourceMappingURL=button.stories.js.map