panelui-native 0.38.0 → 0.41.0

package/src/components/timeline/index.tsx

@@ -1,14 +1,15 @@
 /**
  * Timeline — a vertical sequence of events.
  *
- * Adapted from: origin-space/originui apps/origin/registry/default/ui/timeline.tsx
- * (the Item / Indicator / Separator / Header / Date / Title / Content anatomy
- * and the completed-up-to-active state rule), shaped to match this repo's
- * `Steps` component so the two read as siblings.
+ * One `value` on the root says how far the sequence has got, and every item
+ * resolves its own state from its `step` against it — completed below, active
+ * at, inactive above. Stating it once is the point: a timeline whose items each
+ * carried their own state would let you write two active items, or none.
  *
- * Upstream drives styling through `data-*` attributes, which React Native has
- * no equivalent for; state is resolved in JS and passed through context into
- * `tv()` variants instead.
+ * State is resolved in JS and handed down through context into `tv()` variants
+ * rather than being read off the element, because React Native has no
+ * attribute selectors for a stylesheet to key off. `Steps` resolves its states
+ * the same way, so the two read as siblings.
  *
  * Vertical only — a horizontal timeline gives each item roughly a fifth of a
  * phone's width, which is not enough for a date and a title.

package/src/icons/index.tsx

@@ -15,6 +15,12 @@
  *
  * Brand marks (Google, Facebook, Apple) are the exception: they carry their
  * own colours and ignore the context.
+ *
+ * A glyph whose *meaning* is a horizontal direction mirrors in a right-to-left
+ * subtree — the chevrons, the outward arrow, the send plane. Everything else
+ * is drawn once and left alone, including the vertical arrows, since the
+ * vertical axis does not mirror, and including asymmetric glyphs that are not
+ * directions (a magnifier, a pencil, a play triangle).
  */
 import { createContext, useContext, type ReactNode } from 'react';
 import Svg, { Circle, G, Path, type SvgProps } from 'react-native-svg';
@@ -226,11 +232,20 @@ export function ChevronDownIcon({ size = 16, color, ...props }: IconProps) {
  *
  * Only for glyphs whose meaning *is* a direction. An icon that happens to be
  * asymmetric — a pencil, a magnifier — means the same thing either way round,
- * and flipping it is just a wrong drawing.
+ * and flipping it is just a wrong drawing. The vertical axis never mirrors, so
+ * the up and down glyphs stay as they are drawn.
+ *
+ * Left-to-right gets an identity transform rather than no transform at all.
+ * Dropping the prop leaves the last matrix the view was given in place, so a
+ * glyph mirrored once stays mirrored when the direction flips back — the
+ * arrows in an app that can switch direction at runtime end up pointing at the
+ * text one toggle in, and never recover.
  */
-function useFlip(): { transform?: string } {
-  const rtl = useDirection() === 'rtl';
-  return rtl ? { transform: 'scale(-1 1) translate(-24 0)' } : {};
+const IDENTITY = 'translate(0 0)';
+const MIRROR = 'scale(-1 1) translate(-24 0)';
+
+function useFlip(): { transform: string } {
+  return { transform: useDirection() === 'rtl' ? MIRROR : IDENTITY };
 }
 
 export function ChevronLeftIcon({ size = 16, color, ...props }: IconProps) {
@@ -325,6 +340,7 @@ export function SearchIcon({ size = 16, color, ...props }: IconProps) {
 
 export function ArrowUpRightIcon({ size = 20, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#fff');
+  const flip = useFlip();
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
       <Path
@@ -333,6 +349,7 @@ export function ArrowUpRightIcon({ size = 20, color, ...props }: IconProps) {
         strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
+        {...flip}
       />
     </Svg>
   );
@@ -618,6 +635,7 @@ export function ReceiptIcon({ size = 16, color, ...props }: IconProps) {
 /** Paper plane — sent, submitted, approved-and-forwarded. */
 export function SendIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
+  const flip = useFlip();
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
       <Path
@@ -625,6 +643,7 @@ export function SendIcon({ size = 16, color, ...props }: IconProps) {
         stroke={resolved}
         strokeWidth={2}
         strokeLinejoin="round"
+        {...flip}
       />
     </Svg>
   );

package/src/index.ts

@@ -267,6 +267,7 @@ export {
   type TableCellProps,
   type TableCaptionProps,
   type TableEmptyProps,
+  type TableColumn,
   type TableSortDirection,
 } from './components/table';
 export {
@@ -295,7 +296,7 @@ export {
   type CalendarSelection,
   type DateRange,
 } from './components/calendar';
-export { Card, type CardProps } from './components/card';
+export { Card, type CardProps, type CardWashProps } from './components/card';
 export { Checkbox, type CheckboxProps } from './components/checkbox';
 export {
   Chip,
@@ -325,6 +326,7 @@ export {
   type DrawerCloseProps,
   type DrawerSide,
   type DrawerSize,
+  type DrawerCloseSide,
 } from './components/drawer';
 export {
   EmptyState,
@@ -389,8 +391,24 @@ export {
   type PanelsideTriggerProps,
   type PanelsideMode,
   type PanelsideSwipeFrom,
+  type PanelsideItemSize,
+  type PanelsideCtaSize,
   type UsePanelsideResult,
 } from './components/panelside';
+export {
+  Pagination,
+  paginationRange,
+  type PaginationProps,
+  type PaginationItemProps,
+  type PaginationPreviousProps,
+  type PaginationNextProps,
+  type PaginationEllipsisProps,
+  type PaginationSummaryProps,
+  type PaginationStatusProps,
+  type PaginationVariant,
+  type PaginationSize,
+  type PaginationItemValue,
+} from './components/pagination';
 export { Textarea, type TextareaProps } from './components/textarea';
 export {
   Item,
@@ -606,6 +624,15 @@ export {
   type ScrollTextEffect,
   type ScrollTextSplit,
 } from './components/scroll-text';
+export {
+  TextAnimation,
+  type TextAnimationProps,
+  type TextAnimationTypingProps,
+  type TextAnimationRotatingProps,
+  type TextAnimationCountingProps,
+  type TextAnimationSlidingProps,
+  type TextAnimationScrollingProps,
+} from './components/text-animation';
 export {
   ScrollCanvas,
   type ScrollCanvasProps,