twico-ui 1.3.0 → 1.3.2
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 +30 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +30 -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,29 @@ 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: centre the brand mark in the 68px rail (\u2248 the nav icon column) with no
|
|
8861
|
+
right padding, so a mark wider than the icons isn't clipped. flex-start (not
|
|
8862
|
+
justify-content) keeps it from jolting to centre while the rail is still wide. */
|
|
8863
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__head { padding-inline: 18px 0; }
|
|
8849
8864
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__brand, .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { font-size: 0; gap: 0; }
|
|
8850
8865
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { justify-content: center; }
|
|
8851
|
-
.twc-
|
|
8852
|
-
.twc-
|
|
8866
|
+
.twc-sidebar__brand > :not(:first-child) { visibility: visible; transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8867
|
+
.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); }
|
|
8868
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user > * > :not(:first-child) { display: none; }
|
|
8853
8869
|
.twc-sidebar__foot { flex: none; border-top: var(--border-thin) solid var(--color-divider); padding: var(--space-2); }
|
|
8854
8870
|
.twc-sidebar__foot-user { display: flex; align-items: center; padding: 6px 6px 8px; }
|
|
8855
8871
|
.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);
|
|
8872
|
+
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8873
|
+
transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
|
|
8857
8874
|
.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); }
|
|
8875
|
+
.twc-sidebar__collapse svg { width: 18px; height: 18px; flex: none; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8859
8876
|
.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
8877
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; }
|
|
8862
8878
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse { width: auto; padding: 11px; gap: 0; margin: 0; }
|
|
8863
8879
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse span { display: none; }
|