@stella-source/stellasource-dsl 1.4.3 → 1.5.3

package/dist/cjs/types/components/Tabs/Styles.d.ts

@@ -0,0 +1,2 @@
+declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export { TabsBar };

package/dist/cjs/types/components/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+interface TabProps {
+    id?: string;
+    className?: string;
+    onClick?: (tabLabel: string) => void;
+    label: string;
+    htmlProps?: HTMLAttributes<HTMLButtonElement>;
+}
+declare const Tab: ({ id, className, onClick, htmlProps, label }: TabProps) => React.JSX.Element;
+export default Tab;

package/dist/cjs/types/components/Tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabsProps } from "./types";
+declare const Tabs: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => React.JSX.Element;
+export default Tabs;

package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import { TabsProps } from "./types";
+declare const _default: {
+    title: string;
+    component: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => import("react").JSX.Element;
+    tags: string[];
+    parameters: {};
+    argTypes: {};
+    args: TabsProps;
+};
+export default _default;
+export declare const Tabs: {};

package/dist/cjs/types/components/Tabs/types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+export interface TabsProps {
+    id?: string;
+    className?: string;
+    activeTab?: string;
+    htmlProps?: HTMLAttributes<HTMLElement>;
+    tabs: string[];
+    onTabClick: (label?: string) => void;
+}

package/dist/cjs/types/index.d.ts

@@ -15,6 +15,7 @@ import Pagination from "./components/Pagination/Pagination";
 import Sync from "./components/Sync/Sync";
 import TableUnitsAndTotals from "./components/TableUnitsAndTotals/TableUnitsAndTotals";
 import PaymentStatus from "./components/PaymentStatus/PaymentStatus";
+import Tabs from "./components/Tabs/Tabs";
 /** Types */
 import { StellaButtonVariant } from "./components/StellaButton/types";
 /** Tokens */
@@ -22,4 +23,4 @@ import { Styles } from "./shared/tokens";
 import "./shared/tokens/tokens.css";
 /**Exports */
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
-export { Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, Styles, };
+export { Tabs, Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, Styles, };

package/dist/esm/index.esm.js

@@ -21925,5 +21925,18 @@ const PaymentStatus = ({ variant, id, className }) => {
         a__default.createElement(PaymentStatusLabel, null, label)));
 };
 
-export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, TextInput, Tooltip };
+const Tab = ({ id, className, onClick, htmlProps, label }) => {
+    return (a__default.createElement("button", { id: id, className: className, onClick: () => onClick?.(label), ...htmlProps }, label));
+};
+
+const TabsBar = styled.nav `
+  display: flex;
+  gap: 2px;
+`;
+
+const Tabs = ({ id, className, tabs, activeTab, htmlProps, onTabClick, }) => {
+    return (a__default.createElement(TabsBar, { id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.createElement(Tab, { key: `${id}-${tab}`, id: `${id}-${tab}`, label: tab, onClick: () => onTabClick(tab) })))));
+};
+
+export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, Tabs, TextInput, Tooltip };
 //# sourceMappingURL=index.esm.js.map