@rango-dev/ui 0.38.1-next.0 → 0.38.1-next.2

package/dist/widget/ui/src/components/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,MAAM,EACN,KAAK,GACN,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAc9B"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,MAAM,EACN,KAAK,GACN,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAmC9B"}

package/dist/widget/ui/src/components/Header/Header.styles.d.ts

@@ -1,5 +1,167 @@
 export declare const globalHeaderStyles: () => string;
-export declare const Container: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {
+export declare const Container: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
+    titlePosition?: "center" | "left" | "right" | undefined;
+}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util.js").CSS<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary: string;
+        primary500: string;
+        primary550: string;
+        secondary: string;
+        secondary100: string;
+        secondary150: string;
+        secondary200: string;
+        secondary250: string;
+        secondary500: string;
+        secondary550: string;
+        neutral: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        mainContainer: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
+export declare const Prefix: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {}, {
     xs: string;
     sm: string;
     md: string;

package/dist/widget/ui/src/components/Header/Header.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,cAM7B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA6CpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAIjB,CAAC"}
+{"version":3,"file":"Header.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,cAM7B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA0DpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAMjB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAMjB,CAAC"}

package/dist/widget/ui/src/components/Header/Header.types.d.ts

@@ -2,6 +2,6 @@
 export interface PropTypes {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
-    title: string;
+    title?: string | React.ReactNode;
 }
 //# sourceMappingURL=Header.types.d.ts.map

package/dist/widget/ui/src/components/Header/Header.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.types.ts"],"names":[],"mappings":";AAAA,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.types.ts"],"names":[],"mappings":";AAAA,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CAClC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.38.1-next.0",
+  "version": "0.38.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,7 +53,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.36.1-next.1",
+    "@rango-dev/wallets-shared": "^0.36.1-next.2",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
     "rango-types": "^0.1.69",
@@ -62,4 +62,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Header/Header.styles.ts

@@ -14,7 +14,6 @@ export const globalHeaderStyles = globalCss({
 
 export const Container = styled('div', {
   display: 'flex',
-  justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$20 $20 $15 $20',
   $$color: '$colors$neutral100',
@@ -24,6 +23,20 @@ export const Container = styled('div', {
   backgroundColor: '$$color',
   position: 'relative',
 
+  variants: {
+    titlePosition: {
+      left: {
+        justifyContent: 'start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      right: {
+        justifyContent: 'end',
+      },
+    },
+  },
+
   '.rng-curve-left,.rng-curve-right': {
     width: HEADER_CORNDER_RADIUS * 2,
     height: HEADER_CORNDER_RADIUS * 2,
@@ -59,7 +72,17 @@ export const Container = styled('div', {
   },
 });
 
+export const Prefix = styled('div', {
+  position: 'absolute',
+  left: '$20',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+});
+
 export const Suffix = styled('div', {
+  position: 'absolute',
+  right: '$20',
   display: 'flex',
   alignItems: 'center',
   gap: '$5',

package/src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { Typography } from '../Typography/index.js';
 
-import { Container, globalHeaderStyles, Suffix } from './Header.styles.js';
+import { Container, globalHeaderStyles, Prefix, Suffix } from './Header.styles';
 
 export function Header({
   prefix,
@@ -14,12 +14,33 @@ export function Header({
 }: PropsWithChildren<PropTypes>) {
   globalHeaderStyles();
 
+  const getTitlePosition = () => {
+    if (!prefix) {
+      return 'left';
+    }
+    if (!suffix) {
+      return 'right';
+    }
+    return 'center';
+  };
+
+  const renderTitle = () => {
+    if (!title) {
+      return null;
+    } else if (typeof title === 'string') {
+      return (
+        <Typography variant="headline" size="small">
+          {title}
+        </Typography>
+      );
+    }
+    return title;
+  };
+
   return (
-    <Container>
-      {prefix}
-      <Typography variant="headline" size="small">
-        {title}
-      </Typography>
+    <Container titlePosition={getTitlePosition()}>
+      <Prefix>{prefix}</Prefix>
+      {renderTitle()}
       <Suffix>{suffix}</Suffix>
       <div className="rng-curve-left"></div>
       <div className="rng-curve-right"></div>

package/src/components/Header/Header.types.ts

@@ -1,5 +1,5 @@
 export interface PropTypes {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
-  title: string;
+  title?: string | React.ReactNode;
 }

package/dist/widget/ui/src/components/Header/Header.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Header } from './Header.js';
-declare const meta: Meta<typeof Header>;
-export default meta;
-type Story = StoryObj<typeof Header>;
-export declare const Main: Story;
-//# sourceMappingURL=Header.stories.d.ts.map

package/dist/widget/ui/src/components/Header/Header.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Header/Header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAE7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}

package/src/components/Header/Header.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Header } from './Header.js';
-
-const meta: Meta<typeof Header> = {
-  component: Header,
-};
-
-export default meta;
-type Story = StoryObj<typeof Header>;
-
-export const Main: Story = {
-  args: {
-    title: 'Swap',
-    prefix: 'hello',
-    suffix: 'world',
-  },
-};