{"_id":"@akms/ui-kit","_rev":"14-986d48af6014c60a226ea03feef17700","name":"@akms/ui-kit","dist-tags":{"latest":"0.4.2"},"versions":{"0.0.1":{"name":"@akms/ui-kit","version":"0.0.1","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"UNLICENSED","_id":"@akms/ui-kit@0.0.1","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"cf13be0b76b102a2063f9cbb355e0c501e4b3ad3","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.0.1.tgz","fileCount":10,"integrity":"sha512-ZxpQ1bnbzFIDpGmQYWGCPmV0b1fKRxD1vMDDE3KQEmHpnQjmGVviSn1CNOo6P6I9ugQHXQfnWLpYWDgfk77k1w==","signatures":[{"sig":"MEUCIA4xR9zA3LeKC/00iV8PafyMKex5XZ8D4Yx4ZI5jvv7vAiEA4vRSoukDR8vnePnAQAcTYIGcTPuI5X7g2CJrUMDRNZ4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83217},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"2f012150d01506ebcc88732ca870e78bc3f4a88e","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"cd playground && npm run dev"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"_npmVersion":"11.3.0","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.0.1_1778009524302_0.662156813504555","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@akms/ui-kit","version":"0.0.2","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"UNLICENSED","_id":"@akms/ui-kit@0.0.2","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"714956d3455615f3e4b67d0d2bb28cb789995300","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.0.2.tgz","fileCount":10,"integrity":"sha512-KkbEqIpAoNu8cxD/sQwekHLBpN5V8vC2OT73M0GnHODIdFIO1fqOrpmUItwlsKY+qmtioBLWXR8uwdFwYRANfw==","signatures":[{"sig":"MEUCIEVcDwNka96UcXDcGAajF3/PWiqwz0ZU+g/C1DaksF+pAiEApEX++IboM6SNqy5bfSpjiOhR8Cl0Pazfb4Bf0UuFsKE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":86126},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"1b700a120ff7d721f6e255f10af13778eebc354b","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"10.8.2","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.0.2_1779083903725_0.13399590161626218","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@akms/ui-kit","version":"0.0.3","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"UNLICENSED","_id":"@akms/ui-kit@0.0.3","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"debd0008897f42f684be5714be0c24a95852e0d8","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.0.3.tgz","fileCount":10,"integrity":"sha512-Aifgk7+9QtiF4IAytxi1PHOE8J6nf5nub6sYw11db0LcR3Eanith2vRruYD0je5kdoOZnJU2hNgzNFg7wwRr+g==","signatures":[{"sig":"MEQCIAufFiRvHAcFVBEpnrD6xv0E0E8BU2qkkANH3wSlYf03AiAaL2WIRqrZ0qWIaXOnvXbH4PRWTgOprxhrRxDJnm+boA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85908},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"da2f50c6c106b48722e0d79efff9caa2b4ec63ed","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"10.8.2","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.0.3_1779084547560_0.087929243468855","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@akms/ui-kit","version":"0.1.0","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.1.0","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"612d7c464ffdd39733fa19976ae035b298ff6be8","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.1.0.tgz","fileCount":10,"integrity":"sha512-a+AdsPy+Y4bj64xcA7AZvgPYZJ3jtG6hQiQFyfGHrZvI2Ne01w76CJQgZzIZxOCw6GIHSufU5U0o+Z5926E6yQ==","signatures":[{"sig":"MEUCIDj0ynXfGYRt5Kv2wKy3/m9AMHIFLID2AWJJ/gUtFNApAiEA9jo5c+2ds+gu8ARKISOuALBXOzaDaDjbMwkqsDHTSNM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85667},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"16fb5b8c5d0e3cf9e98418b04a681c4fb73cfcb7","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.3.0","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.1.0_1779575004909_0.3902077226641578","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@akms/ui-kit","version":"0.1.1","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.1.1","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"12aa463faa446febf02ada9c39839c2eaff05965","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.1.1.tgz","fileCount":10,"integrity":"sha512-JXHAHrnnzgTzJ8CjJ7up9zhex8k2hjBtLoYh6QZ9xL1N79aRhW5HNNePdY5YiPCw5R6n9VcL5kgor2sCqqnxWQ==","signatures":[{"sig":"MEUCIC/DU1Hm8PyC4AU7Eps1zE3rFjqotm7O0HYn+G7eVev6AiEAz237IpunM0ulq5haO1F11akrV5LYmKn8R4nW1AF5nBY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":88419},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"95b9eac5f20487ec2b745be325a9ffc0a9fbdd85","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.3.0","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.1.1_1779614792839_0.6596625089708077","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@akms/ui-kit","version":"0.1.2","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.1.2","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"453ec0b1b55fc2687787852a597a8ee02e9a8a9d","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.1.2.tgz","fileCount":10,"integrity":"sha512-fKGtuOki2CzWv/XW4vDyZ++UAfaDBkJnLtPPavbGNvcX91dF+thDq3OmNRZKhh4PmHqF57SakZN2jQ/Um2j9hw==","signatures":[{"sig":"MEYCIQC7THkxKZT8zdsiHDLoPvrpLYi3Lb4Ph024XUlQ37NTUwIhANu5/20lh+/qRhSXKwnAUAT68RGys8wWTruEYaSA4ec7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89529},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"95b9eac5f20487ec2b745be325a9ffc0a9fbdd85","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"10.8.2","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^2.8.7","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.1.2_1780884922287_0.7809616374179629","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@akms/ui-kit","version":"0.2.0","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.2.0","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"0781f5890c601d1788a6d63f7133114582b623f9","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.2.0.tgz","fileCount":10,"integrity":"sha512-VvCu3wYL/BxzuFsNLx3RigtNMev/HZv1F3SibK+wQkHF87CrK1gDGWFuhzauKTeuT1Z7KfB1eIV/Jl6wOAObNA==","signatures":[{"sig":"MEUCIGiZr7nkdTk867ZuKfgo/oeen7mahtmYnJZ7tyaBaINHAiEAnI4oR0ktTx+N2vJWwuEJN6hjtiqkMJ8CsUwClCg8P2w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":110279},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"68a068a9229d6c374c0eeae23f2a1c9a2e2ae699","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.3.0","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.2.0_1781364233720_0.00930902026415037","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@akms/ui-kit","version":"0.2.1","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.2.1","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"f0e9477a8bebe9e0bc883d3ac65981e2ce7d6694","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.2.1.tgz","fileCount":10,"integrity":"sha512-4+vtaMR4I+QsJnxsRXDsFwXZqvPXxvodT9YF7mkQsFZGq/fpY5mW+K/91lLyXZSkgKXADH7DcLjOIUkEIciubw==","signatures":[{"sig":"MEQCIG6I0BzzFL8VGjcQxATLUxCBIFVgdY9367/BeKSH/x5zAiADoVFYQ2KIcW9jz1jKDEHbwjzoQZylC+U1lda/ZzN4fA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130706},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"90c5084c0cad7108add0e66bd98ff8189942e6b4","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.3.0","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.2.1_1781374435910_0.32995739715607386","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@akms/ui-kit","version":"0.2.2","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.2.2","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"9b502f258679ed35f2b8ac860cc6ece45fc8b96b","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.2.2.tgz","fileCount":10,"integrity":"sha512-LL8zeCIdj1SrsE4PvyuEKm7QkNNvhHxHJi7U6+RVL8EHUBo5jNvJnv3jb5rxWMxV1iv3z1CpCsQEtGvUrbYUdw==","signatures":[{"sig":"MEUCIHzXIBv5JgVaBRPzYOmM3ztPx5Pari6CBqGuHJYqrTmbAiEAnzsjBi1j94BV9GKigRKgdAkdAD9+klWQ1dyr7BHw9n0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":134762},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"7d85948991c542e7825fc7663b7b97190a405a05","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"10.8.2","description":"Headless-ish menu/icon UI kit with cascading CSS variable theming. Components are styled with Tailwind utilities and inline style props; consumers control theme via KitProvider.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.2.2_1782098896964_0.11813054011430002","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@akms/ui-kit","version":"0.3.0","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.3.0","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"2987c191c19077560f1dc232a7ba1da7dc0a2d57","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.3.0.tgz","fileCount":10,"integrity":"sha512-wxK0Ny/qKiJwxkdFXFal9zXOZgMG6C3J3wexE8q0lllFz1R6RI9QQKUlquv0VHynzuWAbpy5uoWrYvOmqBb5HA==","signatures":[{"sig":"MEQCIE7M0ezOdY3ugKs6yQWiOfpIiI96Nvf4hGdVZQNqnGk6AiB0xte8Z7Ho1kf/MSzAPQv9HxJOzGM9vWRZfbSAYx27bg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":144856},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"2b4ae23f38a982ceeec4c9d486256324019f754e","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"10.8.2","description":"Headless-ish menu/icon/field UI kit whose color & radius tokens chain off HeroUI 3's theme variables, so dark mode and custom themes carry across the kit and HeroUI components without extra wiring.","directories":{},"_nodeVersion":"20.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.3.0_1782109148169_0.9861579134585148","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@akms/ui-kit","version":"0.3.1","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.3.1","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"767605bb27d5ed1a952f9f4a440205d093bbd0f3","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.3.1.tgz","fileCount":10,"integrity":"sha512-bNxZxUvc01qEGac52+dB3D7Day3qA5DRVm1s2zoil2DZoNA7zpnGHIpBEuw26CNhOyBJZ2IDyhNaDEUi7DOTeQ==","signatures":[{"sig":"MEUCIQDf16iUOzN/lE9I6NnMnLC9vCOqdsrS9Jw0rKwFXpbL9gIgajlnZXvY5/bJnYuHQwhGaAyzMOFVBMgO+zGhFihEpak=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":144558},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"86af5dc3e3af5044f221d447cb54e44a892fbf5d","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.3.0","description":"Headless-ish menu/icon/field UI kit whose color & radius tokens chain off HeroUI 3's theme variables, so dark mode and custom themes carry across the kit and HeroUI components without extra wiring.","directories":{},"_nodeVersion":"24.2.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.3.1_1782832112341_0.10672083037655611","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@akms/ui-kit","version":"0.4.0","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.4.0","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"76268dd35594c5ab594604844026c62c04e67b58","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.4.0.tgz","fileCount":10,"integrity":"sha512-dwmHAQAhI+BGF06WlWz7kVBySpsP0TbuZTfDTFfN4utqRpI4eRVQrZ+KA5o8zSU+cq+B9rDSKoy/VbukznKlpw==","signatures":[{"sig":"MEUCIHF8WN1j/ZE09/9XxRdcSQMTynK4oh5AkaM05mGQMf/dAiEA9WUcc+21rgJhnKVlyOGuu4ANShI2xFCDkK1gFPor1KA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":244993},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"d5f4ed6d4abece69d1f1e0b7923416a3ee6f8a67","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.16.0","description":"Headless-ish menu/icon/field UI kit whose color & radius tokens chain off HeroUI 3's theme variables, so dark mode and custom themes carry across the kit and HeroUI components without extra wiring.","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.4.0_1784488367695_0.058944165654535086","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"@akms/ui-kit","version":"0.4.1","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","_id":"@akms/ui-kit@0.4.1","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"dist":{"shasum":"bb7f756da4f859eab397983e8c9981d9cc4cb261","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.4.1.tgz","fileCount":10,"integrity":"sha512-vGTW4Nm0LWFeoBnznT0YaFOg1QN6QGc+fwQO8dHvZOaW7za/OaVn1Kiphe/s5Xr8NrG75JW2tAWBdkeZyqEVbQ==","signatures":[{"sig":"MEUCIQDQKL8wc/FHTcSLmujhBoVQhrXlxPu5Z+kXEPoFTNCB4wIgOxSFVarZCy7mzkUpwKZTV4c+pcW1ywtIudvoptsauvA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":245333},"main":"./lib/index.cjs","type":"module","types":"./lib/index.d.ts","module":"./lib/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"gitHead":"d5f4ed6d4abece69d1f1e0b7923416a3ee6f8a67","scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"workspaces":["playground"],"_npmVersion":"11.16.0","description":"Headless-ish menu/icon/field UI kit whose color & radius tokens chain off HeroUI 3's theme variables, so dark mode and custom themes carry across the kit and HeroUI components without extra wiring.","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","tsup":"^8.5.1","react":"^19.2.3","rimraf":"^6.0.1","react-dom":"^19.2.3","typescript":"^5.9.3","@types/react":"^19","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8","@types/react-dom":"^19"},"peerDependencies":{"clsx":"^2.1.1","react":"^19.0.0","react-dom":"^19.0.0","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","tailwind-merge":"^3.0.0","@akms/react-lib":"^0.0.8"},"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.4.1_1784493647300_0.31791907254542173","host":"s3://npm-registry-packages-npm-production"}},"0.4.2":{"name":"@akms/ui-kit","version":"0.4.2","description":"Headless-ish menu/icon/field UI kit whose color & radius tokens chain off HeroUI 3's theme variables, so dark mode and custom themes carry across the kit and HeroUI components without extra wiring.","keywords":["react","ui-kit","menu","tailwind","headless"],"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","type":"module","main":"./lib/index.cjs","module":"./lib/index.js","types":"./lib/index.d.ts","exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}},"./preset.css":"./preset.css"},"engines":{"node":">=18"},"publishConfig":{"access":"public"},"workspaces":["playground"],"scripts":{"build":"tsc --noEmit && rimraf ./lib && tsup","watch":"tsc --noEmit && tsup --watch","playground":"npm run dev -w @akms/ui-kit-playground"},"peerDependencies":{"@akms/react-lib":"^0.0.8","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","clsx":"^2.1.1","tailwind-merge":"^3.0.0","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@akms/react-lib":"^0.0.8","@heroui/react":"^3.1.0","@heroui/styles":"^3.1.0","@iconify/react":"^6.0.2","@types/react":"^19","@types/react-dom":"^19","clsx":"^2.1.1","tailwind-merge":"^3.0.0","react":"^19.2.3","react-dom":"^19.2.3","rimraf":"^6.0.1","tsup":"^8.5.1","typescript":"^5.9.3"},"gitHead":"b1a12a9fd8ccb6e49494c8c3f2f0fa62732e36f5","_id":"@akms/ui-kit@0.4.2","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-HE8YnX4pTN+iGD62butpSlIqEX1pGkxCCcxanhhN7Mw11NCcYuOzEBQM0mBOkJJn8e/MMyEbR8Lc6NZvOvyJ4w==","shasum":"d55a233fc3b0535a41187421243ecffd5b452ecd","tarball":"https://registry.npmjs.org/@akms/ui-kit/-/ui-kit-0.4.2.tgz","fileCount":10,"unpackedSize":249117,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC8MvBxSox1r1Ng2hF3QLt9bnW5/BFEixPjDfioQsx0UQIgHr+BOg/+FUEWBjjQ+Hy6TGzkNbcKed6VdWuMAIAQJVQ="}]},"_npmUser":{"name":"juncha9","email":"juncha9@gmail.com"},"directories":{},"maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-kit_0.4.2_1786999668681_0.6463133737200659"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-05T19:32:04.226Z","modified":"2026-08-17T20:47:49.001Z","0.0.1":"2026-05-05T19:32:04.455Z","0.0.2":"2026-05-18T05:58:23.880Z","0.0.3":"2026-05-18T06:09:07.683Z","0.1.0":"2026-05-23T22:23:25.040Z","0.1.1":"2026-05-24T09:26:32.984Z","0.1.2":"2026-06-08T02:15:22.431Z","0.2.0":"2026-06-13T15:23:53.873Z","0.2.1":"2026-06-13T18:13:56.054Z","0.2.2":"2026-06-22T03:28:17.131Z","0.3.0":"2026-06-22T06:19:08.321Z","0.3.1":"2026-06-30T15:08:32.479Z","0.4.0":"2026-07-19T19:12:47.828Z","0.4.1":"2026-07-19T20:40:47.440Z","0.4.2":"2026-08-17T20:47:48.823Z"},"license":"Copyright (c) 2025 Alkemic Studio, Inc. All rights reserved.","keywords":["react","ui-kit","menu","tailwind","headless"],"description":"Headless-ish menu/icon/field UI kit whose color & radius tokens chain off HeroUI 3's theme variables, so dark mode and custom themes carry across the kit and HeroUI components without extra wiring.","maintainers":[{"name":"juncha9","email":"juncha9@gmail.com"}],"readme":"# @akms/ui-kit\r\n\r\nTailwind-based menu / icon component kit. Built for HeroUI 3 — the kit's color and radius tokens chain off HeroUI's bare theme variables, so dark mode and custom themes carry across the menu and HeroUI components without extra wiring.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @akms/ui-kit\r\n```\r\n\r\nPeer dependencies: `react@^19`, `react-dom@^19`, `clsx`, `tailwind-merge`, `@iconify/react`, `@heroui/react@^3`, `@heroui/styles@^3`, `@akms/react-lib`\r\n\r\n## Setup\r\n\r\n### 1. Import `preset.css` into your Tailwind entry CSS (Tailwind v4)\r\n\r\nAdd it to the CSS file that has `@import \"tailwindcss\"` (your Tailwind entry):\r\n\r\n```css\r\n@import \"tailwindcss\";\r\n@import \"@akms/ui-kit/preset.css\";\r\n```\r\n\r\n`preset.css` does two jobs in one import:\r\n\r\n- defines the `--uikit-*` theme tokens (`:root`), and\r\n- declares `@source \"./lib/**/*.{js,cjs,mjs}\"` so Tailwind scans the kit's build output and generates the utility classes the components rely on.\r\n\r\n> ⚠️ Import it through CSS `@import` in the Tailwind entry — **not** a JS/TS `import \"@akms/ui-kit/preset.css\"`. A JS import pulls in the tokens, but Tailwind never processes the bundled `@source`, so the component utility classes are never generated and everything renders unstyled. You do **not** need a separate `@source \".../@akms/ui-kit/lib/**\"` line — `preset.css` already carries it (with a `./lib/**` path that resolves relative to the package, so it's location-independent).\r\n\r\n### 2. Theming\r\n\r\nThe kit's tokens chain off HeroUI 3's bare theme variables (`--foreground` / `--accent` / `--border` / `--overlay` / `--radius`), so **theme switching is HeroUI's job**: toggle a class like `.dark` on `<html>` (or define your own `[data-theme=\"...\"]` block) and the kit follows automatically along with HeroUI components. No provider needed.\r\n\r\n## Usage\r\n\r\n### UIMenuList\r\n\r\nScrollable side-menu container. Renders any **component-element** children — the menu primitives (`UIMenuButton`, `UIMenuGroup`, `UIMenuPopover`, `UIMenuSelector`, `UIMenuLabel`) as well as your own components that wrap them. Intrinsic elements (`<div>`, `<span>`, …), plain text/numbers, and falsy children (`null` / `false`) are skipped.\r\n\r\n```tsx\r\nimport { UIMenuList, UIMenuButton } from \"@akms/ui-kit\";\r\n\r\n<UIMenuList>\r\n    <UIMenuButton label=\"Home\" startItem={{ icon: \"tabler:home\" }} />\r\n</UIMenuList>\r\n```\r\n\r\nBecause filtering is by \"is it a component?\" rather than a fixed type list, a custom component that wraps a primitive renders too — handy for encapsulating per-item state:\r\n\r\n```tsx\r\n// Wraps UIMenuButton with its own selection logic — rendered as-is by UIMenuList.\r\nconst NavItem = ({ to, label, icon }: NavItemProps) => (\r\n    <UIMenuButton label={label} startItem={{ icon }} isSelected={useMatch(to)} onClick={() => navigate(to)} />\r\n);\r\n\r\n<UIMenuList>\r\n    <NavItem to=\"/\" label=\"Home\" icon=\"tabler:home\" />\r\n    <NavItem to=\"/docs\" label=\"Docs\" icon=\"tabler:file-text\" />\r\n</UIMenuList>\r\n```\r\n\r\nBy default `UIMenuList` fills its parent's available height (`flex-1 h-full`), so a sidebar menu stretches to the bottom. The base classes are merged with your `className` via `tailwind-merge`, so you can override the fill — e.g. for a short back-link row that should size to its content instead of growing:\r\n\r\n```tsx\r\n<UIMenuList className=\"flex-none h-auto min-h-0\">\r\n    <UIMenuButton label=\"← Back\" startItem={{ icon: \"tabler:arrow-left\" }} onClick={goBack} />\r\n</UIMenuList>\r\n```\r\n\r\n> ⚠️ For SSR hydration issues, wrap the tree on the consumer side (e.g. `ClientOnly`).\r\n\r\n#### Collapsing to an icon rail\r\n\r\nPass `isCollapsed` to fold the menu into an **icon-only rail** — labels disappear and each row shrinks to a centered square icon, so the sidebar stays usable at a fraction of the width. `UIMenuList` propagates the state through context, so every primitive underneath collapses itself; you don't thread a prop into each item.\r\n\r\n```tsx\r\nconst [collapsed, setCollapsed] = useState(false);\r\n\r\n// The outer sidebar shell (width, header, footer, toggle) is yours to own — the kit\r\n// only switches how the menu items render. Animate the width on your container:\r\n<aside className={collapsed ? \"w-14\" : \"w-60\"}>\r\n    <UIMenuList isCollapsed={collapsed}>\r\n        <UIMenuButton label=\"Home\" startItem={{ icon: \"tabler:home\" }} />\r\n        <UIMenuGroup label=\"Settings\" startItem={{ icon: \"tabler:settings\" }}>…</UIMenuGroup>\r\n    </UIMenuList>\r\n</aside>\r\n```\r\n\r\nWhat each primitive does when collapsed:\r\n\r\n| primitive | collapsed behavior |\r\n| --- | --- |\r\n| `UIMenuButton` | Icon-only square. String `label` becomes the `aria-label` + hover `title` so the item stays identifiable. No `startItem` icon? It falls back to the label's first character. |\r\n| `UIMenuGroup` | Can't expand inline in a narrow rail, so it turns into a `UIMenuPopover` flyout — clicking opens the children beside the rail, with full labels. |\r\n| `UIMenuPopover` | Trigger becomes icon-only; the flyout panel always renders **expanded** (full labels), even while the rail is collapsed. |\r\n| `UIMenuLabel` | Section captions can't fit, so it renders as a thin divider (`role=\"separator\"`, keeping the caption as its `aria-label`). |\r\n| `UIMenuSelector` | Each option collapses to its icon — give options **distinct** icons so they stay distinguishable in the rail. |\r\n\r\n### Sidebar controller — `UISidebarProvider` / `useUISidebar`\r\n\r\n> Prefer **`UISidePanel`** (below) — the ready-made compound shell built on this controller — for most apps. Reach for `UISidebarProvider` directly only when you want to assemble the sidebar markup (aside / header / footer / drawer) yourself.\r\n\r\nA **headless** controller for the whole responsive sidebar: it holds the mobile off-canvas **drawer** state and the desktop **rail-collapse** state in one place. Because the state lives in context, the trigger — a hamburger button — can sit **anywhere** in your layout (a top bar, a floating button, a header on another route) and still open the sidebar. The kit owns only the state machine; the drawer markup, backdrop, trigger placement, **and the responsive detection** stay yours.\r\n\r\n**You provide `isMobile`.** \"What counts as mobile\" is app policy — your breakpoints, media-query strategy, or SSR device detection — so the kit doesn't run `matchMedia` itself. Compute it however you like and pass it in. The provider uses it internally (to auto-close the drawer on desktop and to derive `isCollapsed`) but does **not** re-expose it through `useUISidebar()`: you already own that value, so read it from your own source rather than round-tripping it through the kit.\r\n\r\nWrap the layout once, injecting `isMobile` from your own hook, and pass that same value down to wherever your layout needs it:\r\n\r\n```tsx\r\nimport { UISidebarProvider } from \"@akms/ui-kit\";\r\nimport { useIsMobile } from \"./use-is-mobile\"; // your own matchMedia / breakpoint hook\r\n\r\nfunction App() {\r\n    const isMobile = useIsMobile(); // e.g. matchMedia(\"(max-width: 767px)\")\r\n    return (\r\n        <UISidebarProvider isMobile={isMobile}>\r\n            <AppLayout isMobile={isMobile} />\r\n        </UISidebarProvider>\r\n    );\r\n}\r\n```\r\n\r\nThen read `useUISidebar()` wherever you need it:\r\n\r\n```tsx\r\nimport { useUISidebar, UIMenuList, UIMenuButton } from \"@akms/ui-kit\";\r\n\r\n// isMobile comes down as a prop (you own it); the drawer/collapse state comes from the hook.\r\nfunction AppLayout({ isMobile }: { isMobile: boolean }) {\r\n    const { isOpen, collapsed, isCollapsed, close, toggle } = useUISidebar();\r\n\r\n    return (\r\n        <div className=\"flex h-screen\">\r\n            {/* Backdrop — only while the mobile drawer is open */}\r\n            {isMobile && isOpen && (\r\n                <div className=\"fixed inset-0 z-40 bg-black/40\" onClick={close} />\r\n            )}\r\n\r\n            {/* Your own sidebar shell: off-canvas drawer on mobile, static column on desktop */}\r\n            <aside\r\n                className={\r\n                    isMobile\r\n                        ? `fixed inset-y-0 left-0 z-50 w-60 transition-transform ${isOpen ? \"translate-x-0\" : \"-translate-x-full\"}`\r\n                        : `shrink-0 transition-[width] ${collapsed ? \"w-14\" : \"w-60\"}`\r\n                }\r\n            >\r\n                <UIMenuList isCollapsed={isCollapsed}>\r\n                    <UIMenuButton label=\"Home\" startItem={{ icon: \"tabler:home\" }} onClick={close} />\r\n                    {/* … */}\r\n                </UIMenuList>\r\n            </aside>\r\n\r\n            <main className=\"flex-1 overflow-auto\">\r\n                {/* The hamburger can live anywhere — it just calls the hook */}\r\n                {isMobile && (\r\n                    <button onClick={toggle} aria-label=\"Open menu\">\r\n                        <UIMenuIcon icon=\"tabler:menu-2\" />\r\n                    </button>\r\n                )}\r\n                {/* page content */}\r\n            </main>\r\n        </div>\r\n    );\r\n}\r\n```\r\n\r\n`useUISidebar()` returns:\r\n\r\n`isMobile` is **not** returned — you already own it (you passed it into the provider), so read it from your own source instead of round-tripping through the kit.\r\n\r\n| field | type | description |\r\n| --- | --- | --- |\r\n| `isOpen` | `boolean` | Mobile drawer open state (auto-closed when the provider's `isMobile` prop becomes `false`). |\r\n| `open` / `close` / `toggle` | `() => void` | Drawer actions — wire these to your hamburger / close button / backdrop. |\r\n| `collapsed` | `boolean` | Desktop icon-rail collapse state (raw). |\r\n| `setCollapsed` / `toggleCollapsed` | — | Set or flip the desktop rail. |\r\n| `isCollapsed` | `boolean` | Effective value to pass to `UIMenuList isCollapsed` — `collapsed` on desktop, always `false` on mobile (so the drawer shows full labels). |\r\n\r\n`UISidebarProvider` props: `isMobile` (**required** — you provide the responsive flag) and `defaultCollapsed` (initial desktop rail state).\r\n\r\n> `useUISidebar()` must be called inside a `<UISidebarProvider>` — it throws otherwise. The provider is independent of `UIMenuList`: you still pass `isCollapsed` explicitly, so a sidebar without the provider (using `UIMenuList`'s own `isCollapsed` prop) keeps working.\r\n\r\n### UISidePanel — compound sidebar shell\r\n\r\nThe **batteries-included** layer over `UISidebarProvider` (above): it folds the mechanical shell boilerplate — the mobile off-canvas drawer + backdrop, the desktop icon-rail width animation, and the mobile / desktop-expanded / collapsed branching of the header and footer — into a small set of **composable slots**. You fill in only the app-specific parts (brand, menu items, user chip); the layout stays yours.\r\n\r\n```tsx\r\nimport { UISidePanel, UIMenuButton, UIMenuIcon, useUISidePanel, UICommon } from \"@akms/ui-kit\";\r\n\r\nfunction App() {\r\n    // isMobile is auto-detected — omit it, or pass your own for a custom breakpoint.\r\n    return (\r\n        <UISidePanel.Provider>\r\n            <Layout />\r\n        </UISidePanel.Provider>\r\n    );\r\n}\r\n\r\nfunction Layout() {\r\n    const { close, toggle } = useUISidePanel();\r\n    const isMobile = UICommon.useIsMobile();\r\n\r\n    return (\r\n        <div className=\"flex h-screen\">\r\n            <UISidePanel>\r\n                <UISidePanel.Header>\r\n                    <Brand />   {/* your brand — hidden automatically when the rail is collapsed */}\r\n                </UISidePanel.Header>\r\n\r\n                <UISidePanel.Content>\r\n                    <UIMenuButton label=\"Home\" startItem={{ icon: \"tabler:home\" }} onClick={close} />\r\n                    {/* …your menu primitives… */}\r\n                </UISidePanel.Content>\r\n\r\n                <UISidePanel.Footer collapsedContent={<Avatar />}>\r\n                    <UserChip />\r\n                </UISidePanel.Footer>\r\n            </UISidePanel>\r\n\r\n            <main className=\"flex-1 overflow-auto\">\r\n                {/* No Trigger component — your own button just calls toggle() */}\r\n                {isMobile && (\r\n                    <button onClick={() => toggle()} aria-label=\"Open menu\">\r\n                        <UIMenuIcon icon=\"tabler:menu-2\" />\r\n                    </button>\r\n                )}\r\n                {/* page content */}\r\n            </main>\r\n        </div>\r\n    );\r\n}\r\n```\r\n\r\nThe parts:\r\n\r\n| part | role |\r\n| --- | --- |\r\n| `UISidePanel.Provider` | Wraps `UISidebarProvider` and supplies the `isMobile` context. **`isMobile` is optional** — auto-detected via `UICommon.useIsMobile()` when omitted, overridable for a custom breakpoint. Also takes `defaultCollapsed`. All the layout below must live under it. |\r\n| `UISidePanel` | The `<aside>` shell itself — off-canvas drawer + backdrop on mobile, static width-animated column (`w-60` ↔ rail `w-14`) on desktop. Background defaults to `--uikit-surface`; override with `className`. |\r\n| `UISidePanel.Header` | Brand slot (`children`) + the state-appropriate toggle the kit draws for you: collapse on desktop-expanded, close on the mobile drawer, expand on the collapsed rail. The brand is hidden on the rail. |\r\n| `UISidePanel.Content` | Wraps `UIMenuList`, reading `isCollapsed` from context (no prop threading) — drop your menu primitives (`UIMenuButton`, `UIMenuGroup`, …) as children. |\r\n| `UISidePanel.Footer` | Footer slot (`children`, e.g. a user chip). `collapsedContent` swaps in a compact version (e.g. avatar-only) when the rail is collapsed. |\r\n\r\n**No `Trigger` component.** Opening the drawer is just a function call, so the hamburger is your own button — its markup, placement, and icon stay entirely yours:\r\n\r\n```tsx\r\nconst { toggle } = useUISidePanel();\r\n<button onClick={() => toggle()}>☰</button>\r\n```\r\n\r\n`useUISidePanel()` returns everything `useUISidebar()` returns (`isOpen` / `open` / `close` / `toggle` / `collapsed` / `setCollapsed` / `toggleCollapsed` / `isCollapsed`) **plus** the resolved `isMobile`, and must be called inside `<UISidePanel.Provider>`.\r\n\r\n### UICommon — shared utilities\r\n\r\nUtility hooks not tied to any single component, grouped under the `UICommon` namespace.\r\n\r\n#### `UICommon.useIsMobile(query?)`\r\n\r\nA `matchMedia` hook reporting whether the viewport matches a mobile breakpoint. Default query `(max-width: 767px)` (Tailwind `md` and below); pass your own to change it. **SSR-safe**: returns `false` on the first render, then syncs after mount and on resize.\r\n\r\n```tsx\r\nimport { UICommon } from \"@akms/ui-kit\";\r\n\r\nconst isMobile = UICommon.useIsMobile();                       // default < 768px\r\nconst isTablet = UICommon.useIsMobile(\"(max-width: 1024px)\");  // custom breakpoint\r\n```\r\n\r\n`UISidePanel.Provider` calls this internally when you omit `isMobile`, so most apps never invoke it directly — reach for it when you need the flag for your own responsive UI (a mobile-only top bar, conditional layout, …). `UICommon.MOBILE_MEDIA_QUERY` exposes the default query string.\r\n\r\n### UIMenuButton\r\n\r\nA clickable menu row.\r\n\r\n```tsx\r\n<UIMenuButton\r\n    label=\"Dashboard\"\r\n    startItem={{ icon: \"tabler:layout-dashboard\" }}\r\n    isSelected\r\n    onClick={() => navigate(\"/dashboard\")}\r\n/>\r\n```\r\n\r\n| prop | type | description |\r\n| --- | --- | --- |\r\n| `label` | `string \\| ReactNode` | Center label of the row |\r\n| `startItem` | `UIMenuSlot` | Left slot (typically an icon) |\r\n| `endItem` | `UIMenuSlot` | Right slot (typically action buttons) |\r\n| `isSelected` | `boolean` | Selected state (primary color emphasis) |\r\n| `isDisabled` | `boolean` | Disabled state (overlay + click blocked) |\r\n| `onClick` | `(e) => void` | Click handler for the label area |\r\n\r\n#### Long labels\r\n\r\nA label too wide for the row is clipped with an ellipsis (`…`) on a single line — it never wraps, and it never widens the row. `startItem` / `endItem` sit in their own grid columns that keep full width at any label length, so the icons stay put and the label simply gives up the space it doesn't have. Nothing to configure; pass the long string and let it truncate. Note that a truncated row carries **no native tooltip** — only the collapsed rail sets `title` from a string `label` — so add your own if the full text has to stay reachable.\r\n\r\n#### Putting action buttons in a slot\r\n\r\nYou can place interactive controls directly inside `endItem.node`. The inner label button and the slot containers live in separate grid columns, so there is no overlap — you do **not** need `e.stopPropagation()`. The row's hover / active background is also suppressed while a slot button is hovered or pressed, so the row doesn't visually compete with the action.\r\n\r\n`UIMenuIcon` itself becomes a button when you pass `onClick` — that's usually the cleanest way to drop in icon-only actions:\r\n\r\n```tsx\r\n<UIMenuButton\r\n    label=\"Document\"\r\n    startItem={{ icon: \"tabler:file-text\" }}\r\n    endItem={{\r\n        node: <>\r\n            <UIMenuIcon icon=\"tabler:edit\" title=\"편집\" onClick={() => openEdit()} />\r\n            <UIMenuIcon icon=\"tabler:trash\" title=\"삭제\" onClick={() => openDelete()} />\r\n        </>,\r\n    }}\r\n    onClick={() => navigate(\"/docs\")}\r\n/>\r\n```\r\n\r\n#### startItem hover toggle\r\n\r\nOnly `startItem` supports a `hoverIcon` pair. The icon swaps on row hover.\r\n\r\n```tsx\r\n<UIMenuButton\r\n    label=\"Download\"\r\n    startItem={{ icon: \"tabler:download\", hoverIcon: \"tabler:download-off\" }}\r\n/>\r\n```\r\n\r\n### UIMenuGroup\r\n\r\nExpand/collapse group. `startItem` is auto-filled with a chevron icon, but an explicit prop overrides it.\r\n\r\n```tsx\r\n<UIMenuGroup label=\"Settings\" startItem={{ icon: \"tabler:settings\" }}>\r\n    <UIMenuButton label=\"Profile\" />\r\n    <UIMenuButton label=\"Security\" />\r\n</UIMenuGroup>\r\n```\r\n\r\n### UIMenuPopover\r\n\r\nSame trigger row as `UIMenuGroup`, but clicking opens the items in a HeroUI popover flyout instead of expanding inline — built for sections with too many items to expand comfortably. The list scrolls inside the popover, so the item count never stretches the sidebar.\r\n\r\n```tsx\r\n<UIMenuPopover label=\"All items\" startItem={{ icon: \"tabler:list\" }}>\r\n    <UIMenuButton label=\"Item 1\" onClick={() => navigate(\"/1\")} />\r\n    <UIMenuButton label=\"Item 2\" onClick={() => navigate(\"/2\")} />\r\n    {/* ...dozens more — they scroll inside the popover */}\r\n</UIMenuPopover>\r\n```\r\n\r\nAdd a search input at the top with `searchable`. The query matches item labels case-insensitively as a substring, and the popover height animates as results change (no jumpy resize between 0 and many results):\r\n\r\n```tsx\r\n<UIMenuPopover label=\"Find item\" startItem={{ icon: \"tabler:list-search\" }} searchable searchPlaceholder=\"이름으로 검색…\">\r\n    {items.map((item) => (\r\n        <UIMenuButton key={item.id} label={item.name} onClick={() => navigate(`/${item.id}`)} />\r\n    ))}\r\n</UIMenuPopover>\r\n```\r\n\r\n| prop | type | default | description |\r\n| --- | --- | --- | --- |\r\n| `label` | `string \\| ReactNode` | — | Trigger row label |\r\n| `startItem` | `UIMenuSlot` | — | Left slot (typically an icon) |\r\n| `endItem` | `UIMenuSlot` | direction caret | Right slot; defaults to a caret pointing the popover direction |\r\n| `placement` | HeroUI placement | `\"right top\"` | Which side the popover opens on (HeroUI 3 space-separated placement) |\r\n| `closeOnSelect` | `boolean` | `true` | Close the popover when an item inside is clicked. Set `false` when nesting expand/collapse groups inside |\r\n| `searchable` | `boolean` | `false` | Show a search input at the top and filter children by `label` substring (string labels only; non-string labels are hidden during search) |\r\n| `searchPlaceholder` | `string` | `\"Search…\"` | Placeholder text for the search input when `searchable` is on |\r\n\r\n### UIMenuSelector\r\n\r\nRadio-style group that manages single selection internally.\r\n\r\n```tsx\r\n<UIMenuSelector\r\n    items={[\r\n        { key: \"ko\", label: \"한국어\", startItem: { icon: \"tabler:point\" } },\r\n        { key: \"en\", label: \"English\", startItem: { icon: \"tabler:point\" } },\r\n    ]}\r\n    onSelect={(key) => i18n.changeLanguage(key)}\r\n/>\r\n```\r\n\r\n### UIMenuLabel\r\n\r\nNon-interactive section caption — also doubles as a static display row. Ships with built-in caption styling (`font-semibold` + top divider) so it visually separates sections without extra props. Captions truncate with an ellipsis exactly like `UIMenuButton`, leaving the `startItem` / `endItem` columns intact.\r\n\r\n```tsx\r\n<UIMenuLabel label=\"Language\" />\r\n\r\n{/* As a static display row — override the divider/bold via className if needed */}\r\n<UIMenuLabel label=\"Version 1.2.3\" startItem={{ icon: \"tabler:info-circle\" }} className=\"border-t-0 mt-0 pt-0 font-normal\" />\r\n```\r\n\r\n### UIMenuIcon\r\n\r\n`@iconify/react` wrapper that picks up the ui-kit color tokens. By default it renders as a non-interactive `<div>` with `pointer-events: none`, sized to follow the kit's text scale. Passing `onClick` turns it into a `<button>` with a 28×28 hit-area, kit-token hover/active feedback, and the same press animation as `UIMenuButton` — handy for slot action icons.\r\n\r\n```tsx\r\nimport { UIMenuIcon } from \"@akms/ui-kit\";\r\n\r\n{/* Decorative icon */}\r\n<UIMenuIcon icon=\"tabler:home\" />\r\n\r\n{/* Icon button — becomes <button> when onClick is provided */}\r\n<UIMenuIcon icon=\"tabler:edit\" title=\"편집\" onClick={() => openEdit()} />\r\n```\r\n\r\n| prop | type | default | description |\r\n| --- | --- | --- | --- |\r\n| `icon` | `string` | — | Iconify icon name (`\"tabler:home\"`) or a single emoji character |\r\n| `size` | `number \\| string` | `\"1.125rem\"` | Icon visual size — `font-size` for emoji, `fontSize` prop on `<IconifyIcon>` |\r\n| `onClick` | `(e) => void` | — | When set, renders as `<button>` with hit-area and press feedback |\r\n| `title` | `string` | — | Forwarded to the rendered `<button>` (use for accessible tooltip) |\r\n| `isDisabled` | `boolean` | `false` | Applies to button mode only — disables click and dims the icon |\r\n\r\n### UIField\r\n\r\nForm-row layout for settings / registration forms (Google-Play-Console style): a left **label** column and a right column holding an optional **description** (above the control), the control (`children`), and optional **help** text (below). Two columns on `md+`, stacked on mobile.\r\n\r\nText follows a three-tier emphasis so the row reads top-down: **label** at full strength (`--uikit-foreground`), **description** one step lighter (`--uikit-foreground-secondary`), and **help** faintest (`--uikit-foreground-muted`).\r\n\r\n```tsx\r\nimport { UIField } from \"@akms/ui-kit\";\r\n\r\n<UIField\r\n    label=\"이름\"\r\n    isRequired\r\n    description=\"스토어에 표시되는 이름입니다.\"   // 컨트롤 위\r\n    help=\"2~50자, 영문/숫자\"                      // 컨트롤 아래\r\n>\r\n    <input className=\"...\" />\r\n</UIField>\r\n```\r\n\r\n| prop | type | description |\r\n| --- | --- | --- |\r\n| `label` | `ReactNode` | Left-column label |\r\n| `isRequired` | `boolean` | Appends a `*` (danger color) after the label |\r\n| `description` | `ReactNode` | Secondary text **above** the control |\r\n| `help` | `ReactNode` | Secondary text **below** the control |\r\n| `children` | `ReactNode` | The control(s) in the right column |\r\n\r\nKeep `label` plain — express \"required\" with `isRequired`, not by embedding markup in the label.\r\n\r\n## Theming\r\n\r\nThe kit's color and radius tokens chain off HeroUI 3's unprefixed bare tokens (`--foreground` / `--accent` / `--overlay` / `--border` / `--radius`, in `oklch`), so the kit tracks HeroUI's dark-mode toggle and custom theme automatically — toggle `.dark` on `<html>` (or define `[data-theme=\"...\"]`) and both the kit and HeroUI components paint together. When HeroUI isn't loaded, HeroUI's light-theme defaults below apply as fallbacks.\r\n\r\nOverride any of these in your own CSS to retune the kit without touching HeroUI itself (cascading through standard CSS works fine — a `:root` override, a parent-class override, or an inline `style` on any ancestor).\r\n\r\n| variable | follows / fallback | purpose |\r\n| --- | --- | --- |\r\n| `--uikit-foreground` | `--foreground` / `oklch(0.2103 0.0059 285.89)` | Base text |\r\n| `--uikit-foreground-secondary` | `foreground 70%` | Secondary text — UIField description (above the control) |\r\n| `--uikit-foreground-muted` | `foreground 55%` | Faint text — UIField help (below the control) |\r\n| `--uikit-danger` | `--danger` / `oklch(0.637 0.237 25.331)` | Danger / required-mark color (UIField `*`) |\r\n| `--uikit-primary` | `--accent` / `oklch(0.6204 0.195 253.83)` | Selected / accent color |\r\n| `--uikit-border` | `--border` / `oklch(90% 0.004 286.32)` | Border |\r\n| `--uikit-surface` | `--overlay` / `oklch(100% 0 0)` | Floating surface — popover flyout & `UISidePanel` shell background |\r\n| `--uikit-radius` | `--radius × 3` / `1.5rem` | Container corner radius (matches HeroUI's `--radius-3xl` tier — Popover / Button) |\r\n| `--uikit-radius-row` | `--radius × 2` / `1rem` | Menu-row corner radius (matches HeroUI's `--radius-2xl` tier — menu-item) |\r\n| `--uikit-indent-step` | `0.75rem` | UIMenuGroup indent |\r\n| `--uikit-state-hover` | `foreground 5%` | Hover background |\r\n| `--uikit-state-active` | `foreground 10%` | Active background |\r\n| `--uikit-primary-bg` | `primary 18%` | Selected background |\r\n| `--uikit-disabled-overlay` | `background 50%` | Disabled overlay |\r\n\r\nFull definitions are in [`preset.css`](./preset.css).\r\n\r\n## Development\r\n\r\n```bash\r\nnpm install\r\nnpm run build       # build lib/\r\nnpm run watch       # build on change\r\nnpm run playground  # run the RR7 SSR playground demo\r\n```\r\n\r\n`playground/` imports the library's `src/` directly via alias, so HMR + sourcemap debugging works out of the box.\r\n\r\n## Structure\r\n\r\n```\r\nsrc/         # library (published)\r\nplayground/  # React Router 7 SSR demo\r\nlib/         # build output (published)\r\n```\r\n\r\n## License\r\n\r\nProprietary — Copyright © 2026 Alkemic Studio. All rights reserved. See [LICENSE.md](./LICENSE.md).\r\n","readmeFilename":"README.md"}