@godxjp/ui 9.2.0 → 11.0.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/README.md +58 -29
- package/dist/app/index.d.ts +1 -1
- package/dist/app/index.js +4 -4
- package/dist/{app.prop-UTc4j4nj.d.ts → app.prop-Cy6dJnU8.d.ts} +18 -40
- package/dist/{checkbox-ChRsR7Nk.d.ts → checkbox-em-oFM5D.d.ts} +1 -1
- package/dist/{chunk-LJLGABFV.js → chunk-2HXZT2WJ.js} +17 -9
- package/dist/{chunk-QLMXEJSY.js → chunk-3Q4A4U2P.js} +24 -1
- package/dist/{chunk-26CPAKUP.js → chunk-44YRPSZ7.js} +1 -2
- package/dist/{chunk-HB2OHB5X.js → chunk-5NCFLCM7.js} +27 -16
- package/dist/{chunk-FXFJF4YA.js → chunk-6CSBMMZS.js} +262 -31
- package/dist/{chunk-457KVJTX.js → chunk-7Q45MBFW.js} +7 -5
- package/dist/{chunk-O24Z3ULJ.js → chunk-BE6GJGKJ.js} +1 -1
- package/dist/{chunk-FVPCVZL3.js → chunk-BG5RNXTH.js} +1 -1
- package/dist/{chunk-AINW5WYN.js → chunk-COD66MFF.js} +1 -2
- package/dist/{chunk-IOGU3ZWF.js → chunk-DNGJHWJZ.js} +3 -3
- package/dist/{chunk-3TS3G4U3.js → chunk-EE5DKOHX.js} +3 -1
- package/dist/{chunk-BHV2FUOA.js → chunk-EZHHJQWQ.js} +1 -1
- package/dist/{chunk-G6Q32VHO.js → chunk-FAB3LMTK.js} +33 -8
- package/dist/{chunk-N3JPLJ3B.js → chunk-GDDCSKCB.js} +12 -5
- package/dist/{chunk-RLGHEV4A.js → chunk-HTG5VHU7.js} +10 -1
- package/dist/{chunk-R2W2FX5Q.js → chunk-I7NQ2LIL.js} +1 -9
- package/dist/{chunk-XQMPK4GM.js → chunk-IHRMOJXD.js} +86 -39
- package/dist/{chunk-TILFZBTE.js → chunk-INIIF7F7.js} +1 -4
- package/dist/{chunk-UIYEAUWA.js → chunk-IY347EQA.js} +2 -2
- package/dist/{chunk-HCM4JAC2.js → chunk-JWGLJXQU.js} +39 -11
- package/dist/{chunk-TO33OY4L.js → chunk-LMKUKCTN.js} +1 -1
- package/dist/chunk-NXVCI6YB.js +453 -0
- package/dist/{chunk-O2OUNXV4.js → chunk-P5KPCT6R.js} +3 -3
- package/dist/{chunk-6HQMUUQW.js → chunk-PDXFQS7M.js} +14 -30
- package/dist/{chunk-26WDEDWL.js → chunk-PUGEOUWZ.js} +32 -23
- package/dist/{chunk-F7PG4OEV.js → chunk-QSGW3ZWK.js} +12 -4
- package/dist/{chunk-E7HBHUJY.js → chunk-QVLUCB47.js} +8 -6
- package/dist/{chunk-25RYBC5T.js → chunk-S2IJKT3D.js} +1 -1
- package/dist/{chunk-OJZ6C2HM.js → chunk-SARQRCKO.js} +54 -48
- package/dist/chunk-T2QO2S65.js +126 -0
- package/dist/{chunk-6J7GRCDA.js → chunk-UNVRNJCB.js} +71 -11
- package/dist/{chunk-S6TBIL7J.js → chunk-USNR424B.js} +63 -44
- package/dist/{chunk-6YBYAEXD.js → chunk-VSM44AYE.js} +94 -24
- package/dist/{chunk-QWLXN6CT.js → chunk-VSUYVT2Q.js} +3 -2
- package/dist/{chunk-4R7QL3MW.js → chunk-X2VY4MOW.js} +14 -29
- package/dist/{chunk-ETLAI3QU.js → chunk-Z46J47FY.js} +73 -77
- package/dist/components/admin/index.d.ts +22 -12
- package/dist/components/admin/index.js +29 -30
- package/dist/components/data-display/badge.js +3 -3
- package/dist/components/data-display/card.d.ts +3 -3
- package/dist/components/data-display/card.js +1 -1
- package/dist/components/data-display/carousel.js +3 -1
- package/dist/components/data-display/index.js +55 -33
- package/dist/components/data-entry/calendar.d.ts +1 -1
- package/dist/components/data-entry/calendar.js +1 -1
- package/dist/components/data-entry/cascader.d.ts +1 -1
- package/dist/components/data-entry/cascader.js +5 -5
- package/dist/components/data-entry/checkbox.d.ts +2 -2
- package/dist/components/data-entry/checkbox.js +2 -2
- package/dist/components/data-entry/color-picker.d.ts +1 -1
- package/dist/components/data-entry/color-picker.js +3 -3
- package/dist/components/data-entry/date-picker.d.ts +2 -2
- package/dist/components/data-entry/date-picker.js +4 -4
- package/dist/components/data-entry/date-range-picker.d.ts +2 -2
- package/dist/components/data-entry/date-range-picker.js +4 -4
- package/dist/components/data-entry/index.d.ts +9 -25
- package/dist/components/data-entry/index.js +22 -26
- package/dist/components/data-entry/radio.d.ts +1 -1
- package/dist/components/data-entry/radio.js +2 -2
- package/dist/components/data-entry/select.d.ts +2 -2
- package/dist/components/data-entry/select.js +3 -4
- package/dist/components/data-entry/slider.d.ts +1 -1
- package/dist/components/data-entry/switch.d.ts +2 -2
- package/dist/components/data-entry/switch.js +1 -1
- package/dist/components/data-entry/time-input.js +2 -2
- package/dist/components/data-entry/time-picker.d.ts +3 -1
- package/dist/components/data-entry/time-picker.js +3 -3
- package/dist/components/data-entry/transfer.d.ts +2 -2
- package/dist/components/data-entry/transfer.js +5 -5
- package/dist/components/data-entry/tree-select.d.ts +1 -1
- package/dist/components/data-entry/tree-select.js +5 -5
- package/dist/components/data-entry/upload.d.ts +2 -2
- package/dist/components/data-entry/upload.js +5 -5
- package/dist/components/feedback/alert.js +5 -5
- package/dist/components/feedback/dialog.js +3 -3
- package/dist/components/feedback/index.d.ts +4 -4
- package/dist/components/feedback/index.js +9 -9
- package/dist/components/feedback/sheet.js +1 -1
- package/dist/components/layout/index.d.ts +6 -9
- package/dist/components/layout/index.js +6 -4
- package/dist/components/navigation/dropdown-menu.js +1 -1
- package/dist/components/navigation/index.d.ts +14 -16
- package/dist/components/navigation/index.js +7 -8
- package/dist/components/navigation/pagination.d.ts +11 -8
- package/dist/components/navigation/pagination.js +4 -5
- package/dist/components/navigation/steps.d.ts +3 -3
- package/dist/components/navigation/steps.js +3 -1
- package/dist/components/query/index.d.ts +1 -5
- package/dist/components/query/index.js +6 -8
- package/dist/components/ui/index.d.ts +5 -7
- package/dist/components/ui/index.js +30 -33
- package/dist/{data-entry.prop-CDkOajPj.d.ts → data-entry.prop-BR4vNA1j.d.ts} +7 -35
- package/dist/filter-bar-BxjSJJnQ.d.ts +7 -0
- package/dist/{inline-CDSVAN54.d.ts → flex-D_EXRFSW.d.ts} +2 -8
- package/dist/form/index.js +1 -1
- package/dist/i18n/index.d.ts +82 -10
- package/dist/i18n/index.js +2 -2
- package/dist/index.d.ts +6 -6
- package/dist/index.js +41 -44
- package/dist/lib/datetime/index.js +1 -1
- package/dist/{navigation.prop-8DgElO0c.d.ts → navigation.prop-DMcXkR-J.d.ts} +9 -11
- package/dist/{password-strength-kQkloEeo.d.ts → password-strength-DVRvXEOK.d.ts} +2 -2
- package/dist/props/components/index.d.ts +3 -3
- package/dist/props/index.d.ts +3 -3
- package/dist/props/index.js +1 -1
- package/dist/props/registry.d.ts +84 -39
- package/dist/props/registry.js +1 -1
- package/dist/{search-input-cezAxpgb.d.ts → search-input-DpqDMXcn.d.ts} +2 -4
- package/dist/{skeleton-uWAjSacg.d.ts → skeleton-cj9kh5wo.d.ts} +1 -3
- package/dist/styles/control.css +176 -41
- package/dist/styles/data-display-layout.css +41 -15
- package/dist/styles/feedback-layout.css +44 -12
- package/dist/styles/index.css +45 -1
- package/dist/styles/layout.css +18 -17
- package/dist/styles/navigation-layout.css +3 -1
- package/dist/styles/shell-layout.css +3 -3
- package/dist/styles/table-layout.css +13 -0
- package/dist/tokens/foundation.css +12 -1
- package/dist/tokens/semantic/layout.css +2 -2
- package/package.json +6 -7
- package/scripts/ui-audit.mjs +35 -2
- package/dist/chunk-6MCI7W5G.js +0 -201
- package/dist/chunk-CAEL2ZD2.js +0 -222
- package/dist/chunk-GKXPALFT.js +0 -32
- package/dist/chunk-JKHWLPM5.js +0 -101
- package/dist/chunk-KDBGFJJI.js +0 -220
- package/dist/components/data-entry/autocomplete.d.ts +0 -24
- package/dist/components/data-entry/autocomplete.js +0 -10
- package/dist/components/data-entry/combobox.d.ts +0 -22
- package/dist/components/data-entry/combobox.js +0 -6
- package/dist/filter-bar-B5TPUqEO.d.ts +0 -14
- /package/dist/{chunk-LDSLS6HE.js → chunk-7CFO5FFE.js} +0 -0
package/dist/styles/control.css
CHANGED
|
@@ -572,59 +572,194 @@
|
|
|
572
572
|
}
|
|
573
573
|
|
|
574
574
|
/* PasswordInput */
|
|
575
|
-
.ui-password-input {
|
|
576
|
-
|
|
575
|
+
.ui-password-input {
|
|
576
|
+
position: relative;
|
|
577
|
+
display: block;
|
|
578
|
+
}
|
|
579
|
+
.ui-password-input-field {
|
|
580
|
+
padding-right: 2.5rem;
|
|
581
|
+
}
|
|
577
582
|
.ui-password-input-toggle {
|
|
578
|
-
position: absolute;
|
|
579
|
-
|
|
580
|
-
|
|
583
|
+
position: absolute;
|
|
584
|
+
inset-block: 0;
|
|
585
|
+
inset-inline-end: 0;
|
|
586
|
+
display: inline-flex;
|
|
587
|
+
align-items: center;
|
|
588
|
+
justify-content: center;
|
|
589
|
+
width: 2.5rem;
|
|
590
|
+
color: hsl(var(--muted-foreground));
|
|
591
|
+
background: transparent;
|
|
592
|
+
border: 0;
|
|
593
|
+
cursor: pointer;
|
|
594
|
+
}
|
|
595
|
+
.ui-password-input-toggle:hover {
|
|
596
|
+
color: hsl(var(--foreground));
|
|
597
|
+
}
|
|
598
|
+
.ui-password-input-toggle svg {
|
|
599
|
+
width: 1rem;
|
|
600
|
+
height: 1rem;
|
|
581
601
|
}
|
|
582
|
-
.ui-password-input-toggle:hover { color: hsl(var(--foreground)); }
|
|
583
|
-
.ui-password-input-toggle svg { width: 1rem; height: 1rem; }
|
|
584
602
|
|
|
585
603
|
/* InputOTP */
|
|
586
|
-
.ui-otp-container {
|
|
587
|
-
|
|
588
|
-
|
|
604
|
+
.ui-otp-container {
|
|
605
|
+
display: flex;
|
|
606
|
+
align-items: center;
|
|
607
|
+
gap: var(--space-2);
|
|
608
|
+
}
|
|
609
|
+
.ui-otp-input:disabled {
|
|
610
|
+
cursor: not-allowed;
|
|
611
|
+
}
|
|
612
|
+
.ui-otp-group {
|
|
613
|
+
display: flex;
|
|
614
|
+
align-items: center;
|
|
615
|
+
}
|
|
589
616
|
.ui-otp-slot {
|
|
590
|
-
position: relative;
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
617
|
+
position: relative;
|
|
618
|
+
display: flex;
|
|
619
|
+
width: 2.25rem;
|
|
620
|
+
height: 2.25rem;
|
|
621
|
+
align-items: center;
|
|
622
|
+
justify-content: center;
|
|
623
|
+
font-size: 0.875rem;
|
|
624
|
+
border: 1px solid hsl(var(--border));
|
|
625
|
+
border-inline-start-width: 0;
|
|
626
|
+
background: hsl(var(--background));
|
|
627
|
+
transition: box-shadow 0.15s ease;
|
|
594
628
|
}
|
|
595
629
|
.ui-otp-group .ui-otp-slot:first-child {
|
|
596
|
-
border-inline-start-width: 1px;
|
|
630
|
+
border-inline-start-width: 1px;
|
|
631
|
+
border-start-start-radius: var(--radius-md);
|
|
632
|
+
border-end-start-radius: var(--radius-md);
|
|
633
|
+
}
|
|
634
|
+
.ui-otp-group .ui-otp-slot:last-child {
|
|
635
|
+
border-start-end-radius: var(--radius-md);
|
|
636
|
+
border-end-end-radius: var(--radius-md);
|
|
637
|
+
}
|
|
638
|
+
.ui-otp-slot[data-active="true"] {
|
|
639
|
+
z-index: 1;
|
|
640
|
+
box-shadow: 0 0 0 2px hsl(var(--ring));
|
|
641
|
+
}
|
|
642
|
+
.ui-otp-caret-wrapper {
|
|
643
|
+
position: absolute;
|
|
644
|
+
inset: 0;
|
|
645
|
+
display: flex;
|
|
646
|
+
align-items: center;
|
|
647
|
+
justify-content: center;
|
|
648
|
+
}
|
|
649
|
+
.ui-otp-caret {
|
|
650
|
+
width: 1px;
|
|
651
|
+
height: 1rem;
|
|
652
|
+
background: hsl(var(--foreground));
|
|
653
|
+
animation: ui-otp-blink 1s step-end infinite;
|
|
654
|
+
}
|
|
655
|
+
@keyframes ui-otp-blink {
|
|
656
|
+
50% {
|
|
657
|
+
opacity: 0;
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
.ui-otp-separator-icon {
|
|
661
|
+
width: 1rem;
|
|
662
|
+
height: 1rem;
|
|
663
|
+
color: hsl(var(--muted-foreground));
|
|
597
664
|
}
|
|
598
|
-
.ui-otp-group .ui-otp-slot:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
|
|
599
|
-
.ui-otp-slot[data-active="true"] { z-index: 1; box-shadow: 0 0 0 2px hsl(var(--ring)); }
|
|
600
|
-
.ui-otp-caret-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
|
|
601
|
-
.ui-otp-caret { width: 1px; height: 1rem; background: hsl(var(--foreground)); animation: ui-otp-blink 1s step-end infinite; }
|
|
602
|
-
@keyframes ui-otp-blink { 50% { opacity: 0; } }
|
|
603
|
-
.ui-otp-separator-icon { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
|
|
604
665
|
|
|
605
666
|
/* Rating */
|
|
606
|
-
.ui-rating {
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
.ui-rating-star
|
|
612
|
-
|
|
667
|
+
.ui-rating {
|
|
668
|
+
display: inline-flex;
|
|
669
|
+
align-items: center;
|
|
670
|
+
gap: var(--space-1);
|
|
671
|
+
}
|
|
672
|
+
.ui-rating-star {
|
|
673
|
+
/* ≥24px hit area (WCAG 2.5.8) around the 20px glyph */
|
|
674
|
+
display: inline-flex;
|
|
675
|
+
align-items: center;
|
|
676
|
+
justify-content: center;
|
|
677
|
+
min-width: 1.5rem;
|
|
678
|
+
min-height: 1.5rem;
|
|
679
|
+
background: transparent;
|
|
680
|
+
border: 0;
|
|
681
|
+
padding: 0;
|
|
682
|
+
cursor: pointer;
|
|
683
|
+
color: hsl(var(--muted-foreground) / 0.45);
|
|
684
|
+
line-height: 0;
|
|
685
|
+
}
|
|
686
|
+
.ui-rating-star:disabled {
|
|
687
|
+
cursor: default;
|
|
688
|
+
}
|
|
689
|
+
.ui-rating-star svg {
|
|
690
|
+
width: 1.25rem;
|
|
691
|
+
height: 1.25rem;
|
|
692
|
+
}
|
|
693
|
+
.ui-rating-star-filled {
|
|
694
|
+
color: hsl(var(--warning));
|
|
695
|
+
}
|
|
696
|
+
.ui-rating-star-filled svg {
|
|
697
|
+
fill: currentColor;
|
|
698
|
+
}
|
|
699
|
+
.ui-rating-star:focus-visible {
|
|
700
|
+
outline: 2px solid hsl(var(--ring));
|
|
701
|
+
outline-offset: 2px;
|
|
702
|
+
border-radius: var(--radius-sm);
|
|
703
|
+
}
|
|
613
704
|
|
|
614
705
|
/* TagInput */
|
|
615
706
|
.ui-tag-input {
|
|
616
|
-
display: flex;
|
|
617
|
-
|
|
618
|
-
|
|
707
|
+
display: flex;
|
|
708
|
+
flex-wrap: wrap;
|
|
709
|
+
align-items: center;
|
|
710
|
+
gap: var(--space-1);
|
|
711
|
+
min-height: 2.25rem;
|
|
712
|
+
padding: var(--space-1) var(--space-2);
|
|
713
|
+
border: 1px solid hsl(var(--input));
|
|
714
|
+
border-radius: var(--radius-md);
|
|
715
|
+
background: hsl(var(--background));
|
|
716
|
+
}
|
|
717
|
+
.ui-tag-input:focus-within {
|
|
718
|
+
box-shadow: 0 0 0 2px hsl(var(--ring));
|
|
719
|
+
border-color: hsl(var(--ring));
|
|
720
|
+
}
|
|
721
|
+
.ui-tag-input-disabled {
|
|
722
|
+
opacity: 0.6;
|
|
723
|
+
cursor: not-allowed;
|
|
619
724
|
}
|
|
620
|
-
.ui-tag-input:focus-within { box-shadow: 0 0 0 2px hsl(var(--ring)); border-color: hsl(var(--ring)); }
|
|
621
|
-
.ui-tag-input-disabled { opacity: 0.6; cursor: not-allowed; }
|
|
622
725
|
.ui-tag-input-chip {
|
|
623
|
-
display: inline-flex;
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
726
|
+
display: inline-flex;
|
|
727
|
+
align-items: center;
|
|
728
|
+
gap: var(--space-1);
|
|
729
|
+
font-size: 0.8125rem;
|
|
730
|
+
padding: 0.0625rem var(--space-2);
|
|
731
|
+
border-radius: var(--radius-sm);
|
|
732
|
+
background: hsl(var(--secondary));
|
|
733
|
+
color: hsl(var(--secondary-foreground));
|
|
734
|
+
}
|
|
735
|
+
.ui-tag-input-remove {
|
|
736
|
+
/* ≥24px hit area (WCAG 2.5.8) around the 12px glyph; negative inline margin keeps the chip tight */
|
|
737
|
+
display: inline-flex;
|
|
738
|
+
align-items: center;
|
|
739
|
+
justify-content: center;
|
|
740
|
+
min-width: 1.5rem;
|
|
741
|
+
min-height: 1.5rem;
|
|
742
|
+
margin-inline-end: -0.25rem;
|
|
743
|
+
background: transparent;
|
|
744
|
+
border: 0;
|
|
745
|
+
padding: 0;
|
|
746
|
+
cursor: pointer;
|
|
747
|
+
color: inherit;
|
|
748
|
+
opacity: 0.7;
|
|
749
|
+
}
|
|
750
|
+
.ui-tag-input-remove:hover {
|
|
751
|
+
opacity: 1;
|
|
752
|
+
}
|
|
753
|
+
.ui-tag-input-remove svg {
|
|
754
|
+
width: 0.75rem;
|
|
755
|
+
height: 0.75rem;
|
|
756
|
+
}
|
|
757
|
+
.ui-tag-input-field {
|
|
758
|
+
flex: 1;
|
|
759
|
+
min-width: 6rem;
|
|
760
|
+
border: 0;
|
|
761
|
+
outline: none;
|
|
762
|
+
background: transparent;
|
|
763
|
+
font-size: 0.875rem;
|
|
764
|
+
color: inherit;
|
|
765
|
+
}
|
|
@@ -184,32 +184,58 @@
|
|
|
184
184
|
margin-top: var(--space-1);
|
|
185
185
|
font-size: var(--font-size-sm);
|
|
186
186
|
}
|
|
187
|
-
|
|
188
187
|
}
|
|
189
188
|
|
|
190
189
|
/* Accordion */
|
|
191
|
-
.ui-accordion-item {
|
|
192
|
-
|
|
190
|
+
.ui-accordion-item {
|
|
191
|
+
border-bottom: 1px solid hsl(var(--border));
|
|
192
|
+
}
|
|
193
|
+
.ui-accordion-header {
|
|
194
|
+
display: flex;
|
|
195
|
+
}
|
|
193
196
|
.ui-accordion-trigger {
|
|
194
|
-
display: flex;
|
|
195
|
-
|
|
197
|
+
display: flex;
|
|
198
|
+
flex: 1;
|
|
199
|
+
align-items: center;
|
|
200
|
+
justify-content: space-between;
|
|
201
|
+
gap: var(--space-2);
|
|
202
|
+
padding-block: var(--space-4);
|
|
203
|
+
font-weight: 500;
|
|
204
|
+
text-align: left;
|
|
196
205
|
transition: color 0.15s ease;
|
|
197
206
|
}
|
|
198
|
-
.ui-accordion-trigger:hover {
|
|
207
|
+
.ui-accordion-trigger:hover {
|
|
208
|
+
text-decoration: underline;
|
|
209
|
+
}
|
|
199
210
|
.ui-accordion-chevron {
|
|
200
|
-
width: 1rem;
|
|
201
|
-
|
|
211
|
+
width: 1rem;
|
|
212
|
+
height: 1rem;
|
|
213
|
+
color: hsl(var(--muted-foreground));
|
|
214
|
+
transition: transform 0.2s ease;
|
|
215
|
+
flex-shrink: 0;
|
|
216
|
+
}
|
|
217
|
+
.ui-accordion-trigger[data-state="open"] .ui-accordion-chevron {
|
|
218
|
+
transform: rotate(180deg);
|
|
219
|
+
}
|
|
220
|
+
.ui-accordion-content {
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
font-size: 0.875rem;
|
|
223
|
+
}
|
|
224
|
+
.ui-accordion-content-inner {
|
|
225
|
+
padding-bottom: var(--space-4);
|
|
202
226
|
}
|
|
203
|
-
.ui-accordion-trigger[data-state="open"] .ui-accordion-chevron { transform: rotate(180deg); }
|
|
204
|
-
.ui-accordion-content { overflow: hidden; font-size: 0.875rem; }
|
|
205
|
-
.ui-accordion-content-inner { padding-bottom: var(--space-4); }
|
|
206
227
|
|
|
207
228
|
/* HoverCard */
|
|
208
229
|
.ui-hover-card-content {
|
|
209
|
-
z-index: 50;
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
230
|
+
z-index: 50;
|
|
231
|
+
width: 16rem;
|
|
232
|
+
border-radius: var(--radius-md);
|
|
233
|
+
border: 1px solid hsl(var(--border));
|
|
234
|
+
background: hsl(var(--popover));
|
|
235
|
+
color: hsl(var(--popover-foreground));
|
|
236
|
+
padding: var(--space-4);
|
|
237
|
+
box-shadow: var(--shadow-md);
|
|
238
|
+
outline: none;
|
|
213
239
|
}
|
|
214
240
|
|
|
215
241
|
.ui-carousel {
|
|
@@ -1,17 +1,49 @@
|
|
|
1
|
-
|
|
2
1
|
/* Drawer (bottom-sheet, vaul) */
|
|
3
|
-
.ui-drawer-overlay {
|
|
2
|
+
.ui-drawer-overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
inset: 0;
|
|
5
|
+
z-index: 50;
|
|
6
|
+
background: hsl(var(--overlay, 0 0% 0% / 0.4));
|
|
7
|
+
}
|
|
4
8
|
.ui-drawer-content {
|
|
5
|
-
position: fixed;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
position: fixed;
|
|
10
|
+
inset-inline: 0;
|
|
11
|
+
inset-block-end: 0;
|
|
12
|
+
z-index: 50;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
max-height: 82vh;
|
|
16
|
+
border-start-start-radius: var(--radius-lg);
|
|
17
|
+
border-start-end-radius: var(--radius-lg);
|
|
18
|
+
border: 1px solid hsl(var(--border));
|
|
19
|
+
background: hsl(var(--background));
|
|
9
20
|
}
|
|
10
21
|
.ui-drawer-handle {
|
|
11
|
-
margin: var(--space-3) auto;
|
|
12
|
-
|
|
22
|
+
margin: var(--space-3) auto;
|
|
23
|
+
height: 0.375rem;
|
|
24
|
+
width: 6rem;
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
border-radius: 9999px;
|
|
27
|
+
background: hsl(var(--muted));
|
|
28
|
+
}
|
|
29
|
+
.ui-drawer-header {
|
|
30
|
+
display: grid;
|
|
31
|
+
gap: var(--space-1);
|
|
32
|
+
padding: var(--space-4);
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
.ui-drawer-footer {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: var(--space-2);
|
|
39
|
+
margin-top: auto;
|
|
40
|
+
padding: var(--space-4);
|
|
41
|
+
}
|
|
42
|
+
.ui-drawer-title {
|
|
43
|
+
font-weight: var(--font-weight-medium);
|
|
44
|
+
line-height: 1.2;
|
|
45
|
+
}
|
|
46
|
+
.ui-drawer-description {
|
|
47
|
+
font-size: 0.875rem;
|
|
48
|
+
color: hsl(var(--muted-foreground));
|
|
13
49
|
}
|
|
14
|
-
.ui-drawer-header { display: grid; gap: var(--space-1); padding: var(--space-4); text-align: center; }
|
|
15
|
-
.ui-drawer-footer { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding: var(--space-4); }
|
|
16
|
-
.ui-drawer-title { font-weight: 600; line-height: 1.2; }
|
|
17
|
-
.ui-drawer-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
|
package/dist/styles/index.css
CHANGED
|
@@ -3,9 +3,19 @@
|
|
|
3
3
|
/* Default sans font — self-contained so consumers need no font config (subsetted: latin/vi/jp). */
|
|
4
4
|
@import "@fontsource/m-plus-2/400.css";
|
|
5
5
|
@import "@fontsource/m-plus-2/500.css";
|
|
6
|
-
@import "@fontsource/m-plus-2/600.css";
|
|
7
6
|
@import "@fontsource/m-plus-2/700.css";
|
|
8
7
|
@import "tailwindcss";
|
|
8
|
+
|
|
9
|
+
/* Guarantee the full set of semantic color utilities ships in the compiled CSS
|
|
10
|
+
* even when the library itself only references a few — consumers (and the token
|
|
11
|
+
* docs) must be able to use bg/text/border for EVERY semantic role. Without this
|
|
12
|
+
* Tailwind's JIT drops unused roles (success/info/attention) → transparent. */
|
|
13
|
+
@source inline(
|
|
14
|
+
"{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
|
|
15
|
+
);
|
|
16
|
+
@source inline(
|
|
17
|
+
"{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
|
|
18
|
+
);
|
|
9
19
|
@source "../**/*.{tsx,ts}";
|
|
10
20
|
@import "../tokens/base.css";
|
|
11
21
|
@import "./density.css";
|
|
@@ -104,6 +114,40 @@
|
|
|
104
114
|
"calt" 1;
|
|
105
115
|
}
|
|
106
116
|
|
|
117
|
+
/* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
|
|
118
|
+
* the document outline (one <h1> per page, levels never skipped). Visual size
|
|
119
|
+
* follows the dxs-kintai scale; component titles override via their own class. */
|
|
120
|
+
h1 {
|
|
121
|
+
font-size: var(--heading-h1);
|
|
122
|
+
font-weight: var(--font-weight-medium);
|
|
123
|
+
line-height: var(--line-height-tight);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
h2 {
|
|
127
|
+
font-size: var(--heading-h2);
|
|
128
|
+
font-weight: var(--font-weight-medium);
|
|
129
|
+
line-height: var(--line-height-tight);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
h3 {
|
|
133
|
+
font-size: var(--heading-h3);
|
|
134
|
+
font-weight: var(--font-weight-medium);
|
|
135
|
+
line-height: var(--line-height-tight);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
h4 {
|
|
139
|
+
font-size: var(--heading-h4);
|
|
140
|
+
font-weight: var(--font-weight-medium);
|
|
141
|
+
line-height: var(--line-height-tight);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
h5,
|
|
145
|
+
h6 {
|
|
146
|
+
font-size: var(--font-size-xs);
|
|
147
|
+
font-weight: var(--font-weight-medium);
|
|
148
|
+
line-height: var(--line-height-tight);
|
|
149
|
+
}
|
|
150
|
+
|
|
107
151
|
code {
|
|
108
152
|
font-family: var(--font-family-mono);
|
|
109
153
|
}
|
package/dist/styles/layout.css
CHANGED
|
@@ -173,9 +173,9 @@
|
|
|
173
173
|
}
|
|
174
174
|
|
|
175
175
|
@container (min-width: 1024px) {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
176
|
+
.ui-responsive-grid {
|
|
177
|
+
grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
|
|
178
|
+
}
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
.ui-split-pane {
|
|
@@ -235,25 +235,30 @@
|
|
|
235
235
|
display: flex;
|
|
236
236
|
flex-direction: column;
|
|
237
237
|
min-height: 100%;
|
|
238
|
-
padding: var(--space-page-active-y)
|
|
238
|
+
padding: var(--space-page-active-y) 0;
|
|
239
239
|
gap: var(--space-section-active);
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
+
/* Horizontal page insets live on the header/body/footer — NOT the container —
|
|
243
|
+
* so the header divider and footer border span the full page width
|
|
244
|
+
* (full-bleed) while their content stays aligned with the body. */
|
|
245
|
+
.ui-page-header,
|
|
246
|
+
.ui-page-body,
|
|
247
|
+
.ui-page-footer {
|
|
248
|
+
padding-left: var(--space-page-active-x);
|
|
249
|
+
padding-right: var(--space-page-active-x);
|
|
250
|
+
}
|
|
251
|
+
|
|
242
252
|
.ui-page-container--narrow .ui-page-body {
|
|
243
253
|
max-width: 42rem;
|
|
244
254
|
}
|
|
245
255
|
|
|
246
|
-
|
|
256
|
+
/* flush = full-bleed body (DataTable); header/footer keep their inset. */
|
|
257
|
+
.ui-page-container--flush .ui-page-body {
|
|
247
258
|
padding-left: 0;
|
|
248
259
|
padding-right: 0;
|
|
249
260
|
}
|
|
250
261
|
|
|
251
|
-
.ui-page-container--flush .ui-page-header,
|
|
252
|
-
.ui-page-container--flush .ui-page-footer {
|
|
253
|
-
padding-left: var(--space-page-active-x);
|
|
254
|
-
padding-right: var(--space-page-active-x);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
262
|
.ui-page-container-inset,
|
|
258
263
|
.ui-page-inset {
|
|
259
264
|
padding-left: var(--space-page-active-x);
|
|
@@ -308,8 +313,8 @@
|
|
|
308
313
|
}
|
|
309
314
|
|
|
310
315
|
.ui-page-title {
|
|
311
|
-
font-size: var(--
|
|
312
|
-
font-weight: var(--font-weight-
|
|
316
|
+
font-size: var(--heading-h1);
|
|
317
|
+
font-weight: var(--font-weight-medium);
|
|
313
318
|
letter-spacing: var(--letter-spacing-tight);
|
|
314
319
|
line-height: var(--line-height-tight);
|
|
315
320
|
overflow-wrap: anywhere;
|
|
@@ -328,10 +333,6 @@
|
|
|
328
333
|
flex-shrink: 0;
|
|
329
334
|
justify-content: flex-end;
|
|
330
335
|
}
|
|
331
|
-
|
|
332
|
-
.ui-page-title {
|
|
333
|
-
font-size: var(--font-size-2xl);
|
|
334
|
-
}
|
|
335
336
|
}
|
|
336
337
|
|
|
337
338
|
.ui-page-subtitle {
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
.sb-nav-item[data-active="true"] {
|
|
244
|
-
font-weight:
|
|
244
|
+
font-weight: var(--font-weight-medium);
|
|
245
245
|
}
|
|
246
246
|
|
|
247
247
|
.sb-icon {
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
background: hsl(var(--secondary));
|
|
275
275
|
color: hsl(var(--muted-foreground));
|
|
276
276
|
font-size: 10px;
|
|
277
|
-
font-weight:
|
|
277
|
+
font-weight: var(--font-weight-medium);
|
|
278
278
|
line-height: 1.125rem;
|
|
279
279
|
padding-inline: 0.375rem;
|
|
280
280
|
}
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
padding: var(--space-1) var(--space-2);
|
|
356
356
|
color: hsl(var(--muted-foreground));
|
|
357
357
|
font-size: var(--font-size-xs);
|
|
358
|
-
font-weight:
|
|
358
|
+
font-weight: var(--font-weight-medium);
|
|
359
359
|
white-space: nowrap;
|
|
360
360
|
}
|
|
361
361
|
|
|
@@ -48,6 +48,19 @@
|
|
|
48
48
|
gap: var(--space-inline-md);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
/* Sortable header label is a real button (keyboard + aria-sort); inherits the cell's type. */
|
|
52
|
+
.ui-data-table-sort-button {
|
|
53
|
+
display: inline-flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: var(--space-inline-xs);
|
|
56
|
+
padding: 0;
|
|
57
|
+
background: transparent;
|
|
58
|
+
color: inherit;
|
|
59
|
+
font: inherit;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
outline: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
51
64
|
.ui-data-table-bulk {
|
|
52
65
|
display: flex;
|
|
53
66
|
align-items: center;
|
|
@@ -74,9 +74,20 @@
|
|
|
74
74
|
--font-size-lg: 1.1875rem; /* 19px */
|
|
75
75
|
--font-size-xl: 1.375rem; /* 22px */
|
|
76
76
|
--font-size-2xl: 1.625rem; /* 26px */
|
|
77
|
+
|
|
78
|
+
/* Semantic heading scale (dxs-kintai: info-dense JP enterprise, weight 500,
|
|
79
|
+
* never marketing-size). Applied to base h1–h4 + component titles. */
|
|
80
|
+
--heading-h1: 1.25rem; /* 20px — page title / h1 */
|
|
81
|
+
--heading-h2: 1.125rem; /* 18px — section / h2 */
|
|
82
|
+
--heading-h3: 0.875rem; /* 14px — h3 */
|
|
83
|
+
--heading-h4: 0.8125rem; /* 13px — h4 */
|
|
84
|
+
|
|
77
85
|
--font-weight-normal: 400;
|
|
78
86
|
--font-weight-medium: 500;
|
|
79
|
-
|
|
87
|
+
/* dxs-kintai uses three weights only (400/500/700). 600 is forbidden
|
|
88
|
+
* (ambiguous between 500 and 700) — the legacy "semibold" token collapses to
|
|
89
|
+
* medium so any remaining reference renders at 500. */
|
|
90
|
+
--font-weight-semibold: 500;
|
|
80
91
|
--line-height-tight: 1.25;
|
|
81
92
|
--line-height-normal: 1.5;
|
|
82
93
|
--line-height-body: 1.7;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* Layout primitive tokens: page, section, stack, inline. */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--space-page-x: var(--
|
|
5
|
-
--space-page-y: var(--
|
|
4
|
+
--space-page-x: var(--space-6); /* 24px — comfortable page gutter (4px grid) */
|
|
5
|
+
--space-page-y: var(--space-6); /* 24px */
|
|
6
6
|
--space-section: var(--phi-0);
|
|
7
7
|
--space-stack-xs: var(--space-1);
|
|
8
8
|
--space-stack-sm: var(--space-2);
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "11.0.0",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"packageManager": "pnpm@10.29.1",
|
|
5
6
|
"sideEffects": false,
|
|
6
7
|
"description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
|
|
7
8
|
"files": [
|
|
@@ -182,10 +183,6 @@
|
|
|
182
183
|
"types": "./dist/components/data-entry/transfer.d.ts",
|
|
183
184
|
"import": "./dist/components/data-entry/transfer.js"
|
|
184
185
|
},
|
|
185
|
-
"./ui/combobox": {
|
|
186
|
-
"types": "./dist/components/data-entry/combobox.d.ts",
|
|
187
|
-
"import": "./dist/components/data-entry/combobox.js"
|
|
188
|
-
},
|
|
189
186
|
"./ui/command": {
|
|
190
187
|
"types": "./dist/components/data-entry/command.d.ts",
|
|
191
188
|
"import": "./dist/components/data-entry/command.js"
|
|
@@ -268,8 +265,9 @@
|
|
|
268
265
|
"test": "vitest run",
|
|
269
266
|
"test:watch": "vitest",
|
|
270
267
|
"test:coverage": "vitest run --coverage",
|
|
271
|
-
"
|
|
272
|
-
"verify
|
|
268
|
+
"check:example-imports": "node scripts/check-example-imports.mjs",
|
|
269
|
+
"verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
|
|
270
|
+
"verify:release": "pnpm typecheck && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
|
|
273
271
|
"check:mcp-sync": "node scripts/check-mcp-sync.mjs",
|
|
274
272
|
"check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
|
|
275
273
|
"check:prop-vocabulary": "node scripts/check-prop-vocabulary.mjs",
|
|
@@ -366,6 +364,7 @@
|
|
|
366
364
|
"typescript-eslint": "^8.60.0",
|
|
367
365
|
"vite": "^8.0.10",
|
|
368
366
|
"vitest": "^4.1.5",
|
|
367
|
+
"vitest-axe": "1.0.0-pre.5",
|
|
369
368
|
"zod": "^4.4.3"
|
|
370
369
|
},
|
|
371
370
|
"bin": {
|