panelui-native 0.101.1 → 0.102.0

package/src/icons/index.tsx

@@ -123,6 +123,14 @@ import HgShieldCheckIcon from '@hugeicons/core-free-icons/ShieldCheckIcon';
 import HgSparklesIcon from '@hugeicons/core-free-icons/SparklesIcon';
 import HgStarIcon from '@hugeicons/core-free-icons/StarIcon';
 import HgSun03Icon from '@hugeicons/core-free-icons/Sun03Icon';
+import HgBook02Icon from '@hugeicons/core-free-icons/Book02Icon';
+import HgBug01Icon from '@hugeicons/core-free-icons/Bug01Icon';
+import HgCall02Icon from '@hugeicons/core-free-icons/Call02Icon';
+import HgHeadsetIcon from '@hugeicons/core-free-icons/HeadsetIcon';
+import HgHelpCircleIcon from '@hugeicons/core-free-icons/HelpCircleIcon';
+import HgLifebuoyIcon from '@hugeicons/core-free-icons/LifebuoyIcon';
+import HgMail01Icon from '@hugeicons/core-free-icons/Mail01Icon';
+import HgTicket01Icon from '@hugeicons/core-free-icons/Ticket01Icon';
 import HgTextBoldIcon from '@hugeicons/core-free-icons/TextBoldIcon';
 import HgTextItalicIcon from '@hugeicons/core-free-icons/TextItalicIcon';
 import HgTick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
@@ -404,6 +412,14 @@ export const MessageCircleIcon = icon(HgBubbleChatIcon, {
   fillable: true,
 });
 export const CardIcon = icon(HgCreditCardIcon, { size: 16, color: '#737373' });
+export const HeadsetIcon = icon(HgHeadsetIcon, { size: 16, color: '#737373' });
+export const LifebuoyIcon = icon(HgLifebuoyIcon, { size: 16, color: '#737373' });
+export const HelpCircleIcon = icon(HgHelpCircleIcon, { size: 16, color: '#737373' });
+export const MailIcon = icon(HgMail01Icon, { size: 16, color: '#737373' });
+export const CallIcon = icon(HgCall02Icon, { size: 16, color: '#737373' });
+export const BugIcon = icon(HgBug01Icon, { size: 16, color: '#737373' });
+export const BookIcon = icon(HgBook02Icon, { size: 16, color: '#737373' });
+export const TicketIcon = icon(HgTicket01Icon, { size: 16, color: '#737373' });
 export const ReceiptIcon = icon(HgReceiptIcon, { size: 16, color: '#737373' });
 export const SunIcon = icon(HgSun03Icon, { size: 18, color: '#f5f5f5' });
 export const MoonIcon = icon(HgMoonIcon, { size: 18, color: '#262626' });

package/src/index.ts

@@ -1111,6 +1111,28 @@ export {
   type RingChartLegendProps,
   type RingDatum,
 } from './components/ring-chart';
+export {
+  Support,
+  useSupport,
+  type SupportProps,
+  type SupportHeaderProps,
+  type SupportStatusProps,
+  type SupportGroupProps,
+  type SupportChannelProps,
+  type SupportTopicsProps,
+  type SupportTopicProps,
+  type SupportConversationProps,
+  type SupportArticleProps,
+  type SupportAgentProps,
+  type SupportTicketProps,
+  type SupportHandoffProps,
+  type SupportNoteProps,
+  type SupportRepliesProps,
+  type SupportReplyProps,
+  type SupportResolutionProps,
+  type SupportAvailability,
+  type SupportConversationStatus,
+} from './components/support';
 export {
   SankeyChart,
   useSankeyChart,
@@ -1122,10 +1144,15 @@ export {
   type SankeyChartLabelsProps,
   type SankeyChartTooltipProps,
   type SankeyChartSkeletonProps,
+  type SankeyChartBreakdownProps,
+  type SankeyChartLegendProps,
+  type SankeyChartFlow,
   type SankeyChartStatus,
   type SankeyNode,
   type SankeyLink,
   type SankeyAlign,
+  type SankeyCollapse,
+  type SankeyOrientation,
 } from './components/sankey-chart';
 export {
   ScatterChart,
@@ -1481,6 +1508,14 @@ export {
   CalendarIcon,
   CameraIcon,
   CardIcon,
+  HeadsetIcon,
+  LifebuoyIcon,
+  HelpCircleIcon,
+  MailIcon,
+  CallIcon,
+  BugIcon,
+  BookIcon,
+  TicketIcon,
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,

package/src/utils/chart.ts

@@ -1174,6 +1174,46 @@ export function ribbonPath(
  * is the S that reads as one continuous flow, and `0` gives a straight
  * diagonal.
  */
+/**
+ * The same ribbon, running down the screen instead of across it.
+ *
+ * Written out rather than produced by swapping the arguments of `flowPath`,
+ * because the coordinates in a path string are ordered and a worklet cannot
+ * reorder them after the fact without building the string twice. The shape is
+ * identical, reflected about the diagonal: the ends stay horizontal so a
+ * ribbon still meets the flat side of a node, and `curve` reaches down the run
+ * rather than along it.
+ */
+export function flowPathVertical(
+  y0: number,
+  cx0: number,
+  y1: number,
+  cx1: number,
+  thickness: number,
+  curve: number
+): string {
+  'worklet';
+  if (!(thickness > 0)) return '';
+
+  const half = thickness / 2;
+  const leftStart = cx0 - half;
+  const leftEnd = cx1 - half;
+  const rightStart = cx0 + half;
+  const rightEnd = cx1 + half;
+
+  const run = y1 - y0;
+  const near = y0 + run * curve;
+  const far = y1 - run * curve;
+
+  return (
+    `M${leftStart},${y0}` +
+    `C${leftStart},${near},${leftEnd},${far},${leftEnd},${y1}` +
+    `L${rightEnd},${y1}` +
+    `C${rightEnd},${far},${rightStart},${near},${rightStart},${y0}` +
+    `Z`
+  );
+}
+
 export function flowPath(
   x0: number,
   cy0: number,