@cdx-ui/components 0.0.1-beta.121 → 0.0.1-beta.122

package/lib/module/components/Tabs/styles.js

@@ -0,0 +1,330 @@
+"use strict";
+
+import { Platform, StyleSheet } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+// Kept local (rather than imported from `./index`) to avoid a circular import — `index.tsx`
+// imports styles from this file.
+
+// `rounded-full` is used for the indicator + individual tabs, which are small enough that a
+// full capsule radius looks correct in both orientations.
+const SOLID_RADIUS = 'rounded-full';
+
+// `rounded-full` (`border-radius/round`, 9999px) for the indicator, tab capsules, and the
+// horizontal solid track/shell — matches Figma SegmentedControl (always much wider than tall,
+// so full rounding reads as a capsule). Applied via StyleSheet on the track/shell because
+// arbitrary-value radius classes don't reliably resolve through Uniwind's scanner.
+const SOLID_TRACK_RADIUS = 9999;
+
+/**
+ * Vertical solid track radius — deliberately *not* `SOLID_TRACK_RADIUS` (9999px). A vertical
+ * track's box can end up nearly square (few short tab labels stacked in a column), and a
+ * fully-round radius on a near-square box renders as a circle/blob instead of a rounded rect.
+ * A fixed, modest radius avoids that regardless of how many tabs are stacked or how wide their
+ * labels are.
+ */
+const SOLID_VERTICAL_TRACK_RADIUS = 20;
+
+/** Thickness of the 1px gray rail the outline indicator rides beside. */
+const OUTLINE_TRACK_THICKNESS = 1;
+/** Thickness of the 2px action-colored outline selection segment (animated size, not a class). */
+export const OUTLINE_INDICATOR_THICKNESS = 2;
+
+/**
+ * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
+ * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
+ * ahead of a still-sliding solid/outline indicator. Change both together.
+ */
+export const TABS_INDICATOR_TRANSITION_MS = 300;
+
+/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
+export const TABS_SCROLL_FADE_SIZE = 32;
+
+/**
+ * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
+ * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
+ */
+export const TABS_SOLID_SCROLL_FADE_SIZE = 40;
+
+/**
+ * Room reserved on the left/right sides inside the horizontal-scroll clip rect for ink that
+ * paints past a tab's own box: `shadow-sm` (`0px 1px 3px`, solid only) and the web focus ring
+ * (`ring-2` + `ring-offset-2`, ~4px, both variants). `overflow-x: auto` + `overflow-y: visible`
+ * does *not* achieve this — per the CSS Overflow spec, a non-`visible` value on one axis forces
+ * `visible` on the other axis to compute as `auto`, so it still clips. Applies to both variants —
+ * outline's ring bleeds past its box exactly the same way solid's does.
+ */
+/** Reserved ink room (focus ring, shadow) inside the horizontal-scroll clip rect — 4px (`p-1`). */
+const INDICATOR_BLEED = 4;
+
+/**
+ * Same bleed room as `INDICATOR_BLEED` on the top/bottom sides — kept equal to the solid shell's
+ * own `py-1` (below) so the shell's `overflow: hidden` clip boundary sits exactly where the
+ * reserved ink stops, with no gap and no clipping. Solid indicator = 32px, whole tablist = 40px
+ * per Figma SegmentedControl — a wider value here would inflate the shell past 40px.
+ */
+const INDICATOR_BLEED_VERTICAL = INDICATOR_BLEED;
+
+/**
+ * Numeric styles that can't be expressed as static Uniwind utility classes — solid track radius
+ * and outline indicator offset (`bottom-px` / `left-px` don't apply on Reanimated host views).
+ */
+export const tabsStyles = StyleSheet.create({
+  solidTrack: {
+    borderRadius: SOLID_TRACK_RADIUS
+  },
+  /** See `SOLID_VERTICAL_TRACK_RADIUS` — used instead of `solidTrack` for vertical solid tracks. */
+  solidTrackVertical: {
+    borderRadius: SOLID_VERTICAL_TRACK_RADIUS
+  },
+  /** Clips scroll ink + edge fades to the solid shell's rounded rect (className radius alone won't). */
+  solidShell: {
+    borderRadius: SOLID_TRACK_RADIUS,
+    overflow: 'hidden'
+  },
+  horizontalScrollContent: {
+    paddingHorizontal: INDICATOR_BLEED,
+    paddingVertical: INDICATOR_BLEED_VERTICAL
+  },
+  horizontalScrollViewBleed: {
+    marginVertical: -INDICATOR_BLEED_VERTICAL
+  },
+  outlineIndicator: {
+    zIndex: 1
+  },
+  outlineIndicatorHorizontal: {
+    bottom: OUTLINE_TRACK_THICKNESS
+  },
+  outlineIndicatorVertical: {
+    left: OUTLINE_TRACK_THICKNESS
+  },
+  solidIndicator: {
+    zIndex: 0
+  },
+  /** Clips press/hover feedback to the solid tab capsule (`rounded-full` alone is not enough on Pressable). */
+  solidTabPressable: {
+    borderRadius: 9999,
+    overflow: 'hidden'
+  }
+});
+export const tabsRootVariants = cva([], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-col',
+      vertical: 'flex-row items-start gap-4'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+export const tabsListVariants = cva(['relative min-w-0']);
+
+/** Flex track that hosts the rail, indicator, and tab triggers. */
+export const tabsListTrackVariants = cva(['relative items-stretch'], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col'
+    },
+    variant: {
+      outline: '',
+      solid: 'gap-0.5'
+    },
+    /**
+     * When horizontal tabs scroll, the solid track background + radius live on
+     * `tabsListSolidShellVariants` (viewport-sized) so rounded corners aren't clipped
+     * by the ScrollView.
+     */
+    scrollable: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    orientation: 'vertical',
+    variant: 'outline',
+    className: 'gap-2 pl-1'
+  }, {
+    orientation: 'horizontal',
+    variant: 'outline',
+    className: 'pb-1'
+  }, {
+    variant: 'solid',
+    scrollable: false,
+    className: 'bg-surface-secondary p-1'
+  },
+  // Whole tablist = 40px per Figma SegmentedControl (`p-1` + 32px tab, above). Height-only —
+  // vertical solid lists size to their stacked tab content instead.
+  {
+    orientation: 'horizontal',
+    variant: 'solid',
+    scrollable: false,
+    className: 'h-10 max-h-10 min-h-10'
+  }],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid',
+    scrollable: false
+  }
+});
+
+/**
+ * Viewport-sized solid shell for horizontal scroll — bg is a separate layer so overflow can stay
+ * visible. `py-1` (4px) matches the non-scrolling track's `p-1` exactly, so both the scrollable
+ * and non-scrollable solid paths land on the same 40px whole-tablist height (32px tab + 4px top
+ * + 4px bottom). `h-10`/`max-h-10`/`min-h-10` pin it explicitly so a taller-than-expected label
+ * line-height can't inflate the shell. `INDICATOR_BLEED_VERTICAL` (the ScrollView's own top/bottom
+ * reserved ink room, above) is kept equal to this `py-1` so the shell's `overflow: hidden` clip
+ * boundary lines up with where that reserved ink stops.
+ */
+export const tabsListSolidShellVariants = cva(['relative min-w-0 w-full py-1 h-10 max-h-10 min-h-10']);
+export const tabsListSolidShellBgVariants = cva(['absolute inset-0 bg-surface-secondary']);
+export const tabsListScrollViewVariants = cva(['w-full max-w-full']);
+export const tabsListScrollContainerVariants = cva(['relative min-w-0 w-full']);
+
+// Outline: flex sibling beside the scroll viewport (outline scroll looks good this way).
+export const tabsListScrollButtonVariants = cva(['z-10 flex h-6 w-6 shrink-0 items-center justify-center self-center rounded-full', TRANSITION_COLORS, Platform.select({
+  default: 'data-[active=true]:bg-surface-secondary-active',
+  web: 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active'
+})]);
+
+// Solid: tiny overlay on the edge fade — the scroll viewport stays full-width inside the shell so
+// the track radius + gradient read as one continuous surface (no hard clip before the chevron).
+export const tabsListSolidScrollButtonVariants = cva(['h-5 w-3 items-center justify-center rounded-full', TRANSITION_COLORS, Platform.select({
+  default: 'data-[active=true]:bg-surface-secondary-active',
+  web: 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active'
+})]);
+export const tabsListSolidScrollButtonSlotVariants = cva(['pointer-events-none absolute inset-y-0 z-20 flex w-3 justify-center'], {
+  variants: {
+    position: {
+      start: 'left-1',
+      end: 'right-1'
+    }
+  }
+});
+
+// Horizontal: `h-px border-b` (1px). Vertical: Divider-style `w-px bg-*` (no border — `border`
+// on `w-px` doubles thickness to 2px). Gutter padding on the list keeps tabs off the rail.
+export const tabsOutlineTrackVariants = cva(['absolute z-0'], {
+  variants: {
+    orientation: {
+      horizontal: 'bottom-0 left-0 right-0 h-px border-b border-stroke-secondary',
+      vertical: 'top-0 bottom-0 left-0 w-px h-full bg-stroke-secondary'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+export const tabsIndicatorVariants = cva(['absolute'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: ''
+    },
+    variant: {
+      outline: 'bg-surface-action-strong',
+      solid: `${SOLID_RADIUS} bg-surface-primary shadow-sm`
+    }
+  },
+  compoundVariants: [
+  // Rail offset is in `tabsStyles.outlineIndicator*` (Reanimated host).
+  {
+    orientation: 'horizontal',
+    variant: 'outline',
+    className: 'left-0'
+  }, {
+    orientation: 'vertical',
+    variant: 'outline',
+    className: 'top-0'
+  }, {
+    variant: 'solid',
+    className: 'top-0 left-0'
+  }],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid'
+  }
+});
+export const tabsTabVariants = cva(['relative z-10 items-center justify-center',
+// `transition` (not `transition-colors`) — its default property list includes `box-shadow`,
+// so the focus ring eases in over `TABS_INDICATOR_TRANSITION_MS` instead of snapping in
+// ahead of the indicator, which glides over the same duration (see `index.tsx`).
+'transition duration-300', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, Platform.select({
+  web: ['outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' '),
+  default: ''
+})], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: ''
+    },
+    variant: {
+      outline: '',
+      solid: `${SOLID_RADIUS} overflow-hidden`
+    }
+  },
+  compoundVariants: [
+  // `py-2` keeps horizontal outline tabs closer to the solid variant's compact 32px trigger
+  // height. The rail gap comes from the List's own `pb-1` compound variant (in
+  // `tabsListVariants`), not from this padding.
+  {
+    orientation: 'horizontal',
+    variant: 'outline',
+    className: 'px-4 py-2'
+  }, {
+    orientation: 'vertical',
+    variant: 'outline',
+    // Leave room for 1px rail + 2px indicator on the left.
+    className: 'px-4 py-1 pl-4'
+  },
+  // Ring-offset color defaults to the page background, which doesn't match the solid
+  // track's `bg-surface-secondary` — override it so the offset gap blends with the track
+  // instead of showing as a mismatched patch next to the ring. Explicit `h-8` (32px, per
+  // Figma SegmentedControl) instead of vertical padding — a fixed height, combined with the
+  // base class's `items-center`, centers the label regardless of its line-height, and can't
+  // drift the way padding-derived sizing could.
+  {
+    variant: 'solid',
+    className: ['h-8 max-h-8 min-h-8 px-4', 'web:data-[focus-visible=true]:ring-offset-surface-secondary'].join(' ')
+  }],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid'
+  }
+});
+export const tabsPanelVariants = cva(['data-[state=inactive]:hidden'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: 'flex-1'
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+export const tabsTabLabelVariants = cva('body-md', {
+  variants: {
+    state: {
+      // Selection state is a CVA input (not a `data-[]` selector) so inactive/active
+      // typography reconciles on native — `data-[state=active]:` on `Text` is unreliable
+      // there, and `font-sans-medium` / `font-sans-semibold` are the same family on iOS/Android
+      // so weight must come from `font-medium` / `font-semibold` instead.
+      inactive: Platform.select({
+        web: 'font-sans-medium text-content-secondary',
+        default: 'font-medium text-content-secondary'
+      }),
+      active: Platform.select({
+        web: 'font-sans-semibold text-content-primary',
+        default: 'font-semibold text-content-primary'
+      })
+    }
+  },
+  defaultVariants: {
+    state: 'inactive'
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Tabs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","StyleSheet","cva","DISABLED_CURSOR","TRANSITION_COLORS","SOLID_RADIUS","SOLID_TRACK_RADIUS","SOLID_VERTICAL_TRACK_RADIUS","OUTLINE_TRACK_THICKNESS","OUTLINE_INDICATOR_THICKNESS","TABS_INDICATOR_TRANSITION_MS","TABS_SCROLL_FADE_SIZE","TABS_SOLID_SCROLL_FADE_SIZE","INDICATOR_BLEED","INDICATOR_BLEED_VERTICAL","tabsStyles","create","solidTrack","borderRadius","solidTrackVertical","solidShell","overflow","horizontalScrollContent","paddingHorizontal","paddingVertical","horizontalScrollViewBleed","marginVertical","outlineIndicator","zIndex","outlineIndicatorHorizontal","bottom","outlineIndicatorVertical","left","solidIndicator","solidTabPressable","tabsRootVariants","variants","orientation","horizontal","vertical","defaultVariants","tabsListVariants","tabsListTrackVariants","variant","outline","solid","scrollable","true","false","compoundVariants","className","tabsListSolidShellVariants","tabsListSolidShellBgVariants","tabsListScrollViewVariants","tabsListScrollContainerVariants","tabsListScrollButtonVariants","select","default","web","tabsListSolidScrollButtonVariants","tabsListSolidScrollButtonSlotVariants","position","start","end","tabsOutlineTrackVariants","tabsIndicatorVariants","tabsTabVariants","join","tabsPanelVariants","tabsTabLabelVariants","state","inactive","active"],"sourceRoot":"../../../../src","sources":["components/Tabs/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/index.js

@@ -27,10 +27,12 @@ export * from './Skeleton';
 export * from './ProgressSegmented';
 export * from './Radio';
 export * from './ScopedTheme';
+export * from './ScrollShadow';
 export * from './Select';
 export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tabs';
 export * from './Textarea';
 export * from './Tile';
 export * from './Toast';

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,uBAAuB;AACrC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}
+{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,uBAAuB;AACrC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}

package/lib/typescript/components/ScrollShadow/index.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+import { type ScrollShadowVariantProps } from './styles';
+import { type ScrollShadowCapability } from './useScrollShadow';
+export type { ScrollShadowCapability };
+export interface ScrollShadowProps extends ScrollShadowVariantProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Tailwind `from-*` utility for edge overlays — match the surface behind the scroll area.
+     * Pair with a low opacity (e.g. `from-surface-secondary/40`) for a light fade.
+     * @default 'from-background/35'
+     */
+    fadeFromClassName?: string;
+    /**
+     * Shadow fade size in pixels.
+     * @default 64
+     */
+    size?: number;
+    /**
+     * Scroll offset before showing edge shadows.
+     * @default 0
+     */
+    offset?: number;
+    onCapabilityChange?: (capability: ScrollShadowCapability) => void;
+    style?: ViewStyle;
+}
+export declare function ScrollShadow({ children, className, fadeFromClassName, hideScrollBar, orientation, offset, onCapabilityChange, size, style, }: ScrollShadowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/ScrollShadow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAIL,KAAK,wBAAwB,EAC9B,MAAM,UAAU,CAAC;AAClB,OAAO,EAAmB,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEjF,YAAY,EAAE,sBAAsB,EAAE,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,iBAAwC,EACxC,aAAqB,EACrB,WAA0B,EAC1B,MAAU,EACV,kBAAkB,EAClB,IAAS,EACT,KAAK,GACN,EAAE,iBAAiB,2CA+DnB"}

package/lib/typescript/components/ScrollShadow/styles.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const scrollShadowVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    hideScrollBar?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const scrollShadowContainerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const scrollShadowOverlayVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    edge?: "end" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ScrollShadowVariantProps = VariantProps<typeof scrollShadowVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/ScrollShadow/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,oBAAoB;;;8EAe/B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAiC,CAAC;AAE5E,eAAO,MAAM,2BAA2B;;;8EAiCtC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/lib/typescript/components/ScrollShadow/useScrollShadow.d.ts

@@ -0,0 +1,17 @@
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+export interface ScrollShadowCapability {
+    canScrollBefore: boolean;
+    canScrollAfter: boolean;
+}
+export interface UseScrollShadowOptions {
+    orientation?: 'horizontal' | 'vertical';
+    offset?: number;
+    onCapabilityChange?: (capability: ScrollShadowCapability) => void;
+}
+export declare function useScrollShadow({ orientation, offset, onCapabilityChange, }?: UseScrollShadowOptions): {
+    capability: ScrollShadowCapability;
+    handleLayout: (event: LayoutChangeEvent) => void;
+    handleContentSizeChange: (width: number, height: number) => void;
+    handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+//# sourceMappingURL=useScrollShadow.d.ts.map

package/lib/typescript/components/ScrollShadow/useScrollShadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollShadow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/useScrollShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE/F,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACnE;AA2BD,wBAAgB,eAAe,CAAC,EAC9B,WAA0B,EAC1B,MAAU,EACV,kBAAkB,GACnB,GAAE,sBAA2B;;0BA4BlB,iBAAiB;qCASjB,MAAM,UAAU,MAAM;0BAQtB,oBAAoB,CAAC,iBAAiB,CAAC;EAqBlD"}

package/lib/typescript/components/Tabs/index.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { type ITabPanelProps, type ITabProps, type ITabsListProps, type ITabsProps } from '@cdx-ui/primitives';
+import { type TabsVariant } from './styles';
+export type { TabsVariant };
+export interface TabsProps extends Omit<ViewProps, 'children'>, ITabsProps {
+    /** `solid` (default) slides a filled indicator behind the active tab; `outline` draws a sliding line indicator. Styled per Forge DS SegmentedControl (solid). */
+    variant?: TabsVariant;
+    className?: string;
+}
+declare const TabsRoot: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<View>>;
+export interface TabsListProps extends ITabsListProps {
+    asChild?: boolean;
+    className?: string;
+    /**
+     * When `orientation="horizontal"`, scroll tab triggers if they overflow the list width.
+     * Vertical lists do not scroll — tabs stack in a column (matches HeroUI / ARIA scrollable
+     * tablist patterns, which are horizontal-only).
+     * @default true
+     */
+    scrollable?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
+}
+declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<View>>;
+export interface TabsTabProps extends Omit<ITabProps, 'children'> {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<View>>;
+export interface TabsTabLabelProps extends TextProps {
+    asChild?: boolean;
+    className?: string;
+}
+declare const TabsTabLabel: import("react").ForwardRefExoticComponent<TabsTabLabelProps & import("react").RefAttributes<Text>>;
+export interface TabsPanelProps extends ITabPanelProps {
+    asChild?: boolean;
+    className?: string;
+}
+declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<View>>;
+type TabsCompoundComponent = typeof TabsRoot & {
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    TabLabel: typeof TabsTabLabel;
+    Panel: typeof TabsPanel;
+};
+export declare const Tabs: TabsCompoundComponent;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,IAAI,EACJ,IAAI,EAEJ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAUL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAqBL,KAAK,WAAW,EACjB,MAAM,UAAU,CAAC;AAElB,YAAY,EAAE,WAAW,EAAE,CAAC;AAqD5B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU;IACxE,iKAAiK;IACjK,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAkBb,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED,QAAA,MAAM,QAAQ,gGAuYb,CAAC;AAQF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,+FAyCZ,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,oGAoBjB,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iGAiBd,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,GAAG,EAAE,OAAO,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,KAAK,EAAE,OAAO,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,IAAI,EAKX,qBAAqB,CAAC"}

package/lib/typescript/components/Tabs/styles.d.ts

@@ -0,0 +1,107 @@
+import { type VariantProps } from 'class-variance-authority';
+export type TabsVariant = 'outline' | 'solid';
+/** Thickness of the 2px action-colored outline selection segment (animated size, not a class). */
+export declare const OUTLINE_INDICATOR_THICKNESS = 2;
+/**
+ * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
+ * `duration-300` transition class (below) — kept in sync so the focus ring doesn't snap in
+ * ahead of a still-sliding solid/outline indicator. Change both together.
+ */
+export declare const TABS_INDICATOR_TRANSITION_MS = 300;
+/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
+export declare const TABS_SCROLL_FADE_SIZE = 32;
+/**
+ * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
+ * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
+ */
+export declare const TABS_SOLID_SCROLL_FADE_SIZE = 40;
+/**
+ * Numeric styles that can't be expressed as static Uniwind utility classes — solid track radius
+ * and outline indicator offset (`bottom-px` / `left-px` don't apply on Reanimated host views).
+ */
+export declare const tabsStyles: {
+    solidTrack: {
+        borderRadius: number;
+    };
+    /** See `SOLID_VERTICAL_TRACK_RADIUS` — used instead of `solidTrack` for vertical solid tracks. */
+    solidTrackVertical: {
+        borderRadius: number;
+    };
+    /** Clips scroll ink + edge fades to the solid shell's rounded rect (className radius alone won't). */
+    solidShell: {
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    horizontalScrollContent: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    horizontalScrollViewBleed: {
+        marginVertical: number;
+    };
+    outlineIndicator: {
+        zIndex: number;
+    };
+    outlineIndicatorHorizontal: {
+        bottom: number;
+    };
+    outlineIndicatorVertical: {
+        left: number;
+    };
+    solidIndicator: {
+        zIndex: number;
+    };
+    /** Clips press/hover feedback to the solid tab capsule (`rounded-full` alone is not enough on Pressable). */
+    solidTabPressable: {
+        borderRadius: number;
+        overflow: "hidden";
+    };
+};
+export declare const tabsRootVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Flex track that hosts the rail, indicator, and tab triggers. */
+export declare const tabsListTrackVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    variant?: "solid" | "outline" | null | undefined;
+    scrollable?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Viewport-sized solid shell for horizontal scroll — bg is a separate layer so overflow can stay
+ * visible. `py-1` (4px) matches the non-scrolling track's `p-1` exactly, so both the scrollable
+ * and non-scrollable solid paths land on the same 40px whole-tablist height (32px tab + 4px top
+ * + 4px bottom). `h-10`/`max-h-10`/`min-h-10` pin it explicitly so a taller-than-expected label
+ * line-height can't inflate the shell. `INDICATOR_BLEED_VERTICAL` (the ScrollView's own top/bottom
+ * reserved ink room, above) is kept equal to this `py-1` so the shell's `overflow: hidden` clip
+ * boundary lines up with where that reserved ink stops.
+ */
+export declare const tabsListSolidShellVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tabsListSolidShellBgVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tabsListScrollViewVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tabsListScrollContainerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tabsListScrollButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tabsListSolidScrollButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tabsListSolidScrollButtonSlotVariants: (props?: ({
+    position?: "end" | "start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsOutlineTrackVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsIndicatorVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    variant?: "solid" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsTabVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    variant?: "solid" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsPanelVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsTabLabelVariants: (props?: ({
+    state?: "active" | "inactive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TabsTabVariantProps = VariantProps<typeof tabsTabVariants>;
+export type TabsListTrackVariantProps = VariantProps<typeof tabsListTrackVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Tabs/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAuB9C,kGAAkG;AAClG,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAqB9C;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;IAIrB,kGAAkG;;;;IAIlG,sGAAsG;;;;;;;;;;;;;;;;;;;;;;;;IAwBtG,6GAA6G;;;;;CAK7G,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,oFAA4B,CAAC;AAE1D,mEAAmE;AACnE,eAAO,MAAM,qBAAqB;;;;8EAkChC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,oFAErC,CAAC;AAEH,eAAO,MAAM,4BAA4B,oFAAiD,CAAC;AAE3F,eAAO,MAAM,0BAA0B,oFAA6B,CAAC;AAErE,eAAO,MAAM,+BAA+B,oFAAmC,CAAC;AAGhF,eAAO,MAAM,4BAA4B,oFAOvC,CAAC;AAIH,eAAO,MAAM,iCAAiC,oFAO5C,CAAC;AAEH,eAAO,MAAM,qCAAqC;;8EAUjD,CAAC;AAIF,eAAO,MAAM,wBAAwB;;8EAQnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;8EA0BhC,CAAC;AAEH,eAAO,MAAM,eAAe;;;8EAuD3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;8EAQ5B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAkB/B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AACvE,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -25,10 +25,12 @@ export * from './Skeleton';
 export * from './ProgressSegmented';
 export * from './Radio';
 export * from './ScopedTheme';
+export * from './ScrollShadow';
 export * from './Select';
 export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tabs';
 export * from './Textarea';
 export * from './Tile';
 export * from './Toast';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.121",
+  "version": "0.0.1-beta.122",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -76,9 +76,9 @@
     "class-variance-authority": "^0.7.1",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/primitives": "0.0.1-beta.121",
-    "@cdx-ui/icons": "0.0.1-beta.121",
-    "@cdx-ui/utils": "0.0.1-beta.121"
+    "@cdx-ui/utils": "0.0.1-beta.122",
+    "@cdx-ui/icons": "0.0.1-beta.122",
+    "@cdx-ui/primitives": "0.0.1-beta.122"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",