react-18-ui-library 0.1.0

package/dist/styles.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");:root{--color-primary:#1d4ed8;--color-primary-hover:#1e40af;--color-primary-active:#1e3a8a;--color-primary-subtle:#eff6ff;--color-primary-foreground:#fff;--color-secondary:#334155;--color-secondary-hover:#1e293b;--color-secondary-foreground:#fff;--color-background:#f4f6f9;--color-surface:#fff;--color-surface-hover:#f0f4f8;--color-surface-raised:#fff;--color-border:#d1d9e6;--color-border-strong:#94a3b8;--color-border-focus:#1d4ed8;--color-text:#0d1b2a;--color-text-muted:#4b5e7a;--color-text-subtle:#7a8fa6;--color-text-disabled:#a8b8cc;--color-text-inverse:#fff;--color-text-link:#1d4ed8;--color-error:#dc2626;--color-error-hover:#b91c1c;--color-error-bg:#fef2f2;--color-error-border:#fca5a5;--color-success:#16a34a;--color-success-hover:#15803d;--color-success-bg:#f0fdf4;--color-success-border:#86efac;--color-warning:#d97706;--color-warning-hover:#b45309;--color-warning-bg:#fffbeb;--color-warning-border:#fcd34d;--color-info:#0284c7;--color-info-hover:#0369a1;--color-info-bg:#f0f9ff;--color-info-border:#7dd3fc;--color-overlay:rgba(13,27,42,.6);--color-navbar:#fff;--color-navbar-border:#e2e8f0;--color-navbar-text:#0d1b2a;--color-navbar-text-muted:#4b5e7a;--color-sidebar:#0f1f35;--color-sidebar-header:#0a1628;--color-sidebar-text:#94afc8;--color-sidebar-text-hover:#e2eaf4;--color-sidebar-active:#60a5fa;--color-sidebar-active-bg:rgba(96,165,250,.12);--color-sidebar-border:hsla(0,0%,100%,.06);--color-sidebar-icon:#64849e;--color-accent-violet:#7c3aed;--color-accent-teal:#0d9488;--color-accent-rose:#e11d48;--color-accent-amber:#d97706;--color-accent-cyan:#0891b2;--color-accent-emerald:#059669;--radius-xs:0.1875rem;--radius-sm:0.3125rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--font-family-base:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-family-display:"Inter",sans-serif;--font-size-2xs:0.6875rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--line-height-none:1;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0em;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-unit:0.25rem;--shadow-xs:0 1px 2px 0 rgba(13,27,42,.04);--shadow-sm:0 1px 3px 0 rgba(13,27,42,.08),0 1px 2px -1px rgba(13,27,42,.06);--shadow-md:0 4px 8px -2px rgba(13,27,42,.1),0 2px 4px -2px rgba(13,27,42,.06);--shadow-lg:0 12px 24px -4px rgba(13,27,42,.12),0 4px 8px -2px rgba(13,27,42,.06);--shadow-xl:0 24px 48px -8px rgba(13,27,42,.16),0 8px 16px -4px rgba(13,27,42,.08);--shadow-2xl:0 40px 64px -12px rgba(13,27,42,.22);--shadow-inner:inset 0 2px 4px 0 rgba(13,27,42,.06);--shadow-focus:0 0 0 3px rgba(29,78,216,.25);--shadow-focus-error:0 0 0 3px rgba(220,38,38,.2);--transition-fast:120ms;--transition-speed:200ms;--transition-slow:350ms;--transition-easing:cubic-bezier(0.4,0,0.2,1);--transition-spring:cubic-bezier(0.34,1.56,0.64,1);--transition-ease-in:cubic-bezier(0.4,0,1,1);--transition-ease-out:cubic-bezier(0,0,0.2,1);--z-base:0;--z-raised:10;--z-dropdown:1000;--z-sticky:1020;--z-sidebar:1100;--z-navbar:1200;--z-modal:1300;--z-toast:1400;--z-tooltip:1500;--z-max:9999;--navbar-height:60px;--sidebar-width:256px;--sidebar-collapsed-width:64px;--content-max-width:1280px;--panel-width-sm:320px;--panel-width-md:480px;--panel-width-lg:640px}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import './defaultTokens.css';
+export interface ThemeTokens {
+    colorPrimary?: string;
+    colorPrimaryHover?: string;
+    colorPrimaryForeground?: string;
+    colorSecondary?: string;
+    colorSecondaryHover?: string;
+    colorSecondaryForeground?: string;
+    colorBackground?: string;
+    colorSurface?: string;
+    colorSurfaceHover?: string;
+    colorBorder?: string;
+    colorBorderFocus?: string;
+    colorText?: string;
+    colorTextMuted?: string;
+    colorTextDisabled?: string;
+    colorError?: string;
+    colorErrorBg?: string;
+    colorSuccess?: string;
+    colorSuccessBg?: string;
+    colorWarning?: string;
+    colorWarningBg?: string;
+    colorInfo?: string;
+    colorInfoBg?: string;
+    colorOverlay?: string;
+    colorNavbar?: string;
+    colorSidebar?: string;
+    colorSidebarText?: string;
+    colorSidebarActive?: string;
+    colorSidebarActiveBg?: string;
+    radiusSm?: string;
+    radiusMd?: string;
+    radiusLg?: string;
+    radiusXl?: string;
+    fontFamilyBase?: string;
+    fontFamilyMono?: string;
+    shadowSm?: string;
+    shadowMd?: string;
+    shadowLg?: string;
+    shadowXl?: string;
+    transitionFast?: string;
+    transitionSpeed?: string;
+    transitionSlow?: string;
+    navbarHeight?: string;
+    sidebarWidth?: string;
+    sidebarCollapsedWidth?: string;
+}
+interface ThemeContextValue {
+    tokens: ThemeTokens;
+    setToken: (key: keyof ThemeTokens, value: string) => void;
+}
+export interface ThemeProviderProps {
+    tokens?: ThemeTokens;
+    children: ReactNode;
+}
+export declare function ThemeProvider({ tokens, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useThemeContext(): ThemeContextValue;
+export {};

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "react-18-ui-library",
+  "version": "0.1.0",
+  "description": "A fully customizable, theme-aware React 18 enterprise UI component library",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "prebuild": "npm run snyk:test",
+    "build": "rollup -c --configPlugin @rollup/plugin-typescript",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit",
+    "snyk:test": "snyk test --severity-threshold=high",
+    "snyk:test:all": "snyk test",
+    "snyk:monitor": "snyk monitor",
+    "snyk:report": "snyk test --json | node scripts/snyk-report.mjs",
+    "snyk:report:html": "snyk test --json-file-output=reports/snyk-results.json; node scripts/snyk-report.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.344.0",
+    "prism-react-renderer": "^2.4.1",
+    "react-day-picker": "^9.13.2",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.51.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.35",
+    "rollup": "^4.12.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "snyk": "^1.1302.1",
+    "storybook": "^7.6.17",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
+    "vitest": "^1.3.1"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "library",
+    "typescript",
+    "tailwindcss",
+    "enterprise"
+  ],
+  "license": "MIT"
+}