Release/@gluestack UI/pin [email protected]

example/storybook-nativewind/babel.config.js

@@ -39,6 +39,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/input/src'
             ),
+            '@gluestack-ui/pin-input': path.resolve(
+              __dirname,
+              '../../packages/unstyled/pin-input/src'
+            ),
             '@gluestack-ui/tooltip': path.resolve(
               __dirname,
               '../../packages/unstyled/tooltip/src'

example/storybook-nativewind/package.json

@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.62",
+    "@gluestack-ui/themed": "^1.1.63",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

example/storybook-nativewind/src/components/PinInput/PinInput.stories.tsx

@@ -0,0 +1,51 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import PinInput from './PinInput';
+// import InputIcon from './InputIcon';
+
+const PinInputMeta: ComponentMeta<typeof PinInput> = {
+  title: 'stories/PinInput',
+  component: PinInput,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The PinInput component is your go-to tool for gathering user OTP in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered.`,
+  },
+  argTypes: {
+    // size: {
+    //   control: 'select',
+    //   options: ['sm', 'md', 'lg', 'xl'],
+    // },
+    // variant: {
+    //   control: 'select',
+    //   options: ['outline', 'underlined', 'rounded'],
+    // },
+    // isInvalid: {
+    //   control: 'boolean',
+    //   options: [true, false],
+    // },
+    // isHovered: {
+    //   control: 'boolean',
+    //   options: [true, false],
+    // },
+    // isFocused: {
+    //   control: 'boolean',
+    //   options: [true, false],
+    // },
+    // isDisabled: {
+    //   control: 'boolean',
+    //   options: [true, false],
+    // },
+  },
+  args: {
+    // size: 'sm',
+    // variant: 'outline',
+    // isInvalid: false,
+    // isDisabled: false,
+    // isHovered: false,
+    // isFocused: false,
+  },
+};
+
+export default PinInputMeta;
+
+export { PinInput };

example/storybook-nativewind/src/components/PinInput/PinInput.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { PinInput, PinInputField } from '@/components/ui/pin-input';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { Button, ButtonText } from '@/components/ui/button';
+
+const PinInputBasic = ({ ...props }: any) => {
+  const [value, setValue] = useState('1357');
+  console.log('value in use', value);
+  const [clipboardValue, setClipboardValue] = useState('');
+  return (
+    <>
+      <PinInput
+        {...props}
+        className=""
+        defaultValue={'0000'}
+        value={value}
+        onChange={(e: any) => {
+          setValue(e);
+        }}
+        noOfFields={4}
+      >
+        {Array.from({ length: 4 }).map((_, index) => (
+          <PinInputField key={index} index={index} />
+        ))}
+      </PinInput>
+      <Button
+        onPress={() => {
+          Clipboard.getString().then((valueInClipboard) => {
+            console.log('value in use', valueInClipboard);
+            setClipboardValue(valueInClipboard);
+          });
+        }}
+      >
+        <ButtonText className="bg-red-500 h-[100px] w-[100px] text-green-600 text-center justify-center items-center">
+          {clipboardValue}
+        </ButtonText>
+      </Button>
+    </>
+  );
+};
+
+PinInputBasic.description =
+  'This is a basic PinInput component example. PinInputs are used to capture OTP from users.';
+
+export default PinInputBasic;