init simple create

init add Notice
add input component
2025-04-29 19:42:06 +02:00 · 2025-04-26 00:43:45 +02:00 · 2025-04-25 19:26:11 +02:00
9 changed files with 1946 additions and 13 deletions
--- a/ArtisanConnect/api/notices.jsx
+++ b/ArtisanConnect/api/notices.jsx
@@ -1,20 +1,35 @@
 const API_URL = "https://testowe.zikor.pl/api/v1/notices/";

 export async function listNotices() {
-    const response = await fetch(`${API_URL}get/all`);
-    const data = await response.json();
-    if (!response.ok) {
-        throw new Error("Error");
-    }
-    return data;
+  const response = await fetch(`${API_URL}get/all`);
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error("Error");
+  }
+  return data;
 }

 export async function getNoticeById(noticeId) {
-    const response = await fetch(`${API_URL}get/${noticeId}`);
+  const response = await fetch(`${API_URL}get/${noticeId}`);

-    const data = await response.json();
-    if (!response.ok) {
-        throw new Error("Error");
-    }
-    return data;
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error("Error");
+  }
+  return data;
+}
+
+export async function createNotice(notice) {
+  // console.log("Notice created", notice);
+  const response = await fetch(`${API_URL}add`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(notice),
+  });
+  console.log("Response", response);
+  if (!response.ok) {
+    throw new Error("Error");
+  }
 }
--- a/ArtisanConnect/app/(tabs)/notice/create.jsx
+++ b/ArtisanConnect/app/(tabs)/notice/create.jsx
@@ -1,4 +1,142 @@
+import { useState } from "react";
+import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form-control";
+import { Input, InputField } from "@/components/ui/input";
 import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Textarea, TextareaInput } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+} from "@/components/ui/select";
+
+import { ChevronDownIcon } from "@/components/ui/icon";
+import { useMutation } from "@tanstack/react-query";
+import { createNotice } from "@/api/notices";
+
 export default function CreateNotice() {
-  return <Text>Tworzenie ogłoszenia</Text>;
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [error, setError] = useState({
+    title: false,
+    description: false,
+    price: false,
+    category: false,
+  });
+
+  const noticeMutation = useMutation({
+    mutationFn: () =>
+      createNotice({
+        title: title,
+        clientId: 1,
+        description: description,
+        price: parseFloat(price),
+        category: category,
+        status: "ACTIVE",
+      }),
+    onSuccess: () => {
+      console.log("Notice created successfully");
+    },
+    onError: (error) => {
+      console.error("Error creating notice");
+    },
+  });
+
+  const addNotice = () => {
+    setError({
+      title: !title,
+      description: !description,
+      price: !price,
+      category: !category,
+    });
+
+    if (!title || !description || !price || !category) {
+      console.log("Error in form");
+      return;
+    }
+    noticeMutation.mutate();
+  };
+
+  return (
+    <FormControl className="p-4 border rounded-lg border-outline-300">
+      <VStack space="xl">
+        <VStack space="xs">
+          <Text className="text-typography-500">Tytuł</Text>
+          <Input className="min-w-[250px]" isInvalid={error.title}>
+            <InputField
+              type="text"
+              value={title}
+              onChangeText={(value) => setTitle(value)}
+            />
+          </Input>
+        </VStack>
+
+        <VStack space="xs">
+          <Text className="text-typography-500">Opis</Text>
+          <Textarea
+            size="md"
+            className="min-w-[250px] "
+            isInvalid={error.description}
+          >
+            <TextareaInput
+              placeholder="Opisz produkt"
+              value={description}
+              onChangeText={(value) => setDescription(value)}
+            />
+          </Textarea>
+        </VStack>
+
+        <VStack space="xs">
+          <Text className="text-typography-500">Cena</Text>
+          <Input className="min-w-[250px]" isInvalid={error.price}>
+            <InputField
+              type="text"
+              value={price}
+              onChangeText={(value) => setPrice(value)}
+            />
+          </Input>
+        </VStack>
+        <VStack space="xs">
+          <Text className="text-typography-500">Kategoria</Text>
+          <Select
+            onValueChange={(value) => setCategory(value)}
+            isInvalid={error.category}
+          >
+            <SelectTrigger variant="outline" size="md">
+              <SelectInput placeholder="Wybierz kategorię" />
+              <SelectIcon className="mr-3" as={ChevronDownIcon} />
+            </SelectTrigger>
+            <SelectPortal>
+              <SelectBackdrop />
+              <SelectContent>
+                <SelectDragIndicatorWrapper>
+                  <SelectDragIndicator />
+                </SelectDragIndicatorWrapper>
+                <SelectItem label="Meble" value="Furniture" />
+                <SelectItem label="Biżuteria" value="Jewelry" />
+                <SelectItem label="Ceramika" value="Ceramics" />
+              </SelectContent>
+            </SelectPortal>
+          </Select>
+        </VStack>
+        <Button
+          className="ml-auto"
+          onPress={() => addNotice()}
+          disabled={noticeMutation.isLoading}
+        >
+          <ButtonText className="text-typography-0">Save</ButtonText>
+        </Button>
+      </VStack>
+    </FormControl>
+  );
 }
--- a/ArtisanConnect/components/ui/form-control/index.tsx
+++ b/ArtisanConnect/components/ui/form-control/index.tsx
@@ -0,0 +1,468 @@
+'use client';
+import { Text, View } from 'react-native';
+import React from 'react';
+import { createFormControl } from '@gluestack-ui/form-control';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+
+const SCOPE = 'FORM_CONTROL';
+
+const formControlStyle = tva({
+  base: 'flex flex-col',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+});
+
+const formControlErrorIconStyle = tva({
+  base: 'text-error-700 fill-none',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const formControlErrorStyle = tva({
+  base: 'flex flex-row justify-start items-center mt-1 gap-1',
+});
+
+const formControlErrorTextStyle = tva({
+  base: 'text-error-700',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const formControlHelperStyle = tva({
+  base: 'flex flex-row justify-start items-center mt-1',
+});
+
+const formControlHelperTextStyle = tva({
+  base: 'text-typography-500',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-xs',
+      'md': 'text-sm',
+      'lg': 'text-base',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const formControlLabelStyle = tva({
+  base: 'flex flex-row justify-start items-center mb-1',
+});
+
+const formControlLabelTextStyle = tva({
+  base: 'font-medium text-typography-900',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const formControlLabelAstrickStyle = tva({
+  base: 'font-medium text-typography-900',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+type IFormControlLabelAstrickProps = React.ComponentPropsWithoutRef<
+  typeof Text
+> &
+  VariantProps<typeof formControlLabelAstrickStyle>;
+
+const FormControlLabelAstrick = React.forwardRef<
+  React.ComponentRef<typeof Text>,
+  IFormControlLabelAstrickProps
+>(function FormControlLabelAstrick({ className, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <Text
+      ref={ref}
+      className={formControlLabelAstrickStyle({
+        parentVariants: { size: parentSize },
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+export const UIFormControl = createFormControl({
+  Root: withStyleContext(View, SCOPE),
+  Error: View,
+  ErrorText: Text,
+  ErrorIcon: UIIcon,
+  Label: View,
+  LabelText: Text,
+  LabelAstrick: FormControlLabelAstrick,
+  Helper: View,
+  HelperText: Text,
+});
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: true,
+      stroke: true,
+    },
+  },
+});
+
+type IFormControlProps = React.ComponentProps<typeof UIFormControl> &
+  VariantProps<typeof formControlStyle>;
+
+const FormControl = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl>,
+  IFormControlProps
+>(function FormControl({ className, size = 'md', ...props }, ref) {
+  return (
+    <UIFormControl
+      ref={ref}
+      className={formControlStyle({ size, class: className })}
+      {...props}
+      context={{ size }}
+    />
+  );
+});
+
+type IFormControlErrorProps = React.ComponentProps<typeof UIFormControl.Error> &
+  VariantProps<typeof formControlErrorStyle>;
+
+const FormControlError = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Error>,
+  IFormControlErrorProps
+>(function FormControlError({ className, ...props }, ref) {
+  return (
+    <UIFormControl.Error
+      ref={ref}
+      className={formControlErrorStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlErrorTextProps = React.ComponentProps<
+  typeof UIFormControl.Error.Text
+> &
+  VariantProps<typeof formControlErrorTextStyle>;
+
+const FormControlErrorText = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Error.Text>,
+  IFormControlErrorTextProps
+>(function FormControlErrorText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+  return (
+    <UIFormControl.Error.Text
+      className={formControlErrorTextStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type IFormControlErrorIconProps = React.ComponentProps<
+  typeof UIFormControl.Error.Icon
+> &
+  VariantProps<typeof formControlErrorIconStyle> & {
+    height?: number;
+    width?: number;
+  };
+
+const FormControlErrorIcon = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Error.Icon>,
+  IFormControlErrorIconProps
+>(function FormControlErrorIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIFormControl.Error.Icon
+        ref={ref}
+        {...props}
+        className={formControlErrorIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIFormControl.Error.Icon
+        ref={ref}
+        {...props}
+        className={formControlErrorIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIFormControl.Error.Icon
+      className={formControlErrorIconStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlLabelProps = React.ComponentProps<typeof UIFormControl.Label> &
+  VariantProps<typeof formControlLabelStyle>;
+
+const FormControlLabel = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Label>,
+  IFormControlLabelProps
+>(function FormControlLabel({ className, ...props }, ref) {
+  return (
+    <UIFormControl.Label
+      ref={ref}
+      className={formControlLabelStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlLabelTextProps = React.ComponentProps<
+  typeof UIFormControl.Label.Text
+> &
+  VariantProps<typeof formControlLabelTextStyle>;
+
+const FormControlLabelText = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Label.Text>,
+  IFormControlLabelTextProps
+>(function FormControlLabelText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIFormControl.Label.Text
+      className={formControlLabelTextStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type IFormControlHelperProps = React.ComponentProps<
+  typeof UIFormControl.Helper
+> &
+  VariantProps<typeof formControlHelperStyle>;
+
+const FormControlHelper = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Helper>,
+  IFormControlHelperProps
+>(function FormControlHelper({ className, ...props }, ref) {
+  return (
+    <UIFormControl.Helper
+      ref={ref}
+      className={formControlHelperStyle({
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlHelperTextProps = React.ComponentProps<
+  typeof UIFormControl.Helper.Text
+> &
+  VariantProps<typeof formControlHelperTextStyle>;
+
+const FormControlHelperText = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Helper.Text>,
+  IFormControlHelperTextProps
+>(function FormControlHelperText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIFormControl.Helper.Text
+      className={formControlHelperTextStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+FormControl.displayName = 'FormControl';
+FormControlError.displayName = 'FormControlError';
+FormControlErrorText.displayName = 'FormControlErrorText';
+FormControlErrorIcon.displayName = 'FormControlErrorIcon';
+FormControlLabel.displayName = 'FormControlLabel';
+FormControlLabelText.displayName = 'FormControlLabelText';
+FormControlLabelAstrick.displayName = 'FormControlLabelAstrick';
+FormControlHelper.displayName = 'FormControlHelper';
+FormControlHelperText.displayName = 'FormControlHelperText';
+
+export {
+  FormControl,
+  FormControlError,
+  FormControlErrorText,
+  FormControlErrorIcon,
+  FormControlLabel,
+  FormControlLabelText,
+  FormControlLabelAstrick,
+  FormControlHelper,
+  FormControlHelperText,
+};
--- a/ArtisanConnect/components/ui/input/index.tsx
+++ b/ArtisanConnect/components/ui/input/index.tsx
@@ -0,0 +1,217 @@
+'use client';
+import React from 'react';
+import { createInput } from '@gluestack-ui/input';
+import { View, Pressable, TextInput } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+
+const SCOPE = 'INPUT';
+
+const UIInput = createInput({
+  Root: withStyleContext(View, SCOPE),
+  Icon: UIIcon,
+  Slot: Pressable,
+  Input: TextInput,
+});
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const inputStyle = tva({
+  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center',
+
+  variants: {
+    size: {
+      xl: 'h-12',
+      lg: 'h-11',
+      md: 'h-10',
+      sm: 'h-9',
+    },
+
+    variant: {
+      underlined:
+        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700',
+
+      outline:
+        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
+
+      rounded:
+        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
+    },
+  },
+});
+
+const inputIconStyle = tva({
+  base: 'justify-center items-center text-typography-400 fill-none',
+  parentVariants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const inputSlotStyle = tva({
+  base: 'justify-center items-center web:disabled:cursor-not-allowed',
+});
+
+const inputFieldStyle = tva({
+  base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+
+  parentVariants: {
+    variant: {
+      underlined: 'web:outline-0 web:outline-none px-0',
+      outline: 'web:outline-0 web:outline-none',
+      rounded: 'web:outline-0 web:outline-none px-4',
+    },
+
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+});
+
+type IInputProps = React.ComponentProps<typeof UIInput> &
+  VariantProps<typeof inputStyle> & { className?: string };
+const Input = React.forwardRef<React.ComponentRef<typeof UIInput>, IInputProps>(
+  function Input(
+    { className, variant = 'outline', size = 'md', ...props },
+    ref
+  ) {
+    return (
+      <UIInput
+        ref={ref}
+        {...props}
+        className={inputStyle({ variant, size, class: className })}
+        context={{ variant, size }}
+      />
+    );
+  }
+);
+
+type IInputIconProps = React.ComponentProps<typeof UIInput.Icon> &
+  VariantProps<typeof inputIconStyle> & {
+    className?: string;
+    height?: number;
+    width?: number;
+  };
+
+const InputIcon = React.forwardRef<
+  React.ComponentRef<typeof UIInput.Icon>,
+  IInputIconProps
+>(function InputIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIInput.Icon
+        ref={ref}
+        {...props}
+        className={inputIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIInput.Icon
+        ref={ref}
+        {...props}
+        className={inputIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIInput.Icon
+      ref={ref}
+      {...props}
+      className={inputIconStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+type IInputSlotProps = React.ComponentProps<typeof UIInput.Slot> &
+  VariantProps<typeof inputSlotStyle> & { className?: string };
+
+const InputSlot = React.forwardRef<
+  React.ComponentRef<typeof UIInput.Slot>,
+  IInputSlotProps
+>(function InputSlot({ className, ...props }, ref) {
+  return (
+    <UIInput.Slot
+      ref={ref}
+      {...props}
+      className={inputSlotStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+type IInputFieldProps = React.ComponentProps<typeof UIInput.Input> &
+  VariantProps<typeof inputFieldStyle> & { className?: string };
+
+const InputField = React.forwardRef<
+  React.ComponentRef<typeof UIInput.Input>,
+  IInputFieldProps
+>(function InputField({ className, ...props }, ref) {
+  const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIInput.Input
+      ref={ref}
+      {...props}
+      className={inputFieldStyle({
+        parentVariants: {
+          variant: parentVariant,
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+InputIcon.displayName = 'InputIcon';
+InputSlot.displayName = 'InputSlot';
+InputField.displayName = 'InputField';
+
+export { Input, InputField, InputIcon, InputSlot };
--- a/ArtisanConnect/components/ui/select/index.tsx
+++ b/ArtisanConnect/components/ui/select/index.tsx
@@ -0,0 +1,277 @@
+'use client';
+
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { createSelect } from '@gluestack-ui/select';
+import { cssInterop } from 'nativewind';
+import {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+} from './select-actionsheet';
+import { Pressable, View, TextInput } from 'react-native';
+
+const SelectTriggerWrapper = React.forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  React.ComponentProps<typeof Pressable>
+>(function SelectTriggerWrapper({ ...props }, ref) {
+  return <Pressable {...props} ref={ref} />;
+});
+
+const selectIconStyle = tva({
+  base: 'text-background-500 fill-none',
+  parentVariants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const selectStyle = tva({
+  base: '',
+});
+
+const selectTriggerStyle = tva({
+  base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300',
+  variants: {
+    size: {
+      xl: 'h-12',
+      lg: 'h-11',
+      md: 'h-10',
+      sm: 'h-9',
+    },
+    variant: {
+      underlined:
+        'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
+      outline:
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700',
+      rounded:
+        'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
+    },
+  },
+});
+
+const selectInputStyle = tva({
+  base: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px]',
+  parentVariants: {
+    size: {
+      xl: 'text-xl',
+      lg: 'text-lg',
+      md: 'text-base',
+      sm: 'text-sm',
+    },
+    variant: {
+      underlined: 'px-0',
+      outline: '',
+      rounded: 'px-4',
+    },
+  },
+});
+
+const UISelect = createSelect(
+  {
+    Root: View,
+    Trigger: withStyleContext(SelectTriggerWrapper),
+    Input: TextInput,
+    Icon: UIIcon,
+  },
+  {
+    Portal: Actionsheet,
+    Backdrop: ActionsheetBackdrop,
+    Content: ActionsheetContent,
+    DragIndicator: ActionsheetDragIndicator,
+    DragIndicatorWrapper: ActionsheetDragIndicatorWrapper,
+    Item: ActionsheetItem,
+    ItemText: ActionsheetItemText,
+    ScrollView: ActionsheetScrollView,
+    VirtualizedList: ActionsheetVirtualizedList,
+    FlatList: ActionsheetFlatList,
+    SectionList: ActionsheetSectionList,
+    SectionHeaderText: ActionsheetSectionHeaderText,
+  }
+);
+
+cssInterop(UISelect, { className: 'style' });
+cssInterop(UISelect.Input, {
+  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
+});
+cssInterop(SelectTriggerWrapper, { className: 'style' });
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type ISelectProps = VariantProps<typeof selectStyle> &
+  React.ComponentProps<typeof UISelect> & { className?: string };
+
+const Select = React.forwardRef<
+  React.ComponentRef<typeof UISelect>,
+  ISelectProps
+>(function Select({ className, ...props }, ref) {
+  return (
+    <UISelect
+      className={selectStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type ISelectTriggerProps = VariantProps<typeof selectTriggerStyle> &
+  React.ComponentProps<typeof UISelect.Trigger> & { className?: string };
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Trigger>,
+  ISelectTriggerProps
+>(function SelectTrigger(
+  { className, size = 'md', variant = 'outline', ...props },
+  ref
+) {
+  return (
+    <UISelect.Trigger
+      className={selectTriggerStyle({
+        class: className,
+        size,
+        variant,
+      })}
+      ref={ref}
+      context={{ size, variant }}
+      {...props}
+    />
+  );
+});
+
+type ISelectInputProps = VariantProps<typeof selectInputStyle> &
+  React.ComponentProps<typeof UISelect.Input> & { className?: string };
+
+const SelectInput = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Input>,
+  ISelectInputProps
+>(function SelectInput({ className, ...props }, ref) {
+  const { size: parentSize, variant: parentVariant } = useStyleContext();
+  return (
+    <UISelect.Input
+      className={selectInputStyle({
+        class: className,
+        parentVariants: {
+          size: parentSize,
+          variant: parentVariant,
+        },
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type ISelectIcon = VariantProps<typeof selectIconStyle> &
+  React.ComponentProps<typeof UISelect.Icon> & { className?: string };
+
+const SelectIcon = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Icon>,
+  ISelectIcon
+>(function SelectIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext();
+  if (typeof size === 'number') {
+    return (
+      <UISelect.Icon
+        ref={ref}
+        {...props}
+        className={selectIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    //@ts-expect-error : web only
+    (props?.height !== undefined || props?.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UISelect.Icon
+        ref={ref}
+        {...props}
+        className={selectIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UISelect.Icon
+      className={selectIconStyle({
+        class: className,
+        size,
+        parentVariants: {
+          size: parentSize,
+        },
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Select.displayName = 'Select';
+SelectTrigger.displayName = 'SelectTrigger';
+SelectInput.displayName = 'SelectInput';
+SelectIcon.displayName = 'SelectIcon';
+
+// Actionsheet Components
+const SelectPortal = UISelect.Portal;
+const SelectBackdrop = UISelect.Backdrop;
+const SelectContent = UISelect.Content;
+const SelectDragIndicator = UISelect.DragIndicator;
+const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper;
+const SelectItem = UISelect.Item;
+const SelectScrollView = UISelect.ScrollView;
+const SelectVirtualizedList = UISelect.VirtualizedList;
+const SelectFlatList = UISelect.FlatList;
+const SelectSectionList = UISelect.SectionList;
+const SelectSectionHeaderText = UISelect.SectionHeaderText;
+
+export {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+  SelectScrollView,
+  SelectVirtualizedList,
+  SelectFlatList,
+  SelectSectionList,
+  SelectSectionHeaderText,
+};
--- a/ArtisanConnect/components/ui/select/select-actionsheet.tsx
+++ b/ArtisanConnect/components/ui/select/select-actionsheet.tsx
@@ -0,0 +1,562 @@
+'use client';
+
+import { H4 } from '@expo/html-elements';
+import { createActionsheet } from '@gluestack-ui/actionsheet';
+import {
+  Pressable,
+  View,
+  Text,
+  ScrollView,
+  VirtualizedList,
+  FlatList,
+  SectionList,
+  ViewStyle,
+} from 'react-native';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import {
+  Motion,
+  AnimatePresence,
+  createMotionAnimatedComponent,
+  MotionComponentProps,
+} from '@legendapp/motion';
+
+import React from 'react';
+
+type IAnimatedPressableProps = React.ComponentProps<typeof Pressable> &
+  MotionComponentProps<typeof Pressable, ViewStyle, unknown, unknown, unknown>;
+
+const AnimatedPressable = createMotionAnimatedComponent(
+  Pressable
+) as React.ComponentType<IAnimatedPressableProps>;
+
+type IMotionViewProps = React.ComponentProps<typeof View> &
+  MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
+
+const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
+
+export const UIActionsheet = createActionsheet({
+  Root: View,
+  Content: withStyleContext(MotionView),
+  Item: withStyleContext(Pressable),
+  ItemText: Text,
+  DragIndicator: View,
+  IndicatorWrapper: View,
+  Backdrop: AnimatedPressable,
+  ScrollView: ScrollView,
+  VirtualizedList: VirtualizedList,
+  FlatList: FlatList,
+  SectionList: SectionList,
+  SectionHeaderText: H4,
+  Icon: UIIcon,
+  AnimatePresence: AnimatePresence,
+});
+
+cssInterop(UIActionsheet, { className: 'style' });
+cssInterop(UIActionsheet.Content, { className: 'style' });
+cssInterop(UIActionsheet.Item, { className: 'style' });
+cssInterop(UIActionsheet.ItemText, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
+cssInterop(UIActionsheet.Backdrop, { className: 'style' });
+cssInterop(UIActionsheet.ScrollView, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.VirtualizedList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.FlatList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  columnWrapperClassName: 'columnWrapperStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.SectionList, { className: 'style' });
+cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
+
+const actionsheetContentStyle = tva({
+  base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg',
+});
+
+const actionsheetItemStyle = tva({
+  base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 data-[checked=true]:bg-background-100',
+});
+
+const actionsheetItemTextStyle = tva({
+  base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const actionsheetDragIndicatorStyle = tva({
+  base: 'w-16 h-1 bg-background-400 rounded-full',
+});
+
+const actionsheetDragIndicatorWrapperStyle = tva({
+  base: 'w-full py-1 items-center',
+});
+
+const actionsheetBackdropStyle = tva({
+  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
+});
+
+const actionsheetScrollViewStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetVirtualizedListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetFlatListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionHeaderTextStyle = tva({
+  base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '5xl': 'text-5xl',
+      '4xl': 'text-4xl',
+      '3xl': 'text-3xl',
+      '2xl': 'text-2xl',
+      'xl': 'text-xl',
+      'lg': 'text-lg',
+      'md': 'text-base',
+      'sm': 'text-sm',
+      'xs': 'text-xs',
+    },
+
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow500',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+const actionsheetIconStyle = tva({
+  base: 'text-typography-900',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'w-4 h-4',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+type IActionsheetProps = VariantProps<typeof actionsheetStyle> &
+  React.ComponentProps<typeof UIActionsheet> & { className?: string };
+
+type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
+  React.ComponentProps<typeof UIActionsheet.Content> & { className?: string };
+
+type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
+  React.ComponentProps<typeof UIActionsheet.Item> & { className?: string };
+
+type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
+  React.ComponentProps<typeof UIActionsheet.ItemText> & { className?: string };
+
+type IActionsheetDragIndicatorProps = VariantProps<
+  typeof actionsheetDragIndicatorStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.DragIndicator> & {
+    className?: string;
+  };
+
+type IActionsheetDragIndicatorWrapperProps = VariantProps<
+  typeof actionsheetDragIndicatorWrapperStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.DragIndicatorWrapper> & {
+    className?: string;
+  };
+
+type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
+  React.ComponentProps<typeof UIActionsheet.Backdrop> & {
+    className?: string;
+  };
+
+type IActionsheetScrollViewProps = VariantProps<
+  typeof actionsheetScrollViewStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.ScrollView> & {
+    className?: string;
+  };
+
+type IActionsheetVirtualizedListProps = VariantProps<
+  typeof actionsheetVirtualizedListStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.VirtualizedList> & {
+    className?: string;
+  };
+
+type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
+  React.ComponentProps<typeof UIActionsheet.FlatList> & {
+    className?: string;
+  };
+
+type IActionsheetSectionListProps = VariantProps<
+  typeof actionsheetSectionListStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.SectionList> & {
+    className?: string;
+  };
+
+type IActionsheetSectionHeaderTextProps = VariantProps<
+  typeof actionsheetSectionHeaderTextStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.SectionHeaderText> & {
+    className?: string;
+  };
+
+type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
+  React.ComponentProps<typeof UIActionsheet.Icon> & {
+    className?: string;
+    as?: React.ElementType;
+  };
+
+const Actionsheet = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet>,
+  IActionsheetProps
+>(function Actionsheet({ className, ...props }, ref) {
+  return (
+    <UIActionsheet
+      className={actionsheetStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetContent = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Content>,
+  IActionsheetContentProps & { className?: string }
+>(function ActionsheetContent({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Content
+      className={actionsheetContentStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItem = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Item>,
+  IActionsheetItemProps
+>(function ActionsheetItem({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Item
+      className={actionsheetItemStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItemText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ItemText>,
+  IActionsheetItemTextProps
+>(function ActionsheetItemText(
+  { className, isTruncated, bold, underline, strikeThrough, size, ...props },
+  ref
+) {
+  return (
+    <UIActionsheet.ItemText
+      className={actionsheetItemTextStyle({
+        class: className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicator = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicator>,
+  IActionsheetDragIndicatorProps
+>(function ActionsheetDragIndicator({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicator
+      className={actionsheetDragIndicatorStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicatorWrapper = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicatorWrapper>,
+  IActionsheetDragIndicatorWrapperProps
+>(function ActionsheetDragIndicatorWrapper({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicatorWrapper
+      className={actionsheetDragIndicatorWrapperStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetBackdrop = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Backdrop>,
+  IActionsheetBackdropProps
+>(function ActionsheetBackdrop({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Backdrop
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 0.5,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      {...props}
+      className={actionsheetBackdropStyle({
+        class: className,
+      })}
+      ref={ref}
+    />
+  );
+});
+
+const ActionsheetScrollView = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ScrollView>,
+  IActionsheetScrollViewProps
+>(function ActionsheetScrollView({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.ScrollView
+      className={actionsheetScrollViewStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetVirtualizedList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.VirtualizedList>,
+  IActionsheetVirtualizedListProps
+>(function ActionsheetVirtualizedList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.VirtualizedList
+      className={actionsheetVirtualizedListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetFlatList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.FlatList>,
+  IActionsheetFlatListProps
+>(function ActionsheetFlatList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.FlatList
+      className={actionsheetFlatListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionList>,
+  IActionsheetSectionListProps
+>(function ActionsheetSectionList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.SectionList
+      className={actionsheetSectionListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionHeaderText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionHeaderText>,
+  IActionsheetSectionHeaderTextProps
+>(function ActionsheetSectionHeaderText(
+  {
+    className,
+    isTruncated,
+    bold,
+    underline,
+    strikeThrough,
+    size,
+    sub,
+    italic,
+    highlight,
+    ...props
+  },
+  ref
+) {
+  return (
+    <UIActionsheet.SectionHeaderText
+      className={actionsheetSectionHeaderTextStyle({
+        class: className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+        sub,
+        italic,
+        highlight,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetIcon = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Icon>,
+  IActionsheetIconProps
+>(function ActionsheetIcon(
+  { className, as: AsComp, size = 'sm', ...props },
+  ref
+) {
+  if (AsComp) {
+    return (
+      <AsComp
+        className={actionsheetIconStyle({
+          class: className,
+          size,
+        })}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+  return (
+    <UIActionsheet.Icon
+      className={actionsheetIconStyle({
+        class: className,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+  ActionsheetIcon,
+};
--- a/ArtisanConnect/components/ui/textarea/index.tsx
+++ b/ArtisanConnect/components/ui/textarea/index.tsx
@@ -0,0 +1,93 @@
+'use client';
+import React from 'react';
+import { createTextarea } from '@gluestack-ui/textarea';
+import { View, TextInput } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SCOPE = 'TEXTAREA';
+const UITextarea = createTextarea({
+  Root: withStyleContext(View, SCOPE),
+  Input: TextInput,
+});
+
+const textareaStyle = tva({
+  base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300',
+
+  variants: {
+    variant: {
+      default:
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-indicator-primary data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-indicator-error ',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      xl: '',
+    },
+  },
+});
+
+const textareaInputStyle = tva({
+  base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  parentVariants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+});
+
+type ITextareaProps = React.ComponentProps<typeof UITextarea> &
+  VariantProps<typeof textareaStyle>;
+
+const Textarea = React.forwardRef<
+  React.ComponentRef<typeof UITextarea>,
+  ITextareaProps
+>(function Textarea(
+  { className, variant = 'default', size = 'md', ...props },
+  ref
+) {
+  return (
+    <UITextarea
+      ref={ref}
+      {...props}
+      className={textareaStyle({ variant, class: className })}
+      context={{ size }}
+    />
+  );
+});
+
+type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> &
+  VariantProps<typeof textareaInputStyle>;
+
+const TextareaInput = React.forwardRef<
+  React.ComponentRef<typeof UITextarea.Input>,
+  ITextareaInputProps
+>(function TextareaInput({ className, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UITextarea.Input
+      ref={ref}
+      {...props}
+      className={textareaInputStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+Textarea.displayName = 'Textarea';
+TextareaInput.displayName = 'TextareaInput';
+
+export { Textarea, TextareaInput };
--- a/ArtisanConnect/package-lock.json
+++ b/ArtisanConnect/package-lock.json
@@ -10,12 +10,18 @@
      "dependencies": {
        "@expo/html-elements": "^0.4.2",
        "@expo/vector-icons": "^14.1.0",
+        "@gluestack-ui/actionsheet": "^0.2.53",
        "@gluestack-ui/button": "^1.0.14",
+        "@gluestack-ui/form-control": "^0.1.19",
        "@gluestack-ui/icon": "^0.1.27",
        "@gluestack-ui/image": "^0.1.17",
+        "@gluestack-ui/input": "^0.1.38",
        "@gluestack-ui/nativewind-utils": "^1.0.26",
        "@gluestack-ui/overlay": "^0.1.22",
+        "@gluestack-ui/select": "^0.1.31",
+        "@gluestack-ui/textarea": "^0.1.25",
        "@gluestack-ui/toast": "^1.0.9",
+        "@legendapp/motion": "^2.4.0",
        "@tanstack/react-query": "^5.74.4",
        "axios": "^1.8.4",
        "babel-plugin-module-resolver": "^5.0.2",
@@ -2335,6 +2341,24 @@
        "tslib": "^2.8.0"
      }
    },
+    "node_modules/@gluestack-ui/actionsheet": {
+      "version": "0.2.53",
+      "resolved": "https://registry.npmjs.org/@gluestack-ui/actionsheet/-/actionsheet-0.2.53.tgz",
+      "integrity": "sha512-93qHvq6BHezJ7wt2lce4OQ38wXCGsDtglj5nlmwo2T41vj4ubOtDVoSUhXT+hfH0EmRr0TxFNeFqIgesO46qVw==",
+      "dependencies": {
+        "@gluestack-ui/hooks": "0.1.13",
+        "@gluestack-ui/overlay": "^0.1.22",
+        "@gluestack-ui/transitions": "^0.1.11",
+        "@gluestack-ui/utils": "^0.1.15",
+        "@react-native-aria/dialog": "^0.0.5",
+        "@react-native-aria/focus": "^0.2.9",
+        "@react-native-aria/interactions": "0.2.16"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/@gluestack-ui/button": {
      "version": "1.0.14",
      "resolved": "https://registry.npmjs.org/@gluestack-ui/button/-/button-1.0.14.tgz",
@@ -2349,6 +2373,19 @@
        "react-dom": ">=16"
      }
    },
+    "node_modules/@gluestack-ui/form-control": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@gluestack-ui/form-control/-/form-control-0.1.19.tgz",
+      "integrity": "sha512-6YbPbi/RZrXc5DyVPbxPV17FYaBoEl1yAdSwut8iE6n+yQekjluINrh2q5ZPWF2SGmyo7VSNcL85yeU5I97xHg==",
+      "dependencies": {
+        "@gluestack-ui/utils": "^0.1.14",
+        "@react-native-aria/focus": "^0.2.9"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/@gluestack-ui/hooks": {
      "version": "0.1.13",
      "resolved": "https://registry.npmjs.org/@gluestack-ui/hooks/-/hooks-0.1.13.tgz",
@@ -2386,6 +2423,21 @@
        "react-dom": ">=16"
      }
    },
+    "node_modules/@gluestack-ui/input": {
+      "version": "0.1.38",
+      "resolved": "https://registry.npmjs.org/@gluestack-ui/input/-/input-0.1.38.tgz",
+      "integrity": "sha512-NzwDOXkkMYzBQ0h7UnhKA2h54/qlxDxMFGXykkmYOl7mc7QJc1aJaveo4yMHtpYvcQG17xLyD+Z+5CQYA76nvw==",
+      "dependencies": {
+        "@gluestack-ui/form-control": "^0.1.19",
+        "@gluestack-ui/utils": "^0.1.15",
+        "@react-native-aria/focus": "^0.2.9",
+        "@react-native-aria/interactions": "0.2.16"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/@gluestack-ui/nativewind-utils": {
      "version": "1.0.26",
      "resolved": "https://registry.npmjs.org/@gluestack-ui/nativewind-utils/-/nativewind-utils-1.0.26.tgz",
@@ -2440,6 +2492,36 @@
        "react-dom": ">=16"
      }
    },
+    "node_modules/@gluestack-ui/select": {
+      "version": "0.1.31",
+      "resolved": "https://registry.npmjs.org/@gluestack-ui/select/-/select-0.1.31.tgz",
+      "integrity": "sha512-d8vfdCK4VFBYEDYMCTRYcZCWvYaf7UWMJGg2uMnutHA8Y4sDXjKR5P821xKdh75QVkmZRZm1MdzSWFvXUzAlgg==",
+      "dependencies": {
+        "@gluestack-ui/form-control": "^0.1.19",
+        "@gluestack-ui/hooks": "0.1.13",
+        "@gluestack-ui/utils": "^0.1.14",
+        "@react-native-aria/focus": "^0.2.9"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/@gluestack-ui/textarea": {
+      "version": "0.1.25",
+      "resolved": "https://registry.npmjs.org/@gluestack-ui/textarea/-/textarea-0.1.25.tgz",
+      "integrity": "sha512-hXJx9LYSfrx7/Lrh2D2cTjr7PqvdkxJXBv2VydcR01X4WEN34DZkik+at/qk5FBw+p4t0vE+BTAK3IoMJwWvGg==",
+      "dependencies": {
+        "@gluestack-ui/form-control": "^0.1.19",
+        "@gluestack-ui/utils": "^0.1.14",
+        "@react-native-aria/focus": "^0.2.9",
+        "@react-native-aria/interactions": "^0.2.16"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/@gluestack-ui/toast": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/@gluestack-ui/toast/-/toast-1.0.9.tgz",
@@ -2828,6 +2910,34 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@legendapp/motion": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@legendapp/motion/-/motion-2.4.0.tgz",
+      "integrity": "sha512-AAYpRLGvxGD5hIGl9sVHyoUufr66zoH82PuxYcKiPSMdCBI3jwZFWh6CuHjV1leRKVIRk2py1rSvIVabG8eqcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@legendapp/tools": "2.0.1"
+      },
+      "peerDependencies": {
+        "nativewind": "*",
+        "react": ">=16",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@legendapp/tools": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@legendapp/tools/-/tools-2.0.1.tgz",
+      "integrity": "sha512-Kxt0HWvWElRK6oybHRzcYxdgaKGwuaiRNreS7usW7QuHXRIHaH4yMcW2YNRG4DHE5fpefv+Bno/BohQcCE4FaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2922,6 +3032,24 @@
        "react": "^16.8 || ^17.0 || ^18.0"
      }
    },
+    "node_modules/@react-aria/dialog": {
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.24.tgz",
+      "integrity": "sha512-tw0WH89gVpHMI5KUQhuzRE+IYCc9clRfDvCppuXNueKDrZmrQKbeoU6d0b5WYRsBur2+d7ErtvpLzHVqE1HzfA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.25.0",
+        "@react-aria/overlays": "^3.27.0",
+        "@react-aria/utils": "^3.28.2",
+        "@react-types/dialog": "^3.5.17",
+        "@react-types/shared": "^3.29.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
    "node_modules/@react-aria/focus": {
      "version": "3.20.2",
      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.2.tgz",
@@ -3048,6 +3176,22 @@
        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
      }
    },
+    "node_modules/@react-native-aria/dialog": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@react-native-aria/dialog/-/dialog-0.0.5.tgz",
+      "integrity": "sha512-ZThiWyymf3WiA2EdjStV32pTL3RjAb7H/CL0Zsd1wKNuw1lU9HX6h4UIUpt0MZhcFCUnZjCovNtU9IRwbbdj/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-aria/dialog": "*",
+        "@react-native-aria/utils": "0.2.12",
+        "@react-types/dialog": "*",
+        "@react-types/shared": "*"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/@react-native-aria/focus": {
      "version": "0.2.9",
      "resolved": "https://registry.npmjs.org/@react-native-aria/focus/-/focus-0.2.9.tgz",
@@ -3753,6 +3897,19 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
      }
    },
+    "node_modules/@react-types/dialog": {
+      "version": "3.5.17",
+      "resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.17.tgz",
+      "integrity": "sha512-rKe2WrT272xuCH13euegBGjJAORYXJpHsX2hlu/f02TmMG4nSLss9vKBnY2N7k7nci65k5wDTW6lcsvQ4Co5zQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.14",
+        "@react-types/shared": "^3.29.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
    "node_modules/@react-types/overlays": {
      "version": "3.8.14",
      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.14.tgz",
--- a/ArtisanConnect/package.json
+++ b/ArtisanConnect/package.json
@@ -11,12 +11,18 @@
  "dependencies": {
    "@expo/html-elements": "^0.4.2",
    "@expo/vector-icons": "^14.1.0",
+    "@gluestack-ui/actionsheet": "^0.2.53",
    "@gluestack-ui/button": "^1.0.14",
+    "@gluestack-ui/form-control": "^0.1.19",
    "@gluestack-ui/icon": "^0.1.27",
    "@gluestack-ui/image": "^0.1.17",
+    "@gluestack-ui/input": "^0.1.38",
    "@gluestack-ui/nativewind-utils": "^1.0.26",
    "@gluestack-ui/overlay": "^0.1.22",
+    "@gluestack-ui/select": "^0.1.31",
+    "@gluestack-ui/textarea": "^0.1.25",
    "@gluestack-ui/toast": "^1.0.9",
+    "@legendapp/motion": "^2.4.0",
    "@tanstack/react-query": "^5.74.4",
    "axios": "^1.8.4",
    "babel-plugin-module-resolver": "^5.0.2",
Author	SHA1	Message	Date
Patryk	53be0b2f50	init simple create	2025-04-29 19:42:06 +02:00
Patryk	ba07581f31	init add Notice	2025-04-26 00:43:45 +02:00
Patryk	ada1fa40db	add input component	2025-04-25 19:26:11 +02:00