prizmux 1.4.0 → 1.4.2

package/README.md

@@ -1,4 +1,4 @@
-# 👽 Prizmux
+# Prizmux
 
 A developer-first React Native component system.
 
@@ -6,195 +6,46 @@ A developer-first React Native component system.
 
 Prizmux gives you production-ready UI primitives with no bloated dependencies, no locked abstractions, and no fighting the framework. Just clean components you can copy, modify, and ship.
 
----
-
-## Why Prizmux?
-
-Most React Native UI libraries are over-opinionated, hard to override, and packed with unnecessary dependencies. Prizmux takes a different approach — lightweight, zero forced dependencies, and fully typed.
-
-Every component follows the same rule: **bring your own icons, images, and navigation**. The package never pulls in lucide, expo-image, expo-router, or any other third-party library on your behalf.
-
----
-
-## Components
-
-### Button
-Variants, sizes, loading state, icon support (left or right), icon-only mode, and full accessibility out of the box.
-
-```tsx
-<Button
-  title="Continue"
-  variant="filled"
-  size="medium"
-  borderRadius={8}
-  icon={<ArrowRight size={18} color="#fff" />}
-  iconPosition="right"
-  onPress={() => {}}
-/>
-```
-
----
-
-### Card
-Composable container with shadow and rounded corners. Put anything inside.
-
-```tsx
-<Card>
-  <Text>Hello world</Text>
-</Card>
-```
-
----
-
-### BottomSheet
-Swipeable sheet with drag handle, backdrop dismiss, and close button. Bring your own close icon.
-
-```tsx
-<BottomSheet
-  visible={visible}
-  onClose={() => setVisible(false)}
-  title="Options"
-  closeIcon={<X size={16} color="#333" />}
->
-  <Text>Sheet content</Text>
-</BottomSheet>
-```
-
----
-
-### ImagePreview
-Full screen image viewer with single image and gallery support. Bring your own nav icons.
-
-```tsx
-<ImagePreview
-  visible={visible}
-  images={['https://...']}
-  onClose={() => setVisible(false)}
-  closeIcon={<X size={24} color="#fff" />}
-  prevIcon={<ChevronLeft size={32} color="#fff" />}
-  nextIcon={<ChevronRight size={32} color="#fff" />}
-/>
-```
-
-Trigger it by wrapping any image in a `Pressable`:
-
-```tsx
-<Pressable onPress={() => setVisible(true)}>
-  <Image source={{ uri: '...' }} style={styles.avatar} />
-</Pressable>
-```
+📖 **Full documentation at [prizmux.vercel.app](https://prizmux.vercel.app)**
 
 ---
 
-### HeaderWithBack
-Navigation header with back button, optional avatar, optional title position, and up to 4 right-side action icons with badge support.
-
-```tsx
-<HeaderWithBack
-  title="John Doe"
-  onBackPress={() => router.back()}
-  avatar={<Image source={{ uri: '...' }} style={{ width: 40, height: 40 }} />}
-  actions={[
-    { icon: <Bell size={22} color="#333" />, onPress: () => {}, badge: 3 },
-    { icon: <Phone size={22} color="#333" />, onPress: () => {} },
-  ]}
-/>
-```
+## Install
 
----
-
-### EmptyState
-Placeholder UI for empty lists or zero-data screens. Bring your own icon and action button.
-
-```tsx
-<EmptyState
-  title="No bookings yet"
-  description="Start by booking a service."
-  icon={<CalendarX size={80} color="rgba(99,102,241,0.3)" />}
-  action={
-    <Button title="Book Now" variant="filled" onPress={() => {}} />
-  }
-/>
+```bash
+npm install prizmux
 ```
 
 ---
 
-### PhoneInput
-International phone number input with a searchable country picker, auto-detection when a full number is pasted, and a clean ISO code fallback when no flag renderer is provided.
-
-```tsx
-<PhoneInput
-  label="Phone Number"
-  defaultCountryCode="UG"
-  value={phone}
-  onChange={setPhone}
-  placeholder="712 345 678"
-  renderFlag={(country) => (
-    <CountryFlag isoCode={country.code} size={22} />
-  )}
-/>
-```
-
-`onChange` returns an object with three fields:
-
-```ts
-{
-  country: Country;   // full country object
-  number: string;     // local number only  e.g. "712345678"
-  full: string;       // complete number    e.g. "+256712345678"
-}
-```
-
-**Flags** — no flag library is bundled. Pass any renderer via `renderFlag`, or leave it out and the component falls back to a clean ISO code label (`UG`, `US`).
+## Components
 
-```bash
-# optional — only if you want actual flag images
-npm install react-native-country-flag
-```
+| Component      | Description                                                                           |
+| -------------- | ------------------------------------------------------------------------------------- |
+| `Alert`        | Customizable modal alert — bring your own buttons                                     |
+| `BottomSheet`  | Swipeable sheet with drag handle and backdrop dismiss                                 |
+| `Button`       | Variants, sizes, loading state, icon support, full accessibility                      |
+| `Card`         | Composable container, put anything inside                                             |
+| `EmptyState`   | Placeholder UI for empty lists and zero-data screens                                  |
+| `FAB`          | Floating action button with icon, label, or both                                      |
+| `Header`       | Navigation header with or without a back button, avatar, and action icons with badges |
+| `ImagePreview` | Full screen image viewer with gallery support                                         |
+| `PhoneInput`   | International phone input with searchable country picker and auto-detection           |
+| `Sidebar`      | Collapsible navigation panel with customizable items, icons, and active states        |
+| `Toast`        | Auto, manual, and swipe-to-dismiss notifications                                      |
 
 ---
 
-## Architecture
+## Design Decisions
 
-```
-/components
-  /Button
-    Button.tsx
-    Button.types.ts
-    index.ts
-  /Card
-    Card.tsx
-    Card.types.ts
-    index.ts
-  /BottomSheet
-    BottomSheet.tsx
-    BottomSheet.types.ts
-    index.ts
-  /ImagePreview
-    ImagePreview.tsx
-    ImagePreview.types.ts
-    index.ts
-  /HeaderWithBack
-    HeaderWithBack.tsx
-    HeaderWithBack.types.ts
-    index.ts
-  /EmptyState
-    EmptyState.tsx
-    EmptyState.types.ts
-    index.ts
-  /PhoneInput
-    PhoneInput.tsx
-    PhoneInput.types.ts
-    countries.ts
-    index.ts
-```
+- **No icon library required** — every component that needs an icon accepts `ReactNode`.
+- **No navigation dependency** — `HeaderWithBack` requires you to pass `onBackPress`.
+- **No image library required** — image slots accept `ReactNode`.
+- **No flag library required** — `PhoneInput` accepts a `renderFlag` prop with a built-in ISO code fallback.
+- **Fully typed** — every component ships with a `.types.ts` file.
 
 ---
 
-## Design Decisions
+## License
 
-- **No icon library required** — every component that needs an icon accepts `ReactNode`. Pass lucide, react-native-vector-icons, an SVG, or a plain emoji.
-- **No navigation dependency** — `HeaderWithBack` requires you to pass `onBackPress`. Use expo-router, react-navigation, or anything else.
-- **No image library required** — `ImagePreview` and `HeaderWithBack` accept `ReactNode` for avatar/image slots. Use expo-image, the built-in RN Image, or anything you want.
-- **No flag library required** — `PhoneInput` accepts a `renderFlag` prop. Use `react-native-country-flag`, a custom SVG, or rely on the built-in ISO fallback.
-- **Fully typed** — every component ships with a `.types.ts` file.
+MIT

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { HeaderProps } from './Header.types';
+export declare const Header: React.FC<HeaderProps>;
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEjD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkExC,CAAA"}

package/dist/components/Header/Header.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const Header = ({ title, avatar, titlePosition = 'center', showBack = false, onBackPress, backIcon, actions = [], }) => {
+    const titleStyle = titlePosition === 'left'
+        ? styles.titleLeft
+        : titlePosition === 'right'
+            ? styles.titleRight
+            : styles.titleCenter;
+    const visibleActions = actions.slice(0, 4);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [showBack ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onBackPress, style: styles.backButton, android_ripple: { color: 'rgba(0, 0, 0, 0.1)' }, children: backIcon ?? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.backIcon, children: "\u2039" }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.leftSpacer })), avatar && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.avatarContainer, children: avatar }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, titleStyle], numberOfLines: 1, children: title }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.actionsContainer, children: visibleActions.map((action, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: action.onPress, style: styles.actionButton, android_ripple: { color: 'rgba(0, 0, 0, 0.1)' }, children: [action.icon, action.badge !== undefined && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, numberOfLines: 1, children: typeof action.badge === 'number' && action.badge > 99
+                                    ? '99+'
+                                    : action.badge }) }))] }, index))) })] }));
+};
+exports.Header = Header;
+const styles = react_native_1.StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 12,
+        backgroundColor: '#FFFFFF',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E5E7EB',
+    },
+    leftSpacer: {
+        width: 40,
+        height: 40,
+    },
+    backButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#F3F4F6',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    backIcon: {
+        fontSize: 28,
+        color: '#111827',
+        lineHeight: 32,
+        fontWeight: '300',
+    },
+    avatarContainer: {
+        marginLeft: 6,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    title: {
+        flex: 1,
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#111827',
+        marginHorizontal: 8,
+    },
+    titleLeft: { textAlign: 'left' },
+    titleCenter: { textAlign: 'center' },
+    titleRight: { textAlign: 'right' },
+    actionsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    actionButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badge: {
+        position: 'absolute',
+        top: 4,
+        right: 4,
+        minWidth: 16,
+        height: 16,
+        borderRadius: 8,
+        backgroundColor: '#EF4444',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 3,
+    },
+    badgeText: {
+        fontSize: 10,
+        fontWeight: '700',
+        color: '#FFFFFF',
+    },
+});
+//# sourceMappingURL=Header.js.map

package/dist/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"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"}

package/dist/components/Header/Header.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface HeaderAction {
+    icon: ReactNode;
+    onPress: () => void;
+    badge?: number | string;
+}
+export interface HeaderProps {
+    title: string;
+    avatar?: ReactNode;
+    titlePosition?: 'left' | 'center' | 'right';
+    /** Back button control */
+    showBack?: boolean;
+    onBackPress?: () => void;
+    backIcon?: ReactNode;
+    actions?: HeaderAction[];
+}
+//# sourceMappingURL=Header.types.d.ts.map

package/dist/components/Header/Header.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IAE3C,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB"}

package/dist/components/Header/Header.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Header.types.js.map

package/dist/components/Header/Header.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.types.js","sourceRoot":"","sources":["../../../src/components/Header/Header.types.ts"],"names":[],"mappings":""}

package/dist/components/Header/index.d.ts

@@ -0,0 +1,3 @@
+export { Header } from './Header';
+export type { HeaderProps, HeaderAction } from './Header.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/Header/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var Header_1 = require("./Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Header/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SidebarProps } from './Sidebar.types';
+export declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/Sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAW9D,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAoEjE,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0N1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+// Get the initial off-screen value based on slide direction
+const getInitialTranslate = (side, width, height) => {
+    switch (side) {
+        case 'left': return { x: -width, y: 0 };
+        case 'right': return { x: width, y: 0 };
+        case 'top': return { x: 0, y: -height };
+        case 'bottom': return { x: 0, y: height };
+    }
+};
+// Position style for the drawer
+const getDrawerPosition = (side, width, height, offsetTop, offsetSide) => {
+    switch (side) {
+        case 'left':
+            return {
+                left: offsetSide,
+                top: offsetTop,
+                bottom: 0,
+                width,
+                height: undefined,
+            };
+        case 'right':
+            return {
+                right: offsetSide,
+                top: offsetTop,
+                bottom: 0,
+                width,
+                height: undefined,
+            };
+        case 'top':
+            return {
+                top: 0,
+                left: 0,
+                right: 0,
+                height,
+                width: undefined,
+            };
+        case 'bottom':
+            return {
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height,
+                width: undefined,
+            };
+    }
+};
+// Which corners to round based on slide direction
+const getBorderRadius = (side, radius) => {
+    switch (side) {
+        case 'left': return { borderTopRightRadius: radius, borderBottomRightRadius: radius };
+        case 'right': return { borderTopLeftRadius: radius, borderBottomLeftRadius: radius };
+        case 'top': return { borderBottomLeftRadius: radius, borderBottomRightRadius: radius };
+        case 'bottom': return { borderTopLeftRadius: radius, borderTopRightRadius: radius };
+    }
+};
+const Sidebar = ({ visible, onClose, items, side = 'right', width = SCREEN_WIDTH * 0.56, height = SCREEN_HEIGHT * 0.5, offsetTop = 0, offsetSide = 0, showOverlay = true, overlayColor = 'rgba(0,0,0,0.3)', dismissOnOverlayPress = true, backgroundColor = '#FFFFFF', borderRadius = 0, header, showHeader = true, headerStyle, showIconBackground = false, iconBackgroundColor = 'rgba(0,0,0,0.06)', iconBorderRadius = 8, activeItemColor = '#F3F4F6', itemTextColor = '#111827', badgeBorderRadius = 12, shadow = true, style, itemStyle, itemTextStyle, badgeStyle, badgeTextStyle, }) => {
+    const isHorizontal = side === 'left' || side === 'right';
+    const initial = getInitialTranslate(side, width, height);
+    const translateX = (0, react_1.useRef)(new react_native_1.Animated.Value(initial.x)).current;
+    const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(initial.y)).current;
+    const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const animateIn = (0, react_1.useCallback)(() => {
+        translateX.setValue(initial.x);
+        translateY.setValue(initial.y);
+        opacityAnim.setValue(0);
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(opacityAnim, {
+                toValue: 1,
+                duration: 220,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.spring(translateX, {
+                toValue: 0,
+                bounciness: 0,
+                speed: 20,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.spring(translateY, {
+                toValue: 0,
+                bounciness: 0,
+                speed: 20,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, [translateX, translateY, opacityAnim, initial]);
+    const animateOut = (0, react_1.useCallback)((onDone) => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(opacityAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(translateX, {
+                toValue: initial.x,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(translateY, {
+                toValue: initial.y,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+        ]).start(() => onDone?.());
+    }, [translateX, translateY, opacityAnim, initial]);
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            animateIn();
+        }
+    }, [visible]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        animateOut(onClose);
+    }, [animateOut, onClose]);
+    if (!visible)
+        return null;
+    const positionStyle = getDrawerPosition(side, width, height, offsetTop, offsetSide);
+    const radiusStyle = getBorderRadius(side, borderRadius);
+    const shadowStyle = shadow ? {
+        shadowColor: '#000',
+        shadowOffset: { width: side === 'right' ? -2 : 2, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        elevation: 10,
+    } : {};
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, { visible: visible, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: handleClose, children: [showOverlay ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: dismissOnOverlayPress ? handleClose : undefined, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+                        styles.backdrop,
+                        { backgroundColor: overlayColor, opacity: opacityAnim },
+                    ] }) })) : (
+            // Invisible touch area just to capture taps outside when no overlay
+            dismissOnOverlayPress && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: handleClose, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.backdrop }) }))), (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+                    styles.drawer,
+                    positionStyle,
+                    radiusStyle,
+                    shadowStyle,
+                    { backgroundColor, transform: [{ translateX }, { translateY }] },
+                    style,
+                ], children: [header && showHeader && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.header, headerStyle], children: header })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.menuContainer, children: items.map((item) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: ({ pressed }) => [
+                                styles.menuItem,
+                                pressed && { backgroundColor: activeItemColor },
+                                itemStyle,
+                            ], onPress: () => {
+                                handleClose();
+                                setTimeout(() => item.onPress(), 220);
+                            }, android_ripple: { color: 'rgba(0,0,0,0.05)', borderless: false }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.menuItemContent, children: [item.icon && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.iconContainer,
+                                            showIconBackground && {
+                                                backgroundColor: iconBackgroundColor,
+                                                borderRadius: iconBorderRadius,
+                                                width: 36,
+                                                height: 36,
+                                            },
+                                        ], children: item.icon })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                            styles.menuItemText,
+                                            { color: itemTextColor },
+                                            itemTextStyle,
+                                        ], children: item.title }), item.badge !== undefined && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.badge,
+                                            { borderRadius: badgeBorderRadius },
+                                            item.badgeColor ? { backgroundColor: item.badgeColor } : null,
+                                            badgeStyle,
+                                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.badgeText, badgeTextStyle], children: typeof item.badge === 'number' && item.badge > 99
+                                                ? '99+'
+                                                : item.badge }) }))] }) }, item.id))) })] })] }));
+};
+exports.Sidebar = Sidebar;
+exports.default = exports.Sidebar;
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    drawer: {
+        position: 'absolute',
+        overflow: 'hidden',
+        zIndex: 10,
+    },
+    header: {
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E7EB',
+    },
+    menuContainer: {
+        paddingVertical: 8,
+    },
+    menuItem: {
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        marginHorizontal: 8,
+        marginVertical: 2,
+        borderRadius: 8,
+    },
+    menuItemContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    iconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    menuItemText: {
+        flex: 1,
+        fontSize: 15,
+        fontWeight: '500',
+    },
+    badge: {
+        minWidth: 20,
+        height: 20,
+        backgroundColor: '#6B7280',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 6,
+    },
+    badgeText: {
+        color: '#FFFFFF',
+        fontSize: 11,
+        fontWeight: '700',
+    },
+});
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/Sidebar/Sidebar.types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+export type SidebarSide = 'left' | 'right' | 'top' | 'bottom';
+export interface SidebarMenuItem {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    onPress: () => void;
+    badge?: number | string;
+    badgeColor?: string;
+}
+export interface SidebarProps {
+    visible: boolean;
+    onClose: () => void;
+    items: SidebarMenuItem[];
+    side?: SidebarSide;
+    width?: number;
+    height?: number;
+    offsetTop?: number;
+    offsetSide?: number;
+    showOverlay?: boolean;
+    overlayColor?: string;
+    dismissOnOverlayPress?: boolean;
+    backgroundColor?: string;
+    borderRadius?: number;
+    header?: ReactNode;
+    showHeader?: boolean;
+    headerStyle?: ViewStyle;
+    showIconBackground?: boolean;
+    iconBackgroundColor?: string;
+    iconBorderRadius?: number;
+    activeItemColor?: string;
+    itemTextColor?: string;
+    badgeBorderRadius?: number;
+    shadow?: boolean;
+    style?: ViewStyle;
+    itemStyle?: ViewStyle;
+    itemTextStyle?: TextStyle;
+    badgeStyle?: ViewStyle;
+    badgeTextStyle?: TextStyle;
+}
+//# sourceMappingURL=Sidebar.types.d.ts.map

package/dist/components/Sidebar/Sidebar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,KAAK,EAAE,eAAe,EAAE,CAAC;IAGzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAGhC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IAGxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B"}

package/dist/components/Sidebar/Sidebar.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Sidebar.types.js.map

package/dist/components/Sidebar/Sidebar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.types.js","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":""}

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarMenuItem, SidebarSide } from './Sidebar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/Sidebar/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+var Sidebar_1 = require("./Sidebar");
+Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return Sidebar_1.Sidebar; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":";;;AAAA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA"}

package/dist/components/index.d.ts

@@ -1,10 +1,12 @@
+export * from './Alert';
+export * from './BottomSheet';
 export * from './Button';
 export * from './Card';
-export * from './BottomSheet';
-export * from './ImagePreview';
-export * from './HeaderWithBack';
 export * from './EmptyState';
+export * from './Fab';
+export * from './Header';
+export * from './ImagePreview';
 export * from './PhoneInput';
+export * from './Sidebar';
 export * from './Toast';
-export * from './Fab';
 //# sourceMappingURL=index.d.ts.map

package/dist/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,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,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,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/components/index.js

@@ -14,13 +14,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Alert"), exports);
+__exportStar(require("./BottomSheet"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Card"), exports);
-__exportStar(require("./BottomSheet"), exports);
-__exportStar(require("./ImagePreview"), exports);
-__exportStar(require("./HeaderWithBack"), exports);
 __exportStar(require("./EmptyState"), exports);
+__exportStar(require("./Fab"), exports);
+__exportStar(require("./Header"), exports);
+__exportStar(require("./ImagePreview"), exports);
 __exportStar(require("./PhoneInput"), exports);
+__exportStar(require("./Sidebar"), exports);
 __exportStar(require("./Toast"), exports);
-__exportStar(require("./Fab"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,yCAAuB;AACvB,gDAA8B;AAC9B,iDAA+B;AAC/B,mDAAgC;AAChC,+CAA6B;AAC7B,+CAA6B;AAC7B,0CAAwB;AACxB,wCAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,gDAA8B;AAC9B,2CAAyB;AACzB,yCAAuB;AACvB,+CAA6B;AAC7B,wCAAsB;AACtB,2CAAyB;AACzB,iDAA+B;AAC/B,+CAA6B;AAC7B,4CAA0B;AAC1B,0CAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prizmux",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "A smooth and modern UI component library for React Native",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -71,10 +71,10 @@
     "prizmux"
   ],
   "author": "Lukwago Joel Jr",
-   "license": "MIT",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/contecfy/prizmux"
+    "url": "git+https://github.com/contecfy/prizmux.git"
   },
   "peerDependencies": {
     "react": ">=16.8.0",