panelui-native 0.57.0 → 0.60.0

package/src/index.ts

@@ -216,6 +216,22 @@ export {
   type FlowRect,
   type FlowPoint,
 } from './components/flow';
+export {
+  FunnelChart,
+  useFunnelChart,
+  type FunnelChartProps,
+  type FunnelChartHandle,
+  type FunnelChartHeaderProps,
+  type FunnelChartStagesProps,
+  type FunnelChartLabelsProps,
+  type FunnelChartLegendProps,
+  type FunnelChartSkeletonProps,
+  type FunnelChartStatus,
+  type FunnelDatum,
+  type FunnelEdges,
+  type FunnelLegendLayout,
+  type FunnelShare,
+} from './components/funnel-chart';
 export {
   Frame,
   type FrameProps,
@@ -316,6 +332,16 @@ export {
   type SelectGroupProps,
   type SelectPresentation,
 } from './components/select';
+export {
+  SelectionMode,
+  useSelectionMode,
+  type SelectionModeProps,
+  type SelectionModeItemProps,
+  type SelectionModeIndicatorProps,
+  type SelectionModeHeaderProps,
+  type SelectionModeBarProps,
+  type SelectionModeActionProps,
+} from './components/selection-mode';
 export {
   SectionRail,
   type SectionRailProps,
@@ -332,6 +358,9 @@ export {
   type TabsListProps,
   type TabsTriggerProps,
   type TabsContentProps,
+  type TabsVariant,
+  type TabsKeepMounted,
+  type TabsAnimation,
 } from './components/tabs';
 export {
   Table,

package/src/utils/chart.ts

@@ -751,3 +751,55 @@ export function columnValues(
     return typeof value === 'number' && !Number.isNaN(value) ? value : null;
   });
 }
+
+/**
+ * One length of a funnel: a band symmetrical about a centre line, `head` wide
+ * at one end and `tail` wide at the other.
+ *
+ * Given as two half-extents about a middle rather than as four corners, because
+ * that is the shape of the data — a stage knows what it is worth and what the
+ * next one is worth, and the taper between them is the drop.
+ *
+ * `curve` is how far along the band the control points reach, as a fraction of
+ * its length. Past `0.5` the two reach beyond each other, which is what turns
+ * the join from a diagonal into the S the eye reads as a single continuous
+ * funnel rather than a stack of separate trapezoids; `0` gives the straight
+ * diagonal. The sides are the only curved part — the ends stay square, so a
+ * band's end lines up exactly with the next band's start.
+ *
+ * The run goes across, so `offset` and `length` are horizontal and the band is
+ * `head` and `tail` tall about `middle`.
+ */
+export function ribbonPath(
+  offset: number,
+  length: number,
+  head: number,
+  tail: number,
+  middle: number,
+  curve: number
+): string {
+  'worklet';
+  if (length <= 0 || (head <= 0 && tail <= 0)) return '';
+
+  const start = offset;
+  const end = offset + length;
+  const topStart = middle - head;
+  const topEnd = middle - tail;
+  const bottomStart = middle + head;
+  const bottomEnd = middle + tail;
+
+  if (!(curve > 0)) {
+    return `M${start},${topStart}L${end},${topEnd}L${end},${bottomEnd}L${start},${bottomStart}Z`;
+  }
+
+  const near = start + length * curve;
+  const far = end - length * curve;
+
+  return (
+    `M${start},${topStart}` +
+    `C${near},${topStart},${far},${topEnd},${end},${topEnd}` +
+    `L${end},${bottomEnd}` +
+    `C${far},${bottomEnd},${near},${bottomStart},${start},${bottomStart}` +
+    `Z`
+  );
+}