@monolith-forensics/monolith-ui 1.2.121 → 1.3.0

package/dist/Button/Button.js

@@ -54,7 +54,6 @@ const StyledButton = styled.button `
 }};
 
   font-weight: 525;
-  letter-spacing: 0.75px;
   font-size: ${({ theme, size }) => {
     switch (size) {
         case "xxs":

package/dist/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export declare const Tab: React.FC<{
+    value: string | number;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    disabled?: boolean;
+    leftSection?: React.ReactNode;
+    rightSection?: React.ReactNode;
+}>;

package/dist/Tabs/Tab.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import Button from "../Button";
+import { useTabs } from "./TabsProvider";
+const StyledTabButton = styled(Button) `
+  user-select: none;
+  cursor: pointer;
+
+  border: none;
+  border-radius: 0;
+
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-weight: 500;
+
+  ${({ orientation }) => orientation === "horizontal" &&
+    css `
+      border-bottom: 2px solid transparent;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      &:hover {
+        border-top: 0;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 2px solid transparent;
+
+        background-color: ${({ theme }) => theme.palette.action.hover};
+      }
+
+      &[data-active="true"] {
+        border-bottom-color: ${({ theme }) => theme.palette.primary.main};
+        color: ${({ theme }) => theme.palette.primary.main};
+      }
+    `}
+
+  ${({ orientation }) => orientation === "vertical" &&
+    css `
+      width: auto;
+      border-right: 2px solid transparent;
+      border-bottom-left-radius: 5px;
+      border-top-left-radius: 5px;
+
+      .inner-span {
+        justify-content: flex-start !important;
+      }
+
+      &:hover {
+        border-top: 0;
+        border-left: 0;
+        border-bottom: 0;
+        border-right: 2px solid transparent;
+
+        background-color: ${({ theme }) => theme.palette.action.hover};
+      }
+
+      &[data-active="true"] {
+        border-right-color: ${({ theme }) => theme.palette.primary.main};
+        color: ${({ theme }) => theme.palette.primary.main};
+      }
+    `}
+`;
+export const Tab = ({ children, style, onClick, disabled, leftSection, rightSection, value, }) => {
+    const { size, value: activeValue, onChange, orientation } = useTabs();
+    const isActive = activeValue === value;
+    return (_jsx(StyledTabButton, { className: "tab-button", style: style, "data-active": isActive, onClick: () => {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onChange(value);
+        }, size: size, disabled: disabled, leftSection: leftSection, rightSection: rightSection, orientation: orientation, children: children }));
+};

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Size } from "../core";
+import { Justify, Orientation } from "./Tabs.types";
+export declare const Tabs: React.FC<{
+    defaultValue?: string | number;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    children: ReactNode;
+    size?: Size;
+    showDivider?: boolean;
+    justify?: Justify;
+    orientation?: Orientation;
+}>;

package/dist/Tabs/Tabs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { TabsProvider } from "./TabsProvider";
+const StyledContainer = styled.div `
+  user-select: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: ${({ justify }) => justify};
+
+  ${({ orientation, showDivider, theme }) => orientation === "vertical"
+    ? css `
+          flex-direction: column;
+          border-right: ${showDivider
+        ? "1px solid " + theme.palette.divider
+        : "transparent"};
+          width: max-content;
+        `
+    : css `
+          flex-direction: row;
+          border-bottom: ${showDivider
+        ? "1px solid " + theme.palette.divider
+        : "transparent"};
+        `}
+
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const Tabs = ({ children, size, showDivider = true, justify = "start", defaultValue, value, onChange, orientation = "horizontal", }) => {
+    return (_jsx(TabsProvider, { size: size, value: value, defaultValue: defaultValue, onChange: onChange, orientation: orientation, children: _jsx(StyledContainer, { className: "tabs-container", size: size, showDivider: showDivider, justify: justify, orientation: orientation, children: children }) }));
+};

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

@@ -0,0 +1,2 @@
+export type Justify = "start" | "center" | "end" | "space-between" | "space-around";
+export type Orientation = "horizontal" | "vertical";

package/dist/Tabs/Tabs.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Tabs/TabsProvider.d.ts

@@ -0,0 +1,24 @@
+import { Size } from "../core";
+import { Orientation } from "./Tabs.types";
+export declare const TabsContext: import("react").Context<{
+    value: string | number;
+    defaultValue?: string | number;
+    onChange: (value: string | number) => void;
+    size?: Size;
+    orientation?: Orientation;
+}>;
+export declare const TabsProvider: React.FC<{
+    children: React.ReactNode;
+    size?: Size;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    orientation?: Orientation;
+}>;
+export declare const useTabs: () => {
+    value: string | number;
+    defaultValue?: string | number;
+    onChange: (value: string | number) => void;
+    size?: Size;
+    orientation?: Orientation;
+};

package/dist/Tabs/TabsProvider.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useUncontrolled } from "@mantine/hooks";
+export const TabsContext = createContext({
+    value: "",
+    defaultValue: "",
+    onChange: () => { },
+    size: "sm",
+    orientation: "horizontal",
+});
+export const TabsProvider = ({ children, size, value, defaultValue, onChange, orientation }) => {
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: "Final",
+        onChange,
+    });
+    return (_jsx(TabsContext.Provider, { value: {
+            value: _value,
+            onChange: handleChange,
+            size,
+            defaultValue,
+            orientation,
+        }, children: children }));
+};
+export const useTabs = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("useTabs must be used within a TabsProvider");
+    }
+    return context;
+};

package/dist/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/dist/Tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/dist/index.d.ts

@@ -40,3 +40,4 @@ export * from "./MonolithUIProvider";
 export * from "./FileViewer";
 export * from "./Table";
 export type { ColumnProps, TableProps } from "./Table";
+export * from "./Tabs";

package/dist/index.js

@@ -28,3 +28,4 @@ export * from "./hooks";
 export * from "./MonolithUIProvider";
 export * from "./FileViewer";
 export * from "./Table";
+export * from "./Tabs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.121",
+  "version": "1.3.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -16,6 +16,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
+    "dev": "cd playground && yarn dev",
     "clean": "rm -r ./dist",
     "build": "tsc",
     "listFiles": "tsc --listFiles",