{"_id":"@backdoor_est/etkan-ui-elements","_rev":"2-acf4248569aa5013ad4741678bd7ec47","name":"@backdoor_est/etkan-ui-elements","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@backdoor_est/etkan-ui-elements","version":"0.1.0","keywords":["web-components","custom-elements","lit","design-system","rtl","arabic","angular","vue","svelte","etkan"],"license":"MIT","_id":"@backdoor_est/etkan-ui-elements@0.1.0","maintainers":[{"name":"bahashwan","email":"bahashwan@mail.ru"}],"dist":{"shasum":"22c4675d199278c3eff7dc761b240bab5f1a5e44","tarball":"https://registry.npmjs.org/@backdoor_est/etkan-ui-elements/-/etkan-ui-elements-0.1.0.tgz","fileCount":5,"integrity":"sha512-TIAmf31Oo5i65CQvmzIu9OzbrvOIX/nLB2HA9Q+oNJsiaFfP+hUjdfRLrKd3HQzLA4TlE8TP+uk1O89WTEdGuA==","signatures":[{"sig":"MEUCIQDctm53ueIgEY+oaqxilUtQBnRyDw4qjdPCaSjxbj9jxwIgPFfCDz2Tj8EmAm00hjkt/jR5LQUebckFwGm0F5nf2co=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":188449},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","unpkg":"./dist/index.global.js","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./global":"./dist/index.global.js"},"gitHead":"dfdbf695c33b4df197dbbcbb968dc76cc543f6c4","scripts":{"build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"bahashwan","email":"bahashwan@mail.ru"},"jsdelivr":"./dist/index.global.js","_npmVersion":"11.11.0","description":"ETKAN UI — اتقان · framework-agnostic Web Components (Lit). Bilingual (AR RTL / EN LTR), light/dark. Works in Angular, Vue, Svelte, plain HTML, and React.","directories":{},"sideEffects":true,"_nodeVersion":"25.8.1","dependencies":{"lit":"^3.2.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/etkan-ui-elements_0.1.0_1783596206556_0.04152470337702696","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@backdoor_est/etkan-ui-elements","version":"0.2.0","description":"ETKAN UI — اتقان · framework-agnostic Web Components (Lit). Bilingual (AR RTL / EN LTR), light/dark. Works in Angular, Vue, Svelte, plain HTML, and React.","license":"MIT","keywords":["web-components","custom-elements","lit","design-system","rtl","arabic","angular","vue","svelte","etkan"],"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","unpkg":"./dist/index.global.js","jsdelivr":"./dist/index.global.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./global":"./dist/index.global.js"},"sideEffects":true,"scripts":{"build":"tsup","typecheck":"tsc --noEmit"},"dependencies":{"lit":"^3.2.1"},"gitHead":"aeebf81376d8c1a0309092e580904d2fa82f6d2f","_id":"@backdoor_est/etkan-ui-elements@0.2.0","_nodeVersion":"25.8.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-97bx+yGyacr//Y9HncvWBp4ch/ceUtD/4gF2syUjF2iCnmwqwg4R2GK8C/ZSigeXeHOwdmBWajzGzSsTx5X6/Q==","shasum":"a412534009fba43a4c01fe0960e6b4d87a8c3db5","tarball":"https://registry.npmjs.org/@backdoor_est/etkan-ui-elements/-/etkan-ui-elements-0.2.0.tgz","fileCount":5,"unpackedSize":270116,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDdcxbmFxoWZrk+YSX/Sc4RcZwfElFSAmTXlPUqhuZjDgIgL0tQilkclMMKn0YfpNPlx2AeG0YQhRBC1XVk+ZRr2lE="}]},"_npmUser":{"name":"bahashwan","email":"bahashwan@mail.ru"},"directories":{},"maintainers":[{"name":"bahashwan","email":"bahashwan@mail.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/etkan-ui-elements_0.2.0_1783597526162_0.6725326596575254"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-09T11:23:26.318Z","modified":"2026-07-09T11:45:26.398Z","0.1.0":"2026-07-09T11:23:26.709Z","0.2.0":"2026-07-09T11:45:26.291Z"},"license":"MIT","keywords":["web-components","custom-elements","lit","design-system","rtl","arabic","angular","vue","svelte","etkan"],"description":"ETKAN UI — اتقان · framework-agnostic Web Components (Lit). Bilingual (AR RTL / EN LTR), light/dark. Works in Angular, Vue, Svelte, plain HTML, and React.","maintainers":[{"name":"bahashwan","email":"bahashwan@mail.ru"}],"readme":"# @backdoor_est/etkan-ui-elements\n\nETKAN UI — اتقان · **framework-agnostic Web Components** built with [Lit]. The same\nbilingual (Arabic RTL / English LTR), light & dark design system as the React kit —\nbut as standard custom elements that work **anywhere**: Angular, Vue, Svelte, plain\nHTML, and React.\n\n## Install\n\n```sh\nnpm install @backdoor_est/etkan-ui-elements @backdoor_est/etkan-ui-tokens\n```\n\nOr drop it straight into a page with no build step:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@backdoor_est/etkan-ui-tokens/css/index.css\" />\n<script src=\"https://unpkg.com/@backdoor_est/etkan-ui-elements/dist/index.global.js\"></script>\n```\n\n## Usage\n\nImporting the package registers every element. Then use the tags anywhere:\n\n```js\nimport \"@backdoor_est/etkan-ui-tokens\"; // once, at your app root\nimport \"@backdoor_est/etkan-ui-elements\";\n```\n\n```html\n<etkan-button variant=\"primary\">Save</etkan-button>\n<etkan-input label=\"Email\" placeholder=\"you@company.com\"></etkan-input>\n<etkan-price amount=\"1,250.50\"></etkan-price>\n```\n\nSet direction and theme once on `<html>` — every element follows:\n\n```html\n<html dir=\"rtl\" data-theme=\"dark\">\n```\n\n## Components\n\n- **Actions** — `etkan-button` · `etkan-icon-button`\n- **Forms** — `etkan-input` · `etkan-textarea` · `etkan-checkbox` · `etkan-radio` · `etkan-switch` · `etkan-search-bar` · `etkan-field`\n- **Data** — `etkan-badge` · `etkan-tag` · `etkan-card` · `etkan-avatar` · `etkan-divider` · `etkan-pagination` · `etkan-stat-card` · `etkan-price`\n- **Feedback** — `etkan-alert` · `etkan-spinner`\n- **Layout** — `etkan-navbar` · `etkan-sidebar`\n- **Motion** — `etkan-reveal` · `etkan-parallax` · `etkan-count-up` · `etkan-marquee` · `etkan-aurora` · `etkan-float`\n- **Ready-made** — `etkan-login-card`\n\n## Notes\n\n- **Styling** is driven entirely by the design tokens (CSS custom properties), which\n  pierce the shadow DOM — so load `@backdoor_est/etkan-ui-tokens` on the document.\n- **RTL is automatic**: components use CSS logical properties only, so `dir=\"rtl\"`\n  mirrors the whole UI.\n- **Events**: interactive elements emit composed `CustomEvent`s (e.g. `etkan-change`,\n  `etkan-input`, `etkan-remove`, `etkan-search`, `etkan-submit`).\n- Motion elements honor `prefers-reduced-motion`.\n\n[Lit]: https://lit.dev\n","readmeFilename":"README.md"}