@cdx-ui/components 0.0.1-alpha.20 → 0.0.1-alpha.22

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

@@ -1,8 +1,26 @@
-import { type View } from 'react-native';
+import { type ReactNode } from 'react';
+import { Text as RNText, type TextProps, type View } from 'react-native';
 import { type ILinkProps } from '@cdx-ui/primitives';
+import { type IconProps } from '../Icon';
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 export interface LinkProps extends ILinkProps {
     className?: string;
 }
-export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<View>>;
+declare const LinkRoot: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<View>>;
+export interface LinkLabelProps extends TextProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const LinkLabel: import("react").ForwardRefExoticComponent<LinkLabelProps & import("react").RefAttributes<RNText>>;
+export interface LinkIconProps extends Omit<IconProps, 'children'> {
+}
+declare const LinkIcon: {
+    ({ className, style, as, ...props }: LinkIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type LinkCompoundComponent = typeof LinkRoot & {
+    Label: typeof LinkLabel;
+    Icon: typeof LinkIcon;
+};
+export declare const Link: LinkCompoundComponent;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIjE,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMpF,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,4FAQf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUpF,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAQZ,CAAC;AAQH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,mGAUd,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAErE,QAAA,MAAM,QAAQ;yCAAwC,aAAa;;CAIlE,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAGX,qBAAqB,CAAC"}

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

@@ -1,2 +1,4 @@
 export declare const linkRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const linkLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const linkIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,oFAW3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,oFAW3B,CAAC;AAEH,eAAO,MAAM,iBAAiB,oFAAgD,CAAC;AAE/E,eAAO,MAAM,gBAAgB,oFAAmC,CAAC"}

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

@@ -0,0 +1,15 @@
+import { View, type ViewProps } from 'react-native';
+import { type ProgressSegmentedVariants } from './styles';
+export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
+    /** Current step (1-based index into the segment count) */
+    readonly step: number;
+    /** Total number of segments */
+    readonly total?: number;
+    /** When true, the current step segment is marked as complete rather than in-progress */
+    readonly isStepComplete?: boolean;
+    /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
+    readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
+    readonly className?: string;
+}
+export declare const ProgressSegmented: import("react").ForwardRefExoticComponent<ProgressSegmentedProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,4IAA4I;IAC5I,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,KAAK,MAAM,CAAC;IACjG,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAyD7B,CAAC"}

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

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const progressSegmentedVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const segmentVariants: (props?: ({
+    state?: "complete" | "incomplete" | "inprogress" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ProgressSegmentedVariants = VariantProps<typeof progressSegmentedVariants>;
+export type SegmentVariants = VariantProps<typeof segmentVariants>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,yBAAyB,oFAAiC,CAAC;AAExE,eAAO,MAAM,eAAe;;8EAW1B,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACvF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
 export * from './Chip';
@@ -6,6 +7,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Input';
 export * from './Link';
+export * from './ProgressSegmented';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';

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,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.20",
+  "version": "0.0.1-alpha.22",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -62,11 +62,12 @@
     }
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.20",
-    "@cdx-ui/utils": "0.0.1-alpha.20",
-    "@cdx-ui/icons": "0.0.1-alpha.20"
+    "@cdx-ui/primitives": "0.0.1-alpha.22",
+    "@cdx-ui/utils": "0.0.1-alpha.22",
+    "@cdx-ui/icons": "0.0.1-alpha.22"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/BottomSheet/index.tsx

@@ -0,0 +1,316 @@
+import React, { forwardRef, useCallback, useRef, type ReactNode } from 'react';
+import { Dimensions, Pressable, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  BottomSheetModal,
+  BottomSheetModalProvider,
+  BottomSheetScrollView,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  BottomSheetFooter as GorhomBottomSheetFooter,
+  type BottomSheetBackdropProps,
+  type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
+} from '@gorhom/bottom-sheet';
+import { cn } from '@cdx-ui/utils';
+import { ArrowBackIosNew, Close } from '@cdx-ui/icons';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import {
+  bottomSheetBackButtonVariants,
+  bottomSheetBackIconVariants,
+  bottomSheetCloseButtonVariants,
+  bottomSheetCloseIconVariants,
+  bottomSheetContainerVariants,
+  bottomSheetContentVariants,
+  bottomSheetFooterVariants,
+  bottomSheetHeaderVariants,
+  bottomSheetSubtitleVariants,
+  handleIndicatorStyle,
+} from './styles';
+
+/** Ref type for BottomSheet; forwards the @gorhom modal ref (present, dismiss, snapToIndex, minimize, restore, etc.). */
+export type BottomSheetModalRef = React.ComponentRef<typeof BottomSheetModal>;
+
+export interface BottomSheetHeaderProps {
+  title?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  className?: string;
+  onClose?: () => void;
+  closeAccessibilityLabel?: string;
+  onBack?: () => void;
+  backAccessibilityLabel?: string;
+}
+
+function BottomSheetHeaderComponent(
+  {
+    title,
+    subtitle,
+    children,
+    className,
+    onClose,
+    closeAccessibilityLabel,
+    onBack,
+    backAccessibilityLabel = 'Go back',
+  }: BottomSheetHeaderProps,
+  ref: React.Ref<View>,
+) {
+  const hasTitle = title !== undefined && title !== '';
+  const hasContent = hasTitle || !!children || !!onBack;
+  const computedClassName = cn(bottomSheetHeaderVariants({ hasTitle: hasContent }), className);
+  return (
+    <View ref={ref} className={computedClassName}>
+      {onBack && (
+        <Pressable
+          onPress={onBack}
+          hitSlop={12}
+          accessibilityRole="button"
+          accessibilityLabel={backAccessibilityLabel}
+          className={cn(bottomSheetBackButtonVariants())}
+        >
+          <Icon as={ArrowBackIosNew} className={bottomSheetBackIconVariants()} />
+        </Pressable>
+      )}
+      <View className="flex-1">
+        {children ??
+          (hasTitle ? (
+            <View>
+              <Heading size="xs" className="text-lg">
+                {title}
+              </Heading>
+              {subtitle ? <Text className={bottomSheetSubtitleVariants()}>{subtitle}</Text> : null}
+            </View>
+          ) : null)}
+      </View>
+      {onClose && (
+        <BottomSheetCloseButton
+          onPress={onClose}
+          {...(closeAccessibilityLabel !== undefined && {
+            accessibilityLabel: closeAccessibilityLabel,
+          })}
+        />
+      )}
+    </View>
+  );
+}
+
+BottomSheetHeaderComponent.displayName = 'BottomSheet.Header';
+
+const BottomSheetHeader = forwardRef<View, BottomSheetHeaderProps>(BottomSheetHeaderComponent);
+BottomSheetHeader.displayName = 'BottomSheet.Header';
+
+// =============================================================================
+// CLOSEBUTTON
+// =============================================================================
+interface BottomSheetCloseButtonProps {
+  onPress: () => void;
+  className?: string;
+  accessibilityLabel?: string;
+}
+
+function BottomSheetCloseButton({
+  onPress,
+  className,
+  accessibilityLabel = 'Close',
+}: BottomSheetCloseButtonProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={12}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      className={cn(bottomSheetCloseButtonVariants(), className)}
+    >
+      <Icon as={Close} className={bottomSheetCloseIconVariants()} />
+    </Pressable>
+  );
+}
+
+BottomSheetCloseButton.displayName = 'BottomSheet.CloseButton';
+
+// =============================================================================
+// CONTENT
+// =============================================================================
+
+export interface BottomSheetContentProps {
+  children?: ReactNode;
+  className?: string;
+  hasSafeAreaInset?: boolean;
+  style?: ViewStyle;
+}
+
+const BottomSheetContent = forwardRef<View, BottomSheetContentProps>(
+  ({ children, className, hasSafeAreaInset, style }, ref) => {
+    const insets = useSafeAreaInsets();
+    const computedClassName = cn(bottomSheetContentVariants(), className);
+    return (
+      <View
+        ref={ref}
+        className={computedClassName}
+        style={hasSafeAreaInset ? { paddingBottom: insets.bottom, ...style } : style}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+BottomSheetContent.displayName = 'BottomSheet.Content';
+
+// =============================================================================
+// FOOTER
+// =============================================================================
+export interface BottomSheetFooterProps {
+  children?: ReactNode;
+  className?: string;
+  style?: ViewStyle;
+}
+
+const BottomSheetFooter = forwardRef<View, BottomSheetFooterProps>(
+  ({ children, className, style }, ref) => {
+    const insets = useSafeAreaInsets();
+    const computedClassName = cn(bottomSheetFooterVariants(), className);
+    return (
+      <View
+        ref={ref}
+        className={computedClassName}
+        style={{ paddingBottom: Math.max(insets.bottom, 24), ...style }}
+        pointerEvents="box-none"
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+BottomSheetFooter.displayName = 'BottomSheet.Footer';
+
+// =============================================================================
+// MODAL WRAPPER (WITH STYLES)
+// =============================================================================
+
+export interface BottomSheetModalProps extends React.ComponentPropsWithoutRef<
+  typeof BottomSheetModal
+> {
+  /** Show the drag handle indicator. When false, `handleComponent` is set to null. @default true */
+  handleVisible?: boolean;
+  /** Footer content rendered via gorhom's BottomSheetFooter for proper animated positioning and safe-area handling. */
+  footer?: ReactNode;
+}
+
+const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
+
+const CustomBackdrop = (props: BottomSheetBackdropProps) => {
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      opacity={0.5}
+      pressBehavior="close"
+    />
+  );
+};
+
+const BottomSheetModalStyled = forwardRef<
+  React.ComponentRef<typeof BottomSheetModal>,
+  BottomSheetModalProps
+>(({ handleVisible = true, footer, ...rest }, ref) => {
+  const renderFooter = useCallback(
+    (props: GorhomBottomSheetFooterProps) => (
+      <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
+    ),
+    [footer],
+  );
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      enableDynamicSizing
+      maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
+      handleComponent={handleVisible ? undefined : null}
+      handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
+      backdropComponent={CustomBackdrop}
+      backgroundComponent={(backgroundProps) => (
+        <View {...backgroundProps} className={cn(bottomSheetContainerVariants())} />
+      )}
+      {...rest}
+      {...(footer != null && { footerComponent: renderFooter })}
+    />
+  );
+});
+
+BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
+
+// =============================================================================
+// SCROLLVIEW WRAPPER (with footer margin adjustment enabled by default)
+// =============================================================================
+
+function BottomSheetScrollViewStyled({
+  enableFooterMarginAdjustment = true,
+  children,
+  ...rest
+}: React.ComponentPropsWithoutRef<typeof BottomSheetScrollView>) {
+  return (
+    <BottomSheetScrollView enableFooterMarginAdjustment={enableFooterMarginAdjustment} {...rest}>
+      {children}
+    </BottomSheetScrollView>
+  );
+}
+
+BottomSheetScrollViewStyled.displayName = 'BottomSheet.ScrollView';
+
+// =============================================================================
+// VIEW WRAPPER (with footer margin adjustment enabled by default)
+// =============================================================================
+
+function BottomSheetViewStyled({
+  enableFooterMarginAdjustment = true,
+  children,
+  ...rest
+}: React.ComponentPropsWithoutRef<typeof BottomSheetView>) {
+  return (
+    <BottomSheetView enableFooterMarginAdjustment={enableFooterMarginAdjustment} {...rest}>
+      {children}
+    </BottomSheetView>
+  );
+}
+
+BottomSheetViewStyled.displayName = 'BottomSheet.View';
+
+// Display names for gorhom components exposed as BottomSheet.*
+interface WithDisplayName {
+  displayName?: string;
+}
+(BottomSheetModalProvider as WithDisplayName).displayName = 'BottomSheet.Provider';
+
+// ── Public exports ────────────────────────────────────────
+
+interface BottomSheetCompound {
+  Modal: typeof BottomSheetModalStyled;
+  Header: typeof BottomSheetHeader;
+  Content: typeof BottomSheetContent;
+  Footer: typeof BottomSheetFooter;
+  Provider: typeof BottomSheetModalProvider;
+  ScrollView: typeof BottomSheetScrollViewStyled;
+  View: typeof BottomSheetViewStyled;
+}
+
+export const BottomSheet = {
+  Modal: BottomSheetModalStyled,
+  Header: BottomSheetHeader,
+  Content: BottomSheetContent,
+  Footer: BottomSheetFooter,
+  Provider: BottomSheetModalProvider,
+  ScrollView: BottomSheetScrollViewStyled,
+  View: BottomSheetViewStyled,
+} as BottomSheetCompound;
+
+// ── Hooks ────────────────────────────────────────────────
+
+export function useBottomSheet() {
+  const ref = useRef<BottomSheetModalRef>(null);
+  return { ref, present: () => ref.current?.present(), dismiss: () => ref.current?.dismiss() };
+}

package/src/components/BottomSheet/styles.ts

@@ -0,0 +1,79 @@
+import { type ViewStyle } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_PRIMARY,
+  COLOR_TEXT_SECONDARY,
+} from '../../styles/primitives';
+
+// ── Container ──────────────────────────────────────────────
+
+export const bottomSheetContainerVariants = cva([
+  'rounded-t-3xl border-t border-x overflow-hidden',
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+]);
+
+// ── Header ─────────────────────────────────────────────────
+
+export const bottomSheetHeaderVariants = cva(
+  [
+    'flex-row items-center justify-between min-h-12 px-4 pt-3 pb-2',
+    COLOR_BG_PRIMARY,
+    COLOR_TEXT_PRIMARY,
+  ],
+  {
+    variants: {
+      hasTitle: {
+        true: '',
+        false: 'justify-end',
+      },
+    },
+    defaultVariants: {
+      hasTitle: true,
+    },
+  },
+);
+
+// ── Content ────────────────────────────────────────────────
+
+export const bottomSheetContentVariants = cva([COLOR_BG_PRIMARY, 'px-4 pb-6']);
+
+// ── Footer ─────────────────────────────────────────────────
+
+export const bottomSheetFooterVariants = cva([
+  'px-4 pt-3 pb-4 border-t',
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+]);
+
+// ── Subtitle ────────────────────────────────────────────────
+
+export const bottomSheetSubtitleVariants = cva(['text-sm', COLOR_TEXT_SECONDARY]);
+
+// ── Back Button ─────────────────────────────────────────────
+
+export const bottomSheetBackButtonVariants = cva(['p-1 -m-1 mr-2 rounded-full active:opacity-70']);
+
+export const bottomSheetBackIconVariants = cva(['size-5 text-slate-500']);
+
+// ── Close Button ───────────────────────────────────────────
+
+export const bottomSheetCloseButtonVariants = cva(['p-1 -m-1 rounded-full active:opacity-70']);
+
+// ── Close Icon ─────────────────────────────────────────────
+
+export const bottomSheetCloseIconVariants = cva(['size-5 text-slate-500']);
+
+// ── Handle indicator ────────────────────────────────────────
+// Plain ViewStyle — gorhom's handleIndicatorStyle doesn't accept classNames.
+// slate-300 (#cbd5e1) maps to COLOR_BORDER_STRONG; update when raw token palette is available (TODO).
+export const handleIndicatorStyle: ViewStyle = {
+  backgroundColor: '#cbd5e1',
+  width: 36,
+  height: 4,
+  borderRadius: 2,
+};
+
+export type BottomSheetHeaderVariants = VariantProps<typeof bottomSheetHeaderVariants>;

package/src/components/Link/index.tsx

@@ -1,8 +1,9 @@
-import { forwardRef } from 'react';
-import { Pressable, type View } from 'react-native';
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
 import { createLink, type ILinkProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
-import { linkRootVariants } from './styles';
+import { Icon, type IconProps } from '../Icon';
+import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
@@ -10,11 +11,15 @@ const LinkPrimitive = createLink({
   Root: Pressable,
 });
 
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
 export interface LinkProps extends ILinkProps {
   className?: string;
 }
 
-export const Link = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
+const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
   const rootClassName = cn(linkRootVariants(), className);
 
   return (
@@ -24,4 +29,55 @@ export const Link = forwardRef<View, LinkProps>(({ className, children, style, .
   );
 });
 
-Link.displayName = 'Link';
+LinkRoot.displayName = 'Link';
+
+// =============================================================================
+// STYLED LABEL COMPONENT
+// =============================================================================
+
+export interface LinkLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const LinkLabel = forwardRef<RNText, LinkLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(linkLabelVariants(), className);
+
+    return (
+      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+
+LinkLabel.displayName = 'Link.Label';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface LinkIconProps extends Omit<IconProps, 'children'> {}
+
+const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
+  const computedClassName = cn(linkIconVariants(), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+LinkIcon.displayName = 'Link.Icon';
+
+// =============================================================================
+// COMPOUND COMPONENT EXPORT
+// =============================================================================
+
+type LinkCompoundComponent = typeof LinkRoot & {
+  Label: typeof LinkLabel;
+  Icon: typeof LinkIcon;
+};
+
+export const Link = Object.assign(LinkRoot, {
+  Label: LinkLabel,
+  Icon: LinkIcon,
+}) as LinkCompoundComponent;

package/src/components/Link/styles.ts

@@ -1,11 +1,11 @@
 import { Platform } from 'react-native';
 import { cva } from 'class-variance-authority';
-import { COLOR_TEXT_PRIMARY, TRANSITION_COLORS } from '../../styles/primitives';
+import { TRANSITION_COLORS } from '../../styles/primitives';
 
 export const linkRootVariants = cva([
-  'flex-row items-center',
+  'flex-row items-center gap-1',
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
-  COLOR_TEXT_PRIMARY,
+  'text-blue-600',
   'underline decoration-slate-300 underline-offset-4',
   TRANSITION_COLORS,
   Platform.select({
@@ -14,3 +14,7 @@ export const linkRootVariants = cva([
   }),
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
 ]);
+
+export const linkLabelVariants = cva(['text-sm font-medium', 'text-blue-600']);
+
+export const linkIconVariants = cva(['size-4', 'text-blue-600']);