@lumen-stack/react 0.3.1 → 0.4.0
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 +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/styles.css +217 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -842,3 +842,220 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
|
|
|
842
842
|
clip: rect(0 0 0 0);
|
|
843
843
|
white-space: nowrap;
|
|
844
844
|
}
|
|
845
|
+
|
|
846
|
+
/* ─── Wizard: stepper ────────────────────────────────────────────────── */
|
|
847
|
+
.lumen-pane { display: block; }
|
|
848
|
+
.lumen-stepper {
|
|
849
|
+
display: flex;
|
|
850
|
+
align-items: center;
|
|
851
|
+
gap: 8px;
|
|
852
|
+
padding: 10px 16px 12px;
|
|
853
|
+
border-bottom: 1px solid var(--lumen-border);
|
|
854
|
+
flex-shrink: 0;
|
|
855
|
+
}
|
|
856
|
+
.lumen-step { display: flex; align-items: center; gap: 8px; flex: 1; }
|
|
857
|
+
.lumen-step:last-child { flex: 0; }
|
|
858
|
+
.lumen-step-num {
|
|
859
|
+
width: 22px;
|
|
860
|
+
height: 22px;
|
|
861
|
+
border-radius: 999px;
|
|
862
|
+
display: grid;
|
|
863
|
+
place-items: center;
|
|
864
|
+
font-size: 12px;
|
|
865
|
+
font-weight: 600;
|
|
866
|
+
border: 1px solid var(--lumen-border-strong);
|
|
867
|
+
color: var(--lumen-fg-muted);
|
|
868
|
+
background: var(--lumen-bg-elev);
|
|
869
|
+
flex-shrink: 0;
|
|
870
|
+
transition: all var(--lumen-dur) var(--lumen-ease);
|
|
871
|
+
}
|
|
872
|
+
.lumen-step-lbl {
|
|
873
|
+
font-size: var(--lumen-fs-13);
|
|
874
|
+
color: var(--lumen-fg-subtle);
|
|
875
|
+
white-space: nowrap;
|
|
876
|
+
transition: color var(--lumen-dur) var(--lumen-ease);
|
|
877
|
+
}
|
|
878
|
+
.lumen-step-bar {
|
|
879
|
+
flex: 1;
|
|
880
|
+
height: 2px;
|
|
881
|
+
border-radius: 2px;
|
|
882
|
+
background: var(--lumen-border);
|
|
883
|
+
position: relative;
|
|
884
|
+
overflow: hidden;
|
|
885
|
+
}
|
|
886
|
+
.lumen-step-bar::after {
|
|
887
|
+
content: "";
|
|
888
|
+
position: absolute;
|
|
889
|
+
inset: 0;
|
|
890
|
+
width: 0;
|
|
891
|
+
background: var(--lumen-fg);
|
|
892
|
+
transition: width var(--lumen-dur) var(--lumen-ease);
|
|
893
|
+
}
|
|
894
|
+
.lumen-step-done .lumen-step-num {
|
|
895
|
+
background: var(--lumen-fg);
|
|
896
|
+
color: var(--lumen-accent-fg);
|
|
897
|
+
border-color: var(--lumen-fg);
|
|
898
|
+
}
|
|
899
|
+
.lumen-step-done .lumen-step-lbl { color: var(--lumen-fg-muted); }
|
|
900
|
+
.lumen-step-done .lumen-step-bar::after { width: 100%; }
|
|
901
|
+
.lumen-step-active .lumen-step-num {
|
|
902
|
+
border-color: var(--lumen-fg);
|
|
903
|
+
color: var(--lumen-fg);
|
|
904
|
+
box-shadow: 0 0 0 3px var(--lumen-focus-ring);
|
|
905
|
+
}
|
|
906
|
+
.lumen-step-active .lumen-step-lbl { color: var(--lumen-fg); font-weight: 500; }
|
|
907
|
+
|
|
908
|
+
/* ─── Wizard: step 1 capture method ──────────────────────────────────── */
|
|
909
|
+
.lumen-method {
|
|
910
|
+
display: grid;
|
|
911
|
+
grid-template-columns: repeat(3, 1fr);
|
|
912
|
+
gap: 6px;
|
|
913
|
+
padding: 12px 16px;
|
|
914
|
+
}
|
|
915
|
+
.lumen-method-btn {
|
|
916
|
+
appearance: none;
|
|
917
|
+
cursor: pointer;
|
|
918
|
+
background: var(--lumen-bg-elev);
|
|
919
|
+
border: 1px solid var(--lumen-border);
|
|
920
|
+
border-radius: var(--lumen-r-md);
|
|
921
|
+
color: var(--lumen-fg-muted);
|
|
922
|
+
padding: 10px 8px;
|
|
923
|
+
display: flex;
|
|
924
|
+
flex-direction: column;
|
|
925
|
+
align-items: center;
|
|
926
|
+
gap: 4px;
|
|
927
|
+
transition: all var(--lumen-dur-fast) var(--lumen-ease);
|
|
928
|
+
}
|
|
929
|
+
.lumen-method-btn:hover:not(:disabled) {
|
|
930
|
+
border-color: var(--lumen-border-strong);
|
|
931
|
+
color: var(--lumen-fg);
|
|
932
|
+
}
|
|
933
|
+
.lumen-method-btn:disabled { opacity: 0.55; cursor: default; }
|
|
934
|
+
.lumen-method-btn[aria-pressed="true"] {
|
|
935
|
+
background: var(--lumen-bg);
|
|
936
|
+
color: var(--lumen-fg);
|
|
937
|
+
border-color: var(--lumen-fg);
|
|
938
|
+
box-shadow: var(--lumen-shadow-sm);
|
|
939
|
+
}
|
|
940
|
+
.lumen-method-btn:focus-visible {
|
|
941
|
+
outline: 2px solid var(--lumen-focus-ring);
|
|
942
|
+
outline-offset: 2px;
|
|
943
|
+
}
|
|
944
|
+
.lumen-method-label { font-size: var(--lumen-fs-13); font-weight: 500; }
|
|
945
|
+
.lumen-method-hint { font-size: var(--lumen-fs-12); color: var(--lumen-fg-subtle); }
|
|
946
|
+
.lumen-method-btn[aria-pressed="true"] .lumen-method-hint {
|
|
947
|
+
color: var(--lumen-fg-muted);
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
.lumen-cap-empty {
|
|
951
|
+
display: flex;
|
|
952
|
+
flex-direction: column;
|
|
953
|
+
align-items: center;
|
|
954
|
+
gap: 12px;
|
|
955
|
+
text-align: center;
|
|
956
|
+
color: var(--lumen-fg-subtle);
|
|
957
|
+
font-size: var(--lumen-fs-13);
|
|
958
|
+
margin: 4px 16px 8px;
|
|
959
|
+
padding: 28px 16px;
|
|
960
|
+
border: 1px dashed var(--lumen-border-strong);
|
|
961
|
+
border-radius: var(--lumen-r-md);
|
|
962
|
+
background: var(--lumen-bg-elev);
|
|
963
|
+
}
|
|
964
|
+
.lumen-cap-empty p { margin: 0; max-width: 36ch; line-height: 1.45; }
|
|
965
|
+
|
|
966
|
+
.lumen-cap-actions {
|
|
967
|
+
display: flex;
|
|
968
|
+
align-items: center;
|
|
969
|
+
gap: 10px;
|
|
970
|
+
flex-wrap: wrap;
|
|
971
|
+
padding: 10px 16px 4px;
|
|
972
|
+
}
|
|
973
|
+
.lumen-cap-note { font-size: var(--lumen-fs-12); color: var(--lumen-fg-subtle); }
|
|
974
|
+
|
|
975
|
+
/* ─── Wizard: step 3 review ──────────────────────────────────────────── */
|
|
976
|
+
.lumen-review { padding: 8px 16px 16px; }
|
|
977
|
+
.lumen-review-row {
|
|
978
|
+
display: flex;
|
|
979
|
+
align-items: flex-start;
|
|
980
|
+
justify-content: space-between;
|
|
981
|
+
gap: 12px;
|
|
982
|
+
padding: 11px 0;
|
|
983
|
+
border-bottom: 1px solid var(--lumen-border);
|
|
984
|
+
}
|
|
985
|
+
.lumen-review-row:last-child { border-bottom: 0; }
|
|
986
|
+
.lumen-review-k {
|
|
987
|
+
font-size: var(--lumen-fs-12);
|
|
988
|
+
color: var(--lumen-fg-subtle);
|
|
989
|
+
text-transform: uppercase;
|
|
990
|
+
letter-spacing: 0.03em;
|
|
991
|
+
width: 84px;
|
|
992
|
+
flex-shrink: 0;
|
|
993
|
+
padding-top: 3px;
|
|
994
|
+
}
|
|
995
|
+
.lumen-review-v {
|
|
996
|
+
font-size: var(--lumen-fs-14);
|
|
997
|
+
color: var(--lumen-fg);
|
|
998
|
+
flex: 1;
|
|
999
|
+
display: flex;
|
|
1000
|
+
flex-wrap: wrap;
|
|
1001
|
+
align-items: center;
|
|
1002
|
+
gap: 8px;
|
|
1003
|
+
}
|
|
1004
|
+
.lumen-chip {
|
|
1005
|
+
display: inline-flex;
|
|
1006
|
+
align-items: center;
|
|
1007
|
+
gap: 6px;
|
|
1008
|
+
padding: 3px 10px;
|
|
1009
|
+
border-radius: 999px;
|
|
1010
|
+
background: var(--lumen-bg-elev);
|
|
1011
|
+
border: 1px solid var(--lumen-border);
|
|
1012
|
+
font-size: var(--lumen-fs-13);
|
|
1013
|
+
font-weight: 500;
|
|
1014
|
+
}
|
|
1015
|
+
.lumen-edit {
|
|
1016
|
+
background: none;
|
|
1017
|
+
border: 0;
|
|
1018
|
+
color: var(--lumen-fg-subtle);
|
|
1019
|
+
font: inherit;
|
|
1020
|
+
font-size: var(--lumen-fs-12);
|
|
1021
|
+
cursor: pointer;
|
|
1022
|
+
text-decoration: underline;
|
|
1023
|
+
padding: 0;
|
|
1024
|
+
}
|
|
1025
|
+
.lumen-edit:hover { color: var(--lumen-fg); }
|
|
1026
|
+
.lumen-muted-empty { color: var(--lumen-fg-subtle); font-style: italic; }
|
|
1027
|
+
.lumen-attach-row { gap: 6px; }
|
|
1028
|
+
.lumen-attach {
|
|
1029
|
+
display: inline-flex;
|
|
1030
|
+
align-items: center;
|
|
1031
|
+
gap: 6px;
|
|
1032
|
+
padding: 3px 9px;
|
|
1033
|
+
border-radius: 999px;
|
|
1034
|
+
background: var(--lumen-bg-elev);
|
|
1035
|
+
border: 1px solid var(--lumen-border);
|
|
1036
|
+
font-size: var(--lumen-fs-12);
|
|
1037
|
+
color: var(--lumen-fg-muted);
|
|
1038
|
+
}
|
|
1039
|
+
.lumen-att-x {
|
|
1040
|
+
background: none;
|
|
1041
|
+
border: 0;
|
|
1042
|
+
color: var(--lumen-fg-subtle);
|
|
1043
|
+
cursor: pointer;
|
|
1044
|
+
font-size: 13px;
|
|
1045
|
+
line-height: 1;
|
|
1046
|
+
padding: 0 0 0 2px;
|
|
1047
|
+
}
|
|
1048
|
+
.lumen-att-x:hover { color: var(--lumen-fg); }
|
|
1049
|
+
.lumen-add-btn { padding: 5px 10px; font-size: 12px; }
|
|
1050
|
+
|
|
1051
|
+
/* ─── Wizard: mobile refinements ─────────────────────────────────────── */
|
|
1052
|
+
@media (max-width: 640px) {
|
|
1053
|
+
.lumen-step:not(.lumen-step-active) .lumen-step-lbl { display: none; }
|
|
1054
|
+
.lumen-method-hint { display: none; }
|
|
1055
|
+
.lumen-modal-actions { width: 100%; }
|
|
1056
|
+
.lumen-modal-actions .lumen-btn-primary,
|
|
1057
|
+
.lumen-modal-actions .lumen-btn-ghost {
|
|
1058
|
+
flex: 1;
|
|
1059
|
+
padding: 12px 16px;
|
|
1060
|
+
}
|
|
1061
|
+
}
|