@tomny-dev/uzi 0.1.7 → 0.1.9-pr.2.1.1

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.css CHANGED
@@ -673,38 +673,84 @@
673
673
  opacity: 0.5;
674
674
  }
675
675
 
676
- /* src/components/dropdown/dropdown.module.css */
676
+ /* src/components/multi-select/multi-select.module.css */
677
677
  .wrapper {
678
678
  position: relative;
679
- display: inline-block;
679
+ display: inline-flex;
680
+ min-width: 0;
681
+ max-width: 100%;
682
+ }
683
+ .wrapper-fullWidth {
684
+ width: 100%;
680
685
  }
681
686
  .trigger {
682
- display: flex;
687
+ width: 100%;
688
+ min-width: 0;
689
+ min-height: 2.125rem;
690
+ display: inline-flex;
683
691
  align-items: center;
684
692
  justify-content: space-between;
685
- gap: 8px;
686
- padding: 6px 10px 6px 14px;
687
- background: var(--ts-dropdown-bg, var(--panel, #111827));
688
- border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
693
+ gap: 0.625rem;
689
694
  border-radius: 8px;
695
+ border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
696
+ background: var(--ts-dropdown-bg, var(--panel, #111827));
690
697
  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
698
+ padding: 6px 12px 6px 14px;
691
699
  font-size: 0.85rem;
692
- font-weight: 500;
700
+ line-height: 1.25rem;
701
+ font-family: inherit;
702
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.12);
703
+ transition:
704
+ border-color 0.15s ease,
705
+ background 0.15s ease,
706
+ color 0.15s ease,
707
+ box-shadow 0.15s ease;
693
708
  cursor: pointer;
694
- white-space: nowrap;
695
- transition: border-color 0.15s;
696
- user-select: none;
709
+ text-align: left;
697
710
  }
698
- .trigger:hover {
711
+ .trigger:hover:not(:disabled) {
699
712
  border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
713
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.16);
700
714
  }
701
- .trigger:focus-visible {
715
+ .trigger:focus-visible,
716
+ .trigger[data-state=open] {
717
+ border-color: var(--ts-dropdown-accent, var(--primary, #22d3ee));
702
718
  outline: var(--focus-ring);
703
719
  outline-offset: var(--focus-ring-offset);
720
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px color-mix(in srgb, var(--primary, #22d3ee) 30%, transparent);
704
721
  }
705
- .trigger-active {
706
- border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
707
- color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
722
+ .trigger:disabled {
723
+ cursor: not-allowed;
724
+ opacity: 0.6;
725
+ box-shadow: none;
726
+ }
727
+ .value {
728
+ min-width: 0;
729
+ display: flex;
730
+ flex: 1;
731
+ flex-wrap: wrap;
732
+ gap: 0.375rem;
733
+ align-items: center;
734
+ }
735
+ .placeholder {
736
+ color: var(--muted-foreground, #94a3b8);
737
+ }
738
+ .chip {
739
+ display: inline-flex;
740
+ align-items: center;
741
+ max-width: 100%;
742
+ padding: 2px 8px;
743
+ border-radius: 999px;
744
+ border: 1px solid color-mix(in srgb, var(--primary, #22d3ee) 32%, transparent);
745
+ background: color-mix(in srgb, var(--primary, #22d3ee) 10%, transparent);
746
+ color: var(--ts-dropdown-text, var(--text, #e2e8f0));
747
+ font-size: 0.75rem;
748
+ font-weight: 600;
749
+ line-height: 1.2;
750
+ white-space: nowrap;
751
+ }
752
+ .chip-summary {
753
+ color: var(--primary, #22d3ee);
708
754
  }
709
755
  .chevron {
710
756
  width: 10px;
@@ -712,62 +758,184 @@
712
758
  display: flex;
713
759
  align-items: center;
714
760
  justify-content: center;
715
- transition: transform 0.15s;
716
761
  color: var(--muted, #94a3b8);
717
762
  flex-shrink: 0;
763
+ transition: transform 0.15s ease, color 0.15s ease;
718
764
  }
719
- .chevron-open {
765
+ .trigger:hover:not(:disabled) .chevron,
766
+ .trigger[data-state=open] .chevron {
767
+ color: var(--ts-dropdown-text, var(--text, #e2e8f0));
768
+ }
769
+ .trigger[data-state=open] .chevron {
720
770
  transform: rotate(180deg);
721
771
  }
722
772
  .menu {
723
773
  position: absolute;
724
774
  top: calc(100% + 6px);
725
775
  left: 0;
776
+ z-index: 50;
726
777
  min-width: 100%;
727
- background: var(--ts-dropdown-bg, var(--panel, #111827));
728
- border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
778
+ max-height: 16rem;
779
+ overflow-y: auto;
780
+ border: 1px solid var(--ts-menu-border, var(--border, #1f2937));
729
781
  border-radius: 10px;
730
- padding: 4px;
731
- z-index: 50;
732
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
733
- animation: dropdownFadeIn 0.1s ease;
782
+ background: var(--ts-menu-bg, var(--popover, var(--panel, #111827)));
783
+ color: var(--ts-menu-fg, var(--popover-foreground, var(--text, #e2e8f0)));
784
+ padding: 0.25rem;
785
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
786
+ animation: menuFadeIn 140ms ease;
787
+ }
788
+ .option {
789
+ width: 100%;
790
+ display: flex;
791
+ align-items: center;
792
+ gap: 0.625rem;
793
+ border: none;
794
+ border-radius: 0.5rem;
795
+ background: transparent;
796
+ color: inherit;
797
+ padding: 0.5rem 0.625rem;
798
+ font: inherit;
799
+ cursor: pointer;
800
+ text-align: left;
801
+ transition: background 0.12s ease, color 0.12s ease;
802
+ }
803
+ .option:hover:not(:disabled),
804
+ .option:focus-visible,
805
+ .option[data-highlighted] {
806
+ background: var(--ts-menu-hover-bg, var(--accent, rgba(255, 255, 255, 0.06)));
807
+ color: var(--ts-menu-hover-fg, var(--accent-foreground, var(--foreground, #e2e8f0)));
808
+ outline: none;
809
+ }
810
+ .option-disabled,
811
+ .option[data-disabled] {
812
+ opacity: 0.5;
813
+ cursor: not-allowed;
814
+ }
815
+ .option-selected .option-label {
816
+ color: var(--primary, #22d3ee);
817
+ }
818
+ .indicator {
819
+ width: 1rem;
820
+ height: 1rem;
821
+ display: inline-flex;
822
+ align-items: center;
823
+ justify-content: center;
824
+ flex-shrink: 0;
825
+ border-radius: 0.3125rem;
826
+ border: 1px solid var(--border, #1f2937);
827
+ color: transparent;
828
+ background: transparent;
829
+ transition:
830
+ border-color 0.12s ease,
831
+ background 0.12s ease,
832
+ color 0.12s ease;
833
+ }
834
+ .indicator-selected {
835
+ border-color: color-mix(in srgb, var(--primary, #22d3ee) 55%, transparent);
836
+ background: color-mix(in srgb, var(--primary, #22d3ee) 12%, transparent);
837
+ color: var(--primary, #22d3ee);
838
+ }
839
+ .indicator-disabled {
840
+ opacity: 0.65;
841
+ }
842
+ .option-label {
843
+ min-width: 0;
844
+ flex: 1;
734
845
  }
735
- @keyframes dropdownFadeIn {
846
+ @keyframes menuFadeIn {
736
847
  from {
737
848
  opacity: 0;
738
- transform: translateY(-4px);
849
+ transform: translateY(-4px) scale(0.98);
739
850
  }
740
851
  to {
741
852
  opacity: 1;
742
- transform: translateY(0);
853
+ transform: translateY(0) scale(1);
743
854
  }
744
855
  }
745
- .option {
746
- display: block;
856
+
857
+ /* src/components/select/select.module.css */
858
+ .wrapper {
859
+ position: relative;
860
+ display: inline-flex;
861
+ min-width: 0;
862
+ max-width: 100%;
863
+ }
864
+ .wrapper-fullWidth {
747
865
  width: 100%;
748
- padding: 8px 12px;
749
- border-radius: 6px;
866
+ }
867
+ .wrapper:not(.wrapper-fullWidth) .select {
868
+ width: auto;
869
+ }
870
+ .select {
871
+ width: 100%;
872
+ min-width: 0;
873
+ min-height: 2.125rem;
874
+ border-radius: 8px;
875
+ border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
876
+ background: var(--ts-dropdown-bg, var(--panel, #111827));
877
+ color: var(--ts-dropdown-text, var(--text, #e2e8f0));
878
+ padding: 6px 32px 6px 14px;
750
879
  font-size: 0.85rem;
880
+ line-height: 1.25rem;
881
+ font-family: inherit;
751
882
  font-weight: 500;
752
- color: var(--muted, #94a3b8);
753
- background: none;
754
- border: none;
883
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.12);
884
+ transition:
885
+ border-color 0.15s ease,
886
+ background 0.15s ease,
887
+ color 0.15s ease,
888
+ box-shadow 0.15s ease;
889
+ appearance: none;
755
890
  cursor: pointer;
756
- text-align: left;
757
- white-space: nowrap;
758
- transition: background 0.1s, color 0.1s;
891
+ text-overflow: ellipsis;
759
892
  }
760
- .option:hover {
761
- background: var(--accent, color-mix(in srgb, var(--primary, #22d3ee) 8%, transparent));
762
- color: var(--ts-dropdown-text, var(--text, #e2e8f0));
893
+ .select:hover:not(:disabled) {
894
+ border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
895
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.16);
763
896
  }
764
- .option:focus-visible {
897
+ .select:focus-visible {
898
+ border-color: var(--ts-dropdown-accent, var(--primary, #22d3ee));
765
899
  outline: var(--focus-ring);
766
900
  outline-offset: var(--focus-ring-offset);
901
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px color-mix(in srgb, var(--primary, #22d3ee) 30%, transparent);
767
902
  }
768
- .option-selected {
769
- color: var(--primary, #22d3ee);
770
- background: color-mix(in srgb, var(--primary, #22d3ee) 8%, transparent);
903
+ .select-placeholder {
904
+ color: var(--muted-foreground, #94a3b8);
905
+ }
906
+ .select:disabled {
907
+ cursor: not-allowed;
908
+ opacity: 0.6;
909
+ box-shadow: none;
910
+ }
911
+ .select option {
912
+ background: var(--background, #0f172a);
913
+ color: var(--foreground, #e2e8f0);
914
+ }
915
+ .chevron {
916
+ pointer-events: none;
917
+ position: absolute;
918
+ right: 0.625rem;
919
+ top: 50%;
920
+ transform: translateY(-50%);
921
+ width: 10px;
922
+ height: 10px;
923
+ display: flex;
924
+ align-items: center;
925
+ justify-content: center;
926
+ color: var(--muted, #94a3b8);
927
+ flex-shrink: 0;
928
+ transition: color 0.15s ease;
929
+ }
930
+ .wrapper:hover .chevron {
931
+ color: var(--ts-dropdown-text, var(--text, #e2e8f0));
932
+ }
933
+ .wrapper:focus-within .chevron {
934
+ color: var(--ts-dropdown-accent, var(--primary, #22d3ee));
935
+ }
936
+ .select:disabled + .chevron {
937
+ color: var(--muted-foreground, #94a3b8);
938
+ opacity: 0.6;
771
939
  }
772
940
 
773
941
  /* src/components/dropdown-menu/dropdown-menu.module.css */
@@ -959,8 +1127,8 @@
959
1127
  display: grid;
960
1128
  grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;
961
1129
  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;
962
- min-height: 100vh;
963
- min-height: 100dvh;
1130
+ height: 100vh;
1131
+ height: 100dvh;
964
1132
  }
965
1133
  .appShellAnimated {
966
1134
  transition: grid-template-columns 200ms ease;
@@ -1044,6 +1212,7 @@
1044
1212
  border-right: 1px solid var(--border);
1045
1213
  background: var(--panel, var(--card, #111827));
1046
1214
  padding: 24px;
1215
+ overflow-y: auto;
1047
1216
  }
1048
1217
  .appShellAnimated .appShellSidebar {
1049
1218
  transition: transform 200ms ease, opacity 200ms ease;
@@ -1152,7 +1321,7 @@
1152
1321
  flex-direction: column;
1153
1322
  gap: 12px;
1154
1323
  align-items: stretch;
1155
- min-height: 100%;
1324
+ min-height: 0;
1156
1325
  }
1157
1326
  .uziSidebarNavCollapsed {
1158
1327
  gap: 10px;
@@ -1339,4 +1508,55 @@ button.uziSidebarNavItem {
1339
1508
  font-size: 13px;
1340
1509
  }
1341
1510
  }
1511
+
1512
+ /* src/components/skeleton/skeleton.module.css */
1513
+ .skeleton {
1514
+ background: color-mix(in srgb, var(--muted-foreground, #94a3b8) 14%, var(--background, #0f172a));
1515
+ animation: skeleton-pulse 1.6s ease-in-out infinite;
1516
+ }
1517
+ @keyframes skeleton-pulse {
1518
+ 0%, 100% {
1519
+ opacity: 1;
1520
+ }
1521
+ 50% {
1522
+ opacity: 0.45;
1523
+ }
1524
+ }
1525
+ .radius-sm {
1526
+ border-radius: 4px;
1527
+ }
1528
+ .radius-md {
1529
+ border-radius: 8px;
1530
+ }
1531
+ .radius-lg {
1532
+ border-radius: 12px;
1533
+ }
1534
+ .radius-full {
1535
+ border-radius: 9999px;
1536
+ }
1537
+
1538
+ /* src/components/progress/progress.module.css */
1539
+ .track {
1540
+ height: 8px;
1541
+ border-radius: 9999px;
1542
+ overflow: hidden;
1543
+ background: color-mix(in srgb, var(--border, #1f2937) 60%, transparent);
1544
+ }
1545
+ .fill {
1546
+ height: 100%;
1547
+ border-radius: 9999px;
1548
+ transition: width 0.4s ease;
1549
+ }
1550
+ .tone-default {
1551
+ background: var(--foreground, #e2e8f0);
1552
+ }
1553
+ .tone-success {
1554
+ background: var(--success, hsl(142 71% 45%));
1555
+ }
1556
+ .tone-warning {
1557
+ background: var(--warning, hsl(38 92% 50%));
1558
+ }
1559
+ .tone-danger {
1560
+ background: var(--destructive, #f87171);
1561
+ }
1342
1562
  /*# sourceMappingURL=index.css.map */