@campxdev/react-native-blueprint 0.1.1 → 0.1.2

package/lib/typescript/src/components/ui/Alert-Dialog.d.ts

@@ -1,11 +1,168 @@
+import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface Alert-DialogProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Alert-Dialog: React.ComponentType<Alert-DialogProps>;
-export default Alert-Dialog;
+import { type ViewProps } from 'react-native';
+/**
+ * Root alert dialog container
+ *
+ * A modal dialog that interrupts the user with important content and expects a response.
+ * Use for critical actions that require user confirmation before proceeding.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="destructive"><Text>Delete Account</Text></Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
+ *       <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ *
+ * @accessibility
+ * - Traps focus within dialog when open
+ * - Closes on Escape key press
+ * - Returns focus to trigger on close
+ * - Uses appropriate ARIA attributes
+ */
+declare const AlertDialog: React.ForwardRefExoticComponent<{
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    defaultOpen?: boolean;
+} & ViewProps & {
+    asChild?: boolean;
+} & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>>;
+/**
+ * Trigger button that opens the alert dialog
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogTrigger asChild>
+ *   <Button><Text>Open Dialog</Text></Button>
+ * </AlertDialogTrigger>
+ * ```
+ */
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>, "ref"> & {
+    asChild?: boolean;
+} & {
+    onKeyDown?: (ev: React.KeyboardEvent) => void;
+    onKeyUp?: (ev: React.KeyboardEvent) => void;
+} & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>>;
+/**
+ * Portal component for rendering dialog content outside the DOM hierarchy
+ */
+declare const AlertDialogPortal: typeof AlertDialogPrimitive.Portal;
+/**
+ * Semi-transparent overlay behind the alert dialog
+ *
+ * Provides backdrop that dims background content and handles click-outside behavior.
+ * Uses platform-specific full window overlay on iOS for proper z-index layering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogOverlay>
+ *   <AlertDialogContent>...</AlertDialogContent>
+ * </AlertDialogOverlay>
+ * ```
+ */
+declare function AlertDialogOverlay({ className, children, ...props }: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> & React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main alert dialog content container
+ *
+ * Contains the dialog's title, description, and action buttons. Automatically centered
+ * on screen with smooth entrance animations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogContent>
+ *   <AlertDialogHeader>
+ *     <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+ *     <AlertDialogDescription>Description here</AlertDialogDescription>
+ *   </AlertDialogHeader>
+ *   <AlertDialogFooter>
+ *     <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
+ *     <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
+ *   </AlertDialogFooter>
+ * </AlertDialogContent>
+ * ```
+ */
+declare function AlertDialogContent({ className, portalHost, ...props }: AlertDialogPrimitive.ContentProps & React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+    portalHost?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header section for alert dialog content
+ *
+ * Groups the title and description with proper spacing and text alignment.
+ *
+ * @component
+ */
+declare function AlertDialogHeader({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Footer section for alert dialog action buttons
+ *
+ * Contains cancel and action buttons with responsive layout (stacked on mobile, row on desktop).
+ *
+ * @component
+ */
+declare function AlertDialogFooter({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Title text for the alert dialog
+ *
+ * Prominently displays the main heading with large, semibold text.
+ *
+ * @component
+ */
+declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.TitleProps & React.RefAttributes<AlertDialogPrimitive.TitleRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Description text for the alert dialog
+ *
+ * Provides additional context below the title with muted styling.
+ *
+ * @component
+ */
+declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.DescriptionProps & React.RefAttributes<AlertDialogPrimitive.DescriptionRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Primary action button that confirms the alert dialog action
+ *
+ * Styled as a primary button. Automatically closes dialog on press.
+ *
+ * @component
+ */
+declare function AlertDialogAction({ className, ...props }: AlertDialogPrimitive.ActionProps & React.RefAttributes<AlertDialogPrimitive.ActionRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Cancel button that dismisses the alert dialog
+ *
+ * Styled as an outline button. Automatically closes dialog on press without performing action.
+ *
+ * @component
+ */
+declare function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.CancelProps & React.RefAttributes<AlertDialogPrimitive.CancelRef>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+//# sourceMappingURL=Alert-Dialog.d.ts.map

package/lib/typescript/src/components/ui/Alert-Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert-Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Alert-Dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAO9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,WAAW;;;;;;;OA3BhB,CAAA;;OAIA,CAAC;uBAuB2C,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAxCvB,CAAA;;OAIA,CAAC;;;;;;;OAJD,CAAA;;OAIA,CAAC;uBAoCqD,CAAC;AAExD;;GAEG;AACH,QAAA,MAAM,iBAAiB,oCAA8B,CAAC;AAKtD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,SAAS,CAAC,GACnD,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAsBF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,YAAY,GAClC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiBF;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAM5D;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAU5D;AAED;;;;;;GAMG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,UAAU,GAChC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,QAAQ,CAAC,2CAOnD;AAED;;;;;;GAMG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,gBAAgB,GACtC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,2CAOzD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CASpD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CAWpD;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"Alert-Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Alert-Dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAO9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,WAAW;;;;;;;OA3BhB,CAAA;;OAIA,CAAC;uBAuB2C,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,kBAAkB;OAxCvB,CAAA;;OAIA,CAAC;;;;;;;OAJD,CAAA;;OAIA,CAAC;uBAoCqD,CAAC;AAExD;;GAEG;AACH,QAAA,MAAM,iBAAiB,oCAA8B,CAAC;AAKtD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,SAAS,CAAC,GACnD,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAsBF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,YAAY,GAClC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiBF;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAM5D;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAU5D;AAED;;;;;;GAMG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,UAAU,GAChC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,QAAQ,CAAC,2CAOnD;AAED;;;;;;GAMG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,gBAAgB,GACtC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,2CAOzD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CASpD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CAWpD;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}

package/lib/typescript/src/components/ui/Alert.d.ts

@@ -1,11 +1,60 @@
+import { Text } from './Text';
+import type { LucideIcon } from 'lucide-react-native';
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface AlertProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Alert: React.ComponentType<AlertProps>;
-export default Alert;
+import { View, type ViewProps } from 'react-native';
+/**
+ * Alert component for displaying important messages or notifications
+ *
+ * Features an icon on the left side with title and description.
+ * Supports default and destructive variants for different severity levels.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Alert icon={AlertCircle} variant="default">
+ *   <AlertTitle><Text>Heads up!</Text></AlertTitle>
+ *   <AlertDescription>
+ *     <Text>You can add components to your app using the cli.</Text>
+ *   </AlertDescription>
+ * </Alert>
+ *
+ * // Destructive variant
+ * <Alert icon={AlertTriangle} variant="destructive">
+ *   <AlertTitle><Text>Error</Text></AlertTitle>
+ *   <AlertDescription>
+ *     <Text>Your session has expired. Please login again.</Text>
+ *   </AlertDescription>
+ * </Alert>
+ * ```
+ *
+ * @param {LucideIcon} icon - Icon component to display
+ * @param {'default' | 'destructive'} [variant='default'] - Alert style variant
+ * @param {string} [iconClassName] - Additional classes for the icon
+ * @param {string} [className] - Additional classes for the container
+ *
+ * @accessibility Sets role="alert" for screen reader announcement
+ */
+declare function Alert({ className, variant, children, icon, iconClassName, ...props }: ViewProps & React.RefAttributes<View> & {
+    icon: LucideIcon;
+    variant?: 'default' | 'destructive';
+    iconClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertTitle - Title text for the alert
+ *
+ * Displays as a medium-weight heading with appropriate spacing from the icon.
+ *
+ * @param {string} [className] - Additional Tailwind classes
+ */
+declare function AlertTitle({ className, ...props }: React.ComponentProps<typeof Text> & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertDescription - Description text for the alert
+ *
+ * Displays detailed message content with muted styling and appropriate spacing.
+ * Automatically adjusts color for destructive variants.
+ *
+ * @param {string} [className] - Additional Tailwind classes
+ */
+declare function AlertDescription({ className, ...props }: React.ComponentProps<typeof Text> & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertDescription, AlertTitle };
+//# sourceMappingURL=Alert.d.ts.map