Dialog styles & arrow right icon (#3729)

* segmentcontrol ui & loading prop for add-ons of Input

* dialog styles & arrow right icon

packages/components/src/Dialog/index.tsx

@@ -126,7 +126,7 @@ function DialogFrame({
   const keyboardHeight = useKeyboardHeight();
 
   const content = (
-    <Stack p="$5" pb={bottom || '$5'}>
+    <Stack {...(bottom && { pb: bottom })}>
       {icon && (
         <Stack
           p="$3"
@@ -140,7 +140,7 @@ function DialogFrame({
           />
         </Stack>
       )}
-      <XStack alignItems="flex-start">
+      <XStack alignItems="flex-start" p="$5">
         <Stack flex={1} pr="$2.5">
           {title && (
             <Text variant="$headingXl" py="$px">
@@ -159,11 +159,11 @@ function DialogFrame({
           onPress={handleCancelButtonPress}
         />
       </XStack>
-      {renderContent && <YStack pt="$5">{renderContent}</YStack>}
+      {renderContent && <YStack px="$5" pb="$5">{renderContent}</YStack>}
       {renderFooter !== undefined ? (
         renderFooter
       ) : (
-        <XStack justifyContent="center" pt="$5">
+        <XStack p="$5" pt="$0">
           <Button
             flex={1}
             $md={{

packages/components/src/Icon/Icons.tsx

@@ -138,6 +138,7 @@ const icons = {
   ArrowPathLeftOutline: () => import("./react/outline/ArrowPathLeft"),
   ArrowPathRightOutline: () => import("./react/outline/ArrowPathRight"),
   ArrowPathUpOutline: () => import("./react/outline/ArrowPathUp"),
+  ArrowRightOutline: () => import("./react/outline/ArrowRight"),
   ArrowRightCircleOutline: () => import("./react/outline/ArrowRightCircle"),
   ArrowTopOutline: () => import("./react/outline/ArrowTop"),
   ArrowTopCircleOutline: () => import("./react/outline/ArrowTopCircle"),
@@ -922,6 +923,7 @@ const icons = {
   ArrowPathLeftSolid: () => import("./react/solid/ArrowPathLeft"),
   ArrowPathRightSolid: () => import("./react/solid/ArrowPathRight"),
   ArrowPathUpSolid: () => import("./react/solid/ArrowPathUp"),
+  ArrowRightSolid: () => import("./react/solid/ArrowRight"),
   ArrowRightCircleSolid: () => import("./react/solid/ArrowRightCircle"),
   ArrowTopSolid: () => import("./react/solid/ArrowTop"),
   ArrowTopCircleSolid: () => import("./react/solid/ArrowTopCircle"),

packages/components/src/Icon/react/outline/ArrowRight.tsx

@@ -0,0 +1,12 @@
+import Svg, { SvgProps, Path } from 'react-native-svg';
+const SvgArrowRight = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m18.375 13.04-4.293 4.292a1 1 0 0 0 1.414 1.414l4.586-4.585a3 3 0 0 0 0-4.243l-4.586-4.586a1 1 0 1 0-1.414 1.414l4.293 4.293H4.039a1 1 0 0 0 0 2h14.336Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);
+export default SvgArrowRight;

packages/components/src/Icon/react/outline/index.ts

@@ -53,6 +53,7 @@ export { default as ArrowPathLeft } from './ArrowPathLeft';
 export { default as ArrowPathRight } from './ArrowPathRight';
 export { default as ArrowPathUp } from './ArrowPathUp';
 export { default as ArrowRightCircle } from './ArrowRightCircle';
+export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTopCircle } from './ArrowTopCircle';
 export { default as ArrowTopLeft } from './ArrowTopLeft';
 export { default as ArrowTopRight } from './ArrowTopRight';

packages/components/src/Icon/react/solid/ArrowRight.tsx

@@ -0,0 +1,12 @@
+import Svg, { SvgProps, Path } from 'react-native-svg';
+const SvgArrowRight = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m18.375 13.04-4.293 4.292a1 1 0 0 0 1.414 1.414l4.586-4.585a3 3 0 0 0 0-4.243l-4.586-4.586a1 1 0 1 0-1.414 1.414l4.293 4.293H4.039a1 1 0 0 0 0 2h14.336Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);
+export default SvgArrowRight;

packages/components/src/Icon/react/solid/index.ts

@@ -53,6 +53,7 @@ export { default as ArrowPathLeft } from './ArrowPathLeft';
 export { default as ArrowPathRight } from './ArrowPathRight';
 export { default as ArrowPathUp } from './ArrowPathUp';
 export { default as ArrowRightCircle } from './ArrowRightCircle';
+export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTopCircle } from './ArrowTopCircle';
 export { default as ArrowTopLeft } from './ArrowTopLeft';
 export { default as ArrowTopRight } from './ArrowTopRight';

packages/components/svg/outline/arrow-right.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd"
+    d="m18.375 13.04-4.293 4.292a1 1 0 0 0 1.414 1.414l4.586-4.585a3 3 0 0 0 0-4.243l-4.586-4.586a1 1 0 1 0-1.414 1.414l4.293 4.293H4.039a1 1 0 0 0 0 2h14.336Z"
+    clip-rule="evenodd" />
+</svg>

packages/components/svg/solid/arrow-right.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd"
+    d="m18.375 13.04-4.293 4.292a1 1 0 0 0 1.414 1.414l4.586-4.585a3 3 0 0 0 0-4.243l-4.586-4.586a1 1 0 1 0-1.414 1.414l4.293 4.293H4.039a1 1 0 0 0 0 2h14.336Z"
+    clip-rule="evenodd" />
+</svg>

packages/kit/src/views/Components/stories/Input.tsx

@@ -105,7 +105,7 @@ const InputGallery = () => (
                   },
                 },
                 {
-                  iconName: 'TouchIdOutline',
+                  iconName: 'ArrowRightOutline',
                   onPress: () => {
                     console.log('clicked');
                   },