@kud/ink-ui 0.20.2 → 0.22.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.js +6 -51
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -655,48 +655,6 @@ var ScrollView = ({
|
|
|
655
655
|
] });
|
|
656
656
|
};
|
|
657
657
|
var GAP = 2;
|
|
658
|
-
var SLIDE_STEPS = 12;
|
|
659
|
-
var SLIDE_MS = 28;
|
|
660
|
-
var between = (from, to, t) => {
|
|
661
|
-
const ease = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
662
|
-
const lerp = (a, b) => Math.round(a + (b - a) * ease);
|
|
663
|
-
return {
|
|
664
|
-
start: lerp(from.start, to.start),
|
|
665
|
-
width: Math.max(1, lerp(from.width, to.width))
|
|
666
|
-
};
|
|
667
|
-
};
|
|
668
|
-
var nearestTo = (rules, rule, fallback) => {
|
|
669
|
-
const centre = (r) => r.start + r.width / 2;
|
|
670
|
-
if (rules.length === 0) return fallback;
|
|
671
|
-
return rules.reduce(
|
|
672
|
-
(best, r, i) => Math.abs(centre(r) - centre(rule)) < Math.abs(centre(rules[best]) - centre(rule)) ? i : best,
|
|
673
|
-
Math.min(fallback, rules.length - 1)
|
|
674
|
-
);
|
|
675
|
-
};
|
|
676
|
-
var useSlide = (rules, active) => {
|
|
677
|
-
const target = rules[active] ?? null;
|
|
678
|
-
const [step, setStep] = useState(SLIDE_STEPS);
|
|
679
|
-
const from = useRef(target);
|
|
680
|
-
const last = useRef(active);
|
|
681
|
-
useEffect(() => {
|
|
682
|
-
if (last.current === active) return;
|
|
683
|
-
from.current = step >= SLIDE_STEPS ? rules[last.current] ?? target : between(
|
|
684
|
-
from.current ?? target,
|
|
685
|
-
rules[last.current] ?? target,
|
|
686
|
-
step / SLIDE_STEPS
|
|
687
|
-
);
|
|
688
|
-
last.current = active;
|
|
689
|
-
setStep(0);
|
|
690
|
-
}, [active]);
|
|
691
|
-
useEffect(() => {
|
|
692
|
-
if (step >= SLIDE_STEPS) return;
|
|
693
|
-
const id = setTimeout(() => setStep((s) => s + 1), SLIDE_MS);
|
|
694
|
-
return () => clearTimeout(id);
|
|
695
|
-
}, [step]);
|
|
696
|
-
if (!target) return null;
|
|
697
|
-
if (step >= SLIDE_STEPS || !from.current) return target;
|
|
698
|
-
return between(from.current, target, step / SLIDE_STEPS);
|
|
699
|
-
};
|
|
700
658
|
var Tabs = ({ active, items }) => {
|
|
701
659
|
const cells = items.map((item) => ({
|
|
702
660
|
key: item.value,
|
|
@@ -707,24 +665,21 @@ var Tabs = ({ active, items }) => {
|
|
|
707
665
|
}));
|
|
708
666
|
const gutterOf = (cell) => [...cell.marker].length;
|
|
709
667
|
const labelOf = (cell) => [...cell.text].length;
|
|
710
|
-
const rules = [];
|
|
711
668
|
let x = 0;
|
|
669
|
+
let rule = { start: 0, width: 0 };
|
|
712
670
|
for (const cell of cells) {
|
|
713
|
-
|
|
671
|
+
if (cell.isActive) rule = { start: x + gutterOf(cell), width: labelOf(cell) };
|
|
714
672
|
x += gutterOf(cell) + labelOf(cell) + GAP;
|
|
715
673
|
}
|
|
716
|
-
const activeIndex = cells.findIndex((c) => c.isActive);
|
|
717
|
-
const rule = useSlide(rules, activeIndex) ?? { start: 0, width: 0 };
|
|
718
|
-
const litIndex = nearestTo(rules, rule, Math.max(0, activeIndex));
|
|
719
674
|
return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
|
|
720
|
-
/* @__PURE__ */ jsx(Box, { gap: GAP, children: cells.map((cell
|
|
675
|
+
/* @__PURE__ */ jsx(Box, { gap: GAP, children: cells.map((cell) => /* @__PURE__ */ jsxs(Box, { children: [
|
|
721
676
|
cell.marker ? /* @__PURE__ */ jsx(Text, { color: cell.markerColor, children: cell.marker }) : null,
|
|
722
677
|
/* @__PURE__ */ jsx(
|
|
723
678
|
Text,
|
|
724
679
|
{
|
|
725
|
-
bold:
|
|
726
|
-
color:
|
|
727
|
-
dimColor:
|
|
680
|
+
bold: cell.isActive,
|
|
681
|
+
color: cell.isActive ? colors.accent : void 0,
|
|
682
|
+
dimColor: !cell.isActive,
|
|
728
683
|
children: cell.text
|
|
729
684
|
}
|
|
730
685
|
)
|