@a-little-world/little-world-design-system-native 0.10.0 → 0.11.0

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CheckboxGroupOrientation } from './styles';
+type CheckboxGroupProps = {
+    heading?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onSelection: (selected: string[]) => void;
+    preSelected?: string[];
+    error?: string;
+    name: string;
+    readOnly?: boolean;
+    orientation?: CheckboxGroupOrientation;
+};
+declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+/**
+ * @deprecated Use CheckboxGroup instead. MultiCheckbox is kept for backward
+ * compatibility only; will be removed in a future major version.
+ */
+declare const MultiCheckbox: React.FC<CheckboxGroupProps>;
+export default CheckboxGroup;
+export { MultiCheckbox };
+export type { CheckboxGroupProps };
+export type { CheckboxGroupProps as MultiCheckboxProps };

package/dist/components/CheckboxGroup/styles.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
+export declare const CheckboxGroupWrapper: ({ children, orientation, }: {
+    children: React.ReactNode;
+    orientation?: CheckboxGroupOrientation | undefined;
+}) => React.JSX.Element;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,3 +1,4 @@
+import { RadioGroupOrientation } from './styles';
 import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
 import React from 'react';
 type Props = {
@@ -10,6 +11,13 @@ type Props = {
         value: string;
     }>;
     inputRef: React.RefObject<HTMLInputElement>;
+    /**
+     * Layout orientation for the radio group.
+     * @default 'horizontal'
+     * - 'horizontal': Radio buttons arranged in rows
+     * - 'vertical': Radio buttons stacked vertically
+     */
+    orientation?: RadioGroupOrientation;
 } & RadioGroupPrimitive.RootProps;
 declare const RadioGroup: React.FC<Props>;
 export default RadioGroup;

package/dist/components/RadioGroup/styles.d.ts

@@ -1,10 +1,12 @@
 import { DefaultTheme } from 'styled-components/native';
-export declare const getRadioGroupStyles: ({ theme }: {
+export type RadioGroupOrientation = 'vertical' | 'horizontal';
+export declare const getRadioGroupStyles: ({ theme, orientation, }: {
     theme: DefaultTheme;
+    orientation?: RadioGroupOrientation | undefined;
 }) => {
     root: {
         display: "flex";
-        flexDirection: "column";
+        flexDirection: "row" | "column";
         gap: number;
         alignItems: "flex-start";
     };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,9 @@
+import { SelectBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type SelectProps = SelectBaseProps & {
+    style?: StyleProp<ViewStyle>;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+};
+declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/components/{Dropdown → Select}/styles.d.ts

@@ -1,7 +1,7 @@
 import { InputHeight } from '@a-little-world/little-world-design-system-core';
 import { DefaultTheme } from 'styled-components/native';
-export declare const DROPDOWN_MAX_WIDTH = 300;
-export declare const getDropdownStyles: ({ theme, maxWidth, height, hasError, }: {
+export declare const SELECT_MAX_WIDTH = 300;
+export declare const getSelectStyles: ({ theme, maxWidth, height, hasError, }: {
     theme: DefaultTheme;
     maxWidth: number;
     height: InputHeight;

package/dist/components/StatusMessage/StatusMessage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StatusBaseProps } from '@a-little-world/little-world-design-system-core';
+declare const StatusMessage: React.FC<StatusBaseProps>;
+export default StatusMessage;
+/**
+ * Semantic aliases for `StatusMessage`. Same component, clearer intent at the
+ * call site:
+ * - `Alert` — standalone / banner-style status notifications.
+ * - `FormMessage` — inline form validation feedback.
+ */
+export { StatusMessage as Alert, StatusMessage as FormMessage };
+export type { StatusBaseProps as AlertProps, StatusBaseProps as FormMessageProps, };

package/dist/components/StatusMessage/styles.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StatusTypes } from '@a-little-world/little-world-design-system-core';
+export declare const StatusMessageWrapper: ({ children, type, visible, withBorder, }: {
+    children: React.ReactNode;
+    type: StatusTypes;
+    visible?: boolean | undefined;
+    withBorder?: boolean | undefined;
+}) => React.JSX.Element;
+export declare const StatusMessageText: ({ children, type, withBorder, }: {
+    children: React.ReactNode;
+    type: StatusTypes;
+    withBorder?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TimePickerBaseProps } from '@a-little-world/little-world-design-system-core';
+interface TimePickerProps extends TimePickerBaseProps {
+    label?: string;
+    id?: string;
+}
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

package/dist/components/TimePicker/styles.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+export declare const COLUMN_HEIGHT = 200;
+export declare const TimePickerTrigger: ({ children, disabled, hasError, onPress, }: {
+    children: React.ReactNode;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+    onPress: () => void;
+}) => React.JSX.Element;
+export declare const TriggerText: ({ children, hasValue, }: {
+    children: React.ReactNode;
+    hasValue: boolean;
+}) => React.JSX.Element;
+export declare const OverlayView: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const SheetView: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const SheetHeader: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const SheetTitle: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const DoneButtonText: ({ children, onPress, }: {
+    children: React.ReactNode;
+    onPress: () => void;
+}) => React.JSX.Element;
+export declare const ColumnsContainer: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TimeColumn: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & React.RefAttributes<ScrollView>>;
+export declare const ColumnDivider: () => React.JSX.Element;
+export declare const TimeOption: ({ children, isSelected, onPress, }: {
+    children: React.ReactNode;
+    isSelected: boolean;
+    onPress: () => void;
+}) => React.JSX.Element;
+export declare const AMPMContainer: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const AMPMButton: ({ children, isSelected, onPress, }: {
+    children: React.ReactNode;
+    isSelected: boolean;
+    onPress: () => void;
+}) => React.JSX.Element;

package/dist/index.d.ts

@@ -2,7 +2,10 @@ export { default as Accordion } from './components/Accordion/Accordion';
 export { default as Button } from './components/Button/Button';
 export { default as Card, CardHeader, CardContent, CardFooter, } from './components/Card/Card';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
-export { default as Dropdown } from './components/Dropdown/Dropdown';
+export { default as CheckboxGroup, MultiCheckbox, } from './components/CheckboxGroup/CheckboxGroup';
+export type { CheckboxGroupProps, MultiCheckboxProps, } from './components/CheckboxGroup/CheckboxGroup';
+export { default as Select } from './components/Select/Select';
+export type { SelectProps } from './components/Select/Select';
 export { default as Gradient } from './components/Gradient/Gradient';
 export * from './components/Icon';
 export * from './components/Illustrations';
@@ -16,10 +19,13 @@ export { default as Popover } from './components/Popover/Popover';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
 export { default as RadioGroup } from './components/RadioGroup/RadioGroup';
 export { default as Separator } from './components/Separator/Separator';
+export { default as StatusMessage, Alert, FormMessage, } from './components/StatusMessage/StatusMessage';
+export type { AlertProps, FormMessageProps, } from './components/StatusMessage/StatusMessage';
 export { default as Tags, Tag } from './components/Tags/Tags';
 export type { TagProps, TagsProps } from './components/Tags/Tags';
 export { default as Text } from './components/Text/Text';
 export { default as TextInput } from './components/TextInput/TextInput';
+export { default as TimePicker } from './components/TimePicker/TimePicker';
 export { default as ToolTip } from './components/ToolTip/ToolTip';
 export * from './theme';
 export * from './types';