@a-little-world/little-world-design-system-native 0.5.1

package/LICENSE.md

@@ -0,0 +1,175 @@
+Copyright (C) 2025 A Little World gUG
+
+This components is part of the Little World Matching Platform, find additional components and information in our core repository: https://github.com/a-little-world/little-world-core
+
+This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License version 3 as published by the Free Software Foundation.
+
+This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License along with this library. If not, see <https://www.gnu.org/licenses/>.
+
+---
+
+GNU Lesser General Public License
+=================================
+
+_Version 3, 29 June 2007_  
+_Copyright © 2007 Free Software Foundation, Inc. &lt;<http://fsf.org/>&gt;_
+
+Everyone is permitted to copy and distribute verbatim copies
+of this license document, but changing it is not allowed.
+
+
+This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+### 0. Additional Definitions
+
+As used herein, “this License” refers to version 3 of the GNU Lesser
+General Public License, and the “GNU GPL” refers to version 3 of the GNU
+General Public License.
+
+“The Library” refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+An “Application” is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+A “Combined Work” is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the “Linked
+Version”.
+
+The “Minimal Corresponding Source” for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+The “Corresponding Application Code” for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+### 1. Exception to Section 3 of the GNU GPL
+
+You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+### 2. Conveying Modified Versions
+
+If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+* **a)** under this License, provided that you make a good faith effort to
+ensure that, in the event an Application does not supply the
+function or data, the facility still operates, and performs
+whatever part of its purpose remains meaningful, or
+
+* **b)** under the GNU GPL, with none of the additional permissions of
+this License applicable to that copy.
+
+### 3. Object Code Incorporating Material from Library Header Files
+
+The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+* **a)** Give prominent notice with each copy of the object code that the
+Library is used in it and that the Library and its use are
+covered by this License.
+* **b)** Accompany the object code with a copy of the GNU GPL and this license
+document.
+
+### 4. Combined Works
+
+You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+* **a)** Give prominent notice with each copy of the Combined Work that
+the Library is used in it and that the Library and its use are
+covered by this License.
+
+* **b)** Accompany the Combined Work with a copy of the GNU GPL and this license
+document.
+
+* **c)** For a Combined Work that displays copyright notices during
+execution, include the copyright notice for the Library among
+these notices, as well as a reference directing the user to the
+copies of the GNU GPL and this license document.
+
+* **d)** Do one of the following:
+    - **0)** Convey the Minimal Corresponding Source under the terms of this
+License, and the Corresponding Application Code in a form
+suitable for, and under terms that permit, the user to
+recombine or relink the Application with a modified version of
+the Linked Version to produce a modified Combined Work, in the
+manner specified by section 6 of the GNU GPL for conveying
+Corresponding Source.
+    - **1)** Use a suitable shared library mechanism for linking with the
+Library.  A suitable mechanism is one that **(a)** uses at run time
+a copy of the Library already present on the user's computer
+system, and **(b)** will operate properly with a modified version
+of the Library that is interface-compatible with the Linked
+Version.
+
+* **e)** Provide Installation Information, but only if you would otherwise
+be required to provide such information under section 6 of the
+GNU GPL, and only to the extent that such information is
+necessary to install and execute a modified version of the
+Combined Work produced by recombining or relinking the
+Application with a modified version of the Linked Version. (If
+you use option **4d0**, the Installation Information must accompany
+the Minimal Corresponding Source and Corresponding Application
+Code. If you use option **4d1**, you must provide the Installation
+Information in the manner specified by section 6 of the GNU GPL
+for conveying Corresponding Source.)
+
+### 5. Combined Libraries
+
+You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+* **a)** Accompany the combined library with a copy of the same work based
+on the Library, uncombined with any other library facilities,
+conveyed under the terms of this License.
+* **b)** Give prominent notice with the combined library that part of it
+is a work based on the Library, and explaining where to find the
+accompanying uncombined form of the same work.
+
+### 6. Revised Versions of the GNU Lesser General Public License
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License “or any later version”
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,160 @@
+# @a-little-world/little-world-design-system-native
+
+React Native components for the Little World Design System.
+
+## Installation
+
+```bash
+npm install @a-little-world/little-world-design-system-native
+```
+
+## Usage
+
+```tsx
+import { Button, Text } from '@a-little-world/little-world-design-system-native';
+
+export default function App() {
+  return (
+    <Button variant="primary">
+      <Text>Hello World</Text>
+    </Button>
+  );
+}
+```
+
+## Local Development & Testing
+
+The native package includes a test app for local development and testing of components.
+
+### ⚠️ Important: Build from Root
+
+**Always build and publish from the root of the monorepo, never from individual package directories.**
+
+✅ **Correct (from root):**
+```bash
+pnpm build:native
+pnpm --filter=@a-little-world/little-world-design-system-native publish
+```
+
+❌ **Incorrect (from package directory):**
+```bash
+cd packages/native
+npm run build
+npm publish  # This will break workspace dependencies!
+```
+
+### Prerequisites
+
+- [Expo CLI](https://docs.expo.dev/get-started/installation/) installed globally
+- [Expo Go](https://expo.dev/client) app installed on your mobile device
+- iOS Simulator (for iOS testing) or Android Emulator (for Android testing)
+
+### Quick Start
+
+From the root of the monorepo:
+
+```bash
+# Build and setup test app (builds core + native, creates tarballs, installs in testApp)
+pnpm native:setup
+
+# Start Expo development server
+pnpm native:start
+
+# Or run Storybook for native components
+pnpm storybook:native
+```
+
+### What the setup script does:
+
+1. **Builds core package** - Compiles design tokens and utilities
+2. **Builds native package** - Compiles React Native components  
+3. **Creates tarballs** - Packages both libraries for local installation
+4. **Installs in testApp** - Installs the local packages in the Expo test app
+
+### Development Workflow
+
+1. **Make changes** to core or native packages
+2. **Run setup** - `pnpm native:setup` (rebuilds and reinstalls)
+3. **Start app** - `pnpm native:start` (starts Expo dev server)
+4. **Test on device** - Scan QR code with Expo Go app
+5. **Hot reload** - Changes will automatically reload in the app
+
+### Manual Setup (Alternative)
+
+If you prefer to work directly in the testApp directory:
+
+```bash
+cd packages/native/testApp
+npm install
+npm start  # Start Expo app
+npm run storybook  # Start Storybook
+```
+
+### Troubleshooting
+
+- **Clear cache**: Use `npx expo start -c` to clear Expo cache
+- **Reset testApp**: Delete `packages/native/testApp/node_modules` and run setup again
+- **Version conflicts**: The setup script uses wildcards to automatically find the latest tarball versions
+
+## Storybook
+
+The native package includes Storybook for component development and testing:
+
+```bash
+# From root
+pnpm storybook:native
+
+# Or from testApp directory
+cd packages/native/testApp
+npm run storybook
+```
+
+## Building
+
+```bash
+# Build the native package
+pnpm build:native
+
+# Or from the native package directory
+cd packages/native
+npm run build
+```
+
+## Publishing
+
+### Automated Releases (Recommended)
+
+**Releases should ideally be automated and handled via merging into the main branch of the repo.** 
+
+See the [Versioning and Releases section in the root README](../../README.md#versioning-and-releases) for detailed information about the automated release process using Changesets.
+
+The automated workflow will:
+- Detect version changes in package.json
+- Publish to GitHub Packages registry
+- Create GitHub releases with changelog information
+- Handle all publishing steps automatically
+
+### Manual Publishing (Fallback)
+
+If you need to publish manually (not recommended):
+
+```bash
+# Ensure you're authenticated to GitHub Packages
+npm login --registry=https://npm.pkg.github.com
+
+# Build the package
+pnpm build:native
+
+# Publish from the native package directory
+cd packages/native
+npm publish --access restricted
+```
+
+**Note**: Manual publishing bypasses the automated changelog generation and release management. Use the automated process whenever possible.
+
+## Dependencies
+
+This package depends on:
+- `@a-little-world/little-world-design-system-core` - Core design tokens and utilities
+- `react-native` - React Native framework
+- `styled-components` - Styling library

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,9 @@
+import { AccordionBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface AccordionProps extends AccordionBaseProps {
+    style?: ViewStyle;
+    contentStyle?: ViewStyle;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

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

@@ -0,0 +1,50 @@
+import { DefaultTheme } from 'styled-components/native';
+export declare const getAccordionStyles: ({ theme }: {
+    theme: DefaultTheme;
+}) => {
+    root: {
+        borderWidth: number;
+        borderRadius: number;
+        borderColor: string;
+        width: number;
+    };
+    item: {
+        borderBottomWidth: number;
+        borderColor: string;
+        margin: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        paddingBottom: number;
+        width: number;
+    };
+    itemLastChild: {
+        borderTopWidth: number;
+        borderBottomWidth: number;
+    };
+    header: {
+        margin: number;
+        width: number;
+    };
+    content: {
+        width: number;
+        backgroundColor: string;
+        borderRadius: number;
+        padding: number;
+        marginBottom: number;
+    };
+    trigger: {
+        display: "flex";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+        backgroundColor: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+        width: number;
+        textAlign: "left";
+    };
+    triggerIcon: {
+        flexShrink: number;
+        marginTop: number;
+    };
+};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonAppearance, ButtonBaseProps, ButtonSizes, ButtonVariations } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export { ButtonAppearance, ButtonSizes, ButtonVariations };
+export interface ButtonProps extends ButtonBaseProps {
+    onPress?: () => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<import("react-native").View>>;
+export default Button;

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

@@ -0,0 +1,31 @@
+import { ButtonAppearance, ButtonSizes, ButtonVariations } from '@a-little-world/little-world-design-system-core';
+import { ViewStyle, TextStyle } from 'react-native';
+export declare const getButtonStyles: ({ appearance, color, variation, size, backgroundColor, borderColor, theme, }: {
+    appearance: ButtonAppearance;
+    color?: string | undefined;
+    variation: ButtonVariations;
+    size: ButtonSizes;
+    backgroundColor?: string | undefined;
+    borderColor?: string | undefined;
+    theme: any;
+}) => ViewStyle;
+export declare const gradientStyles: {
+    fullSize: {
+        position: "absolute";
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+};
+export declare const getButtonTextStyles: ({ color, variation, appearance, theme, }: {
+    color?: string | undefined;
+    variation: ButtonVariations;
+    appearance: ButtonAppearance;
+    theme: any;
+}) => TextStyle;
+export declare const OPTION_BUTTON_CSS: import("styled-components/native/dist/types").RuleSet<{
+    $appearance?: ButtonAppearance | undefined;
+    $backgroundColor?: string | undefined;
+    $color?: string | undefined;
+}>;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CardBaseProps, CardContentProps, CardFooterProps, CardHeaderProps } from '@a-little-world/little-world-design-system-core';
+type CardProps = CardBaseProps & {
+    style?: any;
+};
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export declare const CardContent: React.FC<CardContentProps>;
+export declare const CardFooter: React.FC<CardFooterProps>;
+declare const Card: React.FC<CardProps>;
+export default Card;

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

@@ -0,0 +1,22 @@
+import { ViewStyle, DimensionValue } from 'react-native';
+import { CardSizes } from '@a-little-world/little-world-design-system-core';
+import { FlexAlignType, FlexStyle } from 'react-native';
+export declare const getCardStyles: ({ borderColor, height, theme, width, }: {
+    borderColor?: string | undefined;
+    height?: DimensionValue | undefined;
+    theme: any;
+    width?: CardSizes | undefined;
+}) => ViewStyle;
+export declare const getCardHeaderStyles: ({ theme }: {
+    theme: any;
+}) => ViewStyle;
+export declare const getCardContentStyles: ({ align, gap, marginBottom, theme, }: {
+    align?: FlexAlignType | undefined;
+    gap?: number | undefined;
+    marginBottom?: number | undefined;
+    theme: any;
+}) => ViewStyle;
+export declare const getCardFooterStyles: ({ align, theme, }: {
+    align?: FlexStyle['justifyContent'];
+    theme: any;
+}) => ViewStyle;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type CheckboxProps = {
+    style?: StyleProp<ViewStyle>;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & CheckboxPrimitive.RootProps;
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

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

@@ -0,0 +1,45 @@
+import { DefaultTheme } from 'styled-components/native';
+export declare const getContainerStyles: ({ theme }: {
+    theme: DefaultTheme;
+}) => {
+    container: {
+        display: "flex";
+        alignItems: "center";
+        marginVertical: number;
+        flexDirection: "row";
+    };
+};
+export declare const getCheckboxStyles: ({ theme, hasError, color, checked, }: {
+    theme: DefaultTheme;
+    hasError: boolean;
+    color?: string | undefined;
+    checked: boolean;
+}) => {
+    container: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        justifyContent: "flex-start";
+    };
+    text: {
+        paddingHorizontal: number;
+    };
+    checkbox: {
+        backgroundColor: string | undefined;
+        borderColor: string;
+        color?: string | undefined;
+        height: number;
+        width: number;
+        borderWidth: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        display: "flex";
+    };
+};
+export declare const indicatorStyles: {
+    indicator: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};

package/dist/components/Dropdown/Dropdown.d.ts

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

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

@@ -0,0 +1,32 @@
+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, }: {
+    theme: DefaultTheme;
+    maxWidth: number;
+    height: InputHeight;
+    hasError: boolean;
+}) => {
+    wrapper: {
+        position: "relative";
+        maxWidth: number;
+        width: "100%";
+    };
+    trigger: {
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        lineHeight: number;
+        height: number;
+        gap: number;
+        backgroundColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: "100%";
+        color: string;
+        marginBottom: number;
+    };
+    triggerWithError: {};
+};

package/dist/components/Gradient/Gradient.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface GradientProps {
+    gradient: string;
+    style?: ViewStyle;
+    children?: React.ReactNode;
+}
+export declare const Gradient: React.FC<GradientProps>;
+export default Gradient;

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Gradients, IconBaseProps } from '@a-little-world/little-world-design-system-core';
+export declare const ImageLabel: ({ children, top, }: {
+    children: string;
+    top: number;
+}) => React.JSX.Element;
+export type IconSvgProps = Omit<IconBaseProps, 'children'> & {
+    gradient?: Gradients;
+    width?: number | string;
+    height?: number | string;
+    viewBox?: string;
+};
+export declare const Icon: ({ backgroundColor, borderColor, children, circular, style, label, labelVisible, labelTop, }: Omit<IconBaseProps, "className"> & {
+    style?: any;
+}) => React.JSX.Element;
+export default Icon;

package/dist/components/Icon/IconGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconGradientProps } from '@a-little-world/little-world-design-system-core';
+declare const IconGradient: ({ id, variation, type, }: IconGradientProps) => React.JSX.Element | null;
+export default IconGradient;

package/dist/components/Icon/createIconComponent.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { IconSvgProps } from './Icon';
+import { SvgFactoryOptions } from '@a-little-world/little-world-design-system-core';
+export declare const createIconComponent: ({ name, svgData, gradientType, }: SvgFactoryOptions) => {
+    ({ height, width, style, color, backgroundColor, gradient, borderColor, circular, label, labelVisible, }: Omit<import("@a-little-world/little-world-design-system-core").IconBaseProps, "children"> & {
+        gradient?: import("@a-little-world/little-world-design-system-core").Gradients | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        viewBox?: string | undefined;
+    } & {
+        style?: ViewStyle | undefined;
+        color?: string | undefined;
+    }): React.JSX.Element;
+    displayName: string;
+};