@factorialco/f0-react-native 0.26.0 → 0.28.0

package/src/components/primitives/F0Text/F0Text/__tests__/__snapshots__/F0Text.spec.tsx.snap

@@ -0,0 +1,325 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`F0Text Snapshots renders all color variants: color-accent 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-accent text-left"
+>
+  accent
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-critical 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-critical text-left"
+>
+  critical
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-default 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  default
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-disabled 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-disabled text-left"
+>
+  disabled
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-info 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-info text-left"
+>
+  info
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-inverse 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-inverse text-left"
+>
+  inverse
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-inverse-secondary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-inverse-secondary text-left"
+>
+  inverse-secondary
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-positive 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-positive text-left"
+>
+  positive
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-secondary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-secondary text-left"
+>
+  secondary
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-selected 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-selected text-left"
+>
+  selected
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-tertiary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-tertiary text-left"
+>
+  tertiary
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-warning 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-warning text-left"
+>
+  warning
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-md-default 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-normal text-f0-foreground text-left"
+>
+  body-md-default
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-md-medium 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-medium text-f0-foreground text-left"
+>
+  body-md-medium
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-md-semibold 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-semibold text-f0-foreground text-left"
+>
+  body-md-semibold
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-sm-default 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  body-sm-default
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-sm-medium 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-medium text-f0-foreground text-left"
+>
+  body-sm-medium
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-sm-semibold 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-semibold text-f0-foreground text-left"
+>
+  body-sm-semibold
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-xs-medium 1`] = `
+<Text
+  className="text-[12px] leading-[16px] font-medium text-f0-foreground text-left"
+>
+  body-xs-medium
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-lg 1`] = `
+<Text
+  className="text-[24px] leading-[32px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-lg
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-md 1`] = `
+<Text
+  className="text-[20px] leading-[28px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-md
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-sm 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-semibold text-f0-foreground text-left"
+>
+  heading-sm
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-xl 1`] = `
+<Text
+  className="text-[36px] leading-[40px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-xl
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-center 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-center"
+>
+  center
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-justify 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-justify"
+>
+  justify
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-left 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  left
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-right 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-right"
+>
+  right
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with default variant (body-sm-default) 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  Default text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with numberOfLines truncation 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+  ellipsizeMode="tail"
+  numberOfLines={2}
+>
+  This is a very long text that should be truncated after two lines with an ellipsis at the end
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text decorations: decoration-line-through 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left line-through"
+>
+  line-through
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text decorations: decoration-none 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  none
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text decorations: decoration-underline 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left underline"
+>
+  underline
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-capitalize 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left capitalize"
+>
+  capitalize
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-lowercase 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left lowercase"
+>
+  lowercase
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-none 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  none
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-uppercase 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left uppercase"
+>
+  uppercase
+   text
+</Text>
+`;

package/src/components/primitives/F0Text/F0Text/index.ts

@@ -0,0 +1,22 @@
+/**
+ * F0Text - Text primitive component
+ *
+ * @see F0Text.md for documentation
+ */
+
+export { F0Text } from "./F0Text"
+export type {
+  F0TextProps,
+  TypographyVariant,
+  TextColor,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+} from "./F0Text"
+export {
+  TYPOGRAPHY_VARIANTS,
+  TEXT_COLORS,
+  TEXT_ALIGN,
+  TEXT_DECORATIONS,
+  TEXT_TRANSFORMS,
+} from "./F0Text"

package/src/components/primitives/F0Text/index.ts

@@ -0,0 +1,26 @@
+/**
+ * F0Text - Text primitive components
+ *
+ * @see F0Text/F0Text.md for documentation
+ * @see AnimatedF0Text/AnimatedF0Text.md for animated variant documentation
+ */
+
+export { F0Text } from "./F0Text"
+export type {
+  F0TextProps,
+  TypographyVariant,
+  TextColor,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+} from "./F0Text"
+export {
+  TYPOGRAPHY_VARIANTS,
+  TEXT_COLORS,
+  TEXT_ALIGN,
+  TEXT_DECORATIONS,
+  TEXT_TRANSFORMS,
+} from "./F0Text"
+
+export { AnimatedF0Text } from "./AnimatedF0Text"
+export type { AnimatedF0TextProps } from "./AnimatedF0Text"

package/src/index.ts

@@ -5,4 +5,4 @@ export * from "./components/exports"
 export * from "./icons"
 
 // Export utilities
-export { cn } from "./lib/utils"
+export { cn, omitProps } from "./lib/utils"

package/src/lib/__tests__/utils.spec.ts

@@ -0,0 +1,48 @@
+import { cn, omitProps } from "../utils"
+
+describe("utils", () => {
+  describe("omitProps", () => {
+    it("returns empty object when given empty object", () => {
+      expect(omitProps({}, ["style"])).toEqual({})
+    })
+
+    it("returns all props when no keys to omit", () => {
+      const props = { a: 1, b: 2, c: 3 }
+      expect(omitProps(props, [])).toEqual(props)
+    })
+
+    it("omits single key", () => {
+      const props = { a: 1, b: 2, style: { color: "red" } }
+      expect(omitProps(props, ["style"])).toEqual({ a: 1, b: 2 })
+    })
+
+    it("omits multiple keys", () => {
+      const props = { a: 1, style: { color: "red" }, className: "text-lg" }
+      expect(omitProps(props, ["style", "className"])).toEqual({ a: 1 })
+    })
+
+    it("does not mutate original object", () => {
+      const props = { a: 1, style: { color: "red" } }
+      omitProps(props, ["style"])
+      expect(props).toEqual({ a: 1, style: { color: "red" } })
+    })
+
+    it("works with readonly keys array (F0_TEXT_BANNED_PROPS pattern)", () => {
+      const BANNED = ["style"] as const
+      const props = { a: 1, style: { color: "red" } }
+      expect(omitProps(props, BANNED)).toEqual({ a: 1 })
+    })
+
+    it("ignores keys that do not exist", () => {
+      const props = { a: 1, b: 2 }
+      expect(omitProps(props, ["style", "className"])).toEqual({ a: 1, b: 2 })
+    })
+  })
+
+  describe("cn", () => {
+    it("merges class names", () => {
+      expect(cn("foo", "bar")).toContain("foo")
+      expect(cn("foo", "bar")).toContain("bar")
+    })
+  })
+})

package/src/lib/utils.ts

@@ -7,3 +7,22 @@ export function cn(...args: CnOptions): string {
     }) ?? ""
   )
 }
+
+/**
+ * Omits specified keys from an object at runtime.
+ * Used to filter blocked props (e.g. style, className) before spreading to primitives.
+ *
+ * @example
+ * omitProps(rest, ["style"])
+ * omitProps(rest, ["style", "className"])
+ */
+export function omitProps<T extends Record<string, unknown>, K extends string>(
+  obj: T,
+  keys: readonly K[]
+): Omit<T, K> {
+  const result = { ...obj }
+  for (const key of keys) {
+    delete result[key as keyof T]
+  }
+  return result as Omit<T, K>
+}

package/src/styles/theme.css

@@ -77,6 +77,13 @@
   --tracking-4xl: -0.02em;
 
   /* Semantic Typography Tokens - F0Text Variants */
+  /* Heading xl */
+  --p-text-heading-xl-font-size: 2.25rem; /* 36px */
+  --p-text-heading-xl-font-line-height: 2.5rem; /* 40px */
+  --p-text-heading-xl-font-letter-spacing: -0.2px;
+  --p-text-heading-xl-font-weight: 600;
+  --p-text-heading-xl-font-family: Inter;
+
   /* Heading lg */
   --p-text-heading-lg-font-size: 1.5rem; /* 24px */
   --p-text-heading-lg-font-line-height: 2rem; /* 32px */