@demlanide/react-lucky-components 0.1.0

package/dist/Picker/useFilteredItems.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+export function useFilteredItems(items, query) {
+    return useMemo(() => {
+        if (!query)
+            return items;
+        const lowerQuery = query.toLowerCase();
+        return items.filter((item) => Object.keys(item).some((key) => {
+            const value = item[key];
+            if (typeof value === 'string') {
+                return value.toLowerCase().includes(lowerQuery);
+            }
+            if (Array.isArray(value)) {
+                return value.some((v) => typeof v === 'string' && v.toLowerCase().includes(lowerQuery));
+            }
+            return false;
+        }));
+    }, [items, query]);
+}

package/dist/SegmentedTabs/SegmentedTabs.d.ts

@@ -0,0 +1,3 @@
+import type { SegmentedTabsProps } from './types';
+export declare function SegmentedTabs<T extends string>({ tabs, value, onChange }: SegmentedTabsProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedTabs.d.ts.map

package/dist/SegmentedTabs/SegmentedTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/SegmentedTabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQlD,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAmC/F"}

package/dist/SegmentedTabs/SegmentedTabs.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled from 'styled-components/native';
+const TRACK_BG = '#EFF4F7';
+const ACTIVE_TEXT = '#262626';
+const INACTIVE_TEXT = '#738295';
+const TIMING = { duration: 200, easing: Easing.out(Easing.ease) };
+export function SegmentedTabs({ tabs, value, onChange }) {
+    const trackWidth = useSharedValue(0);
+    const activeIndex = useSharedValue(tabs.findIndex(t => t.value === value));
+    useEffect(() => {
+        const index = tabs.findIndex(t => t.value === value);
+        activeIndex.value = withTiming(index, TIMING);
+    }, [value]);
+    const pillStyle = useAnimatedStyle(() => {
+        const pillWidth = trackWidth.value / tabs.length;
+        return {
+            width: pillWidth,
+            transform: [{ translateX: activeIndex.value * pillWidth }],
+        };
+    });
+    return (_jsxs(Track, { onLayout: e => { trackWidth.value = e.nativeEvent.layout.width; }, children: [_jsx(Pill, { style: pillStyle }), tabs.map((tab, index) => {
+                const isActive = tab.value === value;
+                const nextIsActive = index + 1 < tabs.length && tabs[index + 1].value === value;
+                const showDivider = !isActive && index < tabs.length - 1 && !nextIsActive;
+                return (_jsx(Tab, { onPress: () => onChange(tab.value), children: _jsx(LabelBox, { "$showDivider": showDivider, children: _jsx(Label, { "$active": isActive, children: tab.label }) }) }, tab.value));
+            })] }));
+}
+const Track = styled(View) `
+  background-color: ${TRACK_BG};
+  border-radius: 8px;
+  flex-direction: row;
+  height: 40px;
+  width: 90%;
+  align-self: center;
+`;
+const Pill = styled(Animated.View) `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #ffffff;
+  border-radius: 8px;
+  border-width: 2px;
+  border-color: ${TRACK_BG};
+`;
+const Tab = styled(Pressable) `
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`;
+const LabelBox = styled(View) `
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-horizontal: 12px;
+  border-right-width: ${({ $showDivider }) => ($showDivider ? 1 : 0)}px;
+  border-right-color: #ffffff;
+`;
+const Label = styled.Text `
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.28px;
+  color: ${({ $active }) => ($active ? ACTIVE_TEXT : INACTIVE_TEXT)};
+  text-align: center;
+`;

package/dist/SegmentedTabs/index.d.ts

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

package/dist/SegmentedTabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SegmentedTabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/SegmentedTabs/index.js

@@ -0,0 +1 @@
+export { SegmentedTabs } from './SegmentedTabs';

package/dist/SegmentedTabs/types.d.ts

@@ -0,0 +1,10 @@
+export interface SegmentedTab<T extends string> {
+    value: T;
+    label: string;
+}
+export interface SegmentedTabsProps<T extends string> {
+    tabs: SegmentedTab<T>[];
+    value: T;
+    onChange: (value: T) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/SegmentedTabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM;IAC5C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IAClD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B"}

package/dist/SegmentedTabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import type { SelectProps } from './types';
+export declare function Select({ items, selectedValue, onValueChange, placeholder, required, helperText, errorText, disabled, sheetTitle, searchable, searchPlaceholder, showSave, containerStyle, inputWrapperStyle, testID, closeModalOnValueChange, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAS3C,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,QAAgB,EAChB,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,UAAU,EACV,UAAiB,EACjB,iBAAiB,EACjB,QAAe,EACf,cAAc,EACd,iBAAiB,EACjB,MAAM,EACN,uBAA+B,GAChC,EAAE,WAAW,2CAmHb"}

package/dist/Select/Select.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Keyboard, Modal, Platform } from 'react-native';
+import { Input } from '../Input/Input';
+import { Icon } from '../Icon';
+import { Picker } from '../Picker/Picker';
+import { KeyboardInsetFill, ModalContainer, Overlay, Pressable, SheetBackdrop, } from './styles';
+export function Select({ items, selectedValue, onValueChange, placeholder, required = false, helperText, errorText, disabled = false, sheetTitle, searchable = true, searchPlaceholder, showSave = true, containerStyle, inputWrapperStyle, testID, closeModalOnValueChange = false, }) {
+    const [visible, setVisible] = useState(false);
+    const [pendingValue, setPendingValue] = useState(selectedValue);
+    const [keyboardInset, setKeyboardInset] = useState(0);
+    const selectedLabel = useMemo(() => {
+        if (selectedValue == null)
+            return '';
+        const item = items.find((i) => i.value === selectedValue);
+        return item?.label ?? '';
+    }, [items, selectedValue]);
+    const open = useCallback(() => {
+        if (disabled)
+            return;
+        Keyboard.dismiss();
+        setPendingValue(selectedValue);
+        setVisible(true);
+    }, [disabled, selectedValue]);
+    const close = useCallback(() => {
+        setVisible(false);
+        setKeyboardInset(0);
+    }, []);
+    const handlePickerChange = useCallback((value) => {
+        setPendingValue(value);
+        onValueChange?.(value);
+        if (closeModalOnValueChange) {
+            setVisible(false);
+        }
+    }, []);
+    const handleSave = useCallback(() => setVisible(false), []);
+    const handleBack = useCallback(() => {
+        setVisible(false);
+        setKeyboardInset(0);
+    }, []);
+    useEffect(() => {
+        if (!visible)
+            return;
+        const handleShow = (event) => {
+            setKeyboardInset(Math.round(event.endCoordinates.height));
+        };
+        const handleHide = () => {
+            setKeyboardInset(0);
+        };
+        const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+        const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+        const showSubscription = Keyboard.addListener(showEvent, handleShow);
+        const hideSubscription = Keyboard.addListener(hideEvent, handleHide);
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, [visible]);
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: open, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled }, testID: testID, children: _jsx(Input, { placeholder: placeholder, required: required, value: selectedLabel, helperText: helperText, errorText: errorText, editable: false, rightIcon: _jsx(Icon, { name: "chevron-down" }), containerStyle: containerStyle, inputWrapperStyle: inputWrapperStyle, pointerEvents: "none" }) }), _jsx(Modal, { visible: visible, animationType: "slide", transparent: true, onRequestClose: close, children: _jsxs(SheetBackdrop, { children: [_jsx(Overlay, { onPress: close }), _jsx(ModalContainer, { children: _jsx(Picker, { items: items, selectedValue: pendingValue, onValueChange: handlePickerChange, title: sheetTitle ?? placeholder, onBack: handleBack, onSave: showSave ? handleSave : undefined, searchable: searchable, searchPlaceholder: searchPlaceholder, grabber: true, fitContent: true, keyboardInset: keyboardInset }) }), _jsx(KeyboardInsetFill, { style: { height: keyboardInset } })] }) })] }));
+}

package/dist/Select/index.d.ts

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

package/dist/Select/index.d.ts.map

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

package/dist/Select/index.js

@@ -0,0 +1 @@
+export { Select } from './Select';

package/dist/Select/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Pressable: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, never>>;
+export declare const SheetBackdrop: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const Overlay: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, never>>;
+export declare const ModalContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const KeyboardInsetFill: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const ValueText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/Select/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Select/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,SAAS,iPAErB,CAAC;AAEF,eAAO,MAAM,aAAa,+KAGzB,CAAC;AAEF,eAAO,MAAM,OAAO,iPAOnB,CAAC;AAEF,eAAO,MAAM,cAAc,+KAK1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,+KAG7B,CAAC;AAEF,eAAO,MAAM,SAAS,+KAOrB,CAAC"}

package/dist/Select/styles.js

@@ -0,0 +1,36 @@
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+import { INPUT_TOKENS } from '../Input/constants';
+export const Pressable = styled.Pressable `
+  width: 100%;
+`;
+export const SheetBackdrop = styled.View `
+  flex: 1;
+  justify-content: flex-end;
+`;
+export const Overlay = styled.Pressable `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+`;
+export const ModalContainer = styled.View `
+  background-color: ${INPUT_TOKENS.backgroundColor.default};
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  overflow: hidden;
+`;
+export const KeyboardInsetFill = styled.View `
+  width: 100%;
+  background-color: ${Platform.OS === 'ios' ? '#D1D2D8' : INPUT_TOKENS.backgroundColor.default};
+`;
+export const ValueText = styled.Text `
+  font-family: ${INPUT_TOKENS.input.fontFamily};
+  font-size: ${INPUT_TOKENS.input.fontSize}px;
+  font-weight: ${INPUT_TOKENS.input.fontWeight};
+  line-height: ${INPUT_TOKENS.input.lineHeight}px;
+  letter-spacing: ${INPUT_TOKENS.input.letterSpacing}px;
+  color: ${INPUT_TOKENS.input.color};
+`;

package/dist/Select/types.d.ts

@@ -0,0 +1,37 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { PickerItem } from '../Picker/types';
+export interface SelectProps {
+    /** List of selectable options */
+    items: PickerItem[];
+    /** Currently selected value */
+    selectedValue?: string;
+    /** Called with the new value when selection changes */
+    onValueChange?: (value: string) => void;
+    /** Floating placeholder text (e.g. "Currency") */
+    placeholder?: string;
+    /** Show red asterisk after placeholder */
+    required?: boolean;
+    /** Helper text shown below the field */
+    helperText?: string;
+    /** Error text — highlights border red */
+    errorText?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Title shown in the bottom sheet header */
+    sheetTitle?: string;
+    /** Show search field in the sheet. @default true */
+    searchable?: boolean;
+    /** Placeholder for the search field */
+    searchPlaceholder?: string;
+    /** Show Save button in the sheet. @default true */
+    showSave?: boolean;
+    /** Style for the outer container */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style for the input wrapper */
+    inputWrapperStyle?: StyleProp<ViewStyle>;
+    /** Forwarded to the root View */
+    testID?: string;
+    /** Close the modal when the value changes */
+    closeModalOnValueChange?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/Select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC"}

package/dist/Select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Tabs/FloatingTabBar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * FloatingTabBar
+ *
+ * Custom tab bar renderer with frosted-glass pill design.
+ * Used internally by the Tabs component via the `tabBar` prop.
+ */
+import type { FloatingTabBarProps } from './types';
+export declare function FloatingTabBar({ state, navigation, tabs, activeColor, inactiveColor, showLabels, containerStyle, }: FloatingTabBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FloatingTabBar.d.ts.map

package/dist/Tabs/FloatingTabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTabBar.d.ts","sourceRoot":"","sources":["../../src/Tabs/FloatingTabBar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAaH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA6BnD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,aAAa,EACb,UAAU,EACV,cAAc,GACf,EAAE,mBAAmB,2CAwGrB"}

package/dist/Tabs/FloatingTabBar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FloatingTabBar
+ *
+ * Custom tab bar renderer with frosted-glass pill design.
+ * Used internally by the Tabs component via the `tabBar` prop.
+ */
+import { useEffect } from 'react';
+import { Platform } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { useSharedValue, useAnimatedStyle, withTiming, Easing, } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { TAB_WIDTH, ICON_SIZE, BLUR_INTENSITY, } from './constants';
+import { Badge, BadgeText, BlurLayer, GlassEdge, GlassOverlay, IconContainer, Indicator, LabelText, OuterContainer, Pill, PillShadow, SpecularHighlight, TabButton, } from './styles';
+import { formatBadgeValue, getBottomPadding, getTabAccessibilityLabel, getTabTintColor, hasBadge, } from './utilities';
+export function FloatingTabBar({ state, navigation, tabs, activeColor, inactiveColor, showLabels, containerStyle, }) {
+    const insets = useSafeAreaInsets();
+    // Animated horizontal position of the selection indicator
+    const translateX = useSharedValue(state.index * TAB_WIDTH);
+    useEffect(() => {
+        translateX.value = withTiming(state.index * TAB_WIDTH, {
+            duration: 250,
+            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        });
+    }, [state.index, translateX]);
+    const indicatorStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: translateX.value }],
+    }));
+    // Bottom padding: use device safe-area or a minimum for devices without a home indicator
+    const bottomPadding = getBottomPadding(insets.bottom);
+    return (_jsx(OuterContainer, { style: containerStyle, "$bottomPadding": bottomPadding, pointerEvents: "box-none", children: _jsx(PillShadow, { children: _jsxs(Pill, { children: [_jsx(BlurLayer, { children: _jsx(BlurView, { intensity: BLUR_INTENSITY, tint: Platform.OS === 'ios' ? 'systemChromeMaterialLight' : 'light', style: { flex: 1 } }) }), _jsx(GlassOverlay, {}), _jsx(GlassEdge, {}), _jsx(SpecularHighlight, {}), _jsx(Indicator, { style: indicatorStyle }), state.routes.map((route, index) => {
+                        const isFocused = state.index === index;
+                        const tab = tabs[index];
+                        if (!tab)
+                            return null;
+                        const tintColor = getTabTintColor(isFocused, activeColor, inactiveColor);
+                        const onPress = () => {
+                            const event = navigation.emit({
+                                type: 'tabPress',
+                                target: route.key,
+                                canPreventDefault: true,
+                            });
+                            if (!isFocused && !event.defaultPrevented) {
+                                navigation.navigate(route.name, route.params);
+                            }
+                        };
+                        const onLongPress = () => {
+                            navigation.emit({
+                                type: 'tabLongPress',
+                                target: route.key,
+                            });
+                        };
+                        return (_jsxs(TabButton, { onPress: onPress, onLongPress: onLongPress, accessibilityRole: "tab", accessibilityState: { selected: isFocused }, accessibilityLabel: getTabAccessibilityLabel(tab), testID: tab.testID ?? `tab-${tab.name}`, children: [tab.icon && (_jsxs(IconContainer, { children: [tab.icon({ color: tintColor, size: ICON_SIZE, focused: isFocused }), hasBadge(tab.badge) && (_jsx(Badge, { children: _jsx(BadgeText, { children: formatBadgeValue(tab.badge) }) }))] })), showLabels && (_jsx(LabelText, { "$color": tintColor, "$focused": isFocused, numberOfLines: 1, children: tab.label }))] }, route.key));
+                    })] }) }) }));
+}

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Tabs Component
+ *
+ * Floating glass-effect bottom tab navigator matching the iOS-style Figma design
+ * (node 27-746 / Tab Bar – iPhone). Built on @react-navigation/bottom-tabs with
+ * a fully custom tab bar renderer.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, GroupTabIcon } from '@demlanide/react-lucky-components';
+ *
+ * const tabs: TabItem[] = [
+ *   { name: 'GroupsTab', label: 'Group', component: GroupsNav, icon: ({ color, size }) => <GroupTabIcon color={color} size={size} /> },
+ * ];
+ *
+ * <Tabs tabs={tabs} />
+ * ```
+ */
+import type { TabsProps } from './types';
+export declare function Tabs({ tabs, initialTab, tabBarStyle, activeTintColor, inactiveTintColor, showLabels, screenOptions, testID, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,eAAsC,EACtC,iBAA0C,EAC1C,UAAiB,EACjB,aAAa,EACb,MAAM,GACP,EAAE,SAAS,2CA8BX"}

package/dist/Tabs/Tabs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Tabs Component
+ *
+ * Floating glass-effect bottom tab navigator matching the iOS-style Figma design
+ * (node 27-746 / Tab Bar – iPhone). Built on @react-navigation/bottom-tabs with
+ * a fully custom tab bar renderer.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, GroupTabIcon } from '@demlanide/react-lucky-components';
+ *
+ * const tabs: TabItem[] = [
+ *   { name: 'GroupsTab', label: 'Group', component: GroupsNav, icon: ({ color, size }) => <GroupTabIcon color={color} size={size} /> },
+ * ];
+ *
+ * <Tabs tabs={tabs} />
+ * ```
+ */
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { DEFAULT_ACTIVE_COLOR, DEFAULT_INACTIVE_COLOR } from './constants';
+import { FloatingTabBar } from './FloatingTabBar';
+const Tab = createBottomTabNavigator();
+export function Tabs({ tabs, initialTab, tabBarStyle, activeTintColor = DEFAULT_ACTIVE_COLOR, inactiveTintColor = DEFAULT_INACTIVE_COLOR, showLabels = true, screenOptions, testID, }) {
+    return (_jsx(Tab.Navigator, { id: testID, initialRouteName: initialTab, tabBar: (props) => (_jsx(FloatingTabBar, { ...props, tabs: tabs, activeColor: activeTintColor, inactiveColor: inactiveTintColor, showLabels: showLabels, containerStyle: tabBarStyle })), screenOptions: {
+            headerShown: false,
+            ...screenOptions,
+        }, children: tabs.map((tab) => (_jsx(Tab.Screen, { name: tab.name, component: tab.component, options: tab.options }, tab.name))) }));
+}

package/dist/Tabs/constants.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Tabs design tokens (from Figma node 27-746)
+ */
+/** Width of each individual tab button (px), tuned to match reference proportions */
+export declare const TAB_WIDTH = 86;
+/** Border-radius of the pill container – Figma: rounded-[296px] (fully rounded) */
+export declare const PILL_RADIUS = 100;
+/** Active tab tint – Figma: --accents/blue #08f → mapped to app primary */
+export declare const DEFAULT_ACTIVE_COLOR: "#007AFF";
+/** Inactive tab tint – Figma: --labels---vibrant---controls/primary #404040 */
+export declare const DEFAULT_INACTIVE_COLOR = "#404040";
+/** Selected tab background – Figma: --fills---vibrant/tertiary #ededed */
+export declare const SELECTED_TAB_BACKGROUND = "#EDEDED";
+/** Label font size – Figma: 10px */
+export declare const LABEL_SIZE = 10;
+/** Default icon size passed to the icon render function */
+export declare const ICON_SIZE = 24;
+/** Inner inset around the tab row inside the main glass capsule */
+export declare const PILL_INSET = 4;
+/** Blur intensity for liquid glass – higher so content silhouettes show through (0-100) */
+export declare const BLUR_INTENSITY = 56;
+/** Total height of the pill including the capsule inset */
+export declare const PILL_HEIGHT: number;
+/** Vertical padding above the pill in the tab bar container – Figma: pt-[16px] */
+export declare const TAB_BAR_TOP_PADDING = 16;
+/** Minimum bottom padding below the pill (when safe area is small) */
+export declare const TAB_BAR_BOTTOM_MIN = 12;
+/**
+ * Bottom inset for scroll content so the last item can scroll above the floating pill.
+ * Use in ScrollView contentContainerStyle.paddingBottom when the screen is a tab root.
+ */
+export declare function getFloatingTabBarScrollPadding(insets: {
+    bottom: number;
+}): number;
+//# sourceMappingURL=constants.d.ts.map

package/dist/Tabs/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/Tabs/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,qFAAqF;AACrF,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,mFAAmF;AACnF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,WAAiB,CAAC;AAEnD,+EAA+E;AAC/E,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAEhD,0EAA0E;AAC1E,eAAO,MAAM,uBAAuB,YAAY,CAAC;AAEjD,oCAAoC;AACpC,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B,2DAA2D;AAC3D,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,mEAAmE;AACnE,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,2FAA2F;AAC3F,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,2DAA2D;AAC3D,eAAO,MAAM,WAAW,QAAgD,CAAC;AAEzE,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,sEAAsE;AACtE,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,MAAM,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAGjF"}

package/dist/Tabs/constants.js

@@ -0,0 +1,36 @@
+/**
+ * Tabs design tokens (from Figma node 27-746)
+ */
+import { colors } from '../theme';
+/** Width of each individual tab button (px), tuned to match reference proportions */
+export const TAB_WIDTH = 86;
+/** Border-radius of the pill container – Figma: rounded-[296px] (fully rounded) */
+export const PILL_RADIUS = 100;
+/** Active tab tint – Figma: --accents/blue #08f → mapped to app primary */
+export const DEFAULT_ACTIVE_COLOR = colors.primary; // #007AFF
+/** Inactive tab tint – Figma: --labels---vibrant---controls/primary #404040 */
+export const DEFAULT_INACTIVE_COLOR = '#404040';
+/** Selected tab background – Figma: --fills---vibrant/tertiary #ededed */
+export const SELECTED_TAB_BACKGROUND = '#EDEDED';
+/** Label font size – Figma: 10px */
+export const LABEL_SIZE = 10;
+/** Default icon size passed to the icon render function */
+export const ICON_SIZE = 24;
+/** Inner inset around the tab row inside the main glass capsule */
+export const PILL_INSET = 4;
+/** Blur intensity for liquid glass – higher so content silhouettes show through (0-100) */
+export const BLUR_INTENSITY = 56;
+/** Total height of the pill including the capsule inset */
+export const PILL_HEIGHT = PILL_INSET + 6 + 28 + 1 + 12 + 7 + PILL_INSET; // 62
+/** Vertical padding above the pill in the tab bar container – Figma: pt-[16px] */
+export const TAB_BAR_TOP_PADDING = 16;
+/** Minimum bottom padding below the pill (when safe area is small) */
+export const TAB_BAR_BOTTOM_MIN = 12;
+/**
+ * Bottom inset for scroll content so the last item can scroll above the floating pill.
+ * Use in ScrollView contentContainerStyle.paddingBottom when the screen is a tab root.
+ */
+export function getFloatingTabBarScrollPadding(insets) {
+    const bottomPadding = Math.max(insets.bottom, TAB_BAR_BOTTOM_MIN);
+    return TAB_BAR_TOP_PADDING + PILL_HEIGHT + bottomPadding + 8; // +8 so content isn't flush to pill
+}

package/dist/Tabs/icons.d.ts

@@ -0,0 +1,16 @@
+/** Diamond / rhombus with soft rounded corners – "Group" tab (radius ~4) */
+export declare const GroupTabIcon: ({ color, size }: {
+    color: string;
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Filled circle – "Activity" tab (already round) */
+export declare const ActivityTabIcon: ({ color, size }: {
+    color: string;
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Triangle with soft rounded corners – "Account" tab (radius ~3.5) */
+export declare const AccountTabIcon: ({ color, size }: {
+    color: string;
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/Tabs/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/Tabs/icons.tsx"],"names":[],"mappings":"AAEA,4EAA4E;AAC5E,eAAO,MAAM,YAAY;WAA8B,MAAM;UAAQ,MAAM;6CAE1E,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,eAAe;WAA8B,MAAM;UAAQ,MAAM;6CAE7E,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,cAAc;WAA8B,MAAM;UAAQ,MAAM;6CAE5E,CAAC"}

package/dist/Tabs/icons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../Icon';
+/** Diamond / rhombus with soft rounded corners – "Group" tab (radius ~4) */
+export const GroupTabIcon = ({ color, size }) => (_jsx(Icon, { name: "tab-group", color: color, size: size }));
+/** Filled circle – "Activity" tab (already round) */
+export const ActivityTabIcon = ({ color, size }) => (_jsx(Icon, { name: "tab-activity", color: color, size: size }));
+/** Triangle with soft rounded corners – "Account" tab (radius ~3.5) */
+export const AccountTabIcon = ({ color, size }) => (_jsx(Icon, { name: "tab-account", color: color, size: size }));

package/dist/Tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { Tabs } from './Tabs';
+export { FloatingTabBar } from './FloatingTabBar';
+export { useFloatingTabBarScrollPadding } from './useFloatingTabBarScrollPadding';
+export { GroupTabIcon, ActivityTabIcon, AccountTabIcon } from './icons';
+export type { TabsProps, TabItem, TabIcon } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/Tabs/index.js

@@ -0,0 +1,4 @@
+export { Tabs } from './Tabs';
+export { FloatingTabBar } from './FloatingTabBar';
+export { useFloatingTabBarScrollPadding } from './useFloatingTabBarScrollPadding';
+export { GroupTabIcon, ActivityTabIcon, AccountTabIcon } from './icons';