@dmitriikapustin/ui 0.3.2 → 0.3.4

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/index.cjs CHANGED
@@ -3405,19 +3405,35 @@ __styleInject(`@charset "UTF-8";
3405
3405
  .DropdownMenu-module_trigger {
3406
3406
  cursor: pointer;
3407
3407
  display: inline-flex;
3408
+ /* div \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u0442 focus \u043A\u0430\u043A role="button" \u2014 \u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 Button \u0443\u0436\u0435 \u0434\u0430\u0451\u0442 focus indicator. */
3409
+ }
3410
+ .DropdownMenu-module_trigger:focus, .DropdownMenu-module_trigger:focus-visible {
3411
+ outline: none;
3408
3412
  }
3409
3413
 
3414
+ @keyframes DropdownMenu-module_dropdownEnter {
3415
+ from {
3416
+ opacity: 0;
3417
+ transform: translateY(-4px);
3418
+ }
3419
+ to {
3420
+ opacity: 1;
3421
+ transform: translateY(0);
3422
+ }
3423
+ }
3410
3424
  .DropdownMenu-module_menu {
3411
3425
  position: absolute;
3412
3426
  top: 100%;
3413
- margin-top: 0.25rem;
3427
+ margin-top: 0.5rem;
3414
3428
  z-index: 50;
3415
- border-radius: var(--radius-lg);
3416
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
3429
+ border-radius: var(--radius-xl);
3430
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
3417
3431
  border: 1px solid var(--border-color);
3418
3432
  background: var(--bg);
3419
- min-width: 180px;
3420
- padding: 0.25rem 0;
3433
+ min-width: 200px;
3434
+ padding: 0.375rem;
3435
+ animation: DropdownMenu-module_dropdownEnter 150ms cubic-bezier(0.16, 1, 0.3, 1);
3436
+ transform-origin: top center;
3421
3437
  }
3422
3438
 
3423
3439
  .DropdownMenu-module_alignLeft {
@@ -3442,11 +3458,16 @@ __styleInject(`@charset "UTF-8";
3442
3458
  text-align: left;
3443
3459
  background: none;
3444
3460
  border: none;
3461
+ border-radius: var(--radius-md);
3445
3462
  }
3446
- .DropdownMenu-module_item:hover {
3463
+ .DropdownMenu-module_item:hover, .DropdownMenu-module_item:focus-visible {
3464
+ outline: none;
3447
3465
  background: var(--bg-secondary);
3448
3466
  color: var(--fg);
3449
3467
  }
3468
+ .DropdownMenu-module_item:active {
3469
+ background: var(--border-color);
3470
+ }
3450
3471
 
3451
3472
  .DropdownMenu-module_itemIcon {
3452
3473
  flex-shrink: 0;
@@ -3454,7 +3475,7 @@ __styleInject(`@charset "UTF-8";
3454
3475
  }
3455
3476
 
3456
3477
  .DropdownMenu-module_divider {
3457
- margin: 0.25rem 0;
3478
+ margin: 0.375rem -0.375rem;
3458
3479
  border: none;
3459
3480
  border-top: 1px solid var(--border-color);
3460
3481
  }`);
@@ -5496,7 +5517,7 @@ function ComparisonTable({ columns, rows, className = "" }) {
5496
5517
  "td",
5497
5518
  {
5498
5519
  className: cellClass,
5499
- children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.textValue, children: val })
5520
+ children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 18 }) }) : typeof val === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: __default57.textValue, children: val }) : val
5500
5521
  },
5501
5522
  vi
5502
5523
  );
package/dist/index.d.cts CHANGED
@@ -715,7 +715,13 @@ interface ComparisonColumn {
715
715
  }
716
716
  interface ComparisonRow {
717
717
  feature: string;
718
- values: (boolean | string)[];
718
+ /**
719
+ * Значения колонок по порядку.
720
+ * - `boolean` — рендерится как ✓ (true) / ✗ (false) иконка.
721
+ * - `string` — рендерится как текст по центру (стилизация .textValue).
722
+ * - `ReactNode` (JSX) — рендерится as-is без обёртки. Use-case: CTA-row с `<Button>`, badges, иконки.
723
+ */
724
+ values: (boolean | string | ReactNode)[];
719
725
  }
720
726
  interface ComparisonTableProps {
721
727
  columns: ComparisonColumn[];
package/dist/index.d.ts CHANGED
@@ -715,7 +715,13 @@ interface ComparisonColumn {
715
715
  }
716
716
  interface ComparisonRow {
717
717
  feature: string;
718
- values: (boolean | string)[];
718
+ /**
719
+ * Значения колонок по порядку.
720
+ * - `boolean` — рендерится как ✓ (true) / ✗ (false) иконка.
721
+ * - `string` — рендерится как текст по центру (стилизация .textValue).
722
+ * - `ReactNode` (JSX) — рендерится as-is без обёртки. Use-case: CTA-row с `<Button>`, badges, иконки.
723
+ */
724
+ values: (boolean | string | ReactNode)[];
719
725
  }
720
726
  interface ComparisonTableProps {
721
727
  columns: ComparisonColumn[];
package/dist/index.js CHANGED
@@ -3399,19 +3399,35 @@ __styleInject(`@charset "UTF-8";
3399
3399
  .DropdownMenu-module_trigger {
3400
3400
  cursor: pointer;
3401
3401
  display: inline-flex;
3402
+ /* div \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u0442 focus \u043A\u0430\u043A role="button" \u2014 \u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 Button \u0443\u0436\u0435 \u0434\u0430\u0451\u0442 focus indicator. */
3403
+ }
3404
+ .DropdownMenu-module_trigger:focus, .DropdownMenu-module_trigger:focus-visible {
3405
+ outline: none;
3402
3406
  }
3403
3407
 
3408
+ @keyframes DropdownMenu-module_dropdownEnter {
3409
+ from {
3410
+ opacity: 0;
3411
+ transform: translateY(-4px);
3412
+ }
3413
+ to {
3414
+ opacity: 1;
3415
+ transform: translateY(0);
3416
+ }
3417
+ }
3404
3418
  .DropdownMenu-module_menu {
3405
3419
  position: absolute;
3406
3420
  top: 100%;
3407
- margin-top: 0.25rem;
3421
+ margin-top: 0.5rem;
3408
3422
  z-index: 50;
3409
- border-radius: var(--radius-lg);
3410
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
3423
+ border-radius: var(--radius-xl);
3424
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
3411
3425
  border: 1px solid var(--border-color);
3412
3426
  background: var(--bg);
3413
- min-width: 180px;
3414
- padding: 0.25rem 0;
3427
+ min-width: 200px;
3428
+ padding: 0.375rem;
3429
+ animation: DropdownMenu-module_dropdownEnter 150ms cubic-bezier(0.16, 1, 0.3, 1);
3430
+ transform-origin: top center;
3415
3431
  }
3416
3432
 
3417
3433
  .DropdownMenu-module_alignLeft {
@@ -3436,11 +3452,16 @@ __styleInject(`@charset "UTF-8";
3436
3452
  text-align: left;
3437
3453
  background: none;
3438
3454
  border: none;
3455
+ border-radius: var(--radius-md);
3439
3456
  }
3440
- .DropdownMenu-module_item:hover {
3457
+ .DropdownMenu-module_item:hover, .DropdownMenu-module_item:focus-visible {
3458
+ outline: none;
3441
3459
  background: var(--bg-secondary);
3442
3460
  color: var(--fg);
3443
3461
  }
3462
+ .DropdownMenu-module_item:active {
3463
+ background: var(--border-color);
3464
+ }
3444
3465
 
3445
3466
  .DropdownMenu-module_itemIcon {
3446
3467
  flex-shrink: 0;
@@ -3448,7 +3469,7 @@ __styleInject(`@charset "UTF-8";
3448
3469
  }
3449
3470
 
3450
3471
  .DropdownMenu-module_divider {
3451
- margin: 0.25rem 0;
3472
+ margin: 0.375rem -0.375rem;
3452
3473
  border: none;
3453
3474
  border-top: 1px solid var(--border-color);
3454
3475
  }`);
@@ -5490,7 +5511,7 @@ function ComparisonTable({ columns, rows, className = "" }) {
5490
5511
  "td",
5491
5512
  {
5492
5513
  className: cellClass,
5493
- children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsx(IconlyClose, { size: 18 }) }) : /* @__PURE__ */ jsx("span", { className: __default57.textValue, children: val })
5514
+ children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsx("span", { className: __default57.iconSuccess, children: /* @__PURE__ */ jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsx("span", { className: __default57.iconMuted, children: /* @__PURE__ */ jsx(IconlyClose, { size: 18 }) }) : typeof val === "string" ? /* @__PURE__ */ jsx("span", { className: __default57.textValue, children: val }) : val
5494
5515
  },
5495
5516
  vi
5496
5517
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dmitriikapustin/ui",
3
- "version": "0.3.2",
3
+ "version": "0.3.4",
4
4
  "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
5
5
  "author": "Kapustin Team",
6
6
  "license": "MIT",