@kaio-xyz/design-system 1.0.40 → 1.1.0

package/dist/components/atoms/drawer/drawer.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export type DrawerProps = {
+    isOpen: boolean;
+    title: string;
+    children?: ReactNode;
+    isLarge?: boolean;
+    className?: string;
+    actions?: ReactNode;
+    onClose?: () => void;
+};
+export declare const Drawer: ({ isOpen, title, children, className, actions, onClose, isLarge, }: DrawerProps) => import("react").ReactPortal;

package/dist/components/atoms/drawer/drawer.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Drawer } from "./drawer";
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+export declare const Default: Story;
+export declare const Large: Story;
+export declare const WithActions: Story;
+export declare const WithActionsLongBody: Story;
+export declare const LongTitle: Story;

package/dist/components/atoms/drawer/index.d.ts

@@ -0,0 +1 @@
+export { Drawer } from "./drawer";

package/dist/components/atoms/list/list-item/list-item.d.ts

@@ -1,6 +1,7 @@
 type ListItem = {
     value: string;
     label: string;
+    key?: string;
 };
-export declare const ListItem: ({ value, label }: ListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ value, label, key }: ListItem) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/atoms/stepper/step/step.d.ts

@@ -3,6 +3,7 @@ type StepProps = {
     isCompleted?: boolean;
     isCurrent?: boolean;
     iconSize?: number;
+    key?: string;
 };
-export declare const Step: ({ label, iconSize, isCompleted, isCurrent }: StepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Step: ({ key, label, iconSize, isCompleted, isCurrent }: StepProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/atoms/table/index.d.ts

@@ -0,0 +1 @@
+export { Table } from "./table";

package/dist/components/atoms/table/table-custom-styles.d.ts

@@ -0,0 +1,41 @@
+export declare const tableCustomStyles: {
+    table: {
+        style: {
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            overflow: string;
+        };
+    };
+    headRow: {
+        style: {
+            backgroundColor: string;
+            borderBottom: string;
+        };
+    };
+    headCells: {
+        style: {
+            color: string;
+            fontWeight: number;
+            fontSize: string;
+        };
+    };
+    rows: {
+        style: {
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    cells: {
+        style: {
+            padding: string;
+        };
+    };
+    pagination: {
+        style: {
+            backgroundColor: string;
+            borderTop: string;
+            color: string;
+        };
+    };
+};

package/dist/components/atoms/table/table.d.ts

@@ -0,0 +1,7 @@
+import { TableProps as BaseTableProps } from 'react-data-table-component';
+type TableProps<T> = BaseTableProps<T> & {
+    dataTest: string;
+    isLoading?: boolean;
+};
+export declare const Table: <T>({ data, columns, dataTest, customStyles, isLoading, onRowClicked, ...rest }: TableProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/atoms/table/table.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table } from "./table";
+type DataRow = {
+    id: number;
+    name: string;
+    email: string;
+    age: number;
+    city: string;
+};
+declare const meta: Meta<typeof Table<DataRow>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithRowClicked: Story;
+export declare const DenseTable: Story;

package/dist/hooks/use-can-animate.d.ts

@@ -0,0 +1 @@
+export declare const useCanAnimate: () => boolean;

package/dist/index.cjs.js

@@ -514,7 +514,7 @@ var Stepper = function (_a) {
 var style$2 = {"root":"step-module__root__Tk1Yq","container":"step-module__container__XbQSB","label":"step-module__label__UNF3I","emptyIcon":"step-module__emptyIcon__-xNcB","checkIcon":"step-module__checkIcon__MWBUM","loadingIcon":"step-module__loadingIcon__-VoCZ"};
 
 var Step = function (_a) {
-    var label = _a.label, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
+    var key = _a.key, label = _a.label, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
     var icon = React.useMemo(function () {
         switch (true) {
             case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$2.checkIcon });
@@ -522,7 +522,7 @@ var Step = function (_a) {
             default: return jsxRuntime.jsx("span", { className: style$2.emptyIcon });
         }
     }, [isCompleted, isCurrent]);
-    return (jsxRuntime.jsx("li", { className: style$2.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$2.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$2.label, children: label })] }) }));
+    return (jsxRuntime.jsx("li", { className: style$2.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$2.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$2.label, children: label })] }) }, key));
 };
 
 var style$1 = {"root":"list-module__root__OXx93"};
@@ -535,8 +535,8 @@ var List = function (_a) {
 var style = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
 
 var ListItem = function (_a) {
-    var value = _a.value, label = _a.label;
-    return (jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style.label, children: label }), jsxRuntime.jsx("span", { className: style.value, children: value })] }));
+    var value = _a.value, label = _a.label, key = _a.key;
+    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style.label, children: label }), jsxRuntime.jsx("span", { className: style.value, children: value })] }) }, key));
 };
 
 exports.Badge = Badge;