@rango-dev/ui 0.29.1-next.1 → 0.29.1-next.4

package/src/components/Tabs/Tabs.types.tsx

@@ -0,0 +1,32 @@
+import type { Tabs } from './Tabs.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseItem = {
+  id: string | number;
+  tooltip?: React.ReactNode;
+};
+
+type ItemWithTitle = BaseItem & {
+  title: string;
+  icon?: React.ReactNode;
+};
+
+type ItemWithIcon = BaseItem & {
+  icon: React.ReactNode;
+  title?: string;
+};
+
+type Item = ItemWithTitle | ItemWithIcon;
+type BaseProps = Stitches.VariantProps<typeof Tabs>;
+type BaseType = Exclude<BaseProps['type'], object>;
+type BaseBorderRadius = Exclude<BaseProps['borderRadius'], object>;
+
+export interface PropTypes {
+  items: Item[];
+  container?: HTMLElement;
+  onChange: (item: Item) => void;
+  value: string;
+  type: BaseType;
+  borderRadius?: BaseBorderRadius;
+  className?: string;
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { TabsComponent as Tabs } from './Tabs';

package/src/components/index.ts

@@ -53,3 +53,5 @@ export * from './Popover';
 export * from './Flags';
 export * from './Select';
 export * from './QuoteTag';
+export * from './Tabs';
+export type { SvgIconProps } from './SvgIcon';

package/src/icons/Bridges.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgBridges(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.21 9.21C15.93 10.78 13.45 13.3 13 17H15V19H9V17H11C10.5 12.5 6.63 9 2 9V7C6.39 7 10.22 9.55 12 13.3C13.13 10.87 14.99 9.05 16.78 7.78L14 5H21V12L18.21 9.21Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgBridges;

package/src/icons/Exchange.tsx

@@ -0,0 +1,22 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgExchange(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icons">
+        <path
+          id="Vector"
+          d="M6.99 11L3 15L6.99 19V16H14V14H6.99V11ZM21 9L17.01 5V8H10V10H17.01V13L21 9Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgExchange;

package/src/icons/index.ts

@@ -2,6 +2,7 @@ export { default as AddIcon } from './Add';
 export { default as AutoThemeIcon } from './AutoTheme';
 export { default as AutorenewIcon } from './Autorenew';
 export { default as BorderRadiusIcon } from './BorderRadius';
+export { default as BridgeIcon } from './Bridges';
 export { default as ChevronDownIcon } from './ChevronDown';
 export { default as ChevronLeftIcon } from './ChevronLeft';
 export { default as ChevronRightIcon } from './ChevronRight';
@@ -18,6 +19,7 @@ export { default as DoneIcon } from './Done';
 export { default as EvmCategoryIcon } from './EvmCategory';
 export { default as ErrorIcon } from './Error';
 export { default as ExitIcon } from './Exit';
+export { default as ExchangeIcon } from './Exchange';
 export { default as ExternalLinkIcon } from './ExternalLink';
 export { default as FontIcon } from './Font';
 export { default as GasIcon } from './Gas';