orange-core-ui 0.1.0

package/dist/tokens/index.d.ts

@@ -0,0 +1,270 @@
+/**
+ * Orange Design System Design Tokens
+ * All design tokens extracted from Orange Boosted Bootstrap
+ */
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+export * from './borders';
+export * from './shadows';
+export * from './breakpoints';
+export declare const tokens: {
+    readonly colors: {
+        readonly functional: {
+            readonly green: "#228722";
+            readonly blue: "#4170d8";
+            readonly yellow: "#fc0";
+            readonly red: "#cd3c14";
+        };
+        readonly supporting: {
+            readonly blue: "#4bb4e6";
+            readonly yellow: "#ffd200";
+            readonly green: "#50be87";
+            readonly purple: "#a885d8";
+            readonly pink: "#ffb4e6";
+            readonly orange: "#ff7900";
+        };
+        readonly theme: {
+            readonly primary: "#f16e00";
+            readonly secondary: "#000";
+            readonly success: "#228722";
+            readonly info: "#4170d8";
+            readonly warning: "#fc0";
+            readonly danger: "#cd3c14";
+            readonly light: "#999";
+            readonly dark: "#000";
+        };
+        readonly gray: {
+            readonly 100: "#fafafa";
+            readonly 200: "#eee";
+            readonly 300: "#ddd";
+            readonly 400: "#ccc";
+            readonly 500: "#999";
+            readonly 600: "#666";
+            readonly 700: "#595959";
+            readonly 800: "#333";
+            readonly 900: "#141414";
+            readonly 950: "#141414";
+        };
+        readonly semantic: {
+            readonly white: "#fff";
+            readonly black: "#000";
+            readonly body: {
+                readonly color: "#000";
+                readonly bg: "#fff";
+                readonly secondaryColor: "#595959";
+                readonly secondaryBg: "#ddd";
+                readonly tertiaryColor: "#999";
+                readonly tertiaryBg: "#fafafa";
+                readonly emphasisColor: "#000";
+            };
+            readonly link: {
+                readonly color: "#000";
+                readonly hoverColor: "#f16e00";
+            };
+            readonly border: {
+                readonly color: "#000";
+                readonly colorSubtle: "#999";
+                readonly colorTranslucent: "rgba(0, 0, 0, 0.175)";
+            };
+        };
+        readonly orange: {
+            readonly 100: "#ff7900";
+            readonly 200: "#f16e00";
+        };
+        readonly white: {
+            readonly 100: "#fff";
+        };
+        readonly black: {
+            readonly 900: "#000";
+        };
+        readonly forest: {
+            readonly 100: "#6c6";
+            readonly 200: "#228722";
+        };
+        readonly fire: {
+            readonly 100: "#ff4d4d";
+            readonly 200: "#cd3c14";
+        };
+        readonly water: {
+            readonly 100: "#69f";
+            readonly 200: "#4170d8";
+        };
+        readonly sun: {
+            readonly 100: "#fc0";
+            readonly 200: "#8f7200";
+        };
+        readonly blue: {
+            readonly 100: "#b5e8f7";
+            readonly 200: "#80ceef";
+            readonly 300: "#4bb4e6";
+            readonly 400: "#3e9dd6";
+            readonly 500: "#237eca";
+            readonly 600: "#085ebd";
+        };
+        readonly green: {
+            readonly 100: "#b8ebd6";
+            readonly 200: "#84d5af";
+            readonly 300: "#50be87";
+            readonly 400: "#27a971";
+            readonly 500: "#198c51";
+            readonly 600: "#0a6e31";
+        };
+        readonly pink: {
+            readonly 100: "#ffe8f7";
+            readonly 200: "#ffceef";
+            readonly 300: "#ffb4e6";
+            readonly 400: "#ff8ad4";
+            readonly 500: "#d573bb";
+            readonly 600: "#bc4d9a";
+        };
+        readonly purple: {
+            readonly 100: "#d9c2f0";
+            readonly 200: "#c1a4e4";
+            readonly 300: "#a885d8";
+            readonly 400: "#9373bd";
+            readonly 500: "#6e4aa7";
+            readonly 600: "#492191";
+        };
+        readonly yellow: {
+            readonly 100: "#fff6b6";
+            readonly 200: "#ffe45b";
+            readonly 300: "#ffd200";
+            readonly 400: "#ffb400";
+            readonly 500: "#b98f11";
+            readonly 600: "#9d6e06";
+        };
+    };
+    readonly spacing: {
+        readonly targetSize: "2.75rem";
+        readonly gridGutter: "1.25rem";
+        readonly containerPadding: "1.25rem";
+        readonly 0: "0";
+        readonly 1: "0.3125rem";
+        readonly 2: "0.625rem";
+        readonly 3: "1.25rem";
+        readonly 4: "1.875rem";
+        readonly 5: "3.75rem";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: string;
+            readonly mono: string;
+        };
+        readonly fontSize: {
+            readonly root: null;
+            readonly base: "1rem";
+            readonly sm: "0.875rem";
+            readonly lg: "1.125rem";
+            readonly xlg: "1.25rem";
+        };
+        readonly heading: {
+            readonly h1: "2.125rem";
+            readonly h2: "1.875rem";
+            readonly h3: "1.5rem";
+            readonly h4: "1.25rem";
+            readonly h5: "1.125rem";
+            readonly h6: "1rem";
+        };
+        readonly display: {
+            readonly display1: "3.75rem";
+            readonly display2: "3.125rem";
+            readonly display3: "2.5rem";
+            readonly display4: "2.125rem";
+        };
+        readonly lineHeight: {
+            readonly base: "calc(18 / 16)";
+            readonly sm: "calc(16 / 14)";
+            readonly lg: "calc(30 / 16)";
+            readonly h1: "1";
+            readonly h2: "calc(32 / 30)";
+            readonly h3: "calc(26 / 24)";
+            readonly h4: "calc(22 / 20)";
+            readonly h5: "calc(20 / 18)";
+            readonly h6: "calc(18 / 16)";
+            readonly display: "1";
+            readonly lead: "1.5";
+        };
+        readonly letterSpacing: {
+            readonly base: "-0.00625rem";
+            readonly h1: "-0.0625rem";
+            readonly h2: "-0.05rem";
+            readonly mid: "-0.0375rem";
+            readonly h3: "-0.03125rem";
+            readonly h4: "-0.025rem";
+            readonly h5: "-0.0125rem";
+            readonly h6: "-0.00625rem";
+            readonly display1: "-0.125rem";
+            readonly display2: "-0.1rem";
+            readonly display3: "-0.0625rem";
+            readonly display4: "-0.0625rem";
+            readonly lead: "-0.025rem";
+        };
+        readonly fontWeight: {
+            readonly light: "300";
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+    };
+    readonly borders: {
+        readonly width: "0.125rem";
+        readonly widths: {
+            readonly 1: "0.0625rem";
+            readonly 2: "0.125rem";
+            readonly 3: "0.1875rem";
+            readonly 4: "0.25rem";
+            readonly 5: "0.3125rem";
+        };
+        readonly style: "solid";
+        readonly radius: {
+            readonly none: "0";
+            readonly sm: "0.25rem";
+            readonly base: "0.375rem";
+            readonly lg: "0.5rem";
+            readonly xl: "1rem";
+            readonly xxl: "2rem";
+            readonly pill: "50rem";
+        };
+        readonly color: {
+            readonly default: "#000";
+            readonly subtle: "#999";
+            readonly translucent: "rgba(0, 0, 0, 0.175)";
+        };
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly sm: null;
+        readonly base: null;
+        readonly lg: null;
+        readonly inset: null;
+    };
+    readonly responsive: {
+        readonly breakpoints: {
+            readonly xs: "0";
+            readonly sm: "480px";
+            readonly md: "768px";
+            readonly lg: "1024px";
+            readonly xl: "1280px";
+            readonly xxl: "1440px";
+        };
+        readonly containerMaxWidths: {
+            readonly xs: "312px";
+            readonly sm: "468px";
+            readonly md: "744px";
+            readonly lg: "960px";
+            readonly xl: "1200px";
+            readonly xxl: "1320px";
+        };
+        readonly containerFluidMargins: {
+            readonly xs: "4px";
+            readonly sm: "6px";
+            readonly md: "12px";
+            readonly lg: "32px";
+            readonly xl: "40px";
+            readonly xxl: "60px";
+        };
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAS9B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC"}

package/dist/tokens/shadows.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Orange Design System Shadow Tokens
+ * Extracted from Orange Boosted Bootstrap SCSS variables
+ * Note: Boosted uses null for box shadows (no shadows by default)
+ */
+export declare const boxShadows: {
+    readonly none: "none";
+    readonly sm: null;
+    readonly base: null;
+    readonly lg: null;
+    readonly inset: null;
+};
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: null;
+    readonly base: null;
+    readonly lg: null;
+    readonly inset: null;
+};
+//# sourceMappingURL=shadows.d.ts.map

package/dist/tokens/shadows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../src/tokens/shadows.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAAa,CAAC"}

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Orange Design System Spacing Tokens
+ * Extracted from Orange Boosted Bootstrap SCSS variables
+ * Base spacer: 1.25rem (20px)
+ */
+export declare const spacer = "1.25rem";
+export declare const spacers: {
+    readonly 0: "0";
+    readonly 1: "0.3125rem";
+    readonly 2: "0.625rem";
+    readonly 3: "1.25rem";
+    readonly 4: "1.875rem";
+    readonly 5: "3.75rem";
+};
+export declare const targetSize = "2.75rem";
+export declare const gridGutterWidth = "1.25rem";
+export declare const containerPaddingX = "1.25rem";
+export declare const spacing: {
+    readonly targetSize: "2.75rem";
+    readonly gridGutter: "1.25rem";
+    readonly containerPadding: "1.25rem";
+    readonly 0: "0";
+    readonly 1: "0.3125rem";
+    readonly 2: "0.625rem";
+    readonly 3: "1.25rem";
+    readonly 4: "1.875rem";
+    readonly 5: "3.75rem";
+};
+//# sourceMappingURL=spacing.d.ts.map

package/dist/tokens/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,MAAM,YAAY,CAAC;AAEhC,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAGX,eAAO,MAAM,UAAU,YAAY,CAAC;AAGpC,eAAO,MAAM,eAAe,YAAS,CAAC;AAGtC,eAAO,MAAM,iBAAiB,YAAkB,CAAC;AAGjD,eAAO,MAAM,OAAO;;;;;;;;;;CAKV,CAAC"}

package/dist/tokens/typography.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Orange Design System Typography Tokens
+ * Extracted from Orange Boosted Bootstrap SCSS variables
+ */
+export declare const fontFamilies: {
+    readonly sansSerif: string;
+    readonly monospace: string;
+};
+export declare const fontSizes: {
+    readonly root: null;
+    readonly base: "1rem";
+    readonly sm: "0.875rem";
+    readonly lg: "1.125rem";
+    readonly xlg: "1.25rem";
+};
+export declare const headingSizes: {
+    readonly h1: "2.125rem";
+    readonly h2: "1.875rem";
+    readonly h3: "1.5rem";
+    readonly h4: "1.25rem";
+    readonly h5: "1.125rem";
+    readonly h6: "1rem";
+};
+export declare const displaySizes: {
+    readonly display1: "3.75rem";
+    readonly display2: "3.125rem";
+    readonly display3: "2.5rem";
+    readonly display4: "2.125rem";
+};
+export declare const lineHeights: {
+    readonly base: "calc(18 / 16)";
+    readonly sm: "calc(16 / 14)";
+    readonly lg: "calc(30 / 16)";
+    readonly h1: "1";
+    readonly h2: "calc(32 / 30)";
+    readonly h3: "calc(26 / 24)";
+    readonly h4: "calc(22 / 20)";
+    readonly h5: "calc(20 / 18)";
+    readonly h6: "calc(18 / 16)";
+    readonly display: "1";
+    readonly lead: "1.5";
+};
+export declare const letterSpacing: {
+    readonly base: "-0.00625rem";
+    readonly h1: "-0.0625rem";
+    readonly h2: "-0.05rem";
+    readonly mid: "-0.0375rem";
+    readonly h3: "-0.03125rem";
+    readonly h4: "-0.025rem";
+    readonly h5: "-0.0125rem";
+    readonly h6: "-0.00625rem";
+    readonly display1: "-0.125rem";
+    readonly display2: "-0.1rem";
+    readonly display3: "-0.0625rem";
+    readonly display4: "-0.0625rem";
+    readonly lead: "-0.025rem";
+};
+export declare const fontWeights: {
+    readonly light: "300";
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: string;
+        readonly mono: string;
+    };
+    readonly fontSize: {
+        readonly root: null;
+        readonly base: "1rem";
+        readonly sm: "0.875rem";
+        readonly lg: "1.125rem";
+        readonly xlg: "1.25rem";
+    };
+    readonly heading: {
+        readonly h1: "2.125rem";
+        readonly h2: "1.875rem";
+        readonly h3: "1.5rem";
+        readonly h4: "1.25rem";
+        readonly h5: "1.125rem";
+        readonly h6: "1rem";
+    };
+    readonly display: {
+        readonly display1: "3.75rem";
+        readonly display2: "3.125rem";
+        readonly display3: "2.5rem";
+        readonly display4: "2.125rem";
+    };
+    readonly lineHeight: {
+        readonly base: "calc(18 / 16)";
+        readonly sm: "calc(16 / 14)";
+        readonly lg: "calc(30 / 16)";
+        readonly h1: "1";
+        readonly h2: "calc(32 / 30)";
+        readonly h3: "calc(26 / 24)";
+        readonly h4: "calc(22 / 20)";
+        readonly h5: "calc(20 / 18)";
+        readonly h6: "calc(18 / 16)";
+        readonly display: "1";
+        readonly lead: "1.5";
+    };
+    readonly letterSpacing: {
+        readonly base: "-0.00625rem";
+        readonly h1: "-0.0625rem";
+        readonly h2: "-0.05rem";
+        readonly mid: "-0.0375rem";
+        readonly h3: "-0.03125rem";
+        readonly h4: "-0.025rem";
+        readonly h5: "-0.0125rem";
+        readonly h6: "-0.00625rem";
+        readonly display1: "-0.125rem";
+        readonly display2: "-0.1rem";
+        readonly display3: "-0.0625rem";
+        readonly display4: "-0.0625rem";
+        readonly lead: "-0.025rem";
+    };
+    readonly fontWeight: {
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+//# sourceMappingURL=typography.d.ts.map

package/dist/tokens/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,eAAO,MAAM,YAAY;;;CAuBf,CAAC;AAGX,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAGX,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAGX,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;;;;;;CAYd,CAAC;AAMX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAchB,CAAC;AAGX,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAGX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWb,CAAC"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,7 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx and tailwind-merge for optimal class merging
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;;GAGG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "orange-core-ui",
+  "version": "0.1.0",
+  "description": "Orange Core UI - React component library with Tailwind CSS",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/styles/globals.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/[your-org]/orange-core-ui.git"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --outDir dist",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "pack": "npm run build && npm pack --pack-destination .",
+    "prepublishOnly": "npm run build",
+    "publish:dry-run": "npm run build && npm pack --dry-run",
+    "publish:pack": "npm run build && npm pack"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "tailwind",
+    "orange",
+    "design-system"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "@hookform/resolvers": "^3.3.0",
+    "@radix-ui/react-accordion": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-context-menu": "^2.1.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-hover-card": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-progress": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.0.0",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-tabs": "^1.0.0",
+    "@radix-ui/react-toast": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "zod": "^3.22.0"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^3.3.0",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/react": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
+    "@storybook/test": "^7.6.7",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "clsx": "^2.1.0",
+    "jsdom": "^23.0.1",
+    "postcss": "^8.4.33",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.49.3",
+    "storybook": "^10.2.3",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "zod": "^3.22.4"
+  }
+}