@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.38

package/dist/typescript/src/lib/Components/Select/SelectContext.d.ts

@@ -1,36 +0,0 @@
-import type { ReactNode } from 'react';
-import type { SelectContentItem } from './types';
-export type SelectContextValue = {
-    selectId: string;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    value: string | undefined;
-    onValueChange: (value: string) => void;
-    disabled: boolean;
-    items: SelectContentItem[];
-    setItems: (items: SelectContentItem[]) => void;
-    label?: string;
-};
-export declare const useSelectSafeContext: <ContextRequired extends boolean = boolean>({ consumerName, contextRequired, }: {
-    consumerName: string;
-    contextRequired: ContextRequired;
-}) => ContextRequired extends true ? SelectContextValue : Partial<SelectContextValue>;
-type SelectContextProviderProps = {
-    selectId: string;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    value: string | undefined;
-    onValueChange: (value: string) => void;
-    disabled: boolean;
-    items: SelectContentItem[];
-    setItems: (items: SelectContentItem[]) => void;
-    label?: string;
-    children: ReactNode;
-};
-/**
- * Internal context provider for an individual Select component.
- * This is used automatically by the Select component.
- */
-export declare const SelectContextProvider: ({ selectId, open, setOpen, value, onValueChange, disabled, items, setItems, label, children, }: SelectContextProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=SelectContext.d.ts.map

package/dist/typescript/src/lib/Components/Select/SelectContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectContext.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Select/SelectContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAKF,eAAO,MAAM,oBAAoB;;;qFAAwB,CAAC;AAE1D,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,gGAWnC,0BAA0B,4CAkB5B,CAAC"}

package/dist/typescript/src/lib/Components/Select/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Select';
-export * from './GlobalSelectBottomSheet';
-export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/lib/Components/Select/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC"}

package/dist/typescript/src/lib/Components/Select/types.d.ts

@@ -1,130 +0,0 @@
-import type { ReactNode } from 'react';
-import type { PressableProps } from 'react-native';
-import type { StyledViewProps, StyledPressableProps, StyledTextProps } from '../../../styles';
-import type { BoxProps } from '../Utility';
-export type SelectProps = {
-    /**
-     * The children of the select (SelectTrigger, SelectContent)
-     */
-    children: ReactNode;
-    /**
-     * The controlled open state of the select.
-     * Must be used in conjunction with onOpenChange.
-     */
-    open?: boolean;
-    /**
-     * The value of the select when initially rendered.
-     * Use when you do not need to control the state of the select.
-     */
-    defaultValue?: string;
-    /**
-     * Event handler called when the open state of the select changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * The open state of the select when it is initially rendered.
-     * Use when you do not need to control its open state.
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * When true, prevents the user from interacting with select.
-     */
-    disabled?: boolean;
-    /**
-     * The controlled value of the select.
-     * Should be used in conjunction with onValueChange.
-     */
-    value?: string;
-    /**
-     * Event handler called when the value changes.
-     */
-    onValueChange?: (value: string) => void;
-};
-export type SelectTriggerProps = {
-    /**
-     * The children to render inside the trigger
-     */
-    children?: ReactNode;
-    /**
-     * The label text that floats above the input when focused or filled
-     * @example label='Select an option'
-     */
-    label?: string;
-    /**
-     * Change the default rendered element for the one passed as a child,
-     * merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & Omit<StyledPressableProps, 'children'>;
-export type SelectContentProps = {
-    /**
-     * The children of the select content (SelectItem, SelectGroup, etc.)
-     */
-    children: ReactNode;
-};
-export type SelectGroupProps = {
-    /**
-     * The children of the select group (SelectLabel, SelectItem)
-     */
-    children: ReactNode;
-} & StyledViewProps;
-export type SelectLabelProps = {
-    /**
-     * The children of the select label
-     * @required
-     */
-    children: ReactNode;
-} & StyledTextProps;
-export type SelectItemProps = {
-    /**
-     * The value of the select item
-     * @required
-     */
-    value: string;
-    /**
-     * The children of the select item
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * Optional text used for display. Use this when the content is complex.
-     */
-    textValue?: string;
-    /**
-     * The disabled state of the select item
-     */
-    disabled?: boolean;
-} & Omit<PressableProps, 'children' | 'onPress' | 'disabled'>;
-export type SelectItemTextProps = {
-    /**
-     * The children of the select item text
-     * @required
-     */
-    children: ReactNode;
-} & StyledTextProps;
-export type SelectSeparatorProps = {} & BoxProps;
-export type SelectItemData = {
-    type: 'item';
-    value: string;
-    label: string;
-    disabled?: boolean;
-};
-export type SelectGroupData = {
-    type: 'group-label';
-    label: string;
-};
-export type SelectSeparatorData = {
-    type: 'separator';
-};
-export type SelectContentItem = SelectItemData | SelectGroupData | SelectSeparatorData;
-export type SelectData = {
-    id: string;
-    items: SelectContentItem[];
-    selectedValue: string | undefined;
-    onSelectValue: (value: string) => void;
-    setOpen?: (open: boolean) => void;
-    label?: string;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/lib/Components/Select/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Select/types.ts"],"names":[],"mappings":"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"}

package/src/lib/Components/Select/GlobalSelectBottomSheet.tsx

@@ -1,180 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { Pressable } from 'react-native';
-import { useStyleSheet } from '../../../styles';
-import { Check } from '../../Symbols';
-import {
-  BottomSheet,
-  BottomSheetHeader,
-  BottomSheetView,
-  useBottomSheetRef,
-} from '../BottomSheet';
-import { Divider } from '../Divider';
-import { Box, Text } from '../Utility';
-import { useGlobalSelectSafeContext } from './GlobalSelectContext';
-
-const useStyles = () => {
-  return useStyleSheet(
-    (t) => ({
-      bottomSheetView: {
-        paddingHorizontal: t.spacings.s8,
-      },
-      groupLabel: {
-        marginBottom: t.spacings.s4,
-        paddingHorizontal: t.spacings.s8,
-        paddingTop: t.spacings.s8,
-        color: t.colors.text.muted,
-        ...t.typographies.body3SemiBold,
-      },
-      item: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: t.borderRadius.sm,
-        padding: t.spacings.s8,
-        backgroundColor: t.colors.bg.baseTransparent,
-      },
-      itemPressed: {
-        backgroundColor: t.colors.bg.baseTransparentPressed,
-      },
-      itemDisabled: {
-        opacity: 0.5,
-      },
-      itemLabel: {
-        flex: 1,
-        color: t.colors.text.base,
-        ...t.typographies.body2,
-      },
-      itemLabelDisabled: {
-        color: t.colors.text.disabled,
-      },
-    }),
-    [],
-  );
-};
-
-/**
- * BottomSheet component that displays select options.
- * This should be placed at the root level inside GestureHandlerRootView.
- *
- * @see {@link https://ldls.vercel.app/?path=/docs/components-select-overview--docs Storybook}
- *
- * @example
- * import { GlobalSelectProvider, GlobalSelectBottomSheet } from '@ledgerhq/lumen-ui-rnative';
- *
- * function App() {
- *   return (
- *     <GestureHandlerRootView>
- *       <YourAppContent />
- *       <GlobalSelectBottomSheet />
- *     </GestureHandlerRootView>
- *   );
- * }
- */
-export const GlobalSelectBottomSheet: React.FC = () => {
-  const bottomSheetRef = useBottomSheetRef();
-  const styles = useStyles();
-  /**
-   * This is the only component that subscribes to currentSelect
-   * All other components use refs to avoid re-renders
-   */
-  const { currentSelect, hideSelectRef } = useGlobalSelectSafeContext({
-    consumerName: 'useGlobalSelectBottomSheetContext',
-    contextRequired: true,
-  });
-
-  useEffect(() => {
-    if (currentSelect) {
-      bottomSheetRef.current?.present();
-    } else {
-      bottomSheetRef.current?.dismiss();
-    }
-  }, [currentSelect, bottomSheetRef]);
-
-  const handleClose = useCallback(() => {
-    currentSelect?.setOpen?.(false);
-    hideSelectRef.current();
-  }, [hideSelectRef, currentSelect]);
-
-  const handleSelectItem = useCallback(
-    (value: string) => {
-      if (currentSelect) {
-        currentSelect.onSelectValue(value);
-        currentSelect.setOpen?.(false);
-        hideSelectRef.current();
-      }
-    },
-    [currentSelect, hideSelectRef],
-  );
-
-  return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      snapPoints={null}
-      backdropPressBehavior='close'
-      onClose={handleClose}
-      maxDynamicContentSize='fullWithOffset'
-      enableDynamicSizing
-      enablePanDownToClose
-    >
-      <BottomSheetView style={styles.bottomSheetView}>
-        {currentSelect && (
-          <>
-            {currentSelect.label && (
-              <BottomSheetHeader
-                title={currentSelect.label}
-                density='compact'
-              />
-            )}
-            <Box lx={{ gap: 's4' }}>
-              {currentSelect.items.map((item, index) => {
-                if (item.type === 'separator') {
-                  return (
-                    <Divider
-                      key={`separator-${index}`}
-                      lx={{ marginVertical: 's4', marginHorizontal: 's8' }}
-                    />
-                  );
-                }
-                if (item.type === 'group-label') {
-                  return (
-                    <Text key={`label-${index}`} style={styles.groupLabel}>
-                      {item.label}
-                    </Text>
-                  );
-                }
-                const isSelected = currentSelect.selectedValue === item.value;
-                return (
-                  <Pressable
-                    key={item.value}
-                    disabled={item.disabled}
-                    onPress={() => handleSelectItem(item.value)}
-                  >
-                    {({ pressed }) => (
-                      <Box
-                        style={[
-                          styles.item,
-                          pressed && styles.itemPressed,
-                          item.disabled && styles.itemDisabled,
-                        ]}
-                      >
-                        <Text
-                          style={[
-                            styles.itemLabel,
-                            item.disabled && styles.itemLabelDisabled,
-                          ]}
-                          numberOfLines={1}
-                        >
-                          {item.label}
-                        </Text>
-                        {isSelected && <Check size={24} color='active' />}
-                      </Box>
-                    )}
-                  </Pressable>
-                );
-              })}
-            </Box>
-          </>
-        )}
-      </BottomSheetView>
-    </BottomSheet>
-  );
-};

package/src/lib/Components/Select/GlobalSelectContext.tsx

@@ -1,103 +0,0 @@
-import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import type { ReactNode } from 'react';
-import { useState, useRef, useMemo } from 'react';
-import type { SelectData } from './types';
-
-type GlobalSelectBottomSheetContextValue = {
-  currentSelect: SelectData | null;
-  showSelectRef: React.MutableRefObject<(data: SelectData) => void>;
-  hideSelectRef: React.MutableRefObject<() => void>;
-};
-
-const [GlobalSelectContextProvider, _useGlobalSelectSafeContext] =
-  createSafeContext<GlobalSelectBottomSheetContextValue>('GlobalSelectContext');
-
-export const useGlobalSelectSafeContext = _useGlobalSelectSafeContext;
-
-/**
- * Hook that provides select actions without subscribing to state changes.
- * This prevents unnecessary re-renders when selects open/close.
- *
- * Use this hook in components that only need to show/hide selects
- * but don't need to know which select is currently active.
- */
-export const useSelectActions = (): {
-  showSelect: (data: SelectData) => void;
-  hideSelect: () => void;
-} => {
-  const context = useGlobalSelectSafeContext({
-    consumerName: 'useSelectActions',
-    contextRequired: true,
-  });
-
-  return useMemo(
-    () => ({
-      showSelect: context.showSelectRef.current,
-      hideSelect: context.hideSelectRef.current,
-    }),
-    [context.showSelectRef, context.hideSelectRef],
-  );
-};
-
-type GlobalSelectProviderProps = {
-  children: ReactNode;
-};
-
-/**
- * Global provider for the select bottom sheet system.
- * This should wrap your app at the root level and include GlobalSelectBottomSheet.
- *
- * @example
- * import { GlobalSelectProvider, GlobalSelectBottomSheet } from '@ledgerhq/lumen-ui-rnative';
- *
- * function App() {
- *   return (
- *     <GlobalSelectProvider>
- *       <YourAppContent />
- *       <GlobalSelectBottomSheet />
- *     </GlobalSelectProvider>
- *   );
- * }
- */
-export const GlobalSelectProvider = ({
-  children,
-}: GlobalSelectProviderProps) => {
-  const [currentSelect, setCurrentSelect] = useState<SelectData | null>(null);
-  const showSelectRef = useRef<(data: SelectData) => void>(() => {
-    return;
-  });
-  const hideSelectRef = useRef<() => void>(() => {
-    return;
-  });
-
-  /**
-   * Update the ref implementations when needed
-   * These closures capture the current setCurrentSelect
-   */
-  showSelectRef.current = (data: SelectData) => {
-    setCurrentSelect(data);
-  };
-
-  hideSelectRef.current = () => {
-    setCurrentSelect(null);
-  };
-
-  /**
-   * Memoize the context value - only currentSelect changes cause re-renders
-   * The refs themselves never change
-   */
-  const contextValue = useMemo(
-    () => ({
-      currentSelect,
-      showSelectRef,
-      hideSelectRef,
-    }),
-    [currentSelect],
-  );
-
-  return (
-    <GlobalSelectContextProvider value={contextValue}>
-      {children}
-    </GlobalSelectContextProvider>
-  );
-};