\r\n
\r\n Card Using Zoi Common Component\r\n \r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n\r\n## ZCardContent\r\n```jsx\r\nimport React from 'react';\r\nimport {ZCard , ZCardContent , ZTypography} from 'react-zoi-commom-components';\r\n\r\nclass ZCardContent extends React.Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n \r\n }\r\n
\r\n CardContent Using Zoi Common Component\r\n \r\n This Was ZCardContent Using The Zoi-Common-Component \r\n \r\n \r\n }\r\n}\r\n\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n\r\n\r\n## ZTabPanel \r\n\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZTab , ZTabList , ZBox , ZTabPanel} from 'react-zoi-common-components'\r\n\r\nexport default function ZTabPanel() {\r\n const [value, setValue] = React.useState('1');\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Item One\r\n Item Two\r\n Item Three\r\n \r\n \r\n );\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n\r\n\r\n## ZTabs\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZTab , ZTabs } from 'react-zoi-common-components'\r\n\r\nexport default function BasicTabs() {\r\n const [value, setValue] = React.useState(0);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use. -->\r\n\r\n\r\n## ZTabList \r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\nimport { ZTab , ZTabs , ZTabList , ZBox , ZTabContext} from 'react-zoi-common-components'\r\n\r\nexport default function ZTabList() {\r\n const [value, setValue] = React.useState(0);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use. -->\r\n\r\n\r\n## ToolBar \r\n```jsx\r\nimport {ZToolBar , ZAppBar} from 'react-zoi-common-components';\r\nimport { useState } from 'react';\r\n\r\nexport default function AppBarExample () {\r\n return (\r\n
\r\n
\r\n \r\n \r\n icon\r\n \r\n \r\n
\r\n
\r\n );\r\n}\r\n```\r\n`Property`\r\nName|\tType|\tDefault|\tDescription\r\n--- | --- | --- | ---\r\n`children`|\tnode||The content of the component.\r\n`classes`|\tobject\t||Override or extend the styles applied to the component. See CSS API below for more details.\r\n`color`|\t'default', 'inherit', 'primary', 'secondary', 'transparent', string|\t'primary'\t|The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.enableColorOnDark\tbool\tfalse\t.If true, the color prop is applied in dark mode.\r\n`position`|\t'absolute', 'fixed', 'relative'| 'static', 'sticky'|\t'fixed'\t|The positioning type. The behavior of the different options is described in the MDN web docs. Note: sticky is not universally supported and will fall back to static when unavailable.\r\n`sx`\t|Array
, func, object\t||The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n\r\n\r\n## ToolTip\r\n```jsx\r\nimport React from 'react';\r\nimport {ZToolTip , ZButton} from 'react-zoi-common-components';\r\nexport default function ZToolTip()\r\n{\r\n return(\r\n \r\n \r\n Submit\r\n \r\n
\r\n );\r\n}\r\n\r\n```\r\n`Property`\r\n\r\nName|\tType|\tDefault|\tDescription\r\n--- | --- | --- | ---\r\n`children`|\tnode||The content of the component.\r\n`classes`|\tobject\t||Override or extend the styles applied to the component. See CSS API below for more details.\r\n`color`|\t'default', 'inherit', 'primary', 'secondary', 'transparent', string|\t'primary'\t|The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.enableColorOnDark\tbool\tfalse\t.If true, the color prop is applied in dark mode.\r\n`position`|\t'absolute', 'fixed', 'relative'| 'static', 'sticky'|\t'fixed'\t|The positioning type. The behavior of the different options is described in the MDN web docs. Note: sticky is not universally supported and will fall back to static when unavailable.\r\n`sx`\t|Array , func, object\t||The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n\r\n\r\n\r\n\r\n## ZDialog\r\n\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZDialog , ZDialogContent , ZDialogActions , ZDialogTitle , ZButton } from 'react-zoi-common-components'\r\nexport default function ZDialog() {\r\n const [open, setOpen] = React.useState(false);\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n return (\r\n \r\n \r\n Open alert dialog\r\n \r\n \r\n \r\n {\"Use Google's location service?\"}\r\n \r\n\r\n \r\n\r\n \r\n We made you to easy interact with the react through this \"Zoi Common Component\"\r\n \r\n\r\n \r\n\r\n \r\n Disagree\r\n \r\n Agree\r\n \r\n \r\n\r\n \r\n
\r\n );\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n## ZAutoComplete \r\n```jsx\r\n\r\nimport React from 'react';\r\nimport { ZAutocomplete } from 'react-zoi-common-components';\r\n\r\nexport default function ComboBox() {\r\n return (\r\n }\r\n />\r\n );\r\n }\r\n const top100Films = [\r\n { label: 'The Shawshank Redemption', year: 1994 },\r\n { label: 'The Godfather', year: 1972 },\r\n { label: 'The Godfather: Part II', year: 1974 },\r\n { label: 'The Dark Knight', year: 2008 },\r\n { label: '12 Angry Men', year: 1957 },\r\n { label: \"Schindler's List\", year: 1993 },\r\n { label: 'Pulp Fiction', year: 1994 },\r\n {\r\n label: 'The Lord of the Rings: The Return of the King',\r\n year: 2003,\r\n },\r\n { label: 'The Good, the Bad and the Ugly', year: 1966 },\r\n { label: 'Fight Club', year: 1999 },\r\n {\r\n label: 'The Lord of the Rings: The Fellowship of the Ring',\r\n year: 2001,\r\n },\r\n]; \r\n\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n## ZAvator \r\n```jsx\r\nimport * as React from 'react';\r\nimport {ZAvatar} from 'react-zoi-common-components';\r\n\r\nexport default function ZAvator() {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n\r\n## ZDropZone\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport {ZBox , ZDropZone} from 'react-zoi-commmon-components';\r\n\r\nconst MyComponent = () => {\r\n const handleDrop = (files) => {\r\n console.log('Files dropped:', files);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n## ZTable\r\n```jsx\r\n\r\nimport React from 'react';\r\nimport { Table, TableBody, TableCell, TableHead, TableRow , TableContainer , TableFooter} from 'react-zoi-common-components';\r\n\r\nconst rows = [\r\n { id: 1, name: 'John', age: 25 },\r\n { id: 2, name: 'Jane', age: 30 },\r\n { id: 3, name: 'Bob', age: 40 },\r\n];\r\n\r\nexport default function ZTable() {\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n ID\r\n Name\r\n Age\r\n \r\n \r\n \r\n {rows.map((row) => (\r\n \r\n {row.id}\r\n {row.name}\r\n {row.age}\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n );\r\n}\r\n\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n\r\n## TextField\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZTextField } from 'react-zoi-common-components'\r\n\r\nclass TextField extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n name:\"\"\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n this.setState({name:e.target.value})}\r\n isLoading={false}\r\n variant=\"filled\"\r\n size=\"small\"\r\n />\r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`value` | String | | Value represented by this `Input` if it is controlled. \r\n`isLoading` | bool | | If `true`, Skeleton component load. \r\n`defaultValue` | String | | Default value represented by this `Input` if it is uncontrolled.\r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`error` | bool |false | If `true`, the label is displayed in an error state.\r\n`helperText` | String | | If `true`, The error text content.\r\n`InputProps` | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.\r\n`variant` | 'filled'| 'outlined'| 'standard' | outlined| If `true`, The variant to use.\r\n\r\n\r\n\r\n\r\n## Button\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZButton } from 'react-zoi-common-components'\r\n\r\nclass Button extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`name` | String | | Display the button name. \r\n`isLoading` | bool |false | If `true`, circular progress load. \r\n`disabled` | bool | false| If `true`, the component is disabled.\r\n`endIcon` | node | | Element placed after the children.\r\n`startIcon` | node | | Element placed before the children.\r\n`color` | 'inherit' 'primary' 'secondary' 'success' 'error' 'info' 'warning' string | primary| Element placed before the children.\r\n`variant` | 'contained' 'outlined''text' string | text| The variant to use..\r\n\r\n\r\n\r\n## Typography\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZTypography } from 'react-zoi-common-components'\r\n\r\nclass Typography extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n Hello\r\n h1. Heading \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`align` | 'center' 'inherit' 'justify' 'left' 'right' |inherit |Set the text-align on the component.. \r\n`isLoading` | bool |false | If `true`, circular progress load. \r\n`noWrap` | bool | false| If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.\r\n\r\n\r\n## Common Dialog\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZCommonDialog } from 'react-zoi-common-components'\r\n\r\nexport default class ZCommonDialogs extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n isShowModel:true\r\n }\r\n }\r\n cancelButton = () => {\r\n alert(\"cancel\")\r\n\r\n this.setState({\r\n isShowModel:false\r\n })\r\n }\r\n\r\n okButton = () => {\r\n alert(\"ok\")\r\n }\r\n render() {\r\n return (\r\n \r\n this.setState({isShowModel:false})} head=\"Delete\" actionButton={[{ name: 'No', action: this.cancelButton, variant: \"outlined\", color: \"primary\" }, { name: 'Yes', action: this.okButton, variant: \"contained\", color: \"primary\" }]}>\r\n This is common dialog
\r\n \r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`open` | bool |false |\tIf true, the component is shown. \r\n`children` | node | |Dialog children, usually the included sub-components. \r\n`close` | func | | this is close button functionality,\r\n`actionButton` | array | | pass button property and action button details like array,\r\n\r\n\r\n## FormControlLabel\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZFormControlLabel ,ZRadio } from 'react-zoi-common-components'\r\n\r\nclass FormControlLabel extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n } />\r\n } disabled />\r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`control` | element | | A control element. For instance, it can be a Radio, a Switch or a Checkbox.\r\n`checked` | bool | | If `true`, the component appears selected.\r\n`classes` | object | | Override or extend the styles applied to the component.\r\n`componentsProps` | { typography?: object } | {} | The props used for each slot inside.\r\n`disabled` | bool | | If `true`, the control is disabled.\r\n`disableTypography` | bool | | If `true`, the label is rendered as it is passed without an additional typography node.\r\n`inputRef` | ref | | Pass a ref to the `input` element.\r\n`label` | node | | A text or an element to be used in an enclosing label element.\r\n`labelPlacement` | 'bottom','end','start','top' | 'end' | The position of the label.\r\n`onChange` | func | | Callback fired when the state is changed. Signature:function(event: React.SyntheticEvent) => void. event: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).\r\n`slotProps` | { typography?: object } | {} | The props used for each slot inside.\r\n`sx` | Array, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.\r\n`value` | any | | The value of the component.\r\n\r\n## CircularProgress \r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZCircularProgress } from 'react-zoi-common-components'\r\n\r\nclass CircularProgress extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`classes` | object | | Override or extend the styles applied to the component.\r\n`color` | 'inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning', string | 'primary' | The color of the component. It supports both default and custom theme colors.\r\n`disableShrink` | bool | false | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`\r\n`size` | number, string | 40 | The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'.\r\n`sx` | \tArray, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.\r\n`thickness` | number | 3.6 | The thickness of the circle.\r\n`value` | number | 0 | The value of the progress indicator for the determinate variant. Value between 0 and 100.\r\n`variant` | 'determinate', 'indeterminate' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value.\r\n\r\n\r\n## BOX \r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZBox } from 'react-zoi-common-components'\r\n\r\nclass Box extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`component`| elementType| |The component used for the root node. Either a string to use a HTML element or a component.\r\n`sx` | \tArray, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.\r\n\r\n## Grid\r\n\r\n```jsx\r\nimport {\r\n ZGrid\r\n} from 'react-zoi-common-components'\r\nfunction GridExample() {\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n Control 1\r\n
\r\n \r\n \r\n \r\n Control 2\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n handleSearch(value.target.value)}\r\n />\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n Close\r\n \r\n }>error alert\r\n warning alert \r\n info alert \r\n success alert \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nName |\tType |\tDefault |\tDescription\r\n--- | --- | --- | ---\r\n`anchorOrigin`|{ horizontal: 'left','right', vertical: 'bottom', 'top' }|{ vertical: 'top', horizontal: 'right', }|The anchor of the badge.\r\n`badgeContent`|node| |The content rendered within the badge.\r\n`children`|node\t| |The badge will be added relative to this node.\r\n`classes`|object| |Override or extend the styles applied to the component. \r\n`color`|'default', 'primary','secondary','error','info','success','warning',string|'default'|The color of the component. It supports both default and custom theme colors\r\n`component`| elementType| |The component used for the root node. Either a string to use a HTML element or a component.\r\n`components`|\t{ Badge?: elementType, Root?: elementType }|{}|The components used for each slot inside.This prop is an alias for the slots prop. It's recommended to use the slots prop instead.\r\n`componentsProps`|{ badge?: func,object, root?: func, object }|{}|The extra props for the slot components.You can override the existing props or add new ones.This prop is an alias for the slotProps prop. It's recommended to use the slotProps prop instead, as componentsProps will be deprecated in the future.\r\n`invisible`|bool|false|\tIf true, the badge is invisible.\r\n`max`|number|\t99|Max count to show.\r\n`overlap`|'circular','rectangular'|'rectangular'|Wrapped shape the badge should overlap.\r\n`showZero`|bool|false|Controls whether the badge is hidden when badgeContent is zero.\r\n`slotProps`|{ badge?: func,object, root?: func,object }|{}|\tThe props used for each slot inside the Badge.\r\n`slots`|\t{ badge?: elementType, root?: elementType }|{}|\tThe components used for each slot inside the Badge. Either a string to use a HTML element or a component.\r\n`sx`|\tArray
, func, object||The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n`variant`|\t'dot', 'standard', 'string'|\t'standard'\t|The variant to use.\r\n\r\n## Collapse \r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZCollapse, ZCardContent, ZContainer } from 'react-zoi-common-components'\r\n\r\nclass Collapse extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state={\r\n open:false\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n Hello React\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nName |\tType |\tDefault |\tDescription\r\n--- | --- | --- | ---\r\n`addEndListener`| func | | Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.\r\n`children`|node| | The content node to be collapsed.\r\n`classes`| object | | Override or extend the styles applied to the component.\r\n`collapsedSize`| number, string | '0px' | The width (horizontal) or height (vertical) of the container when collapsed.\r\n`component`| element type | | The component used for the root node. Either a string to use a HTML element or a component.\r\n`easing`| \t{ enter?: string, exit?: string }, string | | The transition timing function. You may specify a single easing or a object containing enter and exit values.\r\n`in`| bool | | If `true`, the component will transition in.\r\n`orientation`| 'horizontal', 'vertical' | 'vertical' | The transition orientation.\r\n`sx`| Array
, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.\r\n`timeout\t`| \t'auto', number, { appear?: number, enter?: number, exit?: number } | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. Set to 'auto' to automatically calculate transition time based on height.\r\n\r\n## Dialog \r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZDialog , ZDialogTitle, ZTypography, ZDialogContent, ZDialogActions, ZButton } from 'react-zoi-common-components'\r\n\r\nclass Dialog extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state={\r\n open:true\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n {\" \"}\r\n Lorem ipsum dolor sit amet consectetuer\r\n \r\n \r\n \r\n Are you sure you want to delete this user?\r\n \r\n \r\n You can't undo this operation\r\n \r\n \r\n \r\n No\r\n \r\n Yes\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nName |\tType |\tDefault |\tDescription\r\n--- | --- | --- | ---\r\n`open*`| bool | | If `true`, the component is shown.\r\n`aria-describedby`| string | | The id(s) of the element(s) that describe the dialog.\r\n`aria-labelledby`| string | | The id(s) of the element(s) that label the dialog.\r\n`BackdropComponent`| elementType | styled(Backdrop, { name: 'MuiModal', slot: 'Backdrop', verridesResolver: (props, styles) => { return styles.backdrop; }, })({ zIndex: -1, }) | A backdrop component. This prop enables custom backdrop rendering.\r\n`children`| node | | Dialog children, usually the included sub-components.\r\n`classes`| object | | Override or extend the styles applied to the component.\r\n`disableEscapeKeyDown`| bool | false | If `true`, hitting escape will not fire the `onClose` callback.\r\n`fullScreen`| bool | false | If `true`, the dialog is full-screen.\r\n`fullWidth`| bool | false | If `true`, the dialog stretches to `maxWidth`. Notice that the dialog width grow is limited by the default margin.\r\n`maxWidth`| 'xs', 'sm', 'md', 'lg', 'xl', false, string | 'sm' | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`.\r\n`onBackdropClick\t`| func | | Callback fired when the backdrop is clicked.\r\n`onClose`| func | | Callback fired when the component requests to be closed. Signature:`function(event: object, reason: string) => void`, event: The event source of the callback. reason: Can be: \"escapeKeyDown\", \"backdropClick\".\r\n`PaperComponent`| elementType | Paper | The component used to render the body of the dialog.\r\n`PaperProps`| object | {} | Props applied to the Paper element.\r\n`scroll`| 'body', 'paper' | 'paper' | Determine the container for scrolling the dialog.\r\n`sx`| Array
, func, objectThe system prop that allows defining system overrides as well as additional CSS styles.\r\n`TransitionComponent`| elementType | Fade | The component used for the transition.\r\n`transitionDuration`| number, { appear?: number, enter?: number, exit?: number } | { enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, } |The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.\r\n`TransitionProps`| object | | Props applied to the transition element. By default, the element is based on this Transition component.\r\n\r\n\r\n## Header\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\nimport { ZHeader } from 'react-zoi-common-components'\r\n\r\nclass Header extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n name:\"\"\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`title` | String | | To give `title` to the Header. \r\n`className` | bool | | To give custom Class to the header. \r\n`style` | String | | Particular `style` to the header.\r\n\r\n\r\n\r\n## Icon\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\nimport { ZIcon } from 'react-zoi-common-components'\r\n\r\nclass Header extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n name:\"\"\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n \r\n add_circle\r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`baseClassName` | string | 'material-icons' | The base class applied to the icon. Defaults to 'material-icons', but can be changed to any other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc). \r\n`children` | node | | The name of the icon font ligature. \r\n`classes` | String | | Override or extend the styles applied to the component. See CSS API below for more details.\r\n`color` | \t'inherit'\r\n| 'action'\r\n| 'disabled'\r\n| 'primary'\r\n| 'secondary'\r\n| 'error'\r\n| 'info'\r\n| 'success'\r\n| 'warning'\r\n| string | 'inherit' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.\r\n`component` | elementType | | The component used for the root node. Either a string to use a HTML element or a component.\r\n`fontSize` | \t'inherit'\r\n| 'large'\r\n| 'medium'\r\n| 'small'\r\n| string | 'medium' | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.\r\n`sx` | \tArray\r\n| func\r\n| object | | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n\r\n\r\n## IconButton\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\nimport { ZIconButton } from 'react-zoi-common-components'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';\r\n\r\nclass Header extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n name:\"\"\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`children` | \tnode | \tThe icon to display. \r\n`classes` | object | | Override or extend the styles applied to the component. See CSS API below for more details.\r\n`color` | \t'inherit'\r\n| 'action'\r\n| 'disabled'\r\n| 'primary'\r\n| 'secondary'\r\n| 'error'\r\n| 'info'\r\n| 'success'\r\n| 'warning'\r\n| string | 'inherit' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.\r\n`disabled` | bool | false | If true, the component is disabled.\r\n`disableFocusRipple` | string | false | If true, the keyboard focus ripple is disabled.\r\n`disableRipple` | bool | false | If true, the ripple effect is disabled.\r\n⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.\r\n`edge` | \t'end'\r\n| 'start'\r\n| false | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).\r\n`size` | \t'small'\r\n| 'medium'\r\n| 'large'\r\n| string | 'medium' | The size of the component. small is equivalent to the dense button styling.\r\n`sx` | \tArray\r\n| func\r\n| object | false | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n\r\n\r\n## No Data\r\n\r\n ```jsx\r\n import React, { Component } from 'react'\r\n import { ZNoData } from 'zoi-node-modules' \r\n\r\n class NoData extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n nodata:\"\"\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n }\r\n ```\r\n `Property`\r\n\r\n Prop Name | Type | Default | Decription\r\n --- | --- | --- | ---\r\n `name` | string | | The name of the nodata.\r\n `value` | any | | The message. when data is not available\r\n\r\n## Paper\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZPaper } from 'zoi-node-modules'\r\n\r\nclass Paper extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n\r\n }\r\n }\r\n render(){\r\n return(\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`elevation` | integer | 1 | Shadow depth, It accepts values between 0 and 24 inclusive.\r\n`variant` | 'elevation' 'outlined' 'string' | elevation | The variant to use.\r\n`square` | bool | false | If true, rounded corners are disabled.\r\n \r\n\r\n## Popover\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\nimport { ZPopover } from 'zoi-node-modules' \r\n\r\nclass Popover extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n anchorE1: event.currentTarget \r\n }\r\n }\r\n \r\n render(){\r\n const open = Boolean(anchorE1);\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`open` | bool | | If true, The component is shown.\r\n`anchorE1` | 'HTML element' 'func' | | An HTML element or a function that returns one.It's used to set the position of the popover.\r\n`anchorOrigin` | { horizontal: 'center' 'left' 'right' 'number', vertical: 'bottom' 'center' 'top' 'number'} | { vertical: 'top', horizontal: 'left'} | This is the point on the anchor where the popover's anchorE1 will attach to.\r\n`transformOrigin` | { horizontal: 'center' 'left' 'right' 'number', vertical: 'bottom' 'center' 'top' 'number'} | { vertical: 'top', horizontal: 'left'} | This is the point on the popover which will attach to the anchor's origin.\r\n`onClose` | func | | Callback fired when the component requests to be closed.\r\n\r\n## Radio Group\r\n\r\n```jsx\r\nimport React, { Component } from 'react'\r\nimport { ZRadioGroup } from 'zoi-node-modules' \r\n\r\nclass RadioGroup extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n value:\"\"\r\n }\r\n }\r\n render() {\r\n return (\r\n \r\n \r\n } />\r\n } />\r\n \r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nProp Name | Type | Default | Description\r\n--- | --- | --- | ---\r\n`name` | string | | The name used to reference the value of the control.\r\n`defaultValue` | any | | The default value. Use when the component is not controlled.\r\n`value` | any | | Value of the selected radio button.\r\n\r\n\r\n## Radio \r\n\r\n ```jsx\r\n import React, { Component } from 'react'\r\n import { ZRadioGroup } from 'zoi-node-modules' \r\n\r\n class Radio extends Component{\r\n constructor(props){\r\n super(props)\r\n this.state = {\r\n name:\"\"\r\n disable:false\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n this.setState({name:e.target.value})}\r\n id=\"use-radio-button\"\r\n value=\"a\"\r\n name=\"radio-buttons\"\r\n size=\"small\"\r\n color=\"default\"\r\n inputProps={{ 'aria-label': 'A' }}\r\n disabled={this.state.disable}\r\n />\r\n
\r\n )\r\n }\r\n }\r\n ```\r\n `Property`\r\n\r\n Prop Name | Type | Default | Description\r\n --- | --- | --- | ---\r\n`checked` | bool | | If true, The component is checked.\r\n`onChange` | func | | Callback fired when the state is changed.\r\n`id` | string | | The id of the input element.\r\n`value` | any | | The value of the component.\r\n`name` | string | | Name attribute of the input element.\r\n`size` | 'medium' 'small' string | medium | The size of the component.\r\n`color` | 'default' 'primary' 'secondary' 'error' 'info' 'success' 'warning' string | primary | The color of the component.\r\n`inputProps` | object | | Attributes applied to the input element.\r\n`disabled` | bool | | If true, The component is disabled.\r\n\r\n## Chip\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZChip } from 'react-zoi-common-components'\r\n\r\nclass Chip extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
}\r\n variant=\"outlined\"\r\n />\r\n
\r\n \r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nName |\tType |\tDefault |\tDescription\r\n--- | --- | --- | ---\r\n`avatar\t`|element| |\tThe Avatar element to display.\r\n`classes`|object| |Override or extend the styles applied to the component. \r\n`clickable`|bool| |If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.\r\n`color`|'default', 'primary','secondary','error','info','success','warning',string|'default'|The color of the component. It supports both default and custom theme colors\r\n`component`|elementType| |The component used for the root node. Either a string to use a HTML element or a component.en the component is unchecked.\r\n`deleteIcon`|element| |\tIf true, the component is disabled.\r\n`icon`|element| |\tIcon element.\r\n`label`|node| |The content of the component.\r\n`onDelete`|func| |Callback fired when the delete icon is clicked. If set, the delete icon will be shown.\r\n`size`|\t'medium','small',string|'medium'|\tThe size of the component. small is equivalent to the dense checkbox styling.\r\n`sx`|\tArray
, func, object||The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n`variant`|'filled','outlined',string| filled|The variant to use.\r\n\r\n## CheckBox\r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZCheckBox } from 'react-zoi-common-components'\r\n\r\nclass CheckBox extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n )\r\n }\r\n}\r\n```\r\n`Property`\r\n\r\nName |\tType |\tDefault |\tDescription\r\n--- | --- | --- | ---\r\n`checked`|bool| |\tIf true, the component is checked.\r\n`checkedIcon`|node|\t
|The icon to display when the component is checked.\r\n`classes`|object| |Override or extend the styles applied to the component. \r\n`color`|'default', 'primary','secondary','error','info','success','warning',string|'default'|The color of the component. It supports both default and custom theme colors\r\n`defaultChecked`| bool| |\tThe default checked state. Use when the component is not controlled.\r\n`disabled`|bool|false|If true, the component is disabled.\r\n`icon`|node|\t
|The icon to display when the component is unchecked.\r\n`id`|string| |\tThe id of the input element.\r\n`inputProps`|object| |\tAttributes applied to the input element.\r\n`inputRef`|ref| |Pass a ref to the input element.\r\n`onChange`|func| |\tCallback fired when the state is changed.Signature:function(event: React.ChangeEvent
) => void event: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).\r\n`required`|bool|false|If true, the input element is required.\r\n`size`|\t'medium','small',string|'medium'|\tThe size of the component. small is equivalent to the dense checkbox styling.\r\n`sx`|\tArray, func, object||The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.\r\n`value`|any| |The value of the component. The DOM API casts this to a string. The browser uses \"on\" as the default value.\r\n\r\n## Skeleton \r\n```jsx\r\nimport React, { Component } from 'react'\r\n\r\nimport { ZSkeleton } from 'react-zoi-common-components'\r\n\r\nclass Skeleton extends Component {\r\n constructor(props) {\r\n super(props)\r\n \r\n }\r\n render() {\r\n return (\r\n \r\n