twico-ui 1.2.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/README.md +5 -4
- package/dist/icons.cjs +146 -4
- package/dist/icons.cjs.map +1 -1
- package/dist/icons.d.cts +58 -0
- package/dist/icons.d.ts +58 -0
- package/dist/icons.mjs +93 -0
- package/dist/icons.mjs.map +1 -1
- 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 +13 -8
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -8800,17 +8800,25 @@ function Tooltip({
|
|
|
8800
8800
|
);
|
|
8801
8801
|
}
|
|
8802
8802
|
var SIDEBAR_CSS = `
|
|
8803
|
+
/* Collapse/expand: the rail width eases (emphasis curve, --duration-slow), while text
|
|
8804
|
+
FADES rather than display:none-popping, and items keep their alignment so nothing
|
|
8805
|
+
jolts. Icons sit at space-3 + 11px (= 23px) from the edge, which is the centre of the
|
|
8806
|
+
68px collapsed rail, so no justify-content switch is needed. Fades are directional:
|
|
8807
|
+
instant on collapse (clear out, then slide), delayed on expand (slide open, then reveal). */
|
|
8803
8808
|
.twc-sidebar { display: flex; flex-direction: column; height: 100%; font-family: var(--font-sans);
|
|
8804
8809
|
background: var(--color-surface); border-inline-end: var(--border-thin) solid var(--color-border);
|
|
8805
8810
|
flex: 0 0 248px; min-width: 0; width: 248px; max-width: 248px;
|
|
8806
|
-
transition: flex-basis var(--duration-
|
|
8811
|
+
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; }
|
|
8807
8812
|
.twc-sidebar[data-collapsed="true"] { flex-basis: 68px; width: 68px; max-width: 68px; }
|
|
8808
|
-
.twc-sidebar__head { display: flex; align-items: center; gap: var(--space-2-5); height: 60px; padding: 0 var(--space-4); flex: none;
|
|
8809
|
-
border-bottom: var(--border-thin) solid var(--color-divider); }
|
|
8810
|
-
.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;
|
|
8813
|
+
.twc-sidebar__head { display: flex; align-items: center; gap: var(--space-2-5); height: 60px; padding: 0 var(--space-4); flex: none; overflow: hidden;
|
|
8814
|
+
border-bottom: var(--border-thin) solid var(--color-divider); transition: padding var(--duration-slow) var(--ease-emphasis); }
|
|
8815
|
+
.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;
|
|
8816
|
+
transition: font-size var(--duration-base) var(--ease-standard), gap var(--duration-base) var(--ease-standard); }
|
|
8811
8817
|
.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; }
|
|
8812
|
-
.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;
|
|
8813
|
-
|
|
8818
|
+
.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;
|
|
8819
|
+
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; }
|
|
8820
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__section { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden;
|
|
8821
|
+
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); }
|
|
8814
8822
|
.twc-sidebar__item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 11px; border-radius: var(--radius-md);
|
|
8815
8823
|
font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-decoration: none; cursor: pointer;
|
|
8816
8824
|
border: none; background: none; font-family: inherit; width: 100%; min-width: 0; text-align: start; white-space: nowrap; overflow: hidden;
|
|
@@ -8822,21 +8830,27 @@ var SIDEBAR_CSS = `
|
|
|
8822
8830
|
.twc-sidebar__ic svg { width: 19px; height: 19px; }
|
|
8823
8831
|
.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; }
|
|
8824
8832
|
.twc-sidebar:not([data-collapsed="true"]) .twc-sidebar__ic--initial { display: none; }
|
|
8825
|
-
.twc-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
|
|
8826
|
-
|
|
8827
|
-
.twc-sidebar[data-collapsed="true"] .twc-
|
|
8833
|
+
.twc-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 1; visibility: visible;
|
|
8834
|
+
transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8835
|
+
.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); }
|
|
8836
|
+
.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;
|
|
8837
|
+
transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8838
|
+
.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); }
|
|
8839
|
+
/* Collapsed: pad the head so the brand mark lines up with the nav icon column (23px). */
|
|
8840
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__head { padding: 0 calc(var(--space-3) + 11px); }
|
|
8828
8841
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__brand, .twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { font-size: 0; gap: 0; }
|
|
8829
8842
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user { justify-content: center; }
|
|
8830
|
-
.twc-
|
|
8831
|
-
.twc-
|
|
8843
|
+
.twc-sidebar__brand > :not(:first-child) { visibility: visible; transition: opacity var(--duration-fast) var(--ease-standard) var(--duration-fast), visibility 0s; }
|
|
8844
|
+
.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); }
|
|
8845
|
+
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot-user > * > :not(:first-child) { display: none; }
|
|
8832
8846
|
.twc-sidebar__foot { flex: none; border-top: var(--border-thin) solid var(--color-divider); padding: var(--space-2); }
|
|
8833
8847
|
.twc-sidebar__foot-user { display: flex; align-items: center; padding: 6px 6px 8px; }
|
|
8834
8848
|
.twc-sidebar__collapse { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; border: none; background: none; cursor: pointer;
|
|
8835
|
-
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8849
|
+
color: var(--color-text-muted); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold);
|
|
8850
|
+
transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
|
|
8836
8851
|
.twc-sidebar__collapse:hover { background: var(--color-surface-sunken); color: var(--color-text); }
|
|
8837
|
-
.twc-sidebar__collapse svg { width: 18px; height: 18px; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8852
|
+
.twc-sidebar__collapse svg { width: 18px; height: 18px; flex: none; transition: transform var(--duration-base) var(--ease-spring); }
|
|
8838
8853
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse svg { transform: rotate(180deg); }
|
|
8839
|
-
.twc-sidebar[data-collapsed="true"] .twc-sidebar__item { gap: 0; justify-content: center; padding: 9px 0; width: 40px; margin: 0 auto; }
|
|
8840
8854
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__foot { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0; }
|
|
8841
8855
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse { width: auto; padding: 11px; gap: 0; margin: 0; }
|
|
8842
8856
|
.twc-sidebar[data-collapsed="true"] .twc-sidebar__collapse span { display: none; }
|