docs: inline Derive component and derive() string docs (6 files)

docs/en-US/next/api/components/derive.mdx

@@ -2,4 +2,250 @@
 title: Derive
 description: API reference for the Derive component
 ---
-{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}
+
+## Overview
+
+The `<Derive>` component is used to handle sentence fragmentation and reusable content without sacrificing word agreement, conjugation, and word order changes.
+In the following example, two separate translations are created: "The beautiful boy plays with the ball" and "The beautiful girl plays with the ball".
+
+```jsx
+function getSubject(gender) {
+  return gender === 'male' ? 'boy' : 'girl';
+}
+
+<T>
+  The beautiful <Derive>{getSubject(gender)}</Derive> plays with the ball.
+</T>;
+```
+
+The `<Derive>` component tells the CLI tool to dereference a function call and catalog all possible content being returned by that function, treating every return statement as if it had a `<T>` component wrapping it.
+
+<Callout>
+  **Advanced Usage:**
+  The `<Derive>` component is an advanced feature and should be used with caution as it can generate deceptively large numbers of translation entries.
+  Furthermore, `<Derive>` enforces a strict requirement that all possible content permutations must be statically analyzable.
+</Callout>
+
+For more information, see the release notes for [gt-next@6.8.0](/devlog/gt-next_v6_8_0).
+
+---
+
+## Reference
+
+### Props
+
+<TypeTable
+  type={{
+    children: {
+      type: 'function invocation',
+      optional: false,
+    },
+  }}
+/>
+
+### Description
+
+| Prop       | Description                                                                                        |
+| ---------- | -------------------------------------------------------------------------------------------------- |
+| `children` | Static content. The CLI tool will analyze all possible return values. |
+
+
+### Returns
+
+`React.JSX.Element` containing the rendered content from the function call, with each possible outcome creating a separate translation entry.
+
+---
+
+## Behavior
+
+### Build time analysis
+
+During the build process, the CLI tool analyzes the children of `<Derive>` components and creates separate translation entries for each possible outcome.
+This enables proper grammatical agreement and word order handling across different languages.
+
+### Requirements
+
+The children of `<Derive>` components must be determinable at build time. The supported syntax includes:
+
+- String, number, and boolean literals
+- JSX expressions with nested `<Derive>` and `<Var>` components
+- Ternary operators
+- Function invocations (that have statically analyzable outcomes)
+
+---
+
+## Examples
+
+### Basic usage
+
+Use `<Derive>` to handle dynamic content that affects sentence structure.
+
+```jsx title="BasicExample.jsx" copy
+import { T, Derive } from 'gt-next';
+
+export default function Example({ gender }) {
+  return (
+    <T>
+      The <Derive>{gender === 'male' ? 'boy' : 'girl'}</Derive> is beautiful.
+    </T>
+  );
+}
+```
+
+This creates two translation entries:
+
+- "The boy is beautiful"
+- "The girl is beautiful"
+
+### With function invocations
+
+Use `<Derive>` to handle dynamic content that affects sentence structure from a function invocation.
+
+```jsx title="BasicExample.jsx" copy
+import { T, Derive } from 'gt-next';
+
+function getSubject(gender) {
+  return gender === 'male' ? 'boy' : 'girl';
+}
+
+export default function Example({ gender }) {
+  return (
+    <T>
+      The <Derive>{getSubject(gender)}</Derive> is beautiful.
+    </T>
+  );
+}
+```
+
+### With variables
+
+Combine `<Derive>` with `<Var>` for dynamic content within static function returns.
+
+```jsx title="WithVariables.jsx" copy
+import { T, Derive, Var } from 'gt-next';
+
+
+function getTitle(title) {
+  return title === 'Mr.' ? 'Mr.' : 'Ms.';
+}
+
+function getGreeting(title) {
+  return (
+    <>
+      Hello, <Derive>{getTitle(title)}</Derive>. How are you, <Var>{name}</Var>?
+    </>
+  );
+}
+
+export default function Greeting({ title, name }) {
+  return (
+    <T>
+      <Derive>{getGreeting(title)}</Derive>
+    </T>
+  );
+}
+```
+
+### Multiple Derive components
+
+Be careful when using multiple `<Derive>` components as they multiply translation entries.
+
+```jsx title="MultipleDerive.jsx" copy
+import { T, Derive } from 'gt-next';
+
+function getSubject(gender) {
+  return gender === 'male' ? 'boy' : 'girl';
+}
+
+function getObject(toy) {
+  return toy === 'ball' ? 'ball' : 'crayon';
+}
+
+export default function PlayExample({ gender, toy }) {
+  return (
+    <T>
+      <Derive>{getSubject(gender)}</Derive> plays with the{' '}
+      <Derive>{getObject(toy)}</Derive>.
+    </T>
+  );
+}
+```
+
+This creates four translation entries (2 × 2 combinations):
+
+- "boy plays with the ball"
+- "boy plays with the crayon"
+- "girl plays with the ball"
+- "girl plays with the crayon"
+
+### Supported function syntax
+
+```jsx title="SupportedSyntax.jsx" copy
+function getExamples(key) {
+  switch (key) {
+    case 'literals':
+      if (condition1) {
+        return 'The boy';
+      } else if (condition2) {
+        return 22;
+      } else {
+        return true;
+      }
+    case 'jsx':
+      return (
+        <>
+          Hello, <Derive>{getTitle(title)}</Derive>. How are you,{' '}
+          <Var>{name}</Var>?
+        </>
+      );
+    case 'ternary':
+      return condition ? 'The boy' : 'The girl';
+    case 'function_calls':
+      return otherStaticFunction();
+  }
+}
+```
+
+---
+
+## Limitations
+
+### Performance impact
+
+Using `<Derive>` can create exponential growth in translation entries.
+Each additional `<Derive>` component multiplies the total number of translations.
+
+### Variable content
+
+Any dynamic or variable content within static function returns must be wrapped in `<Var>` components.
+
+```jsx
+// Correct
+function getContent() {
+  return (
+    <>
+      Hello, <Var>{userName}</Var>!
+    </>
+  );
+}
+
+// Incorrect - will cause build errors
+function getContent() {
+  return <>Hello, {userName}!</>;
+}
+```
+
+---
+
+## Notes
+
+- The `<Derive>` component is designed for handling sentence fragmentation while maintaining grammatical accuracy across languages.
+- Always consider the performance implications of multiple `<Derive>` components in a single translation.
+- Treat every return statement in static functions as if wrapped with a `<T>` component.
+- Use `<Derive>` judiciously - prefer simpler translation structures when possible.
+
+## Next steps
+
+- For variable content within translations, see the [`<Var>`](/docs/next/api/components/var) component.
+- For the main translation component, see [`<T>`](/docs/next/api/components/t).
+- For the string equivalent of `<Derive>`, see [`derive`](/docs/next/api/strings/derive).