@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.4

package/lib/atoms/StyledText/index.d.ts

@@ -1,3 +1,2 @@
 export * from './StyledText';
 export * from './LegacyStyledText';
-export * from './PlaceholderStyledText';

package/lib/hardware-sim/BaseDeck/BaseDeck.d.ts

@@ -1,6 +1,7 @@
 import { Module } from '../Module';
 import type { ComponentProps, ReactNode } from 'react';
 import type { DeckConfiguration, LabwareDefinition, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
+import type { Svg } from '../../primitives';
 import type { WellFill, WellGroup } from '../Labware';
 export interface LabwareOnDeck {
     labwareLocation: LabwareLocation;
@@ -54,10 +55,7 @@ interface BaseDeckProps {
     /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
     animatedSVG?: boolean;
     /** extra props to pass to svg tag */
-    /** NOTE: typing as any because running into some TS issues with React-spring,
-     * CSS Modules & Styled-components not playing together nicely
-     */
-    svgProps?: any;
+    svgProps?: ComponentProps<typeof Svg>;
 }
 export declare function BaseDeck(props: BaseDeckProps): JSX.Element;
 export {};

package/lib/hardware-sim/Deck/RobotCoordsForeignDiv.d.ts

@@ -1,6 +1,5 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { StyleProps } from '../../primitives';
-export type PositionType = 'absolute' | 'relative' | 'fixed';
+import { Box } from '../../primitives';
+import type { ComponentProps, ReactNode } from 'react';
 export interface RobotCoordsForeignDivProps {
     width?: string | number;
     height?: string | number;
@@ -8,10 +7,10 @@ export interface RobotCoordsForeignDivProps {
     y?: string | number;
     children?: ReactNode;
     outerProps?: any;
-    innerDivProps?: StyleProps;
-    innerDivEvents?: HTMLAttributes<HTMLDivElement>;
+    innerDivProps?: ComponentProps<typeof Box>;
     transformWithSVG?: boolean;
     extraTransform?: string;
+    /** optional data-testid to test foreignObjects in cypress */
     dataTestId?: string;
 }
-export declare const RobotCoordsForeignDiv: ({ children, x, y, height, width, outerProps, innerDivProps, transformWithSVG, extraTransform, dataTestId, innerDivEvents, }: RobotCoordsForeignDivProps) => JSX.Element;
+export declare const RobotCoordsForeignDiv: (props: RobotCoordsForeignDivProps) => JSX.Element;

package/lib/hardware-sim/Deck/RobotCoordsForeignObject.d.ts

@@ -1,15 +1,12 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { StyleProps } from '../../primitives';
-export type FlexDirection = 'column' | 'row';
+import { Flex, ForeignObject } from '../../primitives';
+import type { ComponentProps, ReactNode } from 'react';
 export interface RobotCoordsForeignObjectProps {
     width: string | number;
     height: string | number;
     x: string | number;
     y: string | number;
     children?: ReactNode;
-    foreignObjectProps?: StyleProps;
-    foreignObjectEvents?: HTMLAttributes<HTMLDivElement>;
-    flexProps?: StyleProps;
-    flexEvents?: HTMLAttributes<HTMLDivElement>;
+    foreignObjectProps?: ComponentProps<typeof ForeignObject>;
+    flexProps?: ComponentProps<typeof Flex>;
 }
-export declare const RobotCoordsForeignObject: ({ children, x, y, height, width, foreignObjectEvents, foreignObjectProps, flexProps, flexEvents, }: RobotCoordsForeignObjectProps) => JSX.Element;
+export declare const RobotCoordsForeignObject: (props: RobotCoordsForeignObjectProps) => JSX.Element;

package/lib/hardware-sim/Deck/RobotWorkSpace.d.ts

@@ -1,5 +1,6 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { AddressableArea, DeckDefinition } from '@opentrons/shared-data';
+import type { StyleProps } from '../../primitives';
 export interface RobotWorkSpaceRenderProps {
     addressableAreasById: {
         [addressableAreaId: string]: AddressableArea;
@@ -24,7 +25,7 @@ type BaseProps = {
      */
     viewBox: string;
 });
-export type RobotWorkSpaceProps = BaseProps & CSSProperties;
+export type RobotWorkSpaceProps = BaseProps & StyleProps;
 /**
  * A wrapper for rendering the robot deck, labware, etc. from a top-down perspective.
  *

package/lib/hardware-sim/Labware/LabwareRender.d.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties, RefObject } from 'react';
+import type { CSSProperties } from 'styled-components';
+import type { RefObject } from 'react';
 import type { LabwareDefinition } from '@opentrons/shared-data';
 import type { HighlightedWellLabels, WellFill, WellGroup, WellMouseEvent, WellStroke } from './labwareInternals/types';
 export declare const WELL_LABEL_OPTIONS: {

package/lib/hardware-sim/Labware/labwareInternals/FilledWells.d.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties, MemoExoticComponent } from 'react';
+import type { CSSProperties } from 'styled-components';
+import type { MemoExoticComponent } from 'react';
 import type { LabwareDefinition } from '@opentrons/shared-data';
 export interface FilledWellsProps {
     definition: LabwareDefinition;

package/lib/hardware-sim/Labware/labwareInternals/LabwareOutline.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties } from 'styled-components';
 import type { LabwareDefinition } from '@opentrons/shared-data';
 export type LabwareOutlineProps = {
     /** if this labware is a tip rack, darken background and lighten borderx dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to false */

package/lib/hardware-sim/Labware/labwareInternals/Well.d.ts

@@ -1,7 +1,8 @@
 import type { CSSProperties, MemoExoticComponent } from 'react';
 import type { LabwareWell } from '@opentrons/shared-data';
+import type { StyleProps } from '../../../primitives';
 import type { WellMouseEvent } from './types';
-export interface WellProps extends CSSProperties {
+export interface WellProps extends StyleProps {
     /** Well Name (eg 'A1') */
     wellName: string;
     /** well object from labware definition */

package/lib/hardware-sim/Module/index.d.ts

@@ -12,20 +12,6 @@ interface Props {
     innerProps?: ComponentProps<typeof Thermocycler> | ComponentProps<typeof HeaterShaker> | ComponentProps<typeof Temperature> | {};
     statusInfo?: ReactNode;
     children?: ReactNode;
-    /**
-     * How child components should be positioned.
-     *
-     * "offsetToSlot" - The SVG origin of a child will be at the labware mating interface of the
-     *   module, which is the front-left (-x, -y) corner of the slot on top of the module.
-     *
-     * todo(mm, 2025-07-21):
-     * 1. Add a "passThrough" mode that disables the "offsetToSlot" behavior,
-     *    to allow child components to replace it with their own SVG transform,
-     *    to support labware schema 3.
-     * 2. Migrate all existing call sites to use "passThrough".
-     * 3. Remove "offsetToSlot".
-     */
-    childrenPositioningMode: 'offsetToSlot';
     /**
      * Used for applying slot-specific positioning adjustments.
      * If you're rendering the module on a deck, supply this for correct positioning.

package/lib/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.d.ts

@@ -1,9 +1,7 @@
-import type { ReactNode } from 'react';
-interface RobotCoordinateSpaceProps {
+import { Svg } from '../../primitives';
+import type { ComponentProps } from 'react';
+interface RobotCoordinateSpaceProps extends ComponentProps<typeof Svg> {
     animated?: boolean;
-    children?: ReactNode;
-    height?: string;
-    viewBox?: string;
 }
 export declare function RobotCoordinateSpace(props: RobotCoordinateSpaceProps): JSX.Element;
 export {};

package/lib/icons/ModuleIcon.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import type { ModuleType } from '@opentrons/shared-data';
+import type { StyleProps } from '../primitives/types';
 export type ModuleIconName = 'ot-magnet-v2' | 'ot-heater-shaker' | 'ot-temperature-v2' | 'ot-magnet-v2' | 'ot-thermocycler' | 'ot-absorbance' | 'ot-flex-stacker';
 export declare const MODULE_ICON_NAME_BY_TYPE: {
     [type in ModuleType]: ModuleIconName;
 };
-interface ModuleIconProps {
+interface ModuleIconProps extends StyleProps {
     moduleType: ModuleType;
 }
-declare function ModuleIconComponent(props: ModuleIconProps): JSX.Element;
-export declare const ModuleIcon: typeof ModuleIconComponent & import("react").ComponentType<ModuleIconProps & import("..").StyleProps>;
+export declare function ModuleIcon(props: ModuleIconProps): JSX.Element;
 export {};

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+import './styles/global.css';
 export * from './hooks';
 export * from './utils';
 export * from './alerts';