@asafarim/react-dropdowns 1.6.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css.d.ts +1 -0
- package/dist/css.js +1 -0
- package/dist/index.css +1 -1
- package/package.json +13 -1
- package/src/css.ts +2 -0
package/dist/css.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './styles/dropdown.css';
|
package/dist/css.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
@import "@asafarim/design-tokens/css/index.css";.asm-dropdown{display:inline-block;position:relative}.asm-dropdown-trigger{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;justify-content:center;margin:0;padding:0}.asm-dropdown-trigger:disabled{cursor:not-allowed;opacity:.6}.asm-dropdown-trigger:focus-visible{border-radius:var(--asm-radius-sm);outline:2px solid var(--asm-color-primary-500);outline-offset:2px}.asm-dropdown-menu{animation:asm-dropdown-enter .15s ease-out;background-color:var(--asm-color-surface);border:1px solid var(--asm-color-border);border-radius:var(--asm-radius-lg);box-shadow:var(--asm-effect-shadow-lg);max-height:400px;max-width:320px;min-width:160px;overflow-y:auto;padding:var(--asm-space-1);transform-origin:top;z-index:var(--asm-z-dropdown)}@keyframes asm-dropdown-enter{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.asm-dropdown-menu--sm{min-width:120px;padding:var(--asm-space-0-5)}.asm-dropdown-menu--md{min-width:160px;padding:var(--asm-space-1)}.asm-dropdown-menu--lg{min-width:200px;padding:var(--asm-space-1-5)}.asm-dropdown-item{align-items:center;background:transparent;border:none;border-radius:var(--asm-radius-md);color:var(--asm-color-text);cursor:pointer;display:flex;font-size:var(--asm-font-size-sm);font-weight:var(--asm-font-weight-400);gap:var(--asm-space-2);min-height:36px;padding:var(--asm-space-2) var(--asm-space-3);text-align:left;transition:var(--asm-transition-fade);width:100%}.asm-dropdown-item:focus,.asm-dropdown-item:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover);color:var(--asm-color-text)}.asm-dropdown-item:focus{outline:none}.asm-dropdown-item:active:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}.asm-dropdown-item--disabled{color:var(--asm-color-text-muted);cursor:not-allowed;opacity:.6}.asm-dropdown-item--danger{color:var(--asm-color-danger-600)}.asm-dropdown-item--danger:focus,.asm-dropdown-item--danger:hover:not(:disabled){background-color:var(--asm-color-danger-50);color:var(--asm-color-danger-700)}.asm-dropdown-item__icon{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.asm-dropdown-item__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asm-dropdown-divider{background-color:var(--asm-color-border);height:1px;margin:var(--asm-space-1) 0}[data-theme=dark] .asm-dropdown-menu{background-color:var(--asm-color-surface);border-color:var(--asm-color-border);box-shadow:var(--asm-effect-shadow-lg)}[data-theme=dark] .asm-dropdown-item{color:var(--asm-color-text)}[data-theme=dark] .asm-dropdown-item:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}[data-theme=dark] .asm-dropdown-item--danger{color:var(--asm-color-danger-400)}[data-theme=dark] .asm-dropdown-item--danger:hover:not(:disabled){background-color:var(--asm-color-danger-900);color:var(--asm-color-danger-300)}@media (max-width:640px){.asm-dropdown-menu{max-height:60vh;max-width:calc(100vw - 32px);min-width:200px}.asm-dropdown-item{font-size:var(--asm-font-size-md);min-height:44px;padding:var(--asm-space-3) var(--asm-space-4)}.asm-dropdown-item__icon{height:20px;width:20px}}@media (hover:none) and (pointer:coarse){.asm-dropdown-item{min-height:44px;padding:var(--asm-space-3) var(--asm-space-4)}}@media (prefers-reduced-motion:reduce){.asm-dropdown-menu{animation:none}.asm-dropdown-item{transition:none}}@media (prefers-contrast:high){.asm-dropdown-menu{border-width:2px}.asm-dropdown-item:focus{outline:2px solid currentColor;outline-offset:-2px}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@asafarim/react-dropdowns",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.2",
|
|
4
4
|
"description": "Comprehensive reusable dropdown components for React with TypeScript and mobile-first design",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -10,6 +10,18 @@
|
|
|
10
10
|
"src",
|
|
11
11
|
"README.md"
|
|
12
12
|
],
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": "./dist/index.esm.js",
|
|
16
|
+
"require": "./dist/index.js"
|
|
17
|
+
},
|
|
18
|
+
"./styles": {
|
|
19
|
+
"import": "./dist/index.css"
|
|
20
|
+
},
|
|
21
|
+
"./css": {
|
|
22
|
+
"import": "./dist/index.css"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
13
25
|
"keywords": [
|
|
14
26
|
"react",
|
|
15
27
|
"dropdown",
|
package/src/css.ts
ADDED