fluent-styles 1.53.0 → 1.55.0

package/src/icons/info.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Svg, { Path , Circle} from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Info = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth={strokeWidth} fill="none" />
+        <Path d="M12 16v-4" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+        <Circle cx="12" cy="8" r="0.5" fill={color} stroke={color} strokeWidth={strokeWidth} />
+      </Svg>
+    </StyleShape>
+  )
+)
+Info.displayName = 'Info'
+
+export { Info }

package/src/icons/leftChevron.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const ChevronLeft = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M15 18l-6-6 6-6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+ChevronLeft.displayName = 'ChevronLeft'
+
+export { ChevronLeft }

package/src/icons/rightChevron.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const ChevronRight = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M9 18l6-6-6-6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+ChevronRight.displayName = 'ChevronRight'
+
+export { ChevronRight }

package/src/icons/save.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Save = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        <Path d="M17 21v-8H7v8" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        <Path d="M7 3v5h8" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+Save.displayName = 'Save'
+export { Save }

package/src/icons/success.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { Path, Circle } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Success = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth={strokeWidth} fill="none" />
+        <Path d="M8 12l3 3 5-6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+Success.displayName = 'Success'
+export { Success }

package/src/icons/upChevron.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const ChevronUp = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M18 15l-6-6-6 6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+ChevronUp.displayName = 'ChevronUp'
+
+export { ChevronUp }

package/src/icons/warning.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Svg, { Path , Circle} from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Warning = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        <Path d="M12 9v4" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+        <Circle cx="12" cy="17" r="0.5" fill={color} stroke={color} strokeWidth={strokeWidth} />
+      </Svg>
+    </StyleShape>
+  )
+)
+Warning.displayName = 'Warning'
+
+export { Warning }

package/src/image/index.tsx

@@ -0,0 +1,45 @@
+
+import {
+  Image,
+  ImageBackground,
+  ImageProps,
+  ImageBackgroundProps,
+  ImageStyle,
+  DimensionValue,
+} from 'react-native';
+import { styled } from '../utiles/styled';
+import React from 'react';
+import { viewStyleVariants } from '../utiles/viewStyleVariants';
+
+type StyledImageProps = ImageProps & ImageStyle 
+
+type StyledImageBackgroundProps = ImageBackgroundProps & ImageStyle;
+const StyledImageBackground = styled<StyledImageBackgroundProps>(ImageBackground, {
+    base: {
+        position: 'relative',
+        borderWidth: 0,
+        resizeMode: 'cover',
+        
+    } as ImageStyle,
+    variants: {
+        ...viewStyleVariants,
+    }
+});
+
+interface _StyledImageProps extends Omit<StyledImageProps, 'height' | 'width'> {
+    cycle?: boolean;
+    size?: DimensionValue;
+    height?: DimensionValue;
+    width?: DimensionValue;
+}   
+
+const StyledImage = React.forwardRef<React.ComponentRef<typeof Image>, _StyledImageProps>(({ height = 100, width = 100, ...props }: _StyledImageProps, ref) => {
+    const { cycle, size, ...rest } = props;
+    const sizeStyle: ImageStyle = cycle
+        ? { height: Number(size) as DimensionValue, width: Number(size) as DimensionValue, borderRadius: 9999  }
+        : { height: height as DimensionValue, width: width as DimensionValue };
+    return <Image {...rest} style={[props.style, sizeStyle]} ref={ref} />;
+});
+
+export { StyledImage, StyledImageBackground };
+export type { StyledImageProps, StyledImageBackgroundProps };

package/src/index.ts

@@ -0,0 +1,72 @@
+export { PopoverMode, PopoverPlacement } from 'react-native-popover-view'
+export { theme, lightColors, darkColors, palettes, fontStyles, } from './utiles/theme'
+export { styled } from './utiles/styled'
+export { Stack, type StackProps } from './stack'
+export { StyledText, type StyledTextProps } from './text'
+export { StyledSafeAreaProvider, type StyledSafeAreaProviderProps } from './safeAreaProvider'
+export { StyledSafeAreaView, type StyledSafeAreaViewProps } from './safeAreaView'
+export { StyledScrollView, type StyledScrollViewProps } from './scrollView'
+export { StyleShape, type ShapeProps } from './shape'
+export { StyledPage, type StyledPageProps } from './page'
+export { StyledHeader, type HeaderProps } from './header'
+export { StyledSpacer, type SpacerProps } from './spacer'
+export { StyledCard, type StyledCardProps } from './card'
+export * from './icons'
+export { Switch, SWITCH_COLORS_DEFAULT, SWITCH_SIZES, type SwitchProps } from './switch'
+export { StyledImage, StyledImageBackground, type StyledImageProps, type StyledImageBackgroundProps } from './image'
+export { StyledPressable, type StyledPressableProps } from './pressable'
+export { StyledButton, type StyledButtonProps } from './button'
+export { StyledDivider, type DividerProps } from './divider'
+export * from './input'
+export { StyledCheckBox, type StyledCheckBoxProps } from './checkBox'
+export { StyledBadge, type StyledBadgeProps } from './badge'
+export { BadgeWithIcon, type BadgeWithIconProps } from './badge'
+export { BadgeIcon, type BadgeIconProps } from './badge'
+export { Spinner, type SpinnerProps } from './loading'
+export { Circular, type CircularProps } from './loading'
+export { StyledDialog, StyledConfirmDialog, StyledOkDialog, type StyledDialogProps, type StyledConfirmDialogProps, type StyledOkDialogProps } from './dialog'
+export { StyledDropdown, StyledMultiSelectDropdown, type StyledDropdownProps, type StyledMultiSelectDropdownProps, type DropdownOptionItem } from './dropdown'
+export { GlobalPortalProvider, getPositionStyles, PortalInstance, PortalManager, usePortal, PortalRenderer, type Position, type PortalNode, type PortalContextType } from './portal'
+
+export { useToast } from './toast/useToast'
+export { useNotification } from './notification/useNotification'
+export { useLoader } from './loading/useLoader'
+export { useLoaderBinding } from './loading/useLoaderBinding'
+export { Loader, LOADER_DARK, LOADER_LIGHT, type LoaderColors } from './loading/loader'
+export { useDialogue } from './dialog/useDialogue'
+export { useActionSheet } from './actionSheet/useActionSheet'
+
+export {
+  toastService,
+  notificationService,
+  loaderService,
+  dialogueService,
+  actionSheetService,
+} from './services'
+
+export type {
+  ToastOptions,
+  NotificationOptions,
+  LoaderOptions,
+  DialogueOptions,
+  ActionSheetOptions,
+} from './services'
+
+export * from './collapsible'
+export { StyledSeperator, type SeperatorProps } from './seperator'
+export * from './tabBar'
+export * from './popup'
+export * from './drawer'
+export * from './circularProgress'
+export * from './timeline'
+export * from './barChart'
+export * from './chips'
+export * from './timeline'
+export * from './radio'
+export * from './progressBar'
+export * from './slider'
+export * from './datePicker'
+export * from './skeleton'
+export * from './emptyState'
+export * from './searchBar'
+