{"_id":"@brionmario-experimental/oxygen-ui","name":"@brionmario-experimental/oxygen-ui","dist-tags":{"alpha":"0.0.1-alpha.0","latest":"0.0.1-alpha.0"},"versions":{"0.0.1-alpha.0":{"name":"@brionmario-experimental/oxygen-ui","version":"0.0.1-alpha.0","description":"WSO2 Oxygen UI | Design System - Powered with Material-UI component library with TypeScript support","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js","require":"./dist/*.cjs"}},"sideEffects":["src/styles/OxygenTheme/theme.css","dist/styles/OxygenTheme/theme.css"],"keywords":["wso2","oxygen-ui","design-system","material-ui","mui","react","typescript","components","ui-library"],"author":{"name":"WSO2 LLC"},"license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/wso2/oxygen-ui.git"},"bugs":{"url":"https://github.com/wso2/oxygen-ui/issues"},"homepage":"https://github.com/wso2/oxygen-ui#readme","dependencies":{"@fontsource-variable/inter":"^5.2.8"},"peerDependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/material":"^7.3.4","@mui/x-charts":"^8.14.0","@mui/x-data-grid":"^8.16.0","@mui/x-date-pickers":"^8.17.0","@mui/x-tree-view":"^8.14.0","react":"^19.2.0","react-dom":"^19.2.0","@brionmario-experimental/oxygen-ui-icons-react":"0.0.1-alpha.0"},"devDependencies":{"@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@typescript-eslint/eslint-plugin":"^7.0.1","@typescript-eslint/parser":"^7.0.1","@vitest/ui":"^4.0.7","esbuild":"^0.25.12","eslint":"^9.12.0","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.2","rimraf":"^6.1.0","typescript":"^5.9.3","vite":"^7.2.1","vitest":"^4.0.7"},"nx":{"targets":{"build":{"dependsOn":["^build"]}}},"publishConfig":{"access":"public"},"scripts":{"build":"pnpm clean && tsc -p tsconfig.json && node esbuild.config.cjs","build:watch":"node esbuild.config.cjs --watch","dev":"node esbuild.config.cjs --watch","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","clean":"rimraf dist","test":"vitest"},"_id":"@brionmario-experimental/oxygen-ui@0.0.1-alpha.0","_integrity":"sha512-eIAiF+oBeUnPsUGpFwZY/YJBRQUaWgoQ4OIMddXrDEO3oogItoxI1/zaje3bEW+FSOT2NZV3rzWV58ipslmB9g==","_resolved":"/tmp/4fb7a78405f1920fa53769440af4d2d1/brionmario-experimental-oxygen-ui-0.0.1-alpha.0.tgz","_from":"file:brionmario-experimental-oxygen-ui-0.0.1-alpha.0.tgz","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-eIAiF+oBeUnPsUGpFwZY/YJBRQUaWgoQ4OIMddXrDEO3oogItoxI1/zaje3bEW+FSOT2NZV3rzWV58ipslmB9g==","shasum":"726cb6cabca2223099b5a6fc9091ffaba16a37c4","tarball":"https://registry.npmjs.org/@brionmario-experimental/oxygen-ui/-/oxygen-ui-0.0.1-alpha.0.tgz","fileCount":24,"unpackedSize":117570,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCq/vjU+iYOfBUX5pLlRdtbARCTp8ar/9JlYq3KyJHoTQIhALyueZJzvuyR/TaPHI+jAuWWWI2ez0uJZofrYS5UgZfq"}]},"_npmUser":{"name":"brionmario","email":"brionbmp@gmail.com"},"directories":{},"maintainers":[{"name":"brionmario","email":"brionbmp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/oxygen-ui_0.0.1-alpha.0_1762973646614_0.1533538784434214"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-12T18:54:06.216Z","0.0.1-alpha.0":"2025-11-12T18:54:06.763Z","modified":"2025-11-12T18:54:07.032Z"},"maintainers":[{"name":"brionmario","email":"brionbmp@gmail.com"}],"description":"WSO2 Oxygen UI | Design System - Powered with Material-UI component library with TypeScript support","homepage":"https://github.com/wso2/oxygen-ui#readme","keywords":["wso2","oxygen-ui","design-system","material-ui","mui","react","typescript","components","ui-library"],"repository":{"type":"git","url":"git+https://github.com/wso2/oxygen-ui.git"},"author":{"name":"WSO2 LLC"},"bugs":{"url":"https://github.com/wso2/oxygen-ui/issues"},"license":"Apache-2.0","readme":"# @brionmario-experimental/oxygen-ui\n\nWSO2 Oxygen UI React component library - A comprehensive design system powered by Material-UI with TypeScript support.\n\n## Installation\n\n```bash\nnpm install @brionmario-experimental/oxygen-ui @emotion/react @emotion/styled @mui/material\n# or\nyarn add @brionmario-experimental/oxygen-ui @emotion/react @emotion/styled @mui/material\n# or\npnpm add @brionmario-experimental/oxygen-ui @emotion/react @emotion/styled @mui/material\n```\n\nThe Inter font (`@fontsource-variable/inter`) is included as a dependency and will be installed automatically.\n\n### Peer Dependencies\n\nMake sure to install the required peer dependencies:\n\n```bash\nnpm install react react-dom @emotion/react @emotion/styled @mui/material @mui/x-data-grid @mui/x-date-pickers @brionmario-experimental/oxygen-ui-icons-react\n```\n\n## Usage\n\n### Material-UI Components\n\nImport and use Material-UI components directly from `@brionmario-experimental/oxygen-ui`:\n\n```typescript\nimport { Box, Button, Stack, TextField } from '@brionmario-experimental/oxygen-ui';\n\nfunction MyComponent() {\n  return (\n    <Box>\n      <Stack spacing={2}>\n        <Button variant=\"contained\">Click me</Button>\n        <TextField label=\"Name\" />\n      </Stack>\n    </Box>\n  );\n}\n```\n\n### Oxygen UI Custom Components\n\n```typescript\nimport { \n  OxygenUIThemeProvider, \n  ColorSchemeToggle, \n  Layout \n} from '@brionmario-experimental/oxygen-ui';\n\nfunction App() {\n  return (\n    <OxygenUIThemeProvider>\n      <Layout>\n        <ColorSchemeToggle />\n        {/* Your app content */}\n      </Layout>\n    </OxygenUIThemeProvider>\n  );\n}\n```\n\n### MUI X Data Grid\n\nData Grid components are exported as a namespace to avoid naming conflicts:\n\n```typescript\nimport { DataGrid } from '@brionmario-experimental/oxygen-ui';\n\n// Destructure the components you need\nconst { \n  DataGrid: DataGridComponent, \n  GridColDef, \n  GridToolbarContainer \n} = DataGrid;\n\nfunction MyDataGrid() {\n  const columns: GridColDef[] = [\n    { field: 'id', headerName: 'ID', width: 90 },\n    { field: 'name', headerName: 'Name', width: 150 },\n  ];\n\n  const rows = [\n    { id: 1, name: 'John Doe' },\n    { id: 2, name: 'Jane Smith' },\n  ];\n\n  return (\n    <DataGridComponent\n      rows={rows}\n      columns={columns}\n    />\n  );\n}\n```\n\n### MUI X Date Pickers\n\nDate Picker components are exported as a namespace:\n\n```typescript\nimport { DatePickers } from '@brionmario-experimental/oxygen-ui';\n\n// Destructure the components you need\nconst { \n  DatePicker, \n  LocalizationProvider, \n  DateTimePicker \n} = DatePickers;\n\nfunction MyDatePicker() {\n  const [value, setValue] = useState<Date | null>(null);\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDayjs}>\n      <DatePicker\n        label=\"Select Date\"\n        value={value}\n        onChange={(newValue) => setValue(newValue)}\n      />\n    </LocalizationProvider>\n  );\n}\n```\n\n### MUI X Charts\n\nChart components are exported as a namespace:\n\n```typescript\nimport { Charts } from '@brionmario-experimental/oxygen-ui';\n\n// Destructure the chart components you need\nconst { LineChart, BarChart, PieChart } = Charts;\n\nfunction MyChart() {\n  const data = [\n    { month: 'Jan', value: 30 },\n    { month: 'Feb', value: 45 },\n    { month: 'Mar', value: 60 },\n  ];\n\n  return (\n    <LineChart\n      xAxis={[{ dataKey: 'month', scaleType: 'band' }]}\n      series={[{ dataKey: 'value', label: 'Sales' }]}\n      width={500}\n      height={300}\n      dataset={data}\n    />\n  );\n}\n```\n\n### MUI X Tree View\n\nTree View components are exported as a namespace:\n\n```typescript\nimport { TreeView } from '@brionmario-experimental/oxygen-ui';\n\n// Destructure the tree components you need\nconst { SimpleTreeView, TreeItem } = TreeView;\n\nfunction MyTreeView() {\n  return (\n    <SimpleTreeView>\n      <TreeItem itemId=\"1\" label=\"Parent 1\">\n        <TreeItem itemId=\"2\" label=\"Child 1.1\" />\n        <TreeItem itemId=\"3\" label=\"Child 1.2\" />\n      </TreeItem>\n      <TreeItem itemId=\"4\" label=\"Parent 2\">\n        <TreeItem itemId=\"5\" label=\"Child 2.1\" />\n      </TreeItem>\n    </SimpleTreeView>\n  );\n}\n```\n\n## Available Exports\n\n### Custom Oxygen UI Components\n\n- `OxygenTheme` - Theme configuration\n- `OxygenUIThemeProvider` - Theme provider component\n- `ColorSchemeImage` - Image component that adapts to color scheme\n- `ColorSchemeToggle` - Toggle for light/dark mode\n- `Layout` - Layout components\n\n### Material-UI Components\n\nAll components from `@mui/material` are re-exported directly.\n\n### MUI X Components\n\n- `DataGrid` - Namespace containing all Data Grid components\n- `DatePickers` - Namespace containing all Date Picker components\n- `Charts` - Namespace containing all Chart components\n- `TreeView` - Namespace containing all TreeView components\n\n## TypeScript Support\n\nThis package includes full TypeScript definitions. All types from Material-UI and MUI X are also available:\n\n```typescript\nimport type { ButtonProps, BoxProps } from '@brionmario-experimental/oxygen-ui';\nimport { DataGrid } from '@brionmario-experimental/oxygen-ui';\n\nconst { GridColDef } = DataGrid;\ntype MyGridColDef = typeof GridColDef;\n```\n\n## License\n\nApache-2.0 © WSO2 LLC\n","readmeFilename":"README.md","_rev":"1-e46d841808986c27ffb07c067a2f2ebb"}