[![NPM version][npm-img]][npm-url]
[![License][license-img]][license-url]
[![Dependency status][david-img]][david-url]

$3

* Try haoxins/react-mdc

$3

React Components for google/material-design-lite v1

$3

* DateTimePicker

- Props
* See chmln/flatpickr
- Example
``jsx onChange={v => console.info(v)} />`

* Badge-Props* className: string * background: bool * overlap: bool * href: string

- Example`jsx hello`

* Button-Props* className: string * floating: bool * colored: bool * primary: bool * ripple: bool * raised: bool * accent: bool * icon: bool * mini: bool

- Example`jsx`

* Checkbox-Props* className: string * label: string * ripple: bool * id: string

- Example`jsx`

* Progress-Props* indeterminate: bool, * className: string, * progress: number, * buffer: number,

- Example`jsx`

* Radio-Props* className: string, * label: string, * name: string, * ripple: bool, * id: string

- Example`jsx`

* Slider-Props* className: string

- Example`jsx`

* Spinner-Props* singleColor: bool * className: string * active: bool

- Example`jsx`

* Switch-Props* className: string * label: string * ripple: bool * id: string

- Example`jsx`

* Tag-Props* onClose: func, * color: string, * name: string,

- Example`jsx onClose={() => console.info('close tag')} />`

* TextField-Props* className: string, * expandable: bool, * floating: bool, * pattern: string, * label: string, * error: string

- Example`jsx`

* Textarea-Props* className: string * label: string * id: string

- Example`jsx <br /> <Textarea rows='4' cols='50' label='hello, textarea' /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Tooltip<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * htmlFor: string<br /> * large: bool</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Tooltip htmlFor='tip'}>tooltip!!!</Tooltip><br /> <div id='tip'>hello world</div><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * direction: string<br /> * icon: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Menu direction='right-bottom'><br /> <MenuItem>one</MenuItem><br /> <MenuItem>two</MenuItem><br /> <MenuItem><br /> <a href='#'>hello</a><br /> </MenuItem><br /> </Menu></p><p class="my-3"> <Menu direction='top-right' icon='toc'><br /> <MenuItem>one</MenuItem><br /> <MenuItem>two</MenuItem><br /> <MenuItem><br /> <a href='#'>hello</a><br /> </MenuItem><br /> </Menu><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Tabs<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * defaultActiveKey: string<br /> * onTabClick: func</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Tabs><br /> <TabPane key='1' tab='one'><br /> hello<br /> </TabPane><br /> <TabPane key='2' tab='two'><br /> world<br /> </TabPane><br /> <TabPane key='3' tab='three'><br /> go go go<br /> </TabPane><br /> </Tabs><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Table<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * dataSource: array.isRequired,<br /> * columns: array.isRequired,<br /> * className: string,<br /> * selectable: bool</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * basic</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> const dataSource = [{<br /> name: 'haoxin',<br /> age: 18,<br /> address: 'Shanghai'<br /> }, {<br /> name: 'luqiang',<br /> age: 22,<br /> address: 'Hangzhou'<br /> }]</p><p class="my-3"> const columns = [{<br /> title: 'name',<br /> dataIndex: 'name',<br /> }, {<br /> title: 'age',<br /> dataIndex: 'age',<br /> }, {<br /> title: 'address',<br /> dataIndex: 'address',<br /> key: 'address'<br /> }]</p><p class="my-3"> <Table dataSource={dataSource} columns={columns} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"> * custom </code>render<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> const dataSource = [{<br /> name: 'haoxin',<br /> age: 18,<br /> address: 'Shanghai'<br /> }, {<br /> name: 'luqiang',<br /> age: 22,<br /> address: 'Hangzhou'<br /> }]</p><p class="my-3"> const columns = [{<br /> title: 'name',<br /> dataIndex: 'name',<br /> render: name => <a href='#'>{name}</a><br /> }, {<br /> title: 'age',<br /> dataIndex: 'age'<br /> }, {<br /> title: 'address',<br /> dataIndex: 'address',<br /> render(address, record) {<br /> return (<br /> <strong>{address + '. ' + record.name}</strong><br /> )<br /> }<br /> }]</p><p class="my-3"> <Table dataSource={dataSource} columns={columns} /><br /> </code>``</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />MIT</p><p class="my-3">[npm-img]: https://img.shields.io/npm/v/react.mdl.svg?style=flat-square<br />[npm-url]: https://npmjs.org/package/react.mdl<br />[travis-img]: https://img.shields.io/travis/coderhaoxin/react.mdl.svg?style=flat-square<br />[travis-url]: https://travis-ci.org/coderhaoxin/react.mdl<br />[codecov-img]: https://img.shields.io/codecov/c/github/coderhaoxin/react.mdl.svg?style=flat-square<br />[codecov-url]: https://codecov.io/github/coderhaoxin/react.mdl?branch=master<br />[license-img]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square<br />[license-url]: http://opensource.org/licenses/MIT<br />[david-img]: https://img.shields.io/david/coderhaoxin/react.mdl.svg?style=flat-square<br />[david-url]: https://david-dm.org/coderhaoxin/react.mdl<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"react.mdl\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"react.mdl\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"react.mdl - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"react material design lite\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>react.mdl - npm explorer</title><meta name="description" content="react material design lite"/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"react.mdl\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"2.0.3\"]}],\"$undefined\",\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"react material design lite\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"material\",{\"href\":\"/search?q=material\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"material\"}]}],[\"$\",\"$L5\",\"design\",{\"href\":\"/search?q=design\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"design\"}]}],[\"$\",\"$L5\",\"react\",{\"href\":\"/search?q=react\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"react\"}]}],[\"$\",\"$L5\",\"lite\",{\"href\":\"/search?q=lite\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"lite\"}]}],\"$L18\"]}],\"$L19\",\"$L1a\"]}],\"$L1b\"]}],\"$L1c\"]}]\n"])</script><script>self.__next_f.push([1,"1d:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1e:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n22:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"mdl\",{\"href\":\"/search?q=mdl\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"mdl\"}]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"0\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"3 years ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"MIT\"]}],\"$undefined\"]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~haoxin\",\"className\":\"font-medium hover:underline\",\"children\":\"haoxin\"}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1d\",null,{\"packageName\":\"react.mdl\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/coderhaoxin/react.mdl\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],\"Repository\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],[\"$\",\"a\",null,{\"href\":\"https://github.com/coderhaoxin/react.mdl#readme\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/react.mdl\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"23:T166d,"])</script><script>self.__next_f.push([1,"\n[![NPM version][npm-img]][npm-url]\n[![License][license-img]][license-url]\n[![Dependency status][david-img]][david-url]\n\n### Deprecated !\n\n* Try [haoxins/react-mdc](https://github.com/haoxins/react-mdc)\n\n### react.mdl\n\nReact Components for [google/material-design-lite v1](https://github.com/google/material-design-lite)\n\n### Components\n\n* `DateTimePicker`\n\n - `Props`\n * See [chmln/flatpickr](https://github.com/chmln/flatpickr)\n - `Example`\n ```jsx\n \u003cDateTimePicker id='datepicker' data-enabletime={true}\n onChange={v =\u003e console.info(v)} /\u003e\n ```\n\n* `Badge`\n - `Props`\n * className: string\n * background: bool\n * overlap: bool\n * href: string\n\n - `Example`\n ```jsx\n \u003cBadge data-badge='go'\u003ehello\u003c/Badge\u003e\n ```\n\n* `Button`\n - `Props`\n * className: string\n * floating: bool\n * colored: bool\n * primary: bool\n * ripple: bool\n * raised: bool\n * accent: bool\n * icon: bool\n * mini: bool\n\n - `Example`\n ```jsx\n \u003cButton\u003ebutton\u003c/Button\u003e\n \u003cButton floating={true} primary={true}\u003efloating\u003c/Button\u003e\n ```\n\n* `Checkbox`\n - `Props`\n * className: string\n * label: string\n * ripple: bool\n * id: string\n\n - `Example`\n ```jsx\n \u003cCheckbox label='hello world' /\u003e\n ```\n\n* `Progress`\n - `Props`\n * indeterminate: bool,\n * className: string,\n * progress: number,\n * buffer: number,\n\n - `Example`\n ```jsx\n \u003cProgress progress={progress} buffer={buffer} /\u003e\n \u003cProgress indeterminate={true} /\u003e\n ```\n\n* `Radio`\n - `Props`\n * className: string,\n * label: string,\n * name: string,\n * ripple: bool,\n * id: string\n\n - `Example`\n ```jsx\n \u003cRadio label='hello world' /\u003e\n ```\n\n* `Slider`\n - `Props`\n * className: string\n\n - `Example`\n ```jsx\n \u003cSlider min='1' max='10' /\u003e\n ```\n\n* `Spinner`\n - `Props`\n * singleColor: bool\n * className: string\n * active: bool\n\n - `Example`\n ```jsx\n \u003cSpinner active={true} /\u003e\n ```\n\n* `Switch`\n - `Props`\n * className: string\n * label: string\n * ripple: bool\n * id: string\n\n - `Example`\n ```jsx\n \u003cSwitch label='hello world' /\u003e\n ```\n\n* `Tag`\n - `Props`\n * onClose: func,\n * color: string,\n * name: string,\n\n - `Example`\n ```jsx\n \u003cTag name='hello' color='red'\n onClose={() =\u003e console.info('close tag')} /\u003e\n ```\n\n* `TextField`\n - `Props`\n * className: string,\n * expandable: bool,\n * floating: bool,\n * pattern: string,\n * label: string,\n * error: string\n\n - `Example`\n ```jsx\n \u003cTextField /\u003e\n \u003cTextField label='hello input' floating={true} /\u003e\n \u003cTextField pattern='-?[0-9]*(\\.[0-9]+)?' label='number' error='u sb' floating={true} /\u003e\n \u003cTextField pattern='-?[0-9]*(\\.[0-9]+)?' label='number' error='u sb' expandable={true} /\u003e\n ```\n\n* `Textarea`\n - `Props`\n * className: string\n * label: string\n * id: string\n\n - `Example`\n ```jsx\n \u003cTextarea rows='4' cols='50' /\u003e\n \u003cTextarea rows='4' cols='50' label='hello, textarea' /\u003e\n ```\n\n* `Tooltip`\n - `Props`\n * className: string\n * htmlFor: string\n * large: bool\n\n - `Example`\n ```jsx\n \u003cTooltip htmlFor='tip'}\u003etooltip!!!\u003c/Tooltip\u003e\n \u003cdiv id='tip'\u003ehello world\u003c/div\u003e\n ```\n\n* `Menu`\n - `Props`\n * direction: string\n * icon: string\n\n - `Example`\n ```jsx\n \u003cMenu direction='right-bottom'\u003e\n \u003cMenuItem\u003eone\u003c/MenuItem\u003e\n \u003cMenuItem\u003etwo\u003c/MenuItem\u003e\n \u003cMenuItem\u003e\n \u003ca href='#'\u003ehello\u003c/a\u003e\n \u003c/MenuItem\u003e\n \u003c/Menu\u003e\n\n \u003cMenu direction='top-right' icon='toc'\u003e\n \u003cMenuItem\u003eone\u003c/MenuItem\u003e\n \u003cMenuItem\u003etwo\u003c/MenuItem\u003e\n \u003cMenuItem\u003e\n \u003ca href='#'\u003ehello\u003c/a\u003e\n \u003c/MenuItem\u003e\n \u003c/Menu\u003e\n ```\n\n* `Tabs`\n - `Props`\n * defaultActiveKey: string\n * onTabClick: func\n\n - `Example`\n ```jsx\n \u003cTabs\u003e\n \u003cTabPane key='1' tab='one'\u003e\n hello\n \u003c/TabPane\u003e\n \u003cTabPane key='2' tab='two'\u003e\n world\n \u003c/TabPane\u003e\n \u003cTabPane key='3' tab='three'\u003e\n go go go\n \u003c/TabPane\u003e\n \u003c/Tabs\u003e\n ```\n\n* `Table`\n - `Props`\n * dataSource: array.isRequired,\n * columns: array.isRequired,\n * className: string,\n * selectable: bool\n\n - `Example`\n * basic\n\n ```jsx\n const dataSource = [{\n name: 'haoxin',\n age: 18,\n address: 'Shanghai'\n }, {\n name: 'luqiang',\n age: 22,\n address: 'Hangzhou'\n }]\n\n const columns = [{\n title: 'name',\n dataIndex: 'name',\n }, {\n title: 'age',\n dataIndex: 'age',\n }, {\n title: 'address',\n dataIndex: 'address',\n key: 'address'\n }]\n\n \u003cTable dataSource={dataSource} columns={columns} /\u003e\n ```\n\n * custom `render`\n ```jsx\n const dataSource = [{\n name: 'haoxin',\n age: 18,\n address: 'Shanghai'\n }, {\n name: 'luqiang',\n age: 22,\n address: 'Hangzhou'\n }]\n\n const columns = [{\n title: 'name',\n dataIndex: 'name',\n render: name =\u003e \u003ca href='#'\u003e{name}\u003c/a\u003e\n }, {\n title: 'age',\n dataIndex: 'age'\n }, {\n title: 'address',\n dataIndex: 'address',\n render(address, record) {\n return (\n \u003cstrong\u003e{address + '. ' + record.name}\u003c/strong\u003e\n )\n }\n }]\n\n \u003cTable dataSource={dataSource} columns={columns} /\u003e\n ```\n\n### License\nMIT\n\n[npm-img]: https://img.shields.io/npm/v/react.mdl.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/react.mdl\n[travis-img]: https://img.shields.io/travis/coderhaoxin/react.mdl.svg?style=flat-square\n[travis-url]: https://travis-ci.org/coderhaoxin/react.mdl\n[codecov-img]: https://img.shields.io/codecov/c/github/coderhaoxin/react.mdl.svg?style=flat-square\n[codecov-url]: https://codecov.io/github/coderhaoxin/react.mdl?branch=master\n[license-img]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square\n[license-url]: http://opensource.org/licenses/MIT\n[david-img]: https://img.shields.io/david/coderhaoxin/react.mdl.svg?style=flat-square\n[david-url]: https://david-dm.org/coderhaoxin/react.mdl\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"$L1e\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L20\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",5,\")\"]}]]}],[\"$\",\"$L20\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",37,\")\"]}]]}]]}],[\"$\",\"$L21\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L22\",null,{\"readme\":\"$23\"}]}],\"$L24\",\"$L25\"]}]\n"])</script><script>self.__next_f.push([1,"2b:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L21\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package h-4 w-4\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],\"Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":5}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"classnames\",{\"href\":\"/package/classnames\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"classnames\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.5\"}]]}],[\"$\",\"$L5\",\"flatpickr\",{\"href\":\"/package/flatpickr\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"flatpickr\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.4\"}]]}],[\"$\",\"$L5\",\"lodash.pick\",{\"href\":\"/package/lodash.pick\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L26\",\"$undefined\"]}],\"lodash.pick\"]}],\"$L27\"]}],\"$L28\",\"$L29\"]}]}]]}],false,\"$L2a\"]}]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L21\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L2b\",null,{\"packageName\":\"react.mdl\",\"versions\":[{\"version\":\"2.0.3\",\"date\":\"2016-12-19T09:54:13.357Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.0.2\",\"date\":\"2016-12-14T08:49:02.957Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.0.1\",\"date\":\"2016-11-19T09:11:09.517Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.0.0\",\"date\":\"2016-11-07T09:46:47.726Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.1\",\"date\":\"2016-10-18T02:16:15.451Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.0\",\"date\":\"2016-09-13T09:41:20.544Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.0\",\"date\":\"2016-09-06T10:30:04.828Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.15.0\",\"date\":\"2016-09-06T09:38:43.430Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.14.0\",\"date\":\"2016-09-06T08:22:35.130Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.13.0\",\"date\":\"2016-09-02T12:02:40.088Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.12.1\",\"date\":\"2016-08-30T09:47:19.933Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.12.0\",\"date\":\"2016-08-16T15:11:12.110Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.11.0\",\"date\":\"2016-07-28T15:11:06.582Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.10.0\",\"date\":\"2016-07-27T09:35:40.775Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.9.2\",\"date\":\"2016-07-25T05:21:16.474Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.9.1\",\"date\":\"2016-07-22T07:26:41.903Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.9.0\",\"date\":\"2016-07-22T07:19:27.351Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.8.3\",\"date\":\"2016-07-13T02:03:39.616Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.8.2\",\"date\":\"2016-07-11T06:33:16.898Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.8.1\",\"date\":\"2016-07-10T14:47:03.885Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.7.3\",\"date\":\"2016-07-05T14:45:37.560Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.7.2\",\"date\":\"2016-07-04T14:13:07.229Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.7.1\",\"date\":\"2016-06-30T15:11:26.234Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.7.0\",\"date\":\"2016-06-30T08:34:09.358Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.5\",\"date\":\"2016-06-29T12:41:35.336Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.4\",\"date\":\"2016-06-29T08:13:48.953Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.3\",\"date\":\"2016-06-29T08:05:57.905Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.2\",\"date\":\"2016-06-28T03:46:10.532Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.1\",\"date\":\"2016-06-27T12:23:36.716Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.6.0\",\"date\":\"2016-06-27T08:52:29.295Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.5.0\",\"date\":\"2016-06-26T15:37:40.281Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.4.1\",\"date\":\"2016-06-23T10:20:33.261Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.4.0\",\"date\":\"2016-06-22T01:58:51.371Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.3.0\",\"date\":\"2016-06-15T08:46:45.361Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.2.0\",\"date\":\"2016-06-15T02:13:50.982Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.1.0\",\"date\":\"2016-06-14T07:39:56.039Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.1\",\"date\":\"2016-06-08T16:09:53.164Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"2.0.3\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">react.mdl</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v2.0.3</span></div></div><p class="text-lg text-muted-foreground">react material design lite</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=material"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">material</span></a><a href="/search?q=design"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">design</span></a><a href="/search?q=react"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">react</span></a><a href="/search?q=lite"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">lite</span></a><a href="/search?q=mdl"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">mdl</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">0</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 3 years ago</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>MIT</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~haoxin">haoxin</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install react.mdl</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/coderhaoxin/react.mdl" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github mr-1.5 h-4 w-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>Repository</a><a href="https://github.com/coderhaoxin/react.mdl#readme" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/react.mdl" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(5)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(37)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><br />[![NPM version][npm-img]][npm-url]<br />[![License][license-img]][license-url]<br />[![Dependency status][david-img]][david-url]</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">* Try <a href="https://github.com/haoxins/react-mdc" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">haoxins/react-mdc</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">React Components for <a href="https://github.com/google/material-design-lite" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">google/material-design-lite v1</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">* <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">DateTimePicker</code></p><p class="my-3"> - <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">Props</code><br /> * See <a href="https://github.com/chmln/flatpickr" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">chmln/flatpickr</a><br /> - <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">Example</code><br /> ``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <DateTimePicker id='datepicker' data-enabletime={true}<br /> onChange={v => console.info(v)} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Badge<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * background: bool<br /> * overlap: bool<br /> * href: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Badge data-badge='go'>hello</Badge><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Button<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * floating: bool<br /> * colored: bool<br /> * primary: bool<br /> * ripple: bool<br /> * raised: bool<br /> * accent: bool<br /> * icon: bool<br /> * mini: bool</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Button>button</Button><br /> <Button floating={true} primary={true}>floating</Button><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Checkbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * label: string<br /> * ripple: bool<br /> * id: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Checkbox label='hello world' /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Progress<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * indeterminate: bool,<br /> * className: string,<br /> * progress: number,<br /> * buffer: number,</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Progress progress={progress} buffer={buffer} /><br /> <Progress indeterminate={true} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Radio<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string,<br /> * label: string,<br /> * name: string,<br /> * ripple: bool,<br /> * id: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Radio label='hello world' /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Slider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Slider min='1' max='10' /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Spinner<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * singleColor: bool<br /> * className: string<br /> * active: bool</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Spinner active={true} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Switch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * label: string<br /> * ripple: bool<br /> * id: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Switch label='hello world' /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Tag<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * onClose: func,<br /> * color: string,<br /> * name: string,</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Tag name='hello' color='red'<br /> onClose={() => console.info('close tag')} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>TextField<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string,<br /> * expandable: bool,<br /> * floating: bool,<br /> * pattern: string,<br /> * label: string,<br /> * error: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <TextField /><br /> <TextField label='hello input' floating={true} /><br /> <TextField pattern='-?[0-9]*(\.[0-9]+)?' label='number' error='u sb' floating={true} /><br /> <TextField pattern='-?[0-9]*(\.[0-9]+)?' label='number' error='u sb' expandable={true} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Textarea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * label: string<br /> * id: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Textarea rows='4' cols='50' /><br /> <Textarea rows='4' cols='50' label='hello, textarea' /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Tooltip<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * className: string<br /> * htmlFor: string<br /> * large: bool</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Tooltip htmlFor='tip'}>tooltip!!!</Tooltip><br /> <div id='tip'>hello world</div><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * direction: string<br /> * icon: string</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Menu direction='right-bottom'><br /> <MenuItem>one</MenuItem><br /> <MenuItem>two</MenuItem><br /> <MenuItem><br /> <a href='#'>hello</a><br /> </MenuItem><br /> </Menu></p><p class="my-3"> <Menu direction='top-right' icon='toc'><br /> <MenuItem>one</MenuItem><br /> <MenuItem>two</MenuItem><br /> <MenuItem><br /> <a href='#'>hello</a><br /> </MenuItem><br /> </Menu><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Tabs<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * defaultActiveKey: string<br /> * onTabClick: func</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> <Tabs><br /> <TabPane key='1' tab='one'><br /> hello<br /> </TabPane><br /> <TabPane key='2' tab='two'><br /> world<br /> </TabPane><br /> <TabPane key='3' tab='three'><br /> go go go<br /> </TabPane><br /> </Tabs><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>Table<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>Props<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * dataSource: array.isRequired,<br /> * columns: array.isRequired,<br /> * className: string,<br /> * selectable: bool</p><p class="my-3"> - </code>Example<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * basic</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> const dataSource = [{<br /> name: 'haoxin',<br /> age: 18,<br /> address: 'Shanghai'<br /> }, {<br /> name: 'luqiang',<br /> age: 22,<br /> address: 'Hangzhou'<br /> }]</p><p class="my-3"> const columns = [{<br /> title: 'name',<br /> dataIndex: 'name',<br /> }, {<br /> title: 'age',<br /> dataIndex: 'age',<br /> }, {<br /> title: 'address',<br /> dataIndex: 'address',<br /> key: 'address'<br /> }]</p><p class="my-3"> <Table dataSource={dataSource} columns={columns} /><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"> * custom </code>render<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /> const dataSource = [{<br /> name: 'haoxin',<br /> age: 18,<br /> address: 'Shanghai'<br /> }, {<br /> name: 'luqiang',<br /> age: 22,<br /> address: 'Hangzhou'<br /> }]</p><p class="my-3"> const columns = [{<br /> title: 'name',<br /> dataIndex: 'name',<br /> render: name => <a href='#'>{name}</a><br /> }, {<br /> title: 'age',<br /> dataIndex: 'age'<br /> }, {<br /> title: 'address',<br /> dataIndex: 'address',<br /> render(address, record) {<br /> return (<br /> <strong>{address + '. ' + record.name}</strong><br /> )<br /> }<br /> }]</p><p class="my-3"> <Table dataSource={dataSource} columns={columns} /><br /> </code>``</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />MIT</p><p class="my-3">[npm-img]: https://img.shields.io/npm/v/react.mdl.svg?style=flat-square<br />[npm-url]: https://npmjs.org/package/react.mdl<br />[travis-img]: https://img.shields.io/travis/coderhaoxin/react.mdl.svg?style=flat-square<br />[travis-url]: https://travis-ci.org/coderhaoxin/react.mdl<br />[codecov-img]: https://img.shields.io/codecov/c/github/coderhaoxin/react.mdl.svg?style=flat-square<br />[codecov-url]: https://codecov.io/github/coderhaoxin/react.mdl?branch=master<br />[license-img]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square<br />[license-url]: http://opensource.org/licenses/MIT<br />[david-img]: https://img.shields.io/david/coderhaoxin/react.mdl.svg?style=flat-square<br />[david-url]: https://david-dm.org/coderhaoxin/react.mdl<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.4.0\"}]\n28:[\"$\",\"$L5\",\"material-design-icons\",{\"href\":\"/package/material-design-icons\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"material-design-icons\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.1\"}]]}]\n29:[\"$\",\"$L5\",\"material-design-lite\",{\"href\":\"/package/material-design-lite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"material-design-lite\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.1\"}]]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":24}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"babel-cli\",{\"href\":\"/package/babel-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.16.0\"}]]}],[\"$\",\"$L5\",\"babel-core\",{\"href\":\"/package/babel-core\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.17.0\"}]]}],[\"$\",\"$L5\",\"babel-eslint\",{\"href\":\"/package/babel-eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2c\",\"$undefined\"]}],\"babel-eslint\"]}],\"$L2d\"]}],\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.0\"}]\n2e:[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.2.5\"}]]}]\n2f:[\"$\",\"$L5\",\"babel-preset-es2015\",{\"href\":\"/package/babel-preset-es2015\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-es2015\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.16.0\"}]]}]\n30:[\"$\",\"$L5\",\"babel-preset-react\",{\"href\":\"/package/babel-preset-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.16.0\"}]]}]\n31:[\"$\",\"$L5\",\"babel-preset-stage-0\",{\"href\":\"/package/babel-preset-stage-0\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-stage-0\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.16.0\"}]]}]\n32:[\"$\",\"$L5\",\"css-loader\",{\"href\":\"/package/css-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"stroke"])</script><script>self.__next_f.push([1,"Linejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"css-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.25.0\"}]]}]\n33:[\"$\",\"$L5\",\"eslint\",{\"href\":\"/package/eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.8.1\"}]]}]\n34:[\"$\",\"$L5\",\"eslint-config-bx-bsd\",{\"href\":\"/package/eslint-config-bx-bsd\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-config-bx-bsd\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.1\"}]]}]\n35:[\"$\",\"$L5\",\"eslint-plugin-react\",{\"href\":\"/package/eslint-plugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-plugin-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.4.1\"}]]}]\n36:[\"$\",\"$L5\",\"exports-loader\",{\"href\":\"/package/exports-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"exports-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.6.3\"}]]}]\n37:[\"$\",\"$L5\",\"extract-text-webpack-plugin\",{\"href\":\"/package/extract-text-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{"])</script><script>self.__next_f.push([1,"\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"extract-text-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.1\"}]]}]\n38:[\"$\",\"$L5\",\"postcss\",{\"href\":\"/package/postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.2.4\"}]]}]\n39:[\"$\",\"$L5\",\"postcss-cssnext\",{\"href\":\"/package/postcss-cssnext\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-cssnext\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.8.0\"}]]}]\n3a:[\"$\",\"$L5\",\"postcss-import\",{\"href\":\"/package/postcss-import\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-import\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.1.2\"}]]}]\n3b:[\"$\",\"$L5\",\"postcss-inline-svg\",{\"href\":\"/package/postcss-inline-svg\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-inline-svg\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]]}]\n3c:[\"$\",\"$L5\",\"postcss-loader\",{\"href\":\"/package/postcss-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transiti"])</script><script>self.__next_f.push([1,"on-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n3d:[\"$\",\"$L5\",\"postcss-nested\",{\"href\":\"/package/postcss-nested\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-nested\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n3e:[\"$\",\"$L5\",\"postcss-svgo\",{\"href\":\"/package/postcss-svgo\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss-svgo\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.1.5\"}]]}]\n3f:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.3.2\"}]]}]\n40:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.3.2\"}]]}]\n41:[\"$\",\"$L5\",\"style-loader\",{\"href\":\"/package/st"])</script><script>self.__next_f.push([1,"yle-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"style-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.13.1\"}]]}]\n42:[\"$\",\"$L5\",\"webpack\",{\"href\":\"/package/webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.13.2\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>