(WIP) Feat/time input

example/storybook-nativewind/babel.config.js

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

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

@@ -0,0 +1,45 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import TimeInput from './TimeInput';
+
+const TimeInputMeta: ComponentMeta<typeof TimeInput> = {
+  title: 'stories/TimeInput',
+  component: TimeInput,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `The TimeInput component is designed to take the time from user in the form of day.js object`,
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+    variant: {
+      control: 'select',
+      options: ['outlined', 'underlined'],
+    },
+    isInvalid: {
+      control: 'boolean',
+      options: [true, false],
+    },
+    isDisabled: {
+      control: 'boolean',
+      options: [true, false],
+    },
+    isReadOnly: {
+      control: 'boolean',
+      options: [true, false],
+    },
+  },
+  args: {
+    size: 'sm',
+    variant: 'outlined',
+    isInvalid: false,
+    isDisabled: false,
+    isReadOnly: false,
+  },
+};
+
+export default TimeInputMeta;
+
+export { TimeInput };

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

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import {
+  TimeInput,
+  TimeInputHr,
+  TimeInputMin,
+  TimeInputMeridiem,
+  TimeInputMeridiemText,
+  TimeInputColon,
+} from '@/components/ui/time-input';
+
+const TimeInputBasic = ({ ...props }: any) => {
+  const [timeValue, setTimeValue] = useState(null);
+  return (
+    <>
+      <TimeInput
+        {...props}
+        value={timeValue}
+        onChange={setTimeValue}
+        isHovered={true}
+      >
+        <TimeInputHr placeholder="HH" />
+        <TimeInputColon />
+        <TimeInputMin placeholder="MM" />
+        <TimeInputMeridiem>
+          <TimeInputMeridiemText />
+        </TimeInputMeridiem>
+      </TimeInput>
+    </>
+  );
+};
+
+TimeInputBasic.description =
+  'This is a basic TimeInput component example. TimeInputs are used to get time input from the user.';
+
+export default TimeInputBasic;
+export { TimeInput };