twico-ui 1.3.0 → 1.3.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.cjs +28 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +28 -14
- package/dist/index.mjs.map +1 -1
- package/llms.txt +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8821,17 +8821,25 @@ function Tooltip({
|
|
|
8821
8821
|
);
|
|
8822
8822
|
}
|
|
8823
8823
|
var SIDEBAR_CSS = `
|
|
8824
|
+
/* Collapse/expand: the rail width eases (emphasis curve, --duration-slow), while text
|
|
8825
|
+
FADES rather than display:none-popping, and items keep their alignment so nothing
|
|
8826
|
+
jolts. Icons sit at space-3 + 11px (= 23px) from the edge, which is the centre of the
|
|
8827
|
+
68px collapsed rail, so no justify-content switch is needed. Fades are directional:
|
|
8828
|
+
instant on collapse (clear out, then slide), delayed on expand (slide open, then reveal). */
|
|
8824
8829
|
.twc-sidebar { display: flex; flex-direction: column; height: 100%; font-family: var(--font-sans);
|
|
8825
8830
|
background: var(--color-surface); border-inline-end: var(--border-thin) solid var(--color-border);
|
|
8826
8831
|
flex: 0 0 248px; min-width: 0; width: 248px; max-width: 248px;
|
|
8827
|
-
transition: flex-basis var(--duration-
|
|
8832
|
+
transition: flex-basis var(--duration-slow) var(--ease-emphasis), width var(--duration-slow) var(--ease-emphasis), max-width var(--duration-slow) var(--ease-emphasis); overflow: hidden; }
|
|
8828
8833
|
.twc-sidebar[data-collapsed="true"] { flex-basis: 68px; width: 68px; max-width: 68px; }
|
|
8829
|
-
.twc-sidebar__head { display: flex; align-items: center; gap: var(--space-2-5); height: 60px; padding: 0 var(--space-4); flex: none;
|
|
8830
|
-
border-bottom: var(--border-thin) solid var(--color-divider); }
|
|
8831
|
-
.twc-sidebar__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); font-weight: var(--font-extrabold); font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; overflow: hidden;
|
|
8834
|
+
.twc-sidebar__head { display: flex; align-items: center; gap: var(--space-2-5); height: 60px; padding: 0 var(--space-4); flex: none; overflow: hidden;
|
|
8835
|
+
border-bottom: var(--border-thin) solid var(--color-divider); transition: padding var(--duration-slow) var(--ease-emphasis); }
|
|
8836
|
+
.twc-sidebar__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); font-weight: var(--font-extrabold); font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; overflow: hidden; min-width: 0;
|
|
8837
|
+
transition: font-size var(--duration-base) var(--ease-standard), gap var(--duration-base) var(--ease-standard); }
|
|
8832
8838
|
.twc-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
|
|
8833
|
-
.twc-sidebar__section { font-size: 10px; font-weight: var(--font-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-subtle); padding: var(--space-3) var(--space-3) var(--space-1); white-space: nowrap;
|
|
8834
|
-
|
|
8839
|
+
.twc-sidebar__section { font-size: 10px; font-weight: var(--font-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-subtle); padding: var(--space-3) var(--space-3) var(--space-1); white-space: nowrap; overflow: hidden; max-height: 2.5rem; opacity: 1; visibility: visible;
|
|
8840
|
+
transition: max-height var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8841
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__section { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden;
|
|
8842
|
+
transition: max-height var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard), opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-base); }
|
|
8835
8843
|
.twc-sidebar__item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 11px; border-radius: var(--radius-md);
|
|
8836
8844
|
font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-decoration: none; cursor: pointer;
|
|
8837
8845
|
border: none; background: none; font-family: inherit; width: 100%; min-width: 0; text-align: start; white-space: nowrap; overflow: hidden;
|
|
@@ -8843,21 +8851,27 @@ var SIDEBAR_CSS = `
|
|
|
8843
8851
|
.twc-sidebar__ic svg { width: 19px; height: 19px; }
|
|
8844
8852
|
.twc-sidebar__ic--initial { width: 19px; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-bold); text-transform: uppercase; line-height: 1; }
|
|
8845
8853
|
.twc-sidebar:not([data-collapsed="true"]) .twc-sidebar__ic--initial { display: none; }
|
|
8846
|
-
.twc-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
|
|
8847
|
-
|
|
8848
|
-
.twc-sidebar[data-collapsed="true"] .twc-
|
|
8854
|
+
.twc-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 1; visibility: visible;
|
|
8855
|
+
transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8856
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__label { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
|
|
8857
|
+
.twc-sidebar__badge { flex: none; font-size: 11px; font-weight: var(--font-bold); padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-fg); opacity: 1; visibility: visible;
|
|
8858
|
+
transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8859
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__badge { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
|
|
8860
|
+
/* Collapsed: pad the head so the brand mark lines up with the nav icon column (23px). */
|
|
8861
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__head { padding: 0 calc(var(--space-3) + 11px); }
|
|
8849
8862
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__brand, .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { font-size: 0; gap: 0; }
|
|
8850
8863
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { justify-content: center; }
|
|
8851
|
-
.twc-
|
|
8852
|
-
.twc-
|
|
8864
|
+
.twc-sidebar__brand > :not(:first-child) { visibility: visible; transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8865
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__brand > :not(:first-child) { opacity: 0; visibility: hidden; transition: opacity var(--duration-instant) var(--ease-standard), visibility 0s var(--duration-instant); }
|
|
8866
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user > * > :not(:first-child) { display: none; }
|
|
8853
8867
|
.twc-sidebar__foot { flex: none; border-top: var(--border-thin) solid var(--color-divider); padding: var(--space-2); }
|
|
8854
8868
|
.twc-sidebar__foot-user { display: flex; align-items: center; padding: 6px 6px 8px; }
|
|
8855
8869
|
.twc-sidebar__collapse { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; border: none; background: none; cursor: pointer;
|
|
8856
|
-
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8870
|
+
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8871
|
+
transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
|
|
8857
8872
|
.twc-sidebar__collapse:hover { background: var(--color-surface-sunken); color: var(--color-text); }
|
|
8858
|
-
.twc-sidebar__collapse svg { width: 18px; height: 18px; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8873
|
+
.twc-sidebar__collapse svg { width: 18px; height: 18px; flex: none; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8859
8874
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse svg { transform: rotate(180deg); }
|
|
8860
|
-
.twc-sidebar[data-collapsed="true"] .twc-sidebar__item { gap: 0; justify-content: center; padding: 9px 0; width: 40px; margin: 0 auto; }
|
|
8861
8875
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; }
|
|
8862
8876
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse { width: auto; padding: 11px; gap: 0; margin: 0; }
|
|
8863
8877
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse span { display: none; }
|