npm package: @razorrisk/shared-ui
Description: A collection of shared, themed UI components for RazorRisk applications.
Latest version: 1.0.15

# @razorrisk/shared-ui

A collection of shared, themed UI components for RazorRisk applications.

## Prerequisites

To use components from `@razorrisk/shared-ui`, you **must wrap your application (or component tree)** in a `ThemeProvider` and pass a valid `theme` object. This ensures consistent design tokens such as typography, spacing, and colors.

Before installing `@razorrisk/shared-ui`, ensure your project has the following peer dependencies installed. These libraries are required for compatibility and proper functionality:

| Package             | Required Version |
|---------------------|------------------|
| `react`             | ^18.3.1          |
| `react-dom`         | ^18.3.1          |
| `styled-components` | 5.3.11           |

You can install them using the following command:

```bash
npm install react@^18.3.1 react-dom@^18.3.1 styled-components@5.3.11
```

## Installation

Install the package via npm or yarn:

```bash
npm install @razorrisk/shared-ui
```

## Usage

```jsx
const theme = {
        "name": "light",
        "typography": {
            "fontFamily": "Inter",
            "lineHeights": {
                "0": "1rem",
                "1": "1.25rem",
                "2": "1.5rem",
                "3": "1.875rem",
                "4": "2rem",
                "5": "2.125rem",
                "6": "2.625rem",
                "7": "3.25rem",
                "8": "4.5rem",
                "9": "5.375rem",
                "10": "6.75rem",
                "11": "9rem",
                "12": "12rem"
            },
            "fontWeights": {"0": 100, "1": 200, "2": 300, "3": 400, "4": 500, "5": 600, "6": 700, "7": 800, "8": 900},
            "fontSizes": {
                "0": "0.75rem",
                "1": "0.875rem",
                "2": "1rem",
                "3": "1.125rem",
                "4": "1.25rem",
                "5": "1.5rem",
                "6": "1.875rem",
                "7": "2.25rem",
                "8": "3rem",
                "9": "3.75rem",
                "10": "4.5rem",
                "11": "6rem",
                "12": "8rem"
            }
        },
        "colors": {
            "base": {
                "0": "#FFFFFF",
                "50": "rgba(26, 26, 26, 0.05)",
                "100": "rgba(26, 26, 26, 0.1)",
                "200": "rgba(26, 26, 26, 0.2)",
                "300": "rgba(26, 26, 26, 0.3)",
                "400": "rgba(26, 26, 26, 0.4)",
                "500": "rgba(26, 26, 26, 0.5)",
                "600": "rgba(26, 26, 26, 0.6)",
                "700": "rgba(26, 26, 26, 0.7)",
                "800": "rgba(26, 26, 26, 0.8)",
                "900": "rgba(26, 26, 26, 1)"
            },
            "blue": {
                "50": "#f2f7ff",
                "100": "#dcebfe",
                "200": "#bedbfe",
                "300": "#91c3fd",
                "400": "#61a6fa",
                "500": "#3479e9",
                "600": "#2463eb",
                "700": "#1d4fd7",
                "800": "#1e3fae",
                "900": "#1e3b8a"
            },
            "purple": {
                "50": "#faf5ff",
                "100": "#f2e5ff",
                "200": "#ead6ff",
                "300": "#d8b4fe",
                "400": "#bf83fc",
                "500": "#a855f7",
                "600": "#9234ea",
                "700": "#7e22ce",
                "800": "#6a21a6",
                "900": "#591c87"
            },
            "gray": {
                "50": "#fdfdfd",
                "100": "#f4f4f5",
                "200": "#e4e4e7",
                "300": "#d4d4d8",
                "400": "#a1a1aa",
                "500": "#71717a",
                "600": "#52525b",
                "700": "#3f3f46",
                "800": "#27272a",
                "900": "#18181b"
            },
            "green": {
                "50": "#f2fdf5",
                "100": "#defce9",
                "200": "#bbf7d0",
                "300": "#85efac",
                "400": "#4ade80",
                "500": "#1ac057",
                "600": "#16a249",
                "700": "#157f3c",
                "800": "#1c713c",
                "900": "#114c29"
            },
            "red": {
                "50": "#fef1f1",
                "100": "#fee1e1",
                "200": "#fec8c8",
                "300": "#fca6a6",
                "400": "#fd6b6b",
                "500": "#ef4343",
                "600": "#dc2828",
                "700": "#ba1c1c",
                "800": "#981b1b",
                "900": "#811d1d"
            },
            "yellow": {
                "50": "#fefce7",
                "100": "#fef9c3",
                "200": "#fef08b",
                "300": "#fddf49",
                "400": "#facc14",
                "500": "#e7b008",
                "600": "#c88a04",
                "700": "#a26107",
                "800": "#864e0e",
                "900": "#733f12"
            },
            "blueGray": {
                "50": "#f8fafc",
                "100": "#f1f5f9",
                "200": "#e1e7ef",
                "300": "#cbd5e1",
                "400": "#94a3b8",
                "500": "#65758b",
                "600": "#48566a",
                "700": "#344256",
                "800": "#1d283a",
                "900": "#0f1729"
            },
            "bronze": {
                "50": "#fafaf9",
                "100": "#f5f5f4",
                "200": "#e7e5e4",
                "300": "#d6d3d1",
                "400": "#a8a29f",
                "500": "#78726d",
                "600": "#56524e",
                "700": "#44403c",
                "800": "#292524",
                "900": "#1c1917"
            },
            "cyan": {
                "50": "#ebfeff",
                "100": "#cdfafe",
                "200": "#a6f3fc",
                "300": "#67e8f9",
                "400": "#20d3ee",
                "500": "#07b6d5",
                "600": "#088eaf",
                "700": "#0e7490",
                "800": "#155f75",
                "900": "#164f64"
            },
            "emerald": {
                "50": "#edfdf5",
                "100": "#d1fae5",
                "200": "#a5f3cf",
                "300": "#6ee7b7",
                "400": "#36d399",
                "500": "#10b77f",
                "600": "#059467",
                "700": "#047656",
                "800": "#066046",
                "900": "#064b39"
            },
            "fuchsia": {
                "50": "#fdf5ff",
                "100": "#f9e5ff",
                "200": "#f5d2fe",
                "300": "#f0abfc",
                "400": "#e87bf9",
                "500": "#d948ef",
                "600": "#bf27d3",
                "700": "#a31daf",
                "800": "#85198f",
                "900": "#711a75"
            },
            "indigo": {
                "50": "#f0f3ff",
                "100": "#e0e8ff",
                "200": "#c8d3fe",
                "300": "#a6b4fc",
                "400": "#828df8",
                "500": "#6467f2",
                "600": "#5048e5",
                "700": "#463acb",
                "800": "#372fa2",
                "900": "#312e7f"
            },
            "skyBlue": {
                "50": "#f0f9ff",
                "100": "#e1f3fe",
                "200": "#bae5fd",
                "300": "#7ed4fc",
                "400": "#3abff8",
                "500": "#0da2e7",
                "600": "#0284c5",
                "700": "#0369a0",
                "800": "#075783",
                "900": "#0c4a6e"
            },
            "lime": {
                "50": "#f7fee7",
                "100": "#ebfcca",
                "200": "#d9f99f",
                "300": "#bef263",
                "400": "#a1e633",
                "500": "#82cb15",
                "600": "#66a50d",
                "700": "#4c7b0f",
                "800": "#406312",
                "900": "#355214"
            },
            "metal": {
                "50": "#f9fafb",
                "100": "#f3f4f6",
                "200": "#e5e7eb",
                "300": "#d1d5db",
                "400": "#9ca3b0",
                "500": "#6b7280",
                "600": "#4b5563",
                "700": "#384252",
                "800": "#1f2937",
                "900": "#111827"
            },
            "orange": {
                "50": "#fff6eb",
                "100": "#FFEDD6",
                "200": "#FED6A9",
                "300": "#FDBA72",
                "400": "#fb923c",
                "500": "#F67416",
                "600": "#E9590C",
                "700": "#C03F0C",
                "800": "#9B3B12",
                "900": "#7D2D12"
            },
            "pink": {
                "50": "#fdf2f8",
                "100": "#fce8f4",
                "200": "#fbd0e8",
                "300": "#f9a9d5",
                "400": "#f471b5",
                "500": "#ec4699",
                "600": "#db2979",
                "700": "#bf185d",
                "800": "#9b174c",
                "900": "#811842"
            },
            "rose": {
                "50": "#fff0f1",
                "100": "#ffe5e7",
                "200": "#fecdd3",
                "300": "#fda5af",
                "400": "#fb6f84",
                "500": "#f43e5c",
                "600": "#e21d48",
                "700": "#bf123d",
                "800": "#a1123a",
                "900": "#861336"
            },
            "teal": {
                "50": "#f2fdfa",
                "100": "#cbfbf0",
                "200": "#98f6e3",
                "300": "#5dead5",
                "400": "#2bd4bd",
                "500": "#14b8a5",
                "600": "#0d968b",
                "700": "#0f756d",
                "800": "#115f5a",
                "900": "#134e4a"
            },
            "violet": {
                "50": "#f6f5ff",
                "100": "#ebe7fe",
                "200": "#ded7fe",
                "300": "#c3b4fd",
                "400": "#a689fa",
                "500": "#895af6",
                "600": "#7c3bed",
                "700": "#6b26d9",
                "800": "#5a21b5",
                "900": "#4d1d95"
            }
        },
        "spacing": {
            "0": "0rem",
            "1": "0.25rem",
            "2": "0.5rem",
            "3": "0.75rem",
            "4": "1rem",
            "5": "1.25rem",
            "6": "1.5rem",
            "7": "1.75rem",
            "8": "2rem",
            "9": "2.25rem",
            "10": "2.5rem",
            "11": "2.75rem",
            "12": "3rem",
            "14": "3.5rem",
            "16": "4rem",
            "20": "5rem",
            "24": "6rem",
            "28": "7rem",
            "32": "8rem",
            "36": "9rem",
            "40": "10rem",
            "44": "11rem",
            "48": "12rem",
            "52": "13rem",
            "56": "14rem",
            "60": "15rem",
            "64": "16rem",
            "72": "18rem",
            "80": "20rem",
            "96": "24rem",
            "0.5": "0.125rem",
            "1.5": "0.375rem",
            "2.5": "0.625rem",
            "3.5": "0.875rem",
            "4.5": "1.125rem"
        },
        "iconSizes": {"0": "0.8333125rem", "1": "1.041875rem", "2": "1.125rem", "3": "1.25rem"},
        "radius": {
            "0": "0.125rem",
            "1": "0.25rem",
            "2": "0.375rem",
            "3": "0.5rem",
            "4": "0.625rem",
            "5": "0.75rem",
            "9999": "624.9375rem"
        }
    }
```

```jsx
import { ThemeProvider, Badge } from '@razorrisk/shared-ui';

  const App = () => (
  <ThemeProvider theme={theme}>
    <Badge>Test Badge</Badge>
  </ThemeProvider>
);

export default App;
```