@tipp/ui 1.0.4 → 1.0.6

package/dist/molecules/navigation.js

@@ -0,0 +1,62 @@
+import {
+  Navigation
+} from "../chunk-U25HB5E7.js";
+import "../chunk-MASTHXWN.js";
+import "../chunk-IIBITN2G.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
+import "../chunk-355MU6BH.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-LPUSIN3M.js";
+import "../chunk-5AVBYDPB.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-HLOY6BIP.js";
+import "../chunk-O3T3TM3V.js";
+import "../chunk-O3DNDMV3.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-XQOZWYUA.js";
+import "../chunk-Q37G2GS6.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-P6B2PNYI.js";
+import "../chunk-YTZSKMX3.js";
+import "../chunk-4IKPNQV5.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-CNQ7RNNY.js";
+import "../chunk-O3XTRD7R.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-AQX7DQLI.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-FYEASFUU.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-OCJNQGHN.js";
+import "../chunk-EK4ZFDYD.js";
+import "../chunk-J242TTFH.js";
+import "../chunk-EAXUQEO5.js";
+import "../chunk-CZEGRZBK.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-N552FDTV.js";
+export {
+  Navigation
+};
+//# sourceMappingURL=navigation.js.map

package/dist/molecules/navigation.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/button.tsx

@@ -5,7 +5,7 @@ import {
 import React, { forwardRef, useMemo } from 'react';
 
 export type ButtonProps = Omit<RadixButtonProps, 'size'> & {
-  size: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -15,13 +15,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const radixSize = useMemo(() => {
       switch (size) {
         case 'small':
-          return '2';
+          return '1';
         case 'medium':
-          return '3';
+          return '2';
         case 'large':
-          return '4';
-        default:
           return '3';
+        default:
+          return '2';
       }
     }, [size]);
 

package/src/icon.ts

@@ -11,4 +11,8 @@ export {
   MixerHorizontalIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ClipboardIcon,
+  BarChartIcon,
+  PersonIcon,
+  GearIcon,
 } from '@radix-ui/react-icons';

package/src/molecules/index.ts

@@ -1 +1,2 @@
 export * from './expand-table';
+export * from './navigation';

package/src/molecules/navigation.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button, Flex, Typo } from '../atoms';
+
+interface Item {
+  itemRender?: (item: Item) => React.ReactNode;
+  key: string;
+  onClick?: () => void;
+  title: string;
+  icon?: React.ReactNode;
+  children?: Item[];
+}
+
+export interface NavigationProps {
+  items?: Item[];
+  fontColor?: string;
+  backgroundColor?: string;
+  activeKey?: string;
+}
+
+export function Navigation({
+  items,
+  fontColor,
+  backgroundColor,
+  activeKey,
+}: NavigationProps): React.ReactNode {
+  return (
+    <Flex
+      direction="column"
+      gap="4"
+      pr="3"
+      style={{
+        color: fontColor || 'var(--white-a12)',
+        backgroundColor: backgroundColor || 'var(--black-a12)',
+      }}
+    >
+      {items?.map((item) => {
+        const { key, title, icon, itemRender, onClick, children } = item;
+        return (
+          <Flex direction="column" key={key} onClick={onClick}>
+            {itemRender ? (
+              itemRender(item)
+            ) : (
+              <Flex align="center" gap="3" height="36px" pl="4" pr="4">
+                {icon}
+                <Typo variant="subtitle">{title}</Typo>
+              </Flex>
+            )}
+            {children?.map((menu) => {
+              return menu.itemRender ? (
+                menu.itemRender(menu)
+              ) : (
+                <Button
+                  className={`tipp-navigation-button ${activeKey === menu.key ? 'active' : ''}`}
+                  key={menu.key}
+                  ml="6"
+                  onClick={onClick}
+                  size="large"
+                  style={{ color: 'var(--white-a12)' }}
+                >
+                  {menu.title}
+                </Button>
+              );
+            })}
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}