@yahoo/uds 0.4.1 → 0.4.3

package/cli/README.md

@@ -98,6 +98,16 @@ uds purge
 ENABLED_SCALE_AND_COLOR_MODES="dark,large" uds purge
 ```
 
+### Codemod
+
+The `uds codemod` command is here to help you run one-off codemods. In the future, we'll likely apply codemodes via `uds migrate` for you, but this will provide more fine grained control over applying codemods to help you deal with breaking changes to our system. We're flying fast right now, and investing too much energy in full blown migrations is silly as things will just keep changing, but this is a step into an _easy_ migration future!
+
+Any file added to commands/codemod will be available in prompt land.
+
+```shell
+uds codemod
+```
+
 ### Expo (WIP)
 
 The `uds expo` command is for building and launching React Native apps using Expo.

package/cli/codemods/propsToClass.test.tsx

@@ -0,0 +1,97 @@
+import { unlink } from 'node:fs';
+import path from 'node:path';
+
+import * as bluebun from 'bluebun';
+import { afterEach, beforeAll, beforeEach, describe, expect, it, mock, spyOn } from 'bun:test';
+import { IndentationText, Project } from 'ts-morph';
+
+import { propsToClass } from './propsToClass';
+import { sizingPropToClassMap } from './utils/sizingPropToClassMap';
+
+const FILE_NAME = 'PropsToClass.mock.tsx';
+const FILE_BEFORE = `
+import { Button, cx, HStack, Text } from '@yahoo/uds';
+const textClassName = cx('text-primary');
+const otherProps = { height: 'fit' };
+
+export const PageA = () => {
+  return (
+    <HStack width="full" maxHeight="screen">
+      <Button minWidth="full">Click me</Button>
+      <Text width="10/12" className={textClassName}>Some text</Text>
+      <Text {...otherProps}>Some text</Text>
+    </HStack>
+  );
+}
+`.trim();
+const FILE_AFTER = `
+import { Button, cx, HStack, Text } from '@yahoo/uds';
+const textClassName = cx('text-primary');
+const otherProps = { height: 'fit' };
+
+export const PageA = () => {
+  return (
+    <HStack className="w-full max-h-screen">
+      <Button className="min-w-full">Click me</Button>
+      {/* 🙏 TODO: Add w-10/12 to your className attribute */}
+      <Text className={textClassName}>Some text</Text>
+      <Text {...otherProps}>Some text</Text>
+    </HStack>
+  );
+}
+`.trim();
+
+describe('propsToClass', () => {
+  const workspaceDir = Bun.env.PWD;
+  const srcDir = path.join(workspaceDir, 'tsconfig.json');
+  const project = new Project({
+    tsConfigFilePath: srcDir,
+    manipulationSettings: { indentationText: IndentationText.TwoSpaces },
+  });
+
+  beforeAll(async () => {
+    // setup mocks
+    mock.module('bluebun', () => ({ print: () => 'mocked' }));
+  });
+
+  beforeEach(async () => {
+    // Setup files
+    project.createSourceFile(FILE_NAME, FILE_BEFORE, {
+      overwrite: true,
+    });
+  });
+  afterEach(async () => {
+    // teardown files
+    unlink(FILE_NAME, (err) => {
+      if (err) {
+        throw err;
+      }
+    });
+  });
+
+  it('converts props to classNames', async () => {
+    // Sanity check
+    const fileBefore = project.getSourceFile(FILE_NAME)?.getText();
+    expect(fileBefore).toEqual(FILE_BEFORE);
+
+    // Apply the codemod
+    await propsToClass({ propToClassMap: sizingPropToClassMap, project });
+
+    // Confirm it's been transformed
+    const fileAfter = project.getSourceFile(FILE_NAME)?.getText();
+    expect(fileAfter).toEqual(FILE_AFTER);
+  });
+  it('logs a warning when a complex expression is found', async () => {
+    // Spy on the bun logger
+    const spy = spyOn(bluebun, 'print');
+
+    // Apply the codemod
+    await propsToClass({
+      propToClassMap: sizingPropToClassMap,
+      project,
+    });
+
+    // We print 3 times for each complex expression, and 2 times for each spread expression
+    expect(spy).toHaveBeenCalledTimes(5);
+  });
+});

package/cli/codemods/propsToClass.ts

@@ -0,0 +1,221 @@
+import path from 'node:path';
+
+import { blue, green, print, red, yellow } from 'bluebun';
+import {
+  IndentationText,
+  JsxAttributeLike,
+  JsxElement,
+  JsxSpreadAttribute,
+  Node,
+  Project,
+  SyntaxKind,
+} from 'ts-morph';
+
+const throwComplexExpressionWarning = ({
+  attr,
+  element,
+  classNamesToAdd = [],
+  kind,
+}: {
+  attr: JsxAttributeLike | JsxSpreadAttribute;
+  element: JsxElement;
+  classNamesToAdd?: string[];
+  kind?: 'className' | 'other';
+}) => {
+  const sourceFile = element.getSourceFile();
+  const tagName = element.getFirstChildByKind(SyntaxKind.Identifier)?.getText();
+  const spreadExpression = Node.isJsxSpreadAttribute(attr) ? attr.getExpression() : undefined;
+  const initializerText = Node.isJsxAttribute(attr)
+    ? (attr.getInitializer()?.getText() as string)
+    : 'UNKNOWN';
+
+  // Get the line number of the attribute and the element
+  const attrLineNumber = attr.getStartLineNumber();
+  const elementLineNumber = element.getStartLineNumber();
+  const isOneLiner = elementLineNumber === attrLineNumber;
+
+  // Get the position of the attribute and the indentation level of the element
+  const attrLinePos = attr.getStartLinePos();
+  const indentAmount = isOneLiner ? element.getIndentationLevel() : attr.getIndentationLevel();
+  const classNameComment = isOneLiner
+    ? `{/* 🙏 TODO: Add ${classNamesToAdd} to your className attribute */}\n`
+    : `// 🙏 TODO: Add ${classNamesToAdd} to your className attribute\n`;
+
+  // Add a comment to the line above the attribute if this is a className issue
+  if (kind === 'className') {
+    sourceFile.insertText(attrLinePos, classNameComment);
+    sourceFile.indent(attrLinePos, indentAmount);
+
+    // Warn the user about the complex expression
+    print(red(`Yuh-oh.. we found a complex className: ${yellow(initializerText)}`));
+    print(
+      red(
+        `Please take a look at the ${blue(String(tagName))} component in ${blue(`${sourceFile.getBaseName()}:${elementLineNumber}`)} ${red('and update the className manually')}`,
+      ),
+    );
+    print(
+      `${blue('Classes to add:\n' + classNamesToAdd.map((className) => `${green(`+ ${className}`)}`).join('\n'))}\n`,
+    );
+  }
+
+  if (spreadExpression) {
+    print(red(`Yuh-oh.. we found a spread expression: ${yellow(spreadExpression.getText())}`));
+    print(
+      red(
+        `Please take a look at the ${blue(String(tagName))} component in ${blue(`${sourceFile.getBaseName()}:${elementLineNumber}`)} ${red('and confirm the spread expression is correct')}\n`,
+      ),
+    );
+  }
+};
+
+export const getProject = () => {
+  const workspaceDir = Bun.env.PWD;
+  const srcDir = path.join(workspaceDir, 'tsconfig.json');
+  return new Project({
+    tsConfigFilePath: srcDir,
+    manipulationSettings: { indentationText: IndentationText.TwoSpaces },
+  });
+};
+
+const getGlobPattern = (selectedDirs?: string[]) => {
+  let glob = './';
+  if (selectedDirs && selectedDirs.length === 1) {
+    glob += selectedDirs[0];
+  } else if (selectedDirs) {
+    glob += `{${selectedDirs.join(',')}}`;
+  }
+  glob += '/**/*.+(ts|tsx)';
+
+  return glob;
+};
+
+interface PropToClassMap {
+  selectedDirs?: string[];
+  project?: Project;
+  propToClassMap: {
+    [key: string]: {
+      [key: string]: string;
+    };
+  };
+}
+
+// Throw a warning for spread attributes
+const throwSpreadAttributeWarning = ({ jsxElement }: { jsxElement: JsxElement }) => {
+  const spreadAttributes = jsxElement.getDescendantsOfKind(SyntaxKind.JsxSpreadAttribute);
+  spreadAttributes.forEach((attr) => {
+    throwComplexExpressionWarning({ attr, element: jsxElement, kind: 'other' });
+  });
+};
+
+export const propsToClass = async ({
+  propToClassMap,
+  selectedDirs,
+  project = getProject(),
+}: PropToClassMap) => {
+  const glob = getGlobPattern(selectedDirs);
+  project.getSourceFiles(glob).forEach((sourceFile) => {
+    const importedComponents = new Set<string>();
+
+    // Collect imports from '@yahoo/uds'
+    sourceFile.getImportDeclarations().forEach((importDeclaration) => {
+      if (importDeclaration.getModuleSpecifierValue() === '@yahoo/uds') {
+        importDeclaration.getNamedImports().forEach((namedImport) => {
+          importedComponents.add(namedImport.getName());
+        });
+      }
+    });
+
+    // Handle JSX elements from the imported components
+    sourceFile.forEachDescendant((node) => {
+      // Spread attributes are not supported
+      if (node.getKind() === SyntaxKind.JsxElement) {
+        const jsxElement = node as JsxElement;
+        // TODO handle spread attributes more elegant
+        throwSpreadAttributeWarning({ jsxElement });
+      }
+
+      // All other JSX elements we want to handle
+      if (
+        node.getKind() === SyntaxKind.JsxOpeningElement ||
+        node.getKind() === SyntaxKind.JsxSelfClosingElement
+      ) {
+        const jsxElement = node as JsxElement;
+
+        // If this is a UDS components
+        const tagName = jsxElement.getFirstChildByKind(SyntaxKind.Identifier)?.getText();
+        if (tagName && importedComponents.has(tagName)) {
+          // Attributes
+          const attributes =
+            Node.isJsxOpeningElement(jsxElement) || Node.isJsxSelfClosingElement(jsxElement)
+              ? jsxElement.getAttributes()
+              : [];
+          const existingClassNameAttribute = attributes.find(
+            (attr) => Node.isJsxAttribute(attr) && attr.getNameNode().getText() === 'className',
+          );
+          let classNameIsComplex = false;
+          const existingClassNameValues: string[] = [];
+          const classNamesToAdd: string[] = [];
+
+          // Iterate over the attributes and handle the className attribute
+          attributes.forEach((attribute) => {
+            if (Node.isJsxAttribute(attribute)) {
+              const attributeName = attribute.getNameNode().getText() as
+                | keyof typeof propToClassMap
+                | 'className';
+              if (attributeName === 'className') {
+                const initializer = attribute.getInitializer();
+                if (initializer && Node.isStringLiteral(initializer)) {
+                  // If the className is a string literal, add it to the existingClassNameValues
+                  existingClassNameValues.push(initializer.getLiteralText());
+                } else if (initializer) {
+                  // If the className is a complex expression, throw a warning
+                  classNameIsComplex = true;
+                }
+              } else {
+                const initializer = attribute.getInitializer();
+                const attributeValue = initializer
+                  ?.getText()
+                  .replace(
+                    /^["']|["']$/g,
+                    '',
+                  ) as keyof (typeof propToClassMap)[keyof typeof propToClassMap];
+                if (
+                  propToClassMap[attributeName] &&
+                  propToClassMap[attributeName][attributeValue]
+                ) {
+                  classNamesToAdd.push(propToClassMap[attributeName][attributeValue]);
+                  attribute.remove();
+                }
+              }
+            }
+          });
+
+          // Combine the existing className values with the new classNamesToAdd
+          const allClassNames = [...existingClassNameValues, ...classNamesToAdd].join(' ').trim();
+          if (existingClassNameAttribute && allClassNames.length > 0) {
+            // Warn for complex expressions or variables
+            if (classNameIsComplex) {
+              throwComplexExpressionWarning({
+                kind: classNameIsComplex ? 'className' : 'other',
+                attr: existingClassNameAttribute,
+                element: jsxElement,
+                classNamesToAdd,
+              });
+            } else {
+              // @ts-expect-error - setInitializer is not in the types
+              existingClassNameAttribute.setInitializer(`"${allClassNames}"`);
+            }
+          } else if (classNamesToAdd.length > 0 && !existingClassNameAttribute) {
+            // @ts-expect-error - addAttribute is not in the types
+            jsxElement.addAttribute({
+              name: 'className',
+              initializer: `"${classNamesToAdd.join(' ')}"`,
+            });
+          }
+        }
+      }
+    });
+  });
+
+  await project.save();
+};

package/cli/codemods/utils/sizingPropToClassMap.ts

@@ -0,0 +1,89 @@
+/** This object represents the props we want to convert into classNames */
+export const sizingPropToClassMap = {
+  height: {
+    auto: 'h-auto',
+    full: 'h-full',
+    screen: 'h-screen',
+    min: 'h-min',
+    max: 'h-max',
+    fit: 'h-fit',
+    '1/2': 'h-1/2',
+    '1/3': 'h-1/3',
+    '2/3': 'h-2/3',
+    '1/4': 'h-1/4',
+    '2/4': 'h-2/4',
+    '3/4': 'h-3/4',
+    '1/5': 'h-1/5',
+    '2/5': 'h-2/5',
+    '3/5': 'h-3/5',
+    '4/5': 'h-4/5',
+    '1/6': 'h-1/6',
+    '2/6': 'h-2/6',
+    '3/6': 'h-3/6',
+    '4/6': 'h-4/6',
+    '5/6': 'h-5/6',
+  },
+  minHeight: {
+    full: 'min-h-full',
+    min: 'min-h-min',
+    max: 'min-h-max',
+    fit: 'min-h-fit',
+    screen: 'min-h-screen',
+  },
+  maxHeight: {
+    full: 'max-h-full',
+    min: 'max-h-min',
+    max: 'max-h-max',
+    fit: 'max-h-fit',
+    screen: 'max-h-screen',
+    none: 'max-h-[0px]',
+  },
+  width: {
+    auto: 'w-auto',
+    full: 'w-full',
+    screen: 'w-screen',
+    min: 'w-min',
+    max: 'w-max',
+    fit: 'w-fit',
+    '1/2': 'w-1/2',
+    '1/3': 'w-1/3',
+    '2/3': 'w-2/3',
+    '1/4': 'w-1/4',
+    '2/4': 'w-2/4',
+    '3/4': 'w-3/4',
+    '1/5': 'w-1/5',
+    '2/5': 'w-2/5',
+    '3/5': 'w-3/5',
+    '4/5': 'w-4/5',
+    '1/6': 'w-1/6',
+    '2/6': 'w-2/6',
+    '3/6': 'w-3/6',
+    '4/6': 'w-4/6',
+    '5/6': 'w-5/6',
+    '1/12': 'w-1/12',
+    '2/12': 'w-2/12',
+    '3/12': 'w-3/12',
+    '4/12': 'w-4/12',
+    '5/12': 'w-5/12',
+    '6/12': 'w-6/12',
+    '7/12': 'w-7/12',
+    '8/12': 'w-8/12',
+    '9/12': 'w-9/12',
+    '10/12': 'w-10/12',
+    '11/12': 'w-11/12',
+  },
+  minWidth: {
+    full: 'min-w-full',
+    min: 'min-w-min',
+    max: 'min-w-max',
+    fit: 'min-w-fit',
+    screen: 'min-w-screen',
+  },
+  maxWidth: {
+    none: 'max-w-[0px]',
+    full: 'max-w-full',
+    min: 'max-w-min',
+    max: 'max-w-max',
+    fit: 'max-w-fit',
+  },
+} as const;

package/cli/commands/codemod/codemod.ts

@@ -0,0 +1,87 @@
+import { type Props } from 'bluebun';
+import prompts from 'prompts';
+
+import { getCommandHelp, getSubCommandsChoices } from '../../utils/getCommandHelp';
+import { getDirChoices } from '../../utils/getDirChoices';
+
+export default {
+  name: 'codemod',
+  description: `Apply a codemod`,
+  run: async (props: Props) => {
+    const subCommands = await getSubCommandsChoices(props);
+    const subCommandIsValid = subCommands.some(({ value }) => props?.first === value);
+    const isRootCommand = Boolean(!props?.first);
+    const dirChoices = getDirChoices();
+
+    if (isRootCommand) {
+      // Prompt the user to setup the codemod runner
+      const { selectedDirs, selectedCodemods, didConfirm } = await prompts([
+        {
+          type: 'multiselect',
+          name: 'selectedDirs',
+          instructions: false,
+          message: 'Where are your sourcefiles?',
+          hint: '(Space to select. Return to submit)',
+          choices: dirChoices,
+        },
+        {
+          type: 'multiselect',
+          name: 'selectedCodemods',
+          instructions: false,
+          message: 'Select the codemods you want to run',
+          hint: '(Space to select. Return to submit)',
+          choices: subCommands,
+        },
+        {
+          type: 'toggle',
+          name: 'didConfirm',
+          message: 'Are you ready?',
+          initial: true,
+          active: 'yes',
+          inactive: 'no',
+        },
+      ]);
+
+      // If we bail at anypoint, just exit
+      if (!selectedDirs?.length || !selectedCodemods?.length || !didConfirm) {
+        process.exit(1);
+      }
+
+      // Run each codemod and provide the selectedDirs
+      return Promise.all(
+        selectedCodemods.map(async (selectedCodemod: string[]) => {
+          return await import(`./${selectedCodemod}`).then((codemod) =>
+            codemod.default.run({ ...props, selectedDirs }),
+          );
+        }),
+      );
+    } else if (subCommandIsValid) {
+      // Prompt the user to select a directory
+      const { selectedDirs } = await prompts({
+        type: 'multiselect',
+        name: 'selectedDirs',
+        instructions: false,
+        message: 'Where are your sourcefiles?',
+        hint: '(Space to select. Return to submit)',
+        choices: dirChoices,
+      });
+
+      // If no directory is selected, exit
+      if (!selectedDirs?.length) {
+        process.exit(1);
+      }
+
+      // Run the codemod
+      return (await import(`./${props.first}`)).default.run({
+        ...props,
+        selectedDirs,
+      });
+    } else {
+      // Throw the help message
+      await getCommandHelp({
+        ...props,
+        notes: `That codemod does not exist. Try one of the codemods listed above!`,
+      });
+    }
+  },
+};

package/cli/commands/codemod/sizingProps.ts

@@ -0,0 +1,17 @@
+import { type Props, spinStart, spinStop } from 'bluebun';
+
+import { propsToClass } from '../../codemods/propsToClass';
+import { sizingPropToClassMap } from '../../codemods/utils/sizingPropToClassMap';
+
+export default {
+  name: 'sizingProps',
+  description: `Convert sizing props to classNames`,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  run: async (props: Props & { selectedDirs?: string[] }) => {
+    spinStart('Running codemod...');
+
+    await propsToClass({ propToClassMap: sizingPropToClassMap, selectedDirs: props.selectedDirs });
+
+    spinStop('Codemod complete! Peek the diff and commit your changes!');
+  },
+};

package/cli/preload.ts

@@ -4,7 +4,7 @@ const mockFastGlob = jest.fn().mockResolvedValue(['/pages/PageA.tsx', '/pages/Pa
 
 mock.module('fast-glob', () => ({ __esModule: true, default: mockFastGlob }));
 
-mock.module('@yahoo/uds/tailwindPurge', () => ({
+mock.module('@yahoo/uds/tailwind/purger', () => ({
   componentsDependencies: {
     Button: ['Icon', 'Pressable', 'Text'],
     Spinner: [],

package/cli/utils/getCommandHelp.ts

@@ -10,6 +10,7 @@ import {
   type Props,
   white,
 } from 'bluebun';
+import { type Choice } from 'prompts';
 
 /**
  * The formatting from bluebun for the help command is not great.
@@ -21,8 +22,8 @@ import {
  * - https://github.com/wobsoriano/blipgloss
  * - https://github.com/wobsoriano/bun-promptx
  */
-async function formatHelp(initialProps: Props) {
-  const { name, commandPath } = initialProps;
+async function formatHelp(initialProps: Props & { notes?: string }) {
+  const { name, commandPath, notes } = initialProps;
 
   const categoryToFilter = commandPath?.length ? commandPath[0] : undefined;
 
@@ -63,11 +64,49 @@ ${magenta(`Usage: ${white(`${name} <command>`)}`)}
 
 ${magenta('Commands:')}
 ${helpLines.join('\n')}
+${notes ? `\n${magenta('Notes:')} ${notes}\n` : ''}
 `;
 
   return help;
 }
 
-export async function getCommandHelp(props: Props) {
+export async function getCommandHelp(props: Props & { notes?: string }) {
   print(await formatHelp(props));
 }
+
+// This function is used to get the choices for subcommands of a command
+export async function getSubCommandsChoices(initialProps: Props) {
+  // Get the command tree for the initialProps
+  const categoryToFilter = initialProps.commandPath?.length
+    ? initialProps.commandPath[0]
+    : undefined;
+  const _tree = await commandTree(initialProps);
+  const tree = categoryToFilter ? { [categoryToFilter]: _tree[categoryToFilter] } : _tree;
+
+  // This function is used to generate a list of choices from a command tree
+  function generateCommandList(cmdTree: CommandTree): Choice[] {
+    // For each key in the command tree, generate a choice
+    return Object.keys(cmdTree).flatMap((key) => {
+      const command = cmdTree[key];
+      const lines: Choice[] = [];
+
+      // Add a choice for the command
+      lines.push({
+        title: `${command.name} (${command.description})`,
+        value: command.name,
+        selected: true,
+      });
+
+      // If the command has subcommands, recursively generate choices for the subcommands and add them to the list
+      if (command.subcommands) {
+        lines.push(...generateCommandList(command.subcommands));
+      }
+
+      // Return the list of choices
+      return lines;
+    });
+  }
+
+  // Return a list of choices for all subcommands
+  return generateCommandList(tree).filter((command) => command.value !== categoryToFilter);
+}

package/cli/utils/getDirChoices.ts

@@ -0,0 +1,22 @@
+import fs from 'node:fs';
+
+import { Choice } from 'prompts';
+
+const lessCommonDirs = [
+  'node_modules',
+  '.git',
+  '.github',
+  '.husky',
+  '.vscode',
+  'dist',
+  'build',
+  'public',
+];
+export const getDirChoices = (rootDir = '.'): Choice[] => {
+  return fs
+    .readdirSync(rootDir)
+    .filter(
+      (dir) => fs.statSync(dir).isDirectory() && dir !== 'node_modules' && !dir.startsWith('.'),
+    )
+    .map((dir) => ({ title: dir, value: dir, selected: !lessCommonDirs.includes(dir) }));
+};

package/cli/utils/purgeCSS.ts

@@ -6,11 +6,11 @@ import {
   componentToVariants,
   variantsList,
   variantToTailwindClass,
-} from '@yahoo/uds/tailwindPurge';
+} from '@yahoo/uds/tailwind/purger';
 import {
   findReferencesAsJsxElements,
   getUsedPropsInReference,
-} from '@yahoo/uds/tailwindPurge/utils';
+} from '@yahoo/uds/tailwind/purger/utils';
 import {
   ColorModeConfig,
   DARK_COLOR_MODE_CLASSNAME,

package/dist/{Image.native-DUAFJodS.d.ts → Image.native-CyJCMvgr.d.cts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { i as UniversalPressableProps, j as UniversalIconButtonProps, k as UniversalImageProps } from './types-COiuE8XK.js';
+import { b as UniversalPressableProps, c as UniversalIconButtonProps, d as UniversalImageProps } from './types-DRP5tWZG.cjs';
 import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ImageProps as ImageProps$1 } from 'expo-image';
@@ -33,6 +33,6 @@ interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImag
 /**
  * An image element
  */
-declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, minHeight, maxHeight, minWidth, maxWidth, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
 export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };