@factorialco/f0-react-native 0.23.0 → 0.24.0

package/src/icons/modules/Tasks.tsx

@@ -1,6 +1,6 @@
-import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-import { Ref, forwardRef } from "react";
+import { Ref, forwardRef } from "react"
+import Svg, { Path } from "react-native-svg"
+import type { SvgProps } from "react-native-svg"
 const SvgTasks = (props: SvgProps, ref: Ref<Svg>) => (
   <Svg
     fill="none"
@@ -16,6 +16,6 @@ const SvgTasks = (props: SvgProps, ref: Ref<Svg>) => (
       clipRule="evenodd"
     />
   </Svg>
-);
-const ForwardRef = forwardRef(SvgTasks);
-export default ForwardRef;
+)
+const ForwardRef = forwardRef(SvgTasks)
+export default ForwardRef

package/src/icons/modules/TimeOff.tsx

@@ -1,6 +1,6 @@
-import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-import { Ref, forwardRef } from "react";
+import { Ref, forwardRef } from "react"
+import Svg, { Path } from "react-native-svg"
+import type { SvgProps } from "react-native-svg"
 const SvgTimeOff = (props: SvgProps, ref: Ref<Svg>) => (
   <Svg
     fill="none"
@@ -16,6 +16,6 @@ const SvgTimeOff = (props: SvgProps, ref: Ref<Svg>) => (
       clipRule="evenodd"
     />
   </Svg>
-);
-const ForwardRef = forwardRef(SvgTimeOff);
-export default ForwardRef;
+)
+const ForwardRef = forwardRef(SvgTimeOff)
+export default ForwardRef

package/src/icons/modules/TimeTracking.tsx

@@ -1,6 +1,6 @@
-import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-import { Ref, forwardRef } from "react";
+import { Ref, forwardRef } from "react"
+import Svg, { Path } from "react-native-svg"
+import type { SvgProps } from "react-native-svg"
 const SvgTimeTracking = (props: SvgProps, ref: Ref<Svg>) => (
   <Svg
     fill="none"
@@ -20,6 +20,6 @@ const SvgTimeTracking = (props: SvgProps, ref: Ref<Svg>) => (
       d="M6.336 5.836a.9.9 0 1 0-1.272-1.272l-1.8 1.8a.9.9 0 0 0 1.272 1.272zM18.936 4.564a.9.9 0 0 0-1.272 1.272l1.8 1.8a.9.9 0 0 0 1.272-1.272z"
     />
   </Svg>
-);
-const ForwardRef = forwardRef(SvgTimeTracking);
-export default ForwardRef;
+)
+const ForwardRef = forwardRef(SvgTimeTracking)
+export default ForwardRef

package/src/icons/modules/Trainings.tsx

@@ -1,6 +1,6 @@
-import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-import { Ref, forwardRef } from "react";
+import { Ref, forwardRef } from "react"
+import Svg, { Path } from "react-native-svg"
+import type { SvgProps } from "react-native-svg"
 const SvgTrainings = (props: SvgProps, ref: Ref<Svg>) => (
   <Svg
     fill="none"
@@ -14,6 +14,6 @@ const SvgTrainings = (props: SvgProps, ref: Ref<Svg>) => (
       d="M12 6.83C10.748 6.076 9.515 5.3 8.277 5.3c-1.414 0-2.715.547-3.943 1.53A.89.89 0 0 0 4 7.524v8.373c0 .765.464 1.328.998 1.615.524.282 1.198.35 1.81.094 1.354-.569 2.815-.38 4.698.88.299.199.689.199.988 0 1.883-1.26 3.344-1.449 4.699-.88.61.256 1.285.188 1.81-.094.533-.287.997-.85.997-1.615V7.524a.89.89 0 0 0-.334-.694c-1.228-.983-2.529-1.53-3.943-1.53-1.239 0-2.471.776-3.723 1.53"
     />
   </Svg>
-);
-const ForwardRef = forwardRef(SvgTrainings);
-export default ForwardRef;
+)
+const ForwardRef = forwardRef(SvgTrainings)
+export default ForwardRef

package/src/icons/modules/Treasury.tsx

@@ -1,6 +1,6 @@
-import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-import { Ref, forwardRef } from "react";
+import { Ref, forwardRef } from "react"
+import Svg, { Path } from "react-native-svg"
+import type { SvgProps } from "react-native-svg"
 const SvgTreasury = (props: SvgProps, ref: Ref<Svg>) => (
   <Svg
     fill="none"
@@ -14,6 +14,6 @@ const SvgTreasury = (props: SvgProps, ref: Ref<Svg>) => (
       d="M11.77 3.054c.151-.036.309-.036.46 0l7.5 1.765a1 1 0 0 1 .77.973V8a1 1 0 0 1-1 1h-.85v7h.85a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h.85V9H4.5a1 1 0 0 1-1-1V5.792a1 1 0 0 1 .77-.973zM10.65 16h2.7V9h-2.7zm4 0h2.7V9h-2.7zm-8 0h2.7V9h-2.7z"
     />
   </Svg>
-);
-const ForwardRef = forwardRef(SvgTreasury);
-export default ForwardRef;
+)
+const ForwardRef = forwardRef(SvgTreasury)
+export default ForwardRef

package/src/icons/modules/Workflows.tsx

@@ -1,6 +1,6 @@
-import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-import { Ref, forwardRef } from "react";
+import { Ref, forwardRef } from "react"
+import Svg, { Path } from "react-native-svg"
+import type { SvgProps } from "react-native-svg"
 const SvgWorkflows = (props: SvgProps, ref: Ref<Svg>) => (
   <Svg
     fill="none"
@@ -14,6 +14,6 @@ const SvgWorkflows = (props: SvgProps, ref: Ref<Svg>) => (
       d="M17.42 4.455a1.125 1.125 0 0 0-1.59 1.59l.329.33h-3.85A4.5 4.5 0 0 0 8.491 8.49l-.83 1.328a2.25 2.25 0 0 1-1.908 1.057H3.125a1.125 1.125 0 0 0 0 2.25h2.63c.775 0 1.496.4 1.907 1.057l.83 1.328a4.5 4.5 0 0 0 3.816 2.115h3.851l-.33.33a1.125 1.125 0 0 0 1.592 1.59l2.25-2.25c.439-.439.439-1.151 0-1.59l-2.25-2.25a1.125 1.125 0 0 0-1.591 1.59l.329.33h-3.85a2.25 2.25 0 0 1-1.909-1.057l-.83-1.328a4.5 4.5 0 0 0-.839-.99c.322-.284.606-.616.84-.99l.83-1.328a2.25 2.25 0 0 1 1.907-1.057h3.851l-.33.33a1.125 1.125 0 0 0 1.592 1.59l2.25-2.25c.439-.439.439-1.151 0-1.59z"
     />
   </Svg>
-);
-const ForwardRef = forwardRef(SvgWorkflows);
-export default ForwardRef;
+)
+const ForwardRef = forwardRef(SvgWorkflows)
+export default ForwardRef

package/src/icons/modules/index.ts

@@ -1,40 +1,41 @@
-export { default as Benefits } from "./Benefits";
-export { default as Calendar } from "./Calendar";
-export { default as Cards } from "./Cards";
-export { default as ClockIn } from "./ClockIn";
-export { default as Complaints } from "./Complaints";
-export { default as Discover } from "./Discover";
-export { default as Documents } from "./Documents";
-export { default as Engagement } from "./Engagement";
-export { default as Finance } from "./Finance";
-export { default as Goals } from "./Goals";
-export { default as Home } from "./Home";
-export { default as Hub } from "./Hub";
-export { default as ItManagement } from "./ItManagement";
-export { default as Inbox } from "./Inbox";
-export { default as Kudos } from "./Kudos";
-export { default as Meetings } from "./Meetings";
-export { default as MyDocuments } from "./MyDocuments";
-export { default as Organization } from "./Organization";
-export { default as Overviews } from "./Overviews";
-export { default as Pages } from "./Pages";
-export { default as Payroll } from "./Payroll";
-export { default as Performance } from "./Performance";
-export { default as Profile } from "./Profile";
-export { default as Projects } from "./Projects";
-export { default as Recruitment } from "./Recruitment";
-export { default as Reports } from "./Reports";
-export { default as SalaryAdvance } from "./SalaryAdvance";
-export { default as Sales } from "./Sales";
-export { default as Settings } from "./Settings";
-export { default as Shifts } from "./Shifts";
-export { default as Social } from "./Social";
-export { default as Software } from "./Software";
-export { default as Spaces } from "./Spaces";
-export { default as Spending } from "./Spending";
-export { default as Tasks } from "./Tasks";
-export { default as TimeOff } from "./TimeOff";
-export { default as TimeTracking } from "./TimeTracking";
-export { default as Trainings } from "./Trainings";
-export { default as Treasury } from "./Treasury";
-export { default as Workflows } from "./Workflows";
+export { default as Benefits } from "./Benefits"
+export { default as Calendar } from "./Calendar"
+export { default as Cards } from "./Cards"
+export { default as ClockIn } from "./ClockIn"
+export { default as Complaints } from "./Complaints"
+export { default as Discover } from "./Discover"
+export { default as Documents } from "./Documents"
+export { default as Engagement } from "./Engagement"
+export { default as Finance } from "./Finance"
+export { default as Goals } from "./Goals"
+export { default as Home } from "./Home"
+export { default as Hub } from "./Hub"
+export { default as ItManagement } from "./ItManagement"
+export { default as Inbox } from "./Inbox"
+export { default as Kudos } from "./Kudos"
+export { default as Marketplace } from "./Marketplace"
+export { default as Meetings } from "./Meetings"
+export { default as MyDocuments } from "./MyDocuments"
+export { default as Organization } from "./Organization"
+export { default as Overviews } from "./Overviews"
+export { default as Pages } from "./Pages"
+export { default as Payroll } from "./Payroll"
+export { default as Performance } from "./Performance"
+export { default as Profile } from "./Profile"
+export { default as Projects } from "./Projects"
+export { default as Recruitment } from "./Recruitment"
+export { default as Reports } from "./Reports"
+export { default as SalaryAdvance } from "./SalaryAdvance"
+export { default as Sales } from "./Sales"
+export { default as Settings } from "./Settings"
+export { default as Shifts } from "./Shifts"
+export { default as Social } from "./Social"
+export { default as Software } from "./Software"
+export { default as Spaces } from "./Spaces"
+export { default as Spending } from "./Spending"
+export { default as Tasks } from "./Tasks"
+export { default as TimeOff } from "./TimeOff"
+export { default as TimeTracking } from "./TimeTracking"
+export { default as Trainings } from "./Trainings"
+export { default as Treasury } from "./Treasury"
+export { default as Workflows } from "./Workflows"

package/src/icons/types.ts

@@ -1,9 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from "react";
-import { SvgProps } from "react-native-svg";
+import { ForwardRefExoticComponent, RefAttributes } from "react"
+import { SvgProps } from "react-native-svg"
 
 export type IconComponent = ForwardRefExoticComponent<
   SvgProps &
     RefAttributes<SVGSVGElement> & {
-      className?: string;
+      className?: string
     }
->;
+>

package/src/index.ts

@@ -1,8 +1,8 @@
 // Export components
-export * from "./components/exports";
+export * from "./components/exports"
 
 // Export icons
-export * from "./icons";
+export * from "./icons"
 
 // Export utilities
-export { cn } from "./lib/utils";
+export { cn } from "./lib/utils"

package/src/lib/date.ts

@@ -8,95 +8,95 @@ import {
   startOfMonth,
   startOfWeek,
   startOfYear,
-} from "date-fns";
+} from "date-fns"
 
 export function formatTime(date: Date) {
-  return format(date, "p");
+  return format(date, "p")
 }
 
 export function formatTime24Hours(date: Date) {
-  return format(date, "HH:mm");
+  return format(date, "HH:mm")
 }
 
 export function getAbbreviateMonth(date: Date) {
-  return format(date, "LLL");
+  return format(date, "LLL")
 }
 
 export function getDayOfMonth(date: Date) {
-  return date.getDate();
+  return date.getDate()
 }
 
 export function getAgo(date: Date, addSuffix = true) {
-  return formatDistanceToNowStrict(date, { addSuffix });
+  return formatDistanceToNowStrict(date, { addSuffix })
 }
 
 type GetDisplayDateBasedOnDurationOptions = {
-  yesterdayRelative?: boolean;
-};
+  yesterdayRelative?: boolean
+}
 
 export function getDisplayDateBasedOnDuration(
   date: Date,
-  { yesterdayRelative = true }: GetDisplayDateBasedOnDurationOptions = {},
+  { yesterdayRelative = true }: GetDisplayDateBasedOnDurationOptions = {}
 ) {
   if (isToday(date)) {
-    return getAgo(date);
+    return getAgo(date)
   }
 
   if (isYesterday(date)) {
-    return yesterdayRelative ? getAgo(date) : format(date, "p");
+    return yesterdayRelative ? getAgo(date) : format(date, "p")
   }
 
-  return format(date, "PPPp");
+  return format(date, "PPPp")
 }
 
-type DateGroup = "today" | "yesterday" | "lastWeek" | "lastMonth" | number;
+type DateGroup = "today" | "yesterday" | "lastWeek" | "lastMonth" | number
 
 export const categorizeItemsByDate = <
   T extends Record<D, Date>,
   D extends keyof T,
 >(
   items: T[],
-  dateField: D,
+  dateField: D
 ) => {
   const groups: Record<DateGroup, T[]> = {
     today: [],
     yesterday: [],
     lastWeek: [],
     lastMonth: [],
-  };
+  }
 
   items.forEach((item) => {
-    const date = item[dateField];
+    const date = item[dateField]
 
-    const diffDays = Math.abs(differenceInDays(date, new Date()));
+    const diffDays = Math.abs(differenceInDays(date, new Date()))
 
     if (isToday(date)) {
-      groups.today.push(item);
+      groups.today.push(item)
     } else if (isYesterday(date)) {
-      groups.yesterday.push(item);
+      groups.yesterday.push(item)
     } else if (diffDays <= 7) {
-      groups.lastWeek.push(item);
+      groups.lastWeek.push(item)
     } else if (diffDays <= 30) {
-      groups.lastMonth.push(item);
+      groups.lastMonth.push(item)
     } else {
-      groups[date.getFullYear()].push(item);
+      groups[date.getFullYear()].push(item)
     }
-  });
+  })
 
-  return groups;
-};
+  return groups
+}
 
-export type DateGranularity = "day" | "week" | "month" | "year";
+export type DateGranularity = "day" | "week" | "month" | "year"
 const dateGranularityFunction: Record<DateGranularity, (date: Date) => Date> = {
   day: startOfDay,
   month: startOfMonth,
   week: startOfWeek,
   year: startOfYear,
-};
+}
 
 export function setDateGranularity(date: Date, granularity: DateGranularity) {
   return (
     dateGranularityFunction[granularity]?.(date) ||
     new Error(`Invalid date granularity ${granularity}`)
-  );
+  )
 }

package/src/lib/emojis.tsx

@@ -1,25 +1,26 @@
-import { Text, View } from "react-native";
-import { cn } from "./utils";
-import { parse } from "twemoji-parser";
-import { SvgUri } from "react-native-svg";
-import { useState } from "react";
+import { useState } from "react"
+import { Text, View } from "react-native"
+import { SvgUri } from "react-native-svg"
+import { parse } from "twemoji-parser"
+
+import { cn } from "./utils"
 
 interface ParseObject {
-  url: string;
-  indices: [number, number];
-  text: string;
+  url: string
+  indices: [number, number]
+  text: string
 }
 
 export interface EmojiImageProps {
-  size?: { icon: string; text: string };
-  className?: string;
-  emoji: string;
+  size?: { icon: string; text: string }
+  className?: string
+  emoji: string
 }
 
 export function EmojiImage({ emoji, size, className }: EmojiImageProps) {
-  const emojiEntity = parseEmoji(emoji);
+  const emojiEntity = parseEmoji(emoji)
 
-  const [error, setError] = useState(false);
+  const [error, setError] = useState(false)
 
   return emojiEntity && !error ? (
     <View className={size?.icon}>
@@ -34,14 +35,14 @@ export function EmojiImage({ emoji, size, className }: EmojiImageProps) {
     <Text className={cn(size?.text, className)} key={emoji}>
       {emoji}
     </Text>
-  );
+  )
 }
 
 const parseEmoji = (emoji: string): ParseObject | null => {
   const [entity] = parse(emoji, {
     buildUrl: (codePoints: string) =>
       `https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/${codePoints}.svg`,
-  });
+  })
 
-  return entity || null;
-};
+  return entity || null
+}

package/src/lib/text.ts

@@ -1,31 +1,31 @@
-import { useEffect } from "react";
+import { useEffect } from "react"
 
 type Rules = {
-  disallowEmpty?: boolean;
-  minLength?: number;
-  maxLength?: number;
-};
+  disallowEmpty?: boolean
+  minLength?: number
+  maxLength?: number
+}
 
 const textFormatEnforcer = (text: string, rules: Rules) => {
   if (rules.disallowEmpty && text.length === 0) {
-    throw Error("You need to provide some text that is not empty");
+    throw Error("You need to provide some text that is not empty")
   }
 
   if (rules.maxLength !== undefined && text.length > rules.maxLength) {
     throw Error(
-      `"${text}" should have no more than ${rules.maxLength} characters`,
-    );
+      `"${text}" should have no more than ${rules.maxLength} characters`
+    )
   }
 
   if (rules.minLength !== undefined && text.length < rules.minLength) {
-    throw Error(`"${text}" should have at least ${rules.minLength} characters`);
+    throw Error(`"${text}" should have at least ${rules.minLength} characters`)
   }
-};
+}
 
 export const useTextFormatEnforcer = (text?: string, rules?: Rules) => {
   useEffect(() => {
     if (text !== undefined && rules) {
-      textFormatEnforcer(text, rules);
+      textFormatEnforcer(text, rules)
     }
-  }, [text, rules]);
-};
+  }, [text, rules])
+}

package/src/lib/utils.ts

@@ -1,7 +1,9 @@
-import { cnMerge, type CnOptions } from "tailwind-variants";
+import { cnMerge, type CnOptions } from "tailwind-variants"
 
 export function cn(...args: CnOptions): string {
-  return cnMerge(args)({
-    twMerge: true,
-  }) ?? "";
+  return (
+    cnMerge(args)({
+      twMerge: true,
+    }) ?? ""
+  )
 }

package/src/styles/theme.css

@@ -40,6 +40,42 @@
   --spacing-2_5: 10px;
   --spacing-3_5: 14px;
 
+  /* Typography Scale (exact from f0 core) */
+  --text-xs: 0.625rem;
+  --leading-xs: 0.75rem;
+
+  --text-sm: 0.75rem;
+  --leading-sm: 1rem;
+
+  --text-base: 0.875rem;
+  --leading-base: 1.25rem;
+  --tracking-base: -0.005em;
+
+  /* text-md alias for legacy usage */
+  --text-md: var(--text-base);
+  --leading-md: var(--leading-base);
+  --tracking-md: var(--tracking-base);
+
+  --text-lg: 1rem;
+  --leading-lg: 1.5rem;
+  --tracking-lg: -0.01em;
+
+  --text-xl: 1.125rem;
+  --leading-xl: 1.75rem;
+  --tracking-xl: -0.01em;
+
+  --text-2xl: 1.375rem;
+  --leading-2xl: 1.75rem;
+  --tracking-2xl: -0.01em;
+
+  --text-3xl: 1.625rem;
+  --leading-3xl: 2rem;
+  --tracking-3xl: -0.01em;
+
+  --text-4xl: 2.25rem;
+  --leading-4xl: 2.5rem;
+  --tracking-4xl: -0.02em;
+
   /* Base Colors - Static values that don't change between themes */
   --color-white-3: hsla(0, 0%, 100%, 0.03);
   --color-white-5: hsla(0, 0%, 100%, 0.05);

package/src/ui/avatar.tsx

@@ -1,11 +1,12 @@
-import { tv } from "tailwind-variants";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { View, Text, Image } from "react-native";
+import * as React from "react"
+import { View, Text, Image } from "react-native"
+import { tv } from "tailwind-variants"
 
-export const sizes = ["xsmall", "small", "medium", "large", "xlarge"] as const;
+import { cn } from "../lib/utils"
 
-export const type = ["base", "rounded"] as const;
+export const sizes = ["xsmall", "small", "medium", "large", "xlarge"] as const
+
+export const type = ["base", "rounded"] as const
 
 export const color = [
   "viridian",
@@ -19,7 +20,7 @@ export const color = [
   "flubber",
   "indigo",
   "camel",
-] as const;
+] as const
 
 const textSizes = {
   xsmall: "text-sm",
@@ -27,7 +28,7 @@ const textSizes = {
   medium: "text-md",
   large: "text-2xl",
   xlarge: "text-3xl",
-};
+}
 
 const avatarVariants = tv({
   base: "flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold",
@@ -62,20 +63,20 @@ const avatarVariants = tv({
     type: "base",
     color: "viridian",
   },
-});
+})
 
 type AvatarProps = React.ComponentPropsWithoutRef<typeof View> & {
-  size?: (typeof sizes)[number];
-  type?: (typeof type)[number];
-  color?: (typeof color)[number];
-};
+  size?: (typeof sizes)[number]
+  type?: (typeof type)[number]
+  color?: (typeof color)[number]
+}
 
 const Avatar = ({ size, type, color, className, ...props }: AvatarProps) => (
   <View
     className={cn(avatarVariants({ size, type, color }), className)}
     {...props}
   />
-);
+)
 
 const AvatarImage = ({
   className,
@@ -83,8 +84,8 @@ const AvatarImage = ({
   src,
   ...props
 }: React.ComponentPropsWithoutRef<typeof View> & {
-  src?: string;
-  alt: string;
+  src?: string
+  alt: string
 }) => (
   <View className={cn("aspect-square h-full w-full", className)} {...props}>
     <Image
@@ -95,19 +96,19 @@ const AvatarImage = ({
       aria-label={alt}
     />
   </View>
-);
+)
 
 const AvatarFallback = ({
   className,
   size = "medium",
   ...props
 }: React.ComponentPropsWithoutRef<typeof Text> & {
-  size?: (typeof sizes)[number];
+  size?: (typeof sizes)[number]
 }) => (
   <Text
     className={cn("text-f1-foreground-inverse/90", textSizes[size], className)}
     {...props}
   />
-);
+)
 
-export { Avatar, AvatarFallback, AvatarImage };
+export { Avatar, AvatarFallback, AvatarImage }